From 3b2f30f6dc5ef07186af5b63567e1c4e1c5f916e Mon Sep 17 00:00:00 2001
From: "younghoon100.park" <younghoon100.park@lgepartner.com>
Date: Wed, 21 Feb 2024 14:37:08 +0900
Subject: [PATCH] =?UTF-8?q?[FeaturedBrandsPanel]=20component=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detail Notes :

1. Recommended Show Nav 추가
2. 다수의 panel, padding 수정
3. FeaturedBestSellerList, action 추가
---
 .../FeaturedBestSeller.module.less            |  1 +
 .../FeaturedBestSellerList.jsx                | 23 ++++++-
 .../FeaturedBrandsPanel.jsx                   | 57 ++++++++--------
 .../FeaturedBrandsPanel.module.less           |  4 --
 .../LiveChannels/LiveChannels.module.less     |  1 +
 .../RecommendedShows/RecommendedShows.jsx     | 36 +++++++---
 .../RecommendedShows.module.less              |  1 +
 .../RecommendedShowsNav.jsx                   | 68 +++++++++++++++++++
 .../RecommendedShowsNav.module.less           | 18 +++++
 .../RecommendedShowsNav/package.json          |  6 ++
 .../TodaysDeals/TodaysDeals.module.less       |  1 +
 .../UpComing/UpComing.module.less             |  1 +
 12 files changed, 173 insertions(+), 44 deletions(-)
 create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.jsx
 create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.module.less
 create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/package.json

diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.module.less
index 2dcfb075..6aafcec4 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.module.less
@@ -3,6 +3,7 @@
 
 .container {
   margin-bottom: 58px;
+  padding-left: 60px;
 
   h2 {
     margin-bottom: 24px;
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
index 1bf745c1..6091bc18 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
@@ -1,9 +1,29 @@
-import React, { memo } from "react";
+import React, { memo, useCallback } from "react";
 
+import { useDispatch } from "react-redux";
+
+import { pushPanel } from "../../../../actions/panelActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import { panel_names } from "../../../../utils/Config";
 import css from "./FeaturedBestSellerList.module.less";
 
 export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) {
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback(
+    (brandBestSellerInfo) => {
+      const { patnrId, prdtId } = brandBestSellerInfo;
+
+      dispatch(
+        pushPanel({
+          name: panel_names.DETAIL_PANEL,
+          panelInfo: { patnrId, prdtId },
+        })
+      );
+    },
+    [dispatch, brandBestSellerInfo]
+  );
+
   return (
     <div className={css.container}>
       {brandBestSellerInfo && (
@@ -14,6 +34,7 @@ export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) {
           items={brandBestSellerInfo}
           itemHeight={438}
           itemWidth={324}
+          onClick={handleClick}
           spacing={18}
         />
       )}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
index e35a206d..c1d0fdeb 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -119,37 +119,36 @@ export default function FeaturedBrandsPanel() {
           />
         )}
 
-        <div className={css.sectionContainer}>
-          {brandChanInfo && (
-            <LiveChannels
-              brandChanInfo={brandChanInfo[0]}
-              brandChannelCnt={brandChannelCnt}
+        {brandChanInfo && (
+          <LiveChannels
+            brandChanInfo={brandChanInfo[0]}
+            brandChannelCnt={brandChannelCnt}
+          />
+        )}
+
+        {brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && (
+          <UpComing brandLiveChannelUpcoming={brandLiveChannelUpcoming} />
+        )}
+
+        {brandTsvInfo && isNotEmptyObject(brandTsvInfo) && (
+          <TodaysDeals brandTsvInfo={brandTsvInfo} />
+        )}
+
+        {brandBestSellerInfo && ( // @@pyh Todo, 추후 노출 조건 전달 (현재 노출 조건 존재 하지 않음)
+          <FeaturedBestSeller brandBestSellerInfo={brandBestSellerInfo} />
+        )}
+
+        {brandRecommendedShowCategoryInfo &&
+          brandRecommendedShowInfo && ( // @@pyh Todo, 노출 조건 문의 (현재 노출 조건 존재 하지 않음)
+            <RecommendedShows
+              brandRecommendedShowCategoryInfo={
+                brandRecommendedShowCategoryInfo
+              }
+              brandRecommendedShowInfo={brandRecommendedShowInfo}
+              selectedCatCd={selectedCatCd}
+              setSelectedCatCd={setSelectedCatCd}
             />
           )}
-
-          {brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && (
-            <UpComing brandLiveChannelUpcoming={brandLiveChannelUpcoming} />
-          )}
-
-          {brandTsvInfo && isNotEmptyObject(brandTsvInfo) && (
-            <TodaysDeals brandTsvInfo={brandTsvInfo} />
-          )}
-
-          {brandBestSellerInfo && ( // @@pyh Todo, 추후 노출 조건 전달 (현재 노출 조건 존재 하지 않음)
-            <FeaturedBestSeller brandBestSellerInfo={brandBestSellerInfo} />
-          )}
-
-          {brandRecommendedShowCategoryInfo &&
-            brandRecommendedShowInfo && ( // @@pyh Todo, 노출 조건 문의 (현재 노출 조건 존재 하지 않음)
-              <RecommendedShows
-                brandRecommendedShowCategoryInfo={
-                  brandRecommendedShowCategoryInfo
-                }
-                brandRecommendedShowInfo={brandRecommendedShowInfo}
-                setSelectedCatCd={setSelectedCatCd}
-              />
-            )}
-        </div>
       </TBody>
     </TPanel>
   );
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less
index 5dd9959f..8600ce2e 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less
@@ -6,9 +6,5 @@
 
   .tBody {
     height: 1080px;
-
-    .sectionContainer {
-      padding-left: 60px;
-    }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less
index 8926b79e..e15bace1 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less
@@ -3,6 +3,7 @@
 
 .container {
   margin-bottom: 58px;
+  padding-left: 60px;
 
   h2 {
     margin-bottom: 24px;
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx
index 1ccc5742..6933f54b 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx
@@ -3,30 +3,46 @@ import React, { memo } from "react";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import { $L } from "../../../utils/helperMethods";
 import css from "./RecommendedShows.module.less";
+import RecommendedShowsNav from "./RecommendedShowsNav/RecommendedShowsNav";
 
 const STRING_CONF = {
   RECOMMENDED_SHOWS: $L("RECOMMENDED SHOWS"),
 };
 
+{
+  /* <TButton
+  onClick={() => handleClick(catCd)}
+  selected={selectedCatCd === String(catCd)}
+  type={TYPES.oneDepthCategory}
+>
+  {catNm}
+</TButton>
+<TButton
+  selected={selectedCatCd === String(catCd)}
+  size={null}
+  color={null}
+  type={TYPES.twoDepthCategory}
+  withMarquee
+>
+  {catNm}
+</TButton> */
+}
+
 export default function RecommendedShows({
   brandRecommendedShowCategoryInfo,
   brandRecommendedShowInfo,
+  selectedCatCd,
   setSelectedCatCd,
 }) {
-  const handleClick = (catCd) => {
-    setSelectedCatCd(String(catCd));
-  };
-
   return (
     <div className={css.container}>
       <SectionTitle title={STRING_CONF.RECOMMENDED_SHOWS} />
 
-      {brandRecommendedShowCategoryInfo &&
-        brandRecommendedShowCategoryInfo.map(({ catNm, catCd }) => (
-          <div key={catNm} onClick={() => handleClick(catCd)}>
-            {catNm} {catCd}
-          </div>
-        ))}
+      <RecommendedShowsNav
+        brandRecommendedShowCategoryInfo={brandRecommendedShowCategoryInfo}
+        selectedCatCd={selectedCatCd}
+        setSelectedCatCd={setSelectedCatCd}
+      />
     </div>
   );
 }
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less
index 2dcfb075..b67bd2e2 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less
@@ -6,5 +6,6 @@
 
   h2 {
     margin-bottom: 24px;
+    padding-left: 60px;
   }
 }
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.jsx
new file mode 100644
index 00000000..373ff588
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.jsx
@@ -0,0 +1,68 @@
+import React, { useCallback } from "react";
+
+import Scroller from "@enact/sandstone/Scroller";
+
+import TButton, { TYPES } from "../../../../components/TButton/TButton";
+import useScrollReset from "../../../../hooks/useScrollReset";
+import useScrollTo from "../../../../hooks/useScrollTo";
+import css from "./RecommendedShowsNav.module.less";
+
+export default function RecommendedShowsNav({
+  brandRecommendedShowCategoryInfo,
+  selectedCatCd,
+  setSelectedCatCd,
+}) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    true
+  );
+
+  const handleBlur = useCallback((index) => {
+    if (index !== 0) {
+      return;
+    }
+    handleStopScrolling();
+  }, []);
+
+  const handleClick = useCallback((catCd) => {
+    setSelectedCatCd(String(catCd));
+  }, []);
+
+  const handleFocus = useCallback((index) => {
+    if (index !== 0) {
+      return;
+    }
+
+    handleScrollReset();
+  }, []);
+
+  return (
+    <nav className={css.nav}>
+      <Scroller
+        cbScrollTo={getScrollTo}
+        direction="horizontal"
+        horizontalScrollbar="hidden"
+        noScrollByWheel
+        scrollMode="translate"
+      >
+        <ul>
+          {brandRecommendedShowCategoryInfo &&
+            brandRecommendedShowCategoryInfo.map(({ catNm, catCd }, index) => (
+              <li key={"brandRecommendedShowCategoryInfo-" + index}>
+                <TButton
+                  onBlur={() => handleBlur(index)}
+                  onClick={() => handleClick(catCd)}
+                  onFocus={() => handleFocus(index)}
+                  selected={selectedCatCd === String(catCd)}
+                  type={TYPES.oneDepthCategory}
+                >
+                  {catNm}
+                </TButton>
+              </li>
+            ))}
+        </ul>
+      </Scroller>
+    </nav>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.module.less
new file mode 100644
index 00000000..17b435b7
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.module.less
@@ -0,0 +1,18 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.nav {
+  .size(@w: 100%, @h: 144px);
+  background-color: #dddddd;
+
+  ul {
+    display: flex;
+    align-items: center;
+    height: inherit;
+    padding-left: 60px;
+
+    li {
+      margin-right: 12px;
+    }
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/package.json
new file mode 100644
index 00000000..9c365d35
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "RecommendedShowsNav.jsx",
+  "styles": [
+    "RecommendedShowsNav.module.less"
+  ]
+}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less
index 2dcfb075..6aafcec4 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less
@@ -3,6 +3,7 @@
 
 .container {
   margin-bottom: 58px;
+  padding-left: 60px;
 
   h2 {
     margin-bottom: 24px;
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less
index 2dcfb075..6aafcec4 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less
@@ -3,6 +3,7 @@
 
 .container {
   margin-bottom: 58px;
+  padding-left: 60px;
 
   h2 {
     margin-bottom: 24px;