Feature/60 kakao login

[chaewon41]

📝 변경 사항

• 카카오 로그인 / 회원가입 기능 추가

🎯 작업 유형

• 🐛 버그 수정
• ✨ 새로운 기능 추가
• 💄 UI/UX 개선
• ♻️ 리팩토링
• 📚 문서 수정
• ⚡️ 성능 개선
• 🧪 테스트 추가/수정
• 🔧 설정 변경

📄 상세 내용

📄 상세 내용

주요 구현 내용

1. 카카오 OAuth 2.0 로그인 플로우 구현

• 카카오 인증 시작 (src/app/page.tsx)

  • 카카오 OAuth 인증 URL 생성 및 리다이렉트
  • 환경 변수 기반 설정 (NEXT_PUBLIC_KAKAO_CLIENT_ID, NEXT_PUBLIC_KAKAO_REDIRECT_URI)
  • Redirect URI: {origin}/auth/kakao/callback

• 카카오 콜백 처리 (src/app/(auth)/auth/kakao/callback/page.tsx)

  • URL에서 인증 코드(code) 추출
  • 백엔드 /auth/kakao/login API 호출
  • 신규 사용자: /signup?kakaoId={kakaoId}로 리다이렉트
  • 기존 사용자: /home으로 리다이렉트
  • 에러 처리 및 로딩 UI 제공

2. 토큰 관리 시스템 구축

• AuthStore 생성 (src/store/authStore.ts)

  • Zustand를 사용한 전역 인증 상태 관리
  • localStorage에 직접 토큰 저장/조회
  • setTokens, clearTokens, getAccessToken, getRefreshToken, isAuthenticated 메서드 제공

• 토큰 저장 로직 (src/api/auth.ts)

  • 카카오 로그인/회원가입 시 accessToken, refreshToken을 localStorage에 저장
  • 일반 로그인 시에도 동일한 방식으로 토큰 저장
  • AuthStore와 localStorage 동기화

3. 자동 토큰 관리 및 재발급

• Axios 인터셉터 (src/api/client.ts)
  • Request Interceptor: 모든 API 요청에 Authorization: Bearer {accessToken} 헤더 자동 추가
  • Response Interceptor: 401 에러 발생 시 자동으로 리프레시 토큰으로 재발급 시도
  • 재발급 성공 시 원래 요청 자동 재시도
  • 재발급 실패 시 로그인 페이지로 리다이렉트

구조/컨벤션 관련 변경 사항

• 파일 구조

  • src/app/(auth)/auth/kakao/callback/page.tsx: 카카오 콜백 전용 페이지
  • src/store/authStore.ts: 인증 상태 관리 전용 스토어

• API 구조

  • src/api/auth.ts: kakaoLogin, kakaoSignup 함수 추가
  • 기존 login, refreshAccessToken 함수에 토큰 저장 로직 통합

• 토큰 저장 방식

  • localStorage에 직접 저장 (accessToken, refreshToken 키 사용)
  • Zustand persist 미들웨어 제거 (직접 localStorage 관리로 변경)

리뷰어가 알아야 할 포인트

1. OAuth 2.0 Authorization Code Flow

   • 카카오 인증 페이지 → 콜백 페이지 → 백엔드 API 호출 순서로 진행
   • Redirect URI는 프론트엔드 콜백 URL 사용 (/auth/kakao/callback)

2. 토큰 관리 전략

   • localStorage에 직접 저장하여 페이지 새로고침 후에도 유지
   • AuthStore는 localStorage의 래퍼 역할
   • persist 미들웨어 제거 이유: 초기화 시 null 값으로 덮어쓰는 문제 방지

3. 자동 토큰 재발급 로직

   • 401 에러 발생 시 자동으로 /auth/refresh 호출
   • 재발급 시 apiClient 대신 일반 axios 사용 (무한 루프 방지)
   • _retry 플래그로 중복 재시도 방지

4. 에러 처리

   • 카카오 인증 실패 시 사용자에게 알림 후 로그인 페이지로 리다이렉트
   • 리프레시 토큰 재발급 실패 시 자동 로그아웃 처리

5. 환경 변수

   • NEXT_PUBLIC_KAKAO_CLIENT_ID: 카카오 앱 클라이언트 ID
   • NEXT_PUBLIC_KAKAO_REDIRECT_URI: 카카오 콜백 URL (선택, 기본값: {origin}/auth/kakao/callback)

🔗 관련 이슈

Closes #61

✅ 체크리스트

• 코드가 프로젝트의 코딩 스타일을 따릅니다
• 자체적으로 코드 리뷰를 수행했습니다
• 코드에 주석을 추가했습니다 (특히 이해하기 어려운 부분)
• 문서를 업데이트했습니다 (필요한 경우)
• 변경 사항이 새로운 경고를 생성하지 않습니다
• Storybook 스토리가 추가/수정되었습니다 (컴포넌트 변경의 경우)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
12th-fin-sight-fe	Ready	Preview	Feb 17, 2026 10:03am