[#48] Feat/48/소셜로그인기능

[LMS10]

❓이슈

• close Feat: 카카오/구글 소셜 로그인 구현 #48

📝 Description

Google 및 Kakao 소셜 로그인 기능을 구현합니다.
기존 NextAuth 내장 Provider 방식 대신, OAuth 2.0 인가코드를 백엔드에 전달하는 커스텀 플로우로 구현했습니다.
기존 이메일 로그인과 동일한 세션 구조(accessToken, userId, picture)를 유지합니다.
추가로 마이페이지에서 프로필 이미지가 없을 때 빈 원으로 표시되던 문제를 함께 수정합니다.

구현 흐름

로그인 버튼 클릭
│
▼
state 생성 (CSRF 방지) → sessionStorage 저장
│
▼
Google/Kakao OAuth 인가 URL로 window.location.href 리다이렉트
│
▼ (사용자 소셜 계정 인증 완료)
/oauth/google 또는 /oauth/kakao 콜백 페이지 진입
│
├─ URL의 state와 sessionStorage의 state 비교 검증
├─ 백엔드 POST /api/v1/auth/social/login/{provider} 호출
│ body: { state, redirectUri, token(인가코드) }
├─ 응답에서 accessToken, user 정보 수신
│
▼
signIn('social', { accessToken, userId, email, name, picture })
│
▼
NextAuth JWT 세션 생성 → /workspace 이동

변경 파일 상세

lib/auth-api.ts

• socialLoginApi(provider, body) 함수 추가
• SocialLoginRequest, SocialAuthResponse 타입 추가

types/next-auth.d.ts

• JWT 인터페이스에 picture?: string | null 필드 추가

app/api/auth/[...nextauth]/route.ts

• 기존 provider id를 'credentials'로 명시
• 'social' id CredentialsProvider 추가 — 콜백 페이지에서 전달받은 accessToken을 그대로 JWT 세션으로 저장
• jwt 콜백에서 picture 필드 저장 추가

app/oauth/google/page.tsx (신규)

• Google OAuth 콜백 처리 페이지
• useRef 가드로 React Strict Mode 이중 실행 방지
• state 검증(CSRF) → socialLoginApi('google', ...) → signIn('social', ...) → /workspace 이동
• 실패 시 /login으로 이동

app/oauth/kakao/page.tsx (신규)

• Google 콜백과 동일한 구조로 Kakao 처리

app/(before-login)/(auth)/login/page.tsx

• Google/Kakao 버튼 onClick을 signIn('google/kakao') → handleGoogleLogin() / handleKakaoLogin()으로 교체
• 각 핸들러에서 state 생성 후 sessionStorage 저장, OAuth 인가 URL로 리다이렉트

middleware.ts

• matcher에 oauth 제외 추가
• 변경 전: /((?!api|_next/static|_next/image|favicon.ico).*)
• 변경 후: /((?!api|_next/static|_next/image|favicon.ico|oauth).*)
• /oauth/google, /oauth/kakao 콜백 페이지가 미들웨어 로그인 리다이렉트에 차단되지 않도록 처리

next.config.ts

• images.remotePatterns에 lh3.googleusercontent.com 추가
• Google 소셜 로그인 사용자의 프로필 이미지 로드 허용

app/(after-login)/mypage/page.tsx

• 프로필 이미지가 없을 때 빈 원 대신 헤더와 동일하게 bg-blue-100 배경에 이름 첫 글자 표시

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

✅ Checklist

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• Branch Convention 확인

  feat/ 기능 구현, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 커밋 메시지 컨벤션 준수
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test Checklist

• 로컬 작동 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
remate	Ready	Preview, Comment	May 16, 2026 5:27pm

[minzx23]

카카오 로딩 만드신건가요? 귀엽네욤