[categoryPanel] 아이템 카드, 결과 없을 시 노출 view 구현

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx

@@ -1,5 +1,88 @@
-import React from "react";
+import React, { useCallback } from "react";
+
+import { useSelector } from "react-redux";
+
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import TItemCard from "../../../../components/TItemCard/TItemCard";
+import { scaleH, scaleW } from "../../../../utils/helperMethods";
+import NoResultsCategoryItems from "../NoResultsCategory/NoResultsCategoryItems";
+import css from "./ItemContents.module.less";
+
+const LIST_ITEM_CONF = {
+  ITEM_WIDTH: 324,
+  ITEM_HEIGHT: 438,
+  SPACING: 18,
+};
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
 
 export default function ItemContents() {
-  return <p>ITEM</p>;
+  const itemListDatas = useSelector(
+    (state) => state.main.subCategoryData?.categoryItemInfos
+  );
+
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const itemInfo = itemListDatas[index];
+      const {
+        catNm,
+        cntryCd,
+        imgUrl,
+        lgCatCd,
+        offerInfo,
+        patncLogoPath,
+        patnrId,
+        prdtId,
+        prdtNm,
+        priceInfo,
+        rankOrd,
+        total,
+      } = itemInfo;
+
+      return (
+        <TItemCard
+          {...rest}
+          key={prdtId}
+          imageAlt={prdtId}
+          imageSource={imgUrl}
+          priceInfo={priceInfo}
+          productName={prdtNm}
+        />
+      );
+    },
+    [itemListDatas]
+  );
+
+  return (
+    <>
+      <div>
+        <Container className={css.container}>
+          {itemListDatas && itemListDatas.length > 0 && (
+            <VirtualGridList
+              className={css.grid}
+              dataSize={itemListDatas.length}
+              direction="vertical"
+              verticalScrollbar="hidden"
+              itemRenderer={renderItem}
+              itemSize={{
+                minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
+                minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
+              }}
+              noScrollByWheel
+              scrollMode="translate"
+              spacing={scaleW(LIST_ITEM_CONF.SPACING)}
+            />
+          )}
+          {itemListDatas && itemListDatas.length === 0 && (
+            <NoResultsCategoryItems />
+          )}
+        </Container>
+      </div>
+    </>
+  );
 }

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.module.less

@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  .size(@w: 100%, @h: auto);
+  margin-top: 34px;
+
+  .grid {
+    overflow: unset;
+
+    > div {
+      overflow: unset !important;
+    }
+  }
+}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { useSelector } from "react-redux";
+
+import NoResultsImage from "../../../../../assets/searchpanel/img-search-nodata.png";
+import SectionTitle from "../../../../components/SectionTitle/SectionTitle";
+import TGrid from "../../../../components/TGrid/TGrid";
+import TItemCard from "../../../../components/TItemCard/TItemCard";
+import { $L } from "../../../../utils/helperMethods";
+import css from "./NoResultsCategoryItems.module.less";
+
+export default function NoResultsCategoryItems() {
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData.bestSeller
+  );
+
+  return (
+    <div className={css.container}>
+      <div className={css.info}>
+        <div className={css.imageBox}>
+          <img src={NoResultsImage} alt="No Datas" />
+        </div>
+        <p>{$L("THERE ARE NO ITEMS AVAILABLE")}</p>
+      </div>
+      <div className={css.bestSellerWrap}>
+        <SectionTitle title={$L("BEST SELLER")} />
+        <TGrid>
+          {bestSellerDatas &&
+            bestSellerDatas
+              .slice(0, 5)
+              .map((bestSeller) => (
+                <TItemCard
+                  key={bestSeller.rankOrd}
+                  imageSource={bestSeller.imgUrl}
+                  imageAlt={bestSeller.prdtNm}
+                  productName={bestSeller.prdtNm}
+                  priceInfo={bestSeller.priceInfo}
+                  rank={bestSeller.rankOrd}
+                  isBestSeller
+                />
+              ))}
+        </TGrid>
+      </div>
+    </div>
+  );
+}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.module.less

@@ -0,0 +1,35 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  margin-top: 100px;
+
+  .info {
+    text-align: center;
+
+    .imageBox {
+      .size(@w: 360px, @h: 180px);
+      margin: 0 auto;
+      background-size: cover;
+
+      > img {
+        object-fit: cover;
+        .size(@w: 100%, @h: 100%);
+      }
+    }
+
+    > p {
+      .font (@fontFamily: @baseFontBold, @fontSize: 36px);
+      color: #a3a3a3;
+      margin-top: 6px;
+    }
+  }
+
+  .bestSellerWrap {
+    padding: 60px 60px 78px 0;
+
+    > h2 {
+      margin: 134px 0 34px;
+    }
+  }
+}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShow.module.less

