GNB 데이터 가공 및 패널작업(미완성)

com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx

@@ -77,6 +77,9 @@ const TabItemBase = ({
       return null;
     }
   }, [focused, selected, expanded]);
+
+  delete rest.hasChildren;
+  delete rest.getChildren;
   return (
     <SpottableComponent
       ref={itemRef}

com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

@@ -82,14 +82,18 @@ const deActivateTabJabFunc = (func) => {
 };
 let deActivateTabJob = new Job(deActivateTabJabFunc, 2000);
 
+const clearPanelSwitching = (ref) => {
+  if (ref) {
+    ref.current = false;
+  }
+};
+let panelSwitchingJob = new Job(clearPanelSwitching, 500);
+
 const COLLABSED_MAIN = 0;
 const ACTIVATED_MAIN = 1;
 const ACTIVATED_SUB = 2;
 const EXTRA_AREA = 3;
 
-const MAIN_TITLE = 0;
-const SUB_TITLE = 1;
-
 const PANELS_HAS_TAB = [
   panel_names.CART_PANEL,
   panel_names.CATEGORY_PANEL,
@@ -117,92 +121,47 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       {
         icons: CategoryIcon,
         title: "",
-        children: [
+        children: [],
-          {
-            title: "",
-            target: [{ name: panel_names.CATEGORY_PANEL }],
-          },
-        ],
       },
       {
         icons: MyPageIcon,
         title: "",
-        children: [
+        children: [],
-          {
-            title: "",
-            target: [{ name: panel_names.MY_PAGE_PANEL }],
-          },
-        ],
       },
       {
         icons: SearchIcon,
         title: "",
-        children: [
+        target: [{ name: panel_names.SEARCH_PANEL }],
-          {
-            title: "12323232",
-            target: [{ name: panel_names.SEARCH_PANEL }],
-          },
-        ],
       },
       {
         icons: HomeIcon,
         title: "",
-        children: [
+        target: [{ name: panel_names.HOME_PANEL }],
-          {
-            title: "43534543",
-            target: [{ name: panel_names.HOME_PANEL }],
-          },
-        ],
       },
       {
         icons: FeaturedBrandIcon,
         title: "",
-        children: [
+        children: [],
-          {
-            title: "dsadasd",
-            target: [{ name: panel_names.FEATURED_BRANDS_PANEL }],
-          },
-        ],
       },
       {
         icons: OnSaleIcon,
         title: "",
-        children: [
+        target: [{ name: panel_names.ON_SALE_PANEL }],
-          {
-            title: "",
-            target: [{ name: panel_names.ON_SALE_PANEL }],
-          },
-        ],
       },
       {
         icons: TrendingNowIcon,
         title: "",
-        children: [
+        target: [{ name: panel_names.TRENDING_NOW_PANEL }],
-          {
-            title: "",
-            target: [{ name: panel_names.TRENDING_NOW_PANEL }],
-          },
-        ],
       },
       {
         icons: HotPicksIcon,
         title: "",
-        children: [
+        target: [{ name: panel_names.HOT_PICKS_PANEL }],
-          {
-            title: "",
-            target: [{ name: panel_names.HOT_PICKS_PANEL }],
-          },
-        ],
       },
       {
         icons: CartIcon,
         title: "",
-        children: [
+        target: [{ name: panel_names.CART_PANEL }],
-          {
-            title: "",
-            target: [{ name: panel_names.CART_PANEL }],
-          },
-        ],
       },
 
       //메뉴 추가 필요 20240112 chw
@@ -214,44 +173,72 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     let result = [];
 
     switch (type) {
-      case "gnb":
+      case "Category":
+        data?.homeCategory.map((item) => {
+          result.push(item.lgCatNm);
+        });
+        return result;
+      case "GNB":
         data?.gnb.map((item) => {
           result.push(item.menuNm);
         });
-        console.log("#result", result);
         return result;
-      case "homeCategory":
+      case "Featured Brands":
-        return "123123";
+        data?.shortFeaturedBrands.map((item) => {
-      case "msgInfos":
+          result.push(item.patncLogoPath);
+        });
         return result;
-      case "mypage":
+      case "My Page":
-        return result;
+        data?.mypage.map((item) => {
-      case "shortCategory":
+          result.push(item.menuNm);
-        return result;
+        });
-      case "shortFeaturedBrands":
         return result;
     }
+    return null;
   };
 
-  const dataDivide = () => {
+  const dataDivide = useCallback(() => {
+    let keys = ["Category", "Featured Brands", "My Page"];
+
     if (data) {
-      // console.log("data", data);
+      let mainTitle = getMenuData("GNB");
-      // Object.keys(data).map((key) => {
-      //   title = getMenuData(key);
-      //   return title;
-      // });
 
-      const title = getMenuData("gnb");
+      mainTitle = mainTitle.sort((a, b) => {
-      // const subTitle = getMenuData(menu);
+        const order = {
+          Category: 0,
+          "My Page": 1,
+          Search: 2,
+          Home: 3,
+          "Featured Brands": 4,
+          "On sale": 5,
+          "Trending Now": 6,
+          "Hot Picks": 7,
+          Cart: 8,
+        };
 
-      for (let i = 0; i < menuItems.length; i++) {
+        return order[a] - order[b];
-        menuItems[i].title = title[i];
+      });
-        menuItems[i].children.title = title[i];
+
+      for (let i = 0; i < mainTitle.length; i++) {
+        menuItems[i].title = mainTitle[i];
+      }
+
+      for (let j = 0; j < keys.length; j++) {
+        const currentKey = keys[j];
+        const subTitle = getMenuData(currentKey);
+
+        if (subTitle && subTitle.length > 0) {
+          for (let i = 0; i < mainTitle.length; i++) {
+            if (mainTitle[i] === currentKey) {
+              menuItems[i].children = subTitle.map((title) => ({
+                title,
+              }));
+            }
+          }
+        }
       }
     }
-    console.log("#menuItems", menuItems);
+  }, [data, menuItems]);
-    return menuItems;
-  };
 
   const makeTabmenu = useCallback(() => {
     const t = [];
@@ -356,13 +343,13 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       if (target) {
         dispatch(resetPanels(target));
         deActivateTab();
-        // panelSwitching.current = true;
+        panelSwitching.current = true;
-        // panelSwitchingJob.start(panelSwitching);
+        panelSwitchingJob.start(panelSwitching);
       } else if (cursorVisible) {
         setMainExpanded(true);
       }
     },
-    [deActivateTab, dispatch]
+    [cursorVisible, deActivateTab, dispatch]
   );
 
   const onClickSubItem = useCallback(
@@ -484,6 +471,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
             {tabActivated &&
               tabs.map((item, index) => (
                 <TabItem
+                  {...item}
                   key={"tabitemExpanded" + index}
                   onClick={handleNavigation}
                   deActivateTab={deActivateTab}