[251209] feat: NBCU-ShopByShow-5

🕐 커밋 시간: 2025. 12. 09. 16:28:02

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +32줄
  • 삭제: -2줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx

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

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShow.jsx

@@ -35,6 +35,7 @@ const ShopByShow = ({
   shelfTitle,
 }) => {
   const [firstChk, setFirstChk] = useState(0);
+  const [selectedContsId, setSelectedContsId] = useState(null);
   const dispatch = useDispatch();
   const { getScrollTo, scrollLeft } = useScrollTo({ skipAutoScrollTop: true });
   const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
@@ -43,8 +44,15 @@ const ShopByShow = ({
   const brandShopByShowClctInfos = brandShopByShowContsInfo?.brandShopByShowClctInfos || [];
 
   const handleContsIdChange = useCallback((contsId) => {
-    dispatch(getBrandShopByShow({ patnrId: selectedPatnrId, contsId }));
-  }, [selectedPatnrId, dispatch]);
+    setSelectedContsId(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) {
@@ -109,6 +117,7 @@ const ShopByShow = ({
         brandShopByShowContsInfo={brandShopByShowContsInfo}
         handleItemFocus={_handleItemFocus}
         onContsIdChange={handleContsIdChange}
+        selectedContsId={selectedContsId}
       />
       {brandShopByShowClctInfos.map((collection, collIdx) => (
         <ShopByShowContents

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowNav/ShopByShowNav.jsx

@@ -5,6 +5,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import TButton, { TYPES } from "../../../../../components/TButton/TButton";
 import TScroller from "../../../../../components/TScroller/TScroller";
 import useScrollTo from "../../../../../hooks/useScrollTo";
+import { $L } from "../../../../../utils/helperMethods";
 import css from "./ShopByShowNav.module.less";
 
 const Container = SpotlightContainerDecorator(
@@ -12,12 +13,16 @@ const Container = SpotlightContainerDecorator(
   "nav"
 );
 
+const STRING_CONF = {
+  ALL: "ALL",
+};
 
 export default memo(function ShopByShowNav({
   brandShopByShowContsList,
   brandShopByShowContsInfo,
   handleItemFocus,
   onContsIdChange,
+  selectedContsId,
 }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
 
@@ -34,10 +39,26 @@ export default memo(function ShopByShowNav({
     }
   }, [handleItemFocus]);
 
+  const selectedText = !selectedContsId ? "Selected " : "";
+  const allLabeltext = selectedText + "ALL 1 of " + (brandShopByShowContsList.length + 1);
+
   return (
     <Container className={css.nav} id="shop-by-show-nav-id" spotlightId="shop-by-show-nav-id">
       <TScroller cbScrollTo={getScrollTo} direction="horizontal" noScrollByWheel>
         <ul>
+          {/* 'ALL' 버튼 - 디자인에 없어서 주석 처리 */}
+          {/* <li>
+            <TButton
+              className={!selectedContsId && css.selected}
+              onClick={handleClick(null)}
+              onFocus={handleFocus}
+              selected={!selectedContsId}
+              type={TYPES.oneDepthCategory}
+              ariaLabel={allLabeltext}
+            >
+              {$L(STRING_CONF.ALL)}
+            </TButton>
+          </li> */}
           {brandShopByShowContsList &&
             brandShopByShowContsList.map(({ contsId, contsNm }, index) => (
               <li key={"shop-by-show-conts-" + index}>