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

features/auth/components/session-timer.tsx

@@ -0,0 +1,70 @@
+/**
+ * @file features/auth/components/session-timer.tsx
+ * @description 헤더에 표시되는 세션 만료 카운트다운 컴포넌트
+ * @remarks
+ * - [레이어] Components/UI
+ * - [사용자 행동] 남은 시간 확인 -> 만료 임박 시 붉은색 경고
+ * - [데이터 흐름] Zustand Store -> Calculation -> UI
+ * - [연관 파일] stores/session-store.ts, features/layout/header.tsx
+ */
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSessionStore } from "@/stores/session-store";
+import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
+
+/**
+ * 세션 만료 타이머 컴포넌트
+ * 남은 시간을 mm:ss 형태로 표시 (10분 미만 시 경고 스타일)
+ * @returns 시간 표시 배지 (모바일 숨김)
+ * @remarks 1초마다 리렌더링 발생
+ * @see header.tsx - 로그인 상태일 때 헤더에 표시
+ */
+export function SessionTimer() {
+  const lastActive = useSessionStore((state) => state.lastActive);
+
+  // [State] 남은 시간 (밀리초)
+  const [timeLeft, setTimeLeft] = useState<number>(SESSION_TIMEOUT_MS);
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = Date.now();
+      const passed = now - lastActive;
+
+      // [Step 1] 남은 시간 계산 (음수 방지)
+      const remaining = Math.max(0, SESSION_TIMEOUT_MS - passed);
+      setTimeLeft(remaining);
+    };
+
+    calculateTimeLeft(); // 초기 실행
+
+    // [Step 2] 1초마다 남은 시간 갱신
+    const interval = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(interval);
+  }, [lastActive]);
+
+  // [Step 3] 시간 포맷팅 (mm:ss)
+  const minutes = Math.floor(timeLeft / 60000);
+  const seconds = Math.floor((timeLeft % 60000) / 1000);
+
+  // [Step 4] 10분 미만일 때 긴급 스타일 적용
+  const isUrgent = timeLeft < 10 * 60 * 1000;
+
+  return (
+    <div
+      className={`text-sm font-medium tabular-nums px-3 py-1.5 rounded-md border bg-background/50 backdrop-blur-md hidden md:block transition-colors ${
+        isUrgent
+          ? "text-red-500 border-red-200 bg-red-50/50 dark:bg-red-900/20 dark:border-red-800"
+          : "text-muted-foreground border-border/40"
+      }`}
+    >
+      {/* ========== 라벨 ========== */}
+      <span className="mr-2">세션 만료</span>
+      {/* ========== 시간 표시 ========== */}
+      {minutes.toString().padStart(2, "0")}:
+      {seconds.toString().padStart(2, "0")}
+    </div>
+  );
+}