Merge branch 'features/version1' into dev

feat: 브랜드 컬러 토큰 적용 및 색상 규칙 추가
Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용
2026-02-06 14:48:35 +09:00 · 2026-02-06 14:44:14 +09:00 · 2026-02-06 10:43:16 +09:00 · 2026-02-06 09:14:49 +09:00 · 2026-02-05 16:36:42 +09:00 · 2026-02-05 15:56:41 +09:00
79 changed files with 16217 additions and 1 deletions
--- a/.agent/rules/auto-trade.md
+++ b/.agent/rules/auto-trade.md
@@ -0,0 +1,34 @@
+---
+trigger: always_on
+---
+
+# 개발 기본 원칙
+
+## 언어 및 커뮤니케이션
+
+- 모든 응답은 **한글**로 작성
+- 코드 주석, 문서, 플랜, 결과물 모두 한글 사용
+
+## 개발 도구 활용
+
+- **Skills**: 프로젝트에 적합한 스킬을 적극 활용하여 베스트 프랙티스 적용
+- **MCP 서버**:
+  - `sequential-thinking`: 복잡한 문제 해결 시 단계별 사고 과정 정리
+  - `tavily-remote`: 최신 기술 트렌드 및 문서 검색
+  - `playwright` / `playwriter`: 브라우저 자동화 테스트
+  - `next-devtools`: Next.js 프로젝트 개발 및 디버깅
+  - `context7`: 라이브러리/프레임워크 공식 문서 참조
+  - `supabase-mcp-server`: Supabase 프로젝트 관리 및 쿼리
+
+## 코드 품질
+
+- 린트 에러는 즉시 수정
+- React 베스트 프랙티스 준수 (예: useEffect 내 setState 지양)
+- TypeScript 타입 안정성 유지
+- 접근성(a11y) 고려한 UI 구현
+
+## 테스트 및 검증
+
+- 브라우저 테스트는 MCP Playwright 활용
+- 변경 사항은 반드시 로컬에서 검증 후 완료 보고
+- 에러 발생 시 근본 원인 파악 및 해결
--- a/.agent/rules/doc-rule.md
+++ b/.agent/rules/doc-rule.md
@@ -0,0 +1,333 @@
+---
+trigger: manual
+---
+
+# 역할
+
+시니어 프론트엔드 엔지니어이자 "문서화 전문가".
+목표: **코드 변경 없이 주석만 추가**하여 신규 개발자가 파일을 열었을 때 5분 내에 '사용자 행동 흐름'과 '데이터 흐름'을 파악할 수 있게 만든다.
+
+# 기술 스택
+
+- TypeScript + React/Next.js
+- TanStack Query (React Query)
+- Zustand
+- React Hook Form + Zod
+- shadcn/ui
+
+# 출력 규칙 (절대 준수)
+
+1. **코드 로직 변경 금지**: 타입/런타임/동작/변수명/import 변경 절대 금지
+2. **주석만 추가**: TSDoc/라인주석/블록주석만 삽입
+3. **충분한 인라인 주석**: state, handler, JSX 각 영역에 주석 추가 (과하지 않게 적당히)
+4. **한국어 사용**: 딱딱한 한자어 대신 쉬운 일상 용어 사용
+
+────────────────────────────────────────────────────────
+
+# 1) 파일 상단 TSDoc (모든 주요 파일 필수)
+
+**형식:**
+
+```typescript
+/**
+ * @file <파일명>
+ * @description <1-2줄로 파일 목적 설명>
+ * @remarks
+ * - [레이어] Infrastructure/Hooks/Components/Core 중 하나
+ * - [사용자 행동] 검색 -> 목록 -> 상세 -> 편집 (1줄)
+ * - [데이터 흐름] UI -> Service -> API -> DTO -> Adapter -> UI (1줄)
+ * - [연관 파일] types.ts, useXXXQuery.ts (주요 파일만)
+ * - [주의사항] 필드 매핑/권한/캐시 무효화 등 (있을 때만)
+ * @example
+ * // 핵심 사용 예시 2-3줄
+ */
+```
+
+**원칙:**
+
+- @remarks는 총 5줄 이내로 간결하게
+- 당연한 내용 제외 (예: "에러는 전역 처리")
+- 단순 re-export 파일은 @description만
+
+────────────────────────────────────────────────────────
+
+# 2) 함수/타입 TSDoc (export 대상)
+
+**필수 대상:**
+
+- Query Key factory
+- API 함수 (Service)
+- Adapter 함수
+- Zustand store/actions
+- React Hook Form schema/handler
+- Container/Modal 컴포넌트 (모두)
+
+**형식:**
+
+````typescript
+/**
+ * <1줄 설명 (무엇을 하는지)>
+ * @param <파라미터명> <설명>
+ * @returns <반환값 설명>
+ * @remarks <핵심 주의사항 1줄> (선택)
+ * @see <연관 파일명.tsx의 함수명 - 어떤 역할로 호출하는지>
+ */
+
+## 2-1. 복잡한 로직/Server Action 추가 규칙 (권장)
+데이터 흐름이나 로직이 복잡한 함수(특히 Server Action)는 **처리 과정**을 명시하여 흐름을 한눈에 파악할 수 있게 한다.
+
+**형식:**
+```typescript
+/**
+ * [함수명]
+ *
+ * <상세 설명>
+ *
+ * 처리 과정:
+ * 1. <데이터 추출/준비>
+ * 2. <검증 로직>
+ * 3. <외부 API/DB 호출>
+ * 4. <분기 처리 (성공/실패)>
+ * 5. <결과 반환/리다이렉트>
+ *
+ * @param ...
+ */
+````
+
+````
+
+## ⭐ @see 강화 규칙 (필수)
+
+모든 함수/컴포넌트에 **@see를 적극적으로 추가**하여 호출 관계를 명확히 한다.
+
+**@see 작성 패턴:**
+
+```typescript
+/**
+ * @see OpptyDetailHeader.tsx - handleApprovalClick()에서 다이얼로그 열기
+ * @see useContractApproval.ts - onConfirm 콜백으로 날짜 전달
+ */
+
+/**
+ * @see LeadDetailPage.tsx - 리드 상세 페이지에서 목록 조회
+ * @see LeadSearchForm.tsx - 검색 폼 제출 시 호출
+ */
+````
+
+**@see 필수 포함 정보:**
+
+1. **파일명** - 어떤 파일에서 호출하는지
+2. **함수/이벤트명** - 어떤 함수나 이벤트에서 호출하는지
+3. **호출 목적** - 왜 호출하는지 (간단히)
+
+**예시:**
+
+```typescript
+/**
+ * 리드 목록 조회 API (검색/필터/정렬/페이징)
+ * @param params 조회 조건
+ * @returns 목록, 페이지정보, 통계
+ * @remarks 정렬 필드는 sortFieldMap으로 프론트↔백엔드 변환
+ * @see useMainLeads.ts - useQuery의 queryFn으로 호출
+ * @see LeadTableContainer.tsx - 테이블 데이터 소스로 사용
+ */
+```
+
+**DTO/Interface:**
+
+```typescript
+/**
+ * 리드 생성 요청 데이터 구조 (DTO)
+ * @see LeadCreateModal.tsx - 리드 생성 폼 제출 시 사용
+ */
+export interface CreateLeadRequest { ... }
+```
+
+**Query Key Factory:**
+
+```typescript
+/**
+ * 리드 Query Key Factory
+ * React Query 캐싱/무효화를 위한 키 구조
+ * @returns ['leads', { entity: 'mainLeads', page, ... }] 형태
+ * @see useLeadsQuery.ts - queryKey로 사용
+ * @see useLeadMutations.ts - invalidateQueries 대상
+ */
+export const leadKeys = { ... }
+
+/** 메인 리드 목록 키 */
+mainLeads: (...) => [...],
+```
+
+────────────────────────────────────────────────────────
+
+# 3) 인라인 주석 (적극 활용)
+
+## 3-1. State 주석 (필수)
+
+모든 useState/useRef에 역할 주석 추가
+
+```typescript
+// [State] 선택된 날짜 (기본값: 오늘)
+const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+// [State] 캘린더 팝오버 열림 상태
+const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+
+// [Ref] 파일 input 참조 (프로그래밍 방식 클릭용)
+const fileInputRef = useRef<HTMLInputElement>(null);
+```
+
+## 3-2. Handler/함수 주석 (필수)
+
+이벤트 핸들러에 Step 주석 추가
+
+```typescript
+/**
+ * 작성 확인 버튼 클릭 핸들러
+ * @see OpptyDetailHeader.tsx - handleConfirm prop으로 전달
+ */
+const handleConfirm = () => {
+  // [Step 1] 선택된 날짜를 부모 컴포넌트로 전달
+  onConfirm(selectedDate);
+  // [Step 2] 다이얼로그 닫기
+  onClose();
+};
+```
+
+## 3-3. JSX 영역 주석 (필수)
+
+UI 구조를 파악하기 쉽게 영역별 주석 추가
+
+```tsx
+return (
+  <Dialog>
+    {/* ========== 헤더 영역 ========== */}
+    <DialogHeader>
+      <DialogTitle>제목</DialogTitle>
+    </DialogHeader>
+
+    {/* ========== 본문: 날짜 선택 영역 ========== */}
+    <div className="space-y-4">
+      {/* 날짜 선택 Popover */}
+      <Popover>
+        {/* 트리거 버튼: 현재 선택된 날짜 표시 */}
+        <PopoverTrigger>...</PopoverTrigger>
+        {/* 캘린더 컨텐츠: 한국어 로케일 */}
+        <PopoverContent>...</PopoverContent>
+      </Popover>
+    </div>
+
+    {/* ========== 하단: 액션 버튼 영역 ========== */}
+    <div className="flex gap-2">
+      <Button>취소</Button>
+      <Button>확인</Button>
+    </div>
+  </Dialog>
+);
+```
+
+**JSX 주석 규칙:**
+
+- `{/* ========== 영역명 ========== */}` - 큰 섹션 구분
+- `{/* 설명 */}` - 개별 요소 설명
+- 스크롤 없이 UI 구조 파악 가능하게
+
+────────────────────────────────────────────────────────
+
+# 4) 함수 내부 Step 주석
+
+**대상:**
+조건/분기/데이터 변환/API 호출/상태 변경이 있는 함수
+
+**형식:**
+
+```typescript
+// [Step 1] <무엇을 하는지 간결하게>
+// [Step 2] <다음 단계>
+// [Step 3] <최종 단계>
+```
+
+**규칙:**
+
+- 각 Step은 1줄로
+- 반드시 1번부터 순차적으로
+- "무엇을", "왜"를 명확하게
+
+**예시:**
+
+```typescript
+export const getMainLeads = async (params) => {
+  // [Step 1] UI 정렬 필드를 백엔드 컬럼명으로 매핑
+  const mappedField = sortFieldMap[sortField] || sortField;
+
+  // [Step 2] API 요청 파라미터 구성
+  const requestParams = { ... };
+
+  // [Step 3] 리드 목록 조회 API 호출
+  const { data } = await axiosInstance.get(...);
+
+  // [Step 4] 응답 데이터 검증 및 기본값 설정
+  let dataList = data?.data?.list || [];
+
+  // [Step 5] UI 모델로 변환 및 결과 반환
+  return { list: dataList.map(convertToRow), ... };
+}
+```
+
+────────────────────────────────────────────────────────
+
+# 5) 레이어별 특수 규칙
+
+## 5-1. Service/API
+
+- **Step 주석**: API 호출 흐름을 단계별로 명시
+- **@see**: 이 API를 호출하는 모든 훅/컴포넌트 명시
+
+## 5-2. Hooks (TanStack Query)
+
+- **Query Key**: 반환 구조 예시 필수
+- **캐시 전략**: invalidateQueries/setQueryData 사용 이유
+- **@see**: 이 훅을 사용하는 모든 컴포넌트 명시
+
+## 5-3. Adapters
+
+- **간단한 변환**: 주석 불필요
+- **복잡한 변환**: 입력→출력 1줄 설명 + 변환 규칙
+
+## 5-4. Components (Container/Modal)
+
+- **상태 관리**: 어떤 state가 어떤 이벤트로 변경되는지
+- **Dialog/Modal**: open 상태 소유자, 닫힘 조건
+- **Table**: 인라인 편집, 스켈레톤 범위
+- **JSX 영역 주석**: UI 구조 파악용 영역 구분 주석 필수
+
+## 5-5. Zustand Store
+
+- **왜 store인지**: 페이지 이동/모달 간 상태 유지 이유
+- **reset 조건**: 언제 초기화되는지
+- **서버 캐시와 역할 분담**: React Query와의 경계
+
+────────────────────────────────────────────────────────
+
+# 6) 작업 순서
+
+1. 파일 레이어 판별 (Infrastructure/Hooks/UI/Core)
+2. 파일 상단 TSDoc 추가 (@see 포함)
+3. export 대상에 TSDoc 추가 (@see 필수)
+4. State/Ref에 인라인 주석 추가
+5. Handler 함수에 TSDoc + Step 주석 추가
+6. JSX 영역별 구분 주석 추가
+7. Query Key Factory에 반환 구조 예시 추가
+
+# 제약사항
+
+- **@author는 jihoon87.lee 고정**
+- **@see는 필수**: 호출 관계 명확히
+- **Step 주석은 1줄**: 간결하게
+- **JSX 주석 필수**: UI 구조 파악용
+- **@see는 파일명 + 함수명 + 역할**: 전체 경로 불필요
+
+# 지금부터 작업
+
+내가 주는 코드를 위 규칙에 맞게 "주석만" 보강하라.
--- a/.agent/skills/find-skills/SKILL.md
+++ b/.agent/skills/find-skills/SKILL.md
@@ -0,0 +1,96 @@
+---
+name: find-skills
+description: Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", or "is there a skill that can help with X".
+---
+
+# Find Skills
+
+This skill helps you discover and install skills from the open agent skills ecosystem.
+
+## When to Use This Skill
+
+Use this skill when the user:
+
+- Asks "how do I do X" where X might be a common task with an existing skill
+- Says "find a skill for X" or "is there a skill for X"
+- Asks "can you do X" where X is a specialized capability
+- Expresses interest in extending agent capabilities
+- Wants to search for tools, templates, or workflows
+- Mentions they wish they had help with a specific domain (design, testing, deployment, etc.)
+
+## What is the Skills CLI?
+
+The Skills CLI (`npx skills`) is the package manager for the open agent skills ecosystem. Skills are modular packages that extend agent capabilities with specialized knowledge, workflows, and tools.
+
+**Key commands:**
+
+- `npx skills find [query]` - Search for skills interactively or by keyword
+- `npx skills add` - Install a skill from GitHub or other sources
+- `npx skills check` - Check for skill updates
+- `npx skills update` - Update all installed skills
+
+**Browse skills at:** <https://skills.sh/>
+
+## How to Help Users Find Skills
+
+### Step 1: Understand What They Need
+
+When a user asks for help with something, identify:
+
+1. The domain (e.g., React, testing, design, deployment)
+2. The specific task (e.g., writing tests, creating animations, reviewing PRs)
+3. Whether this is a common enough task that a skill likely exists
+
+### Step 2: Search for Skills
+
+Run the find command with a relevant query:
+
+```bash
+npx skills find [query]
+```
+
+For example:
+
+- User asks "how do I make my React app faster?" → `npx skills find react performance`
+- User asks "can you help me with PR reviews?" → `npx skills find pr review`
+- User asks "I need to create a changelog" → `npx skills find changelog`
+
+### Step 3: Present Recommendations
+
+When you find relevant skills, present them to the user with:
+
+1. The skill name and what it does
+2. The installation command
+3. A link to the skill's page
+
+**Example response:**
+
+> I found a skill that might help!
+>
+> **vercel-react-best-practices**
+> Vercel's official React performance guidelines for AI agents.
+>
+> To install it:
+> `npx skills add vercel-labs/agent-skills@vercel-react-best-practices`
+>
+> Learn more: <https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices>
+
+If the user wants to proceed, you can install the skill for them:
+
+```bash
+npx skills add vercel-labs/agent-skills@vercel-react-best-practices
+```
+
+### Step 4: Verify Installation (Optional)
+
+After installing, you can verify it was installed correctly:
+
+```bash
+npx skills list
+```
+
+## When No Skills Are Found
+
+1. Try a broader search term
+2. Check the [skills.sh](https://skills.sh/) website manually if you suspect a network issue
+3. Suggest the user could create their own skill with `npx skills init`
--- a/.agent/skills/nextjs-app-router-patterns/SKILL.md
+++ b/.agent/skills/nextjs-app-router-patterns/SKILL.md
@@ -0,0 +1,65 @@
+---
+name: nextjs-app-router-patterns
+description: Best practices and patterns for building applications with Next.js App Router (v13+).
+---
+
+# Next.js App Router Patterns
+
+## Core Principles
+
+### Server-First by Default
+
+- **Use Server Components** for everything possible (data fetching, layout, static content).
+- **Use Client Components** (`"use client"`) only when interactivity (hooks, event listeners) is needed.
+- **Pass Data Down**: Fetch data in Server Components and pass it as props to Client Components.
+- **Composition**: Wrap Client Components around Server Components to avoid "rendering undefined" issues or waterfall de-opts.
+
+### Routing & Layouts
+
+- **File Structure**:
+  - `page.tsx`: Route UI.
+  - `layout.tsx`: Shared UI (wraps pages).
+  - `loading.tsx`: Loading state (Suspense).
+  - `error.tsx`: Error boundary.
+  - `not-found.tsx`: 404 UI.
+  - `template.tsx`: Layout that re-mounts on navigation.
+- **Parallel Routes**: Use `@folder` for parallel UI (e.g. dashboards).
+- **Intercepting Routes**: Use `(..)` to intercept navigation (e.g. modals).
+- **Route Groups**: Use `(group)` to organize routes without affecting the URL path.
+
+## Data Fetching Patterns
+
+### Server Side
+
+- **Direct Async/Await**: `const data = await fetch(...)` inside the component.
+- **Request Memoization**: `fetch` is automatically memoized. For DB calls, use `React.cache`.
+- **Data Caching**:
+  - `fetch(url, { next: { revalidate: 3600 } })` for ISR.
+  - `fetch(url, { cache: 'no-store' })` for SSR.
+  - Use `unstable_cache` for caching DB results.
+
+### Client Side
+
+- Use **SWR** or **TanStack Query** for client-side fetching.
+- Avoid `useEffect` for data fetching to prevent waterfalls.
+- Prefetch data using `queryClient.prefetchQuery` in Server Components and hydrate on client.
+
+## Server Actions
+
+- Use **Server Actions** (`"use server"`) for mutations (form submissions, button clicks).
+- Define actions in separate files (e.g. `actions.ts`) for better organization and security.
+- Use `useFormState` (or `useActionState` in React 19) to handle loading/error states.
+
+## Optimization
+
+- **Images**: Use `next/image` for automatic resizing and format conversion.
+- **Fonts**: Use `next/font` to eliminate layout shift (CLS).
+- **Scripts**: Use `next/script` with `strategy="afterInteractive"`.
+- **Streaming**: Use `<Suspense>` to stream parts of the UI (e.g. slow data fetches).
+
+## Common Anti-Patterns to Avoid
+
+1. **Fetching in Client Components without cache lib**: Leads to waterfalls.
+2. **"use client" at top level layout**: Forces the entire tree to be client-side.
+3. **Prop Drilling**: specialized `Context` should be used sparingly; prefer Composition.
+4. **Large Barrel Files**: Avoid `index.ts` exporting everything; import directly to aid tree-shaking.
--- a/.agent/skills/vercel-react-best-practices/SKILL.md
+++ b/.agent/skills/vercel-react-best-practices/SKILL.md
@@ -0,0 +1,95 @@
+---
+name: vercel-react-best-practices
+description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
+license: MIT
+metadata:
+  author: vercel
+  version: "1.0.0"
+---
+
+# Vercel React Best Practices
+
+Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
+
+## When to Apply
+
+Reference these guidelines when:
+
+- Writing new React components or Next.js pages
+- Implementing data fetching (client or server-side)
+- Reviewing code for performance issues
+- Refactoring existing React/Next.js code
+- Optimizing bundle size or load times
+
+## Rule Categories by Priority
+
+| Priority | Category                  | Impact      | Prefix       |
+| -------- | ------------------------- | ----------- | ------------ |
+| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
+| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
+| 3        | Server-Side Performance   | HIGH        | `server-`    |
+| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
+| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
+| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
+| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
+| 8        | Advanced Patterns         | LOW         | `advanced-`  |
+
+## Quick Reference
+
+### 1. Eliminating Waterfalls (CRITICAL)
+
+- `async-defer-await` - Move await into branches where actually used
+- `async-parallel` - Use Promise.all() for independent operations
+- `async-dependencies` - Use better-all for partial dependencies
+- `async-api-routes` - Start promises early, await late in API routes
+- `async-suspense-boundaries` - Use Suspense to stream content
+
+### 2. Bundle Size Optimization (CRITICAL)
+
+- `bundle-barrel-imports` - Avoid large barrel files; use direct imports
+- `bundle-large-libraries` - Optimize heavy deps (e.g. framer-motion, lucide)
+- `bundle-conditional` - Lazy load conditional components
+- `bundle-route-split` - Split huge page components
+- `bundle-dynamic-imports` - Use next/dynamic for heavy client components
+
+### 3. Server-Side Performance (HIGH)
+
+- `server-cache-react` - Use React.cache() for per-request deduplication
+- `server-cache-next` - Use unstable_cache for data coaching
+- `server-only-utils` - Mark server-only code with 'server-only' package
+- `server-component-boundaries` - Keep client components at leaves
+- `server-image-optimization` - Use next/image with proper sizing
+
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
+
+- `client-use-swr` - Use SWR/TanStack Query for client-side data
+- `client-no-effect-fetch` - Avoid fetching in useEffect without caching libraries
+- `client-prefetch-link` - Use next/link prefetching
+- `client-caching-headers` - Respect cache-control headers
+
+### 5. Re-render Optimization (MEDIUM)
+
+- `rerender-memo-props` - Memoize complex props
+- `rerender-dependencies` - Use primitive dependencies in effects
+- `rerender-functional-setstate` - Use functional setState for stable callbacks
+- `rerender-context-split` - Split context to avoid wide re-renders
+
+### 6. Rendering Performance (MEDIUM)
+
+- `rendering-image-priority` - Priority load LCP images
+- `rendering-list-virtualization` - Virtualize long lists
+- `rendering-content-visibility` - Use content-visibility for long lists
+- `rendering-hoist-jsx` - Extract static JSX outside components
+- `rendering-hydration-no-flicker` - Use inline script for client-only data
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+
+- `js-batch-dom-css` - Group CSS changes
+- `js-index-maps` - Build Map for repeated lookups
+- `js-combine-iterations` - Combine multiple filter/map into one loop
+- `js-set-map-lookups` - Use Set/Map for O(1) lookups
+
+### 8. Advanced Patterns (LOW)
+
+- `advanced-event-handler-refs` - Store event handlers in refs
+- `advanced-init-once` - Initialize app once per app load
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,9 @@
+# Supabase 환경 설정 예제 파일
+# 이 파일의 이름을 .env.local 로 변경한 뒤, 실제 값을 채워넣으세요.
+# 값 확인: https://supabase.com/dashboard/project/_/settings/api
+
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+
+# 세션 타임아웃 (분 단위)
+NEXT_PUBLIC_SESSION_TIMEOUT_MINUTES=30
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,126 @@
+# ========================================
+# Dependencies (의존성)
+# ========================================
+node_modules/
+.pnp/
+.pnp.js
+
+# ========================================
+# Build outputs (빌드 출력물)
+# ========================================
+.next/
+out/
+build/
+dist/
+
+# ========================================
+# Testing (테스트)
+# ========================================
+coverage/
+.nyc_output/
+
+# ========================================
+# Environment files (환경변수 파일)
+# ========================================
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env*.local
+
+# ★ 예제 파일은 공유해야 하므로 예외 처리 (깃에 올라감)
+!.env.example
+
+# ========================================
+# IDE & Editor (에디터 설정)
+# ========================================
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# ========================================
+# OS generated files (OS 생성 파일)
+# ========================================
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+desktop.ini
+
+# ========================================
+# Debug logs (디버그 로그)
+# ========================================
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+lerna-debug.log*
+
+# ========================================
+# TypeScript (타입스크립트)
+# ========================================
+*.tsbuildinfo
+next-env.d.ts
+
+# ========================================
+# Turbopack (터보팩)
+# ========================================
+.turbo/
+
+# ========================================
+# Vercel (배포 관련)
+# ========================================
+.vercel/
+
+# ========================================
+# PWA files (PWA 관련)
+# ========================================
+public/sw.js
+public/workbox-*.js
+public/worker-*.js
+public/sw.js.map
+public/workbox-*.js.map
+
+# ========================================
+# Misc (기타)
+# ========================================
+*.pem
+*.log
+*.pid
+*.seed
+*.pid.lock
+
+# ========================================
+# Lock files (선택 - 협업 시 주석 해제)
+# ========================================
+# package-lock.json
+# yarn.lock
+# pnpm-lock.yaml
+
+# ========================================
+# Sentry (에러 모니터링)
+# ========================================
+.sentryclirc
+
+# ========================================
+# Storybook (스토리북)
+# ========================================
+storybook-static/
+
+# ========================================
+# Local files (로컬 전용)
+# ========================================
+*.local
+.cache/
+node_modules
+
+# ========================================
+# Custom
+# ========================================
+.playwright-mcp/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "chatgpt.openOnStartup": false
+}
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,45 @@
+# AGENTS.md (auto-trade)
+
+## 기본 원칙
+- 모든 응답과 설명은 한국어로 작성.
+- 쉬운 말로 설명. 어려운 용어는 괄호로 짧게 뜻을 덧붙임.
+- 요청이 모호하면 먼저 질문 1~3개로 범위를 확인.
+
+## 프로젝트 요약
+- Next.js 16 App Router, React 19, TypeScript
+- 상태 관리: zustand
+- 데이터: Supabase
+- 폼 및 검증: react-hook-form, zod
+- UI: Tailwind CSS v4, Radix UI (components.json 사용)
+
+## 명령어
+- 개발 서버: (포트는 3001번이야)
+pm run dev
+- 린트: 
+pm run lint
+- 빌드: 
+pm run build
+- 실행: 
+pm run start
+
+## 코드 및 문서 규칙
+- JSX 섹션 주석 형식: {/* ========== SECTION NAME ========== */}
+- 함수 및 컴포넌트 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개만.
+- 사용자가 요청한 변경과 이유를 함께 설명.
+- 파일 경로는 pp/...처럼 코드 형식으로 표기.
+
+## 여러 도구를 함께 쓸 때 (쉬운 설명)
+- 기준 설명을 한 군데에 모아두고, 그 파일만 계속 업데이트하는 것이 핵심.
+- 예를 들어 PROJECT_CONTEXT.md에 스택, 폴더 구조, 규칙을 적어둔다.
+- 그리고 각 도구의 규칙 파일에  PROJECT_CONTEXT.md를 참고라고 써 둔다.
+- 이렇게 하면 어떤 도구를 쓰든 같은 파일을 읽게 되어, 매번 다시 설명할 일이 줄어든다.
--- a/PROJECT_CONTEXT.md
+++ b/PROJECT_CONTEXT.md
@@ -0,0 +1,48 @@
+# PROJECT_CONTEXT.md
+
+이 파일은 프로젝트 설명의 기준(원본)입니다.
+여기만 업데이트하고, 다른 도구 규칙에서는 이 파일을 참고하도록 연결하세요.
+
+## 한 줄 요약
+- 자동매매(오토 트레이드) 웹 앱
+
+## 기술 스택
+- Next.js 16 (App Router)
+- React 19, TypeScript
+- 상태 관리: zustand
+- 데이터: Supabase
+- 폼/검증: react-hook-form, zod
+- UI: Tailwind CSS v4, Radix UI
+
+## 폴더 구조(핵심만)
+- pp/ 라우팅 및 페이지
+- eatures/ 도메인별 기능
+- components/ 공용 UI
+- lib/ 유틸/클라이언트
+- utils/ 헬퍼
+
+## 주요 규칙(요약)
+- JSX 섹션 주석 형식: {/* ========== SECTION NAME ========== */}
+- 함수/컴포넌트 JSDoc에 @see 필수
+- 파일 상단에 @author jihoon87.lee
+- 상태/이벤트/복잡 로직에 인라인 주석 충분히 작성
+
+## 작업 흐름
+- 개발 서버: 
+pm run dev
+- 린트: 
+pm run lint
+- 빌드: 
+pm run build
+- 실행: 
+pm run start
+
+## 자주 하는 설명 템플릿
+- 변경 이유: (왜 바꾸는지)
+- 변경 내용: (무엇을 바꾸는지)
+- 영향 범위: (어디에 영향이 있는지)
+
+## 업데이트 가이드
+- 새 규칙/패턴이 생기면 여기에 먼저 추가
+- 문장이 길어지면 더 짧게 요약
+- 도구별 규칙 파일에는  PROJECT_CONTEXT.md 참고만 적기
--- a/README.md
+++ b/README.md
@@ -1 +1,36 @@
-# auto-trade
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/app/(auth)/forgot-password/page.tsx
+++ b/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>
+  );
+}
--- a/app/(auth)/layout.tsx
+++ b/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>
+  );
+}
--- a/app/(auth)/login/page.tsx
+++ b/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>
+  );
+}
--- a/app/(auth)/reset-password/page.tsx
+++ b/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>
+  );
+}
--- a/app/(auth)/signup/page.tsx
+++ b/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>
+  );
+}
--- a/app/(home)/page.tsx
+++ b/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>
+  );
+}
--- a/app/(main)/dashboard/page.tsx
+++ b/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>
+  );
+}
--- a/app/(main)/layout.tsx
+++ b/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>
+  );
+}
--- a/app/auth/callback/route.ts
+++ b/app/auth/callback/route.ts
@@ -0,0 +1,121 @@
+import { createClient } from "@/utils/supabase/server";
+import { type NextRequest, NextResponse } from "next/server"; // NextRequest 추가
+import { AUTH_ERROR_MESSAGES, AUTH_ROUTES } from "@/features/auth/constants";
+import { getAuthErrorMessage } from "@/features/auth/errors";
+
+/**
+ * OAuth/이메일 인증 콜백 처리
+ *
+ * Supabase 인증 후 리다이렉트되는 라우트입니다.
+ * - 인증 코드를 세션으로 교환합니다.
+ * - 인증 에러를 처리합니다.
+ * - 최종 목적지(Next URL)로 리다이렉트합니다.
+ */
+export async function GET(request: NextRequest) {
+  // --------------------------------------------------------------------------
+  // 1. 요청 파라미터 및 URL 준비
+  // --------------------------------------------------------------------------
+  const requestUrl = request.nextUrl.clone(); // URL 조작을 위해 복제
+  const code = requestUrl.searchParams.get("code");
+  const next = requestUrl.searchParams.get("next") ?? AUTH_ROUTES.HOME;
+
+  // 에러 파라미터 확인
+  const error = requestUrl.searchParams.get("error");
+  const error_code = requestUrl.searchParams.get("error_code");
+  const error_description = requestUrl.searchParams.get("error_description");
+  const origin = requestUrl.origin;
+
+  // --------------------------------------------------------------------------
+  // 2. 초기 에러 처리 (Provider 레벨 에러)
+  // --------------------------------------------------------------------------
+  if (error) {
+    console.error("Auth callback error parameter:", {
+      error,
+      error_code,
+      error_description,
+    });
+
+    let message: string = AUTH_ERROR_MESSAGES.DEFAULT;
+
+    if (error === "access_denied") {
+      message = AUTH_ERROR_MESSAGES.OAUTH_ACCESS_DENIED;
+    } else if (error === "server_error") {
+      message = AUTH_ERROR_MESSAGES.OAUTH_SERVER_ERROR;
+    }
+
+    // 로그인 페이지로 에러와 함께 이동
+    return NextResponse.redirect(
+      `${origin}${AUTH_ROUTES.LOGIN}?message=${encodeURIComponent(message)}`,
+    );
+  }
+
+  // --------------------------------------------------------------------------
+  // 3. 인증 코드 교환 (Supabase 공식 패턴 적용)
+  // --------------------------------------------------------------------------
+  if (code) {
+    const supabase = await createClient();
+
+    // 코드 교환 실행
+    const { error: exchangeError } =
+      await supabase.auth.exchangeCodeForSession(code);
+
+    if (!exchangeError) {
+      // ----------------------------------------------------------------------
+      // 3-1. 교환 성공: 리다이렉트 처리
+      // 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";
+
+      // 리다이렉트할 최종 URL 설정
+      if (isLocalEnv) {
+        // 로컬 개발 환경
+        return NextResponse.redirect(`${origin}${next}`);
+      } else if (forwardedHost) {
+        // 프로덕션 환경 (Vercel 등 프록시 뒤)
+        return NextResponse.redirect(`https://${forwardedHost}${next}`);
+      } else {
+        // 기본
+        return NextResponse.redirect(`${origin}${next}`);
+      }
+    }
+
+    // ------------------------------------------------------------------------
+    // 3-2. 교환 실패: 에러 처리
+    // ------------------------------------------------------------------------
+    console.error("Auth exchange error:", exchangeError.message);
+    const message = getAuthErrorMessage(exchangeError);
+    return NextResponse.redirect(
+      `${origin}${AUTH_ROUTES.LOGIN}?message=${encodeURIComponent(message)}`,
+    );
+  }
+
+  // --------------------------------------------------------------------------
+  // 4. 잘못된 접근 처리
+  // --------------------------------------------------------------------------
+  const errorMessage = encodeURIComponent(
+    AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK,
+  );
+  return NextResponse.redirect(
+    `${origin}${AUTH_ROUTES.LOGIN}?message=${errorMessage}`,
+  );
+}
--- a/app/auth/confirm/route.ts
+++ b/app/auth/confirm/route.ts
@@ -0,0 +1,84 @@
+import { createClient } from "@/utils/supabase/server";
+import {
+  AUTH_ERROR_MESSAGES,
+  AUTH_ROUTES,
+  RECOVERY_COOKIE_MAX_AGE_SECONDS,
+  RECOVERY_COOKIE_NAME,
+} from "@/features/auth/constants";
+import { getAuthErrorMessage } from "@/features/auth/errors";
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { NextResponse, type NextRequest } from "next/server";
+
+const RESET_PASSWORD_PATH = AUTH_ROUTES.RESET_PASSWORD;
+const LOGIN_PATH = AUTH_ROUTES.LOGIN;
+
+/**
+ * 이메일 인증(/auth/confirm) 처리
+ * - token_hash + type 검증
+ * - recovery 타입일 경우 세션 쿠키 설정 후 비밀번호 재설정 페이지로 리다이렉트
+ */
+export async function GET(request: NextRequest) {
+  // 1) 이메일 링크에 들어있는 값 읽기
+  const { searchParams } = new URL(request.url);
+
+  // token_hash: 인증에 필요한 값
+  // type: 어떤 인증인지 구분 (예: 가입, 비밀번호 재설정)
+  const tokenHash = searchParams.get("token_hash");
+  const type = searchParams.get("type") as EmailOtpType | null;
+
+  // redirect_to/next: 인증 후에 이동할 주소
+  const rawRedirect =
+    searchParams.get("redirect_to") ?? searchParams.get("next");
+
+  // 보안상 우리 사이트 안 경로(`/...`)만 허용
+  const safeRedirect =
+    rawRedirect && rawRedirect.startsWith("/") ? rawRedirect : null;
+
+  // 일반 인증이 끝난 뒤 이동할 경로
+  const nextPath = safeRedirect ?? AUTH_ROUTES.HOME;
+  // 비밀번호 재설정일 때 이동할 경로
+  const recoveryPath = safeRedirect ?? RESET_PASSWORD_PATH;
+
+  // 필수 값이 없으면 로그인으로 보내고 에러를 보여줌
+  if (!tokenHash || !type) {
+    return redirectWithError(request, AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK);
+  }
+
+  // 2) Supabase에게 "이 링크가 맞는지" 확인 요청
+  const supabase = await createClient();
+  const { error } = await supabase.auth.verifyOtp({
+    type,
+    token_hash: tokenHash,
+  });
+
+  // 확인 실패 시 이유를 알기 쉬운 메시지로 보여줌
+  if (error) {
+    console.error("[Auth Confirm] verifyOtp error:", error.message);
+    const message = getAuthErrorMessage(error);
+    return redirectWithError(request, message);
+  }
+
+  // 3) 비밀번호 재설정이면 재설정 페이지로 보내고 쿠키를 저장
+  if (type === "recovery") {
+    const response = NextResponse.redirect(new URL(recoveryPath, request.url));
+    response.cookies.set(RECOVERY_COOKIE_NAME, "1", {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: process.env.NODE_ENV === "production",
+      maxAge: RECOVERY_COOKIE_MAX_AGE_SECONDS,
+      path: "/",
+    });
+    return response;
+  }
+
+  // 4) 그 외 인증은 기본 경로로 이동
+  return NextResponse.redirect(new URL(nextPath, request.url));
+}
+
+// 로그인 페이지로 보내면서 에러 메시지를 함께 전달
+function redirectWithError(request: NextRequest, message: string) {
+  const encodedMessage = encodeURIComponent(message);
+  return NextResponse.redirect(
+    new URL(`${LOGIN_PATH}?message=${encodedMessage}`, request.url),
+  );
+}
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,149 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --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);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --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);
+  --radius-xl: calc(var(--radius) + 4px);
+  --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 {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 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);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 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);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --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.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);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 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);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --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);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --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.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);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,68 @@
+/**
+ * @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, 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({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const outfit = Outfit({
+  variable: "--font-heading",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "AutoTrade",
+  description: "Automated Crypto Trading Platform",
+};
+
+/**
+ * RootLayout 컴포넌트
+ * @param children 렌더링할 자식 컴포넌트
+ * @returns HTML 구조 및 전역 Provider 래퍼
+ * @see theme-provider.tsx - 다크모드 지원
+ * @see session-manager.tsx - 세션 타임아웃 감지
+ */
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${outfit.variable} antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SessionManager />
+          <QueryProvider>{children}</QueryProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
--- a/components.json
+++ b/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/components/form-message.tsx
+++ b/components/form-message.tsx
@@ -0,0 +1,58 @@
+/**
+ * @file components/form-message.tsx
+ * @description 폼 제출 결과(성공/에러) 메시지를 표시하는 컴포넌트
+ * @remarks
+ * - [레이어] Components/UI/Feedback
+ * - [기능] URL 쿼리 파라미터(`message`)를 감지하여 표시 후 URL 정리
+ * - [UX] 메시지 확인 후 새로고침 시 메시지가 남지 않도록 히스토리 정리 (History API)
+ */
+
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+/**
+ * 폼 메시지 컴포넌트
+ * @param message 표시할 메시지 텍스트
+ * @returns 메시지 박스 또는 null
+ */
+export default function FormMessage({ message }: { message: string }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    // 메시지가 있고, URL에 message 파라미터가 있다면
+    if (message && searchParams.has("message")) {
+      // 1. 현재 URL 파라미터 복사
+      const params = new URLSearchParams(searchParams.toString());
+      // 2. message 파라미터 삭제
+      params.delete("message");
+
+      // 3. URL 업데이트 (페이지 새로고침 없이 주소만 변경)
+      // replaceState를 사용하여 히스토리에 남기지 않고 주소창만 깔끔하게 바꿉니다.
+      const newUrl = params.toString()
+        ? `${pathname}?${params.toString()}`
+        : pathname;
+      window.history.replaceState(null, "", newUrl);
+    }
+  }, [message, pathname, searchParams]);
+
+  if (!message) return null;
+
+  // 에러 메시지인지 성공 메시지인지 대략적으로 판단 (성공 메시지는 보통 '확인', '완료' 등이 포함됨)
+  // 여기서는 간단하게 모든 메시지를 동일한 스타일로 보여주되, 필요하면 분기 가능합니다.
+  const isError = !message.includes("완료") && !message.includes("확인");
+
+  return (
+    <div
+      className={`rounded-md p-4 text-sm ${
+        isError
+          ? "bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-200"
+          : "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200"
+      }`}
+    >
+      {message}
+    </div>
+  );
+}
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -0,0 +1,25 @@
+/**
+ * @file components/theme-provider.tsx
+ * @description next-themes 라이브러리를 사용한 테마 제공자 (Wrapper)
+ * @remarks
+ * - [레이어] Infrastructure/Provider
+ * - [역할] 앱 전역에 테마 컨텍스트 주입 (Light/Dark 모드 지원)
+ * - [연관 파일] layout.tsx (사용처)
+ */
+
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+/**
+ * ThemeProvider 컴포넌트
+ * @param props next-themes Provider props
+ * @returns NextThemesProvider 래퍼
+ */
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,59 @@
+/**
+ * @file components/theme-toggle.tsx
+ * @description 라이트/다크/시스템 테마 전환 토글 버튼
+ * @remarks
+ * - [레이어] Components/UI
+ * - [사용자 행동] 버튼 클릭 -> 드롭다운 메뉴 -> 테마 선택 -> 즉시 반영
+ * - [연관 파일] theme-provider.tsx (next-themes)
+ */
+
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+/**
+ * 테마 토글 컴포넌트
+ * @remarks next-themes의 useTheme 훅 사용
+ * @returns Dropdown 메뉴 형태의 테마 선택기
+ */
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu modal={false}>
+      {/* ========== 트리거 버튼 ========== */}
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          {/* 라이트 모드 아이콘 (회전 애니메이션) */}
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          {/* 다크 모드 아이콘 (회전 애니메이션) */}
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+
+      {/* ========== 메뉴 컨텐츠 (우측 정렬) ========== */}
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,150 @@
+/**
+ * @file components/ui/alert-dialog.tsx
+ * @description 알림 대화상자 (Alert Dialog) 컴포넌트 (Shadcn/ui)
+ * @remarks
+ * - [레이어] Components/UI/Primitive
+ * - [기능] 중요한 작업 확인 컨텍스트 제공 (로그아웃 경고 등)
+ * @see session-manager.tsx - 로그아웃 경고에 사용
+ */
+
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
--- a/components/ui/avatar.tsx
+++ b/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,
+}
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/components/ui/dropdown-menu.tsx
+++ b/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,
+}
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/components/ui/loading-spinner.tsx
+++ b/components/ui/loading-spinner.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * [로딩 스피너 컴포넌트]
+ *
+ * 전역적으로 사용 가능한 로딩 스피너입니다.
+ * - 크기 조절 가능 (sm, md, lg)
+ * - 색상 커스터마이징 가능
+ * - 텍스트와 함께 사용 가능
+ *
+ * @example
+ * // 기본 사용
+ * <LoadingSpinner />
+ *
+ * @example
+ * // 크기 및 텍스트 지정
+ * <LoadingSpinner size="lg" text="로딩 중..." />
+ *
+ * @example
+ * // 버튼 내부에서 사용
+ * <Button disabled={isLoading}>
+ *   {isLoading ? <LoadingSpinner size="sm" /> : "제출"}
+ * </Button>
+ */
+
+interface LoadingSpinnerProps {
+  /** 스피너 크기 */
+  size?: "sm" | "md" | "lg";
+  /** 스피너와 함께 표시할 텍스트 */
+  text?: string;
+  /** 추가 CSS 클래스 */
+  className?: string;
+  /** 스피너 색상 (Tailwind 클래스) */
+  color?: string;
+}
+
+export function LoadingSpinner({
+  size = "md",
+  text,
+  className,
+  color = "border-gray-900 dark:border-white",
+}: LoadingSpinnerProps) {
+  // 크기별 스타일 매핑
+  const sizeClasses = {
+    sm: "h-4 w-4 border-2",
+    md: "h-8 w-8 border-3",
+    lg: "h-12 w-12 border-4",
+  };
+
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      {/* ========== 회전 스피너 ========== */}
+      <div
+        className={cn(
+          "animate-spin rounded-full border-solid border-t-transparent",
+          sizeClasses[size],
+          color,
+        )}
+        role="status"
+        aria-label="로딩 중"
+      />
+      {/* ========== 로딩 텍스트 (선택적) ========== */}
+      {text && (
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {text}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * [인라인 스피너 컴포넌트]
+ *
+ * 버튼 내부나 작은 공간에서 사용하기 적합한 미니 스피너입니다.
+ *
+ * @example
+ * <Button disabled={isLoading}>
+ *   {isLoading && <InlineSpinner />}
+ *   로그인
+ * </Button>
+ */
+export function InlineSpinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("h-4 w-4 animate-spin", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-label="로딩 중"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/doc-rule.md
+++ b/doc-rule.md
@@ -0,0 +1,32 @@
+# Antigravity Rules
+
+This document defines the coding and behavior rules for the Antigravity agent.
+
+## General Rules
+
+- **Language**: All output, explanations, and commit messages MUST be in **Korean (한국어)**.
+- **Tone**: Professional, helpful, and concise.
+
+## Documentation Rules
+
+### JSX Comments
+
+- Mandatory use of section comments in JSX to delineate logical blocks.
+- Format: `{/* ========== SECTION NAME ========== */}`
+
+### JSDoc Tags
+
+- **@see**: Mandatory for function/component documentation. Must include calling file, function/event name, and purpose.
+- **@author**: Mandatory file-level tag. Use `@author jihoon87.lee`.
+
+### Inline Comments
+
+- High density of inline comments required for:
+  - State definitions
+  - Event handlers
+  - Complex logic in JSX
+- Balance conciseness with clarity.
+
+## Code Style
+
+- Follow Project-specific linting and formatting rules.
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/features/auth/actions.ts
+++ b/features/auth/actions.ts
@@ -0,0 +1,428 @@
+/**
+ * @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";
+import { redirect } from "next/navigation";
+import { createClient } from "@/utils/supabase/server";
+import {
+  AUTH_ERROR_MESSAGES,
+  type AuthFormData,
+  type AuthError,
+  RECOVERY_COOKIE_NAME,
+} from "./constants";
+import { getAuthErrorMessage } from "./errors";
+
+// ========================================
+// 헬퍼 함수
+// ========================================
+
+/**
+ * FormData 추출 헬퍼 (이메일/비밀번호)
+ * @param formData HTML form 데이터
+ * @returns 이메일(trim 적용), 비밀번호
+ */
+function extractAuthData(formData: FormData): AuthFormData {
+  const email = (formData.get("email") as string)?.trim() || "";
+  const password = (formData.get("password") as string) || "";
+
+  return { email, password };
+}
+
+/**
+ * 비밀번호 강도 검증 함수
+ * @param password 검증할 비밀번호
+ * @returns 에러 객체 또는 null
+ * @remarks 최소 8자, 대/소문자, 숫자, 특수문자 포함 필수
+ */
+function validatePassword(password: string): AuthError | null {
+  // [Step 1] 최소 길이 체크 (8자 이상)
+  if (password.length < 8) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT,
+      type: "validation",
+    };
+  }
+
+  // [Step 2] 대문자 포함 여부
+  if (!/[A-Z]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // [Step 3] 소문자 포함 여부
+  if (!/[a-z]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // [Step 4] 숫자 포함 여부
+  if (!/[0-9]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // [Step 5] 특수문자 포함 여부
+  if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // [Step 6] 모든 검증 통과
+  return null;
+}
+
+/**
+ * 입력값 유효성 검증 함수
+ * @param email 사용자 이메일
+ * @param password 사용자 비밀번호
+ * @returns 에러 객체 또는 null
+ * @see login - 로그인 액션에서 호출
+ * @see signup - 회원가입 액션에서 호출
+ */
+function validateAuthInput(email: string, password: string): AuthError | null {
+  // [Step 1] 빈 값 체크
+  if (!email || !password) {
+    return {
+      message: AUTH_ERROR_MESSAGES.EMPTY_FIELDS,
+      type: "validation",
+    };
+  }
+
+  // [Step 2] 이메일 형식 체크 (간단한 @ 포함 여부 확인)
+  if (!email.includes("@")) {
+    return {
+      message: AUTH_ERROR_MESSAGES.INVALID_EMAIL,
+      type: "validation",
+    };
+  }
+
+  // [Step 3] 비밀번호 강도 체크
+  const passwordValidation = validatePassword(password);
+  if (passwordValidation) {
+    return passwordValidation;
+  }
+
+  // [Step 4] 검증 통과
+  return null;
+}
+
+// ========================================
+// Server Actions (서버 액션)
+// ========================================
+
+/**
+ * [로그인 액션]
+ *
+ * 사용자가 입력한 이메일/비밀번호로 로그인을 시도합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 이메일/비밀번호 추출
+ * 2. 입력값 유효성 검증 (빈 값, 이메일 형식, 비밀번호 길이)
+ * 3. Supabase Auth를 통한 로그인 시도
+ * 4. 로그인 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
+ * 5. 로그인 성공 시 캐시 무효화 및 메인 페이지로 리다이렉트
+ *
+ * @param formData 이메일, 비밀번호가 포함된 FormData
+ * @see login-form.tsx - 로그인 폼 제출 시 호출
+ */
+export async function login(formData: FormData) {
+  // [Step 1] FormData에서 이메일/비밀번호 추출
+  const { email, password } = extractAuthData(formData);
+
+  // [Step 2] 입력값 유효성 검증
+  const validationError = validateAuthInput(email, password);
+  if (validationError) {
+    return redirect(
+      `/login?message=${encodeURIComponent(validationError.message)}`,
+    );
+  }
+
+  // [Step 3] Supabase 클라이언트 생성 및 로그인 시도
+  const supabase = await createClient();
+  const { error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  // [Step 4] 로그인 실패 시 에러 처리
+  if (error) {
+    const message = getAuthErrorMessage(error);
+    return redirect(`/login?message=${encodeURIComponent(message)}`);
+  }
+
+  // [Step 5] 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
+  revalidatePath("/", "layout");
+  redirect("/");
+}
+
+/**
+ * [회원가입 액션]
+ *
+ * 새로운 사용자를 등록합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 이메일/비밀번호 추출
+ * 2. 입력값 유효성 검증
+ * 3. Supabase Auth를 통한 회원가입 시도
+ * 4. 이메일 인증 리다이렉트 URL 설정 (확인 링크 클릭 시 돌아올 주소)
+ * 5-1. 즉시 세션 생성 시: 메인 페이지로 리다이렉트 (바로 로그인됨)
+ * 5-2. 이메일 인증 필요 시: 로그인 페이지로 리다이렉트 (안내 메시지 포함)
+ *
+ * @param formData 이메일, 비밀번호가 포함된 FormData
+ * @see signup-form.tsx - 회원가입 폼 제출 시 호출
+ */
+export async function signup(formData: FormData) {
+  // [Step 1] FormData에서 이메일/비밀번호 추출
+  const { email, password } = extractAuthData(formData);
+
+  // [Step 2] 입력값 유효성 검증
+  const validationError = validateAuthInput(email, password);
+  if (validationError) {
+    return redirect(
+      `/signup?message=${encodeURIComponent(validationError.message)}`,
+    );
+  }
+
+  // [Step 3] Supabase 클라이언트 생성 및 회원가입 시도
+  const supabase = await createClient();
+  const { data, error } = await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      // 이메일 인증 완료 후 리다이렉트될 URL
+      emailRedirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback?auth_type=signup`,
+    },
+  });
+
+  // [Step 4] 회원가입 실패 시 에러 처리
+  if (error) {
+    const message = getAuthErrorMessage(error);
+    return redirect(`/signup?message=${encodeURIComponent(message)}`);
+  }
+
+  // [Step 5] 회원가입 성공 처리
+  if (data.session) {
+    // [Case 1] 즉시 세션 생성됨 (이메일 인증 불필요)
+    revalidatePath("/", "layout");
+    redirect("/");
+  }
+
+  // [Case 2] 이메일 인증 필요 (로그인 페이지로 이동)
+  revalidatePath("/", "layout");
+  redirect(
+    `/login?message=${encodeURIComponent("회원가입이 완료되었습니다. 이메일을 확인하여 인증을 완료해 주세요.")}`,
+  );
+}
+
+/**
+ * [로그아웃 액션]
+ *
+ * 현재 세션을 종료하고 로그인 페이지로 이동합니다.
+ *
+ * 처리 과정:
+ * 1. Supabase Auth 세션 종료 (서버 + 클라이언트 쿠키 삭제)
+ * 2. Next.js 캐시 무효화하여 인증 상태 갱신
+ * 3. 로그인 페이지로 리다이렉트
+ *
+ * @see user-menu.tsx - 로그아웃 메뉴 클릭 시 호출
+ * @see session-manager.tsx - 세션 타임아웃 시 호출
+ */
+export async function signout() {
+  const supabase = await createClient();
+
+  // [Step 1] Supabase 세션 종료 (서버 + 클라이언트 쿠키 삭제)
+  await supabase.auth.signOut();
+
+  // [Step 2] Next.js 캐시 무효화
+  revalidatePath("/", "layout");
+
+  // [Step 3] 로그인 페이지로 리다이렉트
+  redirect("/");
+}
+
+/**
+ * [비밀번호 재설정 요청 액션]
+ *
+ * 사용자 이메일로 비밀번호 재설정 링크를 발송합니다.
+ * 보안을 위해 이메일 존재 여부와 관계없이 동일한 메시지를 표시합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 이메일 추출
+ * 2. 이메일 형식 검증
+ * 3. Supabase를 통한 재설정 링크 발송
+ * 4. 성공 메시지와 함께 로그인 페이지로 리다이렉트
+ *
+ * @param formData 이메일 포함
+ * @see forgot-password/page.tsx - 비밀번호 찾기 폼 제출 시 호출
+ */
+export async function requestPasswordReset(formData: FormData) {
+  // [Step 1] FormData에서 이메일 추출
+  const email = (formData.get("email") as string)?.trim() || "";
+
+  // [Step 2] 이메일 유효성 검증
+  if (!email) {
+    return redirect(
+      `/forgot-password?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.EMPTY_EMAIL)}`,
+    );
+  }
+
+  if (!email.includes("@")) {
+    return redirect(
+      `/forgot-password?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.INVALID_EMAIL)}`,
+    );
+  }
+
+  // [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`,
+  });
+
+  // [Step 4] 에러 처리
+  if (error) {
+    console.error("Password reset error:", error.message);
+    const message = getAuthErrorMessage(error);
+    return redirect(`/forgot-password?message=${encodeURIComponent(message)}`);
+  }
+
+  // [Step 5] 성공 메시지 표시 (보안상 항상 성공 메시지 리턴 권장)
+  redirect(
+    `/login?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.PASSWORD_RESET_SENT)}`,
+  );
+}
+
+/**
+ * [비밀번호 업데이트 액션]
+ *
+ * 비밀번호 재설정 링크를 통해 접근한 사용자의 비밀번호를 업데이트합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 새 비밀번호 추출
+ * 2. 비밀번호 길이 및 강도 검증
+ * 3. Supabase를 통한 비밀번호 업데이트
+ * 4. 실패 시 에러 메시지 반환
+ * 5. 성공 시 세션/쿠키 정리 후 로그아웃 및 캐시 무효화
+ * 6. 성공 결과 반환
+ *
+ * @param formData 새 비밀번호 포함
+ * @see reset-password-form.tsx - 비밀번호 재설정 폼 제출 시 호출
+ */
+export async function updatePassword(formData: FormData) {
+  // [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,
+  };
+}
+
+// ========================================
+// 소셜 로그인 (OAuth)
+// ========================================
+
+/**
+ * [OAuth 로그인 공통 헬퍼]
+ *
+ * 처리 과정:
+ * 1. Supabase OAuth 로그인 URL 생성 (PKCE)
+ * 2. 생성 중 에러 발생 시 로그인 페이지로 리다이렉트 (에러 메시지 포함)
+ * 3. 성공 시 해당 OAuth 제공자 페이지(data.url)로 리다이렉트
+ *
+ * @param provider 'google' | 'kakao'
+ * @param extraOptions 추가 옵션 (예: prompt)
+ * @see signInWithGoogle
+ * @see signInWithKakao
+ */
+async function signInWithProvider(
+  provider: "google" | "kakao",
+  extraOptions: { queryParams?: { [key: string]: string } } = {},
+) {
+  const supabase = await createClient();
+
+  // [Step 1] OAuth 인증 시작 (URL 생성)
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider,
+    options: {
+      // PKCE 플로우를 위한 콜백 URL
+      redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback`,
+      ...extraOptions,
+    },
+  });
+
+  // [Step 2] 에러 처리
+  if (error) {
+    console.error(`[${provider} OAuth] 로그인 실패:`, error.message);
+    const message = getAuthErrorMessage(error);
+    return redirect(`/login?message=${encodeURIComponent(message)}`);
+  }
+
+  // [Step 3] OAuth 제공자 로그인 페이지로 리다이렉트
+  if (data.url) {
+    redirect(data.url);
+  }
+
+  // [Step 4] URL 생성 실패 시 에러 처리
+  redirect(
+    `/login?message=${encodeURIComponent("로그인 처리 중 오류가 발생했습니다.")}`,
+  );
+}
+
+/**
+ * [Google 로그인 액션]
+ * @see login-form.tsx - 구글 로그인 버튼 클릭 시 호출
+ */
+export async function signInWithGoogle() {
+  return signInWithProvider("google");
+}
+
+/**
+ * [Kakao 로그인 액션]
+ * @see login-form.tsx - 카카오 로그인 버튼 클릭 시 호출
+ */
+export async function signInWithKakao() {
+  return signInWithProvider("kakao", { queryParams: { prompt: "login" } });
+}
--- a/features/auth/components/login-form.tsx
+++ b/features/auth/components/login-form.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { AUTH_ROUTES } from "@/features/auth/constants";
+import {
+  login,
+  signInWithGoogle,
+  signInWithKakao,
+} from "@/features/auth/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+
+/**
+ * [로그인 폼 클라이언트 컴포넌트]
+ *
+ * 이메일 기억하기 기능을 제공하는 로그인 폼입니다.
+ * - localStorage를 사용하여 이메일 저장/불러오기
+ * - 체크박스 선택 시 이메일 자동 저장
+ * - 서버 액션(login)과 연동
+ * - 하이드레이션 이슈 해결을 위해 useEffect 사용
+ */
+export default function LoginForm() {
+  // ========== 상태 관리 ==========
+  // 서버와 클라이언트 초기 렌더링을 일치시키기 위해 초기값은 고정
+  const [email, setEmail] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return localStorage.getItem("auto-trade-saved-email") || "";
+  });
+  const [rememberMe, setRememberMe] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return !!localStorage.getItem("auto-trade-saved-email");
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  // ========== 마운트 시 localStorage 데이터 복구 ==========
+  // localStorage는 클라이언트 전용 외부 시스템이므로 useEffect에서 동기화하는 것이 올바른 패턴
+  // React 공식 문서: "외부 시스템과 동기화"는 useEffect의 정확한 사용 사례
+  // useState lazy initializer + window guard handles localStorage safely
+
+  // ========== 폼 제출 핸들러 ==========
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+
+    // localStorage 처리 (동기)
+    if (rememberMe) {
+      localStorage.setItem("auto-trade-saved-email", email);
+    } else {
+      localStorage.removeItem("auto-trade-saved-email");
+    }
+
+    // 서버 액션 호출 (리다이렉트 발생)
+    try {
+      await login(formData);
+    } catch (error) {
+      console.error("Login error:", error);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* ========== 로그인 폼 ========== */}
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        {/* ========== 이메일 입력 필드 ========== */}
+        <div className="space-y-2">
+          <Label htmlFor="email" className="text-sm font-medium">
+            이메일
+          </Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="your@email.com"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="h-11 transition-all duration-200"
+          />
+        </div>
+
+        {/* ========== 비밀번호 입력 필드 ========== */}
+        <div className="space-y-2">
+          <Label htmlFor="password" className="text-sm font-medium">
+            비밀번호
+          </Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            placeholder="••••••••"
+            autoComplete="current-password"
+            required
+            minLength={8}
+            pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$"
+            title="비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다."
+            className="h-11 transition-all duration-200"
+          />
+        </div>
+
+        {/* ========== 이메일 기억하기 & 비밀번호 찾기 ========== */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="remember"
+              checked={rememberMe}
+              onCheckedChange={(checked) => setRememberMe(checked === true)}
+            />
+            <Label
+              htmlFor="remember"
+              className="cursor-pointer text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              이메일 기억하기
+            </Label>
+          </div>
+          {/* 비밀번호 찾기 링크 */}
+          <Link
+            href={AUTH_ROUTES.FORGOT_PASSWORD}
+            className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
+          >
+            비밀번호 찾기
+          </Link>
+        </div>
+
+        {/* ========== 로그인 버튼 ========== */}
+        <Button
+          type="submit"
+          disabled={isLoading}
+          className="h-11 w-full bg-linear-to-r from-gray-900 to-black font-semibold shadow-lg transition-all duration-200 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"
+          size="lg"
+        >
+          {isLoading ? (
+            <span className="flex items-center gap-2">
+              <InlineSpinner />
+              로그인 중...
+            </span>
+          ) : (
+            "로그인"
+          )}
+        </Button>
+
+        {/* ========== 회원가입 링크 ========== */}
+        <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+          계정이 없으신가요?{" "}
+          <Link
+            href={AUTH_ROUTES.SIGNUP}
+            className="font-semibold text-gray-900 transition-colors hover:text-black dark:text-gray-100 dark:hover:text-white"
+          >
+            회원가입 하기
+          </Link>
+        </p>
+      </form>
+
+      {/* ========== 소셜 로그인 구분선 ========== */}
+      <div className="relative">
+        <Separator className="my-6" />
+        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-xs font-medium text-gray-500 dark:bg-gray-900 dark:text-gray-400">
+          또는 소셜 로그인
+        </span>
+      </div>
+
+      {/* ========== 소셜 로그인 버튼들 ========== */}
+      <div className="grid grid-cols-2 gap-3">
+        {/* ========== Google 로그인 버튼 ========== */}
+        <form action={signInWithGoogle}>
+          <Button
+            type="submit"
+            variant="outline"
+            className="h-11 w-full border-gray-200 bg-white shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-750"
+          >
+            <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="currentColor"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+            Google
+          </Button>
+        </form>
+
+        {/* ========== Kakao 로그인 버튼 ========== */}
+        <form action={signInWithKakao}>
+          <Button
+            type="submit"
+            variant="outline"
+            className="h-11 w-full border-none bg-[#FEE500] font-semibold text-[#3C1E1E] shadow-sm transition-all duration-200 hover:bg-[#FDD835] hover:shadow-md"
+          >
+            <svg
+              className="mr-2 h-5 w-5"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm-1.5 14.5h-3v-9h3v9zm3 0h-3v-5h3v5zm0-6h-3v-3h3v3z" />
+            </svg>
+            Kakao
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/features/auth/components/reset-password-form.tsx
+++ b/features/auth/components/reset-password-form.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { updatePassword } from "@/features/auth/actions";
+import {
+  resetPasswordSchema,
+  type ResetPasswordFormData,
+} from "@/features/auth/schemas/auth-schema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+import { useState } from "react";
+
+const DEFAULT_ERROR_MESSAGE =
+  "알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.";
+
+export default function ResetPasswordForm() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [serverError, setServerError] = useState("");
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(resetPasswordSchema),
+    mode: "onBlur",
+  });
+
+  const password = watch("password");
+  const confirmPassword = watch("confirmPassword");
+
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    setServerError("");
+    setIsLoading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("password", data.password);
+
+      const result = await updatePassword(formData);
+
+      if (result?.ok) {
+        const message = encodeURIComponent(result.message);
+        router.replace(`/login?message=${message}`);
+        return;
+      }
+
+      setServerError(result?.message || DEFAULT_ERROR_MESSAGE);
+    } catch (error) {
+      console.error("Password reset error:", error);
+      setServerError(DEFAULT_ERROR_MESSAGE);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
+      {serverError && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/50 dark:text-red-200">
+          {serverError}
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <Label htmlFor="password" className="text-sm font-medium">
+          새 비밀번호
+        </Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="새 비밀번호를 입력해주세요"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("password")}
+          className="h-11 transition-all duration-200"
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          8자 이상, 대문자/소문자/숫자/특수문자를 각 1개 이상 포함해야 합니다.
+        </p>
+        {errors.password && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword" className="text-sm font-medium">
+          새 비밀번호 확인
+        </Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          placeholder="새 비밀번호를 다시 입력해주세요"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("confirmPassword")}
+          className="h-11 transition-all duration-200"
+        />
+        {confirmPassword &&
+          password !== confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-red-600 dark:text-red-400">
+              비밀번호가 일치하지 않습니다.
+            </p>
+          )}
+        {confirmPassword &&
+          password === confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-green-600 dark:text-green-400">
+              비밀번호가 일치합니다.
+            </p>
+          )}
+        {errors.confirmPassword && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.confirmPassword.message}
+          </p>
+        )}
+      </div>
+
+      <Button
+        type="submit"
+        disabled={isLoading}
+        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">
+            <InlineSpinner />
+            변경 중...
+          </span>
+        ) : (
+          "비밀번호 변경"
+        )}
+      </Button>
+    </form>
+  );
+}
--- a/features/auth/components/session-manager.tsx
+++ b/features/auth/components/session-manager.tsx
@@ -0,0 +1,148 @@
+/**
+ * @file features/auth/components/session-manager.tsx
+ * @description 사용자 세션 타임아웃 및 자동 로그아웃 관리 컴포넌트
+ * @remarks
+ * - [레이어] Components/Infrastructure
+ * - [사용자 행동] 로그인 -> 활동 감지 -> 비활동 -> (경고) -> 로그아웃
+ * - [데이터 흐름] Event -> Zustand Store -> Timer -> Logout
+ * - [연관 파일] stores/session-store.ts, features/auth/constants.ts
+ */
+
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { createClient } from "@/utils/supabase/client";
+import { useRouter, usePathname } from "next/navigation";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useSessionStore } from "@/stores/session-store";
+import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
+// import { toast } from "sonner"; // Unused for now
+
+// 설정: 경고 표시 시간 (타임아웃 1분 전) - 현재 미사용 (즉시 로그아웃)
+// const WARNING_MS = 60 * 1000;
+
+/**
+ * 세션 관리자 컴포넌트
+ * 사용자 활동을 감지하여 세션 연장 및 타임아웃 처리
+ * @returns 숨겨진 기능성 컴포넌트 (Global Layout에 포함)
+ * @remarks RootLayout에 포함되어 전역적으로 동작
+ * @see layout.tsx - RootLayout에서 렌더링
+ * @see session-store.ts - 마지막 활동 시간 관리
+ */
+export function SessionManager() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // [State] 타임아웃 경고 모달 표시 여부 (현재 미사용)
+  const [showWarning, setShowWarning] = useState(false);
+
+  // 인증 페이지에서는 동작하지 않음
+  const isAuthPage = ["/login", "/signup", "/forgot-password"].includes(
+    pathname,
+  );
+
+  const { setLastActive } = useSessionStore();
+
+  /**
+   * 로그아웃 처리 핸들러
+   * @see session-timer.tsx - 타임아웃 시 동일한 로직 필요 가능성 있음
+   */
+  const handleLogout = useCallback(async () => {
+    // [Step 1] Supabase 클라이언트 생성
+    const supabase = createClient();
+
+    // [Step 2] 서버 사이드 로그아웃 요청
+    await supabase.auth.signOut();
+
+    // [Step 3] 로컬 스토어 및 세션 정보 초기화
+    useSessionStore.persist.clearStorage();
+
+    // [Step 4] 로그인 페이지로 리다이렉트 및 메시지 표시
+    router.push("/login?message=세션이 만료되었습니다. 다시 로그인해주세요.");
+    router.refresh();
+  }, [router]);
+
+  useEffect(() => {
+    if (isAuthPage) return;
+
+    // 마지막 활동 시간 업데이트 함수
+    const updateLastActive = () => {
+      setLastActive(Date.now());
+      if (showWarning) setShowWarning(false);
+    };
+
+    // [Step 1] 사용자 활동 이벤트 감지 (마우스, 키보드, 스크롤, 터치)
+    const events = ["mousedown", "keydown", "scroll", "touchstart"];
+    const handleActivity = () => updateLastActive();
+
+    events.forEach((event) => window.addEventListener(event, handleActivity));
+
+    // [Step 2] 주기적(1초)으로 세션 만료 여부 확인
+    const intervalId = setInterval(async () => {
+      const currentLastActive = useSessionStore.getState().lastActive;
+      const now = Date.now();
+      const timeSinceLastActive = now - currentLastActive;
+
+      // 타임아웃 초과 시 로그아웃
+      if (timeSinceLastActive >= SESSION_TIMEOUT_MS) {
+        await handleLogout();
+      }
+      // 경고 로직 (현재 비활성)
+      // else if (timeSinceLastActive >= TIMEOUT_MS - WARNING_MS) {
+      //   setShowWarning(true);
+      // }
+    }, 1000);
+
+    // [Step 3] 탭 활성화/컴퓨터 깨어남 감지 (절전 모드 대응)
+    const handleVisibilityChange = async () => {
+      if (!document.hidden) {
+        const currentLastActive = useSessionStore.getState().lastActive;
+        const now = Date.now();
+
+        // 절전 모드 복귀 시 즉시 만료 체크
+        if (now - currentLastActive >= SESSION_TIMEOUT_MS) {
+          await handleLogout();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      events.forEach((event) =>
+        window.removeEventListener(event, handleActivity),
+      );
+      clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [pathname, isAuthPage, showWarning, handleLogout, setLastActive]);
+
+  return (
+    <AlertDialog open={showWarning} onOpenChange={setShowWarning}>
+      <AlertDialogContent>
+        {/* ========== 헤더: 제목 및 설명 ========== */}
+        <AlertDialogHeader>
+          <AlertDialogTitle>로그아웃 예정</AlertDialogTitle>
+          <AlertDialogDescription>
+            장시간 활동이 없어 1분 뒤 로그아웃됩니다. 계속 하시려면 아무 키나
+            누르거나 클릭해주세요.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {/* ========== 하단: 액션 버튼 ========== */}
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={() => setShowWarning(false)}>
+            로그인 연장
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
--- a/features/auth/components/session-timer.tsx
+++ b/features/auth/components/session-timer.tsx
@@ -0,0 +1,70 @@
+/**
+ * @file features/auth/components/session-timer.tsx
+ * @description 헤더에 표시되는 세션 만료 카운트다운 컴포넌트
+ * @remarks
+ * - [레이어] Components/UI
+ * - [사용자 행동] 남은 시간 확인 -> 만료 임박 시 붉은색 경고
+ * - [데이터 흐름] Zustand Store -> Calculation -> UI
+ * - [연관 파일] stores/session-store.ts, features/layout/header.tsx
+ */
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSessionStore } from "@/stores/session-store";
+import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
+
+/**
+ * 세션 만료 타이머 컴포넌트
+ * 남은 시간을 mm:ss 형태로 표시 (10분 미만 시 경고 스타일)
+ * @returns 시간 표시 배지 (모바일 숨김)
+ * @remarks 1초마다 리렌더링 발생
+ * @see header.tsx - 로그인 상태일 때 헤더에 표시
+ */
+export function SessionTimer() {
+  const lastActive = useSessionStore((state) => state.lastActive);
+
+  // [State] 남은 시간 (밀리초)
+  const [timeLeft, setTimeLeft] = useState<number>(SESSION_TIMEOUT_MS);
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = Date.now();
+      const passed = now - lastActive;
+
+      // [Step 1] 남은 시간 계산 (음수 방지)
+      const remaining = Math.max(0, SESSION_TIMEOUT_MS - passed);
+      setTimeLeft(remaining);
+    };
+
+    calculateTimeLeft(); // 초기 실행
+
+    // [Step 2] 1초마다 남은 시간 갱신
+    const interval = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(interval);
+  }, [lastActive]);
+
+  // [Step 3] 시간 포맷팅 (mm:ss)
+  const minutes = Math.floor(timeLeft / 60000);
+  const seconds = Math.floor((timeLeft % 60000) / 1000);
+
+  // [Step 4] 10분 미만일 때 긴급 스타일 적용
+  const isUrgent = timeLeft < 10 * 60 * 1000;
+
+  return (
+    <div
+      className={`text-sm font-medium tabular-nums px-3 py-1.5 rounded-md border bg-background/50 backdrop-blur-md hidden md:block transition-colors ${
+        isUrgent
+          ? "text-red-500 border-red-200 bg-red-50/50 dark:bg-red-900/20 dark:border-red-800"
+          : "text-muted-foreground border-border/40"
+      }`}
+    >
+      {/* ========== 라벨 ========== */}
+      <span className="mr-2">세션 만료</span>
+      {/* ========== 시간 표시 ========== */}
+      {minutes.toString().padStart(2, "0")}:
+      {seconds.toString().padStart(2, "0")}
+    </div>
+  );
+}
--- a/features/auth/components/signup-form.tsx
+++ b/features/auth/components/signup-form.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signup } from "@/features/auth/actions";
+import {
+  signupSchema,
+  type SignupFormData,
+} from "@/features/auth/schemas/auth-schema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+import { useState } from "react";
+
+/**
+ * [회원가입 폼 클라이언트 컴포넌트 - React Hook Form 버전]
+ *
+ * React Hook Form과 Zod를 사용한 회원가입 폼입니다.
+ * - 타입 안전한 폼 검증
+ * - 자동 에러 메시지 관리
+ * - 비밀번호/비밀번호 확인 일치 검증
+ * - 로딩 상태 표시
+ *
+ * @see app/signup/page.tsx - 이 컴포넌트를 사용하는 페이지
+ */
+export default function SignupForm() {
+  // ========== 로딩 상태 ==========
+  const [isLoading, setIsLoading] = useState(false);
+  const [serverError, setServerError] = useState("");
+
+  // ========== React Hook Form 설정 ==========
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    mode: "onBlur", // 포커스 아웃 시 검증
+  });
+
+  // 비밀번호 실시간 감시 (일치 여부 표시용)
+  const password = watch("password");
+  const confirmPassword = watch("confirmPassword");
+
+  // ========== 폼 제출 핸들러 ==========
+  const onSubmit = async (data: SignupFormData) => {
+    setServerError("");
+    setIsLoading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("email", data.email);
+      formData.append("password", data.password);
+
+      await signup(formData);
+    } catch (error) {
+      console.error("Signup error:", error);
+      setServerError("회원가입 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
+      {/* ========== 서버 에러 메시지 표시 ========== */}
+      {serverError && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/50 dark:text-red-200">
+          {serverError}
+        </div>
+      )}
+
+      {/* ========== 이메일 입력 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="email" className="text-sm font-medium">
+          이메일
+        </Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="your@email.com"
+          autoComplete="email"
+          disabled={isLoading}
+          {...register("email")}
+          className="h-11 transition-all duration-200"
+        />
+        {errors.email && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.email.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 비밀번호 입력 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="password" className="text-sm font-medium">
+          비밀번호
+        </Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="••••••••"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("password")}
+          className="h-11 transition-all duration-200"
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          최소 8자 이상, 대문자, 소문자, 숫자, 특수문자 포함
+        </p>
+        {errors.password && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 비밀번호 확인 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword" className="text-sm font-medium">
+          비밀번호 확인
+        </Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          placeholder="••••••••"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("confirmPassword")}
+          className="h-11 transition-all duration-200"
+        />
+        {/* 비밀번호 불일치 시 실시간 피드백 */}
+        {confirmPassword &&
+          password !== confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-red-600 dark:text-red-400">
+              비밀번호가 일치하지 않습니다
+            </p>
+          )}
+        {/* 비밀번호 일치 시 확인 메시지 */}
+        {confirmPassword &&
+          password === confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-green-600 dark:text-green-400">
+              비밀번호가 일치합니다 ✓
+            </p>
+          )}
+        {/* Zod 검증 에러 */}
+        {errors.confirmPassword && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.confirmPassword.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 회원가입 버튼 ========== */}
+      <Button
+        type="submit"
+        disabled={isLoading}
+        className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold shadow-lg transition-all duration-200 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">
+            <InlineSpinner />
+            회원가입 중...
+          </span>
+        ) : (
+          "회원가입 완료"
+        )}
+      </Button>
+    </form>
+  );
+}
--- a/features/auth/constants.ts
+++ b/features/auth/constants.ts
@@ -0,0 +1,257 @@
+/**
+ * @file features/auth/constants.ts
+ * @description 인증 모듈 전반에서 사용되는 상수, 에러 메시지, 설정값 정의
+ * @remarks
+ * - [레이어] Core/Constants
+ * - [사용자 행동] 로그인/회원가입/비밀번호 찾기 등 인증 전반
+ * - [데이터 흐름] UI/Service -> Constants -> UI (메시지 표시)
+ * - [주의사항] 환경 변수(SESSION_TIMEOUT_MINUTES)에 의존하는 상수 포함
+ */
+
+// ========================================
+// 에러 메시지 상수
+// ========================================
+
+/**
+ * 인증 에러 메시지 매핑
+ * Supabase의 영문 에러를 한글로 변환하기 위한 매핑 테이블
+ */
+export const AUTH_ERROR_MESSAGES = {
+  // === 로그인/회원가입 관련 ===
+  INVALID_CREDENTIALS: "이메일 또는 비밀번호가 일치하지 않습니다.",
+  USER_EXISTS: "이미 가입된 이메일 주소입니다.",
+  EMAIL_NOT_CONFIRMED: "이메일 인증이 완료되지 않았습니다.",
+
+  // === 입력값 검증 ===
+  EMPTY_FIELDS: "이메일과 비밀번호를 모두 입력해 주세요.",
+  EMPTY_EMAIL: "이메일을 입력해 주세요.",
+  INVALID_EMAIL: "올바른 이메일 형식이 아닙니다.",
+
+  // === 비밀번호 관련 ===
+  PASSWORD_TOO_SHORT: "비밀번호는 최소 8자 이상이어야 합니다.",
+  PASSWORD_TOO_WEAK:
+    "비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다.",
+  PASSWORD_MISMATCH: "비밀번호가 일치하지 않습니다.",
+  PASSWORD_SAME_AS_OLD: "새 비밀번호는 기존 비밀번호와 달라야 합니다.",
+
+  // === 비밀번호 재설정 ===
+  PASSWORD_RESET_SENT: "비밀번호 재설정 링크를 이메일로 발송했습니다.",
+  PASSWORD_RESET_SUCCESS: "비밀번호가 성공적으로 변경되었습니다.",
+  PASSWORD_RESET_FAILED: "비밀번호 변경에 실패했습니다.",
+
+  // === 인증 링크 ===
+  INVALID_AUTH_LINK: "인증 링크가 만료되었거나 유효하지 않습니다.",
+  EMAIL_VERIFIED_SUCCESS: "이메일 인증이 완료되었습니다. 로그인해 주세요.",
+
+  // === 소셜 로그인 (OAuth) 관련 ===
+  OAUTH_ACCESS_DENIED: "로그인이 취소되었습니다.",
+  OAUTH_SERVER_ERROR:
+    "인증 서버 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+  OAUTH_INVALID_SCOPE:
+    "필요한 권한이 설정되지 않았습니다. 개발자 설정 확인이 필요합니다.",
+  OAUTH_UNAUTHORIZED_CLIENT:
+    "인증 앱 설정(Client ID/Secret)에 문제가 있습니다.",
+  OAUTH_UNKNOWN_ERROR: "소셜 로그인 중 알 수 없는 오류가 발생했습니다.",
+
+  // === Rate Limit ===
+  EMAIL_RATE_LIMIT:
+    "이메일 발송 제한을 초과했습니다. 잠시 후 다시 시도해 주세요.",
+  EMAIL_RATE_LIMIT_DETAILED:
+    "이메일 발송 제한을 초과했습니다. Supabase 무료 플랜은 시간당 이메일 발송 횟수가 제한됩니다. 약 1시간 후에 다시 시도해 주세요.",
+
+  // === 기타 ===
+  DEFAULT: "요청을 처리하는 중 오류가 발생했습니다.",
+} as const;
+
+// ========================================
+// Supabase Auth 에러 코드 매핑
+// ========================================
+
+export const AUTH_ERROR_CODE_MESSAGES = {
+  anonymous_provider_disabled: "익명 로그인은 비활성화되어 있습니다.",
+  bad_code_verifier: "PKCE code verifier가 일치하지 않습니다.",
+  bad_json: "요청 본문이 올바른 JSON이 아닙니다.",
+  bad_jwt: "Authorization 헤더의 JWT가 유효하지 않습니다.",
+  bad_oauth_callback: "OAuth 콜백에 필요한 값(state)이 없습니다.",
+  bad_oauth_state: "OAuth state 형식이 올바르지 않습니다.",
+  captcha_failed: "CAPTCHA 검증에 실패했습니다.",
+  conflict: "요청 충돌이 발생했습니다. 잠시 후 다시 시도해주세요.",
+  email_address_invalid: "예시/테스트 도메인은 사용할 수 없습니다.",
+  email_address_not_authorized:
+    "기본 SMTP 사용 시 허용되지 않은 이메일 주소입니다.",
+  email_conflict_identity_not_deletable:
+    "이메일 충돌로 이 아이덴티티를 삭제할 수 없습니다.",
+  email_exists: "이미 가입된 이메일 주소입니다.",
+  email_not_confirmed: "이메일 인증이 완료되지 않았습니다.",
+  email_provider_disabled: "이메일/비밀번호 가입이 비활성화되어 있습니다.",
+  flow_state_expired: "로그인 흐름이 만료되었습니다. 다시 시도해주세요.",
+  flow_state_not_found: "로그인 흐름을 찾을 수 없습니다. 다시 시도해주세요.",
+  hook_payload_invalid_content_type:
+    "훅 페이로드의 Content-Type이 올바르지 않습니다.",
+  hook_payload_over_size_limit: "훅 페이로드가 최대 크기를 초과했습니다.",
+  hook_timeout: "훅 요청 시간이 초과되었습니다.",
+  hook_timeout_after_retry: "훅 요청 재시도 후에도 시간이 초과되었습니다.",
+  identity_already_exists: "이미 연결된 아이덴티티입니다.",
+  identity_not_found: "아이덴티티를 찾을 수 없습니다.",
+  insufficient_aal: "추가 인증이 필요합니다.",
+  invalid_credentials: "이메일 또는 비밀번호가 일치하지 않습니다.",
+  invite_not_found: "초대 링크가 만료되었거나 이미 사용되었습니다.",
+  manual_linking_disabled: "계정 연결 기능이 비활성화되어 있습니다.",
+  mfa_challenge_expired: "MFA 인증 시간이 초과되었습니다.",
+  mfa_factor_name_conflict: "MFA 요인 이름이 중복되었습니다.",
+  mfa_factor_not_found: "MFA 요인을 찾을 수 없습니다.",
+  mfa_ip_address_mismatch: "MFA 등록 시작/종료 IP가 일치하지 않습니다.",
+  mfa_phone_enroll_not_enabled: "전화 MFA 등록이 비활성화되어 있습니다.",
+  mfa_phone_verify_not_enabled: "전화 MFA 검증이 비활성화되어 있습니다.",
+  mfa_totp_enroll_not_enabled: "TOTP MFA 등록이 비활성화되어 있습니다.",
+  mfa_totp_verify_not_enabled: "TOTP MFA 검증이 비활성화되어 있습니다.",
+  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 검증이 비활성화되어 있습니다.",
+  no_authorization: "Authorization 헤더가 필요합니다.",
+  not_admin: "관리자 권한이 없습니다.",
+  oauth_provider_not_supported: "OAuth 제공자가 비활성화되어 있습니다.",
+  otp_disabled: "OTP 로그인이 비활성화되어 있습니다.",
+  otp_expired: "OTP가 만료되었습니다.",
+  over_email_send_rate_limit: "이메일 발송 제한을 초과했습니다.",
+  over_request_rate_limit: "요청 제한을 초과했습니다.",
+  over_sms_send_rate_limit: "SMS 발송 제한을 초과했습니다.",
+  phone_exists: "이미 가입된 전화번호입니다.",
+  phone_not_confirmed: "전화번호 인증이 완료되지 않았습니다.",
+  phone_provider_disabled: "전화번호 가입이 비활성화되어 있습니다.",
+  provider_disabled: "OAuth 제공자가 비활성화되어 있습니다.",
+  provider_email_needs_verification: "OAuth 이메일 인증이 필요합니다.",
+  reauthentication_needed: "비밀번호 변경을 위해 재인증이 필요합니다.",
+  reauthentication_not_valid: "재인증 코드가 유효하지 않습니다.",
+  refresh_token_already_used: "세션이 만료되었습니다. 다시 로그인해주세요.",
+  refresh_token_not_found: "세션을 찾을 수 없습니다.",
+  request_timeout: "요청 시간이 초과되었습니다.",
+  same_password: "새 비밀번호는 기존 비밀번호와 달라야 합니다.",
+  saml_assertion_no_email: "SAML 응답에 이메일이 없습니다.",
+  saml_assertion_no_user_id: "SAML 응답에 사용자 ID가 없습니다.",
+  saml_entity_id_mismatch: "SAML 엔티티 ID가 일치하지 않습니다.",
+  saml_idp_already_exists: "SAML IdP가 이미 등록되어 있습니다.",
+  saml_idp_not_found: "SAML IdP를 찾을 수 없습니다.",
+  saml_metadata_fetch_failed: "SAML 메타데이터를 불러오지 못했습니다.",
+  saml_provider_disabled: "SAML SSO가 비활성화되어 있습니다.",
+  saml_relay_state_expired: "SAML relay state가 만료되었습니다.",
+  saml_relay_state_not_found: "SAML relay state를 찾을 수 없습니다.",
+  session_expired: "세션이 만료되었습니다.",
+  session_not_found: "세션을 찾을 수 없습니다.",
+  signup_disabled: "회원가입이 비활성화되어 있습니다.",
+  single_identity_not_deletable: "유일한 아이덴티티는 삭제할 수 없습니다.",
+  sms_send_failed: "SMS 발송에 실패했습니다.",
+  sso_domain_already_exists: "SSO 도메인이 이미 등록되어 있습니다.",
+  sso_provider_not_found: "SSO 제공자를 찾을 수 없습니다.",
+  too_many_enrolled_mfa_factors: "등록 가능한 MFA 요인 수를 초과했습니다.",
+  unexpected_audience: "토큰 audience가 일치하지 않습니다.",
+  unexpected_failure: "인증 서버 오류가 발생했습니다.",
+  user_already_exists: "이미 존재하는 사용자입니다.",
+  user_banned: "계정이 일시적으로 차단되었습니다.",
+  user_not_found: "사용자를 찾을 수 없습니다.",
+  user_sso_managed: "SSO 사용자 정보는 수정할 수 없습니다.",
+  validation_failed: "요청 값 형식이 올바르지 않습니다.",
+  weak_password: "비밀번호가 정책을 만족하지 않습니다.",
+} as const;
+
+export const AUTH_ERROR_STATUS_MESSAGES = {
+  403: "요청한 기능을 사용할 수 없습니다.",
+  422: "요청을 처리할 수 없는 상태입니다.",
+  429: "요청이 너무 많습니다. 잠시 후 다시 시도해주세요.",
+  500: "인증 서버 오류가 발생했습니다.",
+  501: "요청한 기능이 활성화되어 있지 않습니다.",
+} as const;
+
+// ========================================
+// 라우트 경로 상수
+// ========================================
+
+/**
+ * 인증 관련 라우트 경로
+ */
+export const AUTH_ROUTES = {
+  LOGIN: "/login",
+  SIGNUP: "/signup",
+  FORGOT_PASSWORD: "/forgot-password",
+  RESET_PASSWORD: "/reset-password",
+  AUTH_CONFIRM: "/auth/confirm",
+  AUTH_CALLBACK: "/auth/callback",
+  HOME: "/",
+  DASHBOARD: "/dashboard",
+} as const;
+
+/**
+ * 로그인 없이 접근 가능한 페이지 목록
+ * 미들웨어에서 라우트 보호에 사용
+ */
+export const PUBLIC_AUTH_PAGES = [
+  AUTH_ROUTES.LOGIN,
+  AUTH_ROUTES.SIGNUP,
+  AUTH_ROUTES.FORGOT_PASSWORD,
+  AUTH_ROUTES.RESET_PASSWORD,
+  AUTH_ROUTES.AUTH_CONFIRM,
+  AUTH_ROUTES.AUTH_CALLBACK,
+] as const;
+
+// 복구 플로우 전용 쿠키 (비밀번호 재설정 화면 외 접근 차단에 사용)
+export const RECOVERY_COOKIE_NAME = "sb-recovery";
+export const RECOVERY_COOKIE_MAX_AGE_SECONDS = 10 * 60;
+
+// ========================================
+// 검증 규칙 상수
+// ========================================
+
+/**
+ * 비밀번호 검증 규칙
+ * - 최소 8자 이상
+ * - 대문자 1개 이상
+ * - 소문자 1개 이상
+ * - 숫자 1개 이상
+ * - 특수문자 1개 이상
+ */
+export const PASSWORD_RULES = {
+  MIN_LENGTH: 8,
+  REQUIRE_UPPERCASE: true,
+  REQUIRE_LOWERCASE: true,
+  REQUIRE_NUMBER: true,
+  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;
+
+// ========================================
+// 타입 정의
+// ========================================
+
+/**
+ * 인증 폼 데이터 타입
+ */
+export type AuthFormData = {
+  email: string;
+  password: string;
+};
+
+/**
+ * 인증 에러 타입
+ */
+export type AuthError = {
+  message: string;
+  type: "validation" | "auth" | "unknown";
+};
--- a/features/auth/errors.ts
+++ b/features/auth/errors.ts
@@ -0,0 +1,30 @@
+import {
+  AUTH_ERROR_CODE_MESSAGES,
+  AUTH_ERROR_MESSAGES,
+  AUTH_ERROR_STATUS_MESSAGES,
+} from "./constants";
+
+export type AuthApiErrorLike = {
+  message?: string | null;
+  code?: string | null;
+  status?: number | null;
+};
+
+/**
+ * Supabase Auth 에러 데이터를 인간이 읽을 수 있는 한글 메시지로 변환합니다.
+ */
+export function getAuthErrorMessage(error: AuthApiErrorLike): string {
+  if (error.code && error.code in AUTH_ERROR_CODE_MESSAGES) {
+    return AUTH_ERROR_CODE_MESSAGES[
+      error.code as keyof typeof AUTH_ERROR_CODE_MESSAGES
+    ];
+  }
+
+  if (error.status && error.status in AUTH_ERROR_STATUS_MESSAGES) {
+    return AUTH_ERROR_STATUS_MESSAGES[
+      error.status as keyof typeof AUTH_ERROR_STATUS_MESSAGES
+    ];
+  }
+
+  return AUTH_ERROR_MESSAGES.DEFAULT;
+}
--- a/features/auth/schemas/auth-schema.ts
+++ b/features/auth/schemas/auth-schema.ts
@@ -0,0 +1,69 @@
+import { z } from "zod";
+import { PASSWORD_RULES } from "@/features/auth/constants";
+
+const passwordSchema = z
+  .string()
+  .min(PASSWORD_RULES.MIN_LENGTH, {
+    message: `비밀번호는 최소 ${PASSWORD_RULES.MIN_LENGTH}자 이상이어야 합니다.`,
+  })
+  .regex(/[A-Z]/, {
+    message: "대문자를 최소 1개 이상 포함해야 합니다.",
+  })
+  .regex(/[a-z]/, {
+    message: "소문자를 최소 1개 이상 포함해야 합니다.",
+  })
+  .regex(/[0-9]/, {
+    message: "숫자를 최소 1개 이상 포함해야 합니다.",
+  })
+  .regex(/[!@#$%^&*(),.?":{}|<>]/, {
+    message: "특수문자를 최소 1개 이상 포함해야 합니다.",
+  });
+
+export const signupSchema = z
+  .object({
+    email: z
+      .string()
+      .min(1, { message: "이메일을 입력해 주세요." })
+      .email({ message: "유효한 이메일 형식이 아닙니다." }),
+    password: passwordSchema,
+    confirmPassword: z
+      .string()
+      .min(1, { message: "비밀번호 확인을 입력해 주세요." }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "비밀번호가 일치하지 않습니다.",
+    path: ["confirmPassword"],
+  });
+
+export const resetPasswordSchema = z
+  .object({
+    password: passwordSchema,
+    confirmPassword: z
+      .string()
+      .min(1, { message: "비밀번호 확인을 입력해 주세요." }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "비밀번호가 일치하지 않습니다.",
+    path: ["confirmPassword"],
+  });
+
+export const loginSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "이메일을 입력해 주세요." })
+    .email({ message: "유효한 이메일 형식이 아닙니다." }),
+  password: z.string().min(1, { message: "비밀번호를 입력해 주세요." }),
+  rememberMe: z.boolean().optional(),
+});
+
+export const forgotPasswordSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "이메일을 입력해 주세요." })
+    .email({ message: "유효한 이메일 형식이 아닙니다." }),
+});
+
+export type SignupFormData = z.infer<typeof signupSchema>;
+export type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+export type LoginFormData = z.infer<typeof loginSchema>;
+export type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
--- a/features/home/components/spline-scene.tsx
+++ b/features/home/components/spline-scene.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import Spline from "@splinetool/react-spline";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface SplineSceneProps {
+  sceneUrl: string;
+  className?: string;
+}
+
+export function SplineScene({ sceneUrl, className }: SplineSceneProps) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <div className={cn("relative h-full w-full", className)}>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-zinc-900">
+          <div className="h-10 w-10 animate-spin rounded-full border-4 border-zinc-200 border-t-brand-500 dark:border-zinc-800" />
+        </div>
+      )}
+      <Spline
+        scene={sceneUrl}
+        onLoad={() => setIsLoading(false)}
+        className="h-full w-full"
+      />
+    </div>
+  );
+}
--- a/features/layout/components/header.tsx
+++ b/features/layout/components/header.tsx
@@ -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>
+  );
+}
--- a/features/layout/components/sidebar.tsx
+++ b/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>
+  );
+}
--- a/features/layout/components/user-menu.tsx
+++ b/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>
+  );
+}
--- a/features/layout/types/index.ts
+++ b/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;
+}
--- a/hooks/queries/use-user-query.ts
+++ b/hooks/queries/use-user-query.ts
@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+import { createClient } from "@/utils/supabase/client";
+
+/**
+ * [사용자 정보 조회 쿼리]
+ *
+ * 현재 로그인한 사용자의 정보를 조회합니다.
+ * - 자동 캐싱 및 재검증
+ * - 로딩/에러 상태 자동 관리
+ *
+ * @example
+ * ```tsx
+ * import { useUserQuery } from '@/hooks/queries/use-user-query';
+ *
+ * function Profile() {
+ *   const { data: user, isLoading, error } = useUserQuery();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!user) return <div>Not logged in</div>;
+ *
+ *   return <div>Welcome, {user.email}</div>;
+ * }
+ * ```
+ */
+export function useUserQuery() {
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: async () => {
+      const supabase = createClient();
+      const {
+        data: { user },
+        error,
+      } = await supabase.auth.getUser();
+
+      if (error) throw error;
+      return user;
+    },
+    staleTime: 5 * 60 * 1000, // 5분 - 사용자 정보는 자주 변경되지 않음
+    retry: 1,
+  });
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/middleware.ts
+++ b/middleware.ts
@@ -0,0 +1,33 @@
+import { type NextRequest } from "next/server";
+import { updateSession } from "@/utils/supabase/middleware";
+
+/**
+ * [Next.js 미들웨어 진입점]
+ *
+ * 웹사이트의 모든 요청은 이 함수를 가장 먼저 거쳐갑니다.
+ * 여기서 로그인 여부를 체크하거나 세션을 갱신합니다.
+ */
+export async function middleware(request: NextRequest) {
+  // 방금 만든 updateSession 함수를 호출하여 쿠키/세션을 관리합니다.
+  return await updateSession(request);
+}
+
+/**
+ * [미들웨어 설정]
+ *
+ * 미들웨어가 '어떤 경로'에서 실행될지, '어떤 경로는 무시할지' 정하는 규칙입니다.
+ */
+export const config = {
+  matcher: [
+    /*
+     * 아래 정규식(Regex)은 다음 파일들을 제외(exclude)하고 모든 요청을 미들웨어로 보냅니다:
+     * - _next/static (이미 빌드된 정적 파일들)
+     * - _next/image (이미지 최적화 API)
+     * - favicon.ico (파비콘 아이콘)
+     * - .svg, .png, .jpg 등 이미지 파일들
+     *
+     * 즉, html 페이지 요청이나 데이터 요청에만 미들웨어가 작동하도록 하여 성능을 최적화합니다.
+     */
+    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
+};
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "auto-trade",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "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",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.1",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
--- a/playwright-report/index.html
+++ b/playwright-report/index.html
--- a/playwright.config.ts
+++ b/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,
+  },
+});
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/providers/query-provider.tsx
+++ b/providers/query-provider.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+
+/**
+ * [React Query Provider]
+ *
+ * 애플리케이션 전역에 React Query 기능을 제공합니다.
+ * - 서버 상태 관리
+ * - 자동 캐싱 및 재검증
+ * - 로딩/에러 상태 관리
+ * - DevTools 통합 (개발 환경)
+ *
+ * @see https://tanstack.com/query/latest
+ */
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  // ========== QueryClient 생성 ==========
+  // useState로 감싸서 리렌더링 시에도 동일한 인스턴스 유지
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // ========== 쿼리 기본 옵션 ==========
+            staleTime: 60 * 1000, // 1분 - 데이터가 신선한 것으로 간주되는 시간
+            gcTime: 5 * 60 * 1000, // 5분 - 캐시 유지 시간 (이전 cacheTime)
+            retry: 1, // 실패 시 재시도 횟수
+            refetchOnWindowFocus: false, // 윈도우 포커스 시 자동 재검증 비활성화
+          },
+          mutations: {
+            // ========== Mutation 기본 옵션 ==========
+            retry: 0, // Mutation은 재시도하지 않음
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {/* ========== DevTools (개발 환경에서만 표시) ========== */}
+      <ReactQueryDevtools initialIsOpen={false} position="bottom" />
+    </QueryClientProvider>
+  );
+}
--- a/public/file.svg
+++ b/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/next.svg
+++ b/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/stores/auth-store.ts
+++ b/stores/auth-store.ts
@@ -0,0 +1,79 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/**
+ * [사용자 정보 타입]
+ */
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  avatar?: string;
+  createdAt?: string;
+}
+
+/**
+ * [인증 상태 인터페이스]
+ */
+interface AuthState {
+  // ========== 상태 ==========
+  user: User | null;
+  isAuthenticated: boolean;
+
+  // ========== 액션 ==========
+  setUser: (user: User | null) => void;
+  updateUser: (updates: Partial<User>) => void;
+  logout: () => void;
+}
+
+/**
+ * [인증 스토어]
+ *
+ * 전역 사용자 인증 상태를 관리합니다.
+ * - localStorage에 자동 저장 (persist 미들웨어)
+ * - 페이지 새로고침 시에도 상태 유지
+ *
+ * @example
+ * ```tsx
+ * import { useAuthStore } from '@/stores/auth-store';
+ *
+ * function Profile() {
+ *   const { user, isAuthenticated, setUser } = useAuthStore();
+ *
+ *   if (!isAuthenticated) return <Login />;
+ *   return <div>Welcome, {user?.email}</div>;
+ * }
+ * ```
+ */
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      // ========== 초기 상태 ==========
+      user: null,
+      isAuthenticated: false,
+
+      // ========== 사용자 설정 ==========
+      setUser: (user) =>
+        set({
+          user,
+          isAuthenticated: !!user,
+        }),
+
+      // ========== 사용자 정보 업데이트 ==========
+      updateUser: (updates) =>
+        set((state) => ({
+          user: state.user ? { ...state.user, ...updates } : null,
+        })),
+
+      // ========== 로그아웃 ==========
+      logout: () =>
+        set({
+          user: null,
+          isAuthenticated: false,
+        }),
+    }),
+    {
+      name: "auth-storage", // localStorage 키 이름
+    },
+  ),
+);
--- a/stores/session-store.ts
+++ b/stores/session-store.ts
@@ -0,0 +1,46 @@
+/**
+ * @file stores/session-store.ts
+ * @description 사용자 세션 상태(마지막 활동 시간)를 관리하는 Zustand 스토어
+ * @remarks
+ * - [레이어] Infrastructure/State
+ * - [데이터 흐름] User Activity -> SessionStore -> LocalStorage
+ * - [연관 파일] session-manager.tsx (Setter), session-timer.tsx (Getter)
+ * - [주의사항] localStorage를 사용하여 탭 간 상태 공유 (partialize 적용)
+ */
+
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+/**
+ * 세션 상태 인터페이스
+ */
+interface SessionState {
+  /** 마지막 사용자 활동 시간 (Timestamp) */
+  lastActive: number;
+  /** 활동 시간 갱신 함수 */
+  setLastActive: (time: number) => void;
+}
+
+/**
+ * 세션 관리 스토어 hook
+ * @returns {SessionState} lastActive, setLastActive
+ * @remarks persist 미들웨어를 통해 브라우저 새로고침/재접속 시에도 상태 유지
+ * @see session-manager.tsx - 사용자 활동 감지 시 setLastActive 호출
+ * @see session-timer.tsx - 남은 시간 계산을 위해 lastActive 구독
+ */
+export const useSessionStore = create<SessionState>()(
+  persist(
+    (set) => ({
+      // [State] 초기값: 스토어 생성 시점
+      lastActive: Date.now(),
+
+      // [Action] 활동 시간 업데이트
+      setLastActive: (time) => set({ lastActive: time }),
+    }),
+    {
+      name: "session-storage", // localStorage Key
+      storage: createJSONStorage(() => localStorage), // localStorage 사용
+      partialize: (state) => ({ lastActive: state.lastActive }),
+    },
+  ),
+);
--- a/stores/ui-store.ts
+++ b/stores/ui-store.ts
@@ -0,0 +1,111 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/**
+ * [UI 상태 인터페이스]
+ */
+interface UIState {
+  // ========== 테마 ==========
+  theme: "light" | "dark" | "system";
+  setTheme: (theme: "light" | "dark" | "system") => void;
+
+  // ========== 사이드바 ==========
+  isSidebarOpen: boolean;
+  toggleSidebar: () => void;
+  setSidebarOpen: (isOpen: boolean) => void;
+
+  // ========== 모달 ==========
+  isModalOpen: boolean;
+  modalContent: React.ReactNode | null;
+  openModal: (content: React.ReactNode) => void;
+  closeModal: () => void;
+
+  // ========== 토스트/알림 ==========
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, "id">) => void;
+  removeToast: (id: string) => void;
+}
+
+/**
+ * [토스트 메시지 타입]
+ */
+export interface Toast {
+  id: string;
+  type: "success" | "error" | "warning" | "info";
+  message: string;
+  duration?: number;
+}
+
+/**
+ * [UI 스토어]
+ *
+ * 전역 UI 상태를 관리합니다.
+ * - 테마 설정 (다크/라이트 모드)
+ * - 사이드바 열림/닫힘
+ * - 모달 상태
+ * - 토스트 알림
+ *
+ * @example
+ * ```tsx
+ * import { useUIStore } from '@/stores/ui-store';
+ *
+ * function Header() {
+ *   const { theme, setTheme, toggleSidebar } = useUIStore();
+ *
+ *   return (
+ *     <header>
+ *       <button onClick={toggleSidebar}>Menu</button>
+ *       <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+ *         Toggle Theme
+ *       </button>
+ *     </header>
+ *   );
+ * }
+ * ```
+ */
+export const useUIStore = create<UIState>()(
+  persist(
+    (set) => ({
+      // ========== 테마 ==========
+      theme: "system",
+      setTheme: (theme) => set({ theme }),
+
+      // ========== 사이드바 ==========
+      isSidebarOpen: true,
+      toggleSidebar: () =>
+        set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
+      setSidebarOpen: (isOpen) => set({ isSidebarOpen: isOpen }),
+
+      // ========== 모달 ==========
+      isModalOpen: false,
+      modalContent: null,
+      openModal: (content) => set({ isModalOpen: true, modalContent: content }),
+      closeModal: () => set({ isModalOpen: false, modalContent: null }),
+
+      // ========== 토스트 ==========
+      toasts: [],
+      addToast: (toast) =>
+        set((state) => ({
+          toasts: [
+            ...state.toasts,
+            {
+              ...toast,
+              id: `toast-${Date.now()}-${Math.random()}`,
+            },
+          ],
+        })),
+      removeToast: (id) =>
+        set((state) => ({
+          toasts: state.toasts.filter((toast) => toast.id !== id),
+        })),
+    }),
+    {
+      name: "ui-storage", // localStorage 키 이름
+      // 일부 상태는 지속하지 않음 (모달, 토스트)
+      partialize: (state) => ({
+        theme: state.theme,
+        isSidebarOpen: state.isSidebarOpen,
+      }),
+    },
+  ),
+);
--- a/temp-app/node_modules/@tailwindcss/oxide-win32-x64-msvc/tailwindcss-oxide.win32-x64-msvc.node
+++ b/temp-app/node_modules/@tailwindcss/oxide-win32-x64-msvc/tailwindcss-oxide.win32-x64-msvc.node
--- a/test-results/.last-run.json
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}
--- a/tests/e2e/auth.spec.ts
+++ b/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();
+  });
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
--- a/utils/supabase/client.ts
+++ b/utils/supabase/client.ts
@@ -0,0 +1,19 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+/**
+ * [클라이언트 컴포넌트용 Supabase 클라이언트 생성 함수]
+ * 
+ * 이 함수는 브라우저(Front-end)에서 동작하는 컴포넌트(useEffect, onClick 등)에서 사용합니다.
+ * @supabase/ssr 패키지의 createBrowserClient를 사용하면 알아서 브라우저 쿠키를 관리해줍니다.
+ */
+export function createClient() {
+  /**
+   * createBrowserClient: 브라우저 환경에 최적화된 싱글톤(Singleton) 클라이언트를 반환합니다.
+   * - 브라우저는 보안상 'service_role' 같은 비밀 키를 절대 사용하면 안 됩니다.
+   * - 반드시 'NEXT_PUBLIC_'으로 시작하는 URL과 ANON KEY만 사용해야 합니다.
+   */
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+}
--- a/utils/supabase/middleware.ts
+++ b/utils/supabase/middleware.ts
@@ -0,0 +1,107 @@
+import { createServerClient } from "@supabase/ssr";
+import { NextResponse, type NextRequest } from "next/server";
+import {
+  PUBLIC_AUTH_PAGES,
+  AUTH_ROUTES,
+  RECOVERY_COOKIE_NAME,
+} from "@/features/auth/constants";
+
+/**
+ * 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
+ */
+// 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
+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),
+          );
+          supabaseResponse = NextResponse.next({ request });
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options),
+          );
+        },
+      },
+    },
+  );
+
+  // 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),
+    );
+    response.cookies.delete(RECOVERY_COOKIE_NAME);
+    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),
+  );
+
+  // 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 &&
+    pathname !== AUTH_ROUTES.RESET_PASSWORD &&
+    !recoveryCookie
+  ) {
+    return NextResponse.redirect(new URL(AUTH_ROUTES.HOME, request.url));
+  }
+
+  // 11. 최종 응답 반환 (변경된 쿠키 등이 포함됨)
+  return supabaseResponse;
+}
--- a/utils/supabase/server.ts
+++ b/utils/supabase/server.ts
@@ -0,0 +1,35 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+
+/**
+ * 서버용 Supabase 클라이언트를 생성합니다.
+ * 쿠키 읽기/쓰기 권한이 있어 SSR에 적합합니다.
+ */
+export async function createClient() {
+  const cookieStore = await cookies();
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options),
+            );
+          } catch {
+            // Server Components에서는 쿠키를 설정할 수 없습니다.
+            // 읽기 전용 에러가 발생합니다.
+            /**
+             * 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
+             */
+          }
+        },
+      },
+    },
+  );
+}
Author	SHA1	Message	Date
jihoon87.lee	35916430b7	Merge branch 'features/version1' into dev	2026-02-06 14:48:35 +09:00
jihoon87.lee	ac7effc939	feat: 브랜드 컬러 토큰 적용 및 색상 규칙 추가	2026-02-06 14:44:14 +09:00
jihoon87.lee	d2c66a639d	Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용	2026-02-06 10:43:16 +09:00
jihoon87.lee	d31e3f9bc9	Feat: auth 관련페이지 header 적용	2026-02-06 09:14:49 +09:00
jihoon87.lee	f1e340d9f1	Feat: 로그인 여부에 따른 메인페이지 이동 및 dashboard 처리	2026-02-05 16:36:42 +09:00
jihoon87.lee	ded49b5e2a	Feat: 대시보드 추가 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 컴포넌트를 도입하여 향후 페이지 확장 및 유지보수성을 개선합니다	2026-02-05 15:56:41 +09:00
jihoon87.lee	2d34d70948	Fix: 회원가입 인증 리다이렉트 처리와 UI 그라디언트 클래스 수정 app/auth/callback/route.ts - 이메일 인증 완료 판별을 세션 생성 시간 기준에서 쿼리 파라미터(auth_type=signup) 기반으로 변경 - 회원가입 인증인 경우 자동 로그인 세션 종료 후 로그인 페이지로 리다이렉트 처리 features/auth/actions.ts - 회원가입 시 이메일 리다이렉트 URL에 auth_type=signup 쿼리 파라미터 추가 app/forgot-password/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 수정(bg-gradient-to→bg-linear-to, radial-gradient var() 구문 정리) app/login/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 정리 및 일관화 app/reset-password/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 정리 및 일관화 app/signup/page.tsx - 배경 및 카드 아이콘의 Tailwind 클래스명 일부 정리 및 일관화 features/auth/components/reset-password-form.tsx - 버튼 그라디언트 클래스명(bg-gradient-to-r→bg-linear-to-r) 수정	2026-02-05 15:39:44 +09:00
jihoon87.lee	9c967af9c1	Feat: 회원가입 직후 이메일 인증 완료 처리 추가 app/auth/callback/route.ts - OAuth 콜백 처리 시 신규 사용자(생성 시간 1분 이내)를 감지하면 자동 로그인 세션을 종료하고 로그인 페이지로 리다이렉트하며 이메일 인증 완료 메시지를 전달하도록 로직 추가 - 일반 로그인은 기존처럼 코드 파라미터 제거 후 깔끔한 URL로 리다이렉트하도록 유지 features/auth/constants.ts - 이메일 인증 성공 메시지 상수 추가 - 일부 문자열 포맷팅 정리	2026-02-05 13:19:53 +09:00
jihoon87.lee	aae7000807	Fix: 인증 콜백 처리 개선 및 프로젝트 문서 추가 app/auth/callback/route.ts - NextRequest 타입 사용으로 요청/URL 파라미터 처리 개선 - 에러 파라미터 초기 처리 추가 및 사용자 메시지 매핑 - Supabase 코드 교환 흐름 정리(성공/실패 처리 분리), 로컬/프록시 환경에 따른 리다이렉트 로직 보강 - 잘못된 접근(인증 링크 오류) 처리 추가 및 로깅 개선 AGENTS.md - 개발 규칙, 명령어, 설명 방식 등 에이전트용 가이드 문서 추가 (한국어 규칙 포함) PROJECT_CONTEXT.md - 프로젝트 기술 스택, 폴더 구조, 주요 규칙 및 작업 흐름을 정리한 기준 문서 추가	2026-02-05 12:13:06 +09:00
jihoon87.lee	22ced3a6ae	Refactor: 인증 흐름 개선 및 에러 메시지 통합 .vscode/settings.json - chatgpt 확장 자동 실행 비활성화 설정 추가 app/auth/callback/route.ts - OAuth 콜백 처리 개선: 에러 메시지 매핑 함수 사용 및 리다이렉트 로직 정리 app/auth/confirm/route.ts - 이메일 인증(토큰 검증) 라우트 신규 구현: recovery 쿠키 설정 및 안전한 리다이렉트 처리 app/forgot-password/page.tsx - UI 텍스트/플레이스홀더 정리, 메시지 렌더링 조건부 처리 app/reset-password/page.tsx - 리셋 페이지 접근/세션 검증 로직 정리 및 UI 문구/아이콘 변경 features/auth/actions.ts - 에러 처리 통합(getAuthErrorMessage 사용), 서버 액션 주석 정리 - 비밀번호 재설정 플로우 반환값을 객체로 변경하고 recovery 쿠키 삭제/로그아웃 처리 features/auth/components/reset-password-form.tsx - 클라이언트 폼: updatePassword 결과 처리 개선, 라우터 리다이렉션 및 에러 메시지 표시 개선 features/auth/constants.ts - 인증 관련 상수(에러 메시지, 코드/상태 매핑, 라우트, 검증 규칙, 쿠키 이름) 신규 추가 features/auth/errors.ts - Supabase Auth 에러를 한글 메시지로 변환하는 유틸 추가 features/auth/schemas/auth-schema.ts - zod 스키마 메시지 문구 정리 및 포맷 통일 utils/supabase/middleware.ts - 세션/쿠키 갱신 및 라우트 보호 로직 개선, recovery 쿠키 기반 리다이렉트 처리 추가 utils/supabase/server.ts - 서버용 Supabase 클라이언트 초기화 함수 추가 (쿠키 읽기/쓰기 처리)	2026-02-05 09:38:42 +09:00
jihoon87.lee	edcfa2a837	Refactor: 인증 콜백 에러 메시지 변수에 타입 명시 app/auth/callback/route.ts - AUTH_ERROR_MESSAGES.DEFAULT를 할당하는 message 변수에 string 타입 명시	2026-02-04 12:28:15 +09:00
jihoon87.lee	4b41267ea5	Fix: 로그인 폼의 클라이언트 초기화 및 하이드레이션 문제 해결 features/auth/components/login-form.tsx - 서버 렌더링 시 하이드레이션 불일치 방지를 위해 상태 초기값에서 서버(윈도우 미존재) 분기 처리로 고정값 반환 - localStorage 접근을 안전하게 처리하도록 lazy initializer에 window 검사 추가 - 클라이언트에서 localStorage 동기화를 권장하는 주석(useEffect 사용 권장) 추가 - 버튼 스타일 클래스명 수정(bg-gradient-to-r → bg-linear-to-r)으로 스타일 정정	2026-02-04 12:28:04 +09:00
jihoon87.lee	0436ddf41c	docs: 프로젝트 개발 규칙 문서 추가 - auto-trade.md: 개발 기본 원칙 및 도구 활용 가이드	2026-02-04 09:35:50 +09:00
jihoon87.lee	63a09034a9	refactor: 인증 페이지를 React Hook Form 컴포넌트로 마이그레이션 - signup/page.tsx: SignupForm 컴포넌트 사용 - login/page.tsx: LoginForm 컴포넌트 사용 - reset-password/page.tsx: ResetPasswordForm 컴포넌트 사용 - auth/callback/route.ts: 불필요한 주석 제거	2026-02-04 09:35:42 +09:00
jihoon87.lee	462d3c1923	feat: React Hook Form 기반 인증 폼 컴포넌트 추가 - SignupForm: 회원가입 폼 (비밀번호 확인 필드 포함) - ResetPasswordForm: 비밀번호 재설정 폼 - LoginForm: 로그인 폼 (로딩 상태 추가) - Zod 스키마 기반 자동 검증 및 타입 안전성	2026-02-04 09:35:29 +09:00
jihoon87.lee	7500b963c0	refactor: 비밀번호 검증 규칙 통일 - 비밀번호 규칙을 8자 + 대소문자/숫자/특수문자로 통일 - constants.ts와 actions.ts의 검증 로직 일치	2026-02-04 09:35:15 +09:00
jihoon87.lee	a7bcbeda72	feat: 로딩 스피너 컴포넌트 추가 - LoadingSpinner: 전체 화면 로딩 스피너 - InlineSpinner: 인라인 로딩 스피너 (버튼 내부용)	2026-02-04 09:35:07 +09:00
jihoon87.lee	09277205e7	feat: React Query 사용자 정보 조회 훅 추가 - use-user-query.ts 생성 - Supabase 인증 사용자 정보 자동 캐싱 및 재검증	2026-02-04 09:35:00 +09:00
jihoon87.lee	ac292bcf2a	feat: React Query 설정 및 루트 레이아웃 통합 - QueryProvider 컴포넌트 생성 - React Query DevTools 추가 - 루트 레이아웃에 QueryProvider 래핑	2026-02-04 09:34:54 +09:00
jihoon87.lee	c0ecec6586	feat: Zustand 전역 상태 관리 스토어 추가 - auth-store.ts: 사용자 인증 상태 관리 (localStorage 지속성) - ui-store.ts: UI 상태 관리 (테마, 사이드바, 모달, 토스트)	2026-02-04 09:34:49 +09:00
jihoon87.lee	06a90b4fd6	feat: Zod 스키마 기반 인증 폼 검증 추가 - auth-schema.ts 생성 - signupSchema, loginSchema, resetPasswordSchema, forgotPasswordSchema 정의 - 타입 안전한 폼 데이터 타입 자동 추론	2026-02-04 09:34:41 +09:00
jihoon87.lee	40757e393a	chore: React Hook Form, Zustand, React Query 패키지 설치 - react-hook-form, @hookform/resolvers, zod 추가 - zustand 추가 - @tanstack/react-query, @tanstack/react-query-devtools 추가	2026-02-04 09:34:27 +09:00
jihoon87.lee	151626b181	Feat: 소셜 로그인 추가 및 인증 페이지 UI 테마 정리 app/login/page.tsx - Google/Kakao 소셜 로그인 버튼을 폼으로 연동하고 액션 호출 추가 - 로그인 페이지의 배경/버튼/텍스트 색상 등 UI 테마를 파스텔에서 그레이/다크톤으로 통일 - 소셜 버튼 마크업 및 스타일 정리 app/signup/page.tsx - 회원가입 페이지 배경 및 버튼 색상을 그레이/다크톤으로 변경 - 아이콘 배경 그라디언트 및 링크 색상 업데이트 app/forgot-password/page.tsx - 비밀번호 재설정 요청 페이지의 배경, 블러 효과 및 버튼 스타일을 그레이/다크톤으로 변경 - 아이콘 배경 및 링크 색상 업데이트 app/reset-password/page.tsx - 비밀번호 재설정 페이지의 배경, 블러 효과 및 버튼 스타일을 그레이/다크톤으로 변경 - 아이콘 배경 업데이트 features/auth/actions.ts - Google 및 Kakao OAuth 시작을 위한 공통 헬퍼(signInWithProvider) 추가 - signInWithGoogle 및 signInWithKakao 액션을 구현하여 OAuth 흐름을 시작하도록 추가	2026-02-03 15:44:55 +09:00
jihoon87.lee	43119caf80	Feat: 예제 환경 파일 추가 및 gitignore 예외 등록 .env.example - Supabase 환경 변수 예제 파일 추가 (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY) .gitignore - .env.example을 예외 처리하여 저장소에 포함되도록 수정 - 주석 및 섹션 정리, 커스텀 항목 정리	2026-02-03 11:05:06 +09:00
jihoon87.lee	12182823b0	회원가입	2026-02-03 10:51:46 +09:00
jihoon87.lee	3058b93c66	기본 .gitignore 파일 추가 .gitignore - 의존성, 빌드 출력물, 테스트 결과, 환경변수 파일, 에디터/IDE 설정, OS 생성 파일, 로그 등 프로젝트에 불필요한 파일 및 디렉터리를 포괄적으로 무시하도록 설정 추가 - TypeScript, Turbopack, Vercel, PWA, Sentry, Storybook 관련 항목과 잠재적 로컬 파일들을 포함	2026-02-03 10:48:01 +09:00
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`