통합로그 No.27 AL_SBM 수정

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

@@ -4,51 +4,51 @@ 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 { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
+import Spotlight from "@enact/spotlight";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
 import {
   changeAppStatus,
   changeLocalSettings,
   setHidePopup,
-} from '../../actions/commonActions';
-import { clearCouponInfo } from '../../actions/couponActions';
-import { getDeviceAdditionInfo } from '../../actions/deviceActions';
+} from "../../actions/commonActions";
+import { clearCouponInfo } from "../../actions/couponActions";
+import { getDeviceAdditionInfo } from "../../actions/deviceActions";
 import {
   clearThemeDetail,
   getThemeCurationDetailInfo,
   getThemeHotelDetailInfo,
-} from '../../actions/homeActions';
+} from "../../actions/homeActions";
 import {
   getMainCategoryDetail,
   getMainYouMayLike,
-} from '../../actions/mainActions';
-import { popPanel, updatePanel } from '../../actions/panelActions';
-import { finishVideoPreview } from '../../actions/playActions';
+} from "../../actions/mainActions";
+import { popPanel, updatePanel } from "../../actions/panelActions";
+import { finishVideoPreview } from "../../actions/playActions";
 import {
   clearProductDetail,
   getProductGroup,
   getProductImageLength,
   getProductOptionId,
-} from '../../actions/productActions';
-import MobileSendPopUp from '../../components/MobileSend/MobileSendPopUp';
-import TBody from '../../components/TBody/TBody';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import * as Config from '../../utils/Config';
-import { panel_names } from '../../utils/Config';
-import { $L, getQRCodeUrl } from '../../utils/helperMethods';
-import css from './DetailPanel.module.less';
-import GroupProduct from './GroupProduct/GroupProduct';
-import SingleProduct from './SingleProduct/SingleProduct';
-import ThemeProduct from './ThemeProduct/ThemeProduct';
-import UnableProduct from './UnableProduct/UnableProduct';
-import YouMayLike from './YouMayLike/YouMayLike';
-import { now } from 'lodash';
+} from "../../actions/productActions";
+import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
+import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import * as Config from "../../utils/Config";
+import { panel_names } from "../../utils/Config";
+import { $L, getQRCodeUrl } from "../../utils/helperMethods";
+import css from "./DetailPanel.module.less";
+import GroupProduct from "./GroupProduct/GroupProduct";
+import SingleProduct from "./SingleProduct/SingleProduct";
+import ThemeProduct from "./ThemeProduct/ThemeProduct";
+import UnableProduct from "./UnableProduct/UnableProduct";
+import YouMayLike from "./YouMayLike/YouMayLike";
+import { now } from "lodash";
 
 export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const dispatch = useDispatch();
@@ -85,7 +85,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   );
 
   const panels = useSelector((state) => state.panels.panels);
-  const [lgCatCd, setLgCatCd] = useState('');
+  const [lgCatCd, setLgCatCd] = useState("");
   const [isYouMayLikeOpened, setIsYouMayLikeOpened] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
