[251209] feat: ShopByShow-8

🕐 커밋 시간: 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

🔧 주요 변경 내용:
  • 소규모 기능 개선

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) {
+    if (brandInfo && panelInfo?.patnrId) {
-      const patnrId = panelInfo?.patnrId;
+      const patnrId = panelInfo.patnrId;
-      const patncNm = brandInfo.find((b) => b?.patnrId === patnrId).patncNm;
+      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 }));
           }

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) => {
+  // DetailPanel 복귀 시 panelInfo에 저장된 contsId로 네비게이션 선택을 복구
-    setSelectedContsId(contsId);
+  useEffect(() => {
-
+    if (panelInfo?.contsId && panelInfo.contsId !== selectedContsId) {
-    // 'ALL' 버튼 클릭 시 (contsId === null) 첫 번째 contents 로드
+      setSelectedContsId(panelInfo.contsId);
-    const targetContsId = contsId || (brandShopByShowContsList?.[0]?.contsId);
-
-    if (targetContsId) {
-      dispatch(getBrandShopByShow({ patnrId: selectedPatnrId, contsId: targetContsId }));
     }
-  }, [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}

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}

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(

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) => (
               <li key={"shop-by-show-conts-" + index}>
-                <TButton
+              <TButton
-                  className={brandShopByShowContsInfo?.contsId === contsId && css.selected}
+                  className={activeContsId === contsId && css.selected}
                   onClick={handleClick(contsId)}
                   onFocus={handleFocus}
-                  selected={brandShopByShowContsInfo?.contsId === contsId}
+                  selected={activeContsId === contsId}
                   type={TYPES.oneDepthCategory}
                   ariaLabel={
-                    brandShopByShowContsInfo?.contsId === contsId
+                    activeContsId === contsId
                       ? "Selected " + contsNm + " " + (index * 1 + 1) + " of " + brandShopByShowContsList.length
                       : "" + contsNm + " " + (index * 1 + 1) + " of " + brandShopByShowContsList.length
                   }