[MainPanel] BestSeller, PopularShow 추가.

com.twin.app.shoptime/src/components/TGrid/TGrid.module.less

@@ -14,4 +14,7 @@
     align-items: unset;
     flex-direction: unset;
   }
+  &.homeBestSeller {
+    justify-content: unset;
+  }
 }

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { useSelector } from "react-redux";
+import TPanel from "../../../components/TPanel/TPanel";
+import TButton from "../../../components/TButton/TButton";
+import { $L } from "../../../utils/helperMethods";
+import css from "./BestSeller.module.less";
+import classNames from "classnames";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spotlight from "@enact/spotlight";
+import Scroller from "@enact/sandstone/Scroller";
+
+import { changeAppStatus } from "../../../features/common/commonSlice";
+import { getSearch } from "../../../features/search/searchSlice";
+
+import TGrid from "../../../components/TGrid/TGrid";
+import TItemCard from "../../../components/TItemCard/TItemCard";
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div",
+  "li"
+);
+
+const BestSeller = () => {
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData.bestSeller
+  );
+  return (
+    <Container className={css.noDataWrap}>
+      <div className={css.bestSellerWrap}>
+        <SectionTitle title={$L(`BEST SELLER`)} />
+        <Scroller
+          direction="horizontal"
+          horizontalScrollbar="hidden"
+          noScrollByWheel={true}
+          scrollMode="translate"
+          className={css.homeScroll}
+        >
+          <TGrid type="homeBestSeller">
+            {bestSellerDatas &&
+              bestSellerDatas.map((bestSeller) => (
+                <TItemCard
+                  key={bestSeller.rankOrd}
+                  imageSource={bestSeller.imgUrl}
+                  imageAlt={bestSeller.prdtNm}
+                  productName={bestSeller.prdtNm}
+                  priceInfo={bestSeller.priceInfo}
+                  rank={bestSeller.rankOrd}
+                  isBestSeller
+                  accType
+                />
+              ))}
+          </TGrid>
+        </Scroller>
+      </div>
+    </Container>
+  );
+};
+
+export default BestSeller;

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less

@@ -0,0 +1,12 @@
+.bestSellerWrap {
+  padding: 70px 60px 78px;
+  > h2 {
+    margin: 0px 0 34px;
+    font-size: 42px;
+  }
+  > ul {
+    justify-content: unset;
+    align-items: unset;
+    flex-direction: unset;
+  }
+}

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

@@ -10,42 +10,48 @@ import css from "../HomePanel/HomePanel.module.less";
 import HomeTemplate from "./HomeTemplate";
 import OnSale from "../HomePanel/OnSale/OnSale";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
+import PopularShow from "../HomePanel/PopularShow/PopularShow";
+import BestSeller from "../HomePanel/BestSeller/BestSeller";
 
 export default function HomePanel() {
   const dispatch = useDispatch();
 
   const latoutData = useSelector((state) => state.home.layoutData);
-  const homeMainContentsBannerInfos = useSelector((state) => state.home.mainContentsData.homeMainContentsBannerInfos);
+  const homeMainContentsBannerInfos = useSelector(
-  const homeTopDisplayInfos = useSelector((state) => state.home.mainContentsData.homeTopDisplayInfos);
+    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
+  );
+  const homeTopDisplayInfos = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos
+  );
   const [selectTemplate, setSelectTemplate] = useState(null);
 
   const getHomeLayout = () => {
     console.log("레이아웃");
-  }
+  };
 
   const getHomeContents = () => {
     // 추후 다시 한번 확인: 코드(DSP00201, 202, 203)
     // 템플릿 선택
     let tempTemplate = 0;
 
-    if(homeMainContentsBannerInfos){
+    if (homeMainContentsBannerInfos) {
-      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00201"){
+      if (homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00201") {
         tempTemplate = 1;
       }
-      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00202"){
+      if (homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00202") {
         tempTemplate = 2;
       }
-      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00203"){
+      if (homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00203") {
         tempTemplate = 3;
       }
     }
     setSelectTemplate(tempTemplate);
-  }
+  };
 
