From 0a51ac3f799dc6f5612b851e7d330fcff49fff7b Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 2 Apr 2025 17:19:16 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20QueryClientProvider=20=EC=84=A0?=
 =?UTF-8?q?=EC=96=B8=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/app/(with-base-layout)/layout.tsx     |  9 ++++++++-
 apps/cs/src/app/providers/app-provider.tsx    | 20 +++++++++++--------
 apps/cs/src/pages/site/ui/modify-page.tsx     |  7 +------
 .../src/provider/query-provider.tsx           | 16 +++++++++------
 .../common/components/src/ui/layout/base.tsx  |  2 +-
 5 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/apps/cs/app/(with-base-layout)/layout.tsx b/apps/cs/app/(with-base-layout)/layout.tsx
index 4cb6bc9af..c3254a935 100644
--- a/apps/cs/app/(with-base-layout)/layout.tsx
+++ b/apps/cs/app/(with-base-layout)/layout.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
 import type { MenuItem } from "@common/components/api";
 import { BaseLayout } from "@common/components/ui";
 import { useMenuStore } from "@/shared/lib";
@@ -13,6 +14,8 @@ export default function WithBaseLayout({
 }) {
   const router = useRouter();
   const pathname = usePathname();
+  const queryClient = useQueryClient();
+
   const { setCurrentMenuInfo } = useMenuStore((state) => state);
 
   const handleMenuClick = (item: MenuItem) => {
@@ -21,7 +24,11 @@ export default function WithBaseLayout({
   };
 
   return (
-    <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleMenuClick}>
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
       <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 a7d49ac0a..fb4b65f27 100644
--- a/apps/cs/src/app/providers/app-provider.tsx
+++ b/apps/cs/src/app/providers/app-provider.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
 import { AuthWrapper } from "@/entities/auth";
 import { MenuWrapper } from "@/entities/menu";
@@ -7,15 +8,18 @@ import { StoreProvider } from "@/shared/providers";
 import { AlertDialog } from "@/shared/ui/alert-dialog";
 
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  const queryClient = new QueryClient();
   return (
-    <StoreProvider>
-      <ConfirmProvider>
-        <AuthWrapper>
-          <MenuWrapper>{children}</MenuWrapper>
-          <AlertDialog />
-        </AuthWrapper>
-      </ConfirmProvider>
-    </StoreProvider>
+    <QueryClientProvider client={queryClient}>
+      <StoreProvider>
+        <ConfirmProvider>
+          <AuthWrapper>
+            <MenuWrapper>{children}</MenuWrapper>
+            <AlertDialog />
+          </AuthWrapper>
+        </ConfirmProvider>
+      </StoreProvider>
+    </QueryClientProvider>
   );
 };
 
diff --git a/apps/cs/src/pages/site/ui/modify-page.tsx b/apps/cs/src/pages/site/ui/modify-page.tsx
index 6b6c43c1f..cf2fa2200 100644
--- a/apps/cs/src/pages/site/ui/modify-page.tsx
+++ b/apps/cs/src/pages/site/ui/modify-page.tsx
@@ -45,12 +45,7 @@ function ModifyPage({ siteId }: { siteId: string }) {
   const { mutateAsync: deleteSite } = useMutation({
     mutationFn: () => SiteApi.deleteSite(siteId),
     onSuccess: () => {
-      alert("삭제되었습니다.", () => {
-        queryClient.invalidateQueries({
-          queryKey: [ENDPOINT.CMS_SERVICE.SITES],
-        });
-        router.back();
-      });
+      alert("삭제되었습니다.", router.back);
     },
   });
 
diff --git a/packages/common/components/src/provider/query-provider.tsx b/packages/common/components/src/provider/query-provider.tsx
index 5781919f1..e06880255 100644
--- a/packages/common/components/src/provider/query-provider.tsx
+++ b/packages/common/components/src/provider/query-provider.tsx
@@ -2,13 +2,17 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export function QueryProvider({
   children,
-  client,
+  queryClient,
 }: {
   children: React.ReactNode;
-  client?: QueryClient;
+  queryClient?: QueryClient;
 }) {
-  const queryClient = client ?? new QueryClient();
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
+  if (!queryClient) {
+    const queryClient = new QueryClient();
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return <>{children}</>;
 }
diff --git a/packages/common/components/src/ui/layout/base.tsx b/packages/common/components/src/ui/layout/base.tsx
index c6a564c37..21d2ca7c6 100644
--- a/packages/common/components/src/ui/layout/base.tsx
+++ b/packages/common/components/src/ui/layout/base.tsx
@@ -19,7 +19,7 @@ export function BaseLayout({
   handleMenuClick?: (item: MenuItem) => void;
 }) {
   return (
-    <QueryProvider client={queryClient}>
+    <QueryProvider queryClient={queryClient}>
       <SidebarProvider>
         <div className="flex-1">
           <Header />