optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- BestSeller,SubCategory 스크롤 처리
 - SubCategory더보기 아이콘 png 변경.
 - SubCategory width,Height값제거.
This commit is contained in:
junghoon86.park
2024-02-21 15:59:36 +09:00
parent 1904b305c7
commit 650f7614c1
3 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -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}
/>
))}

49
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -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 = () => {
/>
<TScroller
className={css.home}
focusableScrollbar={true}
direction="horizontal"
cbScrollTo={getScrollTo}
onScrollWheel={false}
>
{categoryItemInfos &&
categoryItemInfos.map((item, index) => (
categoryItemInfos.map((item, index) => {
return (
<TItemCard
key={item.prdtId}
imageAlt={item.prdtId}
imageSource={item.imgUrl}
priceInfo={item.priceInfo}
productName={item.prdtNm}
productId={item.prdtId}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
/>
))}
);
})}
<SpottableComponent className={css.addItem}></SpottableComponent>
</TScroller>

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

@@ -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");
}
}
}