-  useEffect(()=>{
+  useEffect(() => {
     getHomeLayout();
     getHomeContents();
-  },[])
+  }, []);
 
   return (
     <TPanel className={css.panelDesign}>
@@ -56,7 +62,8 @@ export default function HomePanel() {
       />
       <SubCategory />
       <OnSale />
+      <PopularShow />
+      <BestSeller />
     </TPanel>
   );
 }
-

com.twin.app.shoptime/src/views/HomePanel/OnSale/OnSale.module.less

@@ -11,6 +11,7 @@
     color: #1a1a1a;
     font-weight: bold;
     font-family: "LGSmartUIBold";
+    font-size: 42px;
   }
   .onSaleItem {
     margin-top: 20px;

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -4,16 +4,16 @@ import { $L } from "../../../utils/helperMethods";
 import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";
-
+import Scroller from "@enact/sandstone/Scroller";
 import { getTop20Show } from "../../../features/main/mainSlice";
-
+import classNames from "classnames";
 import css from "../PopularShow/PopularShow.module.less";
 
-const SpottableComponent = Spottable("div");
+const SpottableComponent = Spottable("li");
 
 const PopularShow = (...rest) => {
   const dispatch = useDispatch();
-  const TopInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
 
   useEffect(() => {
     dispatch(getTop20Show());
@@ -22,28 +22,32 @@ const PopularShow = (...rest) => {
     <div {...rest} className={css.container}>
       <div className={css.popularShow}>
         <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>
+
         <ul className={css.showList}>
-          <li className={css.listItem}>
+          {topInfos &&
-            <img src="https://picsum.photos/510/288" className={css.itemImg} />
+            topInfos.map((item) => {
-            <div className={css.horizonItem}>
+              return (
-              Product Name Product Name Product Name Product Name Product Name
+                <li
-              Product Name Product Name Product Name
+                  key={item.listItem}
+                  className={classNames(
+                    item.thumbnailUrl960 == item.thumbnailUrl
+                      ? css.listItemVertical
+                      : css.listItem
+                  )}
+                >
+                  <img src={item.thumbnailUrl960} className={css.itemImg} />
+                  <div
+                    className={classNames(
+                      item.thumbnailUrl960 == item.thumbnailUrl
+                        ? css.verticalItem
+                        : css.horizonItem
+                    )}
+                  >
+                    {item.showNm}
                   </div>
                 </li>
-          {/* 세로형
+              );
-          <li className={css.listItemVertical}>
+            })}
-            <img src="https://picsum.photos/228/402" className={css.itemImg} />
-            <div className={css.verticalItem}>
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name
-            </div>
-          </li>
-          */}
         </ul>
       </div>
     </div>

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less

@@ -1,6 +1,6 @@
 @import "../../../style/CommonStyle.module.less";
 .popularShow {
-  padding: 60px 0;
+  padding: 60px 0 0;
   width: 100%;
   overflow-x: auto;
   margin-left: 60px;
@@ -11,11 +11,12 @@
     color: #1a1a1a;
     font-weight: bold;
     font-family: "LGSmartUIBold";
+    font-size: 42px;
   }
   .showList {
     margin-top: 20px;
     display: flex;
-    overflow: hidden;
+    overflow: auto;
     > li:nth-child(1n) {
       margin-right: 18px;
       border: 4px solid transparent;
@@ -37,6 +38,11 @@
       border-radius: 12px;
       border: solid 1px @COLOR_GRAY02;
       box-sizing: border-box;
+      > img {
+        width: 510px;
+        height: 288px;
+        object-fit: contain;
+      }
       .horizonItem {
         width: 510px;
         height: 60px;
@@ -59,6 +65,11 @@
       border-radius: 12px;
       border: solid 1px @COLOR_GRAY02;
       box-sizing: border-box;
+      > img {
+        width: 228px;
+        height: 402px;
+        object-fit: contain;
+      }
       .verticalItem {
         margin-left: 11px;
         color: #333;