fix: Clerk 패키지 설치 및 Vite 빌드 설정 수정
- @clerk/clerk-react 패키지 설치 추가 - Vite external 설정에서 Clerk 번들링 허용으로 변경 - ChunkLoadError 복구 시스템 Playwright 테스트 추가 - Clerk CDN 실패 시나리오 검증 및 Mock 인증 폴백 시스템 확인 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
- **프로젝트명**: 젤리의 적자탈출 (Zellyy Finance)
|
||||
- **목적**: 개인 재무/예산 관리 모바일 앱
|
||||
- **플랫폼**: 웹 + iOS/Android (Capacitor)
|
||||
- **현재 상태**: Supabase → Appwrite 마이그레이션 완료
|
||||
- **현재 상태**: 최종 백엔드로 Supabase Cloud 사용
|
||||
|
||||
### 현재 기술 스택
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
Frontend: React 18 + TypeScript + Vite
|
||||
UI: Tailwind CSS + shadcn/ui (뉴모픽 디자인)
|
||||
상태관리: Context API
|
||||
백엔드: Appwrite (self-hosted)
|
||||
백엔드: Supabase (Cloud)
|
||||
모바일: Capacitor
|
||||
```
|
||||
|
||||
@@ -150,55 +150,14 @@ const { data, isLoading, error } = useQuery({
|
||||
}
|
||||
```
|
||||
|
||||
## 인증 시스템 개선
|
||||
## 인증 시스템
|
||||
|
||||
### 현재: Appwrite Auth
|
||||
### 현재: Supabase Auth
|
||||
|
||||
- 모든 인증 로직 직접 구현
|
||||
- 소셜 로그인 구현 복잡
|
||||
- 고급 기능 구현 어려움
|
||||
|
||||
### 권장: Clerk + Supabase 조합
|
||||
|
||||
#### Clerk (인증 전문)
|
||||
|
||||
```typescript
|
||||
import { useUser, SignIn } from '@clerk/clerk-react';
|
||||
|
||||
function App() {
|
||||
const { user, isLoaded } = useUser();
|
||||
if (!user) return <SignIn />;
|
||||
return <Dashboard user={user} />;
|
||||
}
|
||||
```
|
||||
|
||||
**장점:**
|
||||
|
||||
- 카카오/네이버 로그인 즉시 사용 가능
|
||||
- 2FA, 생체인증 내장
|
||||
- 10,000명까지 무료
|
||||
- 뛰어난 UX/UI 컴포넌트
|
||||
|
||||
#### Supabase (데이터베이스)
|
||||
|
||||
```typescript
|
||||
// Clerk JWT를 Supabase에 전달
|
||||
const supabase = createClient(url, key, {
|
||||
global: {
|
||||
headers: async () => {
|
||||
const token = await getToken({ template: "supabase" });
|
||||
return { Authorization: `Bearer ${token}` };
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 마이그레이션 계획
|
||||
|
||||
1. Supabase 프로젝트 생성 및 스키마 설정
|
||||
2. Clerk 통합 및 JWT 템플릿 구성
|
||||
3. 데이터 마이그레이션 (Appwrite → Supabase)
|
||||
4. 점진적 기능 전환
|
||||
- Supabase에 내장된 인증 시스템을 사용합니다.
|
||||
- 이메일/비밀번호, 소셜 로그인(Google, Kakao 등)을 지원합니다.
|
||||
- RLS(Row Level Security)와 통합하여 안전한 데이터 접근 제어를 구현합니다.
|
||||
- JWT 기반 세션 관리를 통해 클라이언트와 서버 간의 인증을 처리합니다.
|
||||
|
||||
## CI/CD 도입 계획
|
||||
|
||||
@@ -317,8 +276,8 @@ task-master set-status --id=1.2 --status=done
|
||||
|
||||
### Phase 3: 고급 기능 (1개월)
|
||||
|
||||
- [ ] Clerk 인증 시스템 도입
|
||||
- [ ] Supabase 데이터베이스 마이그레이션
|
||||
- [x] Supabase 데이터베이스 마이그레이션 완료
|
||||
- [ ] 소셜 로그인(Google, Kakao) 연동 확대
|
||||
- [ ] Chart.js로 차트 라이브러리 교체
|
||||
- [ ] PWA 기능 추가
|
||||
- [ ] 접근성 개선
|
||||
|
||||
Reference in New Issue
Block a user