[TQRCode] QRCode 필요 정보 추가

com.twin.app.shoptime/src/components/TQRCode/TQRCode.jsx

@@ -1,17 +1,29 @@
 import React, { useEffect, useRef, useState } from "react";
 
-//!!raw-loader!../../utils/qrcode.min.js
+import { useDispatch, useSelector } from "react-redux";
 import QRCodeMin from "!!raw-loader!../../utils/qrcode.min.js";
 
+import { getDeviceAdditionInfo } from "../../actions/deviceActions";
+import { scaleH, scaleW } from "../../utils/helperMethods";
+
 let script = document.createElement("script");
 script.innerText = QRCodeMin;
 document.body.appendChild(script);
 
-export default function TQRCode({ text, width = "128", height = "128" }) {
+export default function TQRCode({ text, menu, width = "128", height = "128" }) {
   const qrcodeRef = useRef(null);
+  const deviceInfo = useSelector((state) => state.device.deviceInfo);
+  const dispatch = useDispatch();
+
+  useEffect(
+    () => {
+      dispatch(getDeviceAdditionInfo());
+    },
+    { dispatch }
+  );
 
   useEffect(() => {
-    if (typeof window === "object") {
+    if (typeof window === "object" && deviceInfo && menu) {
       if (qrcodeRef.current) {
         while (qrcodeRef.current.firstChild) {
           qrcodeRef.current.removeChild(qrcodeRef.current.firstChild);
@@ -19,11 +31,11 @@ export default function TQRCode({ text, width = "128", height = "128" }) {
       }
 
       const qrcode = new window.QRCode(qrcodeRef.current, {
-        text: text,
-        width: width,
-        height: height,
+        text: `${text}&nowMenu=${menu}&dvcIndex=${deviceInfo.dvcIndex}`,
+        width: scaleW(width),
+        height: scaleH(height),
       });
     }
-  }, [text]);
+  }, [text, menu, deviceInfo]);
   return <div ref={qrcodeRef} />;
 }

com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less

@@ -83,7 +83,7 @@
     overflow-y: hidden;
 
     &.secondDepthReduce {
-      width: 216px;
+      width: 420px;
     }
   }
   &.extraArea {

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

@@ -12,6 +12,7 @@ import Spotlight from "@enact/spotlight";
 
 import { changeLocalSettings, setHidePopup } from "../../actions/commonActions";
 import { clearCouponInfo } from "../../actions/couponActions";
+import { getDeviceAdditionInfo } from "../../actions/deviceActions";
 import {
   clearThemeDetail,
   getThemeCurationDetailInfo,
@@ -46,6 +47,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const productData = useSelector((state) => state.main.productData);
   const themeData = useSelector((state) => state.home.productData);
   const hotelData = useSelector((state) => state.home.hotelData);
+
   const themeProductInfos = useSelector(
     (state) => state.home.themeCurationDetailInfoData
   );
@@ -101,6 +103,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
         })
       );
     }
