[HomePanel] 홈패널 more Btn관련작업

- moreBtn관련 작업

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

@@ -1,26 +1,16 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React from 'react';
 
 import { useSelector } from 'react-redux';
 
-import VirtualGridList from '@enact/sandstone/VirtualList';
 import {
   SpotlightContainerDecorator,
 } from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
 import SectionTitle from '../../../components/SectionTitle/SectionTitle';
-import TGrid from '../../../components/TGrid/TGrid';
 import TItemCard from '../../../components/TItemCard/TItemCard';
-import {
-  $L,
-  scaleH,
-  scaleW,
-} from '../../../utils/helperMethods';
+import TScroller from '../../../components/TScroller/TScroller';
+import { $L } from '../../../utils/helperMethods';
 import css from './BestSeller.module.less';
 
 const SpottableComponent = Spottable("div");
@@ -33,57 +23,29 @@ const BestSeller = () => {
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      const itemData = bestSellerDatas[index];
-      if (index !== bestSellerDatas.length) {
-        return (
-          <TItemCard
-            key={itemData.rankOrd}
-            imageSource={itemData.imgUrl}
-            imageAlt={itemData.prdtNm}
-            productName={itemData.prdtNm}
-            priceInfo={itemData.priceInfo}
-            rank={itemData.rankOrd}
-            type="vertical"
-            isBestSeller
-            {...rest}
-          />
-        );
-      } else {
-        return (
-          <SpottableComponent
-            className={css.addItem}
-            {...rest}
-          ></SpottableComponent>
-        );
-      }
-    },
-    [bestSellerDatas]
-  );
 
   return (
     <Container className={css.bestSellerWrap}>
       <SectionTitle title={$L(`BEST SELLER`)} />
 
-      <TGrid type="homeBestSeller">
-        {bestSellerDatas && bestSellerDatas.length > 0 && (
-          <VirtualGridList
-            dataSize={bestSellerDatas.length + 1}
-            direction="horizontal"
-            horizontalScrollbar="hidden"
-            itemRenderer={renderItem}
-            itemSize={{
-              minWidth: scaleW(324),
-              minHeight: scaleH(438),
-            }}
-            noScrollByWheel
-            scrollMode="translate"
-            spacing={scaleW(24)}
-            className={css.grid}
-          />
-        )}
-      </TGrid>
+      <TScroller
+        className={css.homeBestSeller}
+        focusableScrollbar={true}
+        direction="horizontal"
+      >
+        {bestSellerDatas &&
+          bestSellerDatas.map((item, index) => (
+            <TItemCard
+              key={item.prdtId}
+              imageAlt={item.prdtId}
+              imageSource={item.imgUrl}
+              priceInfo={item.priceInfo}
+              productName={item.prdtNm}
+            />
+          ))}
+
+        <SpottableComponent className={css.addItem}></SpottableComponent>
+      </TScroller>
     </Container>
   );
 };