[FeaturedBrandsPanel] edited, variables

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 && (
               <QuickMenu
                 brandInfo={brandInfo}
+                fromGNB={fromGNB}
+                fromQuickMenu={fromQuickMenu}
                 handleItemFocus={handleItemFocus}
                 panelInfo={panelInfo}
                 selectedPatnrId={selectedPatnrId}

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

@@ -16,6 +16,8 @@ const Container = SpotlightContainerDecorator(
 
 export default memo(function QuickMenu({
   brandInfo,
+  fromGNB,
+  fromQuickMenu,
   handleItemFocus,
   panelInfo,
   selectedPatnrId,
@@ -27,17 +29,8 @@ export default memo(function QuickMenu({
 
   const ulRef = useRef(null);
 
-  const previousActionOccurredInGNB =
-    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 && !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) {

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]);