Merge branch 'features/version1' into dev

app/(auth)/forgot-password/page.tsx
- 비밀번호 초기화 페이지 레이아웃 정리 및 카드 스타일 개선

app/(auth)/login/page.tsx
- 로그인 페이지 레이아웃 경량화 및 메시지 표시 유지

app/(auth)/reset-password/page.tsx
- 리셋 비밀번호 페이지 레이아웃 정리

app/(auth)/signup/page.tsx
- 회원가입 페이지 레이아웃 정리 및 링크 배치 개선

app/(auth)/layout.tsx
- 인증 관련 공통 배경 레이아웃 추가 (그라디언트/블러 효과 분리)

app/(main)/layout.tsx
- 메인 레이아웃 추가 (헤더, 사이드바 포함)

app/(main)/page.tsx
- 대시보드 기본 페이지 추가 (위젯/플레이스홀더)

app/page.tsx
- 기존 메인 페이지 제거 (대시보드로 대체)

components/ui/avatar.tsx
- 아바타 UI 컴포넌트 추가

components/ui/dropdown-menu.tsx
- 드롭다운 메뉴 UI 컴포넌트 추가 (Radix 기반)

features/layout/components/header.tsx
- 헤더 컴포넌트 추가 (사용자 상태 표시 및 메뉴 연결)

features/layout/components/sidebar.tsx
- 사이드바 네비게이션 컴포넌트 추가

features/layout/components/user-menu.tsx
- 사용자 드롭다운 메뉴 추가 (로그아웃 등)

features/layout/types/index.ts
- 레이아웃 관련 타입 정의 추가

package.json
- Radix 드롭다운, Framer Motion 등 UI 관련 의존성 추가

package-lock.json
- 패키지 잠금파일 갱신 및 교체

- 인증 및 메인 영역 구조를 분리하고 공통 레이아웃과 재사용 가능한 UI 컴포넌트를 도입하여 향후 페이지 확장 및 유지보수성을 개선합니다

.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는 파일명 + 함수명 + 역할**: 전체 경로 불필요
+
+# 지금부터 작업
+
+내가 주는 코드를 위 규칙에 맞게 "주석만" 보강하라.

.env.example

@@ -4,3 +4,6 @@
 
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
+
+# 세션 타임아웃 (분 단위)
+NEXT_PUBLIC_SESSION_TIMEOUT_MINUTES=30

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개만.
 - 사용자가 요청한 변경과 이유를 함께 설명.

