refactor(auth): 헤더 인증 로직을 클라이언트 유저 상태로 전환

- 헤더의 인증/프로필 로직을 React Query 기반 클라이언트 상태로 이동
- 사용자 기본 정보를 조회하는 useUserBasic 훅 추가
- 로그인 상태 분기를 담당하는 HeaderAuthSlot 컴포넌트 추가
- HeaderActions가 서버에서 프로필을 조회하지 않고 avatar props를 받도록 수정
- 로그아웃 시 사용자 관련 query cache를 정리하도록 처리

Author: sageherb

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

@@ -1,5 +1,3 @@
-import { cache } from "react";
-
 import { cookies } from "next/headers";
 
 import { fetch as apiFetch } from "@/shared/api/server";
@@ -14,7 +12,7 @@ interface UserApiResponse {
   isOwner: boolean;
 }
 
-export const getUserProfileServer = cache(async (targetUserId: number) => {
+export const getUserProfileServer = async (targetUserId: number) => {
   const cookieStore = await cookies();
   const accessToken = cookieStore.get("accessToken")?.value;
 
@@ -45,4 +43,4 @@ export const getUserProfileServer = cache(async (targetUserId: number) => {
   } catch {
     return null;
   }
-});
+};

src/entities/user/index.ts

@@ -3,4 +3,9 @@ export type { UserProfileType } from "./model/types";
 export type { UserBasicInfoResponseType } from "./model/types";
 export { DASHBOARD_TABS } from "./model/dashboard-tabs.config";
 export type { TabIdType, TabConfig } from "./model/types";
-export { getUserProfile, updateUserProfileImage, updateUserName } from "./api/user-api";
+export {
+  getUserProfile,
+  getUserBasic,
+  updateUserProfileImage,
+  updateUserName,
+} from "./api/user-api";

src/features/user/api/use-user-basic.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { getUserBasic } from "@/entities/user";
+
+const userBasicKey = ["user", "basic"] as const;
+
+async function fetchUserBasic() {
+  try {
+    return await getUserBasic();
+  } catch {
+    return null;
+  }
+}
+
+export function useUserBasic() {
+  return useQuery({
+    queryKey: userBasicKey,
+    queryFn: fetchUserBasic,
+    retry: false,
+    staleTime: 1000 * 60 * 5,
+    refetchOnWindowFocus: false,
+  });
+}

src/widgets/header/header.tsx

@@ -1,23 +1,12 @@
-import { cookies } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
 
-import { LogIn } from "lucide-react";
-
 import Logo from "@/shared/assets/icons/windfall.svg";
-import { ROUTES } from "@/shared/config/routes";
 import { Container } from "@/shared/ui";
-import Button from "@/shared/ui/button/button";
-import HeaderActions from "@/widgets/header/ui/header-actions";
+import HeaderAuthSlot from "@/widgets/header/ui/header-auth-slot";
 import HeaderSearch from "@/widgets/header/ui/header-search";
 
 export async function Header() {
-  const cookieStore = await cookies();
-  const userId = cookieStore.get("userId")?.value;
-
-  const numericUserId = Number(userId);
-  const hasValidUserId = Number.isInteger(numericUserId) && numericUserId > 0;
-
   return (
     <header className="bg-background h-header sticky top-0 z-50 hidden select-none md:flex">
       <Container className="lg:px flex items-center justify-around gap-4 px-2 min-[960px]:px-3 lg:px-5 xl:px-7">
@@ -30,16 +19,7 @@ export async function Header() {
 
         <HeaderSearch />
 
-        {hasValidUserId ? (
-          <HeaderActions userId={numericUserId} />
-        ) : (
-          <Button asChild size="lg">
-            <Link href={ROUTES.login} aria-label="로그인">
-              <LogIn className="size-5" />
-              <span className="font-semibold">로그인</span>
-            </Link>
-          </Button>
-        )}
+        <HeaderAuthSlot />
       </Container>
     </header>
   );

src/widgets/header/ui/header-actions.tsx

@@ -1,18 +1,20 @@
+"use client";
+
 import Link from "next/link";
 
 import { Bell, Plus } from "lucide-react";
 
-import { getUserProfileServer } from "@/entities/user/api/user-api.server";
 import { ROUTES } from "@/shared/config/routes";
 import { Button } from "@/shared/ui";
 import HeaderUserMenu from "@/widgets/header/ui/header-user-menu";
 
-export default async function HeaderActions({ userId }: { userId: number }) {
-  const profile = await getUserProfileServer(userId);
-
-  const avatarUrl = profile?.avatarUrl;
-  const avatarAlt = profile?.name ?? "프로필";
-
+export default function HeaderActions({
+  avatarUrl,
+  avatarAlt,
+}: {
+  avatarUrl?: string;
+  avatarAlt: string;
+}) {
   return (
     <div className="flex shrink-0 items-center gap-3">
       <Button asChild aria-label="경매 등록" size="icon-lg" className="min-[960px]:hidden">
@@ -33,7 +35,7 @@ export default async function HeaderActions({ userId }: { userId: number }) {
         <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500" />
       </Button>
 
-      <HeaderUserMenu avatarUrl={avatarUrl ?? undefined} avatarAlt={avatarAlt} />
+      <HeaderUserMenu avatarUrl={avatarUrl} avatarAlt={avatarAlt} />
     </div>
   );
 }

src/widgets/header/ui/header-auth-slot.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import Link from "next/link";
+
+import { LogIn } from "lucide-react";
+
+import { useUserBasic } from "@/features/user/api/use-user-basic";
+import { ROUTES } from "@/shared/config/routes";
+import Button from "@/shared/ui/button/button";
+import HeaderActions from "@/widgets/header/ui/header-actions";
+
+export default function HeaderAuthSlot() {
+  const { data, isPending } = useUserBasic();
+
+  if (isPending) {
+    return <div className="h-10 w-24" aria-hidden />;
+  }
+
+  if (!data) {
+    return (
+      <Button asChild size="lg">
+        <Link href={ROUTES.login} aria-label="로그인">
+          <LogIn className="size-5" />
+          <span className="font-semibold">로그인</span>
+        </Link>
+      </Button>
+    );
+  }
+
+  return (
+    <HeaderActions
+      avatarUrl={data.userProfileUrl || undefined}
+      avatarAlt={data.username || "프로필"}
+    />
+  );
+}

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

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { LogOut, Moon, Sun, User } from "lucide-react";
 import { useTheme } from "next-themes";
 
@@ -26,6 +27,7 @@ interface HeaderUserMenuProps {
 
 export default function HeaderUserMenu({ avatarUrl, avatarAlt }: HeaderUserMenuProps) {
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { resolvedTheme, setTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
   const themeLabel = isDarkMode ? "라이트 모드" : "다크 모드";
@@ -40,6 +42,7 @@ export default function HeaderUserMenu({ avatarUrl, avatarAlt }: HeaderUserMenuP
     } catch {
       showToast.error("로그아웃에 실패했습니다. 잠시 후 다시 시도해주세요.");
     } finally {
+      queryClient.setQueryData(["user", "basic"], null);
       router.refresh();
       router.push(ROUTES.login);
     }