[SHOPTIME-3748] [결제가능상품_상품상세] QR코드 이미지가 ShopTime 모바일 페이지로 이동하는 것으로 변경 필요

[수정파일]

[수정내용]

  1.  결제가능상품에서 QRCodeUrl이 파트너사 홈페이지가 아닌 ShopTime 모바일로 변경

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

@@ -431,6 +431,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
                   setSelectedIndex={setSelectedIndex}
                   shopByMobileLogRef={shopByMobileLogRef}
                   isYouMayLikeOpened={isYouMayLikeOpened}
+                  isBillingProductVisible={isBillingProductVisible}
                 />
               )}
               {/* 구매불가상품 영역 */}

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

@@ -34,6 +34,7 @@ export default function SingleProduct({
   setSelectedIndex,
   shopByMobileLogRef,
   isYouMayLikeOpened,
+  isBillingProductVisible,
 }) {
   const dispatch = useDispatch();
 
@@ -158,6 +159,7 @@ export default function SingleProduct({
           panelInfo={panelInfo}
           productInfo={productData}
           thumbnailUrl={productData.imgUrls600[0]}
+          isBillingProductVisible={isBillingProductVisible}
         />
       </Container>
       <div>

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

@@ -231,6 +231,7 @@ export default function ShowOption({
               <IndicatorOptions
                 handleIndicatorOptions={handleIndicatorOptions}
                 handleMobileSendPopupOpen={handleMobileSendPopupOpen}
+                isBillingProductVisible={isBillingProductVisible}
                 isCall
                 isFullOption={showProductInfo?.pmtSuptYn === "Y"}
                 isDescription={!showProductInfo?.pmtSuptYn === "Y"}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -32,15 +32,19 @@ export default function IndicatorOptions({
   address,
   handleIndicatorOptions,
   handleMobileSendPopupOpen,
+  isBillingProductVisible,
   isCall,
   isDescription,
   isFullOption,
-  panelInfo,
   productInfo,
   thumbnailUrl,
 }) {
   const [tabLabel, setTabLabel] = useState("");
   const [description, setDescription] = useState("");
+
+  const deviceInfo = useSelector((state) => state.device.deviceInfo);
+  const { cntry_cd } = useSelector((state) => state.common.httpHeader);
+
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
@@ -87,7 +91,16 @@ export default function IndicatorOptions({
     const sanitizedString = removeSpecificTags(description);
     return { __html: sanitizedString };
   };
+  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]);
+
+  console.log("#qrCodeUrl", qrCodeUrl);
   //DecoratorContainer로 컴포넌트를 감싸주면 해당 함수가 필요없어 보임
   const onSpotlightLeft = (e) => {
     e.stopPropagation();
@@ -249,15 +262,11 @@ export default function IndicatorOptions({
               </div>
 
               <div className={css.qrcode}>
-                {productInfo?.qrImgUrl
-                  ? productInfo?.qrImgUrl
-                  : productInfo?.qrcodeUrl && (
-                      <TQRCode
-                        text={productInfo?.qrcodeUrl}
-                        width="160"
-                        height="160"
-                      />
-                    )}
+                {productInfo?.qrImgUrl ? (
+                  productInfo?.qrImgUrl
+                ) : (
+                  <TQRCode text={qrCodeUrl} width="160" height="160" />
+                )}
                 <div className={css.tooltip}>
                   <div className={css.tooltipBody}>{tooltipDes}</div>
                 </div>