app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,86 @@
+import FormMessage from "@/components/form-message";
+import { requestPasswordReset } from "@/features/auth/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+import { AUTH_ROUTES } from "@/features/auth/constants";
+
+/**
+ * [비밀번호 찾기 페이지]
+ *
+ * 사용자가 비밀번호를 잊어버렸을 때 재설정 링크를 요청하는 페이지입니다.
+ * - 이메일 입력 폼 제공
+ * - 서버 액션(requestPasswordReset)과 연동
+ */
+export default async function ForgotPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ message?: string }>;
+}) {
+  const { message } = await searchParams;
+
+  return (
+    <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
+      {message && <FormMessage message={message} />}
+
+      <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
+        <CardHeader className="space-y-3 text-center">
+          <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
+            <span className="text-sm font-semibold">MAIL</span>
+          </div>
+          <CardTitle className="text-3xl font-bold tracking-tight">
+            비밀번호 재설정
+          </CardTitle>
+          <CardDescription className="text-base">
+            가입한 이메일 주소를 입력하시면 비밀번호 재설정 링크를 보내드립니다.
+            <br />
+            메일을 받지 못하셨다면 스팸함을 확인해 주세요.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <form className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="text-sm font-medium">
+                이메일
+              </Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="name@example.com"
+                autoComplete="email"
+                required
+                className="h-11 transition-all duration-200"
+              />
+            </div>
+
+            <Button
+              formAction={requestPasswordReset}
+              className="h-11 w-full bg-linear-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
+            >
+              재설정 링크 보내기
+            </Button>
+          </form>
+
+          <div className="text-center">
+            <Link
+              href={AUTH_ROUTES.LOGIN}
+              className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
+            >
+              로그인 페이지로 돌아가기
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(auth)/layout.tsx

@@ -0,0 +1,33 @@
+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 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" />
+
+      {/* ========== 애니메이션 블러 효과 ========== */}
+      <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>
+  );
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,62 @@
+import FormMessage from "@/components/form-message";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import LoginForm from "@/features/auth/components/login-form";
+
+/**
+ * [로그인 페이지 컴포넌트]
+ *
+ * Modern UI with glassmorphism effect (유리 형태 디자인)
+ * - 투명 배경 + 블러 효과로 깊이감 표현
+ * - 그라디언트 배경으로 생동감 추가
+ * - shadcn/ui 컴포넌트로 일관된 디자인 시스템 유지
+ *
+ * @param searchParams - URL 쿼리 파라미터 (에러 메시지 전달용)
+ */
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ message: string }>;
+}) {
+  // URL에서 메시지 파라미터 추출 (로그인 실패 시 에러 메시지 표시)
+  const { message } = await searchParams;
+
+  return (
+    <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
+      {/* 에러/성공 메시지 표시 영역 */}
+      {/* URL 파라미터에 message가 있으면 표시됨 */}
+      <FormMessage message={message} />
+
+      {/* ========== 로그인 카드 (Glassmorphism) ========== */}
+      {/* bg-white/70: 70% 투명도의 흰색 배경 */}
+      {/* backdrop-blur-xl: 배경 블러 효과 (유리 느낌) */}
+      <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
+        {/* ========== 카드 헤더 영역 ========== */}
+        <CardHeader className="space-y-3 text-center">
+          {/* 아이콘 배경: 그라디언트 원형 */}
+          <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
+            <span className="text-4xl">👋</span>
+          </div>
+          {/* 페이지 제목 */}
+          <CardTitle className="text-3xl font-bold tracking-tight">
+            환영합니다!
+          </CardTitle>
+          {/* 페이지 설명 */}
+          <CardDescription className="text-base">
+            서비스 이용을 위해 로그인해 주세요.
+          </CardDescription>
+        </CardHeader>
+
+        {/* ========== 카드 콘텐츠 영역 (폼) ========== */}
+        <CardContent>
+          <LoginForm />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(auth)/reset-password/page.tsx

@@ -0,0 +1,61 @@
+import FormMessage from "@/components/form-message";
+import ResetPasswordForm from "@/features/auth/components/reset-password-form";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+
+/**
+ * [비밀번호 재설정 페이지]
+ *
+ * 이메일 링크를 타고 들어온 사용자가 새 비밀번호를 설정하는 페이지입니다.
+ * - URL에 포함된 토큰 검증은 Middleware 및 Auth Confirm Route에서 선행됩니다.
+ * - 유효한 세션(Recovery Mode)이 없으면 로그인 페이지로 리다이렉트됩니다.
+ */
+export default async function ResetPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ message?: string }>;
+}) {
+  const params = await searchParams;
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect(`/login`);
+  }
+
+  const { message } = params;
+
+  return (
+    <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
+      {message && <FormMessage message={message} />}
+
+      <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
+        <CardHeader className="space-y-3 text-center">
+          <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
+            <span className="text-sm font-semibold">PW</span>
+          </div>
+          <CardTitle className="text-3xl font-bold tracking-tight">
+            비밀번호 재설정
+          </CardTitle>
+          <CardDescription className="text-base">
+            새 비밀번호를 입력해 주세요.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <ResetPasswordForm />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(auth)/signup/page.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { AUTH_ROUTES } from "@/features/auth/constants";
+import FormMessage from "@/components/form-message";
+import SignupForm from "@/features/auth/components/signup-form";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default async function SignupPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ message: string }>;
+}) {
+  const { message } = await searchParams;
+
+  return (
+    <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
+      {/* 메시지 알림 */}
+      <FormMessage message={message} />
+
+      <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
+        <CardHeader className="space-y-3 text-center">
+          <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
+            <span className="text-4xl">🚀</span>
+          </div>
+          <CardTitle className="text-3xl font-bold tracking-tight">
+            회원가입
+          </CardTitle>
+          <CardDescription className="text-base">
+            몇 가지 정보만 입력하면 바로 시작할 수 있습니다.
+          </CardDescription>
+        </CardHeader>
+
+        {/* ========== 폼 영역 ========== */}
+        <CardContent className="space-y-6">
+          <SignupForm />
+
+          {/* ========== 로그인 링크 ========== */}
+          <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+            이미 계정이 있으신가요?{" "}
+            <Link
+              href={AUTH_ROUTES.LOGIN}
+              className="font-semibold text-gray-900 transition-colors hover:text-black dark:text-gray-100 dark:hover:text-white"
+            >
+              로그인 하러 가기
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(home)/page.tsx

@@ -0,0 +1,226 @@
+/**
+ * @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 { 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 overflow-x-hidden">
+      <Header user={user} showDashboardLink={true} />
+
+      <main className="flex-1 bg-background pt-16">
+        {/* Background Pattern */}
+        <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%)]" />
+
+        <section className="container relative mx-auto max-w-7xl px-4 pt-12 md:pt-24 lg:pt-32">
+          <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="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="mt-8 flex flex-col items-center gap-4 sm:flex-row">
+              {user ? (
+                <Button
+                  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-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 && (
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  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>
+                </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>
+
+        {/* Features Section - Bento Grid */}
+        <section className="container mx-auto max-w-7xl px-4 py-24 sm:py-32">
+          <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="mt-4 text-lg text-muted-foreground">
+              성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
+            {/* Feature 1 */}
+            <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="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>
+  );
+}

app/(main)/dashboard/page.tsx

@@ -0,0 +1,115 @@
+/**
+ * @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();
+  await supabase.auth.getUser();
+
+  return (
+    <div className="flex-1 space-y-4 p-8 pt-6">
+      <div className="flex items-center justify-between space-y-2">
+        <h2 className="text-3xl font-bold tracking-tight">대시보드</h2>
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">총 수익</CardTitle>
+            <DollarSign className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">$45,231.89</div>
+            <p className="text-xs text-muted-foreground">지난달 대비 +20.1%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">구독자</CardTitle>
+            <Users className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">+2350</div>
+            <p className="text-xs text-muted-foreground">지난달 대비 +180.1%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">판매량</CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">+12,234</div>
+            <p className="text-xs text-muted-foreground">지난달 대비 +19%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">현재 활동 중</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">+573</div>
+            <p className="text-xs text-muted-foreground">지난 시간 대비 +201</p>
+          </CardContent>
+        </Card>
+      </div>
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-7">
+        <Card className="col-span-4">
+          <CardHeader>
+            <CardTitle>개요</CardTitle>
+          </CardHeader>
+          <CardContent className="pl-2">
+            {/* Chart placeholder */}
+            <div className="h-[200px] w-full bg-slate-100 dark:bg-slate-800 rounded-md flex items-center justify-center text-muted-foreground">
+              차트 영역 (준비 중)
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="col-span-3">
+          <CardHeader>
+            <CardTitle>최근 활동</CardTitle>
+            <div className="text-sm text-muted-foreground">
+              이번 달 265건의 거래가 있었습니다.
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-8">
+              <div className="flex items-center">
+                <div className="ml-4 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                    비트코인 매수
+                  </p>
+                  <p className="text-sm text-muted-foreground">BTC/USDT</p>
+                </div>
+                <div className="ml-auto font-medium">+$1,999.00</div>
+              </div>
+              <div className="flex items-center">
+                <div className="ml-4 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                    이더리움 매도
+                  </p>
+                  <p className="text-sm text-muted-foreground">ETH/USDT</p>
+                </div>
+                <div className="ml-auto font-medium">+$39.00</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

