Feat: 카카오 OAuth redirect URI 분리 #496
Conversation
Walkthrough카카오 OAuth 로그인 및 회원가입을 위한 별도의 Next.js API 라우트 핸들러가 도입되었습니다. 각각의 라우트는 인증 코드와 리다이렉트 URI를 받아 백엔드와 통신하여 토큰을 발급받고, 성공 시 쿠키를 설정 후 메인 페이지로 리다이렉트합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OAuthComponent as OAuth 컴포넌트
participant Kakao
participant NextAPI as Next.js API Route (signin/signup)
participant Backend
User->>OAuthComponent: "Kakao로 시작하기" 클릭
OAuthComponent->>Kakao: 인증 요청 (redirect_uri: signin/signup)
Kakao->>User: 인증 코드 포함 redirect
User->>NextAPI: 인증 코드 전달 (GET)
NextAPI->>Backend: 인증 코드로 토큰 요청
Backend-->>NextAPI: 토큰 또는 에러 반환
alt 성공
NextAPI->>User: 쿠키 설정 및 메인 페이지 리다이렉트
else 회원가입 필요
NextAPI->>User: 회원가입 페이지로 리다이렉트 (에러코드 포함)
else 이미 가입됨/기타 에러
NextAPI->>User: 로그인/회원가입 페이지로 리다이렉트 (에러코드 포함)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/api/auth/kakao/signin/route.ts(1 hunks)src/app/api/auth/kakao/signup/route.ts(1 hunks)src/domain/Auth/components/OAuth.tsx(3 hunks)
🔇 Additional comments (6)
src/domain/Auth/components/OAuth.tsx (3)
8-38: 문서화가 명확하고 적절합니다!카카오의 인가 코드 일회성 제약사항과 redirect URI 분리 필요성을 잘 설명하고 있습니다.
40-64: OAuth 플로우 분리 구현이 적절합니다!환경 변수 검증과 pageType에 따른 redirect URI 선택 로직이 명확하게 구현되었습니다.
80-80: 버튼 텍스트 통합이 사용자 경험을 개선합니다!로그인/회원가입에 관계없이 일관된 텍스트를 사용하여 사용자 혼란을 줄입니다.
src/app/api/auth/kakao/signin/route.ts (1)
76-84: 인증 성공 처리가 적절합니다!토큰을 안전하게 쿠키에 저장하고 적절한 페이지로 리다이렉트합니다.
src/app/api/auth/kakao/signup/route.ts (2)
91-118: 에러 처리 로직이 적절합니다!회원가입 시나리오에 맞게 이미 존재하는 사용자는 로그인 페이지로, 기타 에러는 회원가입 페이지로 리다이렉트합니다.
80-80: 백엔드 닉네임 중복 검증 확인 필요
랜덤 닉네임 생성 로직은 적절하지만, 실제로 중복이 발생했을 때 처리 로직이 있는지 확인해야 합니다.
- ORM 스키마(예:
prisma/schema.prisma)에서User.nickname필드가@unique로 설정되어 있는지 검토- 회원가입 서비스(API) 레이어에서 unique 제약 위반 시 409 에러를 반환하고 있는지, 혹은 별도 중복 체크 로직이 있는지 점검
sgoldenbird
force-pushed
the
feat/473/oauth-unified
branch
from
3a77b29 to
b39be78
Compare
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-inlo5uz4e-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/app/api/auth/kakao/signup/route.ts (2)
23-28: 환경 변수 검증이 적절히 구현되었습니다.이전 리뷰 코멘트에서 지적된 non-null assertion 문제가 해결되었습니다. 환경 변수가 설정되지 않은 경우 명확한 에러 메시지와 함께 예외를 던지도록 개선되었습니다.
81-85: 예외 처리가 개선되었지만 여전히 문제가 있습니다.이전 리뷰에서 지적된 처리되지 않는 예외 문제가 여전히 남아있습니다. try-catch 블록 내에서 throw하고 있지만, 이는 적절한 리다이렉트 응답 대신 예외를 던지고 있습니다.
다음과 같이 직접 리다이렉트 응답을 반환하도록 수정하세요:
if (!code) { - throw Object.assign(new Error('카카오 인증 코드가 없습니다.'), { - status: 400, - }); + const errorUrl = new URL( + `${ROUTES.SIGNUP}?error=${ERROR_CODES.OAUTH_KAKAO_FAILED}`, + request.url, + ); + errorUrl.searchParams.append('message', '카카오 인증 코드가 없습니다.'); + return NextResponse.redirect(errorUrl); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/api/auth/kakao/signin/route.ts(1 hunks)src/app/api/auth/kakao/signup/route.ts(1 hunks)src/domain/Auth/components/OAuth.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/api/auth/kakao/signin/route.ts
- src/domain/Auth/components/OAuth.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: vercel-preview
🔇 Additional comments (3)
src/app/api/auth/kakao/signup/route.ts (3)
30-53: 백엔드 API 호출 및 응답 처리가 적절합니다.fetch 호출과 응답 처리 로직이 올바르게 구현되어 있으며, Zod 스키마를 통한 응답 검증도 적절합니다. 에러 객체에 status 속성을 추가하여 상위 함수에서 HTTP 상태 코드를 활용할 수 있도록 한 부분도 좋습니다.
98-125: 에러 처리 로직이 포괄적이고 적절합니다.다양한 에러 상황에 대한 처리가 잘 구현되어 있습니다:
- 409/400 상태 코드에 대한 특별 처리 (이미 존재하는 사용자)
- 에러 메시지를 URL 파라미터로 전달하여 클라이언트 토스트 처리 지원
- 콘솔 로깅을 통한 디버깅 지원
89-97: 성공 시 응답 처리가 적절합니다.성공적인 회원가입 후 토큰을 쿠키에 설정하고 메인 페이지로 리다이렉트하는 로직이 올바르게 구현되어 있습니다.
setAuthCookies유틸리티 함수를 사용하여 일관성 있는 인증 처리를 하고 있습니다.
sgoldenbird
force-pushed
the
feat/473/oauth-unified
branch
3 times, most recently
from
57b1def to
1b2cd27
Compare
sgoldenbird
force-pushed
the
feat/473/oauth-unified
branch
from
1b2cd27 to
330aea9
Compare
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-nv1xc9vm0-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/domain/Auth/components/KakaoTransition.tsx (2)
43-46: 하드코딩된 카카오 OAuth URL을 상수로 분리하는 것을 권장합니다.가독성과 유지보수성을 위해 카카오 OAuth URL을 상수로 분리하는 것이 좋겠습니다.
+const KAKAO_AUTH_BASE_URL = 'https://kauth.kakao.com/oauth/authorize'; + const handleRedirectToKakao = () => { - const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URI}`; + const kakaoAuthUrl = `${KAKAO_AUTH_BASE_URL}?response_type=code&client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URI}`; window.location.href = kakaoAuthUrl; };
58-58: 더 명확한 기본 메시지를 제공해주세요.현재 기본 메시지가 구체적인 상황을 설명하지 못합니다. 사용자 경험 개선을 위해 더 명확한 안내를 제공하는 것이 좋겠습니다.
-<p>{message ?? '아래 버튼을 눌러 회원가입하세요.'}</p> +<p>{message ?? (notAMember ? '아래 버튼을 눌러 회원가입을 진행하세요.' : '다시 시도해주세요.')}</p>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/app/(app)/error.tsx(1 hunks)src/app/(auth)/kakao/transition/page.tsx(1 hunks)src/app/(auth)/signin/page.tsx(1 hunks)src/app/(auth)/signup/page.tsx(1 hunks)src/app/api/auth/kakao/signin/route.ts(1 hunks)src/app/api/auth/kakao/signup/route.ts(1 hunks)src/app/api/test/error/route.ts(1 hunks)src/app/error.tsx(1 hunks)src/domain/Auth/components/KakaoTransition.tsx(1 hunks)src/domain/Auth/components/OAuth.tsx(2 hunks)src/middleware.ts(2 hunks)
✅ Files skipped from review due to trivial changes (3)
- src/app/(auth)/signin/page.tsx
- src/app/(app)/error.tsx
- src/app/(auth)/kakao/transition/page.tsx
🚧 Files skipped from review as they are similar to previous changes (5)
- src/app/api/auth/kakao/signin/route.ts
- src/app/error.tsx
- src/app/api/test/error/route.ts
- src/middleware.ts
- src/app/api/auth/kakao/signup/route.ts
🔇 Additional comments (3)
src/app/(auth)/signup/page.tsx (1)
47-47: LGTM! OAuth 컴포넌트 사용법이 올바르게 업데이트되었습니다.
pageTypeprop이 제거되어 OAuth 컴포넌트의 새로운 단순화된 인터페이스와 일치합니다.src/domain/Auth/components/OAuth.tsx (2)
67-67: LGTM! 버튼 텍스트가 새로운 OAuth 플로우에 적합하게 변경되었습니다."Kakao로 시작하기"라는 텍스트가 로그인과 회원가입을 모두 포괄하는 의미로 적절합니다.
10-28: 문서화가 잘 되어있습니다.OAuth 플로우의 변경사항과 인가 코드의 일회성 특성에 대한 설명이 명확하게 기술되어 있어 좋습니다.
| const KAKAO_REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_SIGNUP_REDIRECT_URI!; | ||
| const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY!; |
There was a problem hiding this comment.
환경 변수 검증이 누락되었습니다.
클라이언트 컴포넌트에서 환경 변수에 직접 접근하고 있지만, 값이 존재하는지 검증하지 않습니다. 런타임 오류를 방지하기 위해 검증 로직을 추가해주세요.
다음과 같이 수정하는 것을 제안합니다:
-const KAKAO_REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_SIGNUP_REDIRECT_URI!;
-const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY!;
+const KAKAO_REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_SIGNUP_REDIRECT_URI;
+const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;그리고 handleRedirectToKakao 함수에서 검증을 추가하세요:
const handleRedirectToKakao = () => {
if (!KAKAO_CLIENT_ID || !KAKAO_REDIRECT_URI) {
console.error('카카오 OAuth 환경 변수가 설정되지 않았습니다.');
return;
}
// ... 기존 로직
};🤖 Prompt for AI Agents
In src/domain/Auth/components/KakaoTransition.tsx around lines 9 to 10, the
environment variables KAKAO_REDIRECT_URI and KAKAO_CLIENT_ID are accessed
without validation, which can cause runtime errors if they are undefined. Add
explicit checks to verify these variables are defined before use. Implement
validation logic at the top of the file or within the handleRedirectToKakao
function to log an error and prevent further execution if either variable is
missing.
8f767b7 to
23f0846
Compare
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-9bevwlw6s-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/app/(auth)/kakao/transition/page.tsx (1)
10-16: 로딩 상태 표시를 고려해보세요.현재
Suspense의fallback={null}로 설정되어 있어 컴포넌트 로딩 중에 아무것도 표시되지 않습니다. 사용자 경험 개선을 위해 로딩 스피너나 스켈레톤 UI를 고려해보세요.다음과 같이 로딩 상태를 개선할 수 있습니다:
return ( - <Suspense fallback={null}> + <Suspense fallback={<div className="flex items-center justify-center min-h-screen">로딩 중...</div>}> <KakaoTransition /> </Suspense> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/app/(auth)/kakao/transition/page.tsx(1 hunks)src/app/(auth)/signin/page.tsx(1 hunks)src/app/(auth)/signup/page.tsx(1 hunks)src/app/api/auth/kakao/signin/route.ts(1 hunks)src/app/api/auth/kakao/signup/route.ts(1 hunks)src/domain/Auth/components/KakaoTransition.tsx(1 hunks)src/domain/Auth/components/OAuth.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/app/(auth)/signin/page.tsx
🚧 Files skipped from review as they are similar to previous changes (5)
- src/domain/Auth/components/OAuth.tsx
- src/app/api/auth/kakao/signup/route.ts
- src/app/(auth)/signup/page.tsx
- src/domain/Auth/components/KakaoTransition.tsx
- src/app/api/auth/kakao/signin/route.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: vercel-preview
🔇 Additional comments (2)
src/app/(auth)/kakao/transition/page.tsx (2)
1-3: LGTM! 클라이언트 컴포넌트 설정이 적절합니다.OAuth 전환 페이지의 특성상 브라우저 API(쿼리 파라미터 읽기, 리다이렉트 등)를 사용해야 하므로 'use client' 지시어 사용이 적절합니다.
5-8: SSR 비활성화가 사용자 경험에 미치는 영향을 고려해보세요.
ssr: false설정으로 클라이언트 전용 렌더링을 하고 있는데, 이는 다음과 같은 영향이 있습니다:
- 초기 로딩 시 빈 화면이 표시될 수 있음
- SEO에 부정적 영향 (하지만 인증 페이지이므로 SEO가 중요하지 않을 수 있음)
OAuth 전환 페이지의 특성상 클라이언트 사이드에서만 동작해야 하는 것이 맞다면 현재 구현이 적절합니다.
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-54ina3uml-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-79u7u3sqq-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-3mr00wdwx-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
👻 관련 이슈 번호
👻 요약
👻 주요 변경 사항
useSearchParams().get('status') === 'need-signup'👻 체크리스트
📷 UI 변경 사항
👻 문제 사항
👻 논의 사항
👻 기타 참고 사항
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Style
Documentation