From cad5bc17d4bef64c5d715645d19e69d44392a1a9 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: Mon, 4 Mar 2024 16:01:19 +0900
Subject: [PATCH] =?UTF-8?q?QRCODE=20=EC=83=9D=EC=84=B1=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EB=B0=8F=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80=20/=20=ED=8B=B0=EB=B9=84?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20css=EA=B9=A8=EC=A7=80=EB=8A=94=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 com.twin.app.shoptime/package.json                   |  3 ++-
 .../src/components/TabLayout/TabLayout.module.less   |  2 +-
 .../DetailPanel/components/Indicator.module.less     |  1 +
 .../views/DetailPanel/container/ProductThumbnail.jsx | 12 +++++-------
 .../container/ProductThumbnail.module.less           | 12 ++++++++++--
 .../src/views/DetailPanel/container/YouMayLike.jsx   |  2 +-
 .../DetailPanel/container/YouMayLike.module.less     |  7 +------
 7 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/com.twin.app.shoptime/package.json b/com.twin.app.shoptime/package.json
index f9221211..31ce14f1 100644
--- a/com.twin.app.shoptime/package.json
+++ b/com.twin.app.shoptime/package.json
@@ -42,6 +42,7 @@
 		"axios": "^0.21.1",
 		"ilib": "^14.3.0",
 		"prop-types": "^15.6.2",
+		"qrcode.react": "^3.1.0",
 		"react": "^16.7.0",
 		"react-dom": "^16.7.0",
 		"react-redux": "^7.2.3",
@@ -51,4 +52,4 @@
 	"browserslist": [
 		"chrome 38"
 	]
-}
\ No newline at end of file
+}
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
index bcdf5cf3..b6b93ff2 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
@@ -58,7 +58,7 @@
 
   &.secondDepthLayout {
     width: 386px;
-    height: calc(100%);
+    height: 1080px;
     opacity: 0.95;
     box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08);
     padding-bottom: unset;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less
index 30c4db60..de98592e 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less
@@ -3,6 +3,7 @@
 
 .Wrap {
   margin: 30px 0 0 10px;
+  width: 714px;
   height: 560px;
   display: flex;
   .thumbnail {
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
index 098a1d57..f2ddd747 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import QRCode from "qrcode.react";
 import { useSelector } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
@@ -28,6 +29,7 @@ export default function ProductThumbnail() {
   const [tabLabel, setTabLabel] = useState("");
   const { getScrollTo, scrollTop } = useScrollTo();
 
+  console.log("#productData", productData);
   const scrollTo = useRef(null);
   const buttonLabel = [
     { label: $L("DESCRIPTION") },
@@ -95,7 +97,7 @@ export default function ProductThumbnail() {
               verticalScrollbar="auto"
               cbScrollTo={getScrollTo}
             >
-              <div>{DESCRIPTION}</div>
+              {DESCRIPTION}
             </TScroller>
             <button className={css.downButton} onClick={scrollToBottom} />
           </div>
@@ -123,13 +125,9 @@ export default function ProductThumbnail() {
             </SpottableComponent>
           ))}
         </div>
+        {/* qrcodeUrl */}
         <div className={css.qrcode}>
-          <img
-            src={
-              "https://qt3-m.shoptime.lgappstv.com/purchase?cntryCd=US&patnrId=9&prdtId=LDPH5554S&shopTpNm=product"
-            }
-            alt=""
-          />
+          <QRCode value={productData?.qrcodeUrl} size={160} />
         </div>
       </div>
     </Container>
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
index 711296a2..88fa2432 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
@@ -62,8 +62,12 @@
     border-radius: 6px;
     border: solid 1px #fff;
     background-image: linear-gradient(to top, #f5f5f5, #fff);
-
     margin: 10px 0 0 6px;
+
+    > canvas {
+      .size(@w: 160px, @h: 160px);
+      margin: 16px 16px 16px 16px;
+    }
   }
 }
 
@@ -91,14 +95,18 @@
       .font(@fontFamily: @baseFontBold,  @fontSize: 36px);
       padding-top: 24px;
       margin-bottom: 14px;
+      margin-right: 22px;
     }
     .starRating {
       margin-top: 3px;
     }
   }
   .tagWrap {
+    width: 770px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
   }
 }
 .line {
@@ -139,7 +147,7 @@
   color: #808080;
   text-align: left;
   line-height: 1.3;
-  position: relative;
+  height: 250px;
 
   > div {
     padding-right: 75px;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.jsx b/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.jsx
index 77299488..66173da1 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.jsx
@@ -64,7 +64,7 @@ export default function YouMayLike() {
 
   const onButtonClick = useCallback(() => {
     if (cursorVisible) {
-      setExpanded(true);
+      setExpanded((prev) => !prev);
     }
   }, [cursorVisible]);
 
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.module.less b/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.module.less
index 3c362cd0..cada2bcf 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/YouMayLike.module.less
@@ -44,18 +44,13 @@
   }
   .itemList {
     padding-left: 60px;
+    width: 100%;
     height: 440px;
-
-    > div {
-      background-color: unset;
-    }
   }
 
   .arrow {
-    //.position(@position: absolute, @top: auto, @left: auto,  @right: auto, @bottom: auto);
     .size(@w: 42px,@h: 42px);
     background-position: center;
-    //background-size: cover;
     background-image: url("../../../../assets/images/icons/ic-arrow-up.svg");
     margin-left: 19px;