app/(main)/layout.tsx

@@ -0,0 +1,24 @@
+import { Header } from "@/features/layout/components/header";
+import { Sidebar } from "@/features/layout/components/sidebar";
+import { createClient } from "@/utils/supabase/server";
+
+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 user={user} />
+      <div className="flex flex-1">
+        <Sidebar />
+        <main className="flex-1 w-full p-6 md:p-8 lg:p-10">{children}</main>
+      </div>
+    </div>
+  );
+}

app/auth/callback/route.ts

@@ -62,8 +62,27 @@ export async function GET(request: NextRequest) {
     if (!exchangeError) {
       // ----------------------------------------------------------------------
       // 3-1. 교환 성공: 리다이렉트 처리
-      // 코드 파라미터 등을 제거하고 깨끗한 URL로 이동합니다.
+      // code 교환으로 세션이 생성된 상태입니다.
       // ----------------------------------------------------------------------
+
+      // 회원가입 인증 여부 확인 (쿼리 파라미터 기반)
+      // actions.ts의 signup 함수에서 emailRedirectTo에 auth_type=signup을 추가해서 보냅니다.
+      const authType = requestUrl.searchParams.get("auth_type");
+      const isSignupVerification = authType === "signup";
+
+      // 회원가입 인증인 경우:
+      // 이메일 인증만 완료하고, 자동 로그인된 세션은 종료시킨 뒤 로그인 페이지로 보냅니다.
+      if (isSignupVerification) {
+        await supabase.auth.signOut();
+        return NextResponse.redirect(
+          `${origin}${AUTH_ROUTES.LOGIN}?message=${encodeURIComponent(
+            AUTH_ERROR_MESSAGES.EMAIL_VERIFIED_SUCCESS,
+          )}`,
+        );
+      }
+
+      // 그 외 일반적인 로그인/인증인 경우:
+      // 코드 파라미터 등을 제거하고 깨끗한 URL로 이동합니다.
       const forwardedHost = request.headers.get("x-forwarded-host"); // 로드밸런서 지원
       const isLocalEnv = process.env.NODE_ENV === "development";
 

app/forgot-password/page.tsx

@@ -1,94 +0,0 @@
-import FormMessage from "@/components/form-message";
-import { requestPasswordReset } from "@/features/auth/actions";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import Link from "next/link";
-
-/**
- * [비밀번호 찾기 페이지]
- *
- * 사용자가 비밀번호를 잊어버렸을 때 재설정 링크를 요청하는 페이지입니다.
- * - 이메일 입력 폼 제공
- * - 서버 액션(requestPasswordReset)과 연동
- */
-export default async function ForgotPasswordPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ message?: string }>;
-}) {
-  const { message } = await searchParams;
-
-  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-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="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" />
-
-      <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" />
-
-      <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
-        {message && <FormMessage message={message} />}
-
-        <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
-          <CardHeader className="space-y-3 text-center">
-            <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
-              <span className="text-sm font-semibold">MAIL</span>
-            </div>
-            <CardTitle className="text-3xl font-bold tracking-tight">
-              비밀번호 재설정
-            </CardTitle>
-            <CardDescription className="text-base">
-              가입한 이메일 주소를 입력하시면 비밀번호 재설정 링크를
-              보내드립니다.
-              <br />
-              메일을 받지 못하셨다면 스팸함을 확인해 주세요.
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent className="space-y-6">
-            <form className="space-y-5">
-              <div className="space-y-2">
-                <Label htmlFor="email" className="text-sm font-medium">
-                  이메일
-                </Label>
-                <Input
-                  id="email"
-                  name="email"
-                  type="email"
-                  placeholder="name@example.com"
-                  autoComplete="email"
-                  required
-                  className="h-11 transition-all duration-200"
-                />
-              </div>
-
-              <Button
-                formAction={requestPasswordReset}
-                className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
-              >
-                재설정 링크 보내기
-              </Button>
-            </form>
-
-            <div className="text-center">
-              <Link
-                href="/login"
-                className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
-              >
-                로그인 페이지로 돌아가기
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

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-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.56 0.26 294);
+  --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);

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: "Create Next App",
-  description: "Generated by create next app",
+  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>
   );

app/login/page.tsx

