[MainPanel] BestSeller, PopularShow 추가.

2024-01-30 13:17:28 +09:00
parent 3e1f3b5ee3
commit dc2276ebb7
7 changed files with 143 additions and 43 deletions
--- a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
+++ b/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
@@ -14,4 +14,7 @@
    align-items: unset;
    flex-direction: unset;
  }
+  &.homeBestSeller {
+    justify-content: unset;
+  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/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;
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
+++ b/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;
+  }
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -10,43 +10,49 @@ 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 homeTopDisplayInfos = useSelector((state) => state.home.mainContentsData.homeTopDisplayInfos);
+  const homeMainContentsBannerInfos = useSelector(
+    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
+  );
+  const homeTopDisplayInfos = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos
+  );
  const [selectTemplate, setSelectTemplate] = useState(null);

  const getHomeLayout = () => {
    console.log("레이아웃");
-  }
+  };

-  const getHomeContents = () => {    
+  const getHomeContents = () => {
    // 추후 다시 한번 확인: 코드(DSP00201, 202, 203)
    // 템플릿 선택
    let tempTemplate = 0;

-    if(homeMainContentsBannerInfos){
-      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00201"){
+    if (homeMainContentsBannerInfos) {
+      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);    
-  }
+    }
+    setSelectTemplate(tempTemplate);
+  };

-  useEffect(()=>{
+  useEffect(() => {
    getHomeLayout();
    getHomeContents();
-  },[])
-  
+  }, []);
+
  return (
    <TPanel className={css.panelDesign}>
      <HomeTemplate
@@ -56,7 +62,8 @@ export default function HomePanel() {
      />
      <SubCategory />
      <OnSale />
+      <PopularShow />
+      <BestSeller />
    </TPanel>
  );
 }
-
--- a/com.twin.app.shoptime/src/views/HomePanel/OnSale/OnSale.module.less
+++ b/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;
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/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}>
-            <img src="https://picsum.photos/510/288" className={css.itemImg} />
-            <div className={css.horizonItem}>
-              Product Name Product Name Product Name Product Name Product Name
-              Product Name Product Name Product Name
-            </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>
-          */}
+          {topInfos &&
+            topInfos.map((item) => {
+              return (
+                <li
+                  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>
+              );
+            })}
        </ul>
      </div>
    </div>
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
+++ b/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;