From a5ed47ea2451b1a51623b698fef14c3856e271ef Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Tue, 7 May 2024 14:28:53 +0900 Subject: [PATCH] =?UTF-8?q?[=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC]=20=EA=B4=80=EB=A0=A8=20=EC=88=98=EC=A0=95=EA=B1=B4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HomePanel/BestSeller/BestSeller.jsx | 21 +++++++++++++++ .../HomePanel/PopularShow/PopularShow.jsx | 23 +++++++++++++++- .../HomePanel/SubCategory/SubCategory.jsx | 27 ++++++++++++++++++- 3 files changed, 69 insertions(+), 2 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index d42b7873..34e4768d 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -91,7 +91,27 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => { ); const orderStyle = useMemo(() => ({ order: order }), [order]); + const handleScrollRight = (e) => { + const container = e.currentTarget?.parentNode; + let gap = 18; + let itemWidth = 324; + let moreItemWidth = 198; + let containerBoxWidth = 1740; + + // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap)); + // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return + let itemLength = bestSellerDatas?.length; + + const x = + (itemWidth + gap) * itemLength + + (moreItemWidth + gap) - + containerBoxWidth; + + setTimeout(() => { + scrollLeft({ x, animate: true }); + }); + }; return ( { )} 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 a87b6598..91877e7d 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -6,6 +6,7 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer import Spottable from "@enact/spotlight/Spottable"; import { pushPanel } from "../../../actions/panelActions"; +import { startVideoPlayer } from "../../../actions/playActions"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import TItemCard, { IMAGETYPES, @@ -18,7 +19,6 @@ import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; import { panel_names } from "../../../utils/Config"; import { $L } from "../../../utils/helperMethods"; import css from "../PopularShow/PopularShow.module.less"; -import { startVideoPlayer } from "../../../actions/playActions"; const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( @@ -91,6 +91,26 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => { [cursorVisible] ); const orderStyle = useMemo(() => ({ order: order }), [order]); + const handleScrollRight = (e) => { + const container = e.currentTarget?.parentNode; + let gap = 18; + let itemWidth = 546; + let moreItemWidth = 198; + let containerBoxWidth = 1740; + + // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap)); + // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return + let itemLength = topInfos?.length; + + const x = + (itemWidth + gap) * itemLength + + (moreItemWidth + gap) - + containerBoxWidth; + + setTimeout(() => { + scrollLeft({ x, animate: true }); + }); + }; return ( { )} diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 9aca63f9..f77297f5 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -51,10 +51,12 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => { const [currentLgCatNm, setCurrentLgCatNm] = useState(null); const [targetId, setTargetId] = useState(null); - const timerRef = useRef(); const [drawChk, setDrawChk] = useState(false); const [firstChk, SetFirstChk] = useState(false); + const timerRef = useRef(); + const scrollRef = useRef(); + const { scrollTopByDistance } = useScrollTopByDistance(); const { cursorVisible } = useSelector((state) => state.common.appStatus); const handleCategoryNav = (lgCatCd, LgCatNm) => { @@ -172,6 +174,27 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => { const orderStyle = useMemo(() => ({ order: order }), [order]); + const handleScrollRight = (e) => { + const container = e.currentTarget?.parentNode; + let gap = 18; + let itemWidth = 324; + let moreItemWidth = 198; + let containerBoxWidth = 1740; + + // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap)); + // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return + let itemLength = categoryItemInfos?.length; + + const x = + (itemWidth + gap) * itemLength + + (moreItemWidth + gap) - + containerBoxWidth; + + setTimeout(() => { + scrollLeft({ x, animate: true }); + }); + }; + return ( @@ -190,6 +213,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => { direction="horizontal" cbScrollTo={getScrollTo} noScrollByWheel + ref={scrollRef} > {categoryItemInfos && categoryItemInfos.map( @@ -229,6 +253,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => { onClick={handleMoreCardClick} spotlightId={"home-cate-more-btn"} data-catcd-num={currentLgCatCd} + onFocus={handleScrollRight} > )}