refactor: QueryClientProvider 선언 위치 변경

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

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

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);
     },
   });
 

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}</>;
 }

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 />