[useScrollToTop] useScrollReset으로 이름 변경, Homepanel PopularShow 스크롤 초기화 적용

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

@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import useScrollToTop from "../../hooks/useScrollToTop";
+import useScrollReset from "../../hooks/useScrollReset";
 import css from "./TButtonTab.module.less";
 import TButtonTabItem from "./TButtonTabItem";
 
@@ -34,7 +34,7 @@ export default function TButtonTab({
   scrollTop,
   ...rest
 }) {
-  const { handleScrollTop, handleStopScrolling } = useScrollToTop(scrollTop);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
 
   const onClick = useCallback(
     (index) => (e) => {
@@ -69,7 +69,7 @@ export default function TButtonTab({
             selectedTabIndex={selectedIndex}
             noMarquee={noMarquee}
             listType={listType}
-            onFocus={handleScrollTop}
+            onFocus={handleScrollReset}
             onBlur={handleStopScrolling}
           >
             {item}

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

@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 import DropDown from "@enact/sandstone/Dropdown";
 
-import useScrollToTop from "../../hooks/useScrollToTop";
+import useScrollReset from "../../hooks/useScrollReset";
 import css from "./TDropDown.module.less";
 
 export default function TDropDown({
@@ -17,14 +17,14 @@ export default function TDropDown({
   scrollTop,
   ...rest
 }) {
-  const { handleScrollTop, handleStopScrolling } = useScrollToTop(scrollTop);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
 
   return (
     <DropDown
       className={classNames(css.tDropdown, css[size], css[color], className)}
       direction={direction}
       selected={selectedIndex}
-      onFocus={handleScrollTop}
+      onFocus={handleScrollReset}
       onBlur={handleStopScrolling}
       {...rest}
     >

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

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { InputField } from "@enact/sandstone/Input";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 
-import useScrollToTop from "../../hooks/useScrollToTop";
+import useScrollReset from "../../hooks/useScrollReset";
 import TIconButton from "../TIconButton/TIconButton";
 import css from "./TInput.module.less";
 
@@ -28,7 +28,7 @@ export default function TInput({
   onIconClick,
   ...rest
 }) {
-  const { handleScrollTop, handleStopScrolling } = useScrollToTop(scrollTop);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
 
   return (
     <Container
@@ -39,7 +39,7 @@ export default function TInput({
         spotlightDisabled={spotlightDisabled}
         className={classNames(css.input)}
         autoFocus
-        onFocus={handleScrollTop}
+        onFocus={handleScrollReset}
         onBlur={handleStopScrolling}
       />
       {kind === "withIcon" && (

com.twin.app.shoptime/src/hooks/useScrollReset.js

@@ -2,16 +2,16 @@ import { useCallback, useEffect, useRef } from "react";
 
 import { Job } from "@enact/core/util";
 
-export default function useScrollToTop(scrollTo) {
+export default function useScrollReset(scrollTo, animate) {
   const jobRef = useRef(
     new Job((func) => {
       func();
     }, 0)
   );
 
-  const handleScrollTop = useCallback(() => {
+  const handleScrollReset = useCallback(() => {
     if (scrollTo) {
-      jobRef.current.start(() => scrollTo());
+      jobRef.current.start(() => scrollTo({ animate: animate }));
     }
   }, [scrollTo]);
 
@@ -25,5 +25,5 @@ export default function useScrollToTop(scrollTo) {
     };
   }, []);
 
-  return { handleScrollTop, handleStopScrolling };
+  return { handleScrollReset, handleStopScrolling };
 }

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

@@ -1,7 +1,6 @@
 import React from "react";
 
-import classNames from "classnames";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
@@ -9,6 +8,8 @@ import Spottable from "@enact/spotlight/Spottable";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard, { TYPES } 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 "../PopularShow/PopularShow.module.less";
 
@@ -19,12 +20,22 @@ const Container = SpotlightContainerDecorator(
 );
 
 const PopularShow = ({ ...rest }) => {
-  const dispatch = useDispatch();
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+
+  const { getScrollTo, scrollLeft } = useScrollTo();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    true
+  );
+
   return (
     <Container className={css.popularShow}>
       <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
-      <TScroller className={css.showList} direction="horizontal">
+      <TScroller
+        className={css.showList}
+        direction="horizontal"
+        cbScrollTo={getScrollTo}
+      >
         {topInfos &&
           topInfos.map((item, index) => (
             <TItemCard
@@ -38,6 +49,8 @@ const PopularShow = ({ ...rest }) => {
               productName={item.showNm}
               nonPosition={true}
               type={TYPES.videoShow}
+              onFocus={index === 0 ? handleScrollReset : null}
+              onBlur={handleStopScrolling}
             />
           ))}
 

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

@@ -7,6 +7,7 @@
   }
   .showList {
     overflow: unset;
+
     > div {
       padding: 20px 60px 30px 60px;
       display: flex;