[HomePanel] 스크롤 처음으로 돌아왔을때 시작점 변경건.

- BestSeller,SubCategory 스크롤 처리
 - SubCategory더보기 아이콘 png 변경.
 - SubCategory width,Height값제거.

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

@@ -8,6 +8,8 @@ import Spottable from "@enact/spotlight/Spottable";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
+import useScrollReset from "../../../hooks/useScrollReset";
+import useScrollTo from "../../../hooks/useScrollTo";
 import { $L } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 
@@ -21,12 +23,20 @@ const BestSeller = () => {
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
-
+  const { getScrollTo, scrollLeft } = useScrollTo();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    true
+  );
   return (
     <Container className={css.bestSellerWrap}>
       <SectionTitle title={$L(`BEST SELLER`)} />
 
-      <TScroller className={css.homeBestSeller} direction="horizontal">
+      <TScroller
+        className={css.homeBestSeller}
+        direction="horizontal"
+        cbScrollTo={getScrollTo}
+      >
         {bestSellerDatas &&
           bestSellerDatas.map((item, index) => (
             <TItemCard
@@ -37,6 +47,8 @@ const BestSeller = () => {
               productName={item.prdtNm}
               isBestSeller={true}
               rank={item.rankOrd}
+              onFocus={index === 0 ? handleScrollReset : null}
+              onBlur={handleStopScrolling}
             />
           ))}
 

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

@@ -1,23 +1,17 @@
-import React, {
+import React, { useEffect, useState } from "react";
-  useEffect,
-  useState,
-} from 'react';
 
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
-import {
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-  SpotlightContainerDecorator,
+import Spottable from "@enact/spotlight/Spottable";
-} from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
 
-import { getSubCategory } from '../../../actions/mainActions';
+import { getSubCategory } from "../../../actions/mainActions";
-import TItemCard from '../../../components/TItemCard/TItemCard';
+import TItemCard from "../../../components/TItemCard/TItemCard";
-import TScroller from '../../../components/TScroller/TScroller';
+import TScroller from "../../../components/TScroller/TScroller";
-import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
+import useScrollReset from "../../../hooks/useScrollReset";
-import css from '../../HomePanel/SubCategory/SubCategory.module.less';
+import useScrollTo from "../../../hooks/useScrollTo";
+import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
+import css from "../../HomePanel/SubCategory/SubCategory.module.less";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -38,7 +32,7 @@ const SubCategory = () => {
   );
   const [currentLgCatCd, setCurrentLgCatCd] = useState(null);
 
-  const handleCategoryNav = (lgCatCd) => {
+  const handleCategoryNav = (lgCatCd, LgCatNm) => {
     if (currentLgCatCd === lgCatCd) {
       return;
     }
@@ -49,10 +43,15 @@ const SubCategory = () => {
   useEffect(() => {
     if (categoryInfos && !currentLgCatCd) {
       const initialLgCatCd = categoryInfos[0].lgCatCd;
+
       setCurrentLgCatCd(initialLgCatCd);
     }
   }, [categoryInfos]);
-
+  const { getScrollTo, scrollLeft } = useScrollTo();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    true
+  );
   useEffect(() => {
     if (currentLgCatCd) {
       dispatch(
@@ -80,19 +79,25 @@ const SubCategory = () => {
       />
       <TScroller
         className={css.home}
-        focusableScrollbar={true}
         direction="horizontal"
+        cbScrollTo={getScrollTo}
+        onScrollWheel={false}
       >
         {categoryItemInfos &&
-          categoryItemInfos.map((item, index) => (
+          categoryItemInfos.map((item, index) => {
-            <TItemCard
+            return (
-              key={item.prdtId}
+              <TItemCard
-              imageAlt={item.prdtId}
+                key={item.prdtId}
-              imageSource={item.imgUrl}
+                imageAlt={item.prdtId}
-              priceInfo={item.priceInfo}
+                imageSource={item.imgUrl}
-              productName={item.prdtNm}
+                priceInfo={item.priceInfo}
-            />
+                productName={item.prdtNm}
-          ))}
+                productId={item.prdtId}
+                onFocus={index === 0 ? handleScrollReset : null}
+                onBlur={handleStopScrolling}
+              />
+            );
+          })}
 
         <SpottableComponent className={css.addItem}></SpottableComponent>
       </TScroller>

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less

@@ -5,10 +5,8 @@
   background-color: @BG_COLOR_02;
   border: 1px solid #dadada;
   overflow: unset !important;
-  width: 1800px;
-  height: 478px;
   > div {
-    padding: 19px 60px 19px 60px;
+    padding: 19px 60px;
     display: flex;
     flex-direction: row;
     overflow-x: auto;
@@ -17,13 +15,16 @@
     > div {
       flex: 1 1 auto;
       margin-right: 18px;
+      &:last-child {
+        margin-right: 0;
+      }
       &.addItem {
         flex: none;
         .size(@w: 198px, @h: 438px);
         background-color: @COLOR_WHITE;
         .border-solid(@size:1px, @color:#e4e4e4);
         border-radius: 12px;
-        background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
+        background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png");
         background-size: 66px 66px;
         background-position: center center;
         background-repeat: no-repeat;
@@ -32,7 +33,7 @@
           border: 4px solid @PRIMARY_COLOR_RED;
           box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
           border-radius: 12px;
-          background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
+          background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
         }
       }
     }