[TrendingNow] Home > BestSeller / PopularShow 더보기 버튼으로 진입시 포커스 이슈 처리

This commit is contained in:
jiwon93.son
2024-06-19 15:46:11 +09:00
parent bd945b37c5
commit c55b270857
3 changed files with 34 additions and 19 deletions

View File

@@ -63,6 +63,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
name: panel_names.TRENDING_NOW_PANEL,
panelInfo: {
pageName: "BS",
focusedContainerId: "trandingnow_bestseller",
},
})
);
@@ -89,12 +90,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
return;
}
},
[
cursorVisible,
_handleItemFocus,
handleScrollReset,
scrollTopBody
]
[cursorVisible, _handleItemFocus, handleScrollReset, scrollTopBody]
);
const handleScrollRight = (e) => {
@@ -113,7 +109,12 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
}, [handleItemFocus]);
return (
<Container className={css.bestSellerWrap} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
<Container
className={css.bestSellerWrap}
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point={true}
>
<SectionTitle
title={$L("BEST SELLER")}
data-title-index="homeBestSellerTitle"

View File

@@ -74,6 +74,10 @@ const PopularShow = ({
pushPanel(
{
name: panel_names.TRENDING_NOW_PANEL,
panelInfo: {
pageName: "PS",
focusedContainerId: "trandingnow_popularcontainer",
},
},
[dispatch]
)
@@ -101,12 +105,7 @@ const PopularShow = ({
return;
}
},
[
cursorVisible,
_handleItemFocus,
handleScrollReset,
scrollTopBody
]
[cursorVisible, _handleItemFocus, handleScrollReset, scrollTopBody]
);
const handleScrollRight = (e) => {
@@ -125,7 +124,12 @@ const PopularShow = ({
}, [handleItemFocus]);
return (
<Container className={css.popularShow} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
<Container
className={css.popularShow}
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point={true}
>
<SectionTitle
className={css.subTitle}
title={$L("POPULAR SHOW")}

View File

@@ -186,9 +186,11 @@ export default function TrendingNowPanel({ panelInfo, spotlightId }) {
useEffect(() => {
if (topInfos && bestSellerDatas) {
if (panelInfo?.pageName === "BS") {
Spotlight.focus(
"bs-spotlightId-" + removeDotAndColon(bestSellerDatas[0]?.prdtId)
);
if (panelInfo?.linkTpCd) {
Spotlight.focus("trandingnow_bestseller");
} else {
Spotlight.focus(panelInfo?.focusedContainerId);
}
} else {
if (!firstChk && !panelInfo.currentSpot) {
Spotlight.focus("popular_video");
@@ -196,7 +198,15 @@ export default function TrendingNowPanel({ panelInfo, spotlightId }) {
}
}
}
}, [firstChk, panelInfo, topInfos, bestSellerDatas]);
}, [
firstChk,
topInfos,
bestSellerDatas,
panelInfo?.focusedContainerId,
panelInfo.currentSpot,
panelInfo?.pageName,
panelInfo?.linkTpCd,
]);
const onItemSpotlightDown = useCallback((e) => {
e.stopPropagation();