fix(users): SSR에 데이터 주입해서 레이아웃시프팅 해결 시도

Author: peachPetal

src/app/(protected)/users/[userId]/[tab]/page.tsx

@@ -1,3 +1,4 @@
+import { getUserProfileServer } from "@/entities/user/api/user-api.server";
 import { UserTabContent } from "@/screens/user";
 
 interface PageProps {
@@ -9,8 +10,8 @@ interface PageProps {
 
 export default async function Page({ params }: PageProps) {
   const { userId, tab } = await params;
-
   const targetUserId = Number(userId);
+  const profile = await getUserProfileServer(targetUserId);
 
-  return <UserTabContent tabId={tab} targetUserId={targetUserId} />;
+  return <UserTabContent tabId={tab} targetUserId={targetUserId} initialData={profile} />;
 }

src/app/(protected)/users/[userId]/layout.tsx

@@ -31,7 +31,7 @@ export default async function UserLayout({ children, params }: LayoutProps) {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <main className="bg-background mx-auto flex min-h-screen w-full max-w-7xl flex-col items-center gap-4 px-4 py-6 2xl:px-0">
-        <UserDashboardHeader targetUserId={targetUserId} />
+        <UserDashboardHeader targetUserId={targetUserId} initialData={profile} />
         <div className="w-full">{children}</div>
       </main>
     </HydrationBoundary>

src/entities/user/api/user-api.server.ts

@@ -4,6 +4,7 @@ import { fetch as apiFetch } from "@/shared/api/server";
 import { API_ENDPOINTS } from "@/shared/config/endpoints";
 
 interface UserApiResponse {
+  userId: number;
   username: string;
   email: string;
   profileImage: string | null;
@@ -30,9 +31,10 @@ export const getUserProfileServer = async (targetUserId: number) => {
 
     const { data } = response;
 
-    if (!data) return null;
+    if (!data) return undefined;
 
     return {
+      userId: data.userId,
       name: data.username,
       email: data.email,
       avatarUrl: data.profileImage || undefined,
@@ -41,6 +43,6 @@ export const getUserProfileServer = async (targetUserId: number) => {
       isOwner: data.isOwner,
     };
   } catch {
-    return null;
+    return undefined;
   }
 };

src/screens/user/ui/user-tab-content.tsx

@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
 import { notFound } from "next/navigation";
 
 import { DASHBOARD_TABS, type TabIdType } from "@/entities/user";
+import { UserProfileType } from "@/entities/user";
 import { TabLabelHeader } from "@/features/user";
 import { useUserProfile } from "@/features/user/api/use-my-profile";
 import { CommonItemTabSkeleton, ReviewTabSkeleton, CalendarTabSkeleton } from "@/widgets/user";
@@ -68,9 +69,10 @@ function isValidTabId(id: string): id is TabIdType {
 interface UserTabContentProps {
   tabId: string;
   targetUserId: number;
+  initialData: UserProfileType | undefined;
 }
 
-export function UserTabContent({ tabId, targetUserId }: UserTabContentProps) {
+export function UserTabContent({ tabId, targetUserId, initialData }: UserTabContentProps) {
   if (!isValidTabId(tabId)) notFound();
 
   const currentTabId = tabId;
@@ -79,7 +81,12 @@ export function UserTabContent({ tabId, targetUserId }: UserTabContentProps) {
   const currentTabConfig = DASHBOARD_TABS.find((t) => t.id === currentTabId);
   if (!currentTabConfig) notFound();
 
-  const { data: profile, isLoading, isFetching, isPending } = useUserProfile(targetUserId);
+  const {
+    data: profile,
+    isLoading,
+    isFetching,
+    isPending,
+  } = useUserProfile(targetUserId, initialData);
 
   // 핵심: 프로필/권한이 "확정"되기 전에는 비공개 판정을 하지 말고
   // 서버/클라 동일하게 스켈레톤을 렌더해서 트리를 고정한다.

src/widgets/user/ui/user-dashboard-header.tsx

@@ -2,15 +2,21 @@
 
 import { useParams } from "next/navigation";
 
-import { DASHBOARD_TABS } from "@/entities/user";
+import { DASHBOARD_TABS, UserProfileType } from "@/entities/user";
 import { ActivityTabs, UserProfileCard } from "@/features/user";
 import { useUserProfile } from "@/features/user/api/use-my-profile";
 
-export function UserDashboardHeader({ targetUserId }: { targetUserId: number }) {
+interface UserDashboardHeaderProps {
+  targetUserId: number;
+  initialData: UserProfileType; // 추가
+}
+
+export function UserDashboardHeader({ targetUserId, initialData }: UserDashboardHeaderProps) {
   const params = useParams();
   const activeTab = (params.tab as string) || "calendar";
 
-  const { data: profile, isLoading } = useUserProfile(targetUserId);
+  const { data: profile, isLoading } = useUserProfile(targetUserId, initialData);
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-4" data-testid="user-dashboard-header-skeleton">