diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 4796bd74..654bdabd 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -34,7 +34,7 @@ import TPopUp from "../../components/TPopUp/TPopUp"; import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator"; import useLogService from "../../hooks/useLogService"; import usePrevious from "../../hooks/usePrevious"; -import { ACTIVE_POPUP, panel_names } from "../../utils/Config"; +import { ACTIVE_POPUP, LOG_MENU, panel_names } from "../../utils/Config"; import { $L } from "../../utils/helperMethods"; import Banner from "./Banner/Banner"; import FeaturedBestSeller from "./FeaturedBestSeller/FeaturedBestSeller"; @@ -261,14 +261,14 @@ export default function FeaturedBrandsPanel({ const cbChangePageRef = useRef(null); const orderableFlexContainerRef = useRef(null); - const previousPanelIsDetail = Object.keys(panelInfo).length >= 6; - const previousActionOccurredInGNB = + const fromDeepLink = Object.entries(panelInfo) // + .some(([key, value]) => key === "linkTpCd" && value); + const fromDetail = Object.keys(panelInfo).length >= 6; + const fromGNB = Object.keys(panelInfo).length === 1 && Object.prototype.hasOwnProperty.call(panelInfo, "patnrId"); - const previousActionOccurredInQuickMenu = - panelInfo?.from && panelInfo.from === "quickMenu"; - const isCameThroughDeepLink = Object.entries(panelInfo) // - .some(([key, value]) => key === "linkTpCd" && value); + const fromQuickMenu = + panelInfo?.from && panelInfo.from === LOG_MENU.FEATURED_BRANDS_QUICK_MENU; // useEffect(() => { // console.log( @@ -286,12 +286,7 @@ export default function FeaturedBrandsPanel({ }, [dispatch, panelInfo?.noResetFlag]); useEffect(() => { - if ( - panelInfo?.patnrId && - (previousActionOccurredInGNB || - previousActionOccurredInQuickMenu || - isCameThroughDeepLink) - ) { + if (panelInfo?.patnrId && (fromGNB || fromQuickMenu || fromDeepLink)) { // console.log( // "%c pyh initial rendered effect", // "background: dodgerblue; color: white" @@ -304,12 +299,7 @@ export default function FeaturedBrandsPanel({ cbChangePageRef.current(0, false); } } - }, [ - panelInfo?.patnrId, - previousActionOccurredInGNB, - previousActionOccurredInQuickMenu, - isCameThroughDeepLink, - ]); + }, [fromDeepLink, fromGNB, fromQuickMenu, panelInfo?.patnrId]); useEffect(() => { if (!brandInfo) { @@ -320,11 +310,7 @@ export default function FeaturedBrandsPanel({ useEffect(() => { if (brandInfo && isInitialRendered && panelInfo) { - if ( - previousActionOccurredInGNB || - previousActionOccurredInQuickMenu || - isCameThroughDeepLink - ) { + if (fromGNB || fromQuickMenu || fromDeepLink) { // console.log( // "%c pyh second rendered(gnb, quick, link) effect", // "background: dodgerblue; color: white" @@ -338,7 +324,7 @@ export default function FeaturedBrandsPanel({ setIsInitialRendered(false); } - if (previousPanelIsDetail) { + if (fromDetail) { // console.log( // "%c pyh second rendered(detail) effect", // "background: dodgerblue; color: white" @@ -353,12 +339,12 @@ export default function FeaturedBrandsPanel({ } }, [ brandInfo, + fromDeepLink, + fromDetail, + fromGNB, + fromQuickMenu, isInitialRendered, panelInfo, - previousActionOccurredInGNB, - previousActionOccurredInQuickMenu, - previousPanelIsDetail, - isCameThroughDeepLink, ]); useEffect(() => { @@ -401,7 +387,7 @@ export default function FeaturedBrandsPanel({ let targetId = "spotlightId-" + panelInfo?.patnrId; - if (previousPanelIsDetail) { + if (fromDetail) { // console.log( // "%c pyh focus(detail) effect", // "background: dodgerblue; color: white" @@ -460,10 +446,10 @@ export default function FeaturedBrandsPanel({ }, [ dispatch, firstFocusableTargetId, + fromDetail, isInitialFocusOccurred, isOnTop, panelInfo, - previousPanelIsDetail, ]); useEffect(() => { @@ -658,6 +644,8 @@ export default function FeaturedBrandsPanel({ {shouldRenderComponent(brandInfo) && selectedBrandInfo && ( { - if (previousActionOccurredInGNB && !previousActionOccurredInQuickMenu) { + if (fromGNB && !fromQuickMenu) { const container = ulRef.current; const item = document.querySelector( `[data-spotlight-id="spotlightId-${panelInfo?.patnrId}"]` @@ -68,16 +61,10 @@ export default memo(function QuickMenu({ x = scaleW(offsetFromContainerLeft - containerWidth + clippedWidht); } - // quickMenuItem action과 gnb action을 나눠야 한다.. scrollLeft({ x }); } } - }, [ - panelInfo?.patnrId, - previousActionOccurredInGNB, - previousActionOccurredInQuickMenu, - scrollLeft, - ]); + }, [fromGNB, fromQuickMenu, panelInfo?.patnrId, scrollLeft]); const _handleItemFocus = useCallback(() => { if (handleItemFocus) { diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx index 38a29583..e2aedc5c 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx @@ -9,7 +9,7 @@ import IcPartnersDefault from "../../../../../assets/images/ic-tab-partners-defa import { resetPanels, updatePanel } from "../../../../actions/panelActions"; import CustomImage from "../../../../components/CustomImage/CustomImage"; import useScrollReset from "../../../../hooks/useScrollReset"; -import { panel_names } from "../../../../utils/Config"; +import { LOG_MENU, panel_names } from "../../../../utils/Config"; import { $L } from "../../../../utils/helperMethods"; import css from "./QuickMenuItem.module.less"; @@ -54,10 +54,11 @@ export default memo(function QuickMenuItem({ return; } + const from = LOG_MENU.FEATURED_BRANDS_QUICK_MENU; const name = panel_names.FEATURED_BRANDS_PANEL; dispatch(resetPanels([{ name }])); - dispatch(updatePanel({ name, panelInfo: { patnrId, from: "quickMenu" } })); + dispatch(updatePanel({ name, panelInfo: { from, patnrId } })); setIsInitialRendered(true); resetStates(); }, [dispatch, patnrId, resetStates, selectedPatnrId, setIsInitialRendered]);