Feat: #172 소셜 회원가입/로그인 기능 구현 #191
Conversation
Walkthrough이 변경 사항은 소셜 로그인 기능을 구현하기 위해 여러 컴포넌트와 서비스에 새로운 기능을 추가하고 기존 기능을 수정합니다. 새로운 Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. 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: 10
🧹 Outside diff range and nitpick comments (8)
src/components/user/auth-form/SocialButton.tsx (1)
21-35: 아이콘 크기를 반응형으로 조정하는 것이 좋습니다.버튼 렌더링과 스타일링이 전반적으로 잘 구현되어 있습니다. 하지만 아이콘 크기를 고정 값으로 설정한 것이 눈에 띕니다.
아이콘 크기를 반응형으로 조정하는 것을 고려해보세요. 예를 들어:
-className={isGoogle ? 'size-42' : 'size-15'} +className={`w-auto h-${isGoogle ? '10' : '4'} max-w-[42px] max-h-[42px]`}이렇게 하면 다양한 화면 크기에서 더 일관된 모습을 유지할 수 있습니다.
src/pages/user/SignInPage.tsx (1)
95-96: 소셜 로그인 버튼 구현 개선 제안SocialButton 컴포넌트를 사용하여 Kakao와 Google 로그인 버튼을 구현한 것은 좋은 접근입니다. 재사용 가능한 컴포넌트를 사용함으로써 코드의 유지보수성이 향상되었습니다.
다만, 다음 사항들을 고려해보시는 것이 어떨까요?
- 소셜 로그인 성공 및 실패에 대한 피드백을 추가하는 것이 사용자 경험을 개선하는 데 도움이 될 것 같습니다.
- 소셜 로그인 과정에서 발생할 수 있는 오류 처리 로직을 추가하는 것이 좋겠습니다.
이러한 개선사항을 추가하시겠습니까? 필요하다면 구체적인 구현 방법에 대해 제안드릴 수 있습니다.
src/services/authService.ts (1)
57-69: 소셜 로그인 함수가 잘 구현되었습니다. 오류 처리를 고려해 보세요.socialLogin 함수가 PR의 목표에 맞게 잘 구현되었습니다. 함수 시그니처와 구현이 적절하며, defaultAxios 사용이 파일의 다른 함수들과 일관성이 있습니다.
제안사항:
- 오류 처리를 추가하는 것을 고려해 보세요. 예를 들어, 잘못된 인증 코드나 네트워크 오류 등에 대한 처리를 포함할 수 있습니다.
오류 처리 예시:
export async function socialLogin(provider: SocialLoginProvider, code: string, axiosConfig: AxiosRequestConfig = {}) { try { return await defaultAxios.post(`user/login/${provider}`, { code }, axiosConfig); } catch (error) { console.error(`소셜 로그인 오류 (${provider}):`, error); throw error; // 또는 사용자 정의 오류 객체를 throw } }src/pages/user/SocialCallBackPage.tsx (1)
59-60: loading 상태 관리 개선을 고려해주세요.
if (loading) return;검사를 하고 있지만,loading상태를 변경하는setLoading(true);가 그 다음 줄에 있습니다. 만약loading이true인 경우 함수가 즉시 종료되지만, 그럴 가능성은 낮아 보입니다. 혹시 동시 요청을 방지하려는 목적이라면, 더 명확한 로직으로 수정하는 것을 추천합니다.예를 들어,
handleSocialLogin함수 외부에서 상태를 관리하거나, 함수 호출 전에 상태를 변경하도록 수정할 수 있습니다.src/mocks/services/authServiceHandler.ts (4)
128-138: 에러 발생 시 상세한 로그 남기기 권장
fetchAccessToken함수에서 에러 발생 시 단순히null을 반환하고 있습니다. 에러의 원인을 파악하기 위해console.error등을 사용하여 에러 정보를 로그로 남기는 것이 좋습니다.} catch (error) { + console.error('Access Token Fetch Error:', error); return null; }
140-150: 에러 발생 시 상세한 로그 남기기 권장
fetchUserInfo함수에서도 에러 발생 시null을 반환하고 있습니다. 마찬가지로 에러 로그를 추가하여 문제 해결에 도움이 되도록 하는 것이 좋습니다.} catch (error) { + console.error('User Info Fetch Error:', error); return null; }
177-177: 닉네임 필드에 사용자 친화적인 값 사용 권장
nickname을userInfo.id로 설정하면 사용자가 이해하기 어려운 값일 수 있습니다. 대신에 소셜 프로필에서 제공하는nickname이나name값을 사용하는 것이 좋습니다.nickname: userInfo.id, +// 예시: 카카오의 경우 userInfo.properties.nickname 등을 사용할 수 있음
187-199: 토큰 및 쿠키 설정 시 보안 옵션 추가 고려
Secure및SameSite속성을 설정하고 있지만, 실제 운영 환경에서는HttpOnly옵션을 추가하여 클라이언트 측 스크립트에서 쿠키에 접근하지 못하도록 하는 것이 바람직합니다.'Set-Cookie': [ `refreshToken=${refreshToken}; SameSite=Strict; Secure; Path=/; Expires=${refreshTokenExpiryDate}; Max-Age=${AUTH_SETTINGS.REFRESH_TOKEN_EXPIRATION / 1000}`, `refreshTokenExpiresAt=${refreshTokenExpiryDate}; SameSite=Strict; Secure; Path=/; Expires=${refreshTokenExpiryDate}; Max-Age=${AUTH_SETTINGS.REFRESH_TOKEN_EXPIRATION / 1000}`, + // HttpOnly 옵션 추가 권장 ],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
- src/components/user/auth-form/SocialButton.tsx (1 hunks)
- src/layouts/AuthFormLayout.tsx (1 hunks)
- src/mocks/services/authServiceHandler.ts (3 hunks)
- src/pages/user/SignInPage.tsx (2 hunks)
- src/pages/user/SocialCallBackPage.tsx (1 hunks)
- src/routes/MainRouter.tsx (2 hunks)
- src/services/authService.ts (2 hunks)
- src/types/UserType.tsx (1 hunks)
🔇 Additional comments (12)
src/layouts/AuthFormLayout.tsx (1)
5-5: 변경 사항이 적절해 보입니다.
onSubmit프로퍼티를 선택적으로 만든 것은 소셜 로그인 구현에 적합한 변경입니다. 이를 통해AuthFormLayout컴포넌트를 폼 제출이 필요하지 않은 상황(예: 소셜 로그인 버튼만 있는 경우)에서도 사용할 수 있게 되었습니다.이 변경으로 인해 컴포넌트의 유연성이 향상되었으며, PR의 목표인 소셜 로그인 기능 구현에 도움이 될 것입니다.
src/components/user/auth-form/SocialButton.tsx (1)
1-8: LGTM: 임포트 및 타입 정의가 적절합니다.임포트와
SocialButtonProps타입 정의가 명확하고 적절하게 구현되어 있습니다. 소셜 로그인 기능에 필요한 아이콘과 타입을 잘 가져오고 있습니다.src/types/UserType.tsx (2)
3-3: 소셜 로그인 제공자 타입 추가 승인새로운
SocialLoginProvider타입의 추가는 Kakao와 Google 소셜 로그인 구현이라는 PR 목표와 잘 부합합니다. 이는 타입 안전성을 향상시키고 소셜 로그인 제공자 정의를 중앙화하여 코드의 유지보수성을 개선합니다.
9-9: User 타입의 provider 필드 수정 승인
User타입의provider필드 수정은 새로 정의된SocialLoginProvider타입을 활용하여 타입 안전성을 향상시킵니다. 'LOCAL' 옵션을 유지함으로써 이전 버전과의 호환성도 보장하고 있습니다. 이 변경사항은 PR의 목표와 일치하며 코드의 일관성을 유지합니다.src/pages/user/SignInPage.tsx (2)
6-6: LGTM: SocialButton 컴포넌트 가져오기SocialButton 컴포넌트를 가져오는 import 문이 올바르게 추가되었습니다. 이는 소셜 로그인 기능 구현이라는 PR 목표와 일치합니다.
Line range hint
1-98: 전반적인 리뷰 요약SignInPage 컴포넌트의 변경사항은 소셜 로그인 기능 구현이라는 PR의 목표를 잘 달성하고 있습니다. SocialButton 컴포넌트의 도입으로 코드의 재사용성과 유지보수성이 향상되었습니다.
주요 개선 사항:
- 소셜 로그인 버튼이 성공적으로 구현되었습니다.
- isSubmitting prop을 통해 중복 제출을 방지하고 있습니다.
추가 개선 제안:
- 소셜 로그인의 성공 및 실패에 대한 사용자 피드백 메커니즘을 추가하는 것이 좋겠습니다.
- 소셜 로그인 과정에서의 오류 처리를 강화하면 좋겠습니다.
전반적으로 잘 구현된 변경사항입니다. 제안된 개선사항을 반영하면 더욱 견고한 구현이 될 것 같습니다.
src/routes/MainRouter.tsx (4)
14-14: LGTM: SocialCallBackPage 컴포넌트 가져오기SocialCallBackPage 컴포넌트를 가져오는 import 문이 적절하게 추가되었습니다. 다른 페이지 컴포넌트 import와 일관성 있게 작성되었습니다.
49-49: LGTM: Kakao 인증 콜백 라우트 추가Kakao 소셜 로그인을 위한 콜백 라우트가 적절하게 추가되었습니다. 경로와 컴포넌트 설정이 PR 목표와 일치합니다.
50-50: LGTM: Google 인증 콜백 라우트 추가Google 소셜 로그인을 위한 콜백 라우트가 적절하게 추가되었습니다. 경로와 컴포넌트 설정이 PR 목표와 일치합니다.
14-14: 전반적인 변경 사항 검토: 소셜 로그인 기능 추가이 PR의 변경 사항은 Kakao와 Google 소셜 로그인 기능을 추가하는 PR 목표를 잘 달성하고 있습니다. 주요 변경 사항은 다음과 같습니다:
- SocialCallBackPage 컴포넌트 import 추가
- Kakao 인증 콜백 라우트 추가
- Google 인증 콜백 라우트 추가
이러한 변경 사항들은 기존 라우팅 구조에 잘 통합되어 있으며, React Router 규칙을 준수하고 있습니다. 전반적으로 변경 사항이 간결하고 목적에 부합하며, 기존 코드와 일관성을 유지하고 있습니다.
Also applies to: 49-50
src/services/authService.ts (2)
15-15: LGTM: SocialLoginProvider 타입 가져오기가 올바르게 추가되었습니다.SocialLoginProvider 타입을 가져오는 것이 새로운 socialLogin 함수와 일관성 있게 추가되었습니다. 이는 코드의 타입 안전성을 향상시키는 좋은 방법입니다.
Line range hint
1-69: PR 목표에 부합하는 변경사항입니다.이 PR의 변경사항은 소셜 로그인 기능 구현이라는 목표에 잘 부합합니다. SocialLoginProvider 타입의 추가와 socialLogin 함수의 구현은 Kakao와 Google을 통한 소셜 로그인 기능을 지원하기 위한 중요한 단계입니다.
주요 포인트:
- 코드 구조가 기존 파일의 패턴을 잘 따르고 있습니다.
- 타입 안전성이 잘 유지되고 있습니다.
- axios를 사용한 API 호출이 일관성 있게 구현되었습니다.
전반적으로 변경사항이 잘 구현되었으며, 제안된 오류 처리 개선을 고려하면 더욱 견고한 구현이 될 것 같습니다.
PR Type
What kind of change does this PR introduce?
Related Issues
What does this PR do?
View
성공
실패 (msw 엔드포인트 오류)
Other information
간단한 설명
소셜 로그인의 로직을 간단히 말씀드리면 다음과 같습니다.
client클라이언트 측에서 공급업체(카카오/구글)에 인가코드를 요청client공급업체 측에서 받은 인가코드를 백엔드에 전송server백엔드는 인가 코드를 이용해 액세스 토큰을 공급업체에서 받아옴server액세스 토큰을 이용해 공급업체에게 api 요청을 보내 유저 정보를 가져옴server만약 유저 정보가 db에 없다면(식별은 이메일로 진행 중입니다), 신규 회원가입 시키고(새로운 유저 정보를 db에 추가) 클라이언트 측에 AT, RT 공급server유저 정보가 db에 존재한다면, 로그인 유저이므로 AT, RT만 공급client백엔드에게서 받은 AT, RT로 유저의 로그인을 관리참고 자료
추가
React strict 모드의 특성상
SocialCallBackPage내부의 useEffect가 2번 실행되면서, 구글/카카오 측에 여러 번 로그인 요청이 가며 에러가 발생했습니다.이를 방지하기 위해 useRef를 이용해 렌더링을 초기 1회로 제한하는 방법을 사용했습니다.