c231d5be65
주요 변경사항: • Clerk 인증 시스템 통합 및 설정 • Supabase 데이터베이스 스키마 설계 및 적용 • JWT 기반 Row Level Security (RLS) 정책 구현 • 기존 Appwrite 인증을 Clerk로 완전 교체 기술적 개선: • 무한 로딩 문제 해결 - Index.tsx 인증 로직 수정 • React root 마운팅 오류 수정 - main.tsx 개선 • CORS 설정 추가 - vite.config.ts 수정 • Sentry 에러 모니터링 통합 추가된 컴포넌트: • AuthGuard: 인증 보호 컴포넌트 • SignIn/SignUp: Clerk 기반 인증 UI • ClerkProvider: Clerk 설정 래퍼 • EnvTest: 개발환경 디버깅 도구 데이터베이스: • user_profiles, transactions, budgets, category_budgets 테이블 • Clerk JWT 토큰 기반 RLS 정책 • 자동 사용자 프로필 생성 및 동기화 Task Master: • Task 11.1, 11.2, 11.4 완료 • 프로젝트 관리 시스템 업데이트 Note: ESLint 정리는 별도 커밋에서 진행 예정 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2.2 KiB
2.2 KiB
로컬 개발 서버 디버그 명령어
1. 브라우저에서 확인할 사항
개발자 도구에서 실행할 JavaScript 명령어:
// 환경 변수 확인
console.log(
"VITE_CLERK_PUBLISHABLE_KEY:",
import.meta.env?.VITE_CLERK_PUBLISHABLE_KEY?.substring(0, 20)
);
console.log("VITE_SUPABASE_URL:", import.meta.env?.VITE_SUPABASE_URL);
// Clerk 설정 확인
console.log("Clerk Provider 있음:", !!window.Clerk);
// 네트워크 오류 확인
console.log("Current URL:", window.location.href);
브라우저에서 접속할 URL들:
- 메인 페이지: http://localhost:3000/
- 로그인 페이지: http://localhost:3000/sign-in
- 회원가입 페이지: http://localhost:3000/sign-up
2. 예상 문제 및 해결책
문제 1: 환경 변수가 undefined인 경우
- 원인: .env 파일이 제대로 로드되지 않음
- 해결: 개발 서버 재시작 필요
문제 2: Clerk 로딩 실패
- 원인: VITE_CLERK_PUBLISHABLE_KEY가 누락되거나 잘못됨
- 해결: Clerk 대시보드에서 키 확인
문제 3: Supabase 연결 실패
- 원인: VITE_SUPABASE_URL 또는 VITE_SUPABASE_ANON_KEY 오류
- 해결: Supabase 대시보드에서 설정 확인
3. 실제 테스트 시나리오
-
브라우저에서 http://localhost:3000/ 접속
- 페이지 하단에 환경 변수 디버그 정보 표시 확인
- Clerk 상태 디버그 정보 확인
-
콘솔 에러 확인
- F12 → Console 탭에서 오류 메시지 확인
- Network 탭에서 실패한 요청 확인
-
로그인 테스트
- /sign-in 페이지에서 Clerk 로그인 폼 표시 확인
- 테스트 계정으로 로그인 시도
4. 현재 설정 상태
- ✅ Supabase 데이터베이스 스키마 적용 완료
- ✅ Clerk + Supabase RLS 정책 적용 완료
- ✅ 환경 변수 설정 완료
- ⏳ JWT 템플릿 설정 필요 (Clerk 대시보드에서 수동 설정)
- ⏳ 브라우저 테스트 필요
5. 다음 단계
- 브라우저에서 환경 변수 로딩 확인
- Clerk 대시보드에서 JWT 템플릿 'supabase' 생성
- 테스트 계정으로 로그인/회원가입 테스트
- Supabase 대시보드에서 user_profiles 테이블에 데이터 생성 확인