@@ -1,85 +0,0 @@
-import FormMessage from "@/components/form-message";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import LoginForm from "@/features/auth/components/login-form";
-
-/**
- * [로그인 페이지 컴포넌트]
- *
- * Modern UI with glassmorphism effect (유리 형태 디자인)
- * - 투명 배경 + 블러 효과로 깊이감 표현
- * - 그라디언트 배경으로 생동감 추가
- * - shadcn/ui 컴포넌트로 일관된 디자인 시스템 유지
- *
- * @param searchParams - URL 쿼리 파라미터 (에러 메시지 전달용)
- */
-export default async function LoginPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ message: string }>;
-}) {
-  // URL에서 메시지 파라미터 추출 (로그인 실패 시 에러 메시지 표시)
-  const { message } = await searchParams;
-
-  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-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">
-      {/* ========== 배경 그라디언트 레이어 ========== */}
-      {/* 웹 페이지 전체 배경을 그라디언트로 채웁니다 */}
-      {/* 라이트 모드: 부드러운 그레이 톤 (gray → white → gray) */}
-      {/* 다크 모드: 깊은 블랙 톤으로 고급스러운 느낌 */}
-
-      {/* 추가 그라디언트 효과 1: 우상단에서 시작하는 원형 그라디언트 */}
-      <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" />
-
-      {/* 추가 그라디언트 효과 2: 좌하단에서 시작하는 원형 그라디언트 */}
-      <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" />
-
-      {/* ========== 애니메이션 블러 효과 ========== */}
-      {/* 부드럽게 깜빡이는 원형 블러로 생동감 표현 */}
-      {/* animate-pulse: 1.5초 주기로 opacity 변화 */}
-      <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" />
-      {/* delay-700: 700ms 지연으로 교차 애니메이션 효과 */}
-      <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" />
-
-      {/* ========== 메인 콘텐츠 영역 ========== */}
-      {/* z-10: 배경보다 위에 표시 */}
-      {/* animate-in: 페이지 로드 시 fade-in + slide-up 애니메이션 */}
-      <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
-        {/* 에러/성공 메시지 표시 영역 */}
-        {/* URL 파라미터에 message가 있으면 표시됨 */}
-        <FormMessage message={message} />
-
-        {/* ========== 로그인 카드 (Glassmorphism) ========== */}
-        {/* bg-white/70: 70% 투명도의 흰색 배경 */}
-        {/* backdrop-blur-xl: 배경 블러 효과 (유리 느낌) */}
-        <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
-          {/* ========== 카드 헤더 영역 ========== */}
-          <CardHeader className="space-y-3 text-center">
-            {/* 아이콘 배경: 그라디언트 원형 */}
-            <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
-              <span className="text-4xl">👋</span>
-            </div>
-            {/* 페이지 제목 */}
-            <CardTitle className="text-3xl font-bold tracking-tight">
-              환영합니다!
-            </CardTitle>
-            {/* 페이지 설명 */}
-            <CardDescription className="text-base">
-              서비스 이용을 위해 로그인해 주세요.
-            </CardDescription>
-          </CardHeader>
-
-          {/* ========== 카드 콘텐츠 영역 (폼) ========== */}
-          <CardContent>
-            <LoginForm />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

app/page.tsx

@@ -1,114 +0,0 @@
-import Image from "next/image";
-import { signout } from "@/features/auth/actions";
-import { createClient } from "@/utils/supabase/server";
-import { Button } from "@/components/ui/button";
-
-/**
- * [메인 페이지 컴포넌트]
- *
- * 로그인한 사용자만 접근 가능 (Middleware에서 보호)
- * - 사용자 정보 표시 (이메일, 프로필 아바타)
- * - 로그아웃 버튼 제공
- */
-export default async function Home() {
-  // 현재 로그인한 사용자 정보 가져오기
-  // Middleware에서 이미 인증을 확인했으므로 여기서는 user가 항상 존재함
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        {/* ========== 헤더: 로그인 정보 및 로그아웃 버튼 ========== */}
-        <div className="flex w-full items-center justify-between">
-          {/* 사용자 프로필 표시 */}
-          <div className="flex items-center gap-3">
-            {/* 프로필 아바타: 이메일 첫 글자 표시 */}
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white font-semibold">
-              {user?.email?.charAt(0).toUpperCase() || "U"}
-            </div>
-            {/* 이메일 및 로그인 상태 텍스트 */}
-            <div>
-              <p className="text-sm font-medium text-gray-900 dark:text-white">
-                {user?.email || "사용자"}
-              </p>
-              <p className="text-xs text-gray-500 dark:text-gray-400">
-                로그인됨
-              </p>
-            </div>
-          </div>
-          {/* 로그아웃 폼 */}
-          {/* formAction: 서버 액션(signout)을 호출하여 로그아웃 처리 */}
-          <form>
-            <Button
-              formAction={signout}
-              variant="outline"
-              size="sm"
-              className="text-sm"
-            >
-              로그아웃
-            </Button>
-          </form>
-        </div>
-
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}

app/reset-password/page.tsx

@@ -1,72 +0,0 @@
-import FormMessage from "@/components/form-message";
-import ResetPasswordForm from "@/features/auth/components/reset-password-form";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { createClient } from "@/utils/supabase/server";
-import { redirect } from "next/navigation";
-
-/**
- * [비밀번호 재설정 페이지]
- *
- * 이메일 링크를 타고 들어온 사용자가 새 비밀번호를 설정하는 페이지입니다.
- * - URL에 포함된 토큰 검증은 Middleware 및 Auth Confirm Route에서 선행됩니다.
- * - 유효한 세션(Recovery Mode)이 없으면 로그인 페이지로 리다이렉트됩니다.
- */
-export default async function ResetPasswordPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ message?: string }>;
-}) {
-  const params = await searchParams;
-  const supabase = await createClient();
-
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
-  if (!user) {
-    const message = encodeURIComponent(
-      "유효하지 않은 재설정 링크이거나 만료되었습니다. 다시 시도해 주세요.",
-    );
-    redirect(`/login?message=${message}`);
-  }
-
-  const { message } = params;
-
-  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-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="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" />
-
-      <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" />
-
-      <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
-        {message && <FormMessage message={message} />}
-
-        <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
-          <CardHeader className="space-y-3 text-center">
-            <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
-              <span className="text-sm font-semibold">PW</span>
-            </div>
-            <CardTitle className="text-3xl font-bold tracking-tight">
-              비밀번호 재설정
-            </CardTitle>
-            <CardDescription className="text-base">
-              새 비밀번호를 입력해 주세요.
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent className="space-y-6">
-            <ResetPasswordForm />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

app/signup/page.tsx

@@ -1,65 +0,0 @@
-import Link from "next/link";
-import FormMessage from "@/components/form-message";
-import SignupForm from "@/features/auth/components/signup-form";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-export default async function SignupPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ message: string }>;
-}) {
-  const { message } = await searchParams;
-
-  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-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="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" />
-
-      {/* 애니메이션 블러 효과 */}
-      <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" />
-
-      <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
-        {/* 메시지 알림 */}
-        <FormMessage message={message} />
-
-        <Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
-          <CardHeader className="space-y-3 text-center">
-            <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
-              <span className="text-4xl">🚀</span>
-            </div>
-            <CardTitle className="text-3xl font-bold tracking-tight">
-              회원가입
-            </CardTitle>
-            <CardDescription className="text-base">
-              몇 가지 정보만 입력하면 바로 시작할 수 있습니다.
-            </CardDescription>
-          </CardHeader>
-
-          {/* ========== 폼 영역 ========== */}
-          <CardContent className="space-y-6">
-            <SignupForm />
-
-            {/* ========== 로그인 링크 ========== */}
-            <p className="text-center text-sm text-gray-600 dark:text-gray-400">
-              이미 계정이 있으신가요?{" "}
-              <Link
-                href="/login"
-                className="font-semibold text-gray-900 transition-colors hover:text-black dark:text-gray-100 dark:hover:text-white"
-              >
-                로그인 하러 가기
-              </Link>
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

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 컴포넌트]
- * - 로그인/회원가입 실패 메시지를 보여줍니다.
- * - [UX 개선] 메시지가 보인 후, URL에서 ?message=... 부분을 지워서
- *   새로고침 시 메시지가 다시 뜨지 않도록 합니다.
+ * 폼 메시지 컴포넌트
+ * @param message 표시할 메시지 텍스트
+ * @returns 메시지 박스 또는 null
  */
 export default function FormMessage({ message }: { message: string }) {
-  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 

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>;
+}

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>
+  );
+}

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,
+};

