[OnSalePanel] props 및 구조 수정

Detail Notes :

1. OnSaleProductList, empty div OnSaleProductItem으로 이동
2. OnSaleProductItem, 불필요 props 삭제
3. OnSaleProductList, OnSaleProductItem, 최적화 및 css 수정

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

@@ -69,11 +69,10 @@ export default function OnSalePanel() {
           saleInfos.map(({ saleNm, saleProductInfos }) => (
             <OnSaleProductList
               key={saleNm}
-              saleNm={saleNm}
+              saleName={saleNm}
               saleProductInfos={saleProductInfos}
             />
           ))}
-
         <TopButton targetId={SpotlightIds.TITEM_CARD + targetId} />
       </TBody>
     </TPanel>

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

@@ -1,24 +1,31 @@
-import React from "react";
+import React, { memo } from "react";
 
 import TItemCard from "../../../components/TItemCard/TItemCard";
 import css from "./OnSaleProductItem.module.less";
 
-export default function OnSaleProductItem({
-  imgUrl,
-  prdtId,
-  prdtNm,
-  priceInfo,
+export default memo(function OnSaleProductItem({
+  index,
+  saleProductInfos,
   ...rest
 }) {
+  const {
+    imgUrl,
+    prdtId: productId,
+    prdtNm: productName,
+    priceInfo,
+  } = saleProductInfos[index];
+
   return (
+    <div className={css.container}>
+      <div />
       <TItemCard
-      imageAlt={prdtNm}
+        imageAlt={productName}
         imageSource={imgUrl}
-      onCardClick={() => {}}
         priceInfo={priceInfo}
-      productId={prdtId}
-      productName={prdtNm}
+        productId={productId}
+        productName={productName}
         {...rest}
       />
+    </div>
   );
-}
+});

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

@@ -0,0 +1,6 @@
+.container {
+  // empty block
+  > div:nth-child(1) {
+    height: 132px;
+  }
+}

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

@@ -1,12 +1,10 @@
-import React from "react";
+import React, { useCallback } 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";
 
@@ -22,24 +20,27 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function OnSaleProductList({
-  saleNm,
+  saleName,
   saleProductInfos,
   ...rest
 }) {
-  const renderItem = ({ index, ...rest }) => {
-    const saleProductInfo = saleProductInfos[index];
-
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
       return (
-      <>
-        {<div className={css.empty} />}
-        <OnSaleProductItem saleName={saleNm} {...saleProductInfo} {...rest} />
-      </>
+        <OnSaleProductItem
+          index={index}
+          saleProductInfos={saleProductInfos}
+          {...rest}
+        />
+      );
+    },
+    [saleProductInfos]
   );
-  };
 
   return (
     <Container className={css.container} {...rest}>
-      {<SectionTitle title={saleNm} />}
+      {saleName && <SectionTitle title={saleName} />}
+
       {saleProductInfos && (
         <VirtualGridList
           className={css.virtualGridList}

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

@@ -4,18 +4,15 @@
 .container {
   position: relative;
   .size(@w: 100%, @h: 570px);
+  padding-left: 60px;
 
+  // sectionTitle
   h2 {
     .position(@position: absolute, @top: 58px, @left: 60px);
   }
 
   .virtualGridList {
     overflow: unset;
-    padding-left: 60px;
-
-    .empty {
-      height: 132px;
-    }
 
     > div {
       overflow: unset !important;