+
+    dispatch(getDeviceAdditionInfo());
   }, [dispatch, panelInfo]);
 
   useEffect(() => {

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelProduct.jsx

@@ -17,7 +17,7 @@ import TButton from "../../../components/TButton/TButton";
 import TQRCode from "../../../components/TQRCode/TQRCode";
 import useLogService from "../../../hooks/useLogService";
 import * as Config from "../../../utils/Config";
-import { $L } from "../../../utils/helperMethods";
+import { $L, scaleH, scaleW } from "../../../utils/helperMethods";
 import IndicatorOptions from "../components/indicator/IndicatorOptions";
 import ThemeIndicator from "../components/indicator/ThemeIndicator";
 import StarRating from "../components/StarRating";
@@ -240,6 +240,7 @@ export default function HotelOption({
                 <div className={css.qrcodeContainer}>
                   <TQRCode
                     text={hotelInfos[selectedIndex]?.qrcodeUrl}
+                    menu={"detail"}
                     width="160"
                     height="160"
                   />

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

@@ -284,8 +284,9 @@ export default function UnableOption({
             <div className={css.qrWrapper}>
               <TQRCode
                 text={productInfo?.qrcodeUrl}
-                width={scaleW(252)}
-                height={scaleW(252)}
+                menu={"detail"}
+                width="252"
+                height="252"
               />
               <div className={css.tooltip}>
                 <div className={css.tooltipBody}>{tooltipDes}</div>

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx

@@ -36,6 +36,7 @@ export default function IndicatorOptions({
 
   const [tabLabel, setTabLabel] = useState("");
   const [description, setDescription] = useState("");
+  const deviceInfo = useSelector((state) => state.device.deviceInfo);
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
@@ -218,6 +219,7 @@ export default function IndicatorOptions({
                 ) : (
                   <TQRCode
                     text={productInfo?.qrcodeUrl}
+                    menu={"detail"}
                     width="160"
                     height="160"
                   />

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayChat.jsx

@@ -1,24 +1,14 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import {
-  setHidePopup,
-  setShowPopup,
-} from '../../../actions/commonActions';
-import TButton from '../../../components/TButton/TButton';
-import TPopUp from '../../../components/TPopUp/TPopUp';
-import TQRCode from '../../../components/TQRCode/TQRCode';
-import { ACTIVE_POPUP } from '../../../utils/Config';
-import { $L } from '../../../utils/helperMethods';
-import css from './PlayerOverlayChat.module.less';
+import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
+import TButton from "../../../components/TButton/TButton";
+import TPopUp from "../../../components/TPopUp/TPopUp";
+import TQRCode from "../../../components/TQRCode/TQRCode";
+import { ACTIVE_POPUP } from "../../../utils/Config";
+import { $L } from "../../../utils/helperMethods";
+import css from "./PlayerOverlayChat.module.less";
 
 export default function PlayerOverlayChat({ currentTime }) {
   const dispatch = useDispatch();
@@ -74,7 +64,7 @@ export default function PlayerOverlayChat({ currentTime }) {
 
             <div className={css.qrcodeContainer}>
               <div className={css.qrcode}>
-                <TQRCode text="" width="" height="" />
+                <TQRCode text="" width="" menu="player" height="" />
               </div>
               <h3>{$L("To send a message, please scan the QR code.")}</h3>
               <TButton className={css.popupBtn} onClick={onClose}>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayChatQRCode.jsx

@@ -8,7 +8,7 @@ export default function PlayerOverlayChatQRCode() {
   return (
     <div className={css.container}>
       <div className={css.qrWrap}>
-        <TQRCode text="" width="" height="" />
+        <TQRCode text="" menu="player" width="" height="" />
       </div>
 
       <div className={css.text}>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx

@@ -1,18 +1,11 @@
-import React, {
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { useEffect, useMemo, useState } from "react";
 
-import classNames from 'classnames';
-import { useSelector } from 'react-redux';
+import classNames from "classnames";
+import { useSelector } from "react-redux";
 
-import TQRCode from '../../../components/TQRCode/TQRCode';
-import {
-  scaleH,
-  scaleW,
-} from '../../../utils/helperMethods';
-import css from './PlayerOverlayQRCode.module.less';
+import TQRCode from "../../../components/TQRCode/TQRCode";
+import { scaleH, scaleW } from "../../../utils/helperMethods";
+import css from "./PlayerOverlayQRCode.module.less";
 
 export default function PlayerOverlayQRCode({
   shopNowInfos,
@@ -87,8 +80,9 @@ export default function PlayerOverlayQRCode({
               <div>
                 <TQRCode
                   text={shopNowInfos[smallestOffsetHourIndex].qrcodeUrl}
-                  width={scaleW("156")}
-                  height={scaleH("156")}
+                  menu="player"
+                  width="156"
+                  height="156"
                 />
                 <div className={css.text}>{text}</div>
               </div>