From c0d5cd4e1e4d74130d641156b6a769355fbcb6ff Mon Sep 17 00:00:00 2001 From: "jiwon93.son" Date: Wed, 15 Oct 2025 17:18:54 +0900 Subject: [PATCH] =?UTF-8?q?=ED=86=B5=ED=95=A9=EB=A1=9C=EA=B7=B8=20No.27=20?= =?UTF-8?q?AL=5FSBM=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/DetailPanel/DetailPanel.jsx | 150 +++++++++--------- .../DetailPanel/ThemeProduct/ShowProduct.jsx | 18 +-- 2 files changed, 87 insertions(+), 81 deletions(-) diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 8c1398ad..f01c7700 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/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) } /> 0 && isOnTop && ( )} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowProduct.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowProduct.jsx index 08b96f9d..3469f9c4 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowProduct.jsx +++ b/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, };