apps/cs/middleware.ts

@@ -8,10 +8,12 @@ export function middleware(req: NextRequest) {
   const searchParams = req.nextUrl.searchParams;
 
   if (pathname.startsWith("/server")) {
-    const newUrl = new URL(
-      `${serverApiUrl}${pathname.replace("/server", "")}?${searchParams.toString() ?? ""}`,
-    );
-    return NextResponse.rewrite(newUrl);
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+    console.log("Rewriting to: ", newUrl);
+    return NextResponse.rewrite(new URL(newUrl));
   }
 
   return NextResponse.next();

apps/cs/src/app/providers/app-provider.tsx

@@ -2,20 +2,18 @@
 
 import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
 import { AuthWrapper } from "@/entities/auth";
-import { QueryProvider, StoreProvider } from "@/shared/providers";
+import { StoreProvider } from "@/shared/providers";
 import { AlertDialog } from "@/shared/ui/alert-dialog";
 
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
     <StoreProvider>
-      <QueryProvider>
       <ConfirmProvider>
         <AuthWrapper>
           {children}
           <AlertDialog />
         </AuthWrapper>
       </ConfirmProvider>
-      </QueryProvider>
     </StoreProvider>
   );
 };

apps/cs/src/pages/site/ui/modify-page.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
@@ -15,6 +15,7 @@ function ModifyPage({ siteId }: { siteId: string }) {
   const isModifyMode = !!siteId;
 
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { setMessage: alert } = useAlertStore((state) => state);
   const { data: siteDetail } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES, siteId],
@@ -36,14 +37,23 @@ function ModifyPage({ siteId }: { siteId: string }) {
   const { mutateAsync: modifySite } = useMutation({
     mutationFn: (data: SiteFormData) => SiteApi.modifySite(siteId, data),
     onSuccess: () => {
-      alert("수정되었습니다.");
+      alert("수정되었습니다.", () => {
+        queryClient.invalidateQueries({
+          queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+        });
+      });
     },
   });
 
   const { mutateAsync: deleteSite } = useMutation({
     mutationFn: () => SiteApi.deleteSite(siteId),
     onSuccess: () => {
-      alert("삭제되었습니다.", router.back);
+      alert("삭제되었습니다.", () => {
+        queryClient.invalidateQueries({
+          queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+        });
+        router.back();
+      });
     },
   });
 

apps/cs/src/shared/providers/index.ts

@@ -1,2 +1 @@
-export { QueryProvider } from "./query-provider";
 export { StoreProvider } from "./store-provider";

packages/common/components/src/provider/query-provider.tsx

@@ -1,9 +1,14 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-const queryClient = new QueryClient();
-
-export const QueryProvider = ({ children }: { children: React.ReactNode }) => {
+export function QueryProvider({
+  children,
+  client,
+}: {
+  children: React.ReactNode;
+  client?: QueryClient;
+}) {
+  const queryClient = client ?? new QueryClient();
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
-};
+}

packages/common/components/src/ui/layout/base.tsx

@@ -1,17 +1,21 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
+import { QueryProvider } from "../../provider/query-provider";
 import { SidebarProvider } from "../sidebar";
 import { LNB } from "../lnb";
 import { Header } from "../header";
 import { Footer } from "./footer";
 
 import "./common.css";
+import type { QueryClient } from "@tanstack/react-query";
 
-const queryClient = new QueryClient();
-
-export function BaseLayout({ children }: { children: React.ReactNode }) {
+export function BaseLayout({
+  children,
+  queryClient,
+}: {
+  children: React.ReactNode;
+  queryClient?: QueryClient;
+}) {
   return (
-    <QueryClientProvider client={queryClient}>
+    <QueryProvider client={queryClient}>
       <SidebarProvider>
         <div className="flex-1">
           <Header />
@@ -26,6 +30,6 @@ export function BaseLayout({ children }: { children: React.ReactNode }) {
           </div>
         </div>
       </SidebarProvider>
-    </QueryClientProvider>
+    </QueryProvider>
   );
 }

packages/common/components/src/ui/layout/vbase.tsx

@@ -1,17 +1,23 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
+import { QueryProvider } from "../../provider/query-provider";
+import { SidebarProvider } from "../sidebar";
 import { LNB } from "../lnb";
 import { Header } from "../header";
 import { Footer } from "./footer";
 
 import "./common.css";
+import type { QueryClient } from "@tanstack/react-query";
 
-const queryClient = new QueryClient();
-
-export function VBaseLayout({ children }: { children: React.ReactNode }) {
+export function BaseLayout({
+  children,
+  queryClient,
+}: {
+  children: React.ReactNode;
+  queryClient?: QueryClient;
+}) {
   return (
-    <QueryClientProvider client={queryClient}>
-      <div>
+    <QueryProvider client={queryClient}>
+      <SidebarProvider>
+        <div className="flex-1">
           <Header viewOnly />
           <div className="flex h-[calc(100vh-50px)]">
             <LNB viewOnly />
@@ -23,6 +29,7 @@ export function VBaseLayout({ children }: { children: React.ReactNode }) {
             </div>
           </div>
         </div>
-    </QueryClientProvider>
+      </SidebarProvider>
+    </QueryProvider>
   );
 }