# 로컬 개발 서버 디버그 명령어

## 1. 브라우저에서 확인할 사항

### 개발자 도구에서 실행할 JavaScript 명령어:

```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들:

1. **메인 페이지**: http://localhost:3000/
2. **로그인 페이지**: http://localhost:3000/sign-in
3. **회원가입 페이지**: 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. 실제 테스트 시나리오

1. **브라우저에서 http://localhost:3000/ 접속**
   - 페이지 하단에 환경 변수 디버그 정보 표시 확인
   - Clerk 상태 디버그 정보 확인

2. **콘솔 에러 확인**
   - F12 → Console 탭에서 오류 메시지 확인
   - Network 탭에서 실패한 요청 확인

3. **로그인 테스트**
   - /sign-in 페이지에서 Clerk 로그인 폼 표시 확인
   - 테스트 계정으로 로그인 시도

## 4. 현재 설정 상태

- ✅ Supabase 데이터베이스 스키마 적용 완료
- ✅ Clerk + Supabase RLS 정책 적용 완료
- ✅ 환경 변수 설정 완료
- ⏳ JWT 템플릿 설정 필요 (Clerk 대시보드에서 수동 설정)
- ⏳ 브라우저 테스트 필요

## 5. 다음 단계

1. 브라우저에서 환경 변수 로딩 확인
2. Clerk 대시보드에서 JWT 템플릿 'supabase' 생성
3. 테스트 계정으로 로그인/회원가입 테스트
4. Supabase 대시보드에서 user_profiles 테이블에 데이터 생성 확인