[FeaturedBrandsPanel] edited variable

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -265,6 +265,8 @@ export default function FeaturedBrandsPanel({
   const previousActionOccurredInGNB =
     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);
 
@@ -286,7 +288,9 @@ export default function FeaturedBrandsPanel({
   useEffect(() => {
     if (
       panelInfo?.patnrId &&
-      (previousActionOccurredInGNB || isCameThroughDeepLink)
+      (previousActionOccurredInGNB ||
+        previousActionOccurredInQuickMenu ||
+        isCameThroughDeepLink)
     ) {
       // console.log(
       //   "%c pyh initial rendered effect",
@@ -300,7 +304,12 @@ export default function FeaturedBrandsPanel({
         cbChangePageRef.current(0, false);
       }
     }
-  }, [panelInfo?.patnrId, previousActionOccurredInGNB, isCameThroughDeepLink]);
+  }, [
+    panelInfo?.patnrId,
+    previousActionOccurredInGNB,
+    previousActionOccurredInQuickMenu,
+    isCameThroughDeepLink,
+  ]);
 
   useEffect(() => {
     if (!brandInfo) {
@@ -311,7 +320,11 @@ export default function FeaturedBrandsPanel({
 
   useEffect(() => {
     if (brandInfo && isInitialRendered && panelInfo) {
-      if (previousActionOccurredInGNB || isCameThroughDeepLink) {
+      if (
+        previousActionOccurredInGNB ||
+        previousActionOccurredInQuickMenu ||
+        isCameThroughDeepLink
+      ) {
         // console.log(
         //   "%c pyh second rendered(gnb, quick, link) effect",
         //   "background: dodgerblue; color: white"
@@ -343,6 +356,7 @@ export default function FeaturedBrandsPanel({
     isInitialRendered,
     panelInfo,
     previousActionOccurredInGNB,
+    previousActionOccurredInQuickMenu,
     previousPanelIsDetail,
     isCameThroughDeepLink,
   ]);

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx

@@ -31,8 +31,13 @@ export default memo(function QuickMenu({
     Object.keys(panelInfo).length === 1 &&
     Object.prototype.hasOwnProperty.call(panelInfo, "patnrId");
 
+  const previousActionOccurredInQuickMenu =
+    panelInfo?.from && panelInfo.from === "quickMenu";
+  // const actionOccurredInQuickMenu =
+  //   panelInfo?.from && panelInfo?.from === "quickMenu";
+
   useEffect(() => {
-    if (previousActionOccurredInGNB) {
+    if (previousActionOccurredInGNB && !previousActionOccurredInQuickMenu) {
       const container = ulRef.current;
       const item = document.querySelector(
         `[data-spotlight-id="spotlightId-${panelInfo?.patnrId}"]`
@@ -63,10 +68,16 @@ export default memo(function QuickMenu({
           x = scaleW(offsetFromContainerLeft - containerWidth + clippedWidht);
         }
 
+        // quickMenuItem action과 gnb action을 나눠야 한다..
         scrollLeft({ x });
       }
     }
-  }, [panelInfo?.patnrId, previousActionOccurredInGNB, scrollLeft]);
+  }, [
+    panelInfo?.patnrId,
+    previousActionOccurredInGNB,
+    previousActionOccurredInQuickMenu,
+    scrollLeft,
+  ]);
 
   const _handleItemFocus = useCallback(() => {
     if (handleItemFocus) {

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx

@@ -1,27 +1,17 @@
-import React, {
-  memo,
-  useCallback,
-} from 'react';
+import React, { memo, useCallback } from "react";
 
-import classNames from 'classnames';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
 
-import Spottable from '@enact/spotlight/Spottable';
+import Spottable from "@enact/spotlight/Spottable";
 
-import IcPartnersDefault
-  from '../../../../../assets/images/ic-tab-partners-default@3x.png';
-import {
-  resetPanels,
-  updatePanel,
-} from '../../../../actions/panelActions';
-import CustomImage from '../../../../components/CustomImage/CustomImage';
-import useScrollReset from '../../../../hooks/useScrollReset';
-import { panel_names } from '../../../../utils/Config';
-import { $L } from '../../../../utils/helperMethods';
-import css from './QuickMenuItem.module.less';
+import IcPartnersDefault from "../../../../../assets/images/ic-tab-partners-default@3x.png";
+import { resetPanels, updatePanel } from "../../../../actions/panelActions";
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import useScrollReset from "../../../../hooks/useScrollReset";
+import { panel_names } from "../../../../utils/Config";
+import { $L } from "../../../../utils/helperMethods";
+import css from "./QuickMenuItem.module.less";
 
 const SpottableComponent = Spottable("li");
 
@@ -67,7 +57,7 @@ export default memo(function QuickMenuItem({
     const name = panel_names.FEATURED_BRANDS_PANEL;
 
     dispatch(resetPanels([{ name }]));
-    dispatch(updatePanel({ name, panelInfo: { patnrId } }));
+    dispatch(updatePanel({ name, panelInfo: { patnrId, from: "quickMenu" } }));
     setIsInitialRendered(true);
     resetStates();
   }, [dispatch, patnrId, resetStates, selectedPatnrId, setIsInitialRendered]);