From 678cbcb4e0957cd660c4218fc0776dc59818d748 Mon Sep 17 00:00:00 2001 From: "jiwon93.son" Date: Tue, 14 Oct 2025 13:36:05 +0900 Subject: [PATCH] =?UTF-8?q?[SHOPTIME-5452]=20[EVENT]=20Hot=20Picks=20?= =?UTF-8?q?=EB=9E=9C=EB=94=A9=20=ED=99=88=EB=B0=B0=EB=84=88=20=EC=A7=84?= =?UTF-8?q?=EC=9E=85=20/=20Hot=20Picks=20=EC=83=81=ED=92=88=20[Shop=20by?= =?UTF-8?q?=20Mobile]=20/=20SMS=20=EB=AC=B8=EA=B5=AC=20=EC=A0=84=EC=86=A1?= =?UTF-8?q?=EC=8B=9C=20=EC=98=A4=EB=A5=98=20=EC=95=8C=EB=9F=BF=20=EB=85=B8?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/DetailPanel/DetailPanel.jsx | 148 +++++++++--------- 1 file changed, 77 insertions(+), 71 deletions(-) diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 0b05c859..09d7e31f 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', }) ); } @@ -147,7 +147,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, @@ -193,14 +193,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( @@ -229,8 +229,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]); @@ -239,7 +239,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; @@ -266,7 +266,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) { @@ -289,19 +289,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]; @@ -315,9 +315,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; @@ -332,27 +332,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 ); @@ -387,12 +387,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 })); } @@ -404,7 +404,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { dispatch(clearProductDetail()); dispatch(clearThemeDetail()); dispatch(clearCouponInfo()); - setContainerLastFocusedElement(null, ["indicator-GridListContainer"]); + setContainerLastFocusedElement(null, ['indicator-GridListContainer']); }; }, [dispatch]); @@ -420,8 +420,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)} @@ -431,8 +431,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 && ( )}