Feat: 로그인 여부에 따른 메인페이지 이동 및 dashboard 처리

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.agent/rules/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 활용
+- 변경 사항은 반드시 로컬에서 검증 후 완료 보고
+- 에러 발생 시 근본 원인 파악 및 해결

.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`

.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.

.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

.env.example

@@ -0,0 +1,6 @@
+# Supabase 환경 설정 예제 파일
+# 이 파일의 이름을 .env.local 로 변경한 뒤, 실제 값을 채워넣으세요.
+# 값 확인: https://supabase.com/dashboard/project/_/settings/api
+
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=

.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/

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "chatgpt.openOnStartup": false
+}

AGENTS.md

@@ -0,0 +1,39 @@
+# 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 로직에는 인라인 주석을 충분히 작성
+
+## 설명 방식
+- 단계별로 짧게, 예시는 1개만.
+- 사용자가 요청한 변경과 이유를 함께 설명.
+- 파일 경로는 pp/...처럼 코드 형식으로 표기.
+
+## 여러 도구를 함께 쓸 때 (쉬운 설명)
+- 기준 설명을 한 군데에 모아두고, 그 파일만 계속 업데이트하는 것이 핵심.
+- 예를 들어 PROJECT_CONTEXT.md에 스택, 폴더 구조, 규칙을 적어둔다.
+- 그리고 각 도구의 규칙 파일에  PROJECT_CONTEXT.md를 참고라고 써 둔다.
+- 이렇게 하면 어떤 도구를 쓰든 같은 파일을 읽게 되어, 매번 다시 설명할 일이 줄어든다.

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 참고만 적기

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.

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

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

app/(auth)/layout.tsx

@@ -0,0 +1,20 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-linear-to-br from-gray-50 via-white to-gray-100 px-4 py-12 dark:from-black dark:via-gray-950 dark:to-gray-900">
+      {/* ========== 배경 그라디언트 레이어 ========== */}
+      <div className="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" />
+
+      {/* ========== 메인 콘텐츠 영역 ========== */}
+      {children}
+    </div>
+  );
+}

app/(auth)/login/page.tsx

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

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

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

app/(auth)/signup/page.tsx

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

app/(home)/page.tsx

@@ -0,0 +1,126 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { createClient } from "@/utils/supabase/server";
+import { UserMenu } from "@/features/layout/components/user-menu";
+import { AUTH_ROUTES } from "@/features/auth/constants";
+
+export default async function HomePage() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b border-zinc-200 bg-white/75 px-6 backdrop-blur-md dark:border-zinc-800 dark:bg-black/75">
+        <Link href={AUTH_ROUTES.HOME} className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-md bg-zinc-900 dark:bg-zinc-50" />
+          <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+            AutoTrade
+          </span>
+        </Link>
+        <div className="flex items-center gap-4">
+          {user ? (
+            <>
+              <Button asChild variant="ghost" size="sm">
+                <Link href={AUTH_ROUTES.DASHBOARD}>대시보드</Link>
+              </Button>
+              <UserMenu user={user} />
+            </>
+          ) : (
+            <>
+              <Button asChild variant="ghost" size="sm">
+                <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
+              </Button>
+              <Button asChild size="sm">
+                <Link href={AUTH_ROUTES.SIGNUP}>무료로 시작하기</Link>
+              </Button>
+            </>
+          )}
+        </div>
+      </header>
+
+      <main className="flex-1">
+        <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
+          <div className="container flex max-w-5xl flex-col items-center gap-4 text-center">
+            <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+              투자의 미래,{" "}
+              <span className="text-gradient bg-linear-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
+                자동화하세요
+              </span>
+            </h1>
+            <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+              AutoTrade는 최첨단 알고리즘을 통해 당신의 암호화폐 투자를 24시간
+              관리합니다. 감정에 휘둘리지 않는 투자를 경험하세요.
+            </p>
+            <div className="space-x-4">
+              {user ? (
+                <Button asChild size="lg" className="h-11 px-8">
+                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드로 이동</Link>
+                </Button>
+              ) : (
+                <Button asChild size="lg" className="h-11 px-8">
+                  <Link href={AUTH_ROUTES.LOGIN}>지금 시작하기</Link>
+                </Button>
+              )}
+              {!user && (
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="h-11 px-8"
+                >
+                  <Link href={AUTH_ROUTES.LOGIN}>데모 체험</Link>
+                </Button>
+              )}
+            </div>
+          </div>
+        </section>
+
+        <section className="container space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-24">
+          <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
+            <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
+              주요 기능
+            </h2>
+            <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
+              성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
+            </p>
+          </div>
+          <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-5xl md:grid-cols-3">
+            {[
+              {
+                title: "실시간 모니터링",
+                description:
+                  "시장 상황을 실시간으로 분석하고 최적의 타이밍을 포착합니다.",
+              },
+              {
+                title: "알고리즘 트레이딩",
+                description:
+                  "검증된 전략을 기반으로 자동으로 매수와 매도를 실행합니다.",
+              },
+              {
+                title: "포트폴리오 관리",
+                description:
+                  "자산 분배와 리스크 관리를 통해 안정적인 수익을 추구합니다.",
+              },
+            ].map((feature, index) => (
+              <div
+                key={index}
+                className="relative overflow-hidden rounded-lg border bg-background p-2"
+              >
+                <div className="flex h-[180px] flex-col justify-between rounded-md p-6">
+                  <div className="space-y-2">
+                    <h3 className="font-bold">{feature.title}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

app/(main)/dashboard/page.tsx

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

app/(main)/layout.tsx

@@ -0,0 +1,18 @@
+import { Header } from "@/features/layout/components/header";
+import { Sidebar } from "@/features/layout/components/sidebar";
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col bg-zinc-50 dark:bg-black">
+      <Header />
+      <div className="flex flex-1">
+        <Sidebar />
+        <main className="flex-1 w-full p-6 md:p-8 lg:p-10">{children}</main>
+      </div>
+    </div>
+  );
+}

app/auth/callback/route.ts

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

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

app/globals.css

@@ -0,0 +1,125 @@
+@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);
+  --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);
+  --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);
+}
+
+: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.205 0 0);
+  --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.708 0 0);
+  --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.205 0 0);
+  --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.922 0 0);
+  --primary-foreground: oklch(0.205 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.556 0 0);
+  --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.488 0.243 264.376);
+  --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;
+  }
+}

app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { QueryProvider } from "@/providers/query-provider";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "AutoTrade",
+  description: "Automated Crypto Trading Platform",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <QueryProvider>{children}</QueryProvider>
+      </body>
+    </html>
+  );
+}

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": {}
+}

components/form-message.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+/**
+ * [FormMessage 컴포넌트]
+ * - 로그인/회원가입 실패 메시지를 보여줍니다.
+ * - [UX 개선] 메시지가 보인 후, URL에서 ?message=... 부분을 지워서
+ *   새로고침 시 메시지가 다시 뜨지 않도록 합니다.
+ */
+export default function FormMessage({ message }: { message: string }) {
+  const router = useRouter();
+  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>
+  );
+}

components/ui/avatar.tsx

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

components/ui/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 }

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

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 }

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

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 }

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 }

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

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 }

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.

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;

features/auth/actions.ts

@@ -0,0 +1,479 @@
+"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 추출 헬퍼]
+ *
+ * FormData에서 이메일과 비밀번호를 안전하게 추출합니다.
+ * - 이메일은 trim()으로 공백 제거
+ * - null/undefined 방지를 위해 기본값 "" 사용
+ *
+ * @param formData - HTML form에서 전달된 FormData 객체
+ * @returns AuthFormData - 추출된 이메일과 비밀번호
+ */
+function extractAuthData(formData: FormData): AuthFormData {
+  const email = (formData.get("email") as string)?.trim() || "";
+  const password = (formData.get("password") as string) || "";
+
+  return { email, password };
+}
+
+/**
+ * [비밀번호 강도 검증 함수]
+ *
+ * 안전한 비밀번호인지 검사합니다.
+ *
+ * 비밀번호 정책:
+ * - 최소 8자 이상
+ * - 대문자 1개 이상 포함
+ * - 소문자 1개 이상 포함
+ * - 숫자 1개 이상 포함
+ * - 특수문자 1개 이상 포함 (!@#$%^&*(),.?":{}|<> 등)
+ *
+ * @param password - 검증할 비밀번호
+ * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
+ */
+function validatePassword(password: string): AuthError | null {
+  // 1. 최소 길이 체크 (8자 이상)
+  if (password.length < 8) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT,
+      type: "validation",
+    };
+  }
+
+  // 2. 대문자 포함 여부
+  if (!/[A-Z]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // 3. 소문자 포함 여부
+  if (!/[a-z]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // 4. 숫자 포함 여부
+  if (!/[0-9]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // 5. 특수문자 포함 여부
+  if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // 모든 검증 통과
+  return null;
+}
+
+/**
+ * [입력값 검증 함수]
+ *
+ * 사용자가 입력한 이메일과 비밀번호의 유효성을 검사합니다.
+ *
+ * 검증 항목:
+ * 1. 빈 값 체크 - 이메일 또는 비밀번호가 비어있는지 확인
+ * 2. 이메일 형식 - '@' 포함 여부로 간단한 형식 검증
+ * 3. 비밀번호 강도 - 8자 이상, 대소문자/숫자/특수문자 포함 확인
+ *
+ * @param email - 사용자 이메일
+ * @param password - 사용자 비밀번호
+ * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
+ */
+function validateAuthInput(email: string, password: string): AuthError | null {
+  // 1. 빈 값 체크
+  if (!email || !password) {
+    return {
+      message: AUTH_ERROR_MESSAGES.EMPTY_FIELDS,
+      type: "validation",
+    };
+  }
+
+  // 2. 이메일 형식 체크 (간단한 @ 포함 여부 확인)
+  if (!email.includes("@")) {
+    return {
+      message: AUTH_ERROR_MESSAGES.INVALID_EMAIL,
+      type: "validation",
+    };
+  }
+
+  // 3. 비밀번호 강도 체크
+  const passwordValidation = validatePassword(password);
+  if (passwordValidation) {
+    return passwordValidation;
+  }
+
+  // 모든 검증 통과
+  return null;
+}
+
+/**
+ * [에러 메시지 번역 헬퍼]
+ *
+ * Supabase의 영문 에러 메시지를 사용자 친화적인 한글로 변환합니다.
+ *
+ * @param error - Supabase에서 받은 에러 메시지
+ * @returns string - 한글로 번역된 에러 메시지
+ */
+// 에러 메시지는 getAuthErrorMessage로 통일합니다.
+
+// ========================================
+// Server Actions (서버 액션)
+// ========================================
+// 흐름 요약 (어디서 호출되는지)
+// - /login: features/auth/components/login-form.tsx -> login, signInWithGoogle, signInWithKakao
+// - /signup: features/auth/components/signup-form.tsx -> signup
+// - /forgot-password: app/forgot-password/page.tsx -> requestPasswordReset
+// - /reset-password: features/auth/components/reset-password-form.tsx -> updatePassword
+// - 메인(/): app/page.tsx -> signout
+// - OAuth: signInWithGoogle/Kakao -> Supabase -> /auth/callback 라우트
+
+/**
+ * [로그인 액션]
+ *
+ * 사용자가 입력한 이메일/비밀번호로 로그인을 시도합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 이메일/비밀번호 추출
+ * 2. 입력값 유효성 검증 (빈 값, 이메일 형식, 비밀번호 길이)
+ * 3. Supabase Auth를 통한 로그인 시도
+ * 4. 성공 시 메인 페이지로 리다이렉트
+ * 5. 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
+ *
+ * @param formData - HTML form에서 전달된 FormData (이메일, 비밀번호 포함)
+ */
+export async function login(formData: FormData) {
+  // 호출: features/auth/components/login-form.tsx (로그인 폼 action)
+  // 1. FormData에서 이메일/비밀번호 추출
+  const { email, password } = extractAuthData(formData);
+
+  // 2. 입력값 유효성 검증
+  const validationError = validateAuthInput(email, password);
+  if (validationError) {
+    return redirect(
+      `/login?message=${encodeURIComponent(validationError.message)}`,
+    );
+  }
+
+  // 3. Supabase 클라이언트 생성 및 로그인 시도
+  const supabase = await createClient();
+  const { error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  // 4. 로그인 실패 시 에러 처리
+  if (error) {
+    const message = getAuthErrorMessage(error);
+    return redirect(`/login?message=${encodeURIComponent(message)}`);
+  }
+
+  // 5. 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
+  // revalidatePath: Next.js 캐시를 무효화하여 최신 인증 상태 반영
+  revalidatePath("/", "layout");
+  redirect("/");
+}
+
+/**
+ * [회원가입 액션]
+ *
+ * 새로운 사용자를 등록합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 이메일/비밀번호 추출
+ * 2. 입력값 유효성 검증
+ * 3. Supabase Auth를 통한 회원가입 시도
+ * 4. 이메일 인증 리다이렉트 URL 설정 (확인 링크 클릭 시 돌아올 주소)
+ * 5-1. 즉시 세션 생성 시: 메인 페이지로 리다이렉트 (바로 로그인됨)
+ * 5-2. 이메일 인증 필요 시: 로그인 페이지로 리다이렉트 (안내 메시지 포함)
+ *
+ * @param formData - HTML form에서 전달된 FormData (이메일, 비밀번호 포함)
+ */
+export async function signup(formData: FormData) {
+  // 호출: features/auth/components/signup-form.tsx (회원가입 폼 action)
+  // 1. FormData에서 이메일/비밀번호 추출
+  const { email, password } = extractAuthData(formData);
+
+  // 2. 입력값 유효성 검증
+  const validationError = validateAuthInput(email, password);
+  if (validationError) {
+    return redirect(
+      `/signup?message=${encodeURIComponent(validationError.message)}`,
+    );
+  }
+
+  // 3. Supabase 클라이언트 생성 및 회원가입 시도
+  const supabase = await createClient();
+  const { data, error } = await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      // 이메일 인증 완료 후 리다이렉트될 URL
+      // 로컬 개발 환경: http://localhost:3001/auth/callback
+      // 프로덕션: NEXT_PUBLIC_BASE_URL 환경 변수에 설정된 주소
+      emailRedirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback?auth_type=signup`,
+    },
+  });
+
+  // 4. 회원가입 실패 시 에러 처리
+  if (error) {
+    const message = getAuthErrorMessage(error);
+    return redirect(`/signup?message=${encodeURIComponent(message)}`);
+  }
+
+  // 5. 회원가입 성공 - 세션 생성 여부에 따라 분기 처리
+  if (data.session) {
+    // 5-1. 즉시 세션이 생성된 경우 (이메일 인증 불필요)
+    // → 바로 메인 페이지로 이동
+    revalidatePath("/", "layout");
+    redirect("/");
+  }
+
+  // 5-2. 이메일 인증이 필요한 경우
+  // → 로그인 페이지로 이동 + 안내 메시지
+  revalidatePath("/", "layout");
+  redirect(
+    `/login?message=${encodeURIComponent("회원가입이 완료되었습니다. 이메일을 확인하여 인증을 완료해 주세요.")}`,
+  );
+}
+
+/**
+ * [로그아웃 액션]
+ *
+ * 현재 세션을 종료하고 로그인 페이지로 이동합니다.
+ *
+ * 처리 과정:
+ * 1. Supabase Auth 세션 종료
+ * 2. 캐시 무효화하여 인증 상태 갱신
+ * 3. 로그인 페이지로 리다이렉트
+ */
+export async function signout() {
+  // 호출: app/page.tsx (로그아웃 버튼의 formAction)
+  const supabase = await createClient();
+
+  // 1. Supabase 세션 종료 (서버 + 클라이언트 쿠키 삭제)
+  await supabase.auth.signOut();
+
+  // 2. Next.js 캐시 무효화
+  revalidatePath("/", "layout");
+
+  // 3. 로그인 페이지로 리다이렉트
+  redirect("/");
+}
+
+/**
+ * [비밀번호 재설정 요청 액션]
+ *
+ * 사용자 이메일로 비밀번호 재설정 링크를 발송합니다.
+ *
+ * 보안 고려사항:
+ * - 이메일 존재 여부와 관계없이 동일한 성공 메시지 표시
+ * - 이메일 열거 공격(Email Enumeration) 방지
+ *
+ * 처리 과정:
+ * 1. FormData에서 이메일 추출
+ * 2. 이메일 형식 검증
+ * 3. Supabase를 통한 재설정 링크 발송
+ * 4. 성공 메시지와 함께 로그인 페이지로 리다이렉트
+ *
+ * @param formData - 이메일이 포함된 FormData
+ */
+export async function requestPasswordReset(formData: FormData) {
+  // 호출: app/forgot-password/page.tsx (비밀번호 재설정 요청 폼)
+  // 1. FormData에서 이메일 추출
+  const email = (formData.get("email") as string)?.trim() || "";
+
+  // 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)}`,
+    );
+  }
+
+  // 3. Supabase를 통한 재설정 링크 발송
+  const supabase = await createClient();
+  const { error } = await supabase.auth.resetPasswordForEmail(email, {
+    redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/reset-password`,
+  });
+
+  // 4. 에러 처리
+  if (error) {
+    console.error("Password reset error:", error.message);
+    const message = getAuthErrorMessage(error);
+    return redirect(`/forgot-password?message=${encodeURIComponent(message)}`);
+  }
+
+  // 5. 성공 메시지 표시
+  redirect(
+    `/login?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.PASSWORD_RESET_SENT)}`,
+  );
+}
+
+/**
+ * [비밀번호 업데이트 액션]
+ *
+ * 비밀번호 재설정 링크를 통해 접근한 사용자의 비밀번호를 업데이트합니다.
+ *
+ * 처리 과정:
+ * 1. FormData에서 새 비밀번호 추출
+ * 2. 비밀번호 길이 검증
+ * 3. Supabase를 통한 비밀번호 업데이트
+ * 4. 성공 시 로그인 페이지로 리다이렉트
+ *
+ * @param formData - 새 비밀번호가 포함된 FormData
+ */
+export async function updatePassword(formData: FormData) {
+  // 호출: features/auth/components/reset-password-form.tsx (재설정 폼)
+  const password = (formData.get("password") as string) || "";
+
+  const passwordValidation = validatePassword(password);
+  if (passwordValidation) {
+    return { ok: false, message: passwordValidation.message };
+  }
+
+  const supabase = await createClient();
+  const { error } = await supabase.auth.updateUser({
+    password: password,
+  });
+
+  if (error) {
+    const message = getAuthErrorMessage(error);
+    return { ok: false, message };
+  }
+
+  const cookieStore = await cookies();
+  cookieStore.delete(RECOVERY_COOKIE_NAME);
+  await supabase.auth.signOut();
+  revalidatePath("/", "layout");
+
+  return {
+    ok: true,
+    message: AUTH_ERROR_MESSAGES.PASSWORD_RESET_SUCCESS,
+  };
+}
+
+// ========================================
+// 소셜 로그인 (OAuth)
+// ========================================
+
+/**
+ * [OAuth 로그인 헬퍼 함수]
+ *
+ * Google, Kakao 등의 소셜 로그인 제공자를 통해 인증을 수행합니다.
+ *
+ * PKCE (Proof Key for Code Exchange) 플로우:
+ * 1. 이 함수가 signInWithOAuth를 호출하면 Supabase가 OAuth URL 반환
+ * 2. 사용자를 해당 OAuth 제공자(Google/Kakao) 로그인 페이지로 리다이렉트
+ * 3. 사용자가 로그인 및 권한 동의
+ * 4. OAuth 제공자가 /auth/callback?code=xxx로 리다이렉트
+ * 5. callback 라우트에서 code를 세션으로 교환 (exchangeCodeForSession)
+ * 6. 메인 페이지로 최종 리다이렉트
+ *
+ * 자동 회원가입:
+ * - 첫 로그인 시 auth.users 테이블에 자동으로 사용자 생성
+ * - 이메일, provider, metadata(프로필 사진, 이름 등) 저장
+ * - 기존 사용자는 그냥 로그인
+ *
+ * @param provider - OAuth 제공자 ('google' | 'kakao')
+ */
+async function signInWithProvider(provider: "google" | "kakao") {
+  // 호출: 아래 signInWithGoogle / signInWithKakao에서 공통 사용
+  const supabase = await createClient();
+
+  // 1. OAuth 인증 시작
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider,
+    options: {
+      // PKCE 플로우를 위한 콜백 URL
+      // OAuth 제공자 인증 후 이 URL로 code와 함께 리다이렉트됨
+      redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback`,
+    },
+  });
+
+  // 2. 에러 처리
+  if (error) {
+    console.error(`[${provider} OAuth] 로그인 실패:`, error.message);
+    const message = getAuthErrorMessage(error);
+    return redirect(`/login?message=${encodeURIComponent(message)}`);
+  }
+
+  // 3. OAuth 제공자 로그인 페이지로 리다이렉트
+  // data.url은 Google/Kakao의 인증 페이지 URL
+  if (data.url) {
+    redirect(data.url);
+  }
+
+  // 4. URL이 없는 경우 (예상치 못한 상황)
+  redirect(
+    `/login?message=${encodeURIComponent("로그인 처리 중 오류가 발생했습니다.")}`,
+  );
+}
+
+/**
+ * [Google 로그인 액션]
+ *
+ * Google 계정으로 로그인합니다.
+ * "Google로 로그인" 버튼에서 호출됩니다.
+ *
+ * 처리 과정:
+ * 1. signInWithOAuth 호출하여 Google OAuth URL 받기
+ * 2. Google 로그인 페이지로 리다이렉트
+ * 3. (사용자가 Google에서 로그인 및 권한 동의)
+ * 4. /auth/callback으로 돌아와서 세션 생성
+ * 5. 메인 페이지로 이동
+ */
+export async function signInWithGoogle() {
+  // 호출: features/auth/components/login-form.tsx (Google 로그인 버튼)
+  return signInWithProvider("google");
+}
+
+/**
+ * [Kakao 로그인 액션]
+ *
+ * Kakao 계정으로 로그인합니다.
+ * "Kakao로 로그인" 버튼에서 호출됩니다.
+ *
+ * 처리 과정:
+ * 1. signInWithOAuth 호출하여 Kakao OAuth URL 받기
+ * 2. Kakao 로그인 페이지로 리다이렉트
+ * 3. (사용자가 Kakao에서 로그인 및 권한 동의)
+ * 4. /auth/callback으로 돌아와서 세션 생성
+ * 5. 메인 페이지로 이동
+ */
+export async function signInWithKakao() {
+  // 호출: features/auth/components/login-form.tsx (Kakao 로그인 버튼)
+  return signInWithProvider("kakao");
+}

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

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

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

