[FeaturedBrandsPanel] component 추가 및 css 수정

Detail Notes :

1. Recommended Show Nav 추가
2. 다수의 panel, padding 수정
3. FeaturedBestSellerList, action 추가

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;

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}
         />
       )}

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

@@ -119,37 +119,36 @@ export default function FeaturedBrandsPanel() {
           />
         )}
 
-        <div className={css.sectionContainer}>
+        {brandChanInfo && (
-          {brandChanInfo && (
+          <LiveChannels
-            <LiveChannels
+            brandChanInfo={brandChanInfo[0]}
-              brandChanInfo={brandChanInfo[0]}
+            brandChannelCnt={brandChannelCnt}
-              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>
   );

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less

@@ -6,9 +6,5 @@
 
   .tBody {
     height: 1080px;
-
-    .sectionContainer {
-      padding-left: 60px;
-    }
   }
 }

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;

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 &&
+      <RecommendedShowsNav
-        brandRecommendedShowCategoryInfo.map(({ catNm, catCd }) => (
+        brandRecommendedShowCategoryInfo={brandRecommendedShowCategoryInfo}
-          <div key={catNm} onClick={() => handleClick(catCd)}>
+        selectedCatCd={selectedCatCd}
-            {catNm} {catCd}
+        setSelectedCatCd={setSelectedCatCd}
-          </div>
+      />
-        ))}
     </div>
   );
 }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less

@@ -6,5 +6,6 @@
 
   h2 {
     margin-bottom: 24px;
+    padding-left: 60px;
   }
 }

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>
+  );
+}

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;
+    }
+  }
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "RecommendedShowsNav.jsx",
+  "styles": [
+    "RecommendedShowsNav.module.less"
+  ]
+}

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;

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;