[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: 코드 최적화로 성능 개선 기대
2025-12-09 16:05:48 +09:00
parent 2a1cda560c
commit 85c44cdd8b
10 changed files with 234 additions and 352 deletions
--- a/com.twin.app.shoptime/shopByShow.response.json
+++ b/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"
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}
--- 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
@@ -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(({
-  clctId,
-  clctNm,
+export default memo(function ShopByShowContents({
  brandProductInfos,
  contentsIndex,
  handleItemFocus,
+  clctNm,
+  clctImgUrl,
+  patnrId,
  selectedPatnrId,
-  spotlightId,
  shelfOrder,
  shelfTitle,
-  getScrollTo,
-}) => {
-  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]
-  );
-
+  spotlightId,
+}) {
  const handleFocus = useCallback(() => {
-    if (handleItemFocus) {
-      handleItemFocus();
-    }
+    if (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 && (
-        <TVirtualGridList
-          cbScrollTo={getScrollTo}
-          className={css.tVirtualGridList}
-          dataSize={brandProductInfos.length}
-          direction="horizontal"
-          itemHeight={438}
-          itemWidth={324}
-          spacing={18}
-          renderItem={({ 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}
+      <div>
+        <ShopByShowImageCard
+          imageAlt={clctNm}
+          imageSource={clctImgUrl}
+          clctNm={clctNm}
+          spotlightDisabled
+          ariaLabel={clctNm}
+        />
+        <ShopByShowProductList
+          brandProductInfos={brandProductInfos}
+          contentsIndex={contentsIndex}
+          handleFocus={handleFocus}
+          patnrId={patnrId}
+          selectedPatnrId={selectedPatnrId}
+          clctNm={clctNm}
+          shelfOrder={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-spotlightId-" + removeDotAndColon(prdtId)}
-                label={index * 1 + 1 + " of " + brandProductInfos.length}
-                lastLabel=" go to detail, button"
-                euEnrgLblInfos={euEnrgLblInfos}
-                {...rest}
+          spotlightId={spotlightId}
        />
-            );
-          }}
-        />
-      )}
+      </div>
    </Container>
  );
 });
-
-export default ShopByShowContents;
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less
+++ b/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 {
-  padding-right: 18px;
-  .size(@h: 438px);
+  &.gridContainer {
+    > h3 {
+      position: relative;
+      margin-bottom: 22px;
+    }
+  }
+}

-  > div:nth-child(3) {
-    right: -18px;
-  }
+.container:last-child {
+  margin-bottom: 0;
 }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx
+++ b/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");
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less
+++ b/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/utils.module.less";
+@import "../../../../../../style/CommonStyle.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;
  }

--- 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
@@ -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 TItemCardNew, { removeDotAndColon } from "../../../../../../../components/TItemCard/TItemCard.new";
-import TVirtualGridList from "../../../../../../../components/TVirtualGridList/TVirtualGridList";
-import useScrollTo from "../../../../../../../hooks/useScrollTo";
+import { pushPanel, updatePanel } from "../../../../../../actions/panelActions";
+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";
+} from "../../../../../../utils/Config";
+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}
-          spacing={19}
+          itemWidth={324}
+          spacing={18}
          renderItem={renderItem}
        />
      )}
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less
+++ b/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;
-  }
-}
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx
+++ b/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>
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx
+++ b/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;
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less
+++ b/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;
-  }
-}