components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

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에서 이메일과 비밀번호를 안전하게 추출합니다.
- * - 이메일은 trim()으로 공백 제거
- * - null/undefined 방지를 위해 기본값 "" 사용
- *
- * @param formData - HTML form에서 전달된 FormData 객체
- * @returns AuthFormData - 추출된 이메일과 비밀번호
+ * FormData 추출 헬퍼 (이메일/비밀번호)
+ * @param formData HTML form 데이터
+ * @returns 이메일(trim 적용), 비밀번호
  */
 function extractAuthData(formData: FormData): AuthFormData {
   const email = (formData.get("email") as string)?.trim() || "";
@@ -34,22 +39,13 @@ function extractAuthData(formData: FormData): AuthFormData {
 }
 
 /**
- * [비밀번호 강도 검증 함수]
- *
- * 안전한 비밀번호인지 검사합니다.
- *
- * 비밀번호 정책:
- * - 최소 8자 이상
- * - 대문자 1개 이상 포함
- * - 소문자 1개 이상 포함
- * - 숫자 1개 이상 포함
- * - 특수문자 1개 이상 포함 (!@#$%^&*(),.?":{}|<> 등)
- *
- * @param password - 검증할 비밀번호
- * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
+ * 비밀번호 강도 검증 함수
+ * @param password 검증할 비밀번호
+ * @returns 에러 객체 또는 null
+ * @remarks 최소 8자, 대/소문자, 숫자, 특수문자 포함 필수
  */
 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;
 }
 
 /**
- * [입력값 검증 함수]
- *
- * 사용자가 입력한 이메일과 비밀번호의 유효성을 검사합니다.
- *
- * 검증 항목:
- * 1. 빈 값 체크 - 이메일 또는 비밀번호가 비어있는지 확인
- * 2. 이메일 형식 - '@' 포함 여부로 간단한 형식 검증
- * 3. 비밀번호 강도 - 8자 이상, 대소문자/숫자/특수문자 포함 확인
- *
- * @param email - 사용자 이메일
- * @param password - 사용자 비밀번호
- * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
+ * 입력값 유효성 검증 함수
+ * @param email 사용자 이메일
+ * @param password 사용자 비밀번호
+ * @returns 에러 객체 또는 null
+ * @see login - 로그인 액션에서 호출
+ * @see signup - 회원가입 액션에서 호출
  */
 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. 성공 시 메인 페이지로 리다이렉트
- * 5. 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
+ * 4. 로그인 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
+ * 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)
-  // 1. FormData에서 이메일/비밀번호 추출
+  // [Step 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. 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
-  // revalidatePath: Next.js 캐시를 무효화하여 최신 인증 상태 반영
+  // [Step 5] 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
   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)
