From aa1f9630e6f86f351d2b25583ebb31d07321671f Mon Sep 17 00:00:00 2001 From: optrader Date: Tue, 9 Dec 2025 17:49:58 +0900 Subject: [PATCH] [251209] feat: ShopByShow-8 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 12. 09. 17:49:58 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 5๊ฐœ โ€ข ์ถ”๊ฐ€: +69์ค„ โ€ข ์‚ญ์ œ: -22์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข ์†Œ๊ทœ๋ชจ ๊ธฐ๋Šฅ ๊ฐœ์„  --- .../FeaturedBrandsPanel.jsx | 27 ++++++++--- .../ShopByShow/ShopByShow.jsx | 45 +++++++++++++++---- .../ShopByShowContents/ShopByShowContents.jsx | 2 + .../ShopByShowProductList.jsx | 6 ++- .../ShopByShowNav/ShopByShowNav.jsx | 11 ++--- 5 files changed, 69 insertions(+), 22 deletions(-) diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 49e397f9..fa3744c1 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -773,15 +773,20 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => { // effect: set selectedPatnrId and selectedPatncNm useEffect(() => { - if (brandInfo) { - const patnrId = panelInfo?.patnrId; - const patncNm = brandInfo.find((b) => b?.patnrId === patnrId).patncNm; + if (brandInfo && panelInfo?.patnrId) { + const patnrId = panelInfo.patnrId; + const patncNm = brandInfo.find((b) => b?.patnrId === patnrId)?.patncNm; - setSelectedPatncNm(patncNm); + if (patncNm) { + setSelectedPatncNm(patncNm); + } - if (!fromDetail) setSelectedPatnrId(patnrId); + // Detail์—์„œ ๋Œ์•„์™€๋„ patnrId๊ฐ€ ๋น„์–ด ์žˆ์œผ๋ฉด ๋‹ค์‹œ ์„ค์ •ํ•ด API ํ˜ธ์ถœ์ด ์ •์ƒ ๋™์ž‘ํ•˜๋„๋ก ๋ณด์™„ + if (!fromDetail || !selectedPatnrId) { + setSelectedPatnrId(patnrId); + } } - }, [brandInfo, panelInfo?.patnrId]); + }, [brandInfo, panelInfo?.patnrId, selectedPatnrId, fromDetail]); // effect: data fetching based on brandLayoutInfo and selectedPatnrId useEffect(() => { @@ -791,6 +796,16 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => { Object.entries(DISPATCH_MAP) // .forEach(([templateCode, action]) => { if (hasTemplateCodeWithValue(sortedBrandLayoutInfo, templateCode)) { + // Detail ๋ณต๊ท€ ์‹œ ShopByShow ๋ฐ์ดํ„ฐ๊ฐ€ ์ด๋ฏธ ์žˆ์œผ๋ฉด ์žฌํ˜ธ์ถœ์„ ๊ฑด๋„ˆ๋›ฐ์–ด ์„ ํƒ ์ƒํƒœ๊ฐ€ ์ดˆ๊ธฐํ™”๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ + if ( + templateCode === TEMPLATE_CODE_CONF.NBCU && + fromDetail && + shouldRenderComponent(brandShopByShowContsList) + ) { + console.log("[FeaturedBrandsPanel] Skip re-fetch ShopByShow on return from detail"); + return; + } + console.log("[FeaturedBrandsPanel] Fetching data for template:", templateCode, "patnrId:", selectedPatnrId); dispatch(action({ patnrId: selectedPatnrId })); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx index ce2cb80f..99d67e20 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx @@ -11,9 +11,11 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco import useScrollTo from "../../../hooks/useScrollTo"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import { $L } from "../../../utils/helperMethods"; +import { panel_names } from "../../../utils/Config"; import css from "./ShopByShow.module.less"; import ShopByShowNav from "./ShopByShowList/ShopByShowNav/ShopByShowNav"; import ShopByShowContents from "./ShopByShowList/ShopByShowContents/ShopByShowContents"; +import { updatePanel } from "../../../actions/panelActions"; const STRING_CONF = { SHOP_BY_SHOW: "SHOP BY SHOW", @@ -43,16 +45,40 @@ const ShopByShow = ({ const brandShopByShowClctInfos = brandShopByShowContsInfo?.brandShopByShowClctInfos || []; - const handleContsIdChange = useCallback((contsId) => { - setSelectedContsId(contsId); - - // 'ALL' ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ (contsId === null) ์ฒซ ๋ฒˆ์งธ contents ๋กœ๋“œ - const targetContsId = contsId || (brandShopByShowContsList?.[0]?.contsId); - - if (targetContsId) { - dispatch(getBrandShopByShow({ patnrId: selectedPatnrId, contsId: targetContsId })); + // DetailPanel ๋ณต๊ท€ ์‹œ panelInfo์— ์ €์žฅ๋œ contsId๋กœ ๋„ค๋น„๊ฒŒ์ด์…˜ ์„ ํƒ์„ ๋ณต๊ตฌ + useEffect(() => { + if (panelInfo?.contsId && panelInfo.contsId !== selectedContsId) { + setSelectedContsId(panelInfo.contsId); } - }, [selectedPatnrId, brandShopByShowContsList, dispatch]); + }, [panelInfo?.contsId, selectedContsId]); + + const handleContsIdChange = useCallback( + (contsId) => { + // patnrId๊ฐ€ ์—†์œผ๋ฉด Detail ๋ณต๊ท€ ์งํ›„๋ผ ์ •์ƒ ํ˜ธ์ถœ ๋ถˆ๊ฐ€ + if (!selectedPatnrId) return; + + setSelectedContsId(contsId); + + // ํ˜„์žฌ ์„ ํƒ๋œ contsId๋ฅผ ํŒจ๋„ ์ƒํƒœ์— ์ €์žฅํ•ด ๋ณต๊ท€ ์‹œ ๋ณต์› + dispatch( + updatePanel({ + name: panel_names.FEATURED_BRANDS_PANEL, + panelInfo: { + ...(panelInfo || {}), + contsId, + }, + }) + ); + + // 'ALL' ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ (contsId === null) ์ฒซ ๋ฒˆ์งธ contents ๋กœ๋“œ + const targetContsId = contsId || brandShopByShowContsList?.[0]?.contsId; + + if (targetContsId) { + dispatch(getBrandShopByShow({ patnrId: selectedPatnrId, contsId: targetContsId })); + } + }, + [selectedPatnrId, brandShopByShowContsList, dispatch] + ); useEffect(() => { if (panelInfo?.section !== "shop-by-show" || !panelInfo?.x) { @@ -127,6 +153,7 @@ const ShopByShow = ({ handleItemFocus={_handleItemFocus} clctNm={collection.clctNm} clctImgUrl={collection.clctImgUrl} + contsId={brandShopByShowContsInfo?.contsId || selectedContsId} patnrId={selectedPatnrId} selectedPatnrId={selectedPatnrId} shelfOrder={shelfOrder} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx index ea9c8ce8..fe79de69 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx @@ -17,6 +17,7 @@ export default memo(function ShopByShowContents({ handleItemFocus, clctNm, clctImgUrl, + contsId, patnrId, selectedPatnrId, shelfOrder, @@ -50,6 +51,7 @@ export default memo(function ShopByShowContents({ brandProductInfos={brandProductInfos} contentsIndex={contentsIndex} handleFocus={handleFocus} + contsId={contsId} patnrId={patnrId} selectedPatnrId={selectedPatnrId} clctNm={clctNm} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx index fb217a91..27d2ea1b 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx @@ -23,6 +23,7 @@ export default function ShopByShowProductList({ brandProductInfos, contentsIndex, handleFocus, + contsId, patnrId, selectedPatnrId, clctNm, @@ -85,6 +86,7 @@ export default function ShopByShowProductList({ lastFocusedTargetId, patnrId: effectivePatnrId, section, + contsId, x, }, }) @@ -94,11 +96,11 @@ export default function ShopByShowProductList({ dispatch( pushPanel({ name: panel_names.DETAIL_PANEL, - panelInfo: { patnrId: effectivePatnrId, prdtId }, + panelInfo: { patnrId: effectivePatnrId, prdtId, contsId }, }) ); }, - [dispatch, patnrId] + [dispatch, patnrId, contsId] ); const renderItem = useCallback( diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx index bda7765f..12ef146f 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx @@ -25,6 +25,7 @@ export default memo(function ShopByShowNav({ selectedContsId, }) { const { getScrollTo, scrollLeft } = useScrollTo(); + const activeContsId = selectedContsId ?? brandShopByShowContsInfo?.contsId; const handleClick = useCallback( (contsId) => () => { @@ -39,7 +40,7 @@ export default memo(function ShopByShowNav({ } }, [handleItemFocus]); - const selectedText = !selectedContsId ? "Selected " : ""; + const selectedText = !activeContsId ? "Selected " : ""; const allLabeltext = selectedText + "ALL 1 of " + (brandShopByShowContsList.length + 1); return ( @@ -62,14 +63,14 @@ export default memo(function ShopByShowNav({ {brandShopByShowContsList && brandShopByShowContsList.map(({ contsId, contsNm }, index) => (
  • -