features/auth/constants.ts

@@ -0,0 +1,241 @@
+/**
+ * [인증 관련 상수 정의]
+ *
+ * 인증 모듈 전체에서 공통으로 사용하는 상수들을 정의합니다.
+ * - 에러 메시지
+ * - 라우트 경로
+ * - 검증 규칙
+ */
+
+// ========================================
+// 에러 메시지 상수
+// ========================================
+
+/**
+ * 인증 에러 메시지 매핑
+ * 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;
+
+// ========================================
+// 타입 정의
+// ========================================
+
+/**
+ * 인증 폼 데이터 타입
+ */
+export type AuthFormData = {
+  email: string;
+  password: string;
+};
+
+/**
+ * 인증 에러 타입
+ */
+export type AuthError = {
+  message: string;
+  type: "validation" | "auth" | "unknown";
+};

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

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

features/layout/components/header.tsx

@@ -0,0 +1,35 @@
+import { createClient } from "@/utils/supabase/server";
+import Link from "next/link";
+import { UserMenu } from "./user-menu";
+import { Button } from "@/components/ui/button";
+import { AUTH_ROUTES } from "@/features/auth/constants";
+
+export async function Header() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return (
+    <header className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b border-zinc-200 bg-white/75 px-6 backdrop-blur-md transition-all dark:border-zinc-800 dark:bg-black/75">
+      <div className="flex items-center gap-2">
+        <Link href={AUTH_ROUTES.DASHBOARD} className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-md bg-zinc-900 dark:bg-zinc-50" />
+          <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+            AutoTrade
+          </span>
+        </Link>
+      </div>
+
+      <div className="flex items-center gap-4">
+        {user ? (
+          <UserMenu user={user} />
+        ) : (
+          <Button asChild variant="default" size="sm">
+            <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+}

features/layout/components/sidebar.tsx

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

features/layout/components/user-menu.tsx

@@ -0,0 +1,70 @@
+"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 {
+  user: User | null;
+}
+
+export function UserMenu({ user }: UserMenuProps) {
+  const router = useRouter();
+
+  if (!user) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-2 outline-none">
+          <Avatar className="h-8 w-8 transition-opacity hover:opacity-80">
+            <AvatarImage src={user.user_metadata?.avatar_url} />
+            <AvatarFallback className="bg-linear-to-br from-indigo-500 to-purple-600 text-white text-xs font-bold">
+              {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?.name || "사용자"}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => router.push("/profile")}>
+          <UserIcon className="mr-2 h-4 w-4" />
+          <span>프로필</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => router.push("/settings")}>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>설정</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <form action={signout}>
+          <DropdownMenuItem asChild>
+            <button className="w-full text-red-600 dark:text-red-400">
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>로그아웃</span>
+            </button>
+          </DropdownMenuItem>
+        </form>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

features/layout/types/index.ts

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

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

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

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)$).*)",
+  ],
+};

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,49 @@
+{
+  "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-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",
+    "@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",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.1",
+    "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"
+  }
+}

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

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

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

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>

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>

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>

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>

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>

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

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

test-results/.last-run.json

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

tests/e2e/auth.spec.ts

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

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"]
+}

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

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

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에서는 쿠키를 설정할 수 없습니다.
+            // 읽기 전용 에러가 발생합니다.
+            /**
+             * 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
+             */
+          }
+        },
+      },
+    },
+  );
+}