Merge branch 'features/version1' into dev

feat: 브랜드 컬러 토큰 적용 및 색상 규칙 추가
Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용
2026-02-06 14:48:35 +09:00 · 2026-02-06 14:44:14 +09:00 · 2026-02-06 10:43:16 +09:00 · 2026-02-06 09:14:49 +09:00
24 changed files with 1501 additions and 293 deletions
--- a/.agent/rules/doc-rule.md
+++ b/.agent/rules/doc-rule.md
@@ -0,0 +1,333 @@
 ---
 trigger: manual
 ---
 # 역할
 시니어 프론트엔드 엔지니어이자 "문서화 전문가".
 목표: **코드 변경 없이 주석만 추가**하여 신규 개발자가 파일을 열었을 때 5분 내에 '사용자 행동 흐름'과 '데이터 흐름'을 파악할 수 있게 만든다.
 # 기술 스택
 - TypeScript + React/Next.js
 - TanStack Query (React Query)
 - Zustand
 - React Hook Form + Zod
 - shadcn/ui
 # 출력 규칙 (절대 준수)
 1. **코드 로직 변경 금지**: 타입/런타임/동작/변수명/import 변경 절대 금지
 2. **주석만 추가**: TSDoc/라인주석/블록주석만 삽입
 3. **충분한 인라인 주석**: state, handler, JSX 각 영역에 주석 추가 (과하지 않게 적당히)
 4. **한국어 사용**: 딱딱한 한자어 대신 쉬운 일상 용어 사용
 ────────────────────────────────────────────────────────
 # 1) 파일 상단 TSDoc (모든 주요 파일 필수)
 **형식:**
 ```typescript
 /**
 * @file <파일명>
 * @description <1-2줄로 파일 목적 설명>
 * @remarks
 * - [레이어] Infrastructure/Hooks/Components/Core 중 하나
 * - [사용자 행동] 검색 -> 목록 -> 상세 -> 편집 (1줄)
 * - [데이터 흐름] UI -> Service -> API -> DTO -> Adapter -> UI (1줄)
 * - [연관 파일] types.ts, useXXXQuery.ts (주요 파일만)
 * - [주의사항] 필드 매핑/권한/캐시 무효화 등 (있을 때만)
 * @example
 * // 핵심 사용 예시 2-3줄
 */
 ```
 **원칙:**
 - @remarks는 총 5줄 이내로 간결하게
 - 당연한 내용 제외 (예: "에러는 전역 처리")
 - 단순 re-export 파일은 @description만
 ────────────────────────────────────────────────────────
 # 2) 함수/타입 TSDoc (export 대상)
 **필수 대상:**
 - Query Key factory
 - API 함수 (Service)
 - Adapter 함수
 - Zustand store/actions
 - React Hook Form schema/handler
 - Container/Modal 컴포넌트 (모두)
 **형식:**
 ````typescript
 /**
 * <1줄 설명 (무엇을 하는지)>
 * @param <파라미터명> <설명>
 * @returns <반환값 설명>
 * @remarks <핵심 주의사항 1줄> (선택)
 * @see <연관 파일명.tsx의 함수명 - 어떤 역할로 호출하는지>
 */
 ## 2-1. 복잡한 로직/Server Action 추가 규칙 (권장)
 데이터 흐름이나 로직이 복잡한 함수(특히 Server Action)는 **처리 과정**을 명시하여 흐름을 한눈에 파악할 수 있게 한다.
 **형식:**
 ```typescript
 /**
 * [함수명]
 *
 * <상세 설명>
 *
 * 처리 과정:
 * 1. <데이터 추출/준비>
 * 2. <검증 로직>
 * 3. <외부 API/DB 호출>
 * 4. <분기 처리 (성공/실패)>
 * 5. <결과 반환/리다이렉트>
 *
 * @param ...
 */
 ````
 ````
 ## ⭐ @see 강화 규칙 (필수)
 모든 함수/컴포넌트에 **@see를 적극적으로 추가**하여 호출 관계를 명확히 한다.
 **@see 작성 패턴:**
 ```typescript
 /**
 * @see OpptyDetailHeader.tsx - handleApprovalClick()에서 다이얼로그 열기
 * @see useContractApproval.ts - onConfirm 콜백으로 날짜 전달
 */
 /**
 * @see LeadDetailPage.tsx - 리드 상세 페이지에서 목록 조회
 * @see LeadSearchForm.tsx - 검색 폼 제출 시 호출
 */
 ````
 **@see 필수 포함 정보:**
 1. **파일명** - 어떤 파일에서 호출하는지
 2. **함수/이벤트명** - 어떤 함수나 이벤트에서 호출하는지
 3. **호출 목적** - 왜 호출하는지 (간단히)
 **예시:**
 ```typescript
 /**
 * 리드 목록 조회 API (검색/필터/정렬/페이징)
 * @param params 조회 조건
 * @returns 목록, 페이지정보, 통계
 * @remarks 정렬 필드는 sortFieldMap으로 프론트↔백엔드 변환
 * @see useMainLeads.ts - useQuery의 queryFn으로 호출
 * @see LeadTableContainer.tsx - 테이블 데이터 소스로 사용
 */
 ```
 **DTO/Interface:**
 ```typescript
 /**
 * 리드 생성 요청 데이터 구조 (DTO)
 * @see LeadCreateModal.tsx - 리드 생성 폼 제출 시 사용
 */
 export interface CreateLeadRequest { ... }
 ```
 **Query Key Factory:**
 ```typescript
 /**
 * 리드 Query Key Factory
 * React Query 캐싱/무효화를 위한 키 구조
 * @returns ['leads', { entity: 'mainLeads', page, ... }] 형태
 * @see useLeadsQuery.ts - queryKey로 사용
 * @see useLeadMutations.ts - invalidateQueries 대상
 */
 export const leadKeys = { ... }
 /** 메인 리드 목록 키 */
 mainLeads: (...) => [...],
 ```
 ────────────────────────────────────────────────────────
 # 3) 인라인 주석 (적극 활용)
 ## 3-1. State 주석 (필수)
 모든 useState/useRef에 역할 주석 추가
 ```typescript
 // [State] 선택된 날짜 (기본값: 오늘)
 const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 // [State] 캘린더 팝오버 열림 상태
 const [isCalendarOpen, setIsCalendarOpen] = useState(false);
 // [Ref] 파일 input 참조 (프로그래밍 방식 클릭용)
 const fileInputRef = useRef<HTMLInputElement>(null);
 ```
 ## 3-2. Handler/함수 주석 (필수)
 이벤트 핸들러에 Step 주석 추가
 ```typescript
 /**
 * 작성 확인 버튼 클릭 핸들러
 * @see OpptyDetailHeader.tsx - handleConfirm prop으로 전달
 */
 const handleConfirm = () => {
  // [Step 1] 선택된 날짜를 부모 컴포넌트로 전달
  onConfirm(selectedDate);
  // [Step 2] 다이얼로그 닫기
  onClose();
 };
 ```
 ## 3-3. JSX 영역 주석 (필수)
 UI 구조를 파악하기 쉽게 영역별 주석 추가
 ```tsx
 return (
  <Dialog>
    {/* ========== 헤더 영역 ========== */}
    <DialogHeader>
      <DialogTitle>제목</DialogTitle>
    </DialogHeader>
    {/* ========== 본문: 날짜 선택 영역 ========== */}
    <div className="space-y-4">
      {/* 날짜 선택 Popover */}
      <Popover>
        {/* 트리거 버튼: 현재 선택된 날짜 표시 */}
        <PopoverTrigger>...</PopoverTrigger>
        {/* 캘린더 컨텐츠: 한국어 로케일 */}
        <PopoverContent>...</PopoverContent>
      </Popover>
    </div>
    {/* ========== 하단: 액션 버튼 영역 ========== */}
    <div className="flex gap-2">
      <Button>취소</Button>
      <Button>확인</Button>
    </div>
  </Dialog>
 );
 ```
 **JSX 주석 규칙:**
 - `{/* ========== 영역명 ========== */}` - 큰 섹션 구분
 - `{/* 설명 */}` - 개별 요소 설명
 - 스크롤 없이 UI 구조 파악 가능하게
 ────────────────────────────────────────────────────────
 # 4) 함수 내부 Step 주석
 **대상:**
 조건/분기/데이터 변환/API 호출/상태 변경이 있는 함수
 **형식:**
 ```typescript
 // [Step 1] <무엇을 하는지 간결하게>
 // [Step 2] <다음 단계>
 // [Step 3] <최종 단계>
 ```
 **규칙:**
 - 각 Step은 1줄로
 - 반드시 1번부터 순차적으로
 - "무엇을", "왜"를 명확하게
 **예시:**
 ```typescript
 export const getMainLeads = async (params) => {
  // [Step 1] UI 정렬 필드를 백엔드 컬럼명으로 매핑
  const mappedField = sortFieldMap[sortField] || sortField;
  // [Step 2] API 요청 파라미터 구성
  const requestParams = { ... };
  // [Step 3] 리드 목록 조회 API 호출
  const { data } = await axiosInstance.get(...);
  // [Step 4] 응답 데이터 검증 및 기본값 설정
  let dataList = data?.data?.list || [];
  // [Step 5] UI 모델로 변환 및 결과 반환
  return { list: dataList.map(convertToRow), ... };
 }
 ```
 ────────────────────────────────────────────────────────
 # 5) 레이어별 특수 규칙
 ## 5-1. Service/API
 - **Step 주석**: API 호출 흐름을 단계별로 명시
 - **@see**: 이 API를 호출하는 모든 훅/컴포넌트 명시
 ## 5-2. Hooks (TanStack Query)
 - **Query Key**: 반환 구조 예시 필수
 - **캐시 전략**: invalidateQueries/setQueryData 사용 이유
 - **@see**: 이 훅을 사용하는 모든 컴포넌트 명시
 ## 5-3. Adapters
 - **간단한 변환**: 주석 불필요
 - **복잡한 변환**: 입력→출력 1줄 설명 + 변환 규칙
 ## 5-4. Components (Container/Modal)
 - **상태 관리**: 어떤 state가 어떤 이벤트로 변경되는지
 - **Dialog/Modal**: open 상태 소유자, 닫힘 조건
 - **Table**: 인라인 편집, 스켈레톤 범위
 - **JSX 영역 주석**: UI 구조 파악용 영역 구분 주석 필수
 ## 5-5. Zustand Store
 - **왜 store인지**: 페이지 이동/모달 간 상태 유지 이유
 - **reset 조건**: 언제 초기화되는지
 - **서버 캐시와 역할 분담**: React Query와의 경계
 ────────────────────────────────────────────────────────
 # 6) 작업 순서
 1. 파일 레이어 판별 (Infrastructure/Hooks/UI/Core)
 2. 파일 상단 TSDoc 추가 (@see 포함)
 3. export 대상에 TSDoc 추가 (@see 필수)
 4. State/Ref에 인라인 주석 추가
 5. Handler 함수에 TSDoc + Step 주석 추가
 6. JSX 영역별 구분 주석 추가
 7. Query Key Factory에 반환 구조 예시 추가
 # 제약사항
 - **@author는 jihoon87.lee 고정**
 - **@see는 필수**: 호출 관계 명확히
 - **Step 주석은 1줄**: 간결하게
 - **JSX 주석 필수**: UI 구조 파악용
 - **@see는 파일명 + 함수명 + 역할**: 전체 경로 불필요
 # 지금부터 작업
 내가 주는 코드를 위 규칙에 맞게 "주석만" 보강하라.
