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:
hansoo
2025-07-14 14:12:40 +09:00
parent 483e458465
commit 3934ab933f
9 changed files with 209 additions and 104 deletions

View File

@@ -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 기능 추가
- [ ] 접근성 개선