[OnSalePanel] OnSalePanel, 구조 변경 및 에러 수정

Detail Notes :

1. OnSalePanel, OnSaleProductsGrid 삭제
2. OnSalePrductList, OnSaleProductItem 추가 (Scroller → VirtualGridList 변경)
3. deeplink로 진입시 데이터가 없어 화면이 출력되지 않는 문제 수정

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

@@ -4,13 +4,12 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { getOnSaleInfo } from "../../actions/onSaleActions";
 import TBody from "../../components/TBody/TBody";
-import TItemCard from "../../components/TItemCard/TItemCard";
 import TopButton from "../../components/TopButton/TopButton";
 import TPanel from "../../components/TPanel/TPanel";
 import { SpotlightIds } from "../../utils/SpotlightIds";
 import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav";
-import OnSaleProductsGrid from "../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid";
 import css from "./OnSalePanel.module.less";
+import OnSaleProductList from "./OnSaleProductList/OnSaleProductList";
 
 export default function OnSalePanel() {
   const dispatch = useDispatch();
@@ -46,6 +45,8 @@ export default function OnSalePanel() {
       dispatch(
         getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentCategoryCode })
       );
+    } else {
+      dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" }));
     }
   }, [currentCategoryCode, dispatch]);
 
@@ -65,26 +66,13 @@ export default function OnSalePanel() {
       />
       <TBody className={css.tBody}>
         {saleInfos &&
-          saleInfos.map(({ saleNm, saleProductInfos }) => {
+          saleInfos.map(({ saleNm, saleProductInfos }) => (
-            return (
+            <OnSaleProductList
-              <OnSaleProductsGrid key={saleNm} sectionTitle={saleNm}>
+              key={saleNm}
-                {saleProductInfos.map(
+              saleNm={saleNm}
-                  ({ imgUrl, prdtId, prdtNm, priceInfo }) => {
+              saleProductInfos={saleProductInfos}
-                    return (
-                      <TItemCard
-                        key={prdtId}
-                        imageAlt={prdtNm}
-                        imageSource={imgUrl}
-                        priceInfo={priceInfo}
-                        productId={prdtId}
-                        productName={prdtNm}
             />
-                    );
+          ))}
-                  }
-                )}
-              </OnSaleProductsGrid>
-            );
-          })}
 
         <TopButton targetId={SpotlightIds.TITEM_CARD + targetId} />
       </TBody>

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductItem/OnSaleProductItem.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import TItemCard from "../../../components/TItemCard/TItemCard";
+import css from "./OnSaleProductItem.module.less";
+
+export default function OnSaleProductItem({
+  imgUrl,
+  prdtId,
+  prdtNm,
+  priceInfo,
+  ...rest
+}) {
+  return (
+    <TItemCard
+      imageAlt={prdtNm}
+      imageSource={imgUrl}
+      onCardClick={() => {}}
+      priceInfo={priceInfo}
+      productId={prdtId}
+      productName={prdtNm}
+      {...rest}
+    />
+  );
+}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductItem/package.json

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

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+import ri from "@enact/ui/resolution";
+
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import TItemCard from "../../../components/TItemCard/TItemCard";
+import OnSaleProductItem from "../OnSaleProductItem/OnSaleProductItem";
+import css from "./OnSaleProductList.module.less";
+
+const LIST_ITEM_CONF = {
+  ITEM_WIDTH: 324 * 2,
+  ITEM_HEIGHT: 570 * 2,
+  SAPCING: 18 * 2,
+};
+
+const Container = SpotlightContainerDecorator(
+  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
+  "div"
+);
+
+export default function OnSaleProductList({
+  saleNm,
+  saleProductInfos,
+  ...rest
+}) {
+  const renderItem = ({ index, ...rest }) => {
+    const saleProductInfo = saleProductInfos[index];
+
+    return (
+      <>
+        {<div className={css.empty} />}
+        <OnSaleProductItem saleName={saleNm} {...saleProductInfo} {...rest} />
+      </>
+    );
+  };
+
+  return (
+    <Container className={css.container} {...rest}>
+      {<SectionTitle title={saleNm} />}
+      {saleProductInfos && (
+        <VirtualGridList
+          className={css.virtualGridList}
+          dataSize={saleProductInfos.length}
+          direction="horizontal"
+          horizontalScrollbar="hidden"
+          itemRenderer={renderItem}
+          itemSize={{
+            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
+            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
+          }}
+          noScrollByWheel
+          scrollMode="translate"
+          spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
+        />
+      )}
+    </Container>
+  );
+}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.module.less

@@ -0,0 +1,24 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  position: relative;
+  .size(@w: 100%, @h: 570px);
+
+  h2 {
+    .position(@position: absolute, @top: 58px, @left: 60px);
+  }
+
+  .virtualGridList {
+    overflow: unset;
+    padding-left: 60px;
+
+    .empty {
+      height: 132px;
+    }
+
+    > div {
+      overflow: unset !important;
+    }
+  }
+}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/package.json

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

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-import Scroller from "@enact/sandstone/Scroller";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-
-import SectionTitle from "../../../components/SectionTitle/SectionTitle";
-import css from "./OnSaleProductsGrid.module.less";
-
-const Container = SpotlightContainerDecorator(
-  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
-  "div"
-);
-
-export default function OnSaleProductsGrid({ sectionTitle, children }) {
-  return (
-    <Container className={css.container}>
-      <Scroller
-        className={css.scroller}
-        direction="horizontal"
-        horizontalScrollbar="hidden"
-        noScrollByWheel={true}
-        scrollMode="translate"
-      >
-        <SectionTitle title={sectionTitle} />
-        <ul>{children}</ul>
-      </Scroller>
-    </Container>
-  );
-}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less

@@ -1,24 +0,0 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
-
-.container {
-  position: relative;
-
-  .scroller {
-    display: block;
-    padding-left: 60px;
-
-    h2 {
-      .position(@position: sticky, @left: 0);
-      margin: 58px 0 24px;
-    }
-
-    ul {
-      .flex(@justifyCenter: flex-start);
-
-      > li {
-        margin-right: 18px;
-      }
-    }
-  }
-}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/package.json

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