-  // 1. FormData에서 이메일/비밀번호 추출
+  // [Step 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`,
+      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,32 +238,31 @@ export async function signup(formData: FormData) {
  * 현재 세션을 종료하고 로그인 페이지로 이동합니다.
  *
  * 처리 과정:
- * 1. Supabase Auth 세션 종료
- * 2. 캐시 무효화하여 인증 상태 갱신
+ * 1. Supabase Auth 세션 종료 (서버 + 클라이언트 쿠키 삭제)
+ * 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. 로그인 페이지로 리다이렉트
-  redirect("/login");
+  // [Step 3] 로그인 페이지로 리다이렉트
+  redirect("/");
 }
 
 /**
  * [비밀번호 재설정 요청 액션]
  *
  * 사용자 이메일로 비밀번호 재설정 링크를 발송합니다.
- *
- * 보안 고려사항:
- * - 이메일 존재 여부와 관계없이 동일한 성공 메시지 표시
- * - 이메일 열거 공격(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 (비밀번호 재설정 요청 폼)
-  // 1. FormData에서 이메일 추출
+  // [Step 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) 플로우:
- * 1. 이 함수가 signInWithOAuth를 호출하면 Supabase가 OAuth URL 반환
- * 2. 사용자를 해당 OAuth 제공자(Google/Kakao) 로그인 페이지로 리다이렉트
- * 3. 사용자가 로그인 및 권한 동의
- * 4. OAuth 제공자가 /auth/callback?code=xxx로 리다이렉트
- * 5. callback 라우트에서 code를 세션으로 교환 (exchangeCodeForSession)
- * 6. 메인 페이지로 최종 리다이렉트
- *
- * 자동 회원가입:
- * - 첫 로그인 시 auth.users 테이블에 자동으로 사용자 생성
- * - 이메일, provider, metadata(프로필 사진, 이름 등) 저장
- * - 기존 사용자는 그냥 로그인
- *
- * @param provider - OAuth 제공자 ('google' | 'kakao')
+ * @param provider 'google' | 'kakao'
+ * @param extraOptions 추가 옵션 (예: prompt)
+ * @see signInWithGoogle
+ * @see signInWithKakao
  */
