[TVirtualGridList]

- TVirtualGridList 컴포넌트 변경
- tramsform.js 삭제
- renderItem을 TVirtualGridList의 props로 전달해서 사용할 수 있도록 변경

com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx

@@ -1,12 +1,10 @@
-import React, { useCallback } from "react";
+import React from "react";
 
 import classNames from "classnames";
 
 import { VirtualGridList } from "@enact/sandstone/VirtualList";
 
 import { scaleH, scaleW } from "../../utils/helperMethods";
-import TItemCard, { TYPES } from "../TItemCard/TItemCard";
-import { itemPropsTransfomers } from "./transform";
 import css from "./TVirtualGridList.module.less";
 
 export default function TVirtualGridList({
@@ -17,47 +15,15 @@ export default function TVirtualGridList({
   horizontalScrollbar = "hidden",
   noScrollByWheel = true,
   scrollMode = "translate",
-  items,
-  itemType = TYPES.vertical,
   itemWidth,
   itemHeight,
   spacing,
   logoDisplay,
-  itemCard = TItemCard,
   cbScrollTo,
   spotlightId,
-  onClick,
+  renderItem,
   ...rest
 }) {
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      const ItemComponent = itemCard;
-      const itemData = items[index];
-      const transformProps = itemPropsTransfomers["TItemCard"]
-        ? itemPropsTransfomers["TItemCard"](itemData)
-        : itemData;
-
-      const _onClick = onClick ? () => onClick(itemData) : null;
-
-      return (
-        <>
-          {itemCard === TItemCard ? (
-            <TItemCard
-              {...transformProps}
-              {...rest}
-              type={itemType}
-              onClick={_onClick}
-              logoDisplay={logoDisplay}
-            />
-          ) : (
-            <ItemComponent {...itemData} {...rest} />
-          )}
-        </>
-      );
-    },
-    [items]
-  );
-
   return (
     <VirtualGridList
       className={classNames(css.tVirtualGridList, className ? className : null)}

com.twin.app.shoptime/src/components/TVirtualGridList/transform.js

@@ -1,11 +0,0 @@
-export const itemPropsTransfomers = {
-  TItemCard: (itemData) => ({
-    imageAlt: itemData.prdtId || itemData.showId,
-    imageSource:
-      itemData.imgUrl || itemData.thumbnailUrl || itemData.prdtImgUrl,
-    priceInfo: itemData.priceInfo,
-    productName: itemData.prdtNm || itemData.showNm,
-    logo: itemData.patncLogoPath,
-    productId: itemData.prdtId || itemData.showId,
-  }),
-};

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

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { pushPanel } from "../../../../actions/panelActions";
+import TItemCard from "../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
 import NoResultsCategoryItems from "../NoResultsCategory/NoResultsCategoryItems";
@@ -34,6 +35,50 @@ export default function ItemContents() {
     );
   });
 
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const {
+        catNm,
+        cntryCd,
+        imgUrl,
+        lgCatCd,
+        offerInfo,
+        patncLogoPath,
+        patnrId,
+        prdtId,
+        prdtNm,
+        priceInfo,
+        rankOrd,
+        total,
+      } = itemListDatas[index];
+
+      const handleItemClick = () => {
+        dispatch(
+          pushPanel({
+            name: panel_names.DETAIL_PANEL,
+            panelInfo: {
+              patnrId,
+              prdtId,
+            },
+          })
+        );
+      };
+
+      return (
+        <TItemCard
+          {...rest}
+          key={prdtId}
+          imageAlt={prdtId}
+          imageSource={imgUrl}
+          priceInfo={priceInfo}
+          productName={prdtNm}
+          onClick={handleItemClick}
+        />
+      );
+    },
+    [itemListDatas]
+  );
+
   return (
     <>
       <div>
@@ -41,8 +86,8 @@ export default function ItemContents() {
           {itemListDatas && itemListDatas.length > 0 && (
             <TVirtualGridList
               spotlightId="categoryContentsBox"
-              items={itemListDatas}
               dataSize={itemListDatas.length}
+              renderItem={renderItem}
               itemWidth={324}
               itemHeight={438}
               spacing={18}

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

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import { useSelector } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import { TYPES } from "../../../../../components/TItemCard/TItemCard";
+import TItemCard, {
+  TYPES,
+} from "../../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
 import css from "./ShowLists.module.less";
 
@@ -18,13 +20,43 @@ export default function ShowLists() {
     (state) => state.main.subCategoryData?.categoryShowInfos
   );
 
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const {
+        catNm,
+        dfltThumbnailImgPath,
+        hstNm,
+        lgCatCd,
+        patncLogoPath,
+        patnrId,
+        showId,
+        showNm,
+        thumbnailUrl,
+        total,
+        vtctpYn,
+      } = showListDatas[index];
+
+      return (
+        <TItemCard
+          {...rest}
+          type={TYPES.videoShow}
+          key={showId}
+          imageAlt={showId}
+          imageSource={thumbnailUrl}
+          productName={showNm}
+        />
+      );
+    },
+    [showListDatas]
+  );
+
   return (
     <Container className={css.container}>
       {showListDatas && showListDatas.length > 0 && (
         <TVirtualGridList
           spotlightId="categoryContentsBox"
-          items={showListDatas}
           itemType={TYPES.videoShow}
+          itemRenderer={renderItem}
           dataSize={showListDatas.length}
           itemWidth={546}
           itemHeight={438}

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

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { pushPanel } from "../../../../../actions/panelActions";
+import TItemCard from "../../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../../hooks/useScrollTo";
 import { panel_names } from "../../../../../utils/Config";
@@ -29,19 +30,35 @@ export default function ShowProductContents() {
     scrollLeft();
   }, [productInfos]);
 
-  const handleItemClick = useCallback(
+  const renderItem = useCallback(
-    (itemData) => {
+    ({ index, ...rest }) => {
-      dispatch(
+      const { prdtId, prdtNm, imgUrl, priceInfo } = productInfos[index];
-        pushPanel({
+
-          name: panel_names.DETAIL_PANEL,
+      const handleItemClick = () => {
-          panelInfo: {
+        dispatch(
-            patnrId: showProductContentDatas.patnrId,
+          pushPanel({
-            prdtId: itemData.prdtId,
+            name: panel_names.DETAIL_PANEL,
-          },
+            panelInfo: {
-        })
+              patnrId: showProductContentDatas.patnrId,
+              prdtId: prdtId,
+            },
+          })
+        );
+      };
+
+      return (
+        <TItemCard
+          {...rest}
+          key={prdtId}
+          imageAlt={prdtId}
+          imageSource={imgUrl}
+          priceInfo={priceInfo}
+          productName={prdtNm}
+          onClick={handleItemClick}
+        />
       );
     },
-    [dispatch, showProductContentDatas]
+    [showProductContentDatas]
   );
 
   return (
@@ -51,13 +68,12 @@ export default function ShowProductContents() {
           cbScrollTo={getScrollTo}
           spotlightId="showProductBox"
           className={css.grid}
-          items={productInfos}
+          itemRenderer={renderItem}
           dataSize={productInfos.length}
           itemWidth={342}
           itemHeight={490}
           spacing={0}
           direction="horizontal"
-          onClick={handleItemClick}
         />
       )}
     </Container>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx

@@ -27,16 +27,17 @@ export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) {
   return (
     <div className={css.container}>
       {brandBestSellerInfo && (
-        <TVirtualGridList
+        <></>
-          className={css.tVirtualGridList}
+        // <TVirtualGridList
-          dataSize={brandBestSellerInfo.length}
+        //   className={css.tVirtualGridList}
-          direction="horizontal"
+        //   dataSize={brandBestSellerInfo.length}
-          items={brandBestSellerInfo}
+        //   direction="horizontal"
-          itemHeight={438}
+        //   items={brandBestSellerInfo}
-          itemWidth={324}
+        //   itemHeight={438}
-          onClick={handleClick}
+        //   itemWidth={324}
-          spacing={18}
+        //   onClick={handleClick}
-        />
+        //   spacing={18}
+        // />
       )}
     </div>
   );

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx

@@ -8,15 +8,16 @@ export default function LiveProductList({ brandProductInfo }) {
   return (
     <div className={css.container}>
       {brandProductInfo && (
-        <TVirtualGridList
+        <></>
-          className={css.tVirtualGridList}
+        // <TVirtualGridList
-          dataSize={brandProductInfo.length}
+        //   className={css.tVirtualGridList}
-          items={brandProductInfo}
+        //   dataSize={brandProductInfo.length}
-          itemHeight={236}
+        //   items={brandProductInfo}
-          itemType={TYPES.horizontal}
+        //   itemHeight={236}
-          itemWidth={660}
+        //   itemType={TYPES.horizontal}
-          spacing={12}
+        //   itemWidth={660}
-        />
+        //   spacing={12}
+        // />
       )}
     </div>
   );

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx

@@ -8,16 +8,17 @@ export default function UpComingList({ brandLiveChannelUpcoming }) {
   return (
     <div className={css.container}>
       {brandLiveChannelUpcoming && (
-        <TVirtualGridList
+        <></>
-          className={css.tVirtualGridList}
+        // <TVirtualGridList
-          dataSize={brandLiveChannelUpcoming.length}
+        //   className={css.tVirtualGridList}
-          direction="horizontal"
+        //   dataSize={brandLiveChannelUpcoming.length}
-          items={brandLiveChannelUpcoming}
+        //   direction="horizontal"
-          itemCard={UpComingCard}
+        //   items={brandLiveChannelUpcoming}
-          itemHeight={344}
+        //   itemCard={UpComingCard}
-          itemWidth={480}
+        //   itemHeight={344}
-          spacing={18}
+        //   itemWidth={480}
-        />
+        //   spacing={18}
+        // />
       )}
     </div>
   );

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -36,6 +36,7 @@ const BestSeller = () => {
         className={css.homeBestSeller}
         direction="horizontal"
         cbScrollTo={getScrollTo}
+        noScrollByWheel
       >
         {bestSellerDatas &&
           bestSellerDatas.map((item, index) => (

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -35,6 +35,7 @@ const PopularShow = ({ ...rest }) => {
         className={css.showList}
         direction="horizontal"
         cbScrollTo={getScrollTo}
+        noScrollByWheel
       >
         {topInfos &&
           topInfos.map((item, index) => (

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -81,6 +81,7 @@ const SubCategory = () => {
         className={css.home}
         direction="horizontal"
         cbScrollTo={getScrollTo}
+        noScrollByWheel
       >
         {categoryItemInfos &&
           categoryItemInfos.map((item, index) => {

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

@@ -45,7 +45,7 @@ export default function OnSaleProductList({
       {saleNm && saleProductInfos && (
         <>
           <SectionTitle title={saleNm} />
-          <TVirtualGridList
+          {/* <TVirtualGridList
             cbScrollTo={getScrollTo}
             className={css.tVirtualGridList}
             dataSize={saleProductInfos.length}
@@ -55,7 +55,7 @@ export default function OnSaleProductList({
             itemHeight={570}
             itemWidth={324}
             spacing={18}
-          />
+          /> */}
         </>
       )}
     </div>

com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx

@@ -27,18 +27,19 @@ export default function SearchItemResults({ itemDatas, itemCount, ...rest }) {
   return (
     <Container className={css.container}>
       {itemDatas && (
-        <TVirtualGridList
+        <></>
-          spotlightId="searchResultsItemBox"
+        // <TVirtualGridList
-          cbScrollTo={getScrollTo}
+        //   spotlightId="searchResultsItemBox"
-          className={css.grid}
+        //   cbScrollTo={getScrollTo}
-          items={itemDatas}
+        //   className={css.grid}
-          dataSize={itemDatas.length}
+        //   items={itemDatas}
-          direction="horizontal"
+        //   dataSize={itemDatas.length}
-          itemCard={SearchItemCard}
+        //   direction="horizontal"
-          itemWidth={561}
+        //   itemCard={SearchItemCard}
-          itemHeight={150}
+        //   itemWidth={561}
-          spacing={30}
+        //   itemHeight={150}
-        />
+        //   spacing={30}
+        // />
       )}
     </Container>
   );

com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx

@@ -27,18 +27,19 @@ export default function SearchShowResults({ showDatas, showCount, ...rest }) {
   return (
     <Container className={css.container}>
       {showDatas && (
-        <TVirtualGridList
+        <></>
-          spotlightId="searchResultsShowBox"
+        // <TVirtualGridList
-          className={css.grid}
+        //   spotlightId="searchResultsShowBox"
-          cbScrollTo={getScrollTo}
+        //   className={css.grid}
-          items={showDatas}
+        //   cbScrollTo={getScrollTo}
-          dataSize={showDatas.length}
+        //   items={showDatas}
-          direction="horizontal"
+        //   dataSize={showDatas.length}
-          itemCard={SearchShowCard}
+        //   direction="horizontal"
-          itemWidth={344}
+        //   itemCard={SearchShowCard}
-          itemHeight={281}
+        //   itemWidth={344}
-          spacing={0}
+        //   itemHeight={281}
-        />
+        //   spacing={0}
+        // />
       )}
     </Container>
   );

com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx

@@ -31,18 +31,19 @@ export default function SearchThemeResults({
   return (
     <Container className={css.container}>
       {themeDatas && (
-        <TVirtualGridList
+        <></>
-          spotlightId="searchResultsThemeBox"
+        // <TVirtualGridList
-          className={css.grid}
+        //   spotlightId="searchResultsThemeBox"
-          items={themeDatas}
+        //   className={css.grid}
-          cbScrollTo={getScrollTo}
+        //   items={themeDatas}
-          dataSize={themeDatas.length}
+        //   cbScrollTo={getScrollTo}
-          direction="horizontal"
+        //   dataSize={themeDatas.length}
-          itemCard={SearchThemeCard}
+        //   direction="horizontal"
-          itemWidth={560}
+        //   itemCard={SearchThemeCard}
-          itemHeight={130}
+        //   itemWidth={560}
-          spacing={30}
+        //   itemHeight={130}
-        />
+        //   spacing={30}
+        // />
       )}
     </Container>
   );