결제가능상품 QRCode URL 변경

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

@@ -1,22 +1,13 @@
-import React, {
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useRef, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import { getDeviceAdditionInfo } from '../../actions/deviceActions';
-import {
-  scaleH,
-  scaleW,
-} from '../../utils/helperMethods';
+import { getDeviceAdditionInfo } from "../../actions/deviceActions";
+import { scaleH, scaleW } from "../../utils/helperMethods";
 
 export default function TQRCode({
   ariaLabel,
+  isBillingProductVisible,
   text,
   width = "128",
   height = "128",
@@ -53,7 +44,9 @@ export default function TQRCode({
       }
 
       const qrcode = new window.QRCode(qrcodeRef.current, {
-        text: `${text}&entryMenu=${encodeEntryMenu}&nowMenu=${encodedNowMenu}&idx=${idx}`,
+        text: isBillingProductVisible
+          ? text
+          : `${text}&entryMenu=${encodeEntryMenu}&nowMenu=${encodedNowMenu}&idx=${idx}`,
         width: scaleW(width),
         height: scaleH(height),
         correctLevel: window.QRCode.CorrectLevel.L,

com.twin.app.shoptime/src/utils/helperMethods.js

@@ -340,6 +340,7 @@ export const getFormattingCardNo = (cardNumber) => {
 export const getQRCodeUrl = ({
   serverHOST,
   serverType,
+  index,
   patnrId,
   prdtId,
   dirPurcSelYn = "Y",
@@ -378,7 +379,7 @@ export const getQRCodeUrl = ({
   const prdtDataBase64 = btoa(prdtDataStr);
 
   return {
-    detailUrl: `${baseUrl}detail.jsp?patnrId=${patnrId}&prdtId=${prdtId}&cntryCd=${countryCode}&idx=`,
+    detailUrl: `${baseUrl}detail.jsp?patnrId=${patnrId}&prdtId=${prdtId}&cntryCd=${countryCode}&idx=${index}`,
     checkoutUrl: `${baseUrl}checkout.jsp?patnrId=${patnrId}&dirPurcSelYn=${dirPurcSelYn}&prdtData=${prdtDataBase64}&cntryCd=${countryCode}`,
     shippingAddressListUrl: `${baseUrl}address_list.jsp?from=shipping&cntryCd=${countryCode}`,
     billingAddressListUrl: `${baseUrl}address_list.jsp?from=billing&cntryCd=${countryCode}`,

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

@@ -16,6 +16,7 @@ import TQRCode from "../../../../components/TQRCode/TQRCode";
 import * as Config from "../../../../utils/Config";
 import {
   $L,
+  getQRCodeUrl,
   removeSpecificTags,
   scaleH,
   scaleW,
@@ -45,6 +46,11 @@ export default function IndicatorOptions({
   const deviceInfo = useSelector((state) => state.device.deviceInfo);
   const { cntry_cd } = useSelector((state) => state.common.httpHeader);
 
+  const serverHOST = useSelector((state) => state.common.appStatus.serverHOST);
+  const serverType = useSelector((state) => state.localSettings.serverType);
+
+  const { patnrId, prdtId } = productInfo;
+
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
@@ -91,14 +97,22 @@ export default function IndicatorOptions({
     const sanitizedString = removeSpecificTags(description);
     return { __html: sanitizedString };
   };
+
+  const { detailUrl } = useMemo(() => {
+    return getQRCodeUrl({
+      serverHOST,
+      serverType,
+      index: deviceInfo?.dvcIndex,
+      patnrId: patnrId,
+      prdtId: prdtId,
+    });
+  }, [serverHOST, serverType, deviceInfo, patnrId, prdtId]);
+
   const qrCodeUrl = useMemo(() => {
     if (!isBillingProductVisible) return productInfo?.qrcodeUrl;
 
-    const idx = deviceInfo?.dvcIndex ?? 0;
-    const { patnrId, prdtId } = productInfo;
-
-    return `https://qt3-m.shoptime.lgappstv.com/detail.jsp?patnrId=${patnrId}&prdtId=${prdtId}&cntryCd=${cntry_cd}&idx=${idx}`;
-  }, [productInfo, isBillingProductVisible, deviceInfo, cntry_cd]);
+    return detailUrl;
+  }, [productInfo, isBillingProductVisible, detailUrl]);
 
   //DecoratorContainer로 컴포넌트를 감싸주면 해당 함수가 필요없어 보임
   const onSpotlightLeft = (e) => {
@@ -264,7 +278,12 @@ export default function IndicatorOptions({
                 {productInfo?.qrImgUrl ? (
                   productInfo?.qrImgUrl
                 ) : (
-                  <TQRCode text={qrCodeUrl} width="160" height="160" />
+                  <TQRCode
+                    text={qrCodeUrl}
+                    isBillingProductVisible={isBillingProductVisible}
+                    width="160"
+                    height="160"
+                  />
                 )}
                 <div className={css.tooltip}>
                   <div className={css.tooltipBody}>{tooltipDes}</div>