QRCODE 생성 라이브러리 및 코드 추가 / 티비에서 css깨지는 부분 수정

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"
 	]
-}
+}

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;

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 {

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
+          <QRCode value={productData?.qrcodeUrl} size={160} />
-            src={
-              "https://qt3-m.shoptime.lgappstv.com/purchase?cntryCd=US&patnrId=9&prdtId=LDPH5554S&shopTpNm=product"
-            }
-            alt=""
-          />
         </div>
       </div>
     </Container>

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;

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]);
 

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;