From 31493cec009b842539746ee459d49c847bf077bb Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Wed, 21 Feb 2024 14:00:25 +0900 Subject: [PATCH] =?UTF-8?q?[useScrollToTop]=20useScrollReset=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD,=20Homepane?= =?UTF-8?q?l=20PopularShow=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TButtonTab/TButtonTab.jsx | 6 +++--- .../src/components/TDropDown/TDropDown.jsx | 6 +++--- .../src/components/TInput/TInput.jsx | 6 +++--- .../{useScrollToTop.js => useScrollReset.js} | 8 +++---- .../HomePanel/PopularShow/PopularShow.jsx | 21 +++++++++++++++---- .../PopularShow/PopularShow.module.less | 1 + 6 files changed, 31 insertions(+), 17 deletions(-) rename com.twin.app.shoptime/src/hooks/{useScrollToTop.js => useScrollReset.js} (63%) diff --git a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx index fa1dde25..0e8ad0ed 100644 --- a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx +++ b/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} diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx index 4225ee32..33e3ac01 100644 --- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx +++ b/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 ( diff --git a/com.twin.app.shoptime/src/components/TInput/TInput.jsx b/com.twin.app.shoptime/src/components/TInput/TInput.jsx index 93254e87..790a1272 100644 --- a/com.twin.app.shoptime/src/components/TInput/TInput.jsx +++ b/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 ( {kind === "withIcon" && ( diff --git a/com.twin.app.shoptime/src/hooks/useScrollToTop.js b/com.twin.app.shoptime/src/hooks/useScrollReset.js similarity index 63% rename from com.twin.app.shoptime/src/hooks/useScrollToTop.js rename to com.twin.app.shoptime/src/hooks/useScrollReset.js index b7a06259..02306bfc 100644 --- a/com.twin.app.shoptime/src/hooks/useScrollToTop.js +++ b/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 }; } diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 2b4b364f..1eaceb83 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/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 ( - + {topInfos && topInfos.map((item, index) => ( { productName={item.showNm} nonPosition={true} type={TYPES.videoShow} + onFocus={index === 0 ? handleScrollReset : null} + onBlur={handleStopScrolling} /> ))} diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less index 369438b6..fa3d3494 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less +++ b/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;