[FEAT] 로그인 api 연동 #50
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 45 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough인증 토큰 저장소와 Axios API 계층, React Query 설정을 추가했습니다. 로그인·로그아웃 mutation과 토큰 재발급을 연결하고, PublicRoute·ProtectedRoute로 라우트를 분리했습니다. 도미토리 검증 API 경로와 로그인 오류 처리를 변경하고 기존 프로필 폼을 삭제했습니다. Changes인증 기반 및 API 연동
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/api/queryClient.ts`:
- Around line 5-9: Update shouldRetry to distinguish Axios HTTP statuses
explicitly: never retry Axios 4xx responses, retry Axios 5xx responses only
within the existing failure-count limit, and preserve the fallback behavior for
errors without a response status. Use isAxiosError and the extracted status as
the condition boundary.
In `@src/pages/login/LoginPage.tsx`:
- Around line 24-32: Update the onSubmit error handler to display a user-facing
fallback message when the Axios error lacks response data or its message;
otherwise preserve and show the server-provided message. Keep the change scoped
to the existing isAxiosError handling and alert call.
In `@src/stores/useAuthStore.ts`:
- Around line 12-27: Update the persist configuration in the auth store so
refreshToken is excluded from browser persistence, and keep only the access
token in memory or the existing non-persisted state as appropriate. Adjust
partialize and related token initialization or update logic around setTokens and
clearAuth to ensure refreshToken is managed through Secure, HttpOnly, SameSite
cookies rather than local browser storage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: ace44baa-51f2-408e-bcb1-78012ee46cb9
📒 Files selected for processing (16)
src/App.tsxsrc/api/auth/api.tssrc/api/auth/query.tssrc/api/dormitory/dormVerification.tssrc/api/instance.tssrc/api/queryClient.tssrc/hooks/useSubmitDormVerification.tssrc/pages/login/LoginPage.tsxsrc/pages/mypage/settings/SettingsPage.tsxsrc/pages/signup/components/ProfileForm.tsxsrc/routes/ProtectedRoute.tsxsrc/routes/PublicRoute.tsxsrc/routes/router.tsxsrc/stores/useAuthStore.tssrc/types/api.tssrc/types/auth/auth.ts
💤 Files with no reviewable changes (1)
- src/pages/signup/components/ProfileForm.tsx
| persist( | ||
| (set) => ({ | ||
| accessToken: null, | ||
| refreshToken: null, | ||
|
|
||
| setTokens: ({ accessToken, refreshToken }) => | ||
| set({ accessToken, refreshToken }), | ||
| clearAuth: () => set({ accessToken: null, refreshToken: null }), | ||
| }), | ||
| { | ||
| name: "auth", | ||
| partialize: ({ accessToken, refreshToken }) => ({ | ||
| accessToken, | ||
| refreshToken, | ||
| }), | ||
| } |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# persist 저장소 설정과 refresh token 사용 지점을 확인합니다.
rg -n -C 3 'persist\(|createJSONStorage|storage:|refreshToken' srcRepository: Leets-Official/TDD-FE
Length of output: 2497
Refresh token을 브라우저 저장소에 영구 보관하지 마세요.
storage가 없는 persist 설정은 access/refresh token을 브라우저 저장소에 보관합니다. XSS가 발생하면 토큰이 모두 탈취될 수 있으므로, refresh token은 Secure·HttpOnly·SameSite 쿠키로 관리하고 access token도 가능한 한 메모리에서만 사용하세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/stores/useAuthStore.ts` around lines 12 - 27, Update the persist
configuration in the auth store so refreshToken is excluded from browser
persistence, and keep only the access token in memory or the existing
non-persisted state as appropriate. Adjust partialize and related token
initialization or update logic around setTokens and clearAuth to ensure
refreshToken is managed through Secure, HttpOnly, SameSite cookies rather than
local browser storage.
yewon20804
left a comment
yewon20804
left a comment
There was a problem hiding this comment.
완전 수고 많으셨어요 👏 API연동을 위한 세팅하느랴 고생 많으셨숩니다 ! 에러 처리를 공통으로 진행하면 좋을 것 같아서 다음과 같이 추가하면 사용처에서 경고 문구만 상황에 맞게(alert, toast..) 나타나게 하면 좋을 것 같아유 👍✨
// types/ api.ts
export interface ApiFieldError {
field: string;
message: string;
}
export interface ApiErrorResponse {
success: false;
message: string;
data?: {
fieldErrors?: ApiFieldError[];
};
}
// api/ error.ts
import { isAxiosError } from "axios";
import type { ApiErrorResponse } from "@/types/api";
export const getApiErrorMessage = (error: unknown, fallback: string) => {
if (isAxiosError<ApiErrorResponse>(error)) {
return error.response?.data?.message ?? fallback;
}
return fallback;
};
이미 연동한 로그인 페이지에서는
onError: (error) => {
alert(getApiErrorMessage(error, LOGIN_FAILED_MESSAGE));
},
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/api/error.ts`:
- Around line 11-12: Update the Axios error handling in the isAxiosError branch
of src/api/error.ts so error.response?.data?.message uses fallback when it is
empty or contains only whitespace, not only when it is nullish. Preserve
non-empty server messages and the existing fallback behavior.
In `@src/api/queryClient.ts`:
- Around line 5-11: Update shouldRetry to detect Axios cancellation errors via
ERR_CANCELED or axios.isCancel(...), and return false before classifying
response-less errors as retryable. Preserve the existing retry behavior for
non-cancellation Axios errors and the failureCount < 1 limit.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: f48bfc97-e725-4ead-8ea3-3cde634c5ef7
📒 Files selected for processing (5)
src/api/error.tssrc/api/queryClient.tssrc/constants/errorMessage.tssrc/pages/login/LoginPage.tsxsrc/types/api.ts
2 participants
📍PR 유형 (하나 이상 선택)
resolves #49
👩🏻💻 작업 사항
인스턴스 분리: 토큰이 필요 없는
publicInstance과 필요한authInstance로 분리interceptor
authInstance에Authorization: Bearer자동 첨부isRetried플래그로 재시도 무한 루프 차단zustand+persist로 accessToken / refreshToken 관리react-query 기본 설정
ProtectedRoute: 토큰 없으면/login으로 이동PublicRoute: 토큰 있으면/home으로 이동 (온보딩·로그인·회원가입·비밀번호 재설정에 적용)로그인 성공 시 토큰 저장 후 홈으로 이동, 요청 중 제출 버튼 비활성화
로그아웃은 API 실패 여부와 관계없이 클라이언트 토큰을 정리하고 쿼리 캐시 제거 (
onSettled)ProtectedRoute가 로그인 페이지로 보냄📸 스크린샷
📢 기타(공유 사항)
alert으로 구현해뒀습니다! 디자인과 논의하여 실패 메세지 어떻게 띄울지 정해야할 것 같습니다Summary by CodeRabbit