[Fix/sidebar-240] 🚨 Fix : SSR + React Query 하이드레이션 범위 수정

src/app/(protected)/goals/[goalId]/page.tsx

@@ -29,13 +29,6 @@ export default async function GoalsPage({ params }: GoalsPageProps) {
           auth: "access",
         }),
     }),
-    queryClient.prefetchQuery({
-      queryKey: goalsQueryKeys.list(),
-      queryFn: () =>
-        backendFetch<GoalResponse>("/goals", {
-          auth: "access",
-        }),
-    }),
   ]);
 
   return (

src/app/(protected)/layout.tsx

@@ -1,6 +1,9 @@
+import { GoalResponse } from "@/api/types/goal";
 import ProtectedContent from "@/app/(protected)/_components/ProtectedContent";
 import { AuthUser } from "@/hooks/queries/auth/queryKeys";
+import goalsQueryKeys from "@/hooks/queries/goals/queryKeys";
 import { backendFetch } from "@/lib/backend";
+import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
 import { redirect } from "next/navigation";
 import NavigationDesktop from "./_components/navigation/NavigationDesktop";
 
@@ -13,6 +16,7 @@ export default async function ProtectedLayout({
   children,
   modal,
 }: ProtectedLayoutProps) {
+  const queryClient = new QueryClient();
   let user: AuthUser;
 
   try {
@@ -21,18 +25,25 @@ export default async function ProtectedLayout({
     redirect("/login");
   }
 
+  await queryClient.prefetchQuery({
+    queryKey: goalsQueryKeys.list(),
+    queryFn: () => backendFetch<GoalResponse>("/goals", { auth: "access" }),
+  });
+
   return (
-    <ProtectedContent user={user}>
-      <main className="flex min-h-screen overflow-hidden sm:h-screen sm:gap-12 lg:gap-20">
-        <div className="hidden sm:block">
-          <NavigationDesktop />
-        </div>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ProtectedContent user={user}>
+        <main className="flex min-h-screen overflow-hidden sm:h-screen sm:gap-12 lg:gap-20">
+          <div className="hidden sm:block">
+            <NavigationDesktop />
+          </div>
 
-        <section className="flex-1 overflow-y-auto px-5 pt-22 pb-12 sm:pt-12 lg:py-20 lg:pr-40">
-          {children}
-          {modal}
-        </section>
-      </main>
-    </ProtectedContent>
+          <section className="flex-1 overflow-y-auto px-5 pt-22 pb-12 sm:pt-12 lg:py-20 lg:pr-40">
+            {children}
+            {modal}
+          </section>
+        </main>
+      </ProtectedContent>
+    </HydrationBoundary>
   );
 }