[FeaturedBrandsPanel] bug fix

Detail Notes :

1. section CATEGORY, nav 클릭시 scrollTop으로 이동하는 현상 수정
This commit is contained in:
younghoon100.park
2024-04-11 13:23:51 +09:00
parent 682158ec84
commit 46b758e78b
3 changed files with 19 additions and 52 deletions

View File

@@ -257,7 +257,7 @@ export default function FeaturedBrandsPanel() {
useEffect(() => {
if (!brandInfo) {
// console.log("%c 0 brandInfo effect", "background:blue; color:white");
console.log("%c 0 brandInfo effect", "background:blue; color:white");
dispatch(getBrandList());
}
}, [dispatch]);
@@ -265,10 +265,10 @@ export default function FeaturedBrandsPanel() {
useEffect(() => {
if (brandInfo && panelInfo) {
if (previousPanelIsDetail) {
// console.log(
// "%c pyh 1 initial Detail effect",
// "background:blue; color:white"
// );
console.log(
"%c pyh 1 initial Detail effect",
"background:blue; color:white"
);
setSelectedBrandInfo(
findItemByValue(panelInfo?.brandInfo, panelInfo?.patnrId)
@@ -279,12 +279,11 @@ export default function FeaturedBrandsPanel() {
return;
}
// console.log(
// "%c pyh 1 initial GNB or QuickMenu effect",
// "background:blue; color:white"
// );
console.log(
"%c pyh 1 initial GNB or QuickMenu effect",
"background:blue; color:white"
);
scrollTopBody({ animate: false });
setSelectedPatnrId(panelInfo?.patnrId);
setFirstFocusableTargetId("spotlightId-" + brandInfo[0]?.patnrId);
}

View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import {
@@ -8,13 +8,11 @@ import {
setContainerLastFocusedElement,
} from "@enact/spotlight/src/container";
import { updatePanel } from "../../../../actions/panelActions";
import TButton, { TYPES } from "../../../../components/TButton/TButton";
import TScroller from "../../../../components/TScroller/TScroller";
import useScrollReset from "../../../../hooks/useScrollReset";
import useScrollTo from "../../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./FeaturedCategoryNav.module.less";
@@ -42,10 +40,6 @@ export default function FeaturedCategoryNav({
);
const { scrollTopByDistance } = useScrollTopByDistance();
const dispatch = useDispatch();
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const { cursorVisible } = useSelector((state) => state.common.appStatus);
useEffect(() => {
@@ -67,22 +61,10 @@ export default function FeaturedCategoryNav({
}
}, []);
const handleClick = useCallback(
(catCdLv1) => {
const x = 0;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { ...panelInfo, x },
})
);
setSelectedCatCdLv1(catCdLv1);
setSelectedCatCdLv2();
},
[dispatch]
);
const handleClick = useCallback((catCdLv1) => {
setSelectedCatCdLv1(catCdLv1);
setSelectedCatCdLv2();
}, []);
const handleFocus = useCallback(
(itemIndex) => {

View File

@@ -1,10 +1,10 @@
import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import { pushPanel } from "../../../../actions/panelActions";
import TButton, { TYPES } from "../../../../components/TButton/TButton";
import TScroller from "../../../../components/TScroller/TScroller";
import useScrollReset from "../../../../hooks/useScrollReset";
@@ -38,27 +38,13 @@ export default function FeaturedSubCategoryNav({
const dispatch = useDispatch();
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const handleBlur = useCallback(() => {
handleStopScrolling();
}, []);
const handleClick = useCallback(
(catCdLv2) => {
const x = 0;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { ...panelInfo, x },
})
);
setSelectedCatCdLv2(catCdLv2);
},
[dispatch]
);
const handleClick = useCallback((catCdLv2) => {
setSelectedCatCdLv2(catCdLv2);
}, []);
const handleFocus = useCallback(() => {
handleScrollReset();