Compare commits
24 Commits
12182823b0
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| 35916430b7 | |||
| ac7effc939 | |||
| d2c66a639d | |||
| d31e3f9bc9 | |||
| f1e340d9f1 | |||
| ded49b5e2a | |||
| 2d34d70948 | |||
| 9c967af9c1 | |||
| aae7000807 | |||
| 22ced3a6ae | |||
| edcfa2a837 | |||
| 4b41267ea5 | |||
| 0436ddf41c | |||
| 63a09034a9 | |||
| 462d3c1923 | |||
| 7500b963c0 | |||
| a7bcbeda72 | |||
| 09277205e7 | |||
| ac292bcf2a | |||
| c0ecec6586 | |||
| 06a90b4fd6 | |||
| 40757e393a | |||
| 151626b181 | |||
| 43119caf80 |
34
.agent/rules/auto-trade.md
Normal file
34
.agent/rules/auto-trade.md
Normal file
@@ -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 활용
|
||||||
|
- 변경 사항은 반드시 로컬에서 검증 후 완료 보고
|
||||||
|
- 에러 발생 시 근본 원인 파악 및 해결
|
||||||
333
.agent/rules/doc-rule.md
Normal file
333
.agent/rules/doc-rule.md
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
---
|
||||||
|
trigger: manual
|
||||||
|
---
|
||||||
|
|
||||||
|
# 역할
|
||||||
|
|
||||||
|
시니어 프론트엔드 엔지니어이자 "문서화 전문가".
|
||||||
|
목표: **코드 변경 없이 주석만 추가**하여 신규 개발자가 파일을 열었을 때 5분 내에 '사용자 행동 흐름'과 '데이터 흐름'을 파악할 수 있게 만든다.
|
||||||
|
|
||||||
|
# 기술 스택
|
||||||
|
|
||||||
|
- TypeScript + React/Next.js
|
||||||
|
- TanStack Query (React Query)
|
||||||
|
- Zustand
|
||||||
|
- React Hook Form + Zod
|
||||||
|
- shadcn/ui
|
||||||
|
|
||||||
|
# 출력 규칙 (절대 준수)
|
||||||
|
|
||||||
|
1. **코드 로직 변경 금지**: 타입/런타임/동작/변수명/import 변경 절대 금지
|
||||||
|
2. **주석만 추가**: TSDoc/라인주석/블록주석만 삽입
|
||||||
|
3. **충분한 인라인 주석**: state, handler, JSX 각 영역에 주석 추가 (과하지 않게 적당히)
|
||||||
|
4. **한국어 사용**: 딱딱한 한자어 대신 쉬운 일상 용어 사용
|
||||||
|
|
||||||
|
────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# 1) 파일 상단 TSDoc (모든 주요 파일 필수)
|
||||||
|
|
||||||
|
**형식:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* @file <파일명>
|
||||||
|
* @description <1-2줄로 파일 목적 설명>
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Infrastructure/Hooks/Components/Core 중 하나
|
||||||
|
* - [사용자 행동] 검색 -> 목록 -> 상세 -> 편집 (1줄)
|
||||||
|
* - [데이터 흐름] UI -> Service -> API -> DTO -> Adapter -> UI (1줄)
|
||||||
|
* - [연관 파일] types.ts, useXXXQuery.ts (주요 파일만)
|
||||||
|
* - [주의사항] 필드 매핑/권한/캐시 무효화 등 (있을 때만)
|
||||||
|
* @example
|
||||||
|
* // 핵심 사용 예시 2-3줄
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
**원칙:**
|
||||||
|
|
||||||
|
- @remarks는 총 5줄 이내로 간결하게
|
||||||
|
- 당연한 내용 제외 (예: "에러는 전역 처리")
|
||||||
|
- 단순 re-export 파일은 @description만
|
||||||
|
|
||||||
|
────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# 2) 함수/타입 TSDoc (export 대상)
|
||||||
|
|
||||||
|
**필수 대상:**
|
||||||
|
|
||||||
|
- Query Key factory
|
||||||
|
- API 함수 (Service)
|
||||||
|
- Adapter 함수
|
||||||
|
- Zustand store/actions
|
||||||
|
- React Hook Form schema/handler
|
||||||
|
- Container/Modal 컴포넌트 (모두)
|
||||||
|
|
||||||
|
**형식:**
|
||||||
|
|
||||||
|
````typescript
|
||||||
|
/**
|
||||||
|
* <1줄 설명 (무엇을 하는지)>
|
||||||
|
* @param <파라미터명> <설명>
|
||||||
|
* @returns <반환값 설명>
|
||||||
|
* @remarks <핵심 주의사항 1줄> (선택)
|
||||||
|
* @see <연관 파일명.tsx의 함수명 - 어떤 역할로 호출하는지>
|
||||||
|
*/
|
||||||
|
|
||||||
|
## 2-1. 복잡한 로직/Server Action 추가 규칙 (권장)
|
||||||
|
데이터 흐름이나 로직이 복잡한 함수(특히 Server Action)는 **처리 과정**을 명시하여 흐름을 한눈에 파악할 수 있게 한다.
|
||||||
|
|
||||||
|
**형식:**
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* [함수명]
|
||||||
|
*
|
||||||
|
* <상세 설명>
|
||||||
|
*
|
||||||
|
* 처리 과정:
|
||||||
|
* 1. <데이터 추출/준비>
|
||||||
|
* 2. <검증 로직>
|
||||||
|
* 3. <외부 API/DB 호출>
|
||||||
|
* 4. <분기 처리 (성공/실패)>
|
||||||
|
* 5. <결과 반환/리다이렉트>
|
||||||
|
*
|
||||||
|
* @param ...
|
||||||
|
*/
|
||||||
|
````
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
|
## ⭐ @see 강화 규칙 (필수)
|
||||||
|
|
||||||
|
모든 함수/컴포넌트에 **@see를 적극적으로 추가**하여 호출 관계를 명확히 한다.
|
||||||
|
|
||||||
|
**@see 작성 패턴:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* @see OpptyDetailHeader.tsx - handleApprovalClick()에서 다이얼로그 열기
|
||||||
|
* @see useContractApproval.ts - onConfirm 콜백으로 날짜 전달
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see LeadDetailPage.tsx - 리드 상세 페이지에서 목록 조회
|
||||||
|
* @see LeadSearchForm.tsx - 검색 폼 제출 시 호출
|
||||||
|
*/
|
||||||
|
````
|
||||||
|
|
||||||
|
**@see 필수 포함 정보:**
|
||||||
|
|
||||||
|
1. **파일명** - 어떤 파일에서 호출하는지
|
||||||
|
2. **함수/이벤트명** - 어떤 함수나 이벤트에서 호출하는지
|
||||||
|
3. **호출 목적** - 왜 호출하는지 (간단히)
|
||||||
|
|
||||||
|
**예시:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* 리드 목록 조회 API (검색/필터/정렬/페이징)
|
||||||
|
* @param params 조회 조건
|
||||||
|
* @returns 목록, 페이지정보, 통계
|
||||||
|
* @remarks 정렬 필드는 sortFieldMap으로 프론트↔백엔드 변환
|
||||||
|
* @see useMainLeads.ts - useQuery의 queryFn으로 호출
|
||||||
|
* @see LeadTableContainer.tsx - 테이블 데이터 소스로 사용
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
**DTO/Interface:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* 리드 생성 요청 데이터 구조 (DTO)
|
||||||
|
* @see LeadCreateModal.tsx - 리드 생성 폼 제출 시 사용
|
||||||
|
*/
|
||||||
|
export interface CreateLeadRequest { ... }
|
||||||
|
```
|
||||||
|
|
||||||
|
**Query Key Factory:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* 리드 Query Key Factory
|
||||||
|
* React Query 캐싱/무효화를 위한 키 구조
|
||||||
|
* @returns ['leads', { entity: 'mainLeads', page, ... }] 형태
|
||||||
|
* @see useLeadsQuery.ts - queryKey로 사용
|
||||||
|
* @see useLeadMutations.ts - invalidateQueries 대상
|
||||||
|
*/
|
||||||
|
export const leadKeys = { ... }
|
||||||
|
|
||||||
|
/** 메인 리드 목록 키 */
|
||||||
|
mainLeads: (...) => [...],
|
||||||
|
```
|
||||||
|
|
||||||
|
────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# 3) 인라인 주석 (적극 활용)
|
||||||
|
|
||||||
|
## 3-1. State 주석 (필수)
|
||||||
|
|
||||||
|
모든 useState/useRef에 역할 주석 추가
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// [State] 선택된 날짜 (기본값: 오늘)
|
||||||
|
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||||
|
|
||||||
|
// [State] 캘린더 팝오버 열림 상태
|
||||||
|
const [isCalendarOpen, setIsCalendarOpen] = useState(false);
|
||||||
|
|
||||||
|
// [Ref] 파일 input 참조 (프로그래밍 방식 클릭용)
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3-2. Handler/함수 주석 (필수)
|
||||||
|
|
||||||
|
이벤트 핸들러에 Step 주석 추가
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* 작성 확인 버튼 클릭 핸들러
|
||||||
|
* @see OpptyDetailHeader.tsx - handleConfirm prop으로 전달
|
||||||
|
*/
|
||||||
|
const handleConfirm = () => {
|
||||||
|
// [Step 1] 선택된 날짜를 부모 컴포넌트로 전달
|
||||||
|
onConfirm(selectedDate);
|
||||||
|
// [Step 2] 다이얼로그 닫기
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3-3. JSX 영역 주석 (필수)
|
||||||
|
|
||||||
|
UI 구조를 파악하기 쉽게 영역별 주석 추가
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
{/* ========== 헤더 영역 ========== */}
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>제목</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{/* ========== 본문: 날짜 선택 영역 ========== */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 날짜 선택 Popover */}
|
||||||
|
<Popover>
|
||||||
|
{/* 트리거 버튼: 현재 선택된 날짜 표시 */}
|
||||||
|
<PopoverTrigger>...</PopoverTrigger>
|
||||||
|
{/* 캘린더 컨텐츠: 한국어 로케일 */}
|
||||||
|
<PopoverContent>...</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ========== 하단: 액션 버튼 영역 ========== */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button>취소</Button>
|
||||||
|
<Button>확인</Button>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
**JSX 주석 규칙:**
|
||||||
|
|
||||||
|
- `{/* ========== 영역명 ========== */}` - 큰 섹션 구분
|
||||||
|
- `{/* 설명 */}` - 개별 요소 설명
|
||||||
|
- 스크롤 없이 UI 구조 파악 가능하게
|
||||||
|
|
||||||
|
────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# 4) 함수 내부 Step 주석
|
||||||
|
|
||||||
|
**대상:**
|
||||||
|
조건/분기/데이터 변환/API 호출/상태 변경이 있는 함수
|
||||||
|
|
||||||
|
**형식:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// [Step 1] <무엇을 하는지 간결하게>
|
||||||
|
// [Step 2] <다음 단계>
|
||||||
|
// [Step 3] <최종 단계>
|
||||||
|
```
|
||||||
|
|
||||||
|
**규칙:**
|
||||||
|
|
||||||
|
- 각 Step은 1줄로
|
||||||
|
- 반드시 1번부터 순차적으로
|
||||||
|
- "무엇을", "왜"를 명확하게
|
||||||
|
|
||||||
|
**예시:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const getMainLeads = async (params) => {
|
||||||
|
// [Step 1] UI 정렬 필드를 백엔드 컬럼명으로 매핑
|
||||||
|
const mappedField = sortFieldMap[sortField] || sortField;
|
||||||
|
|
||||||
|
// [Step 2] API 요청 파라미터 구성
|
||||||
|
const requestParams = { ... };
|
||||||
|
|
||||||
|
// [Step 3] 리드 목록 조회 API 호출
|
||||||
|
const { data } = await axiosInstance.get(...);
|
||||||
|
|
||||||
|
// [Step 4] 응답 데이터 검증 및 기본값 설정
|
||||||
|
let dataList = data?.data?.list || [];
|
||||||
|
|
||||||
|
// [Step 5] UI 모델로 변환 및 결과 반환
|
||||||
|
return { list: dataList.map(convertToRow), ... };
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# 5) 레이어별 특수 규칙
|
||||||
|
|
||||||
|
## 5-1. Service/API
|
||||||
|
|
||||||
|
- **Step 주석**: API 호출 흐름을 단계별로 명시
|
||||||
|
- **@see**: 이 API를 호출하는 모든 훅/컴포넌트 명시
|
||||||
|
|
||||||
|
## 5-2. Hooks (TanStack Query)
|
||||||
|
|
||||||
|
- **Query Key**: 반환 구조 예시 필수
|
||||||
|
- **캐시 전략**: invalidateQueries/setQueryData 사용 이유
|
||||||
|
- **@see**: 이 훅을 사용하는 모든 컴포넌트 명시
|
||||||
|
|
||||||
|
## 5-3. Adapters
|
||||||
|
|
||||||
|
- **간단한 변환**: 주석 불필요
|
||||||
|
- **복잡한 변환**: 입력→출력 1줄 설명 + 변환 규칙
|
||||||
|
|
||||||
|
## 5-4. Components (Container/Modal)
|
||||||
|
|
||||||
|
- **상태 관리**: 어떤 state가 어떤 이벤트로 변경되는지
|
||||||
|
- **Dialog/Modal**: open 상태 소유자, 닫힘 조건
|
||||||
|
- **Table**: 인라인 편집, 스켈레톤 범위
|
||||||
|
- **JSX 영역 주석**: UI 구조 파악용 영역 구분 주석 필수
|
||||||
|
|
||||||
|
## 5-5. Zustand Store
|
||||||
|
|
||||||
|
- **왜 store인지**: 페이지 이동/모달 간 상태 유지 이유
|
||||||
|
- **reset 조건**: 언제 초기화되는지
|
||||||
|
- **서버 캐시와 역할 분담**: React Query와의 경계
|
||||||
|
|
||||||
|
────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# 6) 작업 순서
|
||||||
|
|
||||||
|
1. 파일 레이어 판별 (Infrastructure/Hooks/UI/Core)
|
||||||
|
2. 파일 상단 TSDoc 추가 (@see 포함)
|
||||||
|
3. export 대상에 TSDoc 추가 (@see 필수)
|
||||||
|
4. State/Ref에 인라인 주석 추가
|
||||||
|
5. Handler 함수에 TSDoc + Step 주석 추가
|
||||||
|
6. JSX 영역별 구분 주석 추가
|
||||||
|
7. Query Key Factory에 반환 구조 예시 추가
|
||||||
|
|
||||||
|
# 제약사항
|
||||||
|
|
||||||
|
- **@author는 jihoon87.lee 고정**
|
||||||
|
- **@see는 필수**: 호출 관계 명확히
|
||||||
|
- **Step 주석은 1줄**: 간결하게
|
||||||
|
- **JSX 주석 필수**: UI 구조 파악용
|
||||||
|
- **@see는 파일명 + 함수명 + 역할**: 전체 경로 불필요
|
||||||
|
|
||||||
|
# 지금부터 작업
|
||||||
|
|
||||||
|
내가 주는 코드를 위 규칙에 맞게 "주석만" 보강하라.
|
||||||
9
.env.example
Normal file
9
.env.example
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
# Supabase 환경 설정 예제 파일
|
||||||
|
# 이 파일의 이름을 .env.local 로 변경한 뒤, 실제 값을 채워넣으세요.
|
||||||
|
# 값 확인: https://supabase.com/dashboard/project/_/settings/api
|
||||||
|
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=
|
||||||
|
|
||||||
|
# 세션 타임아웃 (분 단위)
|
||||||
|
NEXT_PUBLIC_SESSION_TIMEOUT_MINUTES=30
|
||||||
7
.gitignore
vendored
7
.gitignore
vendored
@@ -29,6 +29,9 @@ coverage/
|
|||||||
.env.production.local
|
.env.production.local
|
||||||
.env*.local
|
.env*.local
|
||||||
|
|
||||||
|
# ★ 예제 파일은 공유해야 하므로 예외 처리 (깃에 올라감)
|
||||||
|
!.env.example
|
||||||
|
|
||||||
# ========================================
|
# ========================================
|
||||||
# IDE & Editor (에디터 설정)
|
# IDE & Editor (에디터 설정)
|
||||||
# ========================================
|
# ========================================
|
||||||
@@ -117,5 +120,7 @@ storybook-static/
|
|||||||
.cache/
|
.cache/
|
||||||
node_modules
|
node_modules
|
||||||
|
|
||||||
# Playwright MCP
|
# ========================================
|
||||||
|
# Custom
|
||||||
|
# ========================================
|
||||||
.playwright-mcp/
|
.playwright-mcp/
|
||||||
|
|||||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"chatgpt.openOnStartup": false
|
||||||
|
}
|
||||||
45
AGENTS.md
Normal file
45
AGENTS.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# AGENTS.md (auto-trade)
|
||||||
|
|
||||||
|
## 기본 원칙
|
||||||
|
- 모든 응답과 설명은 한국어로 작성.
|
||||||
|
- 쉬운 말로 설명. 어려운 용어는 괄호로 짧게 뜻을 덧붙임.
|
||||||
|
- 요청이 모호하면 먼저 질문 1~3개로 범위를 확인.
|
||||||
|
|
||||||
|
## 프로젝트 요약
|
||||||
|
- Next.js 16 App Router, React 19, TypeScript
|
||||||
|
- 상태 관리: zustand
|
||||||
|
- 데이터: Supabase
|
||||||
|
- 폼 및 검증: react-hook-form, zod
|
||||||
|
- UI: Tailwind CSS v4, Radix UI (components.json 사용)
|
||||||
|
|
||||||
|
## 명령어
|
||||||
|
- 개발 서버: (포트는 3001번이야)
|
||||||
|
pm run dev
|
||||||
|
- 린트:
|
||||||
|
pm run lint
|
||||||
|
- 빌드:
|
||||||
|
pm run build
|
||||||
|
- 실행:
|
||||||
|
pm run start
|
||||||
|
|
||||||
|
## 코드 및 문서 규칙
|
||||||
|
- JSX 섹션 주석 형식: {/* ========== SECTION NAME ========== */}
|
||||||
|
- 함수 및 컴포넌트 JSDoc에 @see 필수 (호출 파일, 함수 또는 이벤트 이름, 목적 포함)
|
||||||
|
- 상태 정의, 이벤트 핸들러, 복잡한 JSX 로직에는 인라인 주석을 충분히 작성
|
||||||
|
|
||||||
|
## 브랜드 색상 규칙
|
||||||
|
- 메인 컬러는 헤더 로고/프로필 기준의 보라 계열 `brand` 팔레트를 사용.
|
||||||
|
- 새 UI 작성 시 `indigo/purple/pink` 하드코딩 대신 `brand-*` 토큰 사용. 예: `bg-brand-500`, `text-brand-600`, `from-brand-500 to-brand-700`.
|
||||||
|
- 기본 액션 색(버튼/포커스)은 `primary`를 사용하고, `primary`는 `app/globals.css`의 `brand` 팔레트와 같은 톤으로 유지.
|
||||||
|
- 색상 변경이 필요하면 컴포넌트 개별 수정보다 먼저 `app/globals.css` 토큰을 수정.
|
||||||
|
|
||||||
|
## 설명 방식
|
||||||
|
- 단계별로 짧게, 예시는 1개만.
|
||||||
|
- 사용자가 요청한 변경과 이유를 함께 설명.
|
||||||
|
- 파일 경로는 pp/...처럼 코드 형식으로 표기.
|
||||||
|
|
||||||
|
## 여러 도구를 함께 쓸 때 (쉬운 설명)
|
||||||
|
- 기준 설명을 한 군데에 모아두고, 그 파일만 계속 업데이트하는 것이 핵심.
|
||||||
|
- 예를 들어 PROJECT_CONTEXT.md에 스택, 폴더 구조, 규칙을 적어둔다.
|
||||||
|
- 그리고 각 도구의 규칙 파일에 PROJECT_CONTEXT.md를 참고라고 써 둔다.
|
||||||
|
- 이렇게 하면 어떤 도구를 쓰든 같은 파일을 읽게 되어, 매번 다시 설명할 일이 줄어든다.
|
||||||
48
PROJECT_CONTEXT.md
Normal file
48
PROJECT_CONTEXT.md
Normal file
@@ -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 참고만 적기
|
||||||
86
app/(auth)/forgot-password/page.tsx
Normal file
86
app/(auth)/forgot-password/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
app/(auth)/layout.tsx
Normal file
33
app/(auth)/layout.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { Header } from "@/features/layout/components/header";
|
||||||
|
import { createClient } from "@/utils/supabase/server";
|
||||||
|
|
||||||
|
export default async function AuthLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const supabase = await createClient();
|
||||||
|
const {
|
||||||
|
data: { user },
|
||||||
|
} = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-linear-to-br from-gray-50 via-white to-gray-100 dark:from-black dark:via-gray-950 dark:to-gray-900">
|
||||||
|
{/* ========== 헤더 (홈 이동용) ========== */}
|
||||||
|
<Header user={user} />
|
||||||
|
|
||||||
|
{/* ========== 배경 그라디언트 레이어 ========== */}
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,var(--tw-gradient-stops))] from-gray-200/30 via-gray-100/15 to-transparent dark:from-gray-800/30 dark:via-gray-900/20" />
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,var(--tw-gradient-stops))] from-gray-300/30 via-gray-200/15 to-transparent dark:from-gray-700/30 dark:via-gray-800/20" />
|
||||||
|
|
||||||
|
{/* ========== 애니메이션 블러 효과 ========== */}
|
||||||
|
<div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-gray-300/20 blur-3xl dark:bg-gray-700/20" />
|
||||||
|
<div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-gray-400/20 blur-3xl delay-700 dark:bg-gray-600/20" />
|
||||||
|
|
||||||
|
{/* ========== 메인 콘텐츠 영역 (중앙 정렬) ========== */}
|
||||||
|
<main className="z-10 flex w-full flex-1 flex-col items-center justify-center px-4 py-12">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
app/(auth)/login/page.tsx
Normal file
62
app/(auth)/login/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
61
app/(auth)/reset-password/page.tsx
Normal file
61
app/(auth)/reset-password/page.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import FormMessage from "@/components/form-message";
|
||||||
|
import ResetPasswordForm from "@/features/auth/components/reset-password-form";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { createClient } from "@/utils/supabase/server";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [비밀번호 재설정 페이지]
|
||||||
|
*
|
||||||
|
* 이메일 링크를 타고 들어온 사용자가 새 비밀번호를 설정하는 페이지입니다.
|
||||||
|
* - URL에 포함된 토큰 검증은 Middleware 및 Auth Confirm Route에서 선행됩니다.
|
||||||
|
* - 유효한 세션(Recovery Mode)이 없으면 로그인 페이지로 리다이렉트됩니다.
|
||||||
|
*/
|
||||||
|
export default async function ResetPasswordPage({
|
||||||
|
searchParams,
|
||||||
|
}: {
|
||||||
|
searchParams: Promise<{ message?: string }>;
|
||||||
|
}) {
|
||||||
|
const params = await searchParams;
|
||||||
|
const supabase = await createClient();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: { user },
|
||||||
|
} = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
redirect(`/login`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { message } = params;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||||
|
{message && <FormMessage message={message} />}
|
||||||
|
|
||||||
|
<Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
|
||||||
|
<CardHeader className="space-y-3 text-center">
|
||||||
|
<div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-gray-800 to-black shadow-lg dark:from-white dark:to-gray-200">
|
||||||
|
<span className="text-sm font-semibold">PW</span>
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-3xl font-bold tracking-tight">
|
||||||
|
비밀번호 재설정
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-base">
|
||||||
|
새 비밀번호를 입력해 주세요.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
<ResetPasswordForm />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
56
app/(auth)/signup/page.tsx
Normal file
56
app/(auth)/signup/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
226
app/(home)/page.tsx
Normal file
226
app/(home)/page.tsx
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
/**
|
||||||
|
* @file app/(home)/page.tsx
|
||||||
|
* @description 서비스 메인 랜딩 페이지
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Pages (Server Component)
|
||||||
|
* - [역할] 비로그인 유저 유입, 브랜드 소개, 로그인/대시보드 유도
|
||||||
|
* - [구성요소] Header, Hero Section (Spline 3D), Feature Section (Bento Grid)
|
||||||
|
* - [데이터 흐름] Server Auth Check -> Client Component Props
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { createClient } from "@/utils/supabase/server";
|
||||||
|
import { Header } from "@/features/layout/components/header";
|
||||||
|
import { AUTH_ROUTES } from "@/features/auth/constants";
|
||||||
|
import { SplineScene } from "@/features/home/components/spline-scene";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 메인 페이지 컴포넌트 (비동기 서버 컴포넌트)
|
||||||
|
* @returns Landing Page Elements
|
||||||
|
* @see layout.tsx - RootLayout 내에서 렌더링
|
||||||
|
* @see spline-scene.tsx - 3D 인터랙션
|
||||||
|
*/
|
||||||
|
export default async function HomePage() {
|
||||||
|
// [Step 1] 서버 사이드 인증 상태 확인
|
||||||
|
const supabase = await createClient();
|
||||||
|
const {
|
||||||
|
data: { user },
|
||||||
|
} = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen flex-col overflow-x-hidden">
|
||||||
|
<Header user={user} showDashboardLink={true} />
|
||||||
|
|
||||||
|
<main className="flex-1 bg-background pt-16">
|
||||||
|
{/* Background Pattern */}
|
||||||
|
<div className="absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
|
||||||
|
|
||||||
|
<section className="container relative mx-auto max-w-7xl px-4 pt-12 md:pt-24 lg:pt-32">
|
||||||
|
<div className="flex flex-col items-center justify-center text-center">
|
||||||
|
{/* Badge */}
|
||||||
|
<div className="mb-6 inline-flex items-center rounded-full border border-brand-200/50 bg-brand-50/50 px-3 py-1 text-sm font-medium text-brand-600 backdrop-blur-md dark:border-brand-800/50 dark:bg-brand-900/50 dark:text-brand-300">
|
||||||
|
<span className="mr-2 flex h-2 w-2 animate-pulse rounded-full bg-brand-500"></span>
|
||||||
|
The Future of Trading
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="font-heading text-4xl font-black tracking-tight text-foreground sm:text-6xl md:text-7xl lg:text-8xl">
|
||||||
|
투자의 미래를 <br className="hidden sm:block" />
|
||||||
|
<span className="animate-gradient-x bg-linear-to-r from-brand-500 via-brand-600 to-brand-700 bg-clip-text text-transparent underline decoration-brand-500/30 decoration-4 underline-offset-8">
|
||||||
|
자동화하세요
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl leading-relaxed break-keep">
|
||||||
|
AutoTrade는 최첨단 알고리즘을 통해 24시간 암호화폐 시장을
|
||||||
|
분석합니다.
|
||||||
|
<br className="hidden md:block" />
|
||||||
|
감정 없는 데이터 기반 투자로 안정적인 수익을 경험해보세요.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row">
|
||||||
|
{user ? (
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
size="lg"
|
||||||
|
className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-brand-500/20 transition-all hover:scale-105 hover:shadow-brand-500/40"
|
||||||
|
>
|
||||||
|
<Link href={AUTH_ROUTES.DASHBOARD}>대시보드 바로가기</Link>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
size="lg"
|
||||||
|
className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-brand-500/20 transition-all hover:scale-105 hover:shadow-brand-500/40"
|
||||||
|
>
|
||||||
|
<Link href={AUTH_ROUTES.LOGIN}>무료로 시작하기</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{!user && (
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="h-14 rounded-full border-border bg-background/50 px-10 text-lg hover:bg-accent/50 backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
<Link href={AUTH_ROUTES.LOGIN}>데모 체험하기</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Spline Scene - Centered & Wide */}
|
||||||
|
<div className="relative mt-16 w-full max-w-5xl">
|
||||||
|
<div className="group relative aspect-video w-full overflow-hidden rounded-3xl border border-white/20 bg-linear-to-b from-white/10 to-transparent shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20">
|
||||||
|
{/* Glow Effect */}
|
||||||
|
<div className="absolute -inset-1 rounded-3xl bg-linear-to-r from-brand-500 via-brand-600 to-brand-700 opacity-20 blur-2xl transition-opacity duration-500 group-hover:opacity-40" />
|
||||||
|
|
||||||
|
<SplineScene
|
||||||
|
sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
|
||||||
|
className="relative z-10 h-full w-full rounded-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section - Bento Grid */}
|
||||||
|
<section className="container mx-auto max-w-7xl px-4 py-24 sm:py-32">
|
||||||
|
<div className="mb-16 text-center">
|
||||||
|
<h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
|
||||||
|
강력한 기능,{" "}
|
||||||
|
<span className="text-brand-500">직관적인 경험</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-lg text-muted-foreground">
|
||||||
|
성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
|
||||||
|
{/* Feature 1 */}
|
||||||
|
<div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
|
||||||
|
<div className="relative z-10 flex flex-col justify-between h-full gap-6">
|
||||||
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
|
||||||
|
<svg
|
||||||
|
className="w-8 h-8"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold mb-2">실시간 모니터링</h3>
|
||||||
|
<p className="text-muted-foreground text-lg leading-relaxed">
|
||||||
|
초당 수천 건의 트랜잭션을 실시간으로 분석합니다.
|
||||||
|
<br />
|
||||||
|
시장 변동성을 놓치지 않고 최적의 진입 시점을 포착하세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-0 right-0 h-64 w-64 translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature 2 (Tall) */}
|
||||||
|
<div className="group relative col-span-1 row-span-2 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50">
|
||||||
|
<div className="relative z-10 flex flex-col h-full gap-6">
|
||||||
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
|
||||||
|
<svg
|
||||||
|
className="w-8 h-8"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold">알고리즘 트레이딩</h3>
|
||||||
|
<p className="text-muted-foreground text-lg">
|
||||||
|
24시간 멈추지 않는 자동 매매 시스템입니다.
|
||||||
|
</p>
|
||||||
|
<div className="mt-auto space-y-4 pt-4">
|
||||||
|
{[
|
||||||
|
"추세 추종 전략",
|
||||||
|
"변동성 돌파",
|
||||||
|
"AI 예측 모델",
|
||||||
|
"리스크 관리",
|
||||||
|
].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className="flex items-center gap-3 text-sm font-medium text-foreground/80"
|
||||||
|
>
|
||||||
|
<div className="h-2 w-2 rounded-full bg-brand-500" />
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-0 left-0 h-64 w-64 -translate-x-1/2 translate-y-1/2 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature 3 */}
|
||||||
|
<div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
|
||||||
|
<div className="relative z-10 flex flex-col justify-between h-full gap-6">
|
||||||
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
|
||||||
|
<svg
|
||||||
|
className="w-8 h-8"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold mb-2">스마트 포트폴리오</h3>
|
||||||
|
<p className="text-muted-foreground text-lg leading-relaxed">
|
||||||
|
목표 수익률 달성 시 자동으로 이익을 실현하고, MDD를
|
||||||
|
최소화하여
|
||||||
|
<br />
|
||||||
|
시장이 하락할 때도 당신의 자산을 안전하게 지킵니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute right-0 bottom-0 h-40 w-40 translate-x-1/3 translate-y-1/3 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
115
app/(main)/dashboard/page.tsx
Normal file
115
app/(main)/dashboard/page.tsx
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
/**
|
||||||
|
* @file app/(main)/dashboard/page.tsx
|
||||||
|
* @description 사용자 대시보드 메인 페이지 (보호된 라우트)
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Pages (Server Component)
|
||||||
|
* - [역할] 사용자 자산 현황, 최근 활동, 통계 요약을 보여줌
|
||||||
|
* - [권한] 로그인한 사용자만 접근 가능 (Middleware에 의해 보호됨)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { createClient } from "@/utils/supabase/server";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Activity, CreditCard, DollarSign, Users } from "lucide-react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 대시보드 페이지 (비동기 서버 컴포넌트)
|
||||||
|
* @returns Dashboard Grid Layout
|
||||||
|
*/
|
||||||
|
export default async function DashboardPage() {
|
||||||
|
// [Step 1] 세션 확인 (Middleware가 1차 방어하지만, 데이터 접근 시 2차 확인)
|
||||||
|
const supabase = await createClient();
|
||||||
|
await supabase.auth.getUser();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 space-y-4 p-8 pt-6">
|
||||||
|
<div className="flex items-center justify-between space-y-2">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight">대시보드</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">총 수익</CardTitle>
|
||||||
|
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">$45,231.89</div>
|
||||||
|
<p className="text-xs text-muted-foreground">지난달 대비 +20.1%</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">구독자</CardTitle>
|
||||||
|
<Users className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">+2350</div>
|
||||||
|
<p className="text-xs text-muted-foreground">지난달 대비 +180.1%</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">판매량</CardTitle>
|
||||||
|
<CreditCard className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">+12,234</div>
|
||||||
|
<p className="text-xs text-muted-foreground">지난달 대비 +19%</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">현재 활동 중</CardTitle>
|
||||||
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">+573</div>
|
||||||
|
<p className="text-xs text-muted-foreground">지난 시간 대비 +201</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-7">
|
||||||
|
<Card className="col-span-4">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>개요</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pl-2">
|
||||||
|
{/* Chart placeholder */}
|
||||||
|
<div className="h-[200px] w-full bg-slate-100 dark:bg-slate-800 rounded-md flex items-center justify-center text-muted-foreground">
|
||||||
|
차트 영역 (준비 중)
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="col-span-3">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>최근 활동</CardTitle>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
이번 달 265건의 거래가 있었습니다.
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="ml-4 space-y-1">
|
||||||
|
<p className="text-sm font-medium leading-none">
|
||||||
|
비트코인 매수
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">BTC/USDT</p>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto font-medium">+$1,999.00</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="ml-4 space-y-1">
|
||||||
|
<p className="text-sm font-medium leading-none">
|
||||||
|
이더리움 매도
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">ETH/USDT</p>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto font-medium">+$39.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
app/(main)/layout.tsx
Normal file
24
app/(main)/layout.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { Header } from "@/features/layout/components/header";
|
||||||
|
import { Sidebar } from "@/features/layout/components/sidebar";
|
||||||
|
import { createClient } from "@/utils/supabase/server";
|
||||||
|
|
||||||
|
export default async function MainLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const supabase = await createClient();
|
||||||
|
const {
|
||||||
|
data: { user },
|
||||||
|
} = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen flex-col bg-zinc-50 dark:bg-black">
|
||||||
|
<Header user={user} />
|
||||||
|
<div className="flex flex-1">
|
||||||
|
<Sidebar />
|
||||||
|
<main className="flex-1 w-full p-6 md:p-8 lg:p-10">{children}</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,57 +1,121 @@
|
|||||||
import { createClient } from "@/utils/supabase/server";
|
import { createClient } from "@/utils/supabase/server";
|
||||||
import { NextResponse } from "next/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 인증 이메일(회원가입 확인, 비밀번호 재설정 등)에서
|
* Supabase 인증 후 리다이렉트되는 라우트입니다.
|
||||||
* 리다이렉트될 때 호출되는 API 라우트입니다.
|
* - 인증 코드를 세션으로 교환합니다.
|
||||||
*
|
* - 인증 에러를 처리합니다.
|
||||||
* PKCE(Proof Key for Code Exchange) 흐름:
|
* - 최종 목적지(Next URL)로 리다이렉트합니다.
|
||||||
* 1. 사용자가 이메일 링크 클릭
|
|
||||||
* 2. Supabase 서버가 토큰 검증 후 이 라우트로 `code` 파라미터와 함께 리다이렉트
|
|
||||||
* 3. 이 라우트에서 `code`를 세션으로 교환
|
|
||||||
* 4. 원래 목적지(next 파라미터)로 리다이렉트
|
|
||||||
*
|
|
||||||
* @param request - Next.js Request 객체
|
|
||||||
*/
|
*/
|
||||||
export async function GET(request: Request) {
|
export async function GET(request: NextRequest) {
|
||||||
const { searchParams, origin } = new URL(request.url);
|
// --------------------------------------------------------------------------
|
||||||
|
// 1. 요청 파라미터 및 URL 준비
|
||||||
|
// --------------------------------------------------------------------------
|
||||||
|
const requestUrl = request.nextUrl.clone(); // URL 조작을 위해 복제
|
||||||
|
const code = requestUrl.searchParams.get("code");
|
||||||
|
const next = requestUrl.searchParams.get("next") ?? AUTH_ROUTES.HOME;
|
||||||
|
|
||||||
// 1. URL에서 code와 next(리다이렉트 목적지) 추출
|
// 에러 파라미터 확인
|
||||||
const code = searchParams.get("code");
|
const error = requestUrl.searchParams.get("error");
|
||||||
const next = searchParams.get("next") ?? "/";
|
const error_code = requestUrl.searchParams.get("error_code");
|
||||||
|
const error_description = requestUrl.searchParams.get("error_description");
|
||||||
|
const origin = requestUrl.origin;
|
||||||
|
|
||||||
// 2. code가 있으면 세션으로 교환
|
// --------------------------------------------------------------------------
|
||||||
|
// 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) {
|
if (code) {
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
const { error } = await supabase.auth.exchangeCodeForSession(code);
|
|
||||||
|
|
||||||
if (!error) {
|
// 코드 교환 실행
|
||||||
// 3. 세션 교환 성공 - 원래 목적지로 리다이렉트
|
const { error: exchangeError } =
|
||||||
// next가 절대 URL(http://...)이면 그대로 사용, 아니면 origin + next
|
await supabase.auth.exchangeCodeForSession(code);
|
||||||
const forwardedHost = request.headers.get("x-forwarded-host"); // 프록시 환경 대응
|
|
||||||
|
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";
|
const isLocalEnv = process.env.NODE_ENV === "development";
|
||||||
|
|
||||||
|
// 리다이렉트할 최종 URL 설정
|
||||||
if (isLocalEnv) {
|
if (isLocalEnv) {
|
||||||
// 개발 환경: localhost 사용
|
// 로컬 개발 환경
|
||||||
return NextResponse.redirect(`${origin}${next}`);
|
return NextResponse.redirect(`${origin}${next}`);
|
||||||
} else if (forwardedHost) {
|
} else if (forwardedHost) {
|
||||||
// 프로덕션 + 프록시: x-forwarded-host 사용
|
// 프로덕션 환경 (Vercel 등 프록시 뒤)
|
||||||
return NextResponse.redirect(`https://${forwardedHost}${next}`);
|
return NextResponse.redirect(`https://${forwardedHost}${next}`);
|
||||||
} else {
|
} else {
|
||||||
// 프로덕션: origin 사용
|
// 기본
|
||||||
return NextResponse.redirect(`${origin}${next}`);
|
return NextResponse.redirect(`${origin}${next}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 에러 발생 시 로그 출력
|
// ------------------------------------------------------------------------
|
||||||
console.error("Auth callback error:", error.message);
|
// 3-2. 교환 실패: 에러 처리
|
||||||
|
// ------------------------------------------------------------------------
|
||||||
|
console.error("Auth exchange error:", exchangeError.message);
|
||||||
|
const message = getAuthErrorMessage(exchangeError);
|
||||||
|
return NextResponse.redirect(
|
||||||
|
`${origin}${AUTH_ROUTES.LOGIN}?message=${encodeURIComponent(message)}`,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4. code가 없거나 교환 실패 시 에러 페이지로 리다이렉트
|
// --------------------------------------------------------------------------
|
||||||
|
// 4. 잘못된 접근 처리
|
||||||
|
// --------------------------------------------------------------------------
|
||||||
const errorMessage = encodeURIComponent(
|
const errorMessage = encodeURIComponent(
|
||||||
"인증 링크가 만료되었거나 유효하지 않습니다.",
|
AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK,
|
||||||
|
);
|
||||||
|
return NextResponse.redirect(
|
||||||
|
`${origin}${AUTH_ROUTES.LOGIN}?message=${errorMessage}`,
|
||||||
);
|
);
|
||||||
return NextResponse.redirect(`${origin}/login?message=${errorMessage}`);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,76 +1,84 @@
|
|||||||
import { createClient } from "@/utils/supabase/server";
|
import { createClient } from "@/utils/supabase/server";
|
||||||
import { AUTH_ERROR_MESSAGES } from "@/features/auth/constants";
|
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 { type EmailOtpType } from "@supabase/supabase-js";
|
||||||
import { redirect } from "next/navigation";
|
import { NextResponse, type NextRequest } from "next/server";
|
||||||
import { type NextRequest } from "next/server";
|
|
||||||
|
|
||||||
// ========================================
|
const RESET_PASSWORD_PATH = AUTH_ROUTES.RESET_PASSWORD;
|
||||||
// 상수 정의
|
const LOGIN_PATH = AUTH_ROUTES.LOGIN;
|
||||||
// ========================================
|
|
||||||
|
|
||||||
/** 비밀번호 재설정 후 이동할 경로 */
|
|
||||||
const RESET_PASSWORD_PATH = "/reset-password";
|
|
||||||
|
|
||||||
/** 인증 실패 시 리다이렉트할 경로 */
|
|
||||||
const LOGIN_PATH = "/login";
|
|
||||||
|
|
||||||
// ========================================
|
|
||||||
// 라우트 핸들러
|
|
||||||
// ========================================
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [이메일 인증 확인 라우트]
|
* 이메일 인증(/auth/confirm) 처리
|
||||||
*
|
* - token_hash + type 검증
|
||||||
* Supabase 이메일 템플릿의 인증 링크를 처리합니다.
|
* - recovery 타입일 경우 세션 쿠키 설정 후 비밀번호 재설정 페이지로 리다이렉트
|
||||||
* - 회원가입 이메일 확인
|
|
||||||
* - 비밀번호 재설정
|
|
||||||
*
|
|
||||||
* @example Supabase 이메일 템플릿 형식
|
|
||||||
* {{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery
|
|
||||||
*/
|
*/
|
||||||
export async function GET(request: NextRequest) {
|
export async function GET(request: NextRequest) {
|
||||||
|
// 1) 이메일 링크에 들어있는 값 읽기
|
||||||
const { searchParams } = new URL(request.url);
|
const { searchParams } = new URL(request.url);
|
||||||
|
|
||||||
// ========== 파라미터 추출 ==========
|
// token_hash: 인증에 필요한 값
|
||||||
|
// type: 어떤 인증인지 구분 (예: 가입, 비밀번호 재설정)
|
||||||
const tokenHash = searchParams.get("token_hash");
|
const tokenHash = searchParams.get("token_hash");
|
||||||
const type = searchParams.get("type") as EmailOtpType | null;
|
const type = searchParams.get("type") as EmailOtpType | null;
|
||||||
const rawNext = searchParams.get("next");
|
|
||||||
|
|
||||||
// 보안: 외부 URL 리다이렉트 방지 (상대 경로만 허용)
|
// redirect_to/next: 인증 후에 이동할 주소
|
||||||
const nextPath = rawNext?.startsWith("/") ? rawNext : "/";
|
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) {
|
if (!tokenHash || !type) {
|
||||||
return redirectWithError(AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK);
|
return redirectWithError(request, AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 2) Supabase에게 "이 링크가 맞는지" 확인 요청
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
const { error } = await supabase.auth.verifyOtp({
|
const { error } = await supabase.auth.verifyOtp({
|
||||||
type,
|
type,
|
||||||
token_hash: tokenHash,
|
token_hash: tokenHash,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 확인 실패 시 이유를 알기 쉬운 메시지로 보여줌
|
||||||
if (error) {
|
if (error) {
|
||||||
console.error("[Auth Confirm] verifyOtp 실패:", error.message);
|
console.error("[Auth Confirm] verifyOtp error:", error.message);
|
||||||
return redirectWithError(AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK);
|
const message = getAuthErrorMessage(error);
|
||||||
|
return redirectWithError(request, message);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ========== 검증 성공 - 적절한 페이지로 리다이렉트 ==========
|
// 3) 비밀번호 재설정이면 재설정 페이지로 보내고 쿠키를 저장
|
||||||
if (type === "recovery") {
|
if (type === "recovery") {
|
||||||
redirect(RESET_PASSWORD_PATH);
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
redirect(nextPath);
|
// 4) 그 외 인증은 기본 경로로 이동
|
||||||
|
return NextResponse.redirect(new URL(nextPath, request.url));
|
||||||
}
|
}
|
||||||
|
|
||||||
// ========================================
|
// 로그인 페이지로 보내면서 에러 메시지를 함께 전달
|
||||||
// 헬퍼 함수
|
function redirectWithError(request: NextRequest, message: string) {
|
||||||
// ========================================
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 에러 메시지와 함께 로그인 페이지로 리다이렉트
|
|
||||||
*/
|
|
||||||
function redirectWithError(message: string): never {
|
|
||||||
const encodedMessage = encodeURIComponent(message);
|
const encodedMessage = encodeURIComponent(message);
|
||||||
redirect(`${LOGIN_PATH}?message=${encodedMessage}`);
|
return NextResponse.redirect(
|
||||||
|
new URL(`${LOGIN_PATH}?message=${encodedMessage}`, request.url),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,108 +0,0 @@
|
|||||||
import FormMessage from "@/components/form-message";
|
|
||||||
import { requestPasswordReset } from "@/features/auth/actions";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [비밀번호 찾기 페이지]
|
|
||||||
*
|
|
||||||
* 사용자가 이메일을 입력하면 비밀번호 재설정 링크를 이메일로 발송합니다.
|
|
||||||
* 로그인/회원가입 페이지와 동일한 디자인 시스템 사용
|
|
||||||
*
|
|
||||||
* @param searchParams - URL 쿼리 파라미터 (에러 메시지 전달용)
|
|
||||||
*/
|
|
||||||
export default async function ForgotPasswordPage({
|
|
||||||
searchParams,
|
|
||||||
}: {
|
|
||||||
searchParams: Promise<{ message: string }>;
|
|
||||||
}) {
|
|
||||||
// URL에서 메시지 파라미터 추출
|
|
||||||
const { message } = await searchParams;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 px-4 py-12 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950">
|
|
||||||
{/* ========== 배경 그라디언트 ========== */}
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200/40 via-purple-200/20 to-transparent dark:from-indigo-900/30 dark:via-purple-900/20" />
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-pink-200/40 via-purple-200/20 to-transparent dark:from-pink-900/30 dark:via-purple-900/20" />
|
|
||||||
|
|
||||||
{/* ========== 애니메이션 블러 효과 ========== */}
|
|
||||||
<div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-indigo-400/30 blur-3xl dark:bg-indigo-600/20" />
|
|
||||||
<div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-purple-400/30 blur-3xl delay-700 dark:bg-purple-600/20" />
|
|
||||||
|
|
||||||
{/* ========== 메인 콘텐츠 ========== */}
|
|
||||||
<div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
||||||
{/* 에러/성공 메시지 */}
|
|
||||||
<FormMessage message={message} />
|
|
||||||
|
|
||||||
{/* ========== 비밀번호 찾기 카드 ========== */}
|
|
||||||
<Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
|
|
||||||
<CardHeader className="space-y-3 text-center">
|
|
||||||
{/* 아이콘 */}
|
|
||||||
<div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg">
|
|
||||||
<span className="text-4xl">🔑</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="your@email.com"
|
|
||||||
autoComplete="email"
|
|
||||||
required
|
|
||||||
className="h-11 transition-all duration-200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ========== 재설정 링크 발송 버튼 ========== */}
|
|
||||||
<Button
|
|
||||||
formAction={requestPasswordReset}
|
|
||||||
className="h-11 w-full bg-gradient-to-r from-indigo-600 to-purple-600 font-semibold text-white shadow-lg transition-all hover:from-indigo-700 hover:to-purple-700 hover:shadow-xl"
|
|
||||||
>
|
|
||||||
재설정 링크 보내기
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
{/* ========== 로그인 페이지로 돌아가기 ========== */}
|
|
||||||
<div className="text-center">
|
|
||||||
<Link
|
|
||||||
href="/login"
|
|
||||||
className="text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
||||||
>
|
|
||||||
← 로그인 페이지로 돌아가기
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -8,6 +8,7 @@
|
|||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-geist-sans);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--font-heading: var(--font-heading);
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
@@ -37,6 +38,16 @@
|
|||||||
--color-popover: var(--popover);
|
--color-popover: var(--popover);
|
||||||
--color-card-foreground: var(--card-foreground);
|
--color-card-foreground: var(--card-foreground);
|
||||||
--color-card: var(--card);
|
--color-card: var(--card);
|
||||||
|
--color-brand-50: oklch(0.97 0.02 294);
|
||||||
|
--color-brand-100: oklch(0.93 0.05 294);
|
||||||
|
--color-brand-200: oklch(0.87 0.1 294);
|
||||||
|
--color-brand-300: oklch(0.79 0.15 294);
|
||||||
|
--color-brand-400: oklch(0.7 0.2 294);
|
||||||
|
--color-brand-500: oklch(0.62 0.24 294);
|
||||||
|
--color-brand-600: oklch(0.56 0.26 294);
|
||||||
|
--color-brand-700: oklch(0.49 0.24 295);
|
||||||
|
--color-brand-800: oklch(0.4 0.2 296);
|
||||||
|
--color-brand-900: oklch(0.33 0.14 297);
|
||||||
--radius-sm: calc(var(--radius) - 4px);
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
--radius-md: calc(var(--radius) - 2px);
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
--radius-lg: var(--radius);
|
--radius-lg: var(--radius);
|
||||||
@@ -44,6 +55,19 @@
|
|||||||
--radius-2xl: calc(var(--radius) + 8px);
|
--radius-2xl: calc(var(--radius) + 8px);
|
||||||
--radius-3xl: calc(var(--radius) + 12px);
|
--radius-3xl: calc(var(--radius) + 12px);
|
||||||
--radius-4xl: calc(var(--radius) + 16px);
|
--radius-4xl: calc(var(--radius) + 16px);
|
||||||
|
|
||||||
|
--animate-gradient-x: gradient-x 15s ease infinite;
|
||||||
|
|
||||||
|
@keyframes gradient-x {
|
||||||
|
0%, 100% {
|
||||||
|
background-size: 200% 200%;
|
||||||
|
background-position: left center;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-size: 200% 200%;
|
||||||
|
background-position: right center;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@@ -54,7 +78,7 @@
|
|||||||
--card-foreground: oklch(0.145 0 0);
|
--card-foreground: oklch(0.145 0 0);
|
||||||
--popover: oklch(1 0 0);
|
--popover: oklch(1 0 0);
|
||||||
--popover-foreground: oklch(0.145 0 0);
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
--primary: oklch(0.205 0 0);
|
--primary: oklch(0.56 0.26 294);
|
||||||
--primary-foreground: oklch(0.985 0 0);
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
--secondary: oklch(0.97 0 0);
|
--secondary: oklch(0.97 0 0);
|
||||||
--secondary-foreground: oklch(0.205 0 0);
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
@@ -65,7 +89,7 @@
|
|||||||
--destructive: oklch(0.577 0.245 27.325);
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
--border: oklch(0.922 0 0);
|
--border: oklch(0.922 0 0);
|
||||||
--input: oklch(0.922 0 0);
|
--input: oklch(0.922 0 0);
|
||||||
--ring: oklch(0.708 0 0);
|
--ring: oklch(0.62 0.24 294);
|
||||||
--chart-1: oklch(0.646 0.222 41.116);
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
--chart-2: oklch(0.6 0.118 184.704);
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
--chart-3: oklch(0.398 0.07 227.392);
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
@@ -73,7 +97,7 @@
|
|||||||
--chart-5: oklch(0.769 0.188 70.08);
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
--sidebar: oklch(0.985 0 0);
|
--sidebar: oklch(0.985 0 0);
|
||||||
--sidebar-foreground: oklch(0.145 0 0);
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
--sidebar-primary: oklch(0.205 0 0);
|
--sidebar-primary: oklch(0.56 0.26 294);
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-accent: oklch(0.97 0 0);
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
@@ -88,8 +112,8 @@
|
|||||||
--card-foreground: oklch(0.985 0 0);
|
--card-foreground: oklch(0.985 0 0);
|
||||||
--popover: oklch(0.205 0 0);
|
--popover: oklch(0.205 0 0);
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
--primary: oklch(0.922 0 0);
|
--primary: oklch(0.56 0.26 294);
|
||||||
--primary-foreground: oklch(0.205 0 0);
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
--secondary: oklch(0.269 0 0);
|
--secondary: oklch(0.269 0 0);
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
--muted: oklch(0.269 0 0);
|
--muted: oklch(0.269 0 0);
|
||||||
@@ -99,7 +123,7 @@
|
|||||||
--destructive: oklch(0.704 0.191 22.216);
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
--border: oklch(1 0 0 / 10%);
|
--border: oklch(1 0 0 / 10%);
|
||||||
--input: oklch(1 0 0 / 15%);
|
--input: oklch(1 0 0 / 15%);
|
||||||
--ring: oklch(0.556 0 0);
|
--ring: oklch(0.62 0.24 294);
|
||||||
--chart-1: oklch(0.488 0.243 264.376);
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
--chart-2: oklch(0.696 0.17 162.48);
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
--chart-3: oklch(0.769 0.188 70.08);
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
@@ -107,7 +131,7 @@
|
|||||||
--chart-5: oklch(0.645 0.246 16.439);
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
--sidebar: oklch(0.205 0 0);
|
--sidebar: oklch(0.205 0 0);
|
||||||
--sidebar-foreground: oklch(0.985 0 0);
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
--sidebar-primary: oklch(0.56 0.26 294);
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-accent: oklch(0.269 0 0);
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
|||||||
@@ -1,5 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* @file app/layout.tsx
|
||||||
|
* @description 애플리케이션의 최상위 루트 레이아웃 (RootLayout)
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Infrastructure/Layout
|
||||||
|
* - [역할] 전역 스타일(Font/CSS), 테마(Provider), 세션 관리(Manager) 초기화
|
||||||
|
* - [데이터 흐름] Providers -> Children
|
||||||
|
* - [연관 파일] globals.css, theme-provider.tsx
|
||||||
|
*/
|
||||||
|
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono, Outfit } from "next/font/google";
|
||||||
|
import { QueryProvider } from "@/providers/query-provider";
|
||||||
|
import { ThemeProvider } from "@/components/theme-provider";
|
||||||
|
import { SessionManager } from "@/features/auth/components/session-manager";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
@@ -12,22 +25,43 @@ const geistMono = Geist_Mono({
|
|||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const outfit = Outfit({
|
||||||
|
variable: "--font-heading",
|
||||||
|
subsets: ["latin"],
|
||||||
|
display: "swap",
|
||||||
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "AutoTrade",
|
||||||
description: "Generated by create next app",
|
description: "Automated Crypto Trading Platform",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RootLayout 컴포넌트
|
||||||
|
* @param children 렌더링할 자식 컴포넌트
|
||||||
|
* @returns HTML 구조 및 전역 Provider 래퍼
|
||||||
|
* @see theme-provider.tsx - 다크모드 지원
|
||||||
|
* @see session-manager.tsx - 세션 타임아웃 감지
|
||||||
|
*/
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" className="scroll-smooth" suppressHydrationWarning>
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} ${outfit.variable} antialiased`}
|
||||||
>
|
>
|
||||||
{children}
|
<ThemeProvider
|
||||||
|
attribute="class"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
disableTransitionOnChange
|
||||||
|
>
|
||||||
|
<SessionManager />
|
||||||
|
<QueryProvider>{children}</QueryProvider>
|
||||||
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,224 +0,0 @@
|
|||||||
import Link from "next/link";
|
|
||||||
import { login } from "@/features/auth/actions";
|
|
||||||
import FormMessage from "@/components/form-message";
|
|
||||||
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 { Checkbox } from "@/components/ui/checkbox";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [로그인 페이지 컴포넌트]
|
|
||||||
*
|
|
||||||
* Modern UI with glassmorphism effect (유리 형태 디자인)
|
|
||||||
* - 투명 배경 + 블러 효과로 깊이감 표현
|
|
||||||
* - 그라디언트 배경으로 생동감 추가
|
|
||||||
* - shadcn/ui 컴포넌트로 일관된 디자인 시스템 유지
|
|
||||||
*
|
|
||||||
* @param searchParams - URL 쿼리 파라미터 (에러 메시지 전달용)
|
|
||||||
*/
|
|
||||||
export default async function LoginPage({
|
|
||||||
searchParams,
|
|
||||||
}: {
|
|
||||||
searchParams: Promise<{ message: string }>;
|
|
||||||
}) {
|
|
||||||
// URL에서 메시지 파라미터 추출 (로그인 실패 시 에러 메시지 표시)
|
|
||||||
const { message } = await searchParams;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 px-4 py-12 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950">
|
|
||||||
{/* ========== 배경 그라디언트 레이어 ========== */}
|
|
||||||
{/* 웹 페이지 전체 배경을 그라디언트로 채웁니다 */}
|
|
||||||
{/* 라이트 모드: 부드러운 파스텔 톤 (indigo → purple → pink) */}
|
|
||||||
{/* 다크 모드: 진한 어두운 톤으로 눈부심 방지 */}
|
|
||||||
|
|
||||||
{/* 추가 그라디언트 효과 1: 우상단에서 시작하는 원형 그라디언트 */}
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200/40 via-purple-200/20 to-transparent dark:from-indigo-900/30 dark:via-purple-900/20" />
|
|
||||||
|
|
||||||
{/* 추가 그라디언트 효과 2: 좌하단에서 시작하는 원형 그라디언트 */}
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-pink-200/40 via-purple-200/20 to-transparent dark:from-pink-900/30 dark:via-purple-900/20" />
|
|
||||||
|
|
||||||
{/* ========== 애니메이션 블러 효과 ========== */}
|
|
||||||
{/* 부드럽게 깜빡이는 원형 블러로 생동감 표현 */}
|
|
||||||
{/* animate-pulse: 1.5초 주기로 opacity 변화 */}
|
|
||||||
<div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-indigo-400/30 blur-3xl dark:bg-indigo-600/20" />
|
|
||||||
{/* delay-700: 700ms 지연으로 교차 애니메이션 효과 */}
|
|
||||||
<div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-purple-400/30 blur-3xl delay-700 dark:bg-purple-600/20" />
|
|
||||||
|
|
||||||
{/* ========== 메인 콘텐츠 영역 ========== */}
|
|
||||||
{/* z-10: 배경보다 위에 표시 */}
|
|
||||||
{/* animate-in: 페이지 로드 시 fade-in + slide-up 애니메이션 */}
|
|
||||||
<div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
||||||
{/* 에러/성공 메시지 표시 영역 */}
|
|
||||||
{/* URL 파라미터에 message가 있으면 표시됨 */}
|
|
||||||
<FormMessage message={message} />
|
|
||||||
|
|
||||||
{/* ========== 로그인 카드 (Glassmorphism) ========== */}
|
|
||||||
{/* bg-white/70: 70% 투명도의 흰색 배경 */}
|
|
||||||
{/* backdrop-blur-xl: 배경 블러 효과 (유리 느낌) */}
|
|
||||||
<Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
|
|
||||||
{/* ========== 카드 헤더 영역 ========== */}
|
|
||||||
<CardHeader className="space-y-3 text-center">
|
|
||||||
{/* 아이콘 배경: 그라디언트 원형 */}
|
|
||||||
<div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg">
|
|
||||||
<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">
|
|
||||||
{/* 로그인 폼 - formAction으로 서버 액션(login) 연결 */}
|
|
||||||
<form className="space-y-5">
|
|
||||||
{/* ========== 이메일 입력 필드 ========== */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
{/* htmlFor와 Input의 id 연결로 접근성 향상 */}
|
|
||||||
<Label htmlFor="email" className="text-sm font-medium">
|
|
||||||
이메일
|
|
||||||
</Label>
|
|
||||||
{/* autoComplete="email": 브라우저 자동완성 기능 활성화 */}
|
|
||||||
{/* required: HTML5 필수 입력 검증 */}
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="your@email.com"
|
|
||||||
autoComplete="email"
|
|
||||||
required
|
|
||||||
className="h-11 transition-all duration-200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ========== 비밀번호 입력 필드 ========== */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="password" className="text-sm font-medium">
|
|
||||||
비밀번호
|
|
||||||
</Label>
|
|
||||||
{/* pattern: 최소 8자, 대문자, 소문자, 숫자, 특수문자 각 1개 이상 */}
|
|
||||||
{/* 참고: HTML pattern에서는 <, >, {, } 등 일부 특수문자 사용 시 브라우저 호환성 문제 발생 */}
|
|
||||||
<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" name="remember-me" />
|
|
||||||
<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="/forgot-password"
|
|
||||||
className="text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
||||||
>
|
|
||||||
비밀번호 찾기
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 로그인 버튼 */}
|
|
||||||
<Button
|
|
||||||
formAction={login}
|
|
||||||
type="submit"
|
|
||||||
className="h-11 w-full bg-gradient-to-r from-indigo-600 to-purple-600 font-semibold shadow-lg transition-all duration-200 hover:from-indigo-700 hover:to-purple-700 hover:shadow-xl"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
로그인
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* 회원가입 링크 */}
|
|
||||||
<p className="text-center text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
계정이 없으신가요?{" "}
|
|
||||||
<Link
|
|
||||||
href="/signup"
|
|
||||||
className="font-semibold text-indigo-600 transition-colors hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
||||||
>
|
|
||||||
회원가입 하기
|
|
||||||
</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">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
className="h-11 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>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
className="h-11 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>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
114
app/page.tsx
114
app/page.tsx
@@ -1,114 +0,0 @@
|
|||||||
import Image from "next/image";
|
|
||||||
import { signout } from "@/features/auth/actions";
|
|
||||||
import { createClient } from "@/utils/supabase/server";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [메인 페이지 컴포넌트]
|
|
||||||
*
|
|
||||||
* 로그인한 사용자만 접근 가능 (Middleware에서 보호)
|
|
||||||
* - 사용자 정보 표시 (이메일, 프로필 아바타)
|
|
||||||
* - 로그아웃 버튼 제공
|
|
||||||
*/
|
|
||||||
export default async function Home() {
|
|
||||||
// 현재 로그인한 사용자 정보 가져오기
|
|
||||||
// Middleware에서 이미 인증을 확인했으므로 여기서는 user가 항상 존재함
|
|
||||||
const supabase = await createClient();
|
|
||||||
const {
|
|
||||||
data: { user },
|
|
||||||
} = await supabase.auth.getUser();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
|
||||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
|
||||||
{/* ========== 헤더: 로그인 정보 및 로그아웃 버튼 ========== */}
|
|
||||||
<div className="flex w-full items-center justify-between">
|
|
||||||
{/* 사용자 프로필 표시 */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* 프로필 아바타: 이메일 첫 글자 표시 */}
|
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white font-semibold">
|
|
||||||
{user?.email?.charAt(0).toUpperCase() || "U"}
|
|
||||||
</div>
|
|
||||||
{/* 이메일 및 로그인 상태 텍스트 */}
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
||||||
{user?.email || "사용자"}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
로그인됨
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* 로그아웃 폼 */}
|
|
||||||
{/* formAction: 서버 액션(signout)을 호출하여 로그아웃 처리 */}
|
|
||||||
<form>
|
|
||||||
<Button
|
|
||||||
formAction={signout}
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
로그아웃
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js logo"
|
|
||||||
width={100}
|
|
||||||
height={20}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
|
||||||
To get started, edit the page.tsx file.
|
|
||||||
</h1>
|
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Templates
|
|
||||||
</a>{" "}
|
|
||||||
or the{" "}
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
import FormMessage from "@/components/form-message";
|
|
||||||
import { updatePassword } 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 { createClient } from "@/utils/supabase/server";
|
|
||||||
import { redirect } from "next/navigation";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [비밀번호 재설정 페이지]
|
|
||||||
*
|
|
||||||
* 이메일 링크를 통해 접근한 사용자만 새 비밀번호를 설정할 수 있습니다.
|
|
||||||
* Supabase recovery 세션 검증으로 직접 URL 접근 차단
|
|
||||||
*
|
|
||||||
* PKCE 플로우:
|
|
||||||
* 1. 사용자가 비밀번호 재설정 이메일의 링크 클릭
|
|
||||||
* 2. Supabase가 토큰 검증 후 이 페이지로 ?code=xxx 파라미터와 함께 리다이렉트
|
|
||||||
* 3. 이 페이지에서 code를 세션으로 교환
|
|
||||||
* 4. 유효한 세션이 있으면 비밀번호 재설정 폼 표시
|
|
||||||
*
|
|
||||||
* @param searchParams - URL 쿼리 파라미터 (code: PKCE 코드, message: 에러/성공 메시지)
|
|
||||||
*/
|
|
||||||
export default async function ResetPasswordPage({
|
|
||||||
searchParams,
|
|
||||||
}: {
|
|
||||||
searchParams: Promise<{ message?: string; code?: string }>;
|
|
||||||
}) {
|
|
||||||
const params = await searchParams;
|
|
||||||
const supabase = await createClient();
|
|
||||||
|
|
||||||
// 1. 이메일 링크에서 code 파라미터 확인
|
|
||||||
// Supabase는 이메일 링크를 통해 ?code=xxx 형태로 PKCE code를 전달합니다
|
|
||||||
if (params.code) {
|
|
||||||
// code를 세션으로 교환
|
|
||||||
const { error } = await supabase.auth.exchangeCodeForSession(params.code);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
// code 교환 실패 (만료되었거나 유효하지 않음)
|
|
||||||
console.error("Password reset code exchange error:", error.message);
|
|
||||||
const message = encodeURIComponent(
|
|
||||||
"비밀번호 재설정 링크가 만료되었거나 유효하지 않습니다.",
|
|
||||||
);
|
|
||||||
redirect(`/login?message=${message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// code 교환 성공 - code 없이 같은 페이지로 리다이렉트
|
|
||||||
// (URL을 깨끗하게 유지하고 세션 쿠키가 설정된 상태로 리로드)
|
|
||||||
redirect("/reset-password");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. 세션 확인
|
|
||||||
const {
|
|
||||||
data: { user },
|
|
||||||
} = await supabase.auth.getUser();
|
|
||||||
|
|
||||||
// 3. 유효한 세션이 없으면 로그인 페이지로 리다이렉트
|
|
||||||
if (!user) {
|
|
||||||
const message = encodeURIComponent(
|
|
||||||
"비밀번호 재설정 링크가 만료되었거나 유효하지 않습니다.",
|
|
||||||
);
|
|
||||||
redirect(`/login?message=${message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// URL에서 메시지 파라미터 추출
|
|
||||||
const { message } = params;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 px-4 py-12 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950">
|
|
||||||
{/* ========== 배경 그라디언트 ========== */}
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200/40 via-purple-200/20 to-transparent dark:from-indigo-900/30 dark:via-purple-900/20" />
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-pink-200/40 via-purple-200/20 to-transparent dark:from-pink-900/30 dark:via-purple-900/20" />
|
|
||||||
|
|
||||||
{/* ========== 애니메이션 블러 효과 ========== */}
|
|
||||||
<div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-indigo-400/30 blur-3xl dark:bg-indigo-600/20" />
|
|
||||||
<div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-purple-400/30 blur-3xl delay-700 dark:bg-purple-600/20" />
|
|
||||||
|
|
||||||
{/* ========== 메인 콘텐츠 ========== */}
|
|
||||||
<div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
||||||
{/* 에러/성공 메시지 */}
|
|
||||||
{message && <FormMessage message={message} />}
|
|
||||||
|
|
||||||
{/* ========== 비밀번호 재설정 카드 ========== */}
|
|
||||||
<Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
|
|
||||||
<CardHeader className="space-y-3 text-center">
|
|
||||||
{/* 아이콘 */}
|
|
||||||
<div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg">
|
|
||||||
<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">
|
|
||||||
{/* 비밀번호 업데이트 폼 */}
|
|
||||||
<form className="space-y-5">
|
|
||||||
{/* ========== 새 비밀번호 입력 ========== */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="password" className="text-sm font-medium">
|
|
||||||
새 비밀번호
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="password"
|
|
||||||
name="password"
|
|
||||||
type="password"
|
|
||||||
placeholder="••••••••"
|
|
||||||
autoComplete="new-password"
|
|
||||||
required
|
|
||||||
minLength={8}
|
|
||||||
pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$"
|
|
||||||
title="비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다."
|
|
||||||
className="h-11 transition-all duration-200"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
최소 8자 이상, 대문자, 소문자, 숫자, 특수문자 포함
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ========== 비밀번호 변경 버튼 ========== */}
|
|
||||||
<Button
|
|
||||||
formAction={updatePassword}
|
|
||||||
className="h-11 w-full bg-gradient-to-r from-indigo-600 to-purple-600 font-semibold text-white shadow-lg transition-all hover:from-indigo-700 hover:to-purple-700 hover:shadow-xl"
|
|
||||||
>
|
|
||||||
비밀번호 변경
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
import Link from "next/link";
|
|
||||||
import { signup } from "@/features/auth/actions";
|
|
||||||
import FormMessage from "@/components/form-message";
|
|
||||||
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";
|
|
||||||
|
|
||||||
export default async function SignupPage({
|
|
||||||
searchParams,
|
|
||||||
}: {
|
|
||||||
searchParams: Promise<{ message: string }>;
|
|
||||||
}) {
|
|
||||||
const { message } = await searchParams;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 px-4 py-12 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950">
|
|
||||||
{/* 배경 그라데이션 효과 */}
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200/40 via-purple-200/20 to-transparent dark:from-indigo-900/30 dark:via-purple-900/20" />
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-pink-200/40 via-purple-200/20 to-transparent dark:from-pink-900/30 dark:via-purple-900/20" />
|
|
||||||
|
|
||||||
{/* 애니메이션 블러 효과 */}
|
|
||||||
<div className="absolute left-1/4 top-1/4 h-64 w-64 animate-pulse rounded-full bg-indigo-400/30 blur-3xl dark:bg-indigo-600/20" />
|
|
||||||
<div className="absolute bottom-1/4 right-1/4 h-64 w-64 animate-pulse rounded-full bg-purple-400/30 blur-3xl delay-700 dark:bg-purple-600/20" />
|
|
||||||
|
|
||||||
<div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
||||||
{/* 메시지 알림 */}
|
|
||||||
<FormMessage message={message} />
|
|
||||||
|
|
||||||
<Card className="border-white/20 bg-white/70 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70">
|
|
||||||
<CardHeader className="space-y-3 text-center">
|
|
||||||
<div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg">
|
|
||||||
<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">
|
|
||||||
<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="your@email.com"
|
|
||||||
required
|
|
||||||
className="h-11 transition-all duration-200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 비밀번호 입력 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="password" className="text-sm font-medium">
|
|
||||||
비밀번호
|
|
||||||
</Label>
|
|
||||||
{/* pattern: 최소 8자, 대문자, 소문자, 숫자, 특수문자 각 1개 이상 */}
|
|
||||||
{/* 참고: HTML pattern에서는 <, >, {, } 등 일부 특수문자 사용 시 브라우저 호환성 문제 발생 */}
|
|
||||||
<Input
|
|
||||||
id="password"
|
|
||||||
name="password"
|
|
||||||
type="password"
|
|
||||||
placeholder="••••••••"
|
|
||||||
autoComplete="new-password"
|
|
||||||
required
|
|
||||||
minLength={6}
|
|
||||||
pattern="^(?=.*[0-9])(?=.*[!@#$%^&*]).{6,}$"
|
|
||||||
title="비밀번호는 최소 6자 이상, 숫자와 특수문자를 각각 1개 이상 포함해야 합니다."
|
|
||||||
className="h-11 transition-all duration-200"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
최소 6자 이상, 숫자, 특수문자 포함 (한글 가능)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 회원가입 버튼 */}
|
|
||||||
<Button
|
|
||||||
formAction={signup}
|
|
||||||
type="submit"
|
|
||||||
className="h-11 w-full bg-gradient-to-r from-indigo-600 to-purple-600 font-semibold shadow-lg transition-all duration-200 hover:from-indigo-700 hover:to-purple-700 hover:shadow-xl"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
회원가입 완료
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* 로그인 링크 */}
|
|
||||||
<p className="text-center text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
이미 계정이 있으신가요?{" "}
|
|
||||||
<Link
|
|
||||||
href="/login"
|
|
||||||
className="font-semibold text-indigo-600 transition-colors hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
||||||
>
|
|
||||||
로그인 하러 가기
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,16 +1,23 @@
|
|||||||
|
/**
|
||||||
|
* @file components/form-message.tsx
|
||||||
|
* @description 폼 제출 결과(성공/에러) 메시지를 표시하는 컴포넌트
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/UI/Feedback
|
||||||
|
* - [기능] URL 쿼리 파라미터(`message`)를 감지하여 표시 후 URL 정리
|
||||||
|
* - [UX] 메시지 확인 후 새로고침 시 메시지가 남지 않도록 히스토리 정리 (History API)
|
||||||
|
*/
|
||||||
|
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
import { usePathname, useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [FormMessage 컴포넌트]
|
* 폼 메시지 컴포넌트
|
||||||
* - 로그인/회원가입 실패 메시지를 보여줍니다.
|
* @param message 표시할 메시지 텍스트
|
||||||
* - [UX 개선] 메시지가 보인 후, URL에서 ?message=... 부분을 지워서
|
* @returns 메시지 박스 또는 null
|
||||||
* 새로고침 시 메시지가 다시 뜨지 않도록 합니다.
|
|
||||||
*/
|
*/
|
||||||
export default function FormMessage({ message }: { message: string }) {
|
export default function FormMessage({ message }: { message: string }) {
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
|||||||
25
components/theme-provider.tsx
Normal file
25
components/theme-provider.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
/**
|
||||||
|
* @file components/theme-provider.tsx
|
||||||
|
* @description next-themes 라이브러리를 사용한 테마 제공자 (Wrapper)
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Infrastructure/Provider
|
||||||
|
* - [역할] 앱 전역에 테마 컨텍스트 주입 (Light/Dark 모드 지원)
|
||||||
|
* - [연관 파일] layout.tsx (사용처)
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ThemeProvider 컴포넌트
|
||||||
|
* @param props next-themes Provider props
|
||||||
|
* @returns NextThemesProvider 래퍼
|
||||||
|
*/
|
||||||
|
export function ThemeProvider({
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NextThemesProvider>) {
|
||||||
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||||
|
}
|
||||||
59
components/theme-toggle.tsx
Normal file
59
components/theme-toggle.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* @file components/theme-toggle.tsx
|
||||||
|
* @description 라이트/다크/시스템 테마 전환 토글 버튼
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/UI
|
||||||
|
* - [사용자 행동] 버튼 클릭 -> 드롭다운 메뉴 -> 테마 선택 -> 즉시 반영
|
||||||
|
* - [연관 파일] theme-provider.tsx (next-themes)
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Moon, Sun } from "lucide-react";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 테마 토글 컴포넌트
|
||||||
|
* @remarks next-themes의 useTheme 훅 사용
|
||||||
|
* @returns Dropdown 메뉴 형태의 테마 선택기
|
||||||
|
*/
|
||||||
|
export function ThemeToggle() {
|
||||||
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu modal={false}>
|
||||||
|
{/* ========== 트리거 버튼 ========== */}
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon">
|
||||||
|
{/* 라이트 모드 아이콘 (회전 애니메이션) */}
|
||||||
|
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||||
|
{/* 다크 모드 아이콘 (회전 애니메이션) */}
|
||||||
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||||
|
<span className="sr-only">Toggle theme</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
|
||||||
|
{/* ========== 메뉴 컨텐츠 (우측 정렬) ========== */}
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||||
|
Light
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||||
|
Dark
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||||
|
System
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
150
components/ui/alert-dialog.tsx
Normal file
150
components/ui/alert-dialog.tsx
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
/**
|
||||||
|
* @file components/ui/alert-dialog.tsx
|
||||||
|
* @description 알림 대화상자 (Alert Dialog) 컴포넌트 (Shadcn/ui)
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/UI/Primitive
|
||||||
|
* - [기능] 중요한 작업 확인 컨텍스트 제공 (로그아웃 경고 등)
|
||||||
|
* @see session-manager.tsx - 로그아웃 경고에 사용
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { buttonVariants } from "@/components/ui/button";
|
||||||
|
|
||||||
|
const AlertDialog = AlertDialogPrimitive.Root;
|
||||||
|
|
||||||
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
||||||
|
|
||||||
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
||||||
|
|
||||||
|
const AlertDialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const AlertDialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 sm:rounded-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
));
|
||||||
|
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const AlertDialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-2 text-center sm:text-left",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
AlertDialogHeader.displayName = "AlertDialogHeader";
|
||||||
|
|
||||||
|
const AlertDialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
||||||
|
|
||||||
|
const AlertDialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-lg font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const AlertDialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogDescription.displayName =
|
||||||
|
AlertDialogPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
const AlertDialogAction = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
ref={ref}
|
||||||
|
className={cn(buttonVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
||||||
|
|
||||||
|
const AlertDialogCancel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({ variant: "outline" }),
|
||||||
|
"mt-2 sm:mt-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
};
|
||||||
109
components/ui/avatar.tsx
Normal file
109
components/ui/avatar.tsx
Normal file
@@ -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,
|
||||||
|
}
|
||||||
257
components/ui/dropdown-menu.tsx
Normal file
257
components/ui/dropdown-menu.tsx
Normal file
@@ -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,
|
||||||
|
}
|
||||||
109
components/ui/loading-spinner.tsx
Normal file
109
components/ui/loading-spinner.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,27 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* @file features/auth/actions.ts
|
||||||
|
* @description 인증 관련 서버 액션 (Server Actions) 모음
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Service/API (Server Actions)
|
||||||
|
* - [역할] 로그인, 회원가입, 로그아웃, 비밀번호 재설정 등 인증 로직 처리
|
||||||
|
* - [데이터 흐름] Client Form -> Server Action -> Supabase Auth -> Client Redirect
|
||||||
|
* - [연관 파일] login-form.tsx, signup-form.tsx, utils/supabase/server.ts
|
||||||
|
*/
|
||||||
|
|
||||||
"use server";
|
"use server";
|
||||||
|
|
||||||
import { revalidatePath } from "next/cache";
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { cookies } from "next/headers";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { createClient } from "@/utils/supabase/server";
|
import { createClient } from "@/utils/supabase/server";
|
||||||
import {
|
import {
|
||||||
AUTH_ERROR_MESSAGES,
|
AUTH_ERROR_MESSAGES,
|
||||||
type AuthFormData,
|
type AuthFormData,
|
||||||
type AuthError,
|
type AuthError,
|
||||||
|
RECOVERY_COOKIE_NAME,
|
||||||
} from "./constants";
|
} from "./constants";
|
||||||
|
import { getAuthErrorMessage } from "./errors";
|
||||||
|
|
||||||
// ========================================
|
// ========================================
|
||||||
// 헬퍼 함수
|
// 헬퍼 함수
|
||||||
// ========================================
|
// ========================================
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [FormData 추출 헬퍼]
|
* FormData 추출 헬퍼 (이메일/비밀번호)
|
||||||
*
|
* @param formData HTML form 데이터
|
||||||
* FormData에서 이메일과 비밀번호를 안전하게 추출합니다.
|
* @returns 이메일(trim 적용), 비밀번호
|
||||||
* - 이메일은 trim()으로 공백 제거
|
|
||||||
* - null/undefined 방지를 위해 기본값 "" 사용
|
|
||||||
*
|
|
||||||
* @param formData - HTML form에서 전달된 FormData 객체
|
|
||||||
* @returns AuthFormData - 추출된 이메일과 비밀번호
|
|
||||||
*/
|
*/
|
||||||
function extractAuthData(formData: FormData): AuthFormData {
|
function extractAuthData(formData: FormData): AuthFormData {
|
||||||
const email = (formData.get("email") as string)?.trim() || "";
|
const email = (formData.get("email") as string)?.trim() || "";
|
||||||
@@ -31,30 +39,37 @@ function extractAuthData(formData: FormData): AuthFormData {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [비밀번호 강도 검증 함수]
|
* 비밀번호 강도 검증 함수
|
||||||
*
|
* @param password 검증할 비밀번호
|
||||||
* 안전한 비밀번호인지 검사합니다.
|
* @returns 에러 객체 또는 null
|
||||||
*
|
* @remarks 최소 8자, 대/소문자, 숫자, 특수문자 포함 필수
|
||||||
* 비밀번호 정책:
|
|
||||||
* - 최소 8자 이상
|
|
||||||
* - 대문자 1개 이상 포함
|
|
||||||
* - 소문자 1개 이상 포함
|
|
||||||
* - 숫자 1개 이상 포함
|
|
||||||
* - 특수문자 1개 이상 포함 (!@#$%^&*(),.?":{}|<> 등)
|
|
||||||
*
|
|
||||||
* @param password - 검증할 비밀번호
|
|
||||||
* @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
|
|
||||||
*/
|
*/
|
||||||
function validatePassword(password: string): AuthError | null {
|
function validatePassword(password: string): AuthError | null {
|
||||||
// 1. 최소 길이 체크 (6자 이상)
|
// [Step 1] 최소 길이 체크 (8자 이상)
|
||||||
if (password.length < 6) {
|
if (password.length < 8) {
|
||||||
return {
|
return {
|
||||||
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT,
|
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT,
|
||||||
type: "validation",
|
type: "validation",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. 숫자 포함 여부
|
// [Step 2] 대문자 포함 여부
|
||||||
|
if (!/[A-Z]/.test(password)) {
|
||||||
|
return {
|
||||||
|
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
|
||||||
|
type: "validation",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// [Step 3] 소문자 포함 여부
|
||||||
|
if (!/[a-z]/.test(password)) {
|
||||||
|
return {
|
||||||
|
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
|
||||||
|
type: "validation",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// [Step 4] 숫자 포함 여부
|
||||||
if (!/[0-9]/.test(password)) {
|
if (!/[0-9]/.test(password)) {
|
||||||
return {
|
return {
|
||||||
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
|
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
|
||||||
@@ -62,7 +77,7 @@ function validatePassword(password: string): AuthError | null {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. 특수문자 포함 여부
|
// [Step 5] 특수문자 포함 여부
|
||||||
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
|
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
|
||||||
return {
|
return {
|
||||||
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
|
message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
|
||||||
@@ -70,26 +85,20 @@ function validatePassword(password: string): AuthError | null {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 모든 검증 통과
|
// [Step 6] 모든 검증 통과
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [입력값 검증 함수]
|
* 입력값 유효성 검증 함수
|
||||||
*
|
* @param email 사용자 이메일
|
||||||
* 사용자가 입력한 이메일과 비밀번호의 유효성을 검사합니다.
|
* @param password 사용자 비밀번호
|
||||||
*
|
* @returns 에러 객체 또는 null
|
||||||
* 검증 항목:
|
* @see login - 로그인 액션에서 호출
|
||||||
* 1. 빈 값 체크 - 이메일 또는 비밀번호가 비어있는지 확인
|
* @see signup - 회원가입 액션에서 호출
|
||||||
* 2. 이메일 형식 - '@' 포함 여부로 간단한 형식 검증
|
|
||||||
* 3. 비밀번호 길이 - 최소 6자 이상인지 확인 (Supabase 기본 요구사항)
|
|
||||||
*
|
|
||||||
* @param email - 사용자 이메일
|
|
||||||
* @param password - 사용자 비밀번호
|
|
||||||
* @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
|
|
||||||
*/
|
*/
|
||||||
function validateAuthInput(email: string, password: string): AuthError | null {
|
function validateAuthInput(email: string, password: string): AuthError | null {
|
||||||
// 1. 빈 값 체크
|
// [Step 1] 빈 값 체크
|
||||||
if (!email || !password) {
|
if (!email || !password) {
|
||||||
return {
|
return {
|
||||||
message: AUTH_ERROR_MESSAGES.EMPTY_FIELDS,
|
message: AUTH_ERROR_MESSAGES.EMPTY_FIELDS,
|
||||||
@@ -97,7 +106,7 @@ function validateAuthInput(email: string, password: string): AuthError | null {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. 이메일 형식 체크 (간단한 @ 포함 여부 확인)
|
// [Step 2] 이메일 형식 체크 (간단한 @ 포함 여부 확인)
|
||||||
if (!email.includes("@")) {
|
if (!email.includes("@")) {
|
||||||
return {
|
return {
|
||||||
message: AUTH_ERROR_MESSAGES.INVALID_EMAIL,
|
message: AUTH_ERROR_MESSAGES.INVALID_EMAIL,
|
||||||
@@ -105,46 +114,16 @@ function validateAuthInput(email: string, password: string): AuthError | null {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. 비밀번호 강도 체크
|
// [Step 3] 비밀번호 강도 체크
|
||||||
const passwordValidation = validatePassword(password);
|
const passwordValidation = validatePassword(password);
|
||||||
if (passwordValidation) {
|
if (passwordValidation) {
|
||||||
return passwordValidation;
|
return passwordValidation;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 모든 검증 통과
|
// [Step 4] 검증 통과
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* [에러 메시지 번역 헬퍼]
|
|
||||||
*
|
|
||||||
* Supabase의 영문 에러 메시지를 사용자 친화적인 한글로 변환합니다.
|
|
||||||
*
|
|
||||||
* @param error - Supabase에서 받은 에러 메시지
|
|
||||||
* @returns string - 한글로 번역된 에러 메시지
|
|
||||||
*/
|
|
||||||
function getErrorMessage(error: string): string {
|
|
||||||
// Supabase 에러 메시지 패턴 매칭
|
|
||||||
if (error.includes("Invalid login credentials")) {
|
|
||||||
return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS;
|
|
||||||
}
|
|
||||||
if (error.includes("User already registered")) {
|
|
||||||
return AUTH_ERROR_MESSAGES.USER_EXISTS;
|
|
||||||
}
|
|
||||||
if (error.includes("Password should be at least")) {
|
|
||||||
return AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT;
|
|
||||||
}
|
|
||||||
if (error.includes("Email not confirmed")) {
|
|
||||||
return AUTH_ERROR_MESSAGES.EMAIL_NOT_CONFIRMED;
|
|
||||||
}
|
|
||||||
if (error.toLowerCase().includes("email rate limit exceeded")) {
|
|
||||||
return AUTH_ERROR_MESSAGES.EMAIL_RATE_LIMIT_DETAILED;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 알 수 없는 에러는 기본 메시지 반환
|
|
||||||
return AUTH_ERROR_MESSAGES.DEFAULT;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========================================
|
// ========================================
|
||||||
// Server Actions (서버 액션)
|
// Server Actions (서버 액션)
|
||||||
// ========================================
|
// ========================================
|
||||||
@@ -158,16 +137,17 @@ function getErrorMessage(error: string): string {
|
|||||||
* 1. FormData에서 이메일/비밀번호 추출
|
* 1. FormData에서 이메일/비밀번호 추출
|
||||||
* 2. 입력값 유효성 검증 (빈 값, 이메일 형식, 비밀번호 길이)
|
* 2. 입력값 유효성 검증 (빈 값, 이메일 형식, 비밀번호 길이)
|
||||||
* 3. Supabase Auth를 통한 로그인 시도
|
* 3. Supabase Auth를 통한 로그인 시도
|
||||||
* 4. 성공 시 메인 페이지로 리다이렉트
|
* 4. 로그인 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
|
||||||
* 5. 실패 시 에러 메시지와 함께 로그인 페이지로 리다이렉트
|
* 5. 로그인 성공 시 캐시 무효화 및 메인 페이지로 리다이렉트
|
||||||
*
|
*
|
||||||
* @param formData - HTML form에서 전달된 FormData (이메일, 비밀번호 포함)
|
* @param formData 이메일, 비밀번호가 포함된 FormData
|
||||||
|
* @see login-form.tsx - 로그인 폼 제출 시 호출
|
||||||
*/
|
*/
|
||||||
export async function login(formData: FormData) {
|
export async function login(formData: FormData) {
|
||||||
// 1. FormData에서 이메일/비밀번호 추출
|
// [Step 1] FormData에서 이메일/비밀번호 추출
|
||||||
const { email, password } = extractAuthData(formData);
|
const { email, password } = extractAuthData(formData);
|
||||||
|
|
||||||
// 2. 입력값 유효성 검증
|
// [Step 2] 입력값 유효성 검증
|
||||||
const validationError = validateAuthInput(email, password);
|
const validationError = validateAuthInput(email, password);
|
||||||
if (validationError) {
|
if (validationError) {
|
||||||
return redirect(
|
return redirect(
|
||||||
@@ -175,21 +155,20 @@ export async function login(formData: FormData) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Supabase 클라이언트 생성 및 로그인 시도
|
// [Step 3] Supabase 클라이언트 생성 및 로그인 시도
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
const { error } = await supabase.auth.signInWithPassword({
|
const { error } = await supabase.auth.signInWithPassword({
|
||||||
email,
|
email,
|
||||||
password,
|
password,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 4. 로그인 실패 시 에러 처리
|
// [Step 4] 로그인 실패 시 에러 처리
|
||||||
if (error) {
|
if (error) {
|
||||||
const message = getErrorMessage(error.message);
|
const message = getAuthErrorMessage(error);
|
||||||
return redirect(`/login?message=${encodeURIComponent(message)}`);
|
return redirect(`/login?message=${encodeURIComponent(message)}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
|
// [Step 5] 로그인 성공 - 캐시 무효화 및 메인 페이지로 리다이렉트
|
||||||
// revalidatePath: Next.js 캐시를 무효화하여 최신 인증 상태 반영
|
|
||||||
revalidatePath("/", "layout");
|
revalidatePath("/", "layout");
|
||||||
redirect("/");
|
redirect("/");
|
||||||
}
|
}
|
||||||
@@ -207,13 +186,14 @@ export async function login(formData: FormData) {
|
|||||||
* 5-1. 즉시 세션 생성 시: 메인 페이지로 리다이렉트 (바로 로그인됨)
|
* 5-1. 즉시 세션 생성 시: 메인 페이지로 리다이렉트 (바로 로그인됨)
|
||||||
* 5-2. 이메일 인증 필요 시: 로그인 페이지로 리다이렉트 (안내 메시지 포함)
|
* 5-2. 이메일 인증 필요 시: 로그인 페이지로 리다이렉트 (안내 메시지 포함)
|
||||||
*
|
*
|
||||||
* @param formData - HTML form에서 전달된 FormData (이메일, 비밀번호 포함)
|
* @param formData 이메일, 비밀번호가 포함된 FormData
|
||||||
|
* @see signup-form.tsx - 회원가입 폼 제출 시 호출
|
||||||
*/
|
*/
|
||||||
export async function signup(formData: FormData) {
|
export async function signup(formData: FormData) {
|
||||||
// 1. FormData에서 이메일/비밀번호 추출
|
// [Step 1] FormData에서 이메일/비밀번호 추출
|
||||||
const { email, password } = extractAuthData(formData);
|
const { email, password } = extractAuthData(formData);
|
||||||
|
|
||||||
// 2. 입력값 유효성 검증
|
// [Step 2] 입력값 유효성 검증
|
||||||
const validationError = validateAuthInput(email, password);
|
const validationError = validateAuthInput(email, password);
|
||||||
if (validationError) {
|
if (validationError) {
|
||||||
return redirect(
|
return redirect(
|
||||||
@@ -221,35 +201,31 @@ export async function signup(formData: FormData) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Supabase 클라이언트 생성 및 회원가입 시도
|
// [Step 3] Supabase 클라이언트 생성 및 회원가입 시도
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
const { data, error } = await supabase.auth.signUp({
|
const { data, error } = await supabase.auth.signUp({
|
||||||
email,
|
email,
|
||||||
password,
|
password,
|
||||||
options: {
|
options: {
|
||||||
// 이메일 인증 완료 후 리다이렉트될 URL
|
// 이메일 인증 완료 후 리다이렉트될 URL
|
||||||
// 로컬 개발 환경: http://localhost:3001/auth/callback
|
emailRedirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback?auth_type=signup`,
|
||||||
// 프로덕션: NEXT_PUBLIC_BASE_URL 환경 변수에 설정된 주소
|
|
||||||
emailRedirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback`,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 4. 회원가입 실패 시 에러 처리
|
// [Step 4] 회원가입 실패 시 에러 처리
|
||||||
if (error) {
|
if (error) {
|
||||||
const message = getErrorMessage(error.message);
|
const message = getAuthErrorMessage(error);
|
||||||
return redirect(`/signup?message=${encodeURIComponent(message)}`);
|
return redirect(`/signup?message=${encodeURIComponent(message)}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. 회원가입 성공 - 세션 생성 여부에 따라 분기 처리
|
// [Step 5] 회원가입 성공 처리
|
||||||
if (data.session) {
|
if (data.session) {
|
||||||
// 5-1. 즉시 세션이 생성된 경우 (이메일 인증 불필요)
|
// [Case 1] 즉시 세션 생성됨 (이메일 인증 불필요)
|
||||||
// → 바로 메인 페이지로 이동
|
|
||||||
revalidatePath("/", "layout");
|
revalidatePath("/", "layout");
|
||||||
redirect("/");
|
redirect("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5-2. 이메일 인증이 필요한 경우
|
// [Case 2] 이메일 인증 필요 (로그인 페이지로 이동)
|
||||||
// → 로그인 페이지로 이동 + 안내 메시지
|
|
||||||
revalidatePath("/", "layout");
|
revalidatePath("/", "layout");
|
||||||
redirect(
|
redirect(
|
||||||
`/login?message=${encodeURIComponent("회원가입이 완료되었습니다. 이메일을 확인하여 인증을 완료해 주세요.")}`,
|
`/login?message=${encodeURIComponent("회원가입이 완료되었습니다. 이메일을 확인하여 인증을 완료해 주세요.")}`,
|
||||||
@@ -262,31 +238,31 @@ export async function signup(formData: FormData) {
|
|||||||
* 현재 세션을 종료하고 로그인 페이지로 이동합니다.
|
* 현재 세션을 종료하고 로그인 페이지로 이동합니다.
|
||||||
*
|
*
|
||||||
* 처리 과정:
|
* 처리 과정:
|
||||||
* 1. Supabase Auth 세션 종료
|
* 1. Supabase Auth 세션 종료 (서버 + 클라이언트 쿠키 삭제)
|
||||||
* 2. 캐시 무효화하여 인증 상태 갱신
|
* 2. Next.js 캐시 무효화하여 인증 상태 갱신
|
||||||
* 3. 로그인 페이지로 리다이렉트
|
* 3. 로그인 페이지로 리다이렉트
|
||||||
|
*
|
||||||
|
* @see user-menu.tsx - 로그아웃 메뉴 클릭 시 호출
|
||||||
|
* @see session-manager.tsx - 세션 타임아웃 시 호출
|
||||||
*/
|
*/
|
||||||
export async function signout() {
|
export async function signout() {
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
|
|
||||||
// 1. Supabase 세션 종료 (서버 + 클라이언트 쿠키 삭제)
|
// [Step 1] Supabase 세션 종료 (서버 + 클라이언트 쿠키 삭제)
|
||||||
await supabase.auth.signOut();
|
await supabase.auth.signOut();
|
||||||
|
|
||||||
// 2. Next.js 캐시 무효화
|
// [Step 2] Next.js 캐시 무효화
|
||||||
revalidatePath("/", "layout");
|
revalidatePath("/", "layout");
|
||||||
|
|
||||||
// 3. 로그인 페이지로 리다이렉트
|
// [Step 3] 로그인 페이지로 리다이렉트
|
||||||
redirect("/login");
|
redirect("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [비밀번호 재설정 요청 액션]
|
* [비밀번호 재설정 요청 액션]
|
||||||
*
|
*
|
||||||
* 사용자 이메일로 비밀번호 재설정 링크를 발송합니다.
|
* 사용자 이메일로 비밀번호 재설정 링크를 발송합니다.
|
||||||
*
|
* 보안을 위해 이메일 존재 여부와 관계없이 동일한 메시지를 표시합니다.
|
||||||
* 보안 고려사항:
|
|
||||||
* - 이메일 존재 여부와 관계없이 동일한 성공 메시지 표시
|
|
||||||
* - 이메일 열거 공격(Email Enumeration) 방지
|
|
||||||
*
|
*
|
||||||
* 처리 과정:
|
* 처리 과정:
|
||||||
* 1. FormData에서 이메일 추출
|
* 1. FormData에서 이메일 추출
|
||||||
@@ -294,13 +270,14 @@ export async function signout() {
|
|||||||
* 3. Supabase를 통한 재설정 링크 발송
|
* 3. Supabase를 통한 재설정 링크 발송
|
||||||
* 4. 성공 메시지와 함께 로그인 페이지로 리다이렉트
|
* 4. 성공 메시지와 함께 로그인 페이지로 리다이렉트
|
||||||
*
|
*
|
||||||
* @param formData - 이메일이 포함된 FormData
|
* @param formData 이메일 포함
|
||||||
|
* @see forgot-password/page.tsx - 비밀번호 찾기 폼 제출 시 호출
|
||||||
*/
|
*/
|
||||||
export async function requestPasswordReset(formData: FormData) {
|
export async function requestPasswordReset(formData: FormData) {
|
||||||
// 1. FormData에서 이메일 추출
|
// [Step 1] FormData에서 이메일 추출
|
||||||
const email = (formData.get("email") as string)?.trim() || "";
|
const email = (formData.get("email") as string)?.trim() || "";
|
||||||
|
|
||||||
// 2. 이메일 검증
|
// [Step 2] 이메일 유효성 검증
|
||||||
if (!email) {
|
if (!email) {
|
||||||
return redirect(
|
return redirect(
|
||||||
`/forgot-password?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.EMPTY_EMAIL)}`,
|
`/forgot-password?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.EMPTY_EMAIL)}`,
|
||||||
@@ -313,30 +290,20 @@ export async function requestPasswordReset(formData: FormData) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Supabase를 통한 재설정 링크 발송
|
// [Step 3] Supabase를 통한 재설정 링크 발송
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
const { error } = await supabase.auth.resetPasswordForEmail(email, {
|
const { error } = await supabase.auth.resetPasswordForEmail(email, {
|
||||||
redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/reset-password`,
|
redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/reset-password`,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 4. 에러 처리
|
// [Step 4] 에러 처리
|
||||||
if (error) {
|
if (error) {
|
||||||
console.error("Password reset error:", error.message);
|
console.error("Password reset error:", error.message);
|
||||||
|
const message = getAuthErrorMessage(error);
|
||||||
// Rate limit 오류는 사용자에게 알려줌 (보안과 무관)
|
return redirect(`/forgot-password?message=${encodeURIComponent(message)}`);
|
||||||
if (error.message.toLowerCase().includes("rate limit")) {
|
|
||||||
return redirect(
|
|
||||||
`/forgot-password?message=${encodeURIComponent(
|
|
||||||
"이메일 발송 제한을 초과했습니다. Supabase 무료 플랜은 시간당 이메일 발송 횟수가 제한됩니다. 약 1시간 후에 다시 시도해 주세요.",
|
|
||||||
)}`,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 그 외 에러는 보안상 동일한 메시지 표시
|
// [Step 5] 성공 메시지 표시 (보안상 항상 성공 메시지 리턴 권장)
|
||||||
// (이메일 존재 여부를 외부에 노출하지 않음)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 5. 성공 메시지 표시
|
|
||||||
redirect(
|
redirect(
|
||||||
`/login?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.PASSWORD_RESET_SENT)}`,
|
`/login?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.PASSWORD_RESET_SENT)}`,
|
||||||
);
|
);
|
||||||
@@ -349,39 +316,113 @@ export async function requestPasswordReset(formData: FormData) {
|
|||||||
*
|
*
|
||||||
* 처리 과정:
|
* 처리 과정:
|
||||||
* 1. FormData에서 새 비밀번호 추출
|
* 1. FormData에서 새 비밀번호 추출
|
||||||
* 2. 비밀번호 길이 검증
|
* 2. 비밀번호 길이 및 강도 검증
|
||||||
* 3. Supabase를 통한 비밀번호 업데이트
|
* 3. Supabase를 통한 비밀번호 업데이트
|
||||||
* 4. 성공 시 로그인 페이지로 리다이렉트
|
* 4. 실패 시 에러 메시지 반환
|
||||||
|
* 5. 성공 시 세션/쿠키 정리 후 로그아웃 및 캐시 무효화
|
||||||
|
* 6. 성공 결과 반환
|
||||||
*
|
*
|
||||||
* @param formData - 새 비밀번호가 포함된 FormData
|
* @param formData 새 비밀번호 포함
|
||||||
|
* @see reset-password-form.tsx - 비밀번호 재설정 폼 제출 시 호출
|
||||||
*/
|
*/
|
||||||
export async function updatePassword(formData: FormData) {
|
export async function updatePassword(formData: FormData) {
|
||||||
// 1. FormData에서 새 비밀번호 추출
|
// [Step 1] 새 비밀번호 추출
|
||||||
const password = (formData.get("password") as string) || "";
|
const password = (formData.get("password") as string) || "";
|
||||||
|
|
||||||
// 2. 비밀번호 강도 검증
|
// [Step 2] 비밀번호 강도 검증
|
||||||
const passwordValidation = validatePassword(password);
|
const passwordValidation = validatePassword(password);
|
||||||
if (passwordValidation) {
|
if (passwordValidation) {
|
||||||
return redirect(
|
return { ok: false, message: passwordValidation.message };
|
||||||
`/reset-password?message=${encodeURIComponent(passwordValidation.message)}`,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Supabase를 통한 비밀번호 업데이트
|
// [Step 3] Supabase를 통한 비밀번호 업데이트
|
||||||
const supabase = await createClient();
|
const supabase = await createClient();
|
||||||
const { error } = await supabase.auth.updateUser({
|
const { error } = await supabase.auth.updateUser({
|
||||||
password: password,
|
password: password,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 4. 에러 처리
|
// [Step 4] 에러 처리
|
||||||
if (error) {
|
if (error) {
|
||||||
const message = getErrorMessage(error.message);
|
const message = getAuthErrorMessage(error);
|
||||||
return redirect(`/reset-password?message=${encodeURIComponent(message)}`);
|
return { ok: false, message };
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. 성공 - 캐시 무효화 및 로그인 페이지로 리다이렉트
|
// [Step 5] 세션 및 쿠키 정리 후 로그아웃
|
||||||
|
const cookieStore = await cookies();
|
||||||
|
cookieStore.delete(RECOVERY_COOKIE_NAME);
|
||||||
|
await supabase.auth.signOut();
|
||||||
revalidatePath("/", "layout");
|
revalidatePath("/", "layout");
|
||||||
|
|
||||||
|
// [Step 6] 성공 응답 반환
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
message: AUTH_ERROR_MESSAGES.PASSWORD_RESET_SUCCESS,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// 소셜 로그인 (OAuth)
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [OAuth 로그인 공통 헬퍼]
|
||||||
|
*
|
||||||
|
* 처리 과정:
|
||||||
|
* 1. Supabase OAuth 로그인 URL 생성 (PKCE)
|
||||||
|
* 2. 생성 중 에러 발생 시 로그인 페이지로 리다이렉트 (에러 메시지 포함)
|
||||||
|
* 3. 성공 시 해당 OAuth 제공자 페이지(data.url)로 리다이렉트
|
||||||
|
*
|
||||||
|
* @param provider 'google' | 'kakao'
|
||||||
|
* @param extraOptions 추가 옵션 (예: prompt)
|
||||||
|
* @see signInWithGoogle
|
||||||
|
* @see signInWithKakao
|
||||||
|
*/
|
||||||
|
async function signInWithProvider(
|
||||||
|
provider: "google" | "kakao",
|
||||||
|
extraOptions: { queryParams?: { [key: string]: string } } = {},
|
||||||
|
) {
|
||||||
|
const supabase = await createClient();
|
||||||
|
|
||||||
|
// [Step 1] OAuth 인증 시작 (URL 생성)
|
||||||
|
const { data, error } = await supabase.auth.signInWithOAuth({
|
||||||
|
provider,
|
||||||
|
options: {
|
||||||
|
// PKCE 플로우를 위한 콜백 URL
|
||||||
|
redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3001"}/auth/callback`,
|
||||||
|
...extraOptions,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// [Step 2] 에러 처리
|
||||||
|
if (error) {
|
||||||
|
console.error(`[${provider} OAuth] 로그인 실패:`, error.message);
|
||||||
|
const message = getAuthErrorMessage(error);
|
||||||
|
return redirect(`/login?message=${encodeURIComponent(message)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// [Step 3] OAuth 제공자 로그인 페이지로 리다이렉트
|
||||||
|
if (data.url) {
|
||||||
|
redirect(data.url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// [Step 4] URL 생성 실패 시 에러 처리
|
||||||
redirect(
|
redirect(
|
||||||
`/login?message=${encodeURIComponent(AUTH_ERROR_MESSAGES.PASSWORD_RESET_SUCCESS)}`,
|
`/login?message=${encodeURIComponent("로그인 처리 중 오류가 발생했습니다.")}`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [Google 로그인 액션]
|
||||||
|
* @see login-form.tsx - 구글 로그인 버튼 클릭 시 호출
|
||||||
|
*/
|
||||||
|
export async function signInWithGoogle() {
|
||||||
|
return signInWithProvider("google");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [Kakao 로그인 액션]
|
||||||
|
* @see login-form.tsx - 카카오 로그인 버튼 클릭 시 호출
|
||||||
|
*/
|
||||||
|
export async function signInWithKakao() {
|
||||||
|
return signInWithProvider("kakao", { queryParams: { prompt: "login" } });
|
||||||
|
}
|
||||||
|
|||||||
221
features/auth/components/login-form.tsx
Normal file
221
features/auth/components/login-form.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
144
features/auth/components/reset-password-form.tsx
Normal file
144
features/auth/components/reset-password-form.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
148
features/auth/components/session-manager.tsx
Normal file
148
features/auth/components/session-manager.tsx
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
/**
|
||||||
|
* @file features/auth/components/session-manager.tsx
|
||||||
|
* @description 사용자 세션 타임아웃 및 자동 로그아웃 관리 컴포넌트
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/Infrastructure
|
||||||
|
* - [사용자 행동] 로그인 -> 활동 감지 -> 비활동 -> (경고) -> 로그아웃
|
||||||
|
* - [데이터 흐름] Event -> Zustand Store -> Timer -> Logout
|
||||||
|
* - [연관 파일] stores/session-store.ts, features/auth/constants.ts
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import { createClient } from "@/utils/supabase/client";
|
||||||
|
import { useRouter, usePathname } from "next/navigation";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import { useSessionStore } from "@/stores/session-store";
|
||||||
|
import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
|
||||||
|
// import { toast } from "sonner"; // Unused for now
|
||||||
|
|
||||||
|
// 설정: 경고 표시 시간 (타임아웃 1분 전) - 현재 미사용 (즉시 로그아웃)
|
||||||
|
// const WARNING_MS = 60 * 1000;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 세션 관리자 컴포넌트
|
||||||
|
* 사용자 활동을 감지하여 세션 연장 및 타임아웃 처리
|
||||||
|
* @returns 숨겨진 기능성 컴포넌트 (Global Layout에 포함)
|
||||||
|
* @remarks RootLayout에 포함되어 전역적으로 동작
|
||||||
|
* @see layout.tsx - RootLayout에서 렌더링
|
||||||
|
* @see session-store.ts - 마지막 활동 시간 관리
|
||||||
|
*/
|
||||||
|
export function SessionManager() {
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
// [State] 타임아웃 경고 모달 표시 여부 (현재 미사용)
|
||||||
|
const [showWarning, setShowWarning] = useState(false);
|
||||||
|
|
||||||
|
// 인증 페이지에서는 동작하지 않음
|
||||||
|
const isAuthPage = ["/login", "/signup", "/forgot-password"].includes(
|
||||||
|
pathname,
|
||||||
|
);
|
||||||
|
|
||||||
|
const { setLastActive } = useSessionStore();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 로그아웃 처리 핸들러
|
||||||
|
* @see session-timer.tsx - 타임아웃 시 동일한 로직 필요 가능성 있음
|
||||||
|
*/
|
||||||
|
const handleLogout = useCallback(async () => {
|
||||||
|
// [Step 1] Supabase 클라이언트 생성
|
||||||
|
const supabase = createClient();
|
||||||
|
|
||||||
|
// [Step 2] 서버 사이드 로그아웃 요청
|
||||||
|
await supabase.auth.signOut();
|
||||||
|
|
||||||
|
// [Step 3] 로컬 스토어 및 세션 정보 초기화
|
||||||
|
useSessionStore.persist.clearStorage();
|
||||||
|
|
||||||
|
// [Step 4] 로그인 페이지로 리다이렉트 및 메시지 표시
|
||||||
|
router.push("/login?message=세션이 만료되었습니다. 다시 로그인해주세요.");
|
||||||
|
router.refresh();
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isAuthPage) return;
|
||||||
|
|
||||||
|
// 마지막 활동 시간 업데이트 함수
|
||||||
|
const updateLastActive = () => {
|
||||||
|
setLastActive(Date.now());
|
||||||
|
if (showWarning) setShowWarning(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// [Step 1] 사용자 활동 이벤트 감지 (마우스, 키보드, 스크롤, 터치)
|
||||||
|
const events = ["mousedown", "keydown", "scroll", "touchstart"];
|
||||||
|
const handleActivity = () => updateLastActive();
|
||||||
|
|
||||||
|
events.forEach((event) => window.addEventListener(event, handleActivity));
|
||||||
|
|
||||||
|
// [Step 2] 주기적(1초)으로 세션 만료 여부 확인
|
||||||
|
const intervalId = setInterval(async () => {
|
||||||
|
const currentLastActive = useSessionStore.getState().lastActive;
|
||||||
|
const now = Date.now();
|
||||||
|
const timeSinceLastActive = now - currentLastActive;
|
||||||
|
|
||||||
|
// 타임아웃 초과 시 로그아웃
|
||||||
|
if (timeSinceLastActive >= SESSION_TIMEOUT_MS) {
|
||||||
|
await handleLogout();
|
||||||
|
}
|
||||||
|
// 경고 로직 (현재 비활성)
|
||||||
|
// else if (timeSinceLastActive >= TIMEOUT_MS - WARNING_MS) {
|
||||||
|
// setShowWarning(true);
|
||||||
|
// }
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
// [Step 3] 탭 활성화/컴퓨터 깨어남 감지 (절전 모드 대응)
|
||||||
|
const handleVisibilityChange = async () => {
|
||||||
|
if (!document.hidden) {
|
||||||
|
const currentLastActive = useSessionStore.getState().lastActive;
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
// 절전 모드 복귀 시 즉시 만료 체크
|
||||||
|
if (now - currentLastActive >= SESSION_TIMEOUT_MS) {
|
||||||
|
await handleLogout();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("visibilitychange", handleVisibilityChange);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
events.forEach((event) =>
|
||||||
|
window.removeEventListener(event, handleActivity),
|
||||||
|
);
|
||||||
|
clearInterval(intervalId);
|
||||||
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||||
|
};
|
||||||
|
}, [pathname, isAuthPage, showWarning, handleLogout, setLastActive]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AlertDialog open={showWarning} onOpenChange={setShowWarning}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
{/* ========== 헤더: 제목 및 설명 ========== */}
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>로그아웃 예정</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
장시간 활동이 없어 1분 뒤 로그아웃됩니다. 계속 하시려면 아무 키나
|
||||||
|
누르거나 클릭해주세요.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
|
||||||
|
{/* ========== 하단: 액션 버튼 ========== */}
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogAction onClick={() => setShowWarning(false)}>
|
||||||
|
로그인 연장
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
features/auth/components/session-timer.tsx
Normal file
70
features/auth/components/session-timer.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
/**
|
||||||
|
* @file features/auth/components/session-timer.tsx
|
||||||
|
* @description 헤더에 표시되는 세션 만료 카운트다운 컴포넌트
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/UI
|
||||||
|
* - [사용자 행동] 남은 시간 확인 -> 만료 임박 시 붉은색 경고
|
||||||
|
* - [데이터 흐름] Zustand Store -> Calculation -> UI
|
||||||
|
* - [연관 파일] stores/session-store.ts, features/layout/header.tsx
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useSessionStore } from "@/stores/session-store";
|
||||||
|
import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 세션 만료 타이머 컴포넌트
|
||||||
|
* 남은 시간을 mm:ss 형태로 표시 (10분 미만 시 경고 스타일)
|
||||||
|
* @returns 시간 표시 배지 (모바일 숨김)
|
||||||
|
* @remarks 1초마다 리렌더링 발생
|
||||||
|
* @see header.tsx - 로그인 상태일 때 헤더에 표시
|
||||||
|
*/
|
||||||
|
export function SessionTimer() {
|
||||||
|
const lastActive = useSessionStore((state) => state.lastActive);
|
||||||
|
|
||||||
|
// [State] 남은 시간 (밀리초)
|
||||||
|
const [timeLeft, setTimeLeft] = useState<number>(SESSION_TIMEOUT_MS);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const calculateTimeLeft = () => {
|
||||||
|
const now = Date.now();
|
||||||
|
const passed = now - lastActive;
|
||||||
|
|
||||||
|
// [Step 1] 남은 시간 계산 (음수 방지)
|
||||||
|
const remaining = Math.max(0, SESSION_TIMEOUT_MS - passed);
|
||||||
|
setTimeLeft(remaining);
|
||||||
|
};
|
||||||
|
|
||||||
|
calculateTimeLeft(); // 초기 실행
|
||||||
|
|
||||||
|
// [Step 2] 1초마다 남은 시간 갱신
|
||||||
|
const interval = setInterval(calculateTimeLeft, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [lastActive]);
|
||||||
|
|
||||||
|
// [Step 3] 시간 포맷팅 (mm:ss)
|
||||||
|
const minutes = Math.floor(timeLeft / 60000);
|
||||||
|
const seconds = Math.floor((timeLeft % 60000) / 1000);
|
||||||
|
|
||||||
|
// [Step 4] 10분 미만일 때 긴급 스타일 적용
|
||||||
|
const isUrgent = timeLeft < 10 * 60 * 1000;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`text-sm font-medium tabular-nums px-3 py-1.5 rounded-md border bg-background/50 backdrop-blur-md hidden md:block transition-colors ${
|
||||||
|
isUrgent
|
||||||
|
? "text-red-500 border-red-200 bg-red-50/50 dark:bg-red-900/20 dark:border-red-800"
|
||||||
|
: "text-muted-foreground border-border/40"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* ========== 라벨 ========== */}
|
||||||
|
<span className="mr-2">세션 만료</span>
|
||||||
|
{/* ========== 시간 표시 ========== */}
|
||||||
|
{minutes.toString().padStart(2, "0")}:
|
||||||
|
{seconds.toString().padStart(2, "0")}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
175
features/auth/components/signup-form.tsx
Normal file
175
features/auth/components/signup-form.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,10 +1,11 @@
|
|||||||
/**
|
/**
|
||||||
* [인증 관련 상수 정의]
|
* @file features/auth/constants.ts
|
||||||
*
|
* @description 인증 모듈 전반에서 사용되는 상수, 에러 메시지, 설정값 정의
|
||||||
* 인증 모듈 전체에서 공통으로 사용하는 상수들을 정의합니다.
|
* @remarks
|
||||||
* - 에러 메시지
|
* - [레이어] Core/Constants
|
||||||
* - 라우트 경로
|
* - [사용자 행동] 로그인/회원가입/비밀번호 찾기 등 인증 전반
|
||||||
* - 검증 규칙
|
* - [데이터 흐름] UI/Service -> Constants -> UI (메시지 표시)
|
||||||
|
* - [주의사항] 환경 변수(SESSION_TIMEOUT_MINUTES)에 의존하는 상수 포함
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// ========================================
|
// ========================================
|
||||||
@@ -27,9 +28,10 @@ export const AUTH_ERROR_MESSAGES = {
|
|||||||
INVALID_EMAIL: "올바른 이메일 형식이 아닙니다.",
|
INVALID_EMAIL: "올바른 이메일 형식이 아닙니다.",
|
||||||
|
|
||||||
// === 비밀번호 관련 ===
|
// === 비밀번호 관련 ===
|
||||||
PASSWORD_TOO_SHORT: "비밀번호는 최소 6자 이상이어야 합니다.",
|
PASSWORD_TOO_SHORT: "비밀번호는 최소 8자 이상이어야 합니다.",
|
||||||
PASSWORD_TOO_WEAK:
|
PASSWORD_TOO_WEAK:
|
||||||
"비밀번호는 최소 6자 이상, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다.",
|
"비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다.",
|
||||||
|
PASSWORD_MISMATCH: "비밀번호가 일치하지 않습니다.",
|
||||||
PASSWORD_SAME_AS_OLD: "새 비밀번호는 기존 비밀번호와 달라야 합니다.",
|
PASSWORD_SAME_AS_OLD: "새 비밀번호는 기존 비밀번호와 달라야 합니다.",
|
||||||
|
|
||||||
// === 비밀번호 재설정 ===
|
// === 비밀번호 재설정 ===
|
||||||
@@ -39,6 +41,17 @@ export const AUTH_ERROR_MESSAGES = {
|
|||||||
|
|
||||||
// === 인증 링크 ===
|
// === 인증 링크 ===
|
||||||
INVALID_AUTH_LINK: "인증 링크가 만료되었거나 유효하지 않습니다.",
|
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 ===
|
// === Rate Limit ===
|
||||||
EMAIL_RATE_LIMIT:
|
EMAIL_RATE_LIMIT:
|
||||||
@@ -50,6 +63,109 @@ export const AUTH_ERROR_MESSAGES = {
|
|||||||
DEFAULT: "요청을 처리하는 중 오류가 발생했습니다.",
|
DEFAULT: "요청을 처리하는 중 오류가 발생했습니다.",
|
||||||
} as const;
|
} 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;
|
||||||
|
|
||||||
// ========================================
|
// ========================================
|
||||||
// 라우트 경로 상수
|
// 라우트 경로 상수
|
||||||
// ========================================
|
// ========================================
|
||||||
@@ -65,6 +181,7 @@ export const AUTH_ROUTES = {
|
|||||||
AUTH_CONFIRM: "/auth/confirm",
|
AUTH_CONFIRM: "/auth/confirm",
|
||||||
AUTH_CALLBACK: "/auth/callback",
|
AUTH_CALLBACK: "/auth/callback",
|
||||||
HOME: "/",
|
HOME: "/",
|
||||||
|
DASHBOARD: "/dashboard",
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -80,19 +197,45 @@ export const PUBLIC_AUTH_PAGES = [
|
|||||||
AUTH_ROUTES.AUTH_CALLBACK,
|
AUTH_ROUTES.AUTH_CALLBACK,
|
||||||
] as const;
|
] 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 = {
|
export const PASSWORD_RULES = {
|
||||||
MIN_LENGTH: 6,
|
MIN_LENGTH: 8,
|
||||||
|
REQUIRE_UPPERCASE: true,
|
||||||
|
REQUIRE_LOWERCASE: true,
|
||||||
REQUIRE_NUMBER: true,
|
REQUIRE_NUMBER: true,
|
||||||
REQUIRE_SPECIAL_CHAR: true,
|
REQUIRE_SPECIAL_CHAR: true,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// 세션 관련 상수
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 세션 타임아웃 시간 (밀리초)
|
||||||
|
* 환경 변수에서 분 단위를 가져와 밀리초로 변환합니다.
|
||||||
|
* 기본값: 30분
|
||||||
|
*/
|
||||||
|
export const SESSION_TIMEOUT_MS =
|
||||||
|
(Number(process.env.NEXT_PUBLIC_SESSION_TIMEOUT_MINUTES) || 30) * 60 * 1000;
|
||||||
|
|
||||||
|
// 경고 표시 시간 (타임아웃 1분 전)
|
||||||
|
export const SESSION_WARNING_MS = 60 * 1000;
|
||||||
|
|
||||||
// ========================================
|
// ========================================
|
||||||
// 타입 정의
|
// 타입 정의
|
||||||
// ========================================
|
// ========================================
|
||||||
|
|||||||
30
features/auth/errors.ts
Normal file
30
features/auth/errors.ts
Normal file
@@ -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;
|
||||||
|
}
|
||||||
69
features/auth/schemas/auth-schema.ts
Normal file
69
features/auth/schemas/auth-schema.ts
Normal file
@@ -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>;
|
||||||
29
features/home/components/spline-scene.tsx
Normal file
29
features/home/components/spline-scene.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Spline from "@splinetool/react-spline";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface SplineSceneProps {
|
||||||
|
sceneUrl: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SplineScene({ sceneUrl, className }: SplineSceneProps) {
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("relative h-full w-full", className)}>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-zinc-900">
|
||||||
|
<div className="h-10 w-10 animate-spin rounded-full border-4 border-zinc-200 border-t-brand-500 dark:border-zinc-800" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Spline
|
||||||
|
scene={sceneUrl}
|
||||||
|
onLoad={() => setIsLoading(false)}
|
||||||
|
className="h-full w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
93
features/layout/components/header.tsx
Normal file
93
features/layout/components/header.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
/**
|
||||||
|
* @file features/layout/components/header.tsx
|
||||||
|
* @description 애플리케이션 최상단 헤더 컴포넌트 (네비게이션, 테마, 유저 메뉴)
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/UI/Layout
|
||||||
|
* - [사용자 행동] 홈 이동, 테마 변경, 로그인/회원가입 이동, 대시보드 이동
|
||||||
|
* - [데이터 흐름] User Prop -> UI Conditional Rendering
|
||||||
|
* - [연관 파일] layout.tsx, session-timer.tsx, user-menu.tsx
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { User } from "@supabase/supabase-js";
|
||||||
|
import { AUTH_ROUTES } from "@/features/auth/constants";
|
||||||
|
import { UserMenu } from "@/features/layout/components/user-menu";
|
||||||
|
import { ThemeToggle } from "@/components/theme-toggle";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
import { SessionTimer } from "@/features/auth/components/session-timer";
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
/** 현재 로그인한 사용자 정보 (없으면 null) */
|
||||||
|
user: User | null;
|
||||||
|
/** 대시보드 링크 표시 여부 */
|
||||||
|
showDashboardLink?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 글로벌 헤더 컴포넌트
|
||||||
|
* @param user Supabase User 객체
|
||||||
|
* @param showDashboardLink 대시보드 바로가기 버튼 노출 여부
|
||||||
|
* @returns Header JSX
|
||||||
|
* @see layout.tsx - RootLayout에서 데이터 주입하여 호출
|
||||||
|
*/
|
||||||
|
export function Header({ user, showDashboardLink = false }: HeaderProps) {
|
||||||
|
return (
|
||||||
|
<header className="fixed top-0 z-40 w-full border-b border-border/40 bg-background/80 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
|
||||||
|
<div className="flex h-16 w-full items-center justify-between px-4 md:px-6">
|
||||||
|
{/* ========== 좌측: 로고 영역 ========== */}
|
||||||
|
<Link href={AUTH_ROUTES.HOME} className="flex items-center gap-2 group">
|
||||||
|
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 transition-transform duration-200 group-hover:scale-110">
|
||||||
|
<div className="h-5 w-5 rounded-lg bg-linear-to-br from-brand-500 to-brand-700" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold tracking-tight text-foreground transition-colors group-hover:text-primary">
|
||||||
|
AutoTrade
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* ========== 우측: 액션 버튼 영역 ========== */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* 테마 토글 */}
|
||||||
|
<ThemeToggle />
|
||||||
|
|
||||||
|
{user ? (
|
||||||
|
// [Case 1] 로그인 상태
|
||||||
|
<>
|
||||||
|
{/* 세션 타임아웃 타이머 */}
|
||||||
|
<SessionTimer />
|
||||||
|
|
||||||
|
{showDashboardLink && (
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="hidden sm:inline-flex"
|
||||||
|
>
|
||||||
|
<Link href={AUTH_ROUTES.DASHBOARD}>대시보드</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 사용자 드롭다운 메뉴 */}
|
||||||
|
<UserMenu user={user} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
// [Case 2] 비로그인 상태
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="hidden sm:inline-flex"
|
||||||
|
>
|
||||||
|
<Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild size="sm" className="rounded-full px-6">
|
||||||
|
<Link href={AUTH_ROUTES.SIGNUP}>시작하기</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
features/layout/components/sidebar.tsx
Normal file
80
features/layout/components/sidebar.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
87
features/layout/components/user-menu.tsx
Normal file
87
features/layout/components/user-menu.tsx
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
/**
|
||||||
|
* @file features/layout/components/user-menu.tsx
|
||||||
|
* @description 사용자 프로필 드롭다운 메뉴 컴포넌트
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Components/UI
|
||||||
|
* - [사용자 행동] Avatar 클릭 -> 드롭다운 오픈 -> 프로필/설정 이동 또는 로그아웃
|
||||||
|
* - [연관 파일] header.tsx, features/auth/actions.ts (로그아웃)
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { signout } from "@/features/auth/actions";
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { User } from "@supabase/supabase-js";
|
||||||
|
import { LogOut, Settings, User as UserIcon } from "lucide-react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
interface UserMenuProps {
|
||||||
|
/** Supabase User 객체 */
|
||||||
|
user: User | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 메뉴/프로필 컴포넌트 (로그인 시 헤더 노출)
|
||||||
|
* @param user 로그인한 사용자 정보
|
||||||
|
* @returns Avatar 버튼 및 드롭다운 메뉴
|
||||||
|
*/
|
||||||
|
export function UserMenu({ user }: UserMenuProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
if (!user) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu modal={false}>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<button className="flex items-center gap-2 outline-none">
|
||||||
|
<Avatar className="h-8 w-8 transition-opacity hover:opacity-80">
|
||||||
|
<AvatarImage src={user.user_metadata?.avatar_url} />
|
||||||
|
<AvatarFallback className="bg-linear-to-br from-brand-500 to-brand-700 text-white text-xs font-bold">
|
||||||
|
{user.email?.charAt(0).toUpperCase()}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-56">
|
||||||
|
<DropdownMenuLabel className="font-normal">
|
||||||
|
<div className="flex flex-col space-y-1">
|
||||||
|
<p className="text-sm font-medium leading-none">
|
||||||
|
{user.user_metadata?.full_name ||
|
||||||
|
user.user_metadata?.name ||
|
||||||
|
"사용자"}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs leading-none text-muted-foreground">
|
||||||
|
{user.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem onClick={() => router.push("/profile")}>
|
||||||
|
<UserIcon className="mr-2 h-4 w-4" />
|
||||||
|
<span>프로필</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => router.push("/settings")}>
|
||||||
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
|
<span>설정</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<form action={signout}>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<button className="w-full text-red-600 dark:text-red-400">
|
||||||
|
<LogOut className="mr-2 h-4 w-4" />
|
||||||
|
<span>로그아웃</span>
|
||||||
|
</button>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</form>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
9
features/layout/types/index.ts
Normal file
9
features/layout/types/index.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { LucideIcon } from "lucide-react";
|
||||||
|
|
||||||
|
export interface MenuItem {
|
||||||
|
title: string;
|
||||||
|
href: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
variant: "default" | "ghost";
|
||||||
|
matchExact?: boolean;
|
||||||
|
}
|
||||||
42
hooks/queries/use-user-query.ts
Normal file
42
hooks/queries/use-user-query.ts
Normal file
@@ -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,
|
||||||
|
});
|
||||||
|
}
|
||||||
3376
package-lock.json
generated
3376
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@@ -9,26 +9,38 @@
|
|||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^5.2.2",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||||
"@radix-ui/react-checkbox": "^1.3.3",
|
"@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-label": "^2.1.8",
|
||||||
"@radix-ui/react-separator": "^1.1.8",
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
|
"@splinetool/react-spline": "^4.1.0",
|
||||||
|
"@splinetool/runtime": "^1.12.50",
|
||||||
"@supabase/ssr": "^0.8.0",
|
"@supabase/ssr": "^0.8.0",
|
||||||
"@supabase/supabase-js": "^2.93.3",
|
"@supabase/supabase-js": "^2.93.3",
|
||||||
"@tanstack/react-query": "^5.90.20",
|
"@tanstack/react-query": "^5.90.20",
|
||||||
|
"@tanstack/react-query-devtools": "^5.91.3",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"framer-motion": "^12.31.0",
|
||||||
"lucide-react": "^0.563.0",
|
"lucide-react": "^0.563.0",
|
||||||
"next": "16.1.6",
|
"next": "16.1.6",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"radix-ui": "^1.4.3",
|
||||||
"react": "19.2.3",
|
"react": "19.2.3",
|
||||||
"react-dom": "19.2.3",
|
"react-dom": "19.2.3",
|
||||||
"react-hook-form": "^7.71.1",
|
"react-hook-form": "^7.71.1",
|
||||||
|
"sonner": "^2.0.7",
|
||||||
"tailwind-merge": "^3.4.0",
|
"tailwind-merge": "^3.4.0",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"tw-animate-css": "^1.4.0",
|
"tw-animate-css": "^1.4.0",
|
||||||
"zustand": "^5.0.10"
|
"zod": "^4.3.6",
|
||||||
|
"zustand": "^5.0.11"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@playwright/test": "^1.58.1",
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
|
|||||||
85
playwright-report/index.html
Normal file
85
playwright-report/index.html
Normal file
File diff suppressed because one or more lines are too long
42
playwright.config.ts
Normal file
42
playwright.config.ts
Normal file
@@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
47
providers/query-provider.tsx
Normal file
47
providers/query-provider.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
79
stores/auth-store.ts
Normal file
79
stores/auth-store.ts
Normal file
@@ -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 키 이름
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
46
stores/session-store.ts
Normal file
46
stores/session-store.ts
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* @file stores/session-store.ts
|
||||||
|
* @description 사용자 세션 상태(마지막 활동 시간)를 관리하는 Zustand 스토어
|
||||||
|
* @remarks
|
||||||
|
* - [레이어] Infrastructure/State
|
||||||
|
* - [데이터 흐름] User Activity -> SessionStore -> LocalStorage
|
||||||
|
* - [연관 파일] session-manager.tsx (Setter), session-timer.tsx (Getter)
|
||||||
|
* - [주의사항] localStorage를 사용하여 탭 간 상태 공유 (partialize 적용)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { create } from "zustand";
|
||||||
|
import { persist, createJSONStorage } from "zustand/middleware";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 세션 상태 인터페이스
|
||||||
|
*/
|
||||||
|
interface SessionState {
|
||||||
|
/** 마지막 사용자 활동 시간 (Timestamp) */
|
||||||
|
lastActive: number;
|
||||||
|
/** 활동 시간 갱신 함수 */
|
||||||
|
setLastActive: (time: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 세션 관리 스토어 hook
|
||||||
|
* @returns {SessionState} lastActive, setLastActive
|
||||||
|
* @remarks persist 미들웨어를 통해 브라우저 새로고침/재접속 시에도 상태 유지
|
||||||
|
* @see session-manager.tsx - 사용자 활동 감지 시 setLastActive 호출
|
||||||
|
* @see session-timer.tsx - 남은 시간 계산을 위해 lastActive 구독
|
||||||
|
*/
|
||||||
|
export const useSessionStore = create<SessionState>()(
|
||||||
|
persist(
|
||||||
|
(set) => ({
|
||||||
|
// [State] 초기값: 스토어 생성 시점
|
||||||
|
lastActive: Date.now(),
|
||||||
|
|
||||||
|
// [Action] 활동 시간 업데이트
|
||||||
|
setLastActive: (time) => set({ lastActive: time }),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: "session-storage", // localStorage Key
|
||||||
|
storage: createJSONStorage(() => localStorage), // localStorage 사용
|
||||||
|
partialize: (state) => ({ lastActive: state.lastActive }),
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
111
stores/ui-store.ts
Normal file
111
stores/ui-store.ts
Normal file
@@ -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,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
4
test-results/.last-run.json
Normal file
4
test-results/.last-run.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"status": "passed",
|
||||||
|
"failedTests": []
|
||||||
|
}
|
||||||
29
tests/e2e/auth.spec.ts
Normal file
29
tests/e2e/auth.spec.ts
Normal file
@@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,37 +1,37 @@
|
|||||||
import { createServerClient } from "@supabase/ssr";
|
import { createServerClient } from "@supabase/ssr";
|
||||||
import { NextResponse, type NextRequest } from "next/server";
|
import { NextResponse, type NextRequest } from "next/server";
|
||||||
import { PUBLIC_AUTH_PAGES, AUTH_ROUTES } from "@/features/auth/constants";
|
import {
|
||||||
|
PUBLIC_AUTH_PAGES,
|
||||||
|
AUTH_ROUTES,
|
||||||
|
RECOVERY_COOKIE_NAME,
|
||||||
|
} from "@/features/auth/constants";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [미들웨어용 세션 업데이트 및 라우트 보호 함수]
|
* 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
|
||||||
*
|
|
||||||
* 모든 페이지 요청이 서버에 도달하기 전에 가장 먼저 실행됩니다.
|
|
||||||
*
|
|
||||||
* 주요 기능:
|
|
||||||
* 1. 만료된 로그인 토큰 자동 갱신 (Refresh)
|
|
||||||
* 2. 인증 상태에 따른 라우트 보호
|
|
||||||
*/
|
*/
|
||||||
|
// 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
|
||||||
export async function updateSession(request: NextRequest) {
|
export async function updateSession(request: NextRequest) {
|
||||||
// ========== 초기 응답 생성 ==========
|
// 1. 초기 Supabase 응답 객체 생성
|
||||||
|
// request 헤더 등을 포함하여 초기 상태 설정
|
||||||
let supabaseResponse = NextResponse.next({ request });
|
let supabaseResponse = NextResponse.next({ request });
|
||||||
|
|
||||||
// ========== Supabase 클라이언트 생성 ==========
|
// 2. Supabase 클라이언트 생성 (SSR 전용)
|
||||||
|
// 쿠키 조작을 위한 setAll/getAll 메서드 오버라이딩 포함
|
||||||
const supabase = createServerClient(
|
const supabase = createServerClient(
|
||||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
||||||
{
|
{
|
||||||
cookies: {
|
cookies: {
|
||||||
|
// 쿠키 가져오기
|
||||||
getAll() {
|
getAll() {
|
||||||
return request.cookies.getAll();
|
return request.cookies.getAll();
|
||||||
},
|
},
|
||||||
|
// 쿠키 설정하기 (요청 및 응답 객체 모두에 적용)
|
||||||
setAll(cookiesToSet) {
|
setAll(cookiesToSet) {
|
||||||
// 요청 객체에 쿠키 업데이트
|
|
||||||
cookiesToSet.forEach(({ name, value }) =>
|
cookiesToSet.forEach(({ name, value }) =>
|
||||||
request.cookies.set(name, value),
|
request.cookies.set(name, value),
|
||||||
);
|
);
|
||||||
// 응답 객체 재생성
|
|
||||||
supabaseResponse = NextResponse.next({ request });
|
supabaseResponse = NextResponse.next({ request });
|
||||||
// 응답에 쿠키 설정
|
|
||||||
cookiesToSet.forEach(({ name, value, options }) =>
|
cookiesToSet.forEach(({ name, value, options }) =>
|
||||||
supabaseResponse.cookies.set(name, value, options),
|
supabaseResponse.cookies.set(name, value, options),
|
||||||
);
|
);
|
||||||
@@ -40,28 +40,68 @@ export async function updateSession(request: NextRequest) {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
// ========== 사용자 인증 정보 확인 ==========
|
// 3. 현재 사용자 정보 조회
|
||||||
|
// getUser() 사용이 보안상 안전함 (getSession보다 권장됨)
|
||||||
const {
|
const {
|
||||||
data: { user },
|
data: { user },
|
||||||
} = await supabase.auth.getUser();
|
} = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
// 4. 현재 요청 URL과 복구용 쿠키 확인
|
||||||
const { pathname } = request.nextUrl;
|
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) =>
|
const isAuthPage = PUBLIC_AUTH_PAGES.some((page) =>
|
||||||
pathname.startsWith(page),
|
pathname.startsWith(page),
|
||||||
);
|
);
|
||||||
|
|
||||||
// ========== 라우트 보호 ==========
|
// 9. 비로그인 사용자 접근 제어
|
||||||
|
// - 유저가 없음 (!user)
|
||||||
// 비로그인 사용자 → 보호된 페이지 접근 시 로그인으로 리다이렉트
|
// - 인증 페이지 아님 (!isAuthPage)
|
||||||
if (!user && !isAuthPage) {
|
// - 메인 페이지(홈) 아님 (pathname !== AUTH_ROUTES.HOME)
|
||||||
|
// -> 로그인 페이지로 리다이렉트
|
||||||
|
if (!user && !isAuthPage && pathname !== AUTH_ROUTES.HOME) {
|
||||||
return NextResponse.redirect(new URL(AUTH_ROUTES.LOGIN, request.url));
|
return NextResponse.redirect(new URL(AUTH_ROUTES.LOGIN, request.url));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 로그인 사용자 → 인증 페이지 접근 시 홈으로 리다이렉트
|
// 10. 로그인 사용자 접근 제어 (인증 페이지 접근 시)
|
||||||
// 단, 비밀번호 재설정 페이지는 예외
|
// - 유저가 있음 (user)
|
||||||
if (user && isAuthPage && pathname !== AUTH_ROUTES.RESET_PASSWORD) {
|
// - 인증 페이지 접근 시도 (isAuthPage) - 예: 이미 로그인했는데 /login 접근
|
||||||
|
// - 비밀번호 재설정은 아님
|
||||||
|
// - 복구 모드 아님
|
||||||
|
// -> 메인 페이지로 리다이렉트
|
||||||
|
if (
|
||||||
|
user &&
|
||||||
|
isAuthPage &&
|
||||||
|
pathname !== AUTH_ROUTES.RESET_PASSWORD &&
|
||||||
|
!recoveryCookie
|
||||||
|
) {
|
||||||
return NextResponse.redirect(new URL(AUTH_ROUTES.HOME, request.url));
|
return NextResponse.redirect(new URL(AUTH_ROUTES.HOME, request.url));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 11. 최종 응답 반환 (변경된 쿠키 등이 포함됨)
|
||||||
return supabaseResponse;
|
return supabaseResponse;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,47 +1,35 @@
|
|||||||
import { createServerClient } from "@supabase/ssr";
|
import { createServerClient } from "@supabase/ssr";
|
||||||
import { cookies } from "next/headers";
|
import { cookies } from "next/headers";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [서버 컴포넌트용 Supabase 클라이언트 생성 함수]
|
* 서버용 Supabase 클라이언트를 생성합니다.
|
||||||
*
|
* 쿠키 읽기/쓰기 권한이 있어 SSR에 적합합니다.
|
||||||
* 이 함수는 Next.js의 SSR(서버 사이드 렌더링) 환경에서 Supabase에 접근할 때 사용합니다.
|
|
||||||
* 서버 컴포넌트, 서버 액션(Server Actions), 라우트 핸들러(Route Handlers)에서 호출됩니다.
|
|
||||||
*/
|
*/
|
||||||
export async function createClient() {
|
export async function createClient() {
|
||||||
// Next.js의 쿠키 저장소에 접근합니다. (await 필수)
|
|
||||||
const cookieStore = await cookies();
|
const cookieStore = await cookies();
|
||||||
|
|
||||||
/**
|
|
||||||
* createServerClient: 서버 환경에서 안전하게 Supabase 클라이언트를 생성합니다.
|
|
||||||
* 첫 번째 인자: Supabase 프로젝트 URL
|
|
||||||
* 두 번째 인자: Supabase 익명(Anon) 키 (공개되어도 안전한 키)
|
|
||||||
* 세 번째 인자: 쿠키 제어 옵션
|
|
||||||
*/
|
|
||||||
return createServerClient(
|
return createServerClient(
|
||||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
||||||
{
|
{
|
||||||
cookies: {
|
cookies: {
|
||||||
// 1. Supabase가 쿠키를 읽어야 할 때 실행됩니다.
|
|
||||||
// 현재 요청(Request)에 있는 모든 쿠키를 가져와서 Supabase에 전달합니다.
|
|
||||||
getAll() {
|
getAll() {
|
||||||
return cookieStore.getAll();
|
return cookieStore.getAll();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 2. Supabase가 쿠키를 새로 써야 할 때(로그인, 로그아웃, 토큰 갱신 등) 실행됩니다.
|
|
||||||
setAll(cookiesToSet) {
|
setAll(cookiesToSet) {
|
||||||
try {
|
try {
|
||||||
// Supabase가 요청한 쿠키들을 하나씩 브라우저에 저장하도록 설정합니다.
|
|
||||||
cookiesToSet.forEach(({ name, value, options }) =>
|
cookiesToSet.forEach(({ name, value, options }) =>
|
||||||
cookieStore.set(name, value, options)
|
cookieStore.set(name, value, options),
|
||||||
);
|
);
|
||||||
} catch {
|
} catch {
|
||||||
// [주의] 이 부분은 '서버 컴포넌트'에서 쿠키를 쓰려고 할 때 발생하는 에러를 무시하기 위함입니다.
|
// Server Components에서는 쿠키를 설정할 수 없습니다.
|
||||||
// Next.js 규칙상 '서버 컴포넌트'는 렌더링 중에 쿠키를 직접 쓸 수 없습니다.
|
// 읽기 전용 에러가 발생합니다.
|
||||||
// 대신 미들웨어(middleware)가 토큰 갱신을 담당하므로 여기서는 에러를 무시해도 안전합니다.
|
/**
|
||||||
|
* 서버 사이드 인증 상태를 관리하고 보호된 라우트를 처리합니다.
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user