Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용

features/layout/components/header.tsx

@@ -1,45 +1,92 @@
+/**
+ * @file features/layout/components/header.tsx
+ * @description 애플리케이션 최상단 헤더 컴포넌트 (네비게이션, 테마, 유저 메뉴)
+ * @remarks
+ * - [레이어] Components/UI/Layout
+ * - [사용자 행동] 홈 이동, 테마 변경, 로그인/회원가입 이동, 대시보드 이동
+ * - [데이터 흐름] User Prop -> UI Conditional Rendering
+ * - [연관 파일] layout.tsx, session-timer.tsx, user-menu.tsx
+ */
+
 import Link from "next/link";
 import { User } from "@supabase/supabase-js";
 import { AUTH_ROUTES } from "@/features/auth/constants";
 import { UserMenu } from "@/features/layout/components/user-menu";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 
+import { SessionTimer } from "@/features/auth/components/session-timer";
+
 interface HeaderProps {
+  /** 현재 로그인한 사용자 정보 (없으면 null) */
   user: User | null;
+  /** 대시보드 링크 표시 여부 */
   showDashboardLink?: boolean;
 }
 
+/**
+ * 글로벌 헤더 컴포넌트
+ * @param user Supabase User 객체
+ * @param showDashboardLink 대시보드 바로가기 버튼 노출 여부
+ * @returns Header JSX
+ * @see layout.tsx - RootLayout에서 데이터 주입하여 호출
+ */
 export function Header({ user, showDashboardLink = false }: HeaderProps) {
   return (
-    <header className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b border-zinc-200 bg-white/75 px-6 backdrop-blur-md transition-all dark:border-zinc-800 dark:bg-black/75">
-      <div className="flex items-center gap-2">
-        <Link href={AUTH_ROUTES.HOME} className="flex items-center gap-2">
-          <div className="h-6 w-6 rounded-md bg-zinc-900 dark:bg-zinc-50" />
-          <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+    <header className="fixed top-0 z-40 w-full border-b border-border/40 bg-background/80 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
+      <div className="flex h-16 w-full items-center justify-between px-4 md:px-6">
+        {/* ========== 좌측: 로고 영역 ========== */}
+        <Link href={AUTH_ROUTES.HOME} className="flex items-center gap-2 group">
+          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 transition-transform duration-200 group-hover:scale-110">
+            <div className="h-5 w-5 rounded-lg bg-linear-to-br from-indigo-500 to-purple-600" />
+          </div>
+          <span className="text-xl font-bold tracking-tight text-foreground transition-colors group-hover:text-primary">
             AutoTrade
           </span>
         </Link>
-      </div>
-      <div className="flex items-center gap-4">
-        {user ? (
-          <>
-            {showDashboardLink && (
-              <Button asChild variant="ghost" size="sm">
-                <Link href={AUTH_ROUTES.DASHBOARD}>대시보드</Link>
+
+        {/* ========== 우측: 액션 버튼 영역 ========== */}
+        <div className="flex items-center gap-4">
+          {/* 테마 토글 */}
+          <ThemeToggle />
+
+          {user ? (
+            // [Case 1] 로그인 상태
+            <>
+              {/* 세션 타임아웃 타이머 */}
+              <SessionTimer />
+
+              {showDashboardLink && (
+                <Button
+                  asChild
+                  variant="ghost"
+                  size="sm"
+                  className="hidden sm:inline-flex"
+                >
+                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드</Link>
+                </Button>
+              )}
+
+              {/* 사용자 드롭다운 메뉴 */}
+              <UserMenu user={user} />
+            </>
+          ) : (
+            // [Case 2] 비로그인 상태
+            <div className="flex items-center gap-2">
+              <Button
+                asChild
+                variant="ghost"
+                size="sm"
+                className="hidden sm:inline-flex"
+              >
+                <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
               </Button>
-            )}
-            <UserMenu user={user} />
-          </>
-        ) : (
-          <>
-            <Button asChild variant="ghost" size="sm">
-              <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
-            </Button>
-            <Button asChild size="sm">
-              <Link href={AUTH_ROUTES.SIGNUP}>무료로 시작하기</Link>
-            </Button>
-          </>
-        )}
+              <Button asChild size="sm" className="rounded-full px-6">
+                <Link href={AUTH_ROUTES.SIGNUP}>시작하기</Link>
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
     </header>
   );