From 4e4bd820097f7ca665cff8a8ba155146147896c8 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 2 Apr 2025 15:33:51 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20menu=20wrapper=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?useQuery=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/app/(with-base-layout)/layout.tsx     |  5 +----
 apps/cs/src/app/providers/app-provider.tsx    |  3 ++-
 .../cs/src/entities/menu/lib/menu-wrapper.tsx | 21 +++++++++----------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/cs/app/(with-base-layout)/layout.tsx b/apps/cs/app/(with-base-layout)/layout.tsx
index 59e242cfc..4cb6bc9af 100644
--- a/apps/cs/app/(with-base-layout)/layout.tsx
+++ b/apps/cs/app/(with-base-layout)/layout.tsx
@@ -3,7 +3,6 @@
 import { usePathname, useRouter } from "next/navigation";
 import type { MenuItem } from "@common/components/api";
 import { BaseLayout } from "@common/components/ui";
-import { MenuWrapper } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
 
@@ -23,9 +22,7 @@ export default function WithBaseLayout({
 
   return (
     <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleMenuClick}>
-      <MenuWrapper>
-        <PageLayout>{children}</PageLayout>
-      </MenuWrapper>
+      <PageLayout>{children}</PageLayout>
     </BaseLayout>
   );
 }
diff --git a/apps/cs/src/app/providers/app-provider.tsx b/apps/cs/src/app/providers/app-provider.tsx
index b14c3dc96..a7d49ac0a 100644
--- a/apps/cs/src/app/providers/app-provider.tsx
+++ b/apps/cs/src/app/providers/app-provider.tsx
@@ -2,6 +2,7 @@
 
 import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
 import { AuthWrapper } from "@/entities/auth";
+import { MenuWrapper } from "@/entities/menu";
 import { StoreProvider } from "@/shared/providers";
 import { AlertDialog } from "@/shared/ui/alert-dialog";
 
@@ -10,7 +11,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
     <StoreProvider>
       <ConfirmProvider>
         <AuthWrapper>
-          {children}
+          <MenuWrapper>{children}</MenuWrapper>
           <AlertDialog />
         </AuthWrapper>
       </ConfirmProvider>
diff --git a/apps/cs/src/entities/menu/lib/menu-wrapper.tsx b/apps/cs/src/entities/menu/lib/menu-wrapper.tsx
index 0fbd4df90..d473548af 100644
--- a/apps/cs/src/entities/menu/lib/menu-wrapper.tsx
+++ b/apps/cs/src/entities/menu/lib/menu-wrapper.tsx
@@ -2,27 +2,26 @@
 
 import { useEffect } from "react";
 import { usePathname } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { ENDPOINT, SITE_ID } from "@/shared/config";
+import { SITE_ID } from "@/shared/config";
 import { useMenuStore } from "@/shared/lib";
 import { MenuApi } from "../api/menu-service";
 import { getCurrentMenu } from "./utils";
 
 const MenuWrapper = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
-  const { data: menuRoles } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
-    queryFn: () => MenuApi.getMenuRoles(SITE_ID),
-  });
   const { setCurrentMenuInfo } = useMenuStore((state) => state);
 
   useEffect(() => {
-    if (!menuRoles) return;
-    const currentMenu = getCurrentMenu(menuRoles, pathname ?? "");
+    (async () => {
+      const menuRoles = await MenuApi.getMenuRoles(SITE_ID);
+      if (!menuRoles) return;
 
-    if (!currentMenu) return;
-    setCurrentMenuInfo(currentMenu);
-  }, [menuRoles]);
+      const currentMenu = getCurrentMenu(menuRoles, pathname ?? "");
+      if (!currentMenu) return;
+
+      setCurrentMenuInfo(currentMenu);
+    })();
+  }, []);
 
   return <>{children}</>;
 };