@@ -93,7 +93,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   useEffect(() => {
     dispatch(getProductOptionId(undefined));
-    if (panelInfo?.type === 'hotel') {
+    if (panelInfo?.type === "hotel") {
       dispatch(
         getThemeHotelDetailInfo({
           patnrId: panelInfo?.patnrId,
@@ -102,7 +102,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       );
     }
 
-    if (panelInfo?.type === 'theme') {
+    if (panelInfo?.type === "theme") {
       dispatch(
         getThemeCurationDetailInfo({
           patnrId: panelInfo?.patnrId,
@@ -117,7 +117,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
         getMainCategoryDetail({
           patnrId: panelInfo?.patnrId,
           prdtId: panelInfo?.prdtId,
-          liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : 'N',
+          liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : "N",
         })
       );
     }
@@ -153,7 +153,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   }, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]);
 
   useEffect(() => {
-    if (productData?.pmtSuptYn === 'Y' && productData?.grPrdtProcYn === 'Y') {
+    if (productData?.pmtSuptYn === "Y" && productData?.grPrdtProcYn === "Y") {
       dispatch(
         getProductGroup({
           patnrId: panelInfo?.patnrId,
@@ -199,14 +199,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       prdtId: productInfo?.prdtId,
       entryMenu: entryMenu,
       nowMenu: nowMenu,
-      liveFlag: 'Y',
-      qrType: 'billingDetail',
+      liveFlag: "Y",
+      qrType: "billingDetail",
     });
   }, [serverHOST, serverType, deviceInfo, entryMenu, productInfo]);
 
   const onSpotlightUpTButton = (e) => {
     e.stopPropagation();
-    Spotlight.focus('spotlightId_backBtn');
+    Spotlight.focus("spotlightId_backBtn");
   };
 
   const onClick = useCallback(
@@ -235,8 +235,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const handleSMSonClose = useCallback(() => {
     dispatch(setHidePopup());
     setTimeout(() => {
-      Spotlight.focus('spotlightId_backBtn');
-      Spotlight.focus('shopbymobile_Btn');
+      Spotlight.focus("spotlightId_backBtn");
+      Spotlight.focus("shopbymobile_Btn");
     }, 0);
   }, [dispatch]);
 
@@ -245,7 +245,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     const prdtId =
       themeProductInfos &&
       themeProductInfos.length > 0 &&
-      panelInfo?.type === 'theme'
+      panelInfo?.type === "theme"
         ? themeProductInfos[selectedIndex].prdtId
         : panelInfo?.prdtId;
 
@@ -272,7 +272,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       patnrId: panelInfo?.patnrId,
       date: formattedDate,
       expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
-      cntryCd: httpHeader['X-Device-Country'],
+      cntryCd: httpHeader["X-Device-Country"],
     });
 
     if (recentItems.length >= 51) {
@@ -295,19 +295,19 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       setLgCatCd(productData.catCd);
     } else if (
       themeProductInfos &&
-      themeProductInfos[selectedIndex]?.pmtSuptYn === 'N' &&
+      themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
       panelInfo?.curationId
     ) {
       setLgCatCd(themeProductInfos[selectedIndex]?.catCd);
     } else {
-      setLgCatCd('');
+      setLgCatCd("");
     }
   }, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);
 
   const mobileSendPopUpProductImg = useMemo(() => {
-    if (panelInfo?.type === 'theme' && themeProductInfos) {
+    if (panelInfo?.type === "theme" && themeProductInfos) {
       return themeProductInfos[selectedIndex]?.imgUrls600[0];
-    } else if (panelInfo?.type === 'hotel' && hotelInfos) {
+    } else if (panelInfo?.type === "hotel" && hotelInfos) {
       return hotelInfos[selectedIndex]?.hotelImgUrl;
     } else {
       return productData?.imgUrls600[0];
@@ -321,9 +321,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   ]);
 
   const mobileSendPopUpSubtitle = useMemo(() => {
-    if (panelInfo?.type === 'theme' && themeProductInfos) {
+    if (panelInfo?.type === "theme" && themeProductInfos) {
       return themeProductInfos[selectedIndex]?.prdtNm;
-    } else if (panelInfo?.type === 'hotel' && hotelInfos) {
+    } else if (panelInfo?.type === "hotel" && hotelInfos) {
       return hotelInfos[selectedIndex]?.hotelNm;
     } else {
       return productData?.prdtNm;
@@ -338,27 +338,27 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   const isBillingProductVisible = useMemo(() => {
     return (
-      productData?.pmtSuptYn === 'Y' &&
-      productData?.grPrdtProcYn === 'N' &&
+      productData?.pmtSuptYn === "Y" &&
+      productData?.grPrdtProcYn === "N" &&
       panelInfo?.prdtId &&
-      webOSVersion >= '6.0'
+      webOSVersion >= "6.0"
     );
   }, [productData, webOSVersion, panelInfo?.prdtId]);
 
   const isUnavailableProductVisible = useMemo(() => {
     return (
-      productData?.pmtSuptYn === 'N' ||
-      (productData?.pmtSuptYn === 'Y' &&
-        productData?.grPrdtProcYn === 'N' &&
-        webOSVersion < '6.0' &&
+      productData?.pmtSuptYn === "N" ||
+      (productData?.pmtSuptYn === "Y" &&
+        productData?.grPrdtProcYn === "N" &&
+        webOSVersion < "6.0" &&
         panelInfo?.prdtId)
     );
   }, [productData, webOSVersion, panelInfo?.prdtId]);
 
   const isGroupProductVisible = useMemo(() => {
     return (
-      productData?.pmtSuptYn === 'Y' &&
-      productData?.grPrdtProcYn === 'Y' &&
+      productData?.pmtSuptYn === "Y" &&
+      productData?.grPrdtProcYn === "Y" &&
       groupInfos &&
       groupInfos.length > 0
     );
@@ -393,12 +393,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
         (hotelInfos && hotelInfos.length > 0)) &&
       selectedIndex !== undefined
     ) {
-      if (panelInfo?.type === 'theme') {
+      if (panelInfo?.type === "theme") {
         const imgUrls600 = themeProductInfos[selectedIndex]?.imgUrls600 || [];
         dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
         return;
       }
-      if (panelInfo?.type === 'hotel') {
+      if (panelInfo?.type === "hotel") {
         const imgUrls600 = hotelInfos[selectedIndex]?.imgUrls600 || [];
         dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
       }
@@ -410,7 +410,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       dispatch(clearProductDetail());
       dispatch(clearThemeDetail());
       dispatch(clearCouponInfo());
-      setContainerLastFocusedElement(null, ['indicator-GridListContainer']);
+      setContainerLastFocusedElement(null, ["indicator-GridListContainer"]);
     };
   }, [dispatch]);
 
@@ -426,8 +426,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           className={css.header}
           title={
             (panelInfo?.prdtId && productData?.prdtNm) ||
-            (panelInfo?.type === 'hotel' && hotelData?.hotelInfo.curationNm) ||
-            (panelInfo?.type === 'theme' && themeData?.themeInfo[0]?.curationNm)
+            (panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) ||
+            (panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm)
           }
           onBackButton
           onClick={onClick(false)}
@@ -437,8 +437,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           marqueeDisabled={false}
           ariaLabel={
             (panelInfo?.prdtId && productData?.prdtNm) ||
-            (panelInfo?.type === 'hotel' && hotelData?.hotelInfo.curationNm) ||
-            (panelInfo?.type === 'theme' && themeData?.themeInfo[0]?.curationNm)
+            (panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) ||
+            (panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm)
           }
         />
         <TBody
@@ -515,9 +515,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       {lgCatCd && youmaylikeData && youmaylikeData.length > 0 && isOnTop && (
         <YouMayLike
           isUnable={
-            productData?.pmtSuptYn === 'N' ||
-            panelInfo?.type === 'hotel' ||
-            panelInfo?.type === 'theme'
+            productData?.pmtSuptYn === "N" ||
+            panelInfo?.type === "hotel" ||
+            panelInfo?.type === "theme"
           }
           panelInfo={panelInfo}
           setSelectedIndex={setSelectedIndex}
@@ -529,35 +529,41 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
         <MobileSendPopUp
           open={popupVisible}
           onClose={handleSMSonClose}
-          title={$L('Send a purchase link for this item via SMS')}
+          title={$L("Send a purchase link for this item via SMS")}
           subTitle={mobileSendPopUpSubtitle}
-          patncNm={productData?.patncNm}
+          patncNm={
+            panelInfo?.type === "theme" &&
+            themeProductInfos &&
+            themeProductInfos[selectedIndex]
+              ? themeProductInfos[selectedIndex].patncNm
+              : productData?.patncNm
+          }
           productImg={mobileSendPopUpProductImg}
           patnrId={panelInfo?.patnrId}
           prdtId={
-            panelInfo?.type === 'theme' &&
+            panelInfo?.type === "theme" &&
             themeProductInfos &&
             themeProductInfos[selectedIndex]
               ? themeProductInfos[selectedIndex].prdtId
               : panelInfo?.prdtId
           }
-          smsTpCd={panelInfo?.type === 'hotel' ? 'APP00205' : 'APP00201'}
+          smsTpCd={panelInfo?.type === "hotel" ? "APP00205" : "APP00201"}
           curationId={panelInfo?.curationId}
           curationNm={panelInfo?.curationNm}
           hotelId={
-            panelInfo?.type === 'hotel' && hotelInfos[selectedIndex]?.hotelId
+            panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelId
           }
           hotelNm={
-            panelInfo?.type === 'hotel' && hotelInfos[selectedIndex]?.hotelNm
+            panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelNm
           }
           hotelDtlUrl={
-            panelInfo?.type === 'hotel' &&
+            panelInfo?.type === "hotel" &&
             hotelInfos[selectedIndex]?.hotelDetailInfo?.hotelDtlUrl
           }
-          productPrice={panelInfo?.type === 'hotel' && Price()}
+          productPrice={panelInfo?.type === "hotel" && Price()}
           shopByMobileLogRef={shopByMobileLogRef}
           spotlightId="shopbymobile_Btn"
-          smsText={productInfo?.pmtSuptYn === 'Y' ? detailUrl : undefined}
+          smsText={productInfo?.pmtSuptYn === "Y" ? detailUrl : undefined}
         />
       )}
     </>

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

@@ -172,20 +172,20 @@ export default function ShowOption({
   }, [productData]);
 
   const handleMobileSendPopupOpen = useCallback(() => {
-    if (productData && Object.keys(productData).length > 0) {
-      const regularPrice = productData?.priceInfo?.split("|")[0];
-      const discountPrice = productData?.priceInfo?.split("|")[1];
-      const discountRate = productData?.priceInfo?.split("|")[4];
+    if (showProductInfo && Object.keys(showProductInfo).length > 0) {
+      const regularPrice = showProductInfo?.priceInfo?.split("|")[0];
+      const discountPrice = showProductInfo?.priceInfo?.split("|")[1];
+      const discountRate = showProductInfo?.priceInfo?.split("|")[4];
       const logParams = {
         status: "open",
         nowMenu: nowMenu,
-        partner: productData?.patncNm,
-        productId: productData?.prdtId,
-        productTitle: productData?.prdtNm,
+        partner: showProductInfo?.patncNm,
+        productId: showProductInfo?.prdtId,
+        productTitle: showProductInfo?.prdtNm,
         price: discountRate ? discountPrice : regularPrice,
-        brand: productData?.brndNm,
+        brand: showProductInfo?.brndNm,
         discount: discountRate,
-        category: productData?.catNm,
+        category: showProductInfo?.catNm,
         contextName: LOG_CONTEXT_NAME.SHOPBYMOBILE,
         messageId: LOG_MESSAGE_ID.SMB,
       };