SNS 로그인 OAuth 설정 가이드

🔵 Google OAuth 설정

1. Google Cloud Console에 접속
2. 새 프로젝트 생성 또는 기존 프로젝트 선택
3. APIs & Services > Credentials로 이동
4. "Create Credentials" > "OAuth 2.0 Client IDs" 선택
5. Application type: "Web application" 선택
6. Authorized redirect URIs에 다음 추가:

   https://mypage.restyart.com/auth/callback/google
   https://yourdomain.com/auth/callback/google

7. Client ID와 Client Secret을 환경변수에 추가:

   GOOGLE_CLIENT_ID=your_client_id
   GOOGLE_CLIENT_SECRET=your_client_secret

🟢 Naver OAuth 설정

1. 네이버 개발자센터에 접속
2. "애플리케이션 등록" 클릭
3. 애플리케이션 이름 입력
4. 사용 API: "네이버 로그인" 선택
5. 서비스 URL과 Callback URL 설정:

   서비스 URL: https://mypage.restyart.com (개발), https://yourdomain.com (운영)
   Callback URL: https://mypage.restyart.com/auth/callback/naver

6. Client ID와 Client Secret을 환경변수에 추가:

   NAVER_CLIENT_ID=your_client_id
   NAVER_CLIENT_SECRET=your_client_secret

🟡 Kakao OAuth 설정

1. 카카오 개발자센터에 접속
2. "내 애플리케이션" > "애플리케이션 추가하기"
3. 앱 이름, 사업자명 입력
4. "플랫폼" > "Web 플랫폼 등록"
5. 사이트 도메인 추가:

   https://mypage.restyart.com
   https://yourdomain.com

6. "카카오 로그인" > "활성화 설정" ON
7. Redirect URI 설정:

   https://mypage.restyart.com/auth/callback/kakao
   https://yourdomain.com/auth/callback/kakao

8. REST API 키를 환경변수에 추가:

   KAKAO_CLIENT_ID=your_rest_api_key

📝 구현 참고사항

현재 SNS 로그인 컴포넌트는 기본 구조만 구현되어 있습니다. 실제 OAuth 연동을 위해서는:

• 각 플랫폼의 JavaScript SDK 로드
• OAuth 콜백 처리 라우트 구현
• 토큰 교환 및 사용자 정보 획득 로직 구현
• 보안을 위한 CSRF 토큰 및 state 파라미터 처리

추천 라이브러리:

• next-auth - Next.js용 인증 라이브러리
• @google-cloud/oauth2 - Google OAuth
• 각 플랫폼의 공식 JavaScript SDK