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

[HomePanel] 더보기 버튼 포커싱 관련 처리건

Browse Source 
- 정보들어올때 그려주는식으로 변경.
This commit is contained in:
junghoon86.park
2024-02-22 19:11:41 +09:00
parent 95ca999351
commit 9ab8a812d4
3 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
@@ -23,11 +23,15 @@ const BestSeller = () => {
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData.bestSeller
);
const [drawChk, setDrawChk] = useState(false);
const { getScrollTo, scrollLeft } = useScrollTo();
const { handleScrollReset, handleStopScrolling } = useScrollReset(
scrollLeft,
true
);
useEffect(() => {
setDrawChk(true);
}, [bestSellerDatas]);
return (
<Container className={css.bestSellerWrap}>
<SectionTitle title={$L(`BEST SELLER`)} />
@@ -53,7 +57,9 @@ const BestSeller = () => {
/>
))}
<SpottableComponent className={css.addItem}></SpottableComponent>
{drawChk && (
<SpottableComponent className={css.addItem}></SpottableComponent>
)}
</TScroller>
</Container>
);

46
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
@@ -21,13 +21,15 @@ const Container = SpotlightContainerDecorator(
const PopularShow = ({ ...rest }) => {
const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
const [drawChk, setDrawChk] = useState(false);
const { getScrollTo, scrollLeft } = useScrollTo();
const { handleScrollReset, handleStopScrolling } = useScrollReset(
scrollLeft,
true
);
useEffect(() => {
setDrawChk(true);
}, [topInfos]);
return (
<Container className={css.popularShow}>
<SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
@@ -38,24 +40,28 @@ const PopularShow = ({ ...rest }) => {
noScrollByWheel
>
{topInfos &&
topInfos.map((item, index) => (
<TItemCard
key={item.showId}
imageSource={
item.thumbnailUrl !== item.thumbnailUrl960
? item.thumbnailUrl960
: item.thumbnailUrl
}
imageAlt={item.showNm}
productName={item.showNm}
nonPosition={true}
type={TYPES.videoShow}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
/>
))}
topInfos.map((item, index) => {
return (
<TItemCard
key={item.showId}
imageSource={
item.thumbnailUrl !== item.thumbnailUrl960
? item.thumbnailUrl960
: item.thumbnailUrl
}
imageAlt={item.showNm}
productName={item.showNm}
nonPosition={true}
type={TYPES.videoShow}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
/>
);
})}
<SpottableComponent className={css.addItem}></SpottableComponent>
{drawChk && (
<SpottableComponent className={css.addItem}></SpottableComponent>
)}
</TScroller>
</Container>
);

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

@@ -31,7 +31,7 @@ const SubCategory = () => {
(state) => state.main.subCategoryData.categoryItemInfos
);
const [currentLgCatCd, setCurrentLgCatCd] = useState(null);
const [drawChk, setDrawChk] = useState(false);
const handleCategoryNav = (lgCatCd, LgCatNm) => {
if (currentLgCatCd === lgCatCd) {
return;
@@ -66,6 +66,7 @@ const SubCategory = () => {
false
)
);
setDrawChk(true);
}
}, [currentLgCatCd, dispatch]);
@@ -81,7 +82,6 @@ const SubCategory = () => {
className={css.home}
direction="horizontal"
cbScrollTo={getScrollTo}
noScrollByWheel
>
{categoryItemInfos &&
categoryItemInfos.map((item, index) => {
@@ -99,7 +99,9 @@ const SubCategory = () => {
);
})}
<SpottableComponent className={css.addItem}></SpottableComponent>
{drawChk && (
<SpottableComponent className={css.addItem}></SpottableComponent>
)}
</TScroller>
</Container>
);