refactor(user): 유저 쿼리 키 정리 및 헤더 컴포넌트 구조 수정

- 유저 관련 queryKey를 userKeys로 중앙화
- HeaderSearch를 Suspense로 감싸도록 헤더 구성 변경
- Header 컴포넌트에서 불필요한 async 제거
- 로그아웃 시 유저 기본 쿼리를 null로 설정하는 방식 대신 유저 관련 query 전체 제거

Author: sageherb

src/features/user/api/use-my-profile.ts

@@ -1,11 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { getUserProfile, updateUserProfileImage, updateUserName } from "@/entities/user";
-import type { UserProfileType } from "@/entities/user"; // 타입 위치에 맞게 수정
+import type { UserProfileType } from "@/entities/user";
 import { showToast } from "@/shared/lib/utils/toast/show-toast";
 
 export const userKeys = {
-  profile: (userId: number) => ["user", "profile", userId] as const,
+  all: ["user"] as const,
+  basic: () => [...userKeys.all, "basic"] as const,
+  profile: (userId: number) => [...userKeys.all, "profile", userId] as const,
 };
 
 export function useUserProfile(userId: number, initialData?: UserProfileType) {

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

@@ -3,8 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 
 import { getUserBasic } from "@/entities/user";
-
-const userBasicKey = ["user", "basic"] as const;
+import { userKeys } from "@/features/user/api/use-my-profile";
 
 async function fetchUserBasic() {
   try {
@@ -16,7 +15,7 @@ async function fetchUserBasic() {
 
 export function useUserBasic() {
   return useQuery({
-    queryKey: userBasicKey,
+    queryKey: userKeys.basic(),
     queryFn: fetchUserBasic,
     retry: false,
     staleTime: 1000 * 60 * 5,

src/widgets/header/header.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react";
+
 import Image from "next/image";
 import Link from "next/link";
 
@@ -6,7 +8,7 @@ import { Container } from "@/shared/ui";
 import HeaderAuthSlot from "@/widgets/header/ui/header-auth-slot";
 import HeaderSearch from "@/widgets/header/ui/header-search";
 
-export async function Header() {
+export function Header() {
   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">
@@ -17,7 +19,9 @@ export async function Header() {
           </h1>
         </Link>
 
-        <HeaderSearch />
+        <Suspense fallback={<div className="flex-1" aria-hidden />}>
+          <HeaderSearch />
+        </Suspense>
 
         <HeaderAuthSlot />
       </Container>

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

@@ -7,6 +7,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { LogOut, Moon, Sun, User } from "lucide-react";
 import { useTheme } from "next-themes";
 
+import { userKeys } from "@/features/user/api/use-my-profile";
 import { ROUTES } from "@/shared/config/routes";
 import { showToast } from "@/shared/lib/utils/toast/show-toast";
 import {
@@ -42,7 +43,7 @@ export default function HeaderUserMenu({ avatarUrl, avatarAlt }: HeaderUserMenuP
     } catch {
       showToast.error("로그아웃에 실패했습니다. 잠시 후 다시 시도해주세요.");
     } finally {
-      queryClient.setQueryData(["user", "basic"], null);
+      queryClient.removeQueries({ queryKey: userKeys.all, exact: false });
       router.refresh();
       router.push(ROUTES.login);
     }