[TQRCode] QRCode base64 인코딩

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
-import QRCodeMin from "!!raw-loader!../../utils/qrcode.min.js";
+import QRCodeMin from "!!raw-loader!../../utils/qrcode.min.js";;
 
 import { getDeviceAdditionInfo } from "../../actions/deviceActions";
 import { scaleH, scaleW } from "../../utils/helperMethods";
@@ -10,9 +10,15 @@ let script = document.createElement("script");
 script.innerText = QRCodeMin;
 document.body.appendChild(script);
 
-export default function TQRCode({ ariaLabel,text, menu, width = "128", height = "128" }) {
+export default function TQRCode({
+  ariaLabel,
+  text,
+  width = "128",
+  height = "128",
+}) {
   const qrcodeRef = useRef(null);
   const deviceInfo = useSelector((state) => state.device.deviceInfo);
+  const { entryMenu, nowMenu } = useSelector((state) => state.common.menu);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -20,21 +26,22 @@ export default function TQRCode({ ariaLabel,text, menu, width = "128", height =
   }, [dispatch]);
 
   useEffect(() => {
-    if (typeof window === "object" && deviceInfo && menu) {
+    if (typeof window === "object" && deviceInfo && entryMenu && nowMenu) {
       if (qrcodeRef.current) {
         while (qrcodeRef.current.firstChild) {
           qrcodeRef.current.removeChild(qrcodeRef.current.firstChild);
         }
       }
 
+      // nowMenu 데이터를 Base64로 인코딩
+      const encodedNowMenu = btoa(nowMenu);
+
       const qrcode = new window.QRCode(qrcodeRef.current, {
-        text: menu
-          ? `${text}&nowMenu=${menu}&idx=${deviceInfo.dvcIndex}`
-          : text,
+        text: `${text}&entryMenu=${entryMenu}&nowMenu=${encodedNowMenu}&idx=${deviceInfo.dvcIndex}`,
         width: scaleW(width),
         height: scaleH(height),
       });
     }
-  }, [text, menu, deviceInfo]);
+  }, [text, deviceInfo]);
   return <div aria-label={ariaLabel} ref={qrcodeRef} />;
 }

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

@@ -4,30 +4,23 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import { setShowPopup } from '../../../actions/commonActions';
-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,
-  formatGMTString,
-} from '../../../utils/helperMethods';
-import IndicatorOptions from '../components/indicator/IndicatorOptions';
-import ThemeIndicator from '../components/indicator/ThemeIndicator';
-import StarRating from '../components/StarRating';
-import css from './HotelProduct.module.less';
+import { setShowPopup } from "../../../actions/commonActions";
+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, formatGMTString } from "../../../utils/helperMethods";
+import IndicatorOptions from "../components/indicator/IndicatorOptions";
+import ThemeIndicator from "../components/indicator/ThemeIndicator";
+import StarRating from "../components/StarRating";
+import css from "./HotelProduct.module.less";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveld: true },
@@ -53,7 +46,6 @@ export default function HotelOption({
     (state) => state.home.themeCurationHotelDetailData
   );
   const hotelData = useSelector((state) => state.home.hotelData);
-
   const [label, setLabel] = useState("");
   const [amenitiesInfos, setAmenitiesInfos] = useState();
 
@@ -287,12 +279,12 @@ export default function HotelOption({
                   </div>
                 </div>
                 <div className={css.qrcodeContainer}>
-                  <TQRCode
+                  {/* 호텔 QRCode 데이터만 서버에서 다르게 내려주고있어서 에러남 / 해결되면 주석제거 */}
+                  {/* <TQRCode
                     text={hotelInfos[selectedIndex]?.qrcodeUrl}
-                    menu={"ThemePage"}
                     width="160"
                     height="160"
-                  />
+                  /> */}
                   <div className={css.tooltip}>
                     <div className={css.tooltipBody}>{tooltipDes}</div>
                   </div>