--- a/.env.example
+++ b/.env.example
@@ -4,3 +4,6 @@
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 # 세션 타임아웃 (분 단위)
 NEXT_PUBLIC_SESSION_TIMEOUT_MINUTES=30
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -27,6 +27,12 @@ pm run start
 - 함수 및 컴포넌트 JSDoc에 @see 필수 (호출 파일, 함수 또는 이벤트 이름, 목적 포함)
 - 상태 정의, 이벤트 핸들러, 복잡한 JSX 로직에는 인라인 주석을 충분히 작성
 ## 브랜드 색상 규칙
 - 메인 컬러는 헤더 로고/프로필 기준의 보라 계열 `brand` 팔레트를 사용.
 - 새 UI 작성 시 `indigo/purple/pink` 하드코딩 대신 `brand-*` 토큰 사용. 예: `bg-brand-500`, `text-brand-600`, `from-brand-500 to-brand-700`.
 - 기본 액션 색(버튼/포커스)은 `primary`를 사용하고, `primary`는 `app/globals.css`의 `brand` 팔레트와 같은 톤으로 유지.
 - 색상 변경이 필요하면 컴포넌트 개별 수정보다 먼저 `app/globals.css` 토큰을 수정.
 ## 설명 방식
 - 단계별로 짧게, 예시는 1개만.
 - 사용자가 요청한 변경과 이유를 함께 설명.
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,10 +1,21 @@
-export default function AuthLayout({
+import { Header } from "@/features/layout/components/header";
 import { createClient } from "@/utils/supabase/server";
 export default async function AuthLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();
  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-linear-to-br from-gray-50 via-white to-gray-100 px-4 py-12 dark:from-black dark:via-gray-950 dark:to-gray-900">
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-linear-to-br from-gray-50 via-white to-gray-100 dark:from-black dark:via-gray-950 dark:to-gray-900">
      {/* ========== 헤더 (홈 이동용) ========== */}
      <Header user={user} />
      {/* ========== 배경 그라디언트 레이어 ========== */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,var(--tw-gradient-stops))] from-gray-200/30 via-gray-100/15 to-transparent dark:from-gray-800/30 dark:via-gray-900/20" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,var(--tw-gradient-stops))] from-gray-300/30 via-gray-200/15 to-transparent dark:from-gray-700/30 dark:via-gray-800/20" />
@@ -13,8 +24,10 @@ export default function AuthLayout({
      <div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-gray-300/20 blur-3xl dark:bg-gray-700/20" />
      <div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-gray-400/20 blur-3xl delay-700 dark:bg-gray-600/20" />
-      {/* ========== 메인 콘텐츠 영역 ========== */}
+      {/* ========== 메인 콘텐츠 영역 (중앙 정렬) ========== */}
      <main className="z-10 flex w-full flex-1 flex-col items-center justify-center px-4 py-12">
        {children}
      </main>
    </div>
  );
 }
--- a/app/(auth)/reset-password/page.tsx
+++ b/app/(auth)/reset-password/page.tsx
@@ -30,10 +30,7 @@ export default async function ResetPasswordPage({
  } = await supabase.auth.getUser();
  if (!user) {
-    const message = encodeURIComponent(
+    redirect(`/login`);
      "유효하지 않은 재설정 링크이거나 만료되었습니다. 다시 시도해 주세요.",
    );
    redirect(`/login?message=${message}`);
  }
  const { message } = params;
--- a/app/(home)/page.tsx
+++ b/app/(home)/page.tsx
@@ -1,66 +1,79 @@
 /**
 * @file app/(home)/page.tsx
 * @description 서비스 메인 랜딩 페이지
 * @remarks
 * - [레이어] Pages (Server Component)
 * - [역할] 비로그인 유저 유입, 브랜드 소개, 로그인/대시보드 유도
 * - [구성요소] Header, Hero Section (Spline 3D), Feature Section (Bento Grid)
 * - [데이터 흐름] Server Auth Check -> Client Component Props
 */
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { createClient } from "@/utils/supabase/server";
-import { UserMenu } from "@/features/layout/components/user-menu";
+import { Header } from "@/features/layout/components/header";
 import { AUTH_ROUTES } from "@/features/auth/constants";
 import { SplineScene } from "@/features/home/components/spline-scene";
 /**
 * 메인 페이지 컴포넌트 (비동기 서버 컴포넌트)
 * @returns Landing Page Elements
 * @see layout.tsx - RootLayout 내에서 렌더링
 * @see spline-scene.tsx - 3D 인터랙션
 */
 export default async function HomePage() {
  // [Step 1] 서버 사이드 인증 상태 확인
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();
  return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col overflow-x-hidden">
-      <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 dark:border-zinc-800 dark:bg-black/75">
+      <Header user={user} showDashboardLink={true} />
        <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">
            AutoTrade
          </span>
        </Link>
        <div className="flex items-center gap-4">
          {user ? (
            <>
              <Button asChild variant="ghost" size="sm">
                <Link href={AUTH_ROUTES.DASHBOARD}>대시보드</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>
            </>
          )}
        </div>
      </header>
-      <main className="flex-1">
+      <main className="flex-1 bg-background pt-16">
-        <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
+        {/* Background Pattern */}
-          <div className="container flex max-w-5xl flex-col items-center gap-4 text-center">
+        <div className="absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
-            <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+
-              투자의 미래,{" "}
+        <section className="container relative mx-auto max-w-7xl px-4 pt-12 md:pt-24 lg:pt-32">
-              <span className="text-gradient bg-linear-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
+          <div className="flex flex-col items-center justify-center text-center">
            {/* Badge */}
            <div className="mb-6 inline-flex items-center rounded-full border border-brand-200/50 bg-brand-50/50 px-3 py-1 text-sm font-medium text-brand-600 backdrop-blur-md dark:border-brand-800/50 dark:bg-brand-900/50 dark:text-brand-300">
              <span className="mr-2 flex h-2 w-2 animate-pulse rounded-full bg-brand-500"></span>
              The Future of Trading
            </div>
            <h1 className="font-heading text-4xl font-black tracking-tight text-foreground sm:text-6xl md:text-7xl lg:text-8xl">
              투자의 미래를 <br className="hidden sm:block" />
              <span className="animate-gradient-x bg-linear-to-r from-brand-500 via-brand-600 to-brand-700 bg-clip-text text-transparent underline decoration-brand-500/30 decoration-4 underline-offset-8">
                자동화하세요
              </span>
            </h1>
-            <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+
-              AutoTrade는 최첨단 알고리즘을 통해 당신의 암호화폐 투자를 24시간
+            <p className="mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl leading-relaxed break-keep">
-              관리합니다. 감정에 휘둘리지 않는 투자를 경험하세요.
+              AutoTrade는 최첨단 알고리즘을 통해 24시간 암호화폐 시장을
              분석합니다.
              <br className="hidden md:block" />
              감정 없는 데이터 기반 투자로 안정적인 수익을 경험해보세요.
            </p>
-            <div className="space-x-4">
+
            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row">
              {user ? (
-                <Button asChild size="lg" className="h-11 px-8">
+                <Button
-                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드로 이동</Link>
+                  asChild
                  size="lg"
                  className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-brand-500/20 transition-all hover:scale-105 hover:shadow-brand-500/40"
                >
                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드 바로가기</Link>
                </Button>
              ) : (
-                <Button asChild size="lg" className="h-11 px-8">
+                <Button
-                  <Link href={AUTH_ROUTES.LOGIN}>지금 시작하기</Link>
+                  asChild
                  size="lg"
                  className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-brand-500/20 transition-all hover:scale-105 hover:shadow-brand-500/40"
                >
                  <Link href={AUTH_ROUTES.LOGIN}>무료로 시작하기</Link>
                </Button>
              )}
              {!user && (
@@ -68,57 +81,144 @@ export default async function HomePage() {
                  asChild
                  variant="outline"
                  size="lg"
-                  className="h-11 px-8"
+                  className="h-14 rounded-full border-border bg-background/50 px-10 text-lg hover:bg-accent/50 backdrop-blur-sm"
                >
-                  <Link href={AUTH_ROUTES.LOGIN}>데모 체험</Link>
+                  <Link href={AUTH_ROUTES.LOGIN}>데모 체험하기</Link>
                </Button>
              )}
            </div>
            {/* Spline Scene - Centered & Wide */}
            <div className="relative mt-16 w-full max-w-5xl">
              <div className="group relative aspect-video w-full overflow-hidden rounded-3xl border border-white/20 bg-linear-to-b from-white/10 to-transparent shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20">
                {/* Glow Effect */}
                <div className="absolute -inset-1 rounded-3xl bg-linear-to-r from-brand-500 via-brand-600 to-brand-700 opacity-20 blur-2xl transition-opacity duration-500 group-hover:opacity-40" />
                <SplineScene
                  sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
                  className="relative z-10 h-full w-full rounded-2xl"
                />
              </div>
            </div>
          </div>
        </section>
-        <section className="container space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-24">
+        {/* Features Section - Bento Grid */}
-          <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
+        <section className="container mx-auto max-w-7xl px-4 py-24 sm:py-32">
-            <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
+          <div className="mb-16 text-center">
-              주요 기능
+            <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
              강력한 기능,{" "}
              <span className="text-brand-500">직관적인 경험</span>
            </h2>
-            <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
+            <p className="mt-4 text-lg text-muted-foreground">
              성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
            </p>
          </div>
-          <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-5xl md:grid-cols-3">
+
-            {[
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
-              {
+            {/* Feature 1 */}
-                title: "실시간 모니터링",
+            <div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
-                description:
+              <div className="relative z-10 flex flex-col justify-between h-full gap-6">
-                  "시장 상황을 실시간으로 분석하고 최적의 타이밍을 포착합니다.",
+                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
-              },
+                  <svg
-              {
+                    className="w-8 h-8"
-                title: "알고리즘 트레이딩",
+                    fill="none"
-                description:
+                    viewBox="0 0 24 24"
-                  "검증된 전략을 기반으로 자동으로 매수와 매도를 실행합니다.",
+                    stroke="currentColor"
              },
              {
                title: "포트폴리오 관리",
                description:
                  "자산 분배와 리스크 관리를 통해 안정적인 수익을 추구합니다.",
              },
            ].map((feature, index) => (
              <div
                key={index}
                className="relative overflow-hidden rounded-lg border bg-background p-2"
                  >
-                <div className="flex h-[180px] flex-col justify-between rounded-md p-6">
+                    <path
-                  <div className="space-y-2">
+                      strokeLinecap="round"
-                    <h3 className="font-bold">{feature.title}</h3>
+                      strokeLinejoin="round"
-                    <p className="text-sm text-muted-foreground">
+                      strokeWidth={2}
-                      {feature.description}
+                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-2">실시간 모니터링</h3>
                  <p className="text-muted-foreground text-lg leading-relaxed">
                    초당 수천 건의 트랜잭션을 실시간으로 분석합니다.
                    <br />
                    시장 변동성을 놓치지 않고 최적의 진입 시점을 포착하세요.
                  </p>
                </div>
              </div>
              <div className="absolute top-0 right-0 h-64 w-64 translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
            </div>
            {/* Feature 2 (Tall) */}
            <div className="group relative col-span-1 row-span-2 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50">
              <div className="relative z-10 flex flex-col h-full gap-6">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
                  <svg
                    className="w-8 h-8"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
                    />
                  </svg>
                </div>
                <h3 className="text-2xl font-bold">알고리즘 트레이딩</h3>
                <p className="text-muted-foreground text-lg">
                  24시간 멈추지 않는 자동 매매 시스템입니다.
                </p>
                <div className="mt-auto space-y-4 pt-4">
                  {[
                    "추세 추종 전략",
                    "변동성 돌파",
                    "AI 예측 모델",
                    "리스크 관리",
                  ].map((item) => (
                    <div
                      key={item}
                      className="flex items-center gap-3 text-sm font-medium text-foreground/80"
                    >
                      <div className="h-2 w-2 rounded-full bg-brand-500" />
                      {item}
                    </div>
                  ))}
                </div>
              </div>
              <div className="absolute bottom-0 left-0 h-64 w-64 -translate-x-1/2 translate-y-1/2 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
            </div>
            {/* Feature 3 */}
            <div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
              <div className="relative z-10 flex flex-col justify-between h-full gap-6">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
                  <svg
                    className="w-8 h-8"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-2">스마트 포트폴리오</h3>
                  <p className="text-muted-foreground text-lg leading-relaxed">
                    목표 수익률 달성 시 자동으로 이익을 실현하고, MDD를
                    최소화하여
                    <br />
                    시장이 하락할 때도 당신의 자산을 안전하게 지킵니다.
                  </p>
                </div>
              </div>
              <div className="absolute right-0 bottom-0 h-40 w-40 translate-x-1/3 translate-y-1/3 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
            </div>
          </div>
        </section>
      </main>
    </div>
--- a/app/(main)/dashboard/page.tsx
+++ b/app/(main)/dashboard/page.tsx
@@ -1,12 +1,24 @@
 /**
 * @file app/(main)/dashboard/page.tsx
 * @description 사용자 대시보드 메인 페이지 (보호된 라우트)
 * @remarks
 * - [레이어] Pages (Server Component)
 * - [역할] 사용자 자산 현황, 최근 활동, 통계 요약을 보여줌
 * - [권한] 로그인한 사용자만 접근 가능 (Middleware에 의해 보호됨)
 */
 import { createClient } from "@/utils/supabase/server";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Activity, CreditCard, DollarSign, Users } from "lucide-react";
 /**
 * 대시보드 페이지 (비동기 서버 컴포넌트)
 * @returns Dashboard Grid Layout
 */
 export default async function DashboardPage() {
  // [Step 1] 세션 확인 (Middleware가 1차 방어하지만, 데이터 접근 시 2차 확인)
  const supabase = await createClient();
-  const {
+  await supabase.auth.getUser();
    data: { user },
  } = await supabase.auth.getUser();
  return (
    <div className="flex-1 space-y-4 p-8 pt-6">
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -1,14 +1,20 @@
 import { Header } from "@/features/layout/components/header";
 import { Sidebar } from "@/features/layout/components/sidebar";
 import { createClient } from "@/utils/supabase/server";
-export default function MainLayout({
+export default async function MainLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();
  return (
    <div className="flex min-h-screen flex-col bg-zinc-50 dark:bg-black">
-      <Header />
+      <Header user={user} />
      <div className="flex flex-1">
        <Sidebar />
        <main className="flex-1 w-full p-6 md:p-8 lg:p-10">{children}</main>
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,6 +8,7 @@
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-heading: var(--font-heading);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -37,6 +38,16 @@
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-brand-50: oklch(0.97 0.02 294);
  --color-brand-100: oklch(0.93 0.05 294);
  --color-brand-200: oklch(0.87 0.1 294);
  --color-brand-300: oklch(0.79 0.15 294);
  --color-brand-400: oklch(0.7 0.2 294);
  --color-brand-500: oklch(0.62 0.24 294);
  --color-brand-600: oklch(0.56 0.26 294);
  --color-brand-700: oklch(0.49 0.24 295);
  --color-brand-800: oklch(0.4 0.2 296);
  --color-brand-900: oklch(0.33 0.14 297);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
@@ -44,6 +55,19 @@
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --animate-gradient-x: gradient-x 15s ease infinite;
  @keyframes gradient-x {
    0%, 100% {
      background-size: 200% 200%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }
 }
 :root {
@@ -54,7 +78,7 @@
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.56 0.26 294);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
@@ -65,7 +89,7 @@
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.62 0.24 294);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
@@ -73,7 +97,7 @@
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: oklch(0.56 0.26 294);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
@@ -88,8 +112,8 @@
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
+  --primary: oklch(0.56 0.26 294);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
@@ -99,7 +123,7 @@
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --ring: oklch(0.62 0.24 294);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
@@ -107,7 +131,7 @@
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: oklch(0.56 0.26 294);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,18 @@
 /**
 * @file app/layout.tsx
 * @description 애플리케이션의 최상위 루트 레이아웃 (RootLayout)
 * @remarks
 * - [레이어] Infrastructure/Layout
 * - [역할] 전역 스타일(Font/CSS), 테마(Provider), 세션 관리(Manager) 초기화
 * - [데이터 흐름] Providers -> Children
 * - [연관 파일] globals.css, theme-provider.tsx
 */
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Outfit } from "next/font/google";
 import { QueryProvider } from "@/providers/query-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { SessionManager } from "@/features/auth/components/session-manager";
 import "./globals.css";
 const geistSans = Geist({
@@ -13,22 +25,43 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });
 const outfit = Outfit({
  variable: "--font-heading",
  subsets: ["latin"],
  display: "swap",
 });
 export const metadata: Metadata = {
  title: "AutoTrade",
  description: "Automated Crypto Trading Platform",
 };
 /**
 * RootLayout 컴포넌트
 * @param children 렌더링할 자식 컴포넌트
 * @returns HTML 구조 및 전역 Provider 래퍼
 * @see theme-provider.tsx - 다크모드 지원
 * @see session-manager.tsx - 세션 타임아웃 감지
 */
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${outfit.variable} antialiased`}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <SessionManager />
          <QueryProvider>{children}</QueryProvider>
        </ThemeProvider>
      </body>
    </html>
  );
--- a/components/form-message.tsx
+++ b/components/form-message.tsx
@@ -1,16 +1,23 @@
 /**
 * @file components/form-message.tsx
 * @description 폼 제출 결과(성공/에러) 메시지를 표시하는 컴포넌트
 * @remarks
 * - [레이어] Components/UI/Feedback
 * - [기능] URL 쿼리 파라미터(`message`)를 감지하여 표시 후 URL 정리
 * - [UX] 메시지 확인 후 새로고침 시 메시지가 남지 않도록 히스토리 정리 (History API)
 */
 "use client";
 import { useEffect } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 /**
- * [FormMessage 컴포넌트]
+ * 폼 메시지 컴포넌트
- * - 로그인/회원가입 실패 메시지를 보여줍니다.
+ * @param message 표시할 메시지 텍스트
- * - [UX 개선] 메시지가 보인 후, URL에서 ?message=... 부분을 지워서
+ * @returns 메시지 박스 또는 null
 *   새로고침 시 메시지가 다시 뜨지 않도록 합니다.
 */
 export default function FormMessage({ message }: { message: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -0,0 +1,25 @@
 /**
 * @file components/theme-provider.tsx
 * @description next-themes 라이브러리를 사용한 테마 제공자 (Wrapper)
 * @remarks
 * - [레이어] Infrastructure/Provider
 * - [역할] 앱 전역에 테마 컨텍스트 주입 (Light/Dark 모드 지원)
 * - [연관 파일] layout.tsx (사용처)
 */
 "use client";
 import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 /**
 * ThemeProvider 컴포넌트
 * @param props next-themes Provider props
 * @returns NextThemesProvider 래퍼
 */
 export function ThemeProvider({
  children,
  ...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,59 @@
 /**
 * @file components/theme-toggle.tsx
 * @description 라이트/다크/시스템 테마 전환 토글 버튼
 * @remarks
 * - [레이어] Components/UI
 * - [사용자 행동] 버튼 클릭 -> 드롭다운 메뉴 -> 테마 선택 -> 즉시 반영
 * - [연관 파일] theme-provider.tsx (next-themes)
 */
 "use client";
 import * as React from "react";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 /**
 * 테마 토글 컴포넌트
 * @remarks next-themes의 useTheme 훅 사용
 * @returns Dropdown 메뉴 형태의 테마 선택기
 */
 export function ThemeToggle() {
  const { setTheme } = useTheme();
  return (
    <DropdownMenu modal={false}>
      {/* ========== 트리거 버튼 ========== */}
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          {/* 라이트 모드 아이콘 (회전 애니메이션) */}
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          {/* 다크 모드 아이콘 (회전 애니메이션) */}
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      {/* ========== 메뉴 컨텐츠 (우측 정렬) ========== */}
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
 }
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,150 @@
 /**
 * @file components/ui/alert-dialog.tsx
 * @description 알림 대화상자 (Alert Dialog) 컴포넌트 (Shadcn/ui)
 * @remarks
 * - [레이어] Components/UI/Primitive
 * - [기능] 중요한 작업 확인 컨텍스트 제공 (로그아웃 경고 등)
 * @see session-manager.tsx - 로그아웃 경고에 사용
 */
 "use client";
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
    ref={ref}
  />
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 sm:rounded-lg",
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = ({
  className,
  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className,
    )}
    {...props}
  />
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 const AlertDialogFooter = ({
  className,
  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className,
    )}
    {...props}
  />
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
 ));
 AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName;
 const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className,
    )}
    {...props}
  />
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
 };
--- a/features/auth/actions.ts
+++ b/features/auth/actions.ts
@@ -1,4 +1,14 @@
-"use server";
+/**
 * @file features/auth/actions.ts
 * @description 인증 관련 서버 액션 (Server Actions) 모음
 * @remarks
 * - [레이어] Service/API (Server Actions)
 * - [역할] 로그인, 회원가입, 로그아웃, 비밀번호 재설정 등 인증 로직 처리
 * - [데이터 흐름] Client Form -> Server Action -> Supabase Auth -> Client Redirect
 * - [연관 파일] login-form.tsx, signup-form.tsx, utils/supabase/server.ts
 */
 "use server";
 import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
@@ -17,14 +27,9 @@ import { getAuthErrorMessage } from "./errors";
 // ========================================
 /**
- * [FormData 추출 헬퍼]
+ * FormData 추출 헬퍼 (이메일/비밀번호)
- *
+ * @param formData HTML form 데이터
- * FormData에서 이메일과 비밀번호를 안전하게 추출합니다.
+ * @returns 이메일(trim 적용), 비밀번호
 * - 이메일은 trim()으로 공백 제거
 * - null/undefined 방지를 위해 기본값 "" 사용
 *
 * @param formData - HTML form에서 전달된 FormData 객체
 * @returns AuthFormData - 추출된 이메일과 비밀번호
 */
 function extractAuthData(formData: FormData): AuthFormData {
  const email = (formData.get("email") as string)?.trim() || "";
@@ -34,22 +39,13 @@ function extractAuthData(formData: FormData): AuthFormData {
 }
 /**
- * [비밀번호 강도 검증 함수]
+ * 비밀번호 강도 검증 함수
- *
+ * @param password 검증할 비밀번호
- * 안전한 비밀번호인지 검사합니다.
+ * @returns 에러 객체 또는 null
- *
+ * @remarks 최소 8자, 대/소문자, 숫자, 특수문자 포함 필수
 * 비밀번호 정책:
 * - 최소 8자 이상
 * - 대문자 1개 이상 포함
 * - 소문자 1개 이상 포함
 * - 숫자 1개 이상 포함
 * - 특수문자 1개 이상 포함 (!@#$%^&*(),.?":{}|<> 등)
 *
 * @param password - 검증할 비밀번호
 * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
 */
 function validatePassword(password: string): AuthError | null {
-  // 1. 최소 길이 체크 (8자 이상)
+  // [Step 1] 최소 길이 체크 (8자 이상)
  if (password.length < 8) {
    return {
      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT,
@@ -57,7 +53,7 @@ function validatePassword(password: string): AuthError | null {
    };
  }
-  // 2. 대문자 포함 여부
+  // [Step 2] 대문자 포함 여부
  if (!/[A-Z]/.test(password)) {
    return {
      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
@@ -65,7 +61,7 @@ function validatePassword(password: string): AuthError | null {
    };
  }
-  // 3. 소문자 포함 여부
+  // [Step 3] 소문자 포함 여부
  if (!/[a-z]/.test(password)) {
    return {
      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
@@ -73,7 +69,7 @@ function validatePassword(password: string): AuthError | null {
    };
  }
-  // 4. 숫자 포함 여부
+  // [Step 4] 숫자 포함 여부
  if (!/[0-9]/.test(password)) {
    return {
      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
@@ -81,7 +77,7 @@ function validatePassword(password: string): AuthError | null {
    };
  }
-  // 5. 특수문자 포함 여부
+  // [Step 5] 특수문자 포함 여부
  if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
    return {
      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
@@ -89,26 +85,20 @@ function validatePassword(password: string): AuthError | null {
    };
  }
-  // 모든 검증 통과
+  // [Step 6] 모든 검증 통과
  return null;
 }
 /**
- * [입력값 검증 함수]
+ * 입력값 유효성 검증 함수
- *
+ * @param email 사용자 이메일
- * 사용자가 입력한 이메일과 비밀번호의 유효성을 검사합니다.
+ * @param password 사용자 비밀번호
- *
+ * @returns 에러 객체 또는 null
- * 검증 항목:
+ * @see login - 로그인 액션에서 호출
- * 1. 빈 값 체크 - 이메일 또는 비밀번호가 비어있는지 확인
+ * @see signup - 회원가입 액션에서 호출
 * 2. 이메일 형식 - '@' 포함 여부로 간단한 형식 검증
 * 3. 비밀번호 강도 - 8자 이상, 대소문자/숫자/특수문자 포함 확인
 *
 * @param email - 사용자 이메일
 * @param password - 사용자 비밀번호
 * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
 */
 function validateAuthInput(email: string, password: string): AuthError | null {
-  // 1. 빈 값 체크
+  // [Step 1] 빈 값 체크
  if (!email || !password) {
    return {
      message: AUTH_ERROR_MESSAGES.EMPTY_FIELDS,
@@ -116,7 +106,7 @@ function validateAuthInput(email: string, password: string): AuthError | null {
    };
  }
-  // 2. 이메일 형식 체크 (간단한 @ 포함 여부 확인)
+  // [Step 2] 이메일 형식 체크 (간단한 @ 포함 여부 확인)
  if (!email.includes("@")) {
    return {
      message: AUTH_ERROR_MESSAGES.INVALID_EMAIL,
@@ -124,36 +114,19 @@ function validateAuthInput(email: string, password: string): AuthError | null {
    };
  }
-  // 3. 비밀번호 강도 체크
+  // [Step 3] 비밀번호 강도 체크
  const passwordValidation = validatePassword(password);
  if (passwordValidation) {
    return passwordValidation;
  }
-  // 모든 검증 통과
+  // [Step 4] 검증 통과
  return null;
 }
 /**
 * [에러 메시지 번역 헬퍼]
 *
 * Supabase의 영문 에러 메시지를 사용자 친화적인 한글로 변환합니다.
 *
 * @param error - Supabase에서 받은 에러 메시지
 * @returns string - 한글로 번역된 에러 메시지
 */
 // 에러 메시지는 getAuthErrorMessage로 통일합니다.
 // ========================================
 // Server Actions (서버 액션)
 // ========================================
 // 흐름 요약 (어디서 호출되는지)
 // - /login: features/auth/components/login-form.tsx -> login, signInWithGoogle, signInWithKakao
 // - /signup: features/auth/components/signup-form.tsx -> signup
 // - /forgot-password: app/forgot-password/page.tsx -> requestPasswordReset
 // - /reset-password: features/auth/components/reset-password-form.tsx -> updatePassword
 // - 메인(/): app/page.tsx -> signout
 // - OAuth: signInWithGoogle/Kakao -> Supabase -> /auth/callback 라우트
 /**
 * [로그인 액션]
@@ -164,17 +137,17 @@ function validateAuthInput(email: string, password: string): AuthError | null {
 * 1. FormData에서 이메일/비밀번호 추출
 * 2. 입력값 유효성 검증 (빈 값, 이메일 형식, 비밀번호 길이)
 * 3. Supabase Auth를 통한 로그인 시도
- * 4. 성공 시 메인 페이지로 리다이렉트
+ * 4. 로그인 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
- * 5. 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
+ * 5. 로그인 성공 시 캐시 무효화 및 메인 페이지로 리다이렉트
 *
- * @param formData - HTML form에서 전달된 FormData (이메일, 비밀번호 포함)
+ * @param formData 이메일, 비밀번호가 포함된 FormData
 * @see login-form.tsx - 로그인 폼 제출 시 호출
 */
 export async function login(formData: FormData) {
-  // 호출: features/auth/components/login-form.tsx (로그인 폼 action)
+  // [Step 1] FormData에서 이메일/비밀번호 추출
  // 1. FormData에서 이메일/비밀번호 추출
  const { email, password } = extractAuthData(formData);
-  // 2. 입력값 유효성 검증
+  // [Step 2] 입력값 유효성 검증
  const validationError = validateAuthInput(email, password);
  if (validationError) {
    return redirect(
@@ -182,21 +155,20 @@ export async function login(formData: FormData) {
    );
  }
-  // 3. Supabase 클라이언트 생성 및 로그인 시도
+  // [Step 3] Supabase 클라이언트 생성 및 로그인 시도
  const supabase = await createClient();
  const { error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
-  // 4. 로그인 실패 시 에러 처리
+  // [Step 4] 로그인 실패 시 에러 처리
  if (error) {
    const message = getAuthErrorMessage(error);
    return redirect(`/login?message=${encodeURIComponent(message)}`);
  }
-  // 5. 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
+  // [Step 5] 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
  // revalidatePath: Next.js 캐시를 무효화하여 최신 인증 상태 반영
  revalidatePath("/", "layout");
  redirect("/");
 }
@@ -214,14 +186,14 @@ export async function login(formData: FormData) {
 * 5-1. 즉시 세션 생성 시: 메인 페이지로 리다이렉트 (바로 로그인됨)
 * 5-2. 이메일 인증 필요 시: 로그인 페이지로 리다이렉트 (안내 메시지 포함)
 *
- * @param formData - HTML form에서 전달된 FormData (이메일, 비밀번호 포함)
+ * @param formData 이메일, 비밀번호가 포함된 FormData
 * @see signup-form.tsx - 회원가입 폼 제출 시 호출
 */
 export async function signup(formData: FormData) {
-  // 호출: features/auth/components/signup-form.tsx (회원가입 폼 action)
+  // [Step 1] FormData에서 이메일/비밀번호 추출
  // 1. FormData에서 이메일/비밀번호 추출
  const { email, password } = extractAuthData(formData);
-  // 2. 입력값 유효성 검증
+  // [Step 2] 입력값 유효성 검증
  const validationError = validateAuthInput(email, password);
  if (validationError) {
    return redirect(
@@ -229,35 +201,31 @@ export async function signup(formData: FormData) {
    );
  }
-  // 3. Supabase 클라이언트 생성 및 회원가입 시도
+  // [Step 3] Supabase 클라이언트 생성 및 회원가입 시도
  const supabase = await createClient();
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      // 이메일 인증 완료 후 리다이렉트될 URL
      // 로컬 개발 환경: http://localhost:3001/auth/callback
      // 프로덕션: NEXT_PUBLIC_BASE_URL 환경 변수에 설정된 주소
      emailRedirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback?auth_type=signup`,
    },
  });
-  // 4. 회원가입 실패 시 에러 처리
+  // [Step 4] 회원가입 실패 시 에러 처리
  if (error) {
    const message = getAuthErrorMessage(error);
    return redirect(`/signup?message=${encodeURIComponent(message)}`);
  }
-  // 5. 회원가입 성공 - 세션 생성 여부에 따라 분기 처리
+  // [Step 5] 회원가입 성공 처리
  if (data.session) {
-    // 5-1. 즉시 세션이 생성된 경우 (이메일 인증 불필요)
+    // [Case 1] 즉시 세션 생성됨 (이메일 인증 불필요)
    // → 바로 메인 페이지로 이동
    revalidatePath("/", "layout");
    redirect("/");
  }
-  // 5-2. 이메일 인증이 필요한 경우
+  // [Case 2] 이메일 인증 필요 (로그인 페이지로 이동)
  // → 로그인 페이지로 이동 + 안내 메시지
  revalidatePath("/", "layout");
  redirect(
    `/login?message=${encodeURIComponent("회원가입이 완료되었습니다. 이메일을 확인하여 인증을 완료해 주세요.")}`,
@@ -270,21 +238,23 @@ export async function signup(formData: FormData) {
 * 현재 세션을 종료하고 로그인 페이지로 이동합니다.
 *
 * 처리 과정:
- * 1. Supabase Auth 세션 종료
+ * 1. Supabase Auth 세션 종료 (서버 + 클라이언트 쿠키 삭제)
- * 2. 캐시 무효화하여 인증 상태 갱신
+ * 2. Next.js 캐시 무효화하여 인증 상태 갱신
 * 3. 로그인 페이지로 리다이렉트
 *
 * @see user-menu.tsx - 로그아웃 메뉴 클릭 시 호출
 * @see session-manager.tsx - 세션 타임아웃 시 호출
 */
 export async function signout() {
  // 호출: app/page.tsx (로그아웃 버튼의 formAction)
  const supabase = await createClient();
-  // 1. Supabase 세션 종료 (서버 + 클라이언트 쿠키 삭제)
+  // [Step 1] Supabase 세션 종료 (서버 + 클라이언트 쿠키 삭제)
  await supabase.auth.signOut();
-  // 2. Next.js 캐시 무효화
+  // [Step 2] Next.js 캐시 무효화
  revalidatePath("/", "layout");
-  // 3. 로그인 페이지로 리다이렉트
+  // [Step 3] 로그인 페이지로 리다이렉트
  redirect("/");
 }
@@ -292,10 +262,7 @@ export async function signout() {
 * [비밀번호 재설정 요청 액션]
 *
 * 사용자 이메일로 비밀번호 재설정 링크를 발송합니다.
- *
+ * 보안을 위해 이메일 존재 여부와 관계없이 동일한 메시지를 표시합니다.
 * 보안 고려사항:
 * - 이메일 존재 여부와 관계없이 동일한 성공 메시지 표시
 * - 이메일 열거 공격(Email Enumeration) 방지
 *
 * 처리 과정:
 * 1. FormData에서 이메일 추출
@@ -303,14 +270,14 @@ export async function signout() {
 * 3. Supabase를 통한 재설정 링크 발송
 * 4. 성공 메시지와 함께 로그인 페이지로 리다이렉트
 *
- * @param formData - 이메일이 포함된 FormData
+ * @param formData 이메일 포함
 * @see forgot-password/page.tsx - 비밀번호 찾기 폼 제출 시 호출
 */
 export async function requestPasswordReset(formData: FormData) {
-  // 호출: app/forgot-password/page.tsx (비밀번호 재설정 요청 폼)
+  // [Step 1] FormData에서 이메일 추출
  // 1. FormData에서 이메일 추출
  const email = (formData.get("email") as string)?.trim() || "";
-  // 2. 이메일 검증
+  // [Step 2] 이메일 유효성 검증
  if (!email) {
    return redirect(
      `/forgot-password?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.EMPTY_EMAIL)}`,
@@ -323,20 +290,20 @@ export async function requestPasswordReset(formData: FormData) {
    );
  }
-  // 3. Supabase를 통한 재설정 링크 발송
+  // [Step 3] Supabase를 통한 재설정 링크 발송
  const supabase = await createClient();
  const { error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/reset-password`,
  });
-  // 4. 에러 처리
+  // [Step 4] 에러 처리
  if (error) {
    console.error("Password reset error:", error.message);
    const message = getAuthErrorMessage(error);
    return redirect(`/forgot-password?message=${encodeURIComponent(message)}`);
  }
-  // 5. 성공 메시지 표시
+  // [Step 5] 성공 메시지 표시 (보안상 항상 성공 메시지 리턴 권장)
  redirect(
    `/login?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.PASSWORD_RESET_SENT)}`,
  );
@@ -349,36 +316,44 @@ export async function requestPasswordReset(formData: FormData) {
 *
 * 처리 과정:
 * 1. FormData에서 새 비밀번호 추출
- * 2. 비밀번호 길이 검증
+ * 2. 비밀번호 길이 및 강도 검증
 * 3. Supabase를 통한 비밀번호 업데이트
- * 4. 성공 시 로그인 페이지로 리다이렉트
+ * 4. 실패 시 에러 메시지 반환
 * 5. 성공 시 세션/쿠키 정리 후 로그아웃 및 캐시 무효화
 * 6. 성공 결과 반환
 *
- * @param formData - 새 비밀번호가 포함된 FormData
+ * @param formData 새 비밀번호 포함
 * @see reset-password-form.tsx - 비밀번호 재설정 폼 제출 시 호출
 */
 export async function updatePassword(formData: FormData) {
-  // 호출: features/auth/components/reset-password-form.tsx (재설정 폼)
+  // [Step 1] 새 비밀번호 추출
  const password = (formData.get("password") as string) || "";
  // [Step 2] 비밀번호 강도 검증
  const passwordValidation = validatePassword(password);
  if (passwordValidation) {
    return { ok: false, message: passwordValidation.message };
  }
  // [Step 3] Supabase를 통한 비밀번호 업데이트
  const supabase = await createClient();
  const { error } = await supabase.auth.updateUser({
    password: password,
  });
  // [Step 4] 에러 처리
  if (error) {
    const message = getAuthErrorMessage(error);
    return { ok: false, message };
  }
  // [Step 5] 세션 및 쿠키 정리 후 로그아웃
  const cookieStore = await cookies();
  cookieStore.delete(RECOVERY_COOKIE_NAME);
  await supabase.auth.signOut();
  revalidatePath("/", "layout");
  // [Step 6] 성공 응답 반환
  return {
    ok: true,
    message: AUTH_ERROR_MESSAGES.PASSWORD_RESET_SUCCESS,
@@ -390,53 +365,47 @@ export async function updatePassword(formData: FormData) {
 // ========================================
 /**
- * [OAuth 로그인 헬퍼 함수]
+ * [OAuth 로그인 공통 헬퍼]
 *
- * Google, Kakao 등의 소셜 로그인 제공자를 통해 인증을 수행합니다.
+ * 처리 과정:
 * 1. Supabase OAuth 로그인 URL 생성 (PKCE)
 * 2. 생성 중 에러 발생 시 로그인 페이지로 리다이렉트 (에러 메시지 포함)
 * 3. 성공 시 해당 OAuth 제공자 페이지(data.url)로 리다이렉트
 *
- * PKCE (Proof Key for Code Exchange) 플로우:
+ * @param provider 'google' | 'kakao'
- * 1. 이 함수가 signInWithOAuth를 호출하면 Supabase가 OAuth URL 반환
+ * @param extraOptions 추가 옵션 (예: prompt)
- * 2. 사용자를 해당 OAuth 제공자(Google/Kakao) 로그인 페이지로 리다이렉트
+ * @see signInWithGoogle
- * 3. 사용자가 로그인 및 권한 동의
+ * @see signInWithKakao
 * 4. OAuth 제공자가 /auth/callback?code=xxx로 리다이렉트
 * 5. callback 라우트에서 code를 세션으로 교환 (exchangeCodeForSession)
 * 6. 메인 페이지로 최종 리다이렉트
 *
 * 자동 회원가입:
 * - 첫 로그인 시 auth.users 테이블에 자동으로 사용자 생성
 * - 이메일, provider, metadata(프로필 사진, 이름 등) 저장
 * - 기존 사용자는 그냥 로그인
 *
 * @param provider - OAuth 제공자 ('google' | 'kakao')
 */
-async function signInWithProvider(provider: "google" | "kakao") {
+async function signInWithProvider(
-  // 호출: 아래 signInWithGoogle / signInWithKakao에서 공통 사용
+  provider: "google" | "kakao",
  extraOptions: { queryParams?: { [key: string]: string } } = {},
 ) {
  const supabase = await createClient();
-  // 1. OAuth 인증 시작
+  // [Step 1] OAuth 인증 시작 (URL 생성)
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      // PKCE 플로우를 위한 콜백 URL
      // OAuth 제공자 인증 후 이 URL로 code와 함께 리다이렉트됨
      redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback`,
      ...extraOptions,
    },
  });
-  // 2. 에러 처리
+  // [Step 2] 에러 처리
  if (error) {
    console.error(`[${provider} OAuth] 로그인 실패:`, error.message);
    const message = getAuthErrorMessage(error);
    return redirect(`/login?message=${encodeURIComponent(message)}`);
  }
-  // 3. OAuth 제공자 로그인 페이지로 리다이렉트
+  // [Step 3] OAuth 제공자 로그인 페이지로 리다이렉트
  // data.url은 Google/Kakao의 인증 페이지 URL
  if (data.url) {
    redirect(data.url);
  }
-  // 4. URL이 없는 경우 (예상치 못한 상황)
+  // [Step 4] URL 생성 실패 시 에러 처리
  redirect(
    `/login?message=${encodeURIComponent("로그인 처리 중 오류가 발생했습니다.")}`,
  );
@@ -444,36 +413,16 @@ async function signInWithProvider(provider: "google" | "kakao") {
 /**
 * [Google 로그인 액션]
- *
+ * @see login-form.tsx - 구글 로그인 버튼 클릭 시 호출
 * Google 계정으로 로그인합니다.
 * "Google로 로그인" 버튼에서 호출됩니다.
 *
 * 처리 과정:
 * 1. signInWithOAuth 호출하여 Google OAuth URL 받기
 * 2. Google 로그인 페이지로 리다이렉트
 * 3. (사용자가 Google에서 로그인 및 권한 동의)
 * 4. /auth/callback으로 돌아와서 세션 생성
 * 5. 메인 페이지로 이동
 */
 export async function signInWithGoogle() {
  // 호출: features/auth/components/login-form.tsx (Google 로그인 버튼)
  return signInWithProvider("google");
 }
 /**
 * [Kakao 로그인 액션]
- *
+ * @see login-form.tsx - 카카오 로그인 버튼 클릭 시 호출
 * Kakao 계정으로 로그인합니다.
 * "Kakao로 로그인" 버튼에서 호출됩니다.
 *
 * 처리 과정:
 * 1. signInWithOAuth 호출하여 Kakao OAuth URL 받기
 * 2. Kakao 로그인 페이지로 리다이렉트
 * 3. (사용자가 Kakao에서 로그인 및 권한 동의)
 * 4. /auth/callback으로 돌아와서 세션 생성
 * 5. 메인 페이지로 이동
 */
 export async function signInWithKakao() {
-  // 호출: features/auth/components/login-form.tsx (Kakao 로그인 버튼)
+  return signInWithProvider("kakao", { queryParams: { prompt: "login" } });
  return signInWithProvider("kakao");
 }
--- a/features/auth/components/session-manager.tsx
+++ b/features/auth/components/session-manager.tsx
@@ -0,0 +1,148 @@
 /**
 * @file features/auth/components/session-manager.tsx
 * @description 사용자 세션 타임아웃 및 자동 로그아웃 관리 컴포넌트
 * @remarks
 * - [레이어] Components/Infrastructure
 * - [사용자 행동] 로그인 -> 활동 감지 -> 비활동 -> (경고) -> 로그아웃
 * - [데이터 흐름] Event -> Zustand Store -> Timer -> Logout
 * - [연관 파일] stores/session-store.ts, features/auth/constants.ts
 */
 "use client";
 import { useEffect, useState, useCallback } from "react";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter, usePathname } from "next/navigation";
 import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useSessionStore } from "@/stores/session-store";
 import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
 // import { toast } from "sonner"; // Unused for now
 // 설정: 경고 표시 시간 (타임아웃 1분 전) - 현재 미사용 (즉시 로그아웃)
 // const WARNING_MS = 60 * 1000;
 /**
 * 세션 관리자 컴포넌트
 * 사용자 활동을 감지하여 세션 연장 및 타임아웃 처리
 * @returns 숨겨진 기능성 컴포넌트 (Global Layout에 포함)
 * @remarks RootLayout에 포함되어 전역적으로 동작
 * @see layout.tsx - RootLayout에서 렌더링
 * @see session-store.ts - 마지막 활동 시간 관리
 */
 export function SessionManager() {
  const router = useRouter();
  const pathname = usePathname();
  // [State] 타임아웃 경고 모달 표시 여부 (현재 미사용)
  const [showWarning, setShowWarning] = useState(false);
  // 인증 페이지에서는 동작하지 않음
  const isAuthPage = ["/login", "/signup", "/forgot-password"].includes(
    pathname,
  );
  const { setLastActive } = useSessionStore();
  /**
   * 로그아웃 처리 핸들러
   * @see session-timer.tsx - 타임아웃 시 동일한 로직 필요 가능성 있음
   */
  const handleLogout = useCallback(async () => {
    // [Step 1] Supabase 클라이언트 생성
    const supabase = createClient();
    // [Step 2] 서버 사이드 로그아웃 요청
    await supabase.auth.signOut();
    // [Step 3] 로컬 스토어 및 세션 정보 초기화
    useSessionStore.persist.clearStorage();
    // [Step 4] 로그인 페이지로 리다이렉트 및 메시지 표시
    router.push("/login?message=세션이 만료되었습니다. 다시 로그인해주세요.");
    router.refresh();
  }, [router]);
  useEffect(() => {
    if (isAuthPage) return;
    // 마지막 활동 시간 업데이트 함수
    const updateLastActive = () => {
      setLastActive(Date.now());
      if (showWarning) setShowWarning(false);
    };
    // [Step 1] 사용자 활동 이벤트 감지 (마우스, 키보드, 스크롤, 터치)
    const events = ["mousedown", "keydown", "scroll", "touchstart"];
    const handleActivity = () => updateLastActive();
    events.forEach((event) => window.addEventListener(event, handleActivity));
    // [Step 2] 주기적(1초)으로 세션 만료 여부 확인
    const intervalId = setInterval(async () => {
      const currentLastActive = useSessionStore.getState().lastActive;
      const now = Date.now();
      const timeSinceLastActive = now - currentLastActive;
      // 타임아웃 초과 시 로그아웃
      if (timeSinceLastActive >= SESSION_TIMEOUT_MS) {
        await handleLogout();
      }
      // 경고 로직 (현재 비활성)
      // else if (timeSinceLastActive >= TIMEOUT_MS - WARNING_MS) {
      //   setShowWarning(true);
      // }
    }, 1000);
    // [Step 3] 탭 활성화/컴퓨터 깨어남 감지 (절전 모드 대응)
    const handleVisibilityChange = async () => {
      if (!document.hidden) {
        const currentLastActive = useSessionStore.getState().lastActive;
        const now = Date.now();
        // 절전 모드 복귀 시 즉시 만료 체크
        if (now - currentLastActive >= SESSION_TIMEOUT_MS) {
          await handleLogout();
        }
      }
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      events.forEach((event) =>
        window.removeEventListener(event, handleActivity),
      );
      clearInterval(intervalId);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [pathname, isAuthPage, showWarning, handleLogout, setLastActive]);
  return (
    <AlertDialog open={showWarning} onOpenChange={setShowWarning}>
      <AlertDialogContent>
        {/* ========== 헤더: 제목 및 설명 ========== */}
        <AlertDialogHeader>
          <AlertDialogTitle>로그아웃 예정</AlertDialogTitle>
          <AlertDialogDescription>
            장시간 활동이 없어 1분 뒤 로그아웃됩니다. 계속 하시려면 아무 키나
            누르거나 클릭해주세요.
          </AlertDialogDescription>
        </AlertDialogHeader>
        {/* ========== 하단: 액션 버튼 ========== */}
        <AlertDialogFooter>
          <AlertDialogAction onClick={() => setShowWarning(false)}>
            로그인 연장
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
 }
--- a/features/auth/components/session-timer.tsx
+++ b/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>
  );
 }
--- a/features/auth/constants.ts
+++ b/features/auth/constants.ts
@@ -1,10 +1,11 @@
 /**
- * [인증 관련 상수 정의]
+ * @file features/auth/constants.ts
- *
+ * @description 인증 모듈 전반에서 사용되는 상수, 에러 메시지, 설정값 정의
- * 인증 모듈 전체에서 공통으로 사용하는 상수들을 정의합니다.
+ * @remarks
- * - 에러 메시지
+ * - [레이어] Core/Constants
- * - 라우트 경로
+ * - [사용자 행동] 로그인/회원가입/비밀번호 찾기 등 인증 전반
- * - 검증 규칙
+ * - [데이터 흐름] UI/Service -> Constants -> UI (메시지 표시)
 * - [주의사항] 환경 변수(SESSION_TIMEOUT_MINUTES)에 의존하는 상수 포함
 */
 // ========================================
@@ -220,6 +221,21 @@ export const PASSWORD_RULES = {
  REQUIRE_SPECIAL_CHAR: true,
 } as const;
 // ========================================
 // 세션 관련 상수
 // ========================================
 /**
 * 세션 타임아웃 시간 (밀리초)
 * 환경 변수에서 분 단위를 가져와 밀리초로 변환합니다.
 * 기본값: 30분
 */
 export const SESSION_TIMEOUT_MS =
  (Number(process.env.NEXT_PUBLIC_SESSION_TIMEOUT_MINUTES) || 30) * 60 * 1000;
 // 경고 표시 시간 (타임아웃 1분 전)
 export const SESSION_WARNING_MS = 60 * 1000;
 // ========================================
 // 타입 정의
 // ========================================
--- a/features/home/components/spline-scene.tsx
+++ b/features/home/components/spline-scene.tsx
@@ -0,0 +1,29 @@
 "use client";
 import Spline from "@splinetool/react-spline";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 interface SplineSceneProps {
  sceneUrl: string;
  className?: string;
 }
 export function SplineScene({ sceneUrl, className }: SplineSceneProps) {
  const [isLoading, setIsLoading] = useState(true);
  return (
    <div className={cn("relative h-full w-full", className)}>
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-zinc-900">
          <div className="h-10 w-10 animate-spin rounded-full border-4 border-zinc-200 border-t-brand-500 dark:border-zinc-800" />
        </div>
      )}
      <Spline
        scene={sceneUrl}
        onLoad={() => setIsLoading(false)}
        className="h-full w-full"
      />
    </div>
  );
 }
--- a/features/layout/components/header.tsx
+++ b/features/layout/components/header.tsx
@@ -1,34 +1,92 @@
-import { createClient } from "@/utils/supabase/server";
+/**
 * @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 { UserMenu } from "./user-menu";
+import { User } from "@supabase/supabase-js";
 import { Button } from "@/components/ui/button";
 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";
-export async function Header() {
+import { SessionTimer } from "@/features/auth/components/session-timer";
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();
 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">
+    <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 items-center gap-2">
+      <div className="flex h-16 w-full items-center justify-between px-4 md:px-6">
-        <Link href={AUTH_ROUTES.DASHBOARD} className="flex items-center gap-2">
+        {/* ========== 좌측: 로고 영역 ========== */}
-          <div className="h-6 w-6 rounded-md bg-zinc-900 dark:bg-zinc-50" />
+        <Link href={AUTH_ROUTES.HOME} className="flex items-center gap-2 group">
-          <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+          <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-brand-500 to-brand-700" />
          </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">
          {/* 테마 토글 */}
          <ThemeToggle />
          {user ? (
-          <UserMenu user={user} />
+            // [Case 1] 로그인 상태
-        ) : (
+            <>
-          <Button asChild variant="default" size="sm">
+              {/* 세션 타임아웃 타이머 */}
-            <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
+              <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>
              <Button asChild size="sm" className="rounded-full px-6">
                <Link href={AUTH_ROUTES.SIGNUP}>시작하기</Link>
              </Button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
--- a/features/layout/components/user-menu.tsx
+++ b/features/layout/components/user-menu.tsx
@@ -1,3 +1,12 @@
 /**
 * @file features/layout/components/user-menu.tsx
 * @description 사용자 프로필 드롭다운 메뉴 컴포넌트
 * @remarks
 * - [레이어] Components/UI
 * - [사용자 행동] Avatar 클릭 -> 드롭다운 오픈 -> 프로필/설정 이동 또는 로그아웃
 * - [연관 파일] header.tsx, features/auth/actions.ts (로그아웃)
 */
 "use client";
 import { signout } from "@/features/auth/actions";
@@ -15,21 +24,27 @@ import { LogOut, Settings, User as UserIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 interface UserMenuProps {
  /** Supabase User 객체 */
  user: User | null;
 }
 /**
 * 사용자 메뉴/프로필 컴포넌트 (로그인 시 헤더 노출)
 * @param user 로그인한 사용자 정보
 * @returns Avatar 버튼 및 드롭다운 메뉴
 */
 export function UserMenu({ user }: UserMenuProps) {
  const router = useRouter();
  if (!user) return null;
  return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <button className="flex items-center gap-2 outline-none">
          <Avatar className="h-8 w-8 transition-opacity hover:opacity-80">
            <AvatarImage src={user.user_metadata?.avatar_url} />
-            <AvatarFallback className="bg-linear-to-br from-indigo-500 to-purple-600 text-white text-xs font-bold">
+            <AvatarFallback className="bg-linear-to-br from-brand-500 to-brand-700 text-white text-xs font-bold">
              {user.email?.charAt(0).toUpperCase()}
            </AvatarFallback>
          </Avatar>
@@ -39,7 +54,9 @@ export function UserMenu({ user }: UserMenuProps) {
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">
-              {user.user_metadata?.name || "사용자"}
+              {user.user_metadata?.full_name ||
                user.user_metadata?.name ||
                "사용자"}
            </p>
            <p className="text-xs leading-none text-muted-foreground">
              {user.email}
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,14 @@
      "version": "0.1.0",
      "dependencies": {
        "@hookform/resolvers": "^5.2.2",
        "@radix-ui/react-alert-dialog": "^1.1.15",
        "@radix-ui/react-checkbox": "^1.3.3",
        "@radix-ui/react-dropdown-menu": "^2.1.16",
        "@radix-ui/react-label": "^2.1.8",
        "@radix-ui/react-separator": "^1.1.8",
        "@radix-ui/react-slot": "^1.2.4",
        "@splinetool/react-spline": "^4.1.0",
        "@splinetool/runtime": "^1.12.50",
        "@supabase/ssr": "^0.8.0",
        "@supabase/supabase-js": "^2.93.3",
        "@tanstack/react-query": "^5.90.20",
@@ -23,10 +26,12 @@
        "framer-motion": "^12.31.0",
        "lucide-react": "^0.563.0",
        "next": "16.1.6",
        "next-themes": "^0.4.6",
        "radix-ui": "^1.4.3",
        "react": "19.2.3",
        "react-dom": "19.2.3",
        "react-hook-form": "^7.71.1",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.4.0",
        "tailwindcss-animate": "^1.0.7",
        "tw-animate-css": "^1.4.0",
@@ -4383,6 +4388,37 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/@splinetool/react-spline": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.1.0.tgz",
      "integrity": "sha512-Y379gm17gw+1nxT/YXTCJnVIWuu7tsUH1tp/YxsYb0pZnc9Gljk7Om4Kpq7WPq0bZ4zidVCxf6xn6jgDcbHifQ==",
      "dependencies": {
        "blurhash": "2.0.5",
        "lodash.debounce": "4.0.8",
        "react-merge-refs": "2.1.1",
        "thumbhash": "0.1.1"
      },
      "peerDependencies": {
        "@splinetool/runtime": "*",
        "next": ">=14.2.0",
        "react": "*",
        "react-dom": "*"
      },
      "peerDependenciesMeta": {
        "next": {
          "optional": true
        }
      }
    },
    "node_modules/@splinetool/runtime": {
      "version": "1.12.50",
      "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.12.50.tgz",
      "integrity": "sha512-tzdG3D03WgiFD7xP47OAv03OfJmyLa0WDBf4qmQKap+RjHQXz3Uqq7P6kHMg/XXqII2eIqoD8gDKiOvgMZ8B9A==",
      "dependencies": {
        "on-change": "4.0.0",
        "semver-compare": "1.0.0"
      }
    },
    "node_modules/@standard-schema/utils": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -5752,6 +5788,12 @@
        "baseline-browser-mapping": "dist/cli.js"
      }
    },
    "node_modules/blurhash": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
      "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
      "license": "MIT"
    },
    "node_modules/brace-expansion": {
      "version": "1.1.12",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -8240,6 +8282,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
      "license": "MIT"
    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -8462,6 +8510,16 @@
        }
      }
    },
    "node_modules/next-themes": {
      "version": "0.4.6",
      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
      "license": "MIT",
      "peerDependencies": {
        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
      }
    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -8620,6 +8678,18 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/on-change": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.0.tgz",
      "integrity": "sha512-PTu7C9Jsz4b+sNMDpH0eZFTr7uxdOtoDWRnhaVNK50bgrrnW5nvbWI0jm5DG9qOoTnIhBzE9xoKVFPD9xgtbdg==",
      "license": "MIT",
      "engines": {
        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
      },
      "funding": {
        "url": "https://github.com/sindresorhus/on-change?sponsor=1"
      }
    },
    "node_modules/optionator": {
      "version": "0.9.4",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -9079,6 +9149,16 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/react-merge-refs": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
      "integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==",
      "license": "MIT",
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/gregberge"
      }
    },
    "node_modules/react-remove-scroll": {
      "version": "2.7.2",
      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -9339,6 +9419,12 @@
        "semver": "bin/semver.js"
      }
    },
    "node_modules/semver-compare": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
      "license": "MIT"
    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -9545,6 +9631,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/sonner": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
      "license": "MIT",
      "peerDependencies": {
        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
      }
    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -9799,6 +9895,12 @@
        "url": "https://opencollective.com/webpack"
      }
    },
    "node_modules/thumbhash": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
      "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==",
      "license": "MIT"
    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
--- a/package.json
+++ b/package.json
@@ -10,11 +10,14 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.2.2",
    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-checkbox": "^1.3.3",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-label": "^2.1.8",
    "@radix-ui/react-separator": "^1.1.8",
    "@radix-ui/react-slot": "^1.2.4",
    "@splinetool/react-spline": "^4.1.0",
    "@splinetool/runtime": "^1.12.50",
    "@supabase/ssr": "^0.8.0",
    "@supabase/supabase-js": "^2.93.3",
    "@tanstack/react-query": "^5.90.20",
@@ -24,10 +27,12 @@
    "framer-motion": "^12.31.0",
    "lucide-react": "^0.563.0",
    "next": "16.1.6",
    "next-themes": "^0.4.6",
    "radix-ui": "^1.4.3",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "react-hook-form": "^7.71.1",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
    "tailwindcss-animate": "^1.0.7",
    "tw-animate-css": "^1.4.0",
--- a/stores/session-store.ts
+++ b/stores/session-store.ts
@@ -0,0 +1,46 @@
 /**
 * @file stores/session-store.ts
 * @description 사용자 세션 상태(마지막 활동 시간)를 관리하는 Zustand 스토어
 * @remarks
 * - [레이어] Infrastructure/State
 * - [데이터 흐름] User Activity -> SessionStore -> LocalStorage
 * - [연관 파일] session-manager.tsx (Setter), session-timer.tsx (Getter)
 * - [주의사항] localStorage를 사용하여 탭 간 상태 공유 (partialize 적용)
 */
 import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
 /**
 * 세션 상태 인터페이스
 */
 interface SessionState {
  /** 마지막 사용자 활동 시간 (Timestamp) */
  lastActive: number;
  /** 활동 시간 갱신 함수 */
  setLastActive: (time: number) => void;
 }
 /**
 * 세션 관리 스토어 hook
 * @returns {SessionState} lastActive, setLastActive
 * @remarks persist 미들웨어를 통해 브라우저 새로고침/재접속 시에도 상태 유지
 * @see session-manager.tsx - 사용자 활동 감지 시 setLastActive 호출
 * @see session-timer.tsx - 남은 시간 계산을 위해 lastActive 구독
 */
 export const useSessionStore = create<SessionState>()(
  persist(
    (set) => ({
      // [State] 초기값: 스토어 생성 시점
      lastActive: Date.now(),
      // [Action] 활동 시간 업데이트
      setLastActive: (time) => set({ lastActive: time }),
    }),
    {
      name: "session-storage", // localStorage Key
      storage: createJSONStorage(() => localStorage), // localStorage 사용
      partialize: (state) => ({ lastActive: state.lastActive }),
    },
  ),
 );
Author	SHA1	Message	Date
jihoon87.lee	35916430b7	Merge branch 'features/version1' into dev	2026-02-06 14:48:35 +09:00
jihoon87.lee	ac7effc939	feat: 브랜드 컬러 토큰 적용 및 색상 규칙 추가	2026-02-06 14:44:14 +09:00
jihoon87.lee	d2c66a639d	Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용	2026-02-06 10:43:16 +09:00
jihoon87.lee	d31e3f9bc9	Feat: auth 관련페이지 header 적용	2026-02-06 09:14:49 +09:00