refactor(header): 헤더 레이아웃 정리 및 인증 슬롯 처리 개선

- 대형 화면에서 grid 기반 레이아웃을 사용하도록 헤더 구조 수정
- 반응형 정렬 및 간격을 조정해 전체 헤더 정렬 개선
- HeaderAuthSlot에서 로딩/비인증 상태 분기 로직 정리
- 로그아웃 시 유저 관련 query cache를 확실히 제거하도록 처리
- auction 섹션 설명 문구 소폭 수정

Author: sageherb

src/screens/main/model/sections.ts

@@ -11,7 +11,7 @@ export const SECTIONS = [
   {
     key: "processList",
     title: "⚡ 경매 진행 중",
-    description: "실시간 경매가 진행 중인 상품을 모아봤어요!",
+    description: "실시간 경매가 진행 중이에요!",
     variant: "live",
     moreHref: `${ROUTES.auctions}?status=PROCESS`,
   },

src/widgets/header/header.tsx

@@ -11,17 +11,19 @@ import HeaderSearch from "@/widgets/header/ui/header-search";
 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">
+      <Container className="lg:px flex h-full items-center gap-4 px-2 py-0 min-[960px]:px-3 lg:px-5 xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,540px)_minmax(0,1fr)] xl:gap-4 xl:px-7">
         <Link href="/" className="shrink-0">
           <h1 className="flex items-center gap-1">
             <Image src={Logo} alt="윈드폴 로고" sizes="40px" />
             <span className="hidden text-xl font-semibold min-[960px]:block">Windfall</span>
           </h1>
         </Link>
 
-        <Suspense fallback={<div className="flex-1" aria-hidden />}>
-          <HeaderSearch />
-        </Suspense>
+        <div className="flex-1 xl:w-full">
+          <Suspense fallback={<div className="h-10 w-full" aria-hidden />}>
+            <HeaderSearch />
+          </Suspense>
+        </div>
 
         <HeaderAuthSlot />
       </Container>

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

@@ -12,12 +12,10 @@ 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 />;
-  }
+  let content = <div className="h-10 w-24" aria-hidden />;
 
-  if (!data) {
-    return (
+  if (!isPending && !data) {
+    content = (
       <Button asChild size="lg">
         <Link href={ROUTES.login} aria-label="로그인">
           <LogIn className="size-5" />
@@ -27,10 +25,14 @@ export default function HeaderAuthSlot() {
     );
   }
 
-  return (
-    <HeaderActions
-      avatarUrl={data.userProfileUrl || undefined}
-      avatarAlt={data.username || "프로필"}
-    />
-  );
+  if (data) {
+    content = (
+      <HeaderActions
+        avatarUrl={data.userProfileUrl || undefined}
+        avatarAlt={data.username || "프로필"}
+      />
+    );
+  }
+
+  return <div className="flex h-full items-center justify-end">{content}</div>;
 }

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

@@ -43,6 +43,7 @@ export default function HeaderUserMenu({ avatarUrl, avatarAlt }: HeaderUserMenuP
     } catch {
       showToast.error("로그아웃에 실패했습니다. 잠시 후 다시 시도해주세요.");
     } finally {
+      queryClient.setQueryData(userKeys.basic(), null);
       queryClient.removeQueries({ queryKey: userKeys.all, exact: false });
       router.refresh();
       router.push(ROUTES.login);