[SHOPTIME-2882] EIC / 독일 / Detail / 할부가가 QR code 말풍선에 가려짐

[수정파일]

  1. UnableOption.jsx
  2. UnableOption.module.less

[수정내용]

  1. 할부 표시를 하는 텍스트의 길이가 QRCode 말풍선을 침범 할 정도로 길어 질 경우 2줄로 보이도록 수정

com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx

@@ -122,6 +122,7 @@ export default function UnableOption({
 
     return null;
   }, [productInfo, rewd]);
+
   const handleSMSClick = useCallback(() => {
     dispatch(setShowPopup(Config.ACTIVE_POPUP.smsPopup));
 
@@ -307,9 +308,11 @@ export default function UnableOption({
         </div>
         {targetReward && installmentMonths && (
           <div className={css.installedPrc}>
-            {$L("OR {price} with {months}-month financing")
-              .replace("{price}", targetReward)
-              .replace("{months}", installmentMonths)}
+            <h3 className={css.text}>
+              {$L("OR {price} with {months}-month financing")
+                .replace("{price}", targetReward)
+                .replace("{months}", installmentMonths)}
+            </h3>
           </div>
         )}
         {promotionCode && (

com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less

@@ -157,9 +157,13 @@
     padding: 22px 30px;
     border-bottom: 1px solid @COLOR_GRAY02;
     background: @BG_COLOR_02;
-    color: @COLOR_GRAY05;
-    font-weight: bold;
-    font-size: 24px;
+
+    .text {
+      font-weight: bold;
+      font-size: 24px;
+      color: @COLOR_GRAY05;
+      width: 540px;
+    }
   }
 
   .promotionContainer {
@@ -193,7 +197,6 @@
   .bottomContainer {
     .btnContainer {
       .size(@w: 846px , @h: 78px);
-
       .flex(@justifyCenter:space-between);
       .smsBtn {
         min-width: 756px;
@@ -208,6 +211,7 @@
       line-height: 1.1;
       margin-top: 16px;
       width: 810px;
+      overflow: auto;
     }
   }
 }