Skip to content

feat: 소셜 로그인&회원가입 API 구현#89

Merged
heeeeyong merged 2 commits intodevelopfrom
feat/api-auth
Aug 11, 2025
Merged

feat: 소셜 로그인&회원가입 API 구현#89
heeeeyong merged 2 commits intodevelopfrom
feat/api-auth

Conversation

@heeeeyong
Copy link
Collaborator

@heeeeyong heeeeyong commented Aug 11, 2025

#️⃣연관된 이슈

#74 [API] Users API 연동
#73 [API] Auth API 연동

📝작업 내용

<소셜로그인 로직>

  1. FE: 소셜로그인 페이지로 리다이렉트 (카카오 서버로 로그인 화면 요청)
  2. 유저: 카카오 로그인
  3. 카카오 서버: 로그인 처리해서 BE로 인가코드 리다이렉트
  4. BE: 내부로직 수행 후, isNewUser 에 따라 다른 url 로 redirect해서 FE에게 보여줌

💬리뷰 요구사항

현재 구현중인데 확인해야할 부분이 있어 머지 먼저 하겠습니다.

Summary by CodeRabbit

  • 신규 기능
    • 카카오/구글 소셜 로그인 진입을 지원합니다.
    • 닉네임 중복 검증을 추가하고 결과에 따라 에러 메시지를 표시합니다.
    • 별칭 선택과 닉네임을 포함한 회원가입 절차를 API와 연동합니다.
    • 별칭 후보 목록을 서버에서 조회합니다.
    • 가입 완료 화면에서 전달된 닉네임/별칭을 표시하고 누락 시 이전 단계로 안내합니다.
  • 스타일
    • 닉네임 입력의 오류 상태 스타일(붉은 테두리)과 고정 위치 오류 메시지 오버레이를 추가했습니다.

@vercel
Copy link

vercel bot commented Aug 11, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project Status Preview Comments Updated (UTC)
thip Ready Visit Preview 💬 Add feedback Aug 11, 2025 7:48pm

@coderabbitai
Copy link

coderabbitai bot commented Aug 11, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

신규 사용자 API 클라이언트(getAlias, postNickname, postSignup) 추가, 로그인 페이지에 카카오/구글 OAuth 리다이렉트 핸들러 도입, 회원가입 닉네임 검증/에러 표시 및 장르(별칭) 선택 후 가입 호출 흐름 구현, 완료 페이지에서 상태 기반 데이터 표시와 라우팅 보정, 스타일에 에러 상태 프롭 추가.

Changes

Cohort / File(s) Change Summary
User API clients
src/api/users/getAlias.ts, src/api/users/postNickname.ts, src/api/users/postSignup.ts
신규 모듈 추가. 타입 정의(요청/응답)와 apiClient를 이용한 GET/POST 래퍼 구현: /users/alias, /users/nickname, /users/signup 호출.
OAuth 로그인 리다이렉트
src/pages/login/Login.tsx
카카오/구글 로그인 버튼 클릭 시 VITE_API_BASE_URL 기반 OAuth 엔드포인트로 window.location.href 리다이렉트 처리 추가.
Signup 스타일 에러 상태
src/pages/signup/Signup.styled.ts
에러 메시지 레이어 스타일 추가(.errorMessage). InputBox/StyledInput에 hasError 프롭 도입 및 에러 보더 스타일 적용.
닉네임 검증 단계
src/pages/signup/SignupNickname.tsx
postNickname 연동으로 닉네임 중복 검증 추가, 에러 상태/메시지 표시, 유효성(한글/영문 소문자/숫자) 제한, 성공 시 nickname을 state로 담아 /signup/genre 이동.
별칭 선택 및 회원가입
src/pages/signup/SignupGenre.tsx
location.state에서 nickname 수신, 별칭 객체 선택 로직으로 전환, 쿠키에서 토큰 추출해 apiClient Authorization 헤더 설정, postSignup 호출 후 성공 시 /signupdone로 이동(state에 aliasName/nickName 포함).
가입 완료 페이지 라우팅/데이터
src/pages/signup/SignupDone.tsx
location.state에서 nickName/aliasName 사용해 동적 표시. 값 없으면 /signup/nickname으로 리다이렉트. 뒤로가기 경로를 /signup/genre로 변경.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant L as Login Page
  participant IdP as OAuth Provider
  participant BE as Backend

  U->>L: Click Kakao/Google
  L->>IdP: Redirect to /oauth2/authorization/{provider}
  IdP-->>BE: Callback with code
  BE-->>U: Set auth cookie / redirect to app
Loading
sequenceDiagram
  participant U as User
  participant N as SignupNickname
  participant G as SignupGenre
  participant API as Backend API
  participant C as apiClient

  U->>N: Enter nickname
  N->>C: POST /users/nickname
  C->>API: Verify nickname
  API-->>C: isVerified
  C-->>N: Result
  N-->>G: navigate(state: { nickname })

  U->>G: Select alias
  G->>G: Read token from cookie
  G->>C: Set Authorization header
  G->>C: POST /users/signup { aliasName, nickName }
  C->>API: Signup
  API-->>C: success/userId
  C-->>G: Result
  G-->>U: navigate('/signupdone', state: { aliasName, nickName })
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

Possibly related issues

  • [API] auth API 연동 #73: 소셜 로그인 리다이렉트, 회원가입 API 연동, 쿠키→헤더 토큰 처리 등 이 PR의 변경 사항이 이슈 범위를 직접 구현합니다.

Possibly related PRs

Suggested labels

✨ Feature, 🎨 Html&css

Suggested reviewers

  • ljh130334
  • ho0010

Poem

토끼는 깡총, 닉네임 점검 중!
쿠키에서 토큰 쏙, 헤더에 척-
별칭 골라 퐁당, 가입은 뿅당!
카카오·구글로 휘릭—로그인 성공!
오늘도 PR 위에 당근 이모지 하나 🥕


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f493fb and 6afdabf.

📒 Files selected for processing (8)
  • src/api/users/getAlias.ts (1 hunks)
  • src/api/users/postNickname.ts (1 hunks)
  • src/api/users/postSignup.ts (1 hunks)
  • src/pages/login/Login.tsx (1 hunks)
  • src/pages/signup/Signup.styled.ts (4 hunks)
  • src/pages/signup/SignupDone.tsx (1 hunks)
  • src/pages/signup/SignupGenre.tsx (3 hunks)
  • src/pages/signup/SignupNickname.tsx (3 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/api-auth

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@heeeeyong heeeeyong merged commit 3db894a into develop Aug 11, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant