From 650f7614c1dd3f08195a38c9a54cb72ad68050d5 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 21 Feb 2024 15:59:36 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=B2=98=EC=9D=8C=EC=9C=BC=EB=A1=9C=20=EB=8F=8C=EC=95=84?= =?UTF-8?q?=EC=99=94=EC=9D=84=EB=95=8C=20=EC=8B=9C=EC=9E=91=EC=A0=90=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EA=B1=B4.=20=20-=20BestSeller,SubCategory=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B2=98=EB=A6=AC=20=20-=20SubCa?= =?UTF-8?q?tegory=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98?= =?UTF-8?q?=20png=20=EB=B3=80=EA=B2=BD.=20=20-=20SubCategory=20width,Heigh?= =?UTF-8?q?t=EA=B0=92=EC=A0=9C=EA=B1=B0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HomePanel/BestSeller/BestSeller.jsx | 16 ++++- .../HomePanel/SubCategory/SubCategory.jsx | 63 ++++++++++--------- .../SubCategory/SubCategory.module.less | 11 ++-- 3 files changed, 54 insertions(+), 36 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 54fc188a..e12bd9bb 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/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 ( - + {bestSellerDatas && bestSellerDatas.map((item, index) => ( { productName={item.prdtNm} isBestSeller={true} rank={item.rankOrd} + onFocus={index === 0 ? handleScrollReset : null} + onBlur={handleStopScrolling} /> ))} 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 a8c41c11..18e3ccec 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -1,23 +1,17 @@ -import React, { - useEffect, - useState, -} from 'react'; +import React, { useEffect, useState } from "react"; -import { - useDispatch, - useSelector, -} from 'react-redux'; +import { useDispatch, useSelector } from "react-redux"; -import { - SpotlightContainerDecorator, -} from '@enact/spotlight/SpotlightContainerDecorator'; -import Spottable from '@enact/spotlight/Spottable'; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; -import { getSubCategory } from '../../../actions/mainActions'; -import TItemCard from '../../../components/TItemCard/TItemCard'; -import TScroller from '../../../components/TScroller/TScroller'; -import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav'; -import css from '../../HomePanel/SubCategory/SubCategory.module.less'; +import { getSubCategory } from "../../../actions/mainActions"; +import TItemCard from "../../../components/TItemCard/TItemCard"; +import TScroller from "../../../components/TScroller/TScroller"; +import useScrollReset from "../../../hooks/useScrollReset"; +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 = () => { /> {categoryItemInfos && - categoryItemInfos.map((item, index) => ( - - ))} + categoryItemInfos.map((item, index) => { + return ( + + ); + })} diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less index 5950ca6d..2e76bf05 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less +++ b/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"); } } }