@@ -0,0 +1,26 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  margin-top: 100px;
+
+  .info {
+    text-align: center;
+
+    .imageBox {
+      .size(@w: 360px, @h: 180px);
+      margin: 0 auto;
+      background-size: cover;
+
+      > img {
+        object-fit: cover;
+        .size(@w: 100%, @h: 100%);
+      }
+    }
+  }
+
+  .popularShowWrap {
+    margin-left: -60px;
+    padding-bottom: 60px;
+  }
+}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import NoResultsImage from "../../../../../assets/searchpanel/img-search-nodata.png";
+import { $L } from "../../../../utils/helperMethods";
+import PopularShow from "../../../HomePanel/PopularShow/PopularShow";
+import css from "./NoResultsCategoryShow.module.less";
+
+export default function NoResultsCategoryShows() {
+  return (
+    <div className={css.container}>
+      <div className={css.info}>
+        <div className={css.imageBox}>
+          <img src={NoResultsImage} alt="No Datas" />
+        </div>
+        <p>{$L("THERE ARE NO SHOWS AVAILABLE")}</p>
+      </div>
+      <div className={css.popularShowWrap}>
+        <PopularShow />
+      </div>
+    </div>
+  );
+}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 
 import Spottable from "@enact/spotlight/Spottable";
 
+import NoResultsCategoryShows from "../NoResultsCategory/NoResultsCategoryShows";
 import css from "./ShowContents.module.less";
 import ShowLists from "./ShowLists/ShowLists";
 import ShowProductContents from "./ShowProductContents/ShowProductContents";
@@ -15,8 +16,6 @@ export default function ShowContents() {
   const { categoryShowInfos, partnerInfos, topShowInfo } =
     showContentDatas || {};
 
-  console.log("showContentDatas", showContentDatas);
-
   return (
     <>
       {showContentDatas &&
@@ -36,6 +35,9 @@ export default function ShowContents() {
             </div>
           </>
         )}
+      {categoryShowInfos && categoryShowInfos.length === 0 && (
+        <NoResultsCategoryShows />
+      )}
     </>
   );
 }

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx

@@ -4,7 +4,6 @@ import { useSelector } from "react-redux";
 
 import { VirtualGridList } from "@enact/sandstone/VirtualList";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
 
 import { scaleH, scaleW } from "../../../../../utils/helperMethods";
 import css from "./ShowLists.module.less";
@@ -28,7 +27,7 @@ export default function ShowLists() {
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
-      const ItemInfo = showListDatas[index];
+      const itemInfo = showListDatas[index];
       const {
         catNm,
         dfltThumbnailImgPath,
@@ -41,7 +40,7 @@ export default function ShowLists() {
         thumbnailUrl,
         total,
         vtctpYn,
-      } = ItemInfo;
+      } = itemInfo;
 
       return (
         <ShowListsItem
@@ -55,8 +54,6 @@ export default function ShowLists() {
     [showListDatas]
   );
 
-  console.log("showListDatas", showListDatas);
-
   return (
     <Container className={css.container}>
       {showListDatas && showListDatas.length > 0 && (

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

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { getSubCategory } from "../../actions/mainActions";
 import SectionTitle from "../../components/SectionTitle/SectionTitle";
@@ -16,6 +17,11 @@ import ItemContents from "./CategoryContents/ItemContents/ItemContents";
 import ShowContents from "./CategoryContents/ShowContents/ShowContents";
 import css from "./CategoryPanel.module.less";
 
+const TabContainer = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
 const getButtonTabList = () => {
   return [$L("SHOW"), $L("ITEM")];
 };
@@ -67,12 +73,6 @@ export default function CategoryPanel() {
     }
   }, [categoryDatas, tab]);
 
-  useEffect(() => {
-    const tabType = tab === 0 ? "CAT00101" : "CAT00102";
-
-    dispatch(getSubCategory({ lgCatCd, tabType }));
-  }, [tab, dispatch]);
-
   const handleItemClick = useCallback(
     ({ index }) => {
       if (index === tab) return;
@@ -88,16 +88,10 @@ export default function CategoryPanel() {
 
   useEffect(() => {
     const filterType = dropDownTab === 0 ? "CAT00202" : "CAT00201";
+    const tabType = tab === 0 ? "CAT00101" : "CAT00102";
 
-    dispatch(getSubCategory({ lgCatCd, filterType }));
+    dispatch(getSubCategory({ lgCatCd, tabType, filterType }));
-  }, [dropDownTab, dispatch]);
+  }, [dropDownTab, dispatch, tab]);
-
-  console.log(
-    "panelInfos",
-    panelInfos.panelInfo,
-    "categoryDatas",
-    categoryDatas
-  );
 
   useEffect(() => {
     Spotlight.focus(`tab-${tab}`);
@@ -124,7 +118,7 @@ export default function CategoryPanel() {
             />
           )}
           {buttonTabList && buttonTabList.length > 0 && (
-            <div className={css.tabContainer}>
+            <TabContainer className={css.tabContainer}>
               <TButtonTab
                 contents={buttonTabList}
                 onItemClick={handleItemClick}
@@ -139,7 +133,7 @@ export default function CategoryPanel() {
               >
                 {filterMethods}
               </TDropDown>
-            </div>
+            </TabContainer>
           )}
           {tab === 0 && <ShowContents />}
           {tab === 1 && <ItemContents />}