From ce62a9cdea93f342f84e2d8435708cf111f6c268 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?=
 <dongyoung@godong-yeong-ui-noteubug.local>
Date: Tue, 8 Oct 2024 14:49:29 +0900
Subject: [PATCH] =?UTF-8?q?[SHOPTIME-3160]=20Theme=20Detail=20/=20QR=20?=
 =?UTF-8?q?=ED=88=B4=ED=8C=81=EA=B3=BC=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20?=
 =?UTF-8?q?=EA=B2=B9=EC=B9=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[수정파일]

   1. src/views/DetailPanel/UnableProduct/UnableOption.jsx
   2. src/views/DetailPanel/UnableProduct/UnableOption.module.less

[수정내용]

  1.  disclaimer 내용이 길어지면서 2줄이 되면서 버튼이 위로 올라가서 QRCode 말풍선과 UI가 겹치는현상이 생김
      2줄로 넘어가는 시점에서 Marqee 처리
---
 .../views/DetailPanel/UnableProduct/UnableOption.jsx   | 10 ++++++++--
 .../DetailPanel/UnableProduct/UnableOption.module.less |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
index ba9d3be4..3b0af92f 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
@@ -4,6 +4,7 @@ import classNames from "classnames";
 import { useDispatch } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
+import Marquee from "@enact/ui/Marquee";
 
 import { setShowPopup } from "../../../actions/commonActions";
 import TButton from "../../../components/TButton/TButton";
@@ -37,7 +38,10 @@ export default function UnableOption({
     "isLoading",
     (state) => state.common.appStatus?.showLoadingPanel?.show
   );
-  const [favoriteFlag, setFavoriteFlag] = USE_STATE("favoriteFlag", productInfo?.favorYn);
+  const [favoriteFlag, setFavoriteFlag] = USE_STATE(
+    "favoriteFlag",
+    productInfo?.favorYn
+  );
   const tooltipDes = $L("Scan for more information about the product.");
 
   const {
@@ -333,7 +337,9 @@ export default function UnableOption({
             onFavoriteFlagChanged={onFavoriteFlagChanged}
           />
         </div>
-        <div className={css.disclaimerContainer}>{productInfo?.disclaimer}</div>
+        <Marquee marqueeOn="render" className={css.disclaimerContainer}>
+          {productInfo?.disclaimer}
+        </Marquee>
       </div>
     </div>
   );
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
index 721b5d13..8a96c79c 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
@@ -207,6 +207,7 @@
       padding-left: 28px;
       line-height: 1.1;
       margin-top: 16px;
+      width: 810px;
     }
   }
 }