[OnSalePanel] TVitrualGridList 변경 반영

Detail Notes :

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

@@ -1,17 +1,9 @@
 import React, { useCallback } from "react";
 
-import { VirtualGridList } from "@enact/sandstone/VirtualList";
-
-import { scaleH, scaleW } from "../../../utils/helperMethods";
+import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
 import CategoryNavItem from "../CategoryNav/CategoryNavItem/CategoryNavItem";
 import css from "./CategoryNav.module.less";
 
-const LIST_ITEM_CONF = {
-  ITEM_WIDTH: 210,
-  ITEM_HEIGHT: 236,
-  SAPCING: 30,
-};
-
 export default function CategoryNav({
   categoryInfos,
   scrollTop,
@@ -37,19 +29,14 @@ export default function CategoryNav({
   return (
     <nav className={css.container}>
       {categoryInfos && (
-        <VirtualGridList
-          className={css.virtualGridList}
+        <TVirtualGridList
+          className={css.tVirtualGridList}
           dataSize={categoryInfos.length}
           direction="horizontal"
-          horizontalScrollbar="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.SAPCING)}
+          itemHeight={236}
+          itemWidth={210}
+          spacing={30}
+          renderItem={renderItem}
         />
       )}
     </nav>

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

@@ -8,19 +8,13 @@ import { panel_names } from "../../../../utils/Config";
 import css from "./OnSaleProductItem.module.less";
 
 export default memo(function OnSaleProductItem({
-  imgUrl,
-  patnrId,
-  prdtId,
-  prdtNm,
-  priceInfo,
+  index,
+  saleProductInfos,
   ...rest
 }) {
-  delete rest.lgCatCd;
-  delete rest.lgCatNm;
-  delete rest.offerInfo;
-  delete rest.patncNm;
-
   const dispatch = useDispatch();
+  const { imgUrl, patnrId, prdtNm, prdtId, priceInfo } =
+    saleProductInfos[index];
 
   const handleClick = useCallback(() => {
     dispatch(
@@ -29,7 +23,7 @@ export default memo(function OnSaleProductItem({
         panelInfo: { patnrId, prdtId },
       })
     );
-  }, [dispatch, patnrId, prdtId]);
+  }, [dispatch, saleProductInfos]);
 
   return (
     <div className={css.container}>

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import {
   getContainerId,
@@ -40,22 +40,34 @@ export default function OnSaleProductList({
     }
   }, [isTopButtonClicked]);
 
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      return (
+        <OnSaleProductItem
+          index={index}
+          saleProductInfos={saleProductInfos}
+          {...rest}
+        />
+      );
+    },
+    [saleProductInfos]
+  );
+
   return (
     <div className={css.container} id={"container-" + expsOrd}>
       {saleNm && saleProductInfos && (
         <>
           <SectionTitle title={saleNm} />
-          {/* <TVirtualGridList
+          <TVirtualGridList
             cbScrollTo={getScrollTo}
             className={css.tVirtualGridList}
             dataSize={saleProductInfos.length}
             direction="horizontal"
-            items={saleProductInfos}
-            itemCard={OnSaleProductItem}
             itemHeight={570}
             itemWidth={324}
             spacing={18}
-          /> */}
+            renderItem={renderItem}
+          />
         </>
       )}
     </div>