-async function signInWithProvider(provider: "google" | "kakao") {
-  // 호출: 아래 signInWithGoogle / signInWithKakao에서 공통 사용
+async function signInWithProvider(
+  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 제공자 로그인 페이지로 리다이렉트
-  // data.url은 Google/Kakao의 인증 페이지 URL
+  // [Step 3] OAuth 제공자 로그인 페이지로 리다이렉트
   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 로그인 액션]
- *
- * Google 계정으로 로그인합니다.
- * "Google로 로그인" 버튼에서 호출됩니다.
- *
- * 처리 과정:
- * 1. signInWithOAuth 호출하여 Google OAuth URL 받기
- * 2. Google 로그인 페이지로 리다이렉트
- * 3. (사용자가 Google에서 로그인 및 권한 동의)
- * 4. /auth/callback으로 돌아와서 세션 생성
- * 5. 메인 페이지로 이동
+ * @see login-form.tsx - 구글 로그인 버튼 클릭 시 호출
  */
 export async function signInWithGoogle() {
-  // 호출: features/auth/components/login-form.tsx (Google 로그인 버튼)
   return signInWithProvider("google");
 }
 
 /**
  * [Kakao 로그인 액션]
- *
- * Kakao 계정으로 로그인합니다.
- * "Kakao로 로그인" 버튼에서 호출됩니다.
- *
- * 처리 과정:
- * 1. signInWithOAuth 호출하여 Kakao OAuth URL 받기
- * 2. Kakao 로그인 페이지로 리다이렉트
- * 3. (사용자가 Kakao에서 로그인 및 권한 동의)
- * 4. /auth/callback으로 돌아와서 세션 생성
- * 5. 메인 페이지로 이동
+ * @see login-form.tsx - 카카오 로그인 버튼 클릭 시 호출
  */
 export async function signInWithKakao() {
-  // 호출: features/auth/components/login-form.tsx (Kakao 로그인 버튼)
-  return signInWithProvider("kakao");
+  return signInWithProvider("kakao", { queryParams: { prompt: "login" } });
 }

features/auth/components/login-form.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { AUTH_ROUTES } from "@/features/auth/constants";
 import {
   login,
   signInWithGoogle,
@@ -122,7 +123,7 @@ export default function LoginForm() {
           </div>
           {/* 비밀번호 찾기 링크 */}
           <Link
-            href="/forgot-password"
+            href={AUTH_ROUTES.FORGOT_PASSWORD}
             className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
           >
             비밀번호 찾기
@@ -150,7 +151,7 @@ export default function LoginForm() {
         <p className="text-center text-sm text-gray-600 dark:text-gray-400">
           계정이 없으신가요?{" "}
           <Link
-            href="/signup"
+            href={AUTH_ROUTES.SIGNUP}
             className="font-semibold text-gray-900 transition-colors hover:text-black dark:text-gray-100 dark:hover:text-white"
           >
             회원가입 하기

features/auth/components/reset-password-form.tsx

@@ -128,7 +128,7 @@ export default function ResetPasswordForm() {
       <Button
         type="submit"
         disabled={isLoading}
-        className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
+        className="h-11 w-full bg-linear-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
       >
         {isLoading ? (
           <span className="flex items-center gap-2">

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>
+  );
+}

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>
+  );
+}

features/auth/constants.ts

@@ -1,10 +1,11 @@
 /**
- * [인증 관련 상수 정의]
- *
- * 인증 모듈 전체에서 공통으로 사용하는 상수들을 정의합니다.
- * - 에러 메시지
- * - 라우트 경로
- * - 검증 규칙
+ * @file features/auth/constants.ts
+ * @description 인증 모듈 전반에서 사용되는 상수, 에러 메시지, 설정값 정의
+ * @remarks
+ * - [레이어] Core/Constants
+ * - [사용자 행동] 로그인/회원가입/비밀번호 찾기 등 인증 전반
+ * - [데이터 흐름] UI/Service -> Constants -> UI (메시지 표시)
+ * - [주의사항] 환경 변수(SESSION_TIMEOUT_MINUTES)에 의존하는 상수 포함
  */
 
 // ========================================
@@ -40,6 +41,7 @@ export const AUTH_ERROR_MESSAGES = {
 
   // === 인증 링크 ===
   INVALID_AUTH_LINK: "인증 링크가 만료되었거나 유효하지 않습니다.",
+  EMAIL_VERIFIED_SUCCESS: "이메일 인증이 완료되었습니다. 로그인해 주세요.",
 
   // === 소셜 로그인 (OAuth) 관련 ===
   OAUTH_ACCESS_DENIED: "로그인이 취소되었습니다.",
@@ -106,8 +108,10 @@ export const AUTH_ERROR_CODE_MESSAGES = {
   mfa_verification_failed: "MFA 검증에 실패했습니다.",
   mfa_verification_rejected: "MFA 검증이 거부되었습니다.",
   mfa_verified_factor_exists: "이미 검증된 전화 MFA가 존재합니다.",
-  mfa_web_authn_enroll_not_enabled: "WebAuthn MFA 등록이 비활성화되어 있습니다.",
-  mfa_web_authn_verify_not_enabled: "WebAuthn MFA 검증이 비활성화되어 있습니다.",
+  mfa_web_authn_enroll_not_enabled:
+    "WebAuthn MFA 등록이 비활성화되어 있습니다.",
+  mfa_web_authn_verify_not_enabled:
+    "WebAuthn MFA 검증이 비활성화되어 있습니다.",
   no_authorization: "Authorization 헤더가 필요합니다.",
   not_admin: "관리자 권한이 없습니다.",
   oauth_provider_not_supported: "OAuth 제공자가 비활성화되어 있습니다.",
@@ -177,6 +181,7 @@ export const AUTH_ROUTES = {
   AUTH_CONFIRM: "/auth/confirm",
   AUTH_CALLBACK: "/auth/callback",
   HOME: "/",
+  DASHBOARD: "/dashboard",
 } as const;
 
 /**
@@ -216,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;
+
 // ========================================
 // 타입 정의
 // ========================================

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>
+  );
+}

features/layout/components/header.tsx

@@ -0,0 +1,93 @@
+/**
+ * @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="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-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 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>
+              <Button asChild size="sm" className="rounded-full px-6">
+                <Link href={AUTH_ROUTES.SIGNUP}>시작하기</Link>
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

features/layout/components/sidebar.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { BarChart2, Home, Settings, User, Wallet } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { MenuItem } from "../types";
+
+const MENU_ITEMS: MenuItem[] = [
+  {
+    title: "대시보드",
+    href: "/",
+    icon: Home,
+    variant: "default",
+    matchExact: true,
+  },
+  {
+    title: "자동매매",
+    href: "/trade",
+    icon: BarChart2,
+    variant: "ghost",
+  },
+  {
+    title: "자산현황",
+    href: "/assets",
+    icon: Wallet,
+    variant: "ghost",
+  },
+  {
+    title: "프로필",
+    href: "/profile",
+    icon: User,
+    variant: "ghost",
+  },
+  {
+    title: "설정",
+    href: "/settings",
+    icon: Settings,
+    variant: "ghost",
+  },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="fixed left-0 top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r border-zinc-200 bg-white py-6 pl-2 pr-6 dark:border-zinc-800 dark:bg-black md:sticky md:block md:w-64 lg:w-72">
+      <div className="flex flex-col space-y-1">
+        {MENU_ITEMS.map((item) => {
+          const isActive = item.matchExact
+            ? pathname === item.href
+            : pathname.startsWith(item.href);
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 transition-colors",
+                isActive
+                  ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50"
+                  : "text-zinc-500 dark:text-zinc-400",
+              )}
+            >
+              <item.icon
+                className={cn(
+                  "mr-3 h-5 w-5 shrink-0 transition-colors",
+                  isActive
+                    ? "text-zinc-900 dark:text-zinc-50"
+                    : "text-zinc-400 group-hover:text-zinc-900 dark:text-zinc-500 dark:group-hover:text-zinc-50",
+                )}
+              />
+              {item.title}
+            </Link>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}

features/layout/components/user-menu.tsx

@@ -0,0 +1,87 @@
+/**
+ * @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";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { User } from "@supabase/supabase-js";
+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 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-brand-500 to-brand-700 text-white text-xs font-bold">
+              {user.email?.charAt(0).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {user.user_metadata?.full_name ||
+                user.user_metadata?.name ||
+                "사용자"}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => router.push("/profile")}>
+          <UserIcon className="mr-2 h-4 w-4" />
+          <span>프로필</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => router.push("/settings")}>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>설정</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <form action={signout}>
+          <DropdownMenuItem asChild>
+            <button className="w-full text-red-600 dark:text-red-400">
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>로그아웃</span>
+            </button>
+          </DropdownMenuItem>
+        </form>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

features/layout/types/index.ts

@@ -0,0 +1,9 @@
+import { LucideIcon } from "lucide-react";
+
+export interface MenuItem {
+  title: string;
+  href: string;
+  icon: LucideIcon;
+  variant: "default" | "ghost";
+  matchExact?: boolean;
+}

package.json

@@ -10,21 +10,29 @@
   },
   "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",
     "@tanstack/react-query-devtools": "^5.91.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "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",
@@ -32,6 +40,7 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.1",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",

playwright.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: "./tests/e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:3001",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:3001",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

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 }),
+    },
+  ),
+);

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

tests/e2e/auth.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Authentication Flow", () => {
+  test("Guest should see Landing Page", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveTitle(/AutoTrade/i);
+    await expect(
+      page.getByRole("heading", { name: "투자의 미래, 자동화하세요" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "로그인" }).first(),
+    ).toBeVisible();
+  });
+
+  test("Guest trying to access /dashboard should be redirected to /login", async ({
+    page,
+  }) => {
+    await page.goto("/dashboard");
+    await expect(page).toHaveURL(/\/login/);
+    await expect(page.getByRole("button", { name: "로그인" })).toBeVisible();
+  });
+
+  test("Login page should load correctly", async ({ page }) => {
+    await page.goto("/login");
+    await expect(page.getByLabel("이메일", { exact: true })).toBeVisible();
+    await expect(page.getByLabel("비밀번호")).toBeVisible();
+    await expect(page.getByRole("button", { name: "로그인" })).toBeVisible();
+  });
+});

utils/supabase/middleware.ts

@@ -9,17 +9,24 @@ import {
 /**
  * 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
  */
+// 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
 export async function updateSession(request: NextRequest) {
+  // 1. 초기 Supabase 응답 객체 생성
+  // request 헤더 등을 포함하여 초기 상태 설정
   let supabaseResponse = NextResponse.next({ request });
 
+  // 2. Supabase 클라이언트 생성 (SSR 전용)
+  // 쿠키 조작을 위한 setAll/getAll 메서드 오버라이딩 포함
   const supabase = createServerClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
     {
       cookies: {
+        // 쿠키 가져오기
         getAll() {
           return request.cookies.getAll();
         },
+        // 쿠키 설정하기 (요청 및 응답 객체 모두에 적용)
         setAll(cookiesToSet) {
           cookiesToSet.forEach(({ name, value }) =>
             request.cookies.set(name, value),
@@ -33,13 +40,18 @@ export async function updateSession(request: NextRequest) {
     },
   );
 
+  // 3. 현재 사용자 정보 조회
+  // getUser() 사용이 보안상 안전함 (getSession보다 권장됨)
   const {
     data: { user },
   } = await supabase.auth.getUser();
 
+  // 4. 현재 요청 URL과 복구용 쿠키 확인
   const { pathname } = request.nextUrl;
   const recoveryCookie = request.cookies.get(RECOVERY_COOKIE_NAME)?.value;
 
+  // 5. 복구 쿠키가 있는데 로그인이 안 된 경우 (세션 만료 등)
+  // 로그인 페이지로 강제 리다이렉트 후 복구 쿠키 삭제
   if (recoveryCookie && !user) {
     const response = NextResponse.redirect(
       new URL(AUTH_ROUTES.LOGIN, request.url),
@@ -48,24 +60,39 @@ export async function updateSession(request: NextRequest) {
     return response;
   }
 
+  // 6. 현재 페이지가 비밀번호 재설정 관련 라우트인지 확인
   const isRecoveryRoute =
     pathname.startsWith(AUTH_ROUTES.RESET_PASSWORD) ||
     pathname.startsWith(AUTH_ROUTES.AUTH_CONFIRM);
 
+  // 7. 복구 쿠키가 있는데 재설정 라우트가 아닌 다른 곳으로 가려는 경우
+  // 강제로 비밀번호 재설정 페이지로 리다이렉트 (보안 조치)
   if (recoveryCookie && !isRecoveryRoute) {
     return NextResponse.redirect(
       new URL(AUTH_ROUTES.RESET_PASSWORD, request.url),
     );
   }
 
+  // 8. 현재 페이지가 로그인/회원가입 등 공용 인증 페이지인지 확인
   const isAuthPage = PUBLIC_AUTH_PAGES.some((page) =>
     pathname.startsWith(page),
   );
 
-  if (!user && !isAuthPage) {
+  // 9. 비로그인 사용자 접근 제어
+  // - 유저가 없음 (!user)
+  // - 인증 페이지 아님 (!isAuthPage)
+  // - 메인 페이지(홈) 아님 (pathname !== AUTH_ROUTES.HOME)
+  // -> 로그인 페이지로 리다이렉트
+  if (!user && !isAuthPage && pathname !== AUTH_ROUTES.HOME) {
     return NextResponse.redirect(new URL(AUTH_ROUTES.LOGIN, request.url));
   }
 
+  // 10. 로그인 사용자 접근 제어 (인증 페이지 접근 시)
+  // - 유저가 있음 (user)
+  // - 인증 페이지 접근 시도 (isAuthPage) - 예: 이미 로그인했는데 /login 접근
+  // - 비밀번호 재설정은 아님
+  // - 복구 모드 아님
+  // -> 메인 페이지로 리다이렉트
   if (
     user &&
     isAuthPage &&
@@ -75,5 +102,6 @@ export async function updateSession(request: NextRequest) {
     return NextResponse.redirect(new URL(AUTH_ROUTES.HOME, request.url));
   }
 
+  // 11. 최종 응답 반환 (변경된 쿠키 등이 포함됨)
   return supabaseResponse;
 }