Feat(client): logout시 google 로그인 view #232
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough구글 OAuth 인증을 기반으로 새로운 로그인 페이지를 추가하고, 레이아웃과 라우팅을 수정하여 로그인 경로에서 사이드바를 숨기며, 로그아웃 시 온보딩 대신 로그인 페이지로 이동하도록 변경했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Client as Client<br/>(React App)
participant GoogleOAuth as Google<br/>OAuth
participant Server as Server<br/>(Backend)
User->>Client: 로그인 페이지 방문 또는 소셜 로그인 버튼 클릭
Client->>Client: handleGoogleLogin() 호출
Note over Client: 환경 변수에서<br/>Client ID, Redirect URI 검증
Client->>GoogleOAuth: Google OAuth 인증 URL로 리다이렉트<br/>(client_id, redirect_uri, scope)
GoogleOAuth->>User: Google 로그인 프롬프트 표시
User->>GoogleOAuth: Google 계정으로 인증
GoogleOAuth->>Client: 인증 코드와 함께 redirect_uri로 리다이렉트
Client->>Server: 인증 코드 전송 및 토큰 요청
Server->>GoogleOAuth: 코드 검증 및 토큰 획득
GoogleOAuth-->>Server: Access Token 반환
Server-->>Client: 세션/토큰 설정
Note over Client: axios 인터셉터:<br/>로그인 페이지에서는<br/>401/403 재시도 방지
Client->>Client: 앱 진입 (사이드바 표시)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
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. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Fix all issues with AI Agents 🤖
In @apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx:
- Around line 37-49: Update the two Link components in SocialLoginStep that
render "이용 약관" and "개인정보처리방침": change the first Link (the one wrapping the text
"이용 약관") so its to prop points to "/terms" instead of "/privacy", and keep the
second Link (the one wrapping "개인정보처리방침") pointing to "/privacy" so the routes
match Login.tsx.
In @apps/client/src/shared/utils/handleGoogleLogin.ts:
- Around line 12-19: The constructed googleAuthUrl in handleGoogleLogin uses raw
clientId and redirectUri which can break URLs; update the string building for
googleAuthUrl to encode clientId and redirectUri with encodeURIComponent (also
encode scope/other params if dynamic), e.g. replace direct ${clientId} and
${redirectUri} with encoded values, then assign window.location.href =
googleAuthUrl as before so the redirect URL is safe.
🧹 Nitpick comments (2)
apps/client/src/pages/login/Login.tsx (1)
10-71: 구현이 잘 되어 있습니다.새로운 로그인 페이지가 공유 유틸리티를 올바르게 사용하고 있으며, 개인정보처리방침과 이용 약관 링크가 올바르게 분리되어 있습니다.
다만, 19번째 줄의 중앙 카드에 고정된 크기(
h-[54.8rem] w-[63.2rem])가 적용되어 있습니다. 작은 화면에서는 레이아웃이 깨질 수 있으니, 필요시 반응형 스타일 적용을 고려해보세요.apps/client/src/shared/utils/handleGoogleLogin.ts (1)
8-11: 사용자 경험 개선:alert()대신 적절한 UI 피드백을 사용하세요.환경 변수 누락 시
alert()를 사용하고 있습니다. 이는 사용자 경험 측면에서 좋지 않으며, 토스트 메시지나 에러 UI 컴포넌트를 사용하는 것이 더 적절합니다.💡 개선 제안
프로젝트에서 사용 중인 토스트 알림이나 에러 모달 컴포넌트가 있다면,
alert()대신 해당 컴포넌트를 사용하는 것을 권장합니다. 예시:if (!clientId || !redirectUri) { // 토스트 알림 사용 예시 toast.error('Google OAuth 설정이 누락되었습니다.'); return; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/client/src/layout/Layout.tsxapps/client/src/pages/login/Login.tsxapps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsxapps/client/src/routes/router.tsxapps/client/src/routes/routesConfig.tsapps/client/src/shared/apis/setting/axiosInstance.tsapps/client/src/shared/components/profilePopup/ProfilePopup.tsxapps/client/src/shared/utils/handleGoogleLogin.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-15T20:00:13.756Z
Learnt from: constantly-dev
Repo: Pinback-Team/pinback-client PR: 80
File: apps/client/src/shared/components/ui/modalPop/ModalPop.tsx:36-41
Timestamp: 2025-07-15T20:00:13.756Z
Learning: In apps/client/src/shared/components/ui/modalPop/ModalPop.tsx, the InfoBox component uses hardcoded values for title, location, and icon URL as temporary test data. These should be replaced with dynamic data from props when implementing actual functionality and should be marked with TODO comments for future changes.
Applied to files:
apps/client/src/shared/components/profilePopup/ProfilePopup.tsx
🧬 Code graph analysis (2)
apps/client/src/pages/login/Login.tsx (1)
apps/client/src/shared/utils/handleGoogleLogin.ts (1)
handleGoogleLogin(1-20)
apps/client/src/routes/router.tsx (1)
apps/client/src/routes/routesConfig.ts (1)
ROUTES_CONFIG(1-30)
⏰ 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: storybook
🔇 Additional comments (6)
apps/client/src/shared/components/profilePopup/ProfilePopup.tsx (1)
42-46: 로그아웃 네비게이션이 올바르게 구현되었습니다.로그아웃 시 새로운 로그인 페이지로 이동하는 로직이 정확합니다. localStorage 정리도 적절히 수행되고 있습니다.
apps/client/src/routes/router.tsx (1)
3-3: 라우트 설정이 올바르게 추가되었습니다.Login 컴포넌트 임포트와 라우트 엔트리가 기존 패턴을 따라 정확하게 구성되었습니다.
Also applies to: 41-44
apps/client/src/routes/routesConfig.ts (1)
26-29: 라우트 설정이 일관되게 추가되었습니다.login 라우트 구성이 기존 패턴과 일치하며 올바르게 구현되었습니다.
apps/client/src/layout/Layout.tsx (1)
7-7: 사이드바 숨김 로직이 올바르게 확장되었습니다.로그인 페이지에서 사이드바를 숨기는 로직이 온보딩과 일관되게 구현되었습니다.
Also applies to: 12-12
apps/client/src/shared/apis/setting/axiosInstance.ts (2)
38-45: 로그인 페이지 체크 로직이 올바르게 구현되었습니다.로그인 페이지에서 자동 리다이렉트를 방지하는 로직이 정확하게 추가되었습니다.
38-52: 인증 오류 시 네비게이션 흐름을 확인해주세요.현재 구현에서는 다음과 같은 흐름이 생성됩니다:
- 수동 로그아웃 →
/login으로 이동 (ProfilePopup.tsx)- 앱 사용 중 401/403 오류 →
/onboarding?step=SOCIAL_LOGIN으로 이동 (line 50)- 로그인 페이지에서 401/403 오류 → 리다이렉트 없음 (현재 페이지 유지)
이러한 서로 다른 네비게이션 타겟이 의도된 UX 설계인지 확인이 필요합니다. 사용자 입장에서 수동 로그아웃과 세션 만료 시 서로 다른 페이지로 이동하는 것이 혼란을 줄 수 있습니다.
| <Link | ||
| to="/privacy" | ||
| className="underline underline-offset-2 hover:opacity-70" | ||
| > | ||
| 이용 약관 | ||
| </Link>{' '} | ||
| 및{' '} | ||
| <Link | ||
| to="/privacy" | ||
| className="underline underline-offset-2 hover:opacity-70" | ||
| > | ||
| 개인정보처리방침 | ||
| </Link> |
There was a problem hiding this comment.
링크 경로 불일치를 수정하세요.
"이용 약관"과 "개인정보처리방침" 링크가 모두 /privacy를 가리키고 있습니다. Login.tsx (50-55번째 줄)에서는 "이용 약관"이 /terms로, "개인정보처리방침"이 /privacy로 올바르게 분리되어 있습니다. 일관성을 위해 여기서도 동일하게 수정해야 합니다.
🔎 제안하는 수정 사항
<Link
- to="/privacy"
+ to="/terms"
className="underline underline-offset-2 hover:opacity-70"
>
이용 약관
</Link>{' '}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Link | |
| to="/privacy" | |
| className="underline underline-offset-2 hover:opacity-70" | |
| > | |
| 이용 약관 | |
| </Link>{' '} | |
| 및{' '} | |
| <Link | |
| to="/privacy" | |
| className="underline underline-offset-2 hover:opacity-70" | |
| > | |
| 개인정보처리방침 | |
| </Link> | |
| <Link | |
| to="/terms" | |
| className="underline underline-offset-2 hover:opacity-70" | |
| > | |
| 이용 약관 | |
| </Link>{' '} | |
| 및{' '} | |
| <Link | |
| to="/privacy" | |
| className="underline underline-offset-2 hover:opacity-70" | |
| > | |
| 개인정보처리방침 | |
| </Link> |
🤖 Prompt for AI Agents
In @apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx
around lines 37-49, Update the two Link components in SocialLoginStep that
render "이용 약관" and "개인정보처리방침": change the first Link (the one wrapping the text
"이용 약관") so its to prop points to "/terms" instead of "/privacy", and keep the
second Link (the one wrapping "개인정보처리방침") pointing to "/privacy" so the routes
match Login.tsx.
| const googleAuthUrl = | ||
| `https://accounts.google.com/o/oauth2/v2/auth?` + | ||
| `client_id=${clientId}` + | ||
| `&redirect_uri=${redirectUri}` + | ||
| `&response_type=code` + | ||
| `&scope=email profile`; | ||
|
|
||
| window.location.href = googleAuthUrl; |
There was a problem hiding this comment.
URL 파라미터를 인코딩해야 합니다.
clientId와 redirectUri를 URL에 직접 삽입하고 있지만, 특수 문자가 포함된 경우 URL이 깨지거나 보안 문제가 발생할 수 있습니다. 모든 파라미터는 encodeURIComponent()로 인코딩되어야 합니다.
🔎 제안하는 수정 사항
const googleAuthUrl =
`https://accounts.google.com/o/oauth2/v2/auth?` +
- `client_id=${clientId}` +
- `&redirect_uri=${redirectUri}` +
+ `client_id=${encodeURIComponent(clientId)}` +
+ `&redirect_uri=${encodeURIComponent(redirectUri)}` +
`&response_type=code` +
- `&scope=email profile`;
+ `&scope=${encodeURIComponent('email profile')}`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const googleAuthUrl = | |
| `https://accounts.google.com/o/oauth2/v2/auth?` + | |
| `client_id=${clientId}` + | |
| `&redirect_uri=${redirectUri}` + | |
| `&response_type=code` + | |
| `&scope=email profile`; | |
| window.location.href = googleAuthUrl; | |
| const googleAuthUrl = | |
| `https://accounts.google.com/o/oauth2/v2/auth?` + | |
| `client_id=${encodeURIComponent(clientId)}` + | |
| `&redirect_uri=${encodeURIComponent(redirectUri)}` + | |
| `&response_type=code` + | |
| `&scope=${encodeURIComponent('email profile')}`; | |
| window.location.href = googleAuthUrl; |
🤖 Prompt for AI Agents
In @apps/client/src/shared/utils/handleGoogleLogin.ts around lines 12-19, The
constructed googleAuthUrl in handleGoogleLogin uses raw clientId and redirectUri
which can break URLs; update the string building for googleAuthUrl to encode
clientId and redirectUri with encodeURIComponent (also encode scope/other params
if dynamic), e.g. replace direct ${clientId} and ${redirectUri} with encoded
values, then assign window.location.href = googleAuthUrl as before so the
redirect URL is safe.
| originalRequest.url?.includes(url) | ||
| ); | ||
|
|
||
| const isLoginPage = window.location.pathname.startsWith('/login'); |
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
현재 토큰이 없을 시 온보딩의 소셜로그인 스텝으로 이동 되고 있습니다.
이 pr에서 로그아웃시 이동 되는 로그인뷰가 추가되었는데 토큰 없을시 이동 되는 뷰를 온보딩에서 로그인 페이지로 변경하는건 어떤가요?
📷 Screenshot
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선사항
✏️ Tip: You can customize this high-level summary in your review settings.