React Native + Supabase로 카카오 로그인 구현하기

# React Native + Supabase로 카카오 로그인 구현하기 A to Z

## 1. 카카오 개발자 설정
### 1.1 애플리케이션 생성
1. https://developers.kakao.com 접속
2. 내 애플리케이션 → 애플리케이션 추가하기
3. 앱 이름과 사업자명 입력

### 1.2 플랫폼 설정
1. 내 애플리케이션 → 앱 선택 → 플랫폼
2. Android 플랫폼 등록
   - 패키지명: com.stockexam.app
   - 키 해시: (개발 키 해시 값)
3. iOS 플랫폼 등록
   - 번들 ID: com.stockexam.app

### 1.3 카카오 로그인 활성화
1. 카카오 로그인 → 활성화 설정 ON
2. Redirect URI 등록
   - `https://[PROJECT_ID].supabase.co/auth/v1/callback` 추가
   - 예: https://tqwakvmtfyiyxjyxrctv.supabase.co/auth/v1/callback

## 2. Supabase 설정
### 2.1 프로젝트 생성
1. https://supabase.com 접속
2. New Project
3. 프로젝트 정보 입력
   - Name: Stock Exam
   - Database Password 설정
   - Region: Seoul
   - Pricing Plan: Free tier

### 2.2 OAuth 설정
1. Authentication → Providers
2. Kakao Provider 활성화
3. 설정값 입력:
   - Client ID: 카카오 REST API 키
   - Client Secret: 카카오 Client Secret
4. Authentication → URL Configuration
   - Additional Redirect URLs에 `stockexam://auth/callback` 추가
   - 이는 인증 완료 후 앱으로 돌아오기 위한 딥링크 URL

## 3. 프로젝트 설정
### 3.1 필요한 패키지 설치
```bash
npm install @supabase/supabase-js @react-native-async-storage/async-storage react-native-webview
```

### 3.2 앱 설정
```javascript
// app.config.js
export default {
  expo: {
    scheme: 'stockexam',  // 딥링크를 위한 URL 스킴
    ios: {
      bundleIdentifier: 'cohttp://m.stockexam.app'
    },
    android: {
      package: 'cohttp://m.stockexam.app'
    }
  }
}
```

### 3.3 Supabase 클라이언트 설정
```typescript
// src/lib/supabaseClient.ts
import { createClient } from '@supabase/supabase-js'
import AsyncStorage from '@react-native-async-storage/async-storage'

export const supabase = createClient(
  SUPABASE_URL,
  SUPABASE_ANON_KEY,
  {
    auth: {
      storage: AsyncStorage,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: false,
    },
  }
)
```

## 4. 로그인 구현
### 4.1 로그인 컴포넌트 작성
```typescript
// LoginScreen.tsx 전체 코드
```

### 4.2 콜백 처리
```typescript
// app/auth/callback.tsx 코드
```

## 5. 앱 빌드 및 테스트
### 5.1 개발 환경 설정
1. JDK 설치
2. Android Studio 설치
3. 환경 변수 설정
   - JAVA_HOME
   - Android SDK

### 5.2 키 해시 생성
1. 프로젝트의 android 폴더로 이동
```bash
cd android
./gradlew signingReport
```
2. 출력된 SHA1 값을 Base64로 변환
3. 카카오 개발자 센터에 키 해시 등록

### 5.3 개발자 빌드
```bash
npx expo prebuild
npx expo run:android  # 안드로이드
npx expo run:ios      # iOS
```

## 6. 주의사항
1. Expo Go에서는 테스트 불가능
2. 실제 기기에서 테스트 필요
3. USB 디버깅 활성화 필요
4. 데이터 전송 가능한 USB 케이블 사용

## 7. 문제 해결
1. 키 해시 오류
2. USB 디버깅 연결 문제
3. 리다이렉트 URL 관련 이슈
4. 세션 유지 문제

각 섹션에 대한 스크린샷이나 추가 설명이 필요한 부분이 있다면 말씀해 주세요!