[251209] feat: NBCU-ShopByShow-3

🕐 커밋 시간: 2025. 12. 09. 16:05:46

📊 변경 통계:
  • 총 파일: 14개
  • 추가: +50줄
  • 삭제: -553줄

📁 추가된 파일:
  + com.twin.app.shoptime/shopByShow.response.json
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less

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

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.jsx
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.module.less
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.jsx
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.module.less
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less

🔧 주요 변경 내용:
  • 소규모 기능 개선
  • 코드 정리 및 최적화
  • 모듈 구조 개선

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/shopByShow.response.json

@@ -0,0 +1,150 @@
+{
+    "retCode": 0,
+    "retMsg": "Success",
+    "data": {
+        "brandShopByShowContsList": [
+            {
+                "patncNm": "Peacock | Shop The Moment",
+                "patnrId": 21,
+                "contsNm": "Below Deck Med",
+                "contsId": "SHBD12345",
+                "contsExpsOrd": 1
+            },
+            {
+                "patncNm": "Peacock | Shop The Moment",
+                "patnrId": 21,
+                "contsNm": "Top Chef",
+                "contsId": "SHTC12345",
+                "contsExpsOrd": 2
+            }
+        ],
+        "brandShopByShowContsInfo": {
+            "contsId": "SHBD12345",
+            "contsNm": "Below Deck Med",
+            "patnrId": "21",
+            "patncNm": "Peacock | Shop The Moment",
+            "brandShopByShowClctInfos": [
+                {
+                    "clctId": "mercury-below_deck_merch",
+                    "clctNm": "Below Deck Merch",
+                    "clctImgUrl": "https://nonprod-commerce.nbcuni.com/uat/content-manager-assets/nbcu-comcast/GdLF-BeUT1-Below Deck CollectionAsset 1.png",
+                    "clctExpsOrd": "1",
+                    "brandProductInfos": [
+                        {
+                            "prdtId": "8ad864e8-dc12-4f01-9f68-717ad115fd06",
+                            "prdtNm": "Alarm clock",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/d2e3f3703a9c4e94b653-dcEJtWjC.jpeg",
+                            "priceInfo": "$ 70.00|$ 70.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "Y",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "Cup-a-Bug"
+                        },
+                        {
+                            "prdtId": "02b81061-e59c-47fd-b3ff-e3c743d17148",
+                            "prdtNm": "Single Delay",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://8bf2164a2f18e0674bc4-c19fb008b43eea897ccae6fb0e59b195.ssl.cf1.rackcdn.com/022511005a3946a2b8e1-MKskNz4E.jpeg",
+                            "priceInfo": "$ 123.00|$ 123.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "N",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "Required for sponsored collection"
+                        },
+                        {
+                            "prdtId": "3058cdf6-e1b7-4bc9-912f-1ef29e70b7c6",
+                            "prdtNm": "Women’s Casual Long Sleeve Half Zip Pullover",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/2800f90b251540baa940-Az4jltNx.jpeg",
+                            "priceInfo": "$ 58.00|$ 58.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "N",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": null
+                        },
+                        {
+                            "prdtId": "7716e71a-4d22-415e-943a-89739ac9b685",
+                            "prdtNm": "IIII",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/d9b7e7e8aa9b4051a2ce-Fm2Tq6SG.jpeg",
+                            "priceInfo": "$ 2.00|$ 2.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "N",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "chair"
+                        }
+                    ]
+                },
+                {
+                    "clctId": "mercury-below_deck_garden",
+                    "clctNm": "Below Deck Garden",
+                    "clctImgUrl": "https://nonprod-commerce.nbcuni.com/uat/content-manager-assets/nbcu-comcast/-eTpg2tMOT-Below Deck CollectionAsset 3.png",
+                    "clctExpsOrd": "2",
+                    "brandProductInfos": [
+                        {
+                            "prdtId": "399d8a6c-773f-49df-93e8-44697a4248ef",
+                            "prdtNm": "AiryWeight Eucalyptus Sheet Set v2",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/d80b6a8edc03406badff-5kaDvtaq.jpeg",
+                            "priceInfo": "$ 185.00|$ 185.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "Y",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "BB SUP 9.23 - SK"
+                        },
+                        {
+                            "prdtId": "4e495aa2-2b10-4120-86bd-bcc9f3843d32",
+                            "prdtNm": "Cooling Towel",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/aec0a6c4770b437ba20a-nOXvmxoD.jpeg",
+                            "priceInfo": "$ 20.00|$ 20.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "Y",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "Posh Pickler"
+                        },
+                        {
+                            "prdtId": "07c2ca90-c730-4bed-8f5d-25a815c2de11",
+                            "prdtNm": "Towel",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://images.cdn.us-central1.gcp.commercetools.com/eba1c230-c331-4b91-8952-38967e532e65/3cf8c0b692724bea96ec-3jTpXCmc.jpeg",
+                            "priceInfo": "$ 50.00|$ 50.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "N",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "BB SUP 9.23 - SK"
+                        },
+                        {
+                            "prdtId": "cc85a17a-e6b5-4d0e-ad3b-67194d5aeafb",
+                            "prdtNm": "STAINLESS STEEL MEASURING CUPS",
+                            "revwGrd": null,
+                            "prdtImgUrl": "https://8bf2164a2f18e0674bc4-c19fb008b43eea897ccae6fb0e59b195.ssl.cf1.rackcdn.com/9dc9460fd125488582e4-5GTzqS_6.jpeg",
+                            "priceInfo": "$ 8.00|$ 8.00|N||||",
+                            "freeShippingFlag": "N",
+                            "soldoutFlag": "N",
+                            "offerInfo": null,
+                            "lgCatCd": null,
+                            "lgCatNm": null,
+                            "brndNm": "TARGET"
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}

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

@@ -2,78 +2,35 @@ import React, { memo, useCallback } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import TItemCardNew, { removeDotAndColon } from "../../../../../components/TItemCard/TItemCard.new";
-import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
-import {
-  LOG_CONTEXT_NAME,
-  LOG_MESSAGE_ID,
-  panel_names,
-} from "../../../../../utils/Config";
-import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
-import Spotlight from "@enact/spotlight";
-import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
-import { useDispatch } from "react-redux";
 import css from "./ShopByShowContents.module.less";
+import ShopByShowImageCard from "./ShopByShowImageCard/ShopByShowImageCard";
+import ShopByShowProductList from "./ShopByShowProductList/ShopByShowProductList";
 
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: null },
   "div"
 );
 
-const ShopByShowContents = memo(({
+export default memo(function ShopByShowContents({
-  clctId,
-  clctNm,
   brandProductInfos,
   contentsIndex,
   handleItemFocus,
+  clctNm,
+  clctImgUrl,
+  patnrId,
   selectedPatnrId,
-  spotlightId,
   shelfOrder,
   shelfTitle,
-  getScrollTo,
+  spotlightId,
-}) => {
+}) {
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback(
-    (patnrId, prdtId) => (e) => {
-      const tItemCard = e.currentTarget;
-      const lastFocusedTarget = Spotlight.getCurrent();
-      const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id");
-      const xContainer = tItemCard?.parentNode?.parentNode;
-
-      if (lastFocusedTargetId && xContainer) {
-        const section = "shop-by-show";
-        const x = getTranslate3dValueByDirection(xContainer);
-
-        dispatch(
-          updatePanel({
-            name: panel_names.FEATURED_BRANDS_PANEL,
-            panelInfo: {
-              lastFocusedTargetId,
-              patnrId,
-              section,
-              x,
-            },
-          })
-        );
-      }
-
-      dispatch(
-        pushPanel({
-          name: panel_names.DETAIL_PANEL,
-          panelInfo: { patnrId, prdtId },
-        })
-      );
-    },
-    [dispatch]
-  );
-
   const handleFocus = useCallback(() => {
-    if (handleItemFocus) {
+    if (handleItemFocus) handleItemFocus();
-      handleItemFocus();
-    }
   }, [handleItemFocus]);
 
+  if (!brandProductInfos || brandProductInfos.length === 0) {
+    return null;
+  }
+
   return (
     <Container
       className={css.container}
@@ -81,64 +38,26 @@ const ShopByShowContents = memo(({
       spotlightId={`${spotlightId}-${contentsIndex}`}
     >
       <h3 data-collection-subtitle={clctNm}>{clctNm}</h3>
-      {brandProductInfos && brandProductInfos.length > 0 && (
+      <div>
-        <TVirtualGridList
+        <ShopByShowImageCard
-          cbScrollTo={getScrollTo}
+          imageAlt={clctNm}
-          className={css.tVirtualGridList}
+          imageSource={clctImgUrl}
-          dataSize={brandProductInfos.length}
+          clctNm={clctNm}
-          direction="horizontal"
+          spotlightDisabled
-          itemHeight={438}
+          ariaLabel={clctNm}
-          itemWidth={324}
+        />
-          spacing={18}
+        <ShopByShowProductList
-          renderItem={({ index, ...rest }) => {
+          brandProductInfos={brandProductInfos}
-            if (!brandProductInfos || !brandProductInfos[index]) {
+          contentsIndex={contentsIndex}
-              return null;
+          handleFocus={handleFocus}
-            }
+          patnrId={patnrId}
-
+          selectedPatnrId={selectedPatnrId}
-            const product = brandProductInfos[index];
+          clctNm={clctNm}
-            const {
+          shelfOrder={shelfOrder}
-              prdtImgUrl,
-              prdtOfferId,
-              patnrId = "21",
-              prdtNm,
-              prdtId,
-              prdtPrice,
-              patncNm,
-              brndNm,
-              lgCatNm,
-              euEnrgLblInfos,
-            } = product;
-
-            return (
-              <TItemCardNew
-                catNm={lgCatNm}
-                contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
-                messageId={LOG_MESSAGE_ID.SHELF_CLICK}
-                patnerName={patncNm || "Peacock | Shop The Moment"}
-                brandName={brndNm}
-                shelfId={spotlightId}
-                shelfLocation={shelfOrder}
           shelfTitle={shelfTitle}
-                imageAlt={prdtNm}
+          spotlightId={spotlightId}
-                imageSource={prdtImgUrl}
-                onClick={handleClick(patnrId, prdtId)}
-                onFocus={handleFocus}
-                offerInfo={prdtOfferId}
-                priceInfo={prdtPrice}
-                productId={prdtId}
-                productName={prdtNm}
-                spotlightId={"shop-by-show-spotlightId-" + removeDotAndColon(prdtId)}
-                label={index * 1 + 1 + " of " + brandProductInfos.length}
-                lastLabel=" go to detail, button"
-                euEnrgLblInfos={euEnrgLblInfos}
-                {...rest}
         />
-            );
+      </div>
-          }}
-        />
-      )}
     </Container>
   );
 });
-
-export default ShopByShowContents;

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less

@@ -8,20 +8,25 @@
     position: relative;
     .font(@fontFamily: @arialFontBold, @fontSize: 36px);
     color: @COLOR_GRAY08;
-    margin-bottom: 22px;
   }
 
   > div:nth-child(2) {
     .flex(@justifyCenter: flex-start);
     .size(@w: 100%, @h: auto);
   }
+
+  &.listContainer {
+    margin-bottom: 12px;
   }
 
-.tVirtualGridList {
+  &.gridContainer {
-  padding-right: 18px;
+    > h3 {
-  .size(@h: 438px);
+      position: relative;
+      margin-bottom: 22px;
+    }
+  }
+}
 
-  > div:nth-child(3) {
+.container:last-child {
-    right: -18px;
+  margin-bottom: 0;
-  }
 }

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

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 
 import Spottable from "@enact/spotlight/Spottable";
 
-import CustomImage from "../../../../../../../components/CustomImage/CustomImage";
+import CustomImage from "../../../../../../components/CustomImage/CustomImage";
 import css from "./ShopByShowImageCard.module.less";
 
 const SpottableComponent = Spottable("figure");

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less

@@ -1,16 +1,16 @@
-@import "../../../../../../../style/CommonStyle.module.less";
+@import "../../../../../../style/CommonStyle.module.less";
-@import "../../../../../../../style/utils.module.less";
+@import "../../../../../../style/utils.module.less";
 
 .card {
   position: relative;
-  .size(@w: 665px, @h:438px);
+  .size(@w: 663px, @h:438px);
   padding: 18px;
   background-color: @COLOR_WHITE;
   border: solid 1px @COLOR_GRAY02;
   border-radius: 12px;
 
   img {
-    .size(@w: 629px, @h:402px);
+    .size(@w: 627px, @h:402px);
     object-fit: cover;
   }
 

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

@@ -1,31 +1,34 @@
-import React, { useCallback, useRef, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
 import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
 
-import { pushPanel, updatePanel } from "../../../../../../../actions/panelActions";
+import { pushPanel, updatePanel } from "../../../../../../actions/panelActions";
-import TItemCardNew, { removeDotAndColon } from "../../../../../../../components/TItemCard/TItemCard.new";
+import TItemCardNew, {
-import TVirtualGridList from "../../../../../../../components/TVirtualGridList/TVirtualGridList";
+  removeDotAndColon,
-import useScrollTo from "../../../../../../../hooks/useScrollTo";
+} from "../../../../../../components/TItemCard/TItemCard.new";
+import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList";
+import useScrollTo from "../../../../../../hooks/useScrollTo";
 import {
   LOG_CONTEXT_NAME,
   LOG_MESSAGE_ID,
   panel_names,
-} from "../../../../../../../utils/Config";
+} from "../../../../../../utils/Config";
-import { getTranslate3dValueByDirection } from "../../../../../../../utils/helperMethods";
+import { getTranslate3dValueByDirection } from "../../../../../../utils/helperMethods";
 import css from "./ShopByShowProductList.module.less";
 
 export default function ShopByShowProductList({
   brandProductInfos,
   contentsIndex,
   handleFocus,
+  patnrId,
   selectedPatnrId,
-  spotlightId,
+  clctNm,
   shelfOrder,
   shelfTitle,
-  clctNm,
+  spotlightId,
 }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
 
@@ -57,11 +60,12 @@ export default function ShopByShowProductList({
   }, [scrollLeft, selectedPatnrId]);
 
   const handleClick = useCallback(
-    (patnrId, prdtId) => (e) => {
+    (prdtId) => (e) => {
       const tItemCard = e.currentTarget;
 
       const lastFocusedTarget = Spotlight.getCurrent();
-      const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id");
+      const lastFocusedTargetId =
+        lastFocusedTarget?.getAttribute("data-spotlight-id");
       const exprOrd = parseInt(
         lastFocusedTarget?.getAttribute("data-exposure-order")
       );
@@ -93,20 +97,16 @@ export default function ShopByShowProductList({
         })
       );
     },
-    [dispatch]
+    [dispatch, patnrId]
   );
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
-      if (!brandProductInfos || !brandProductInfos[index]) {
-        return null;
-      }
-
       const product = brandProductInfos[index];
       const {
         prdtImgUrl,
         prdtOfferId,
-        patnrId = "21",
+        patnrId: productPartnerId = "21",
         prdtNm,
         prdtId,
         prdtPrice,
@@ -128,13 +128,13 @@ export default function ShopByShowProductList({
           shelfTitle={shelfTitle}
           imageAlt={prdtNm}
           imageSource={prdtImgUrl}
-          onClick={handleClick(patnrId, prdtId)}
+          onClick={handleClick(prdtId)}
           onFocus={handleFocus}
           offerInfo={prdtOfferId}
           priceInfo={prdtPrice}
           productId={prdtId}
           productName={prdtNm}
-          spotlightId={"shop-by-show-product-list-" + removeDotAndColon(prdtId)}
+          spotlightId={"shop-by-show-list-spotlightId-" + removeDotAndColon(prdtId)}
           data-exposure-order={contentsIndex + 1}
           label={index + 1 + " of " + brandProductInfos.length}
           lastLabel=" go to detail, button"
@@ -143,7 +143,12 @@ export default function ShopByShowProductList({
         />
       );
     },
-    [brandProductInfos, contentsIndex, handleClick, handleFocus]
+    [
+      brandProductInfos,
+      contentsIndex,
+      handleClick,
+      handleFocus,
+    ]
   );
 
   return (
@@ -155,8 +160,8 @@ export default function ShopByShowProductList({
           dataSize={brandProductInfos.length}
           direction="horizontal"
           itemHeight={438}
-          itemWidth={323}
+          itemWidth={324}
-          spacing={19}
+          spacing={18}
           renderItem={renderItem}
         />
       )}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less

@@ -1,9 +1,9 @@
-@import "../../../../../../../style/utils.module.less";
+@import "../../../../../../style/utils.module.less";
 
 .container {
   .flex();
   overflow: hidden;
-  .size(@w: calc(100% - 665px), @h: 482px);
+  .size(@w: calc(100% - 663px), @h: 482px);
   padding: 0 18px;
 
   // tVirtualGridListContainer
@@ -19,12 +19,3 @@
     }
   }
 }
-
-.tVirtualGridList {
-  padding-right: 18px;
-  .size(@h: 438px);
-
-  > div:nth-child(3) {
-    right: -18px;
-  }
-}

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

@@ -22,7 +22,7 @@ import { getBrandShopByShow } from '../../../../actions/brandActions';
 import useScrollTo from '../../../../hooks/useScrollTo';
 import css from './ShopByShowList.module.less';
 import ShopByShowNav from './ShopByShowNav/ShopByShowNav';
-import ShopByShowSection from './ShopByShowSection/ShopByShowSection';
+import ShopByShowContents from './ShopByShowContents/ShopByShowContents';
 
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -97,16 +97,18 @@ export default function ShopByShowList({
       />
 
       {brandShopByShowClctInfos.map((collection, collIdx) => (
-        <ShopByShowSection
+        <ShopByShowContents
           key={`${spotlightId}-${collIdx}`}
-          clctNm={collection.clctNm}
           brandProductInfos={collection.brandProductInfos}
           contentsIndex={collIdx}
           handleItemFocus={_handleItemFocus}
+          clctNm={collection.clctNm}
+          clctImgUrl={collection.clctImgUrl}
+          patnrId={selectedPatnrId}
           selectedPatnrId={selectedPatnrId}
-          spotlightId={spotlightId}
           shelfOrder={shelfOrder}
           shelfTitle={shelfTitle}
+          spotlightId={spotlightId}
         />
       ))}
     </Container>

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

@@ -1,152 +0,0 @@
-import React, { memo, useCallback } from "react";
-
-import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-
-import TItemCardNew, { removeDotAndColon } from "../../../../../components/TItemCard/TItemCard.new";
-import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
-import useScrollTo from "../../../../../hooks/useScrollTo";
-import {
-  LOG_CONTEXT_NAME,
-  LOG_MESSAGE_ID,
-  panel_names,
-} from "../../../../../utils/Config";
-import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
-import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
-import { useDispatch } from "react-redux";
-import css from "./ShopByShowSection.module.less";
-
-const Container = SpotlightContainerDecorator(
-  { leaveFor: { right: "" }, enterTo: null },
-  "div"
-);
-
-const ShopByShowSection = memo(({
-  clctNm,
-  brandProductInfos,
-  contentsIndex,
-  handleItemFocus,
-  selectedPatnrId,
-  spotlightId,
-  shelfOrder,
-  shelfTitle,
-}) => {
-  const { getScrollTo } = useScrollTo();
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback(
-    (patnrId, prdtId) => (e) => {
-      const tItemCard = e.currentTarget;
-      const lastFocusedTarget = Spotlight.getCurrent();
-      const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id");
-      const xContainer = tItemCard?.parentNode?.parentNode;
-
-      if (lastFocusedTargetId && xContainer) {
-        const section = "shop-by-show";
-        const x = getTranslate3dValueByDirection(xContainer);
-
-        dispatch(
-          updatePanel({
-            name: panel_names.FEATURED_BRANDS_PANEL,
-            panelInfo: {
-              lastFocusedTargetId,
-              patnrId,
-              section,
-              x,
-            },
-          })
-        );
-      }
-
-      dispatch(
-        pushPanel({
-          name: panel_names.DETAIL_PANEL,
-          panelInfo: { patnrId, prdtId },
-        })
-      );
-    },
-    [dispatch]
-  );
-
-  const handleFocus = useCallback(() => {
-    if (handleItemFocus) {
-      handleItemFocus();
-    }
-  }, [handleItemFocus]);
-
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      if (!brandProductInfos || !brandProductInfos[index]) {
-        return null;
-      }
-
-      const product = brandProductInfos[index];
-      const {
-        prdtImgUrl,
-        prdtOfferId,
-        patnrId = "21",
-        prdtNm,
-        prdtId,
-        prdtPrice,
-        patncNm,
-        brndNm,
-        lgCatNm,
-        euEnrgLblInfos,
-      } = product;
-
-      return (
-        <TItemCardNew
-          catNm={lgCatNm}
-          contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
-          messageId={LOG_MESSAGE_ID.SHELF_CLICK}
-          patnerName={patncNm || "Peacock | Shop The Moment"}
-          brandName={brndNm}
-          shelfId={spotlightId}
-          shelfLocation={shelfOrder}
-          shelfTitle={shelfTitle}
-          imageAlt={prdtNm}
-          imageSource={prdtImgUrl}
-          onClick={handleClick(patnrId, prdtId)}
-          onFocus={handleFocus}
-          offerInfo={prdtOfferId}
-          priceInfo={prdtPrice}
-          productId={prdtId}
-          productName={prdtNm}
-          spotlightId={"shop-by-show-section-" + removeDotAndColon(prdtId)}
-          label={index * 1 + 1 + " of " + brandProductInfos.length}
-          lastLabel=" go to detail, button"
-          euEnrgLblInfos={euEnrgLblInfos}
-          {...rest}
-        />
-      );
-    },
-    [brandProductInfos, handleClick, handleFocus]
-  );
-
-  if (!brandProductInfos || brandProductInfos.length === 0) {
-    return null;
-  }
-
-  return (
-    <Container
-      className={css.container}
-      data-wheel-point
-      spotlightId={`${spotlightId}-section-${contentsIndex}`}
-    >
-      <h3 className={css.sectionTitle}>{clctNm}</h3>
-
-      <TVirtualGridList
-        cbScrollTo={getScrollTo}
-        className={css.tVirtualGridList}
-        dataSize={brandProductInfos.length}
-        direction="horizontal"
-        itemHeight={438}
-        itemWidth={323}
-        spacing={19}
-        renderItem={renderItem}
-      />
-    </Container>
-  );
-});
-
-export default ShopByShowSection;

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less

@@ -1,38 +0,0 @@
-@import "../../../../../style/CommonStyle.module.less";
-@import "../../../../../style/utils.module.less";
-
-.container {
-  padding-left: 60px;
-  margin-bottom: 40px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.sectionTitle {
-  position: relative;
-  .font(@fontFamily: @arialFontBold, @fontSize: 42px);
-  color: @COLOR_GRAY08;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  &::before {
-    content: "";
-    width: 6px;
-    height: 36px;
-    background-color: #C70850;
-    flex-shrink: 0;
-  }
-}
-
-.tVirtualGridList {
-  padding-right: 18px;
-  .size(@h: 438px);
-
-  > div:nth-child(3) {
-    right: -18px;
-  }
-}