✨Feat: 로그인 페이지 구현 #65
Conversation
Insung-Jo
added
✨Feat
|
""" Walkthrough로그인 플로우와 레이아웃 구조가 전면적으로 리팩토링되었습니다. 로그인 관련 커스텀 훅이 삭제되고, React Query 기반의 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginForm
participant useLoginMutation
participant login API
participant useAuth
participant Router
User->>LoginForm: 로그인 폼 제출
LoginForm->>useLoginMutation: loginMutate(form data)
useLoginMutation->>login API: 로그인 요청
login API-->>useLoginMutation: 응답 (accessToken, user)
useLoginMutation->>useAuth: updateAuthState(response)
useLoginMutation->>LoginForm: 성공 토스트 표시
useLoginMutation->>Router: /mydashboard로 이동
Possibly related PRs
Suggested reviewers
Poem
""" Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 6
🧹 Nitpick comments (7)
src/app/globals.css (1)
70-72: 다크 모드 대비 색상 지정 누락
.Text-violet클래스는 라이트 모드(#228DFF)만 지정되어 있어 다크 모드에서 동일한 색상을 유지하지 못합니다. 다른 텍스트 유틸리티(Text-black,Text-gray등)는dark:변수를 함께 사용하니 일관성을 맞춰 주세요..Text-violet { - @apply text-[#228DFF]; + @apply text-[#228DFF] dark:text-[#228DFF]; }src/app/(auth)/layout.tsx (1)
1-5: 컴포넌트 명칭 혼동 가능성
(auth)/layout.tsx에 위치하지만 컴포넌트명이DashboardLayout입니다. 인증 레이아웃이라는 의도가 드러나지 않으니AuthLayout과 같이 폴더 구조와 맞춰주면 가독성이 높아집니다.src/app/(auth)/login/page.tsx (1)
9-13: 마운트 체크 필요성 재검토SSR → CSR hydration 불일치(FOUC) 방지 목적이라면 OK입니다. 다만 본 컴포넌트 내부에서는
window접근이 없으므로,AuthLogo내부useTheme로 인한 깜빡임만 해결하려는 것이라면AuthLogo에서mounted처리하거나suppressHydrationWarning속성을 사용하는 방법도 고려해 보세요.src/app/features/auth/hooks/useLoginMutaion.ts (2)
18-20: 토스트 표시 지연 로직 개선
setTimeout으로 임의 지연을 두면 테스트 코드나 사용자 네트워크 환경에 따라 UX 가 달라집니다.toast.success의 Promise 반환값 또는 react-queryonSettled에서 라우팅하는 방식이 더 의도에 맞습니다.
22-27: Axios 에러 메시지 경로 불안정
error.response?.data?.message경로가 백엔드 구조 변경 시 깨질 수 있습니다. 스키마가 보장되지 않으면 fallback 을 조금 더 구체화하거나 i18n 키를 사용하세요.src/app/features/auth/components/LoginForm.tsx (1)
51-58: 클래스 토글 로직 간결화 가능
isValid && !isSubmitting && !isPending조건을 두 곳에서 각각 사용하고 있어 중복됩니다.const disabled = !isValid || isSubmitting || isPending처럼 변수로 뽑아 재사용하면 가독성과 유지보수성이 좋아집니다.src/app/features/auth/hooks/useAuth.ts (1)
10-19:updateAuthState메모이제이션 고려
updateAuthState가 컴포넌트마다 새로 정의되어 전달되면, 이를 의존성으로 갖는 훅/컴포넌트들이 불필요하게 리렌더링될 수 있습니다.useCallback으로 감싸거나 store 쪽에 메서드를 옮기는 방안을 검토해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/app/(auth)/layout.tsx(1 hunks)src/app/(auth)/login/page.tsx(1 hunks)src/app/features/auth/api/authApi.ts(1 hunks)src/app/features/auth/components/LoginForm.tsx(3 hunks)src/app/features/auth/hooks/useAuth.ts(2 hunks)src/app/features/auth/hooks/useLoginMutaion.ts(1 hunks)src/app/features/auth/hooks/useLoginSubmit.ts(0 hunks)src/app/globals.css(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/features/auth/hooks/useLoginSubmit.ts
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/app/(auth)/login/page.tsx (2)
src/app/features/auth/components/AuthLogo.tsx (1)
AuthLogo(11-30)src/app/features/auth/components/LoginForm.tsx (1)
LoginForm(11-63)
src/app/features/auth/hooks/useLoginMutaion.ts (2)
src/app/features/auth/hooks/useAuth.ts (1)
useAuth(7-35)src/app/features/auth/api/authApi.ts (1)
login(7-10)
src/app/features/auth/components/LoginForm.tsx (3)
src/app/features/auth/hooks/useLoginMutaion.ts (1)
useLoginMutaion(9-30)src/app/features/auth/schemas/loginValidation.ts (1)
loginValidation(1-16)src/app/shared/lib/cn.ts (1)
cn(4-6)
src/app/features/auth/hooks/useAuth.ts (2)
src/app/features/auth/store/useAuthStore.ts (1)
useAuthStore(5-20)src/app/shared/types/user.type.ts (1)
User(1-8)
🔇 Additional comments (3)
src/app/features/auth/api/authApi.ts (1)
4-5: 변경 사항 이상 없음타입 import 순서만 조정되었습니다. 기능적 문제 없습니다.
src/app/features/auth/components/LoginForm.tsx (1)
24-25: react-query 버전에 따른 상태 플래그 확인 필요
useMutation이 반환하는 상태 값은 v4 기준isLoading, v5 기준isPending입니다. 프로젝트에서 사용하는 react-query 버전을 확인해 맞지 않으면 런타임 오류가 발생합니다.const { mutate: loginMutate, isLoading } = useLoginMutation()처럼 수정하거나 패키지 버전을 v5 이상으로 명시해 주세요.
src/app/features/auth/hooks/useAuth.ts (1)
25-28: 스토리지 초기화 비동기 여부 확인
useAuthStore.persist.clearStorage()가 Promise 를 반환할 경우 await 없이 호출하면 제거 순서 보장이 안 됩니다. 반환 타입을 확인해 필요하면await처리 후 후속 로직(예: redirect) 을 수행하세요.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/app/features/auth/hooks/useLoginMutation.ts (1)
16-21:setTimeout-기반 대기는 컴포넌트 언마운트 시 메모리 누수를 유발할 수 있습니다
await new Promise로 400 ms 대기하는 동안 해당 컴포넌트가 언마운트되면 불필요한 라우팅 시도가 발생할 수 있습니다. 토스트 기본 지속 시간을 활용하거나router.push직후toast.success의duration옵션을 조정하는 방식이 더 안전합니다.- toast.success('로그인 성공') - await new Promise((resolve) => setTimeout(resolve, 400)) - router.push('/mydashboard') + toast.success('로그인 성공', { duration: 400 }) + router.push('/mydashboard')
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/features/auth/components/LoginForm.tsx(3 hunks)src/app/features/auth/hooks/useLoginMutation.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/features/auth/components/LoginForm.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/app/features/auth/hooks/useLoginMutation.ts (3)
src/app/features/auth/hooks/useAuth.ts (1)
useAuth(7-35)src/app/features/auth/types/auth.type.ts (2)
LoginResponse(8-11)LoginRequest(3-6)src/app/features/auth/api/authApi.ts (1)
login(7-10)
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
react-query 사용하여 로직 변경해주셨네용 👍
인성님 로그인 페이지 구현 수고많으셨습니다~
| import { showError, showSuccess } from '@lib/toast' | ||
| import { useMutation } from '@tanstack/react-query' | ||
| import type { AxiosError } from 'axios' | ||
| import axios from 'axios' | ||
| import { useRouter } from 'next/navigation' | ||
|
|
||
| import { login } from '../api/authApi' | ||
| import { LoginRequest, LoginResponse } from '../types/auth.type' | ||
| import { useAuth } from './useAuth' | ||
|
|
||
| export function useLoginMutation() { | ||
| const router = useRouter() | ||
| const { updateAuthState } = useAuth() | ||
|
|
||
| return useMutation<LoginResponse, AxiosError | Error, LoginRequest>({ | ||
| mutationFn: login, | ||
| onSuccess: async (response) => { | ||
| updateAuthState(response) | ||
| showSuccess('로그인에 성공하셨습니다!') | ||
| await new Promise((resolve) => setTimeout(resolve, 400)) | ||
| router.push('/mydashboard') | ||
| }, | ||
| onError: (error) => { | ||
| if (axios.isAxiosError(error)) { | ||
| const severMessage = ( | ||
| error.response?.data as { message?: string } | undefined | ||
| )?.message | ||
| const fallback = error.message || '로그인 실패' | ||
| showError(severMessage ?? fallback) | ||
| } else { | ||
| showError('알 수 없는 에러 발생') | ||
| } | ||
| }, | ||
| }) | ||
| } |
There was a problem hiding this comment.
react-query 사용하여 함수 작성해주셨군용!!
이전 코드 대비 어떤 장점이 있는 지 알 수 있을까용
There was a problem hiding this comment.
우선 일관성의 목적으로 기존 try-catch에서 바꾸게 되었습니다! 현재 적용 해봤을 때 느낄 수 있는 장점은 우선 가독성 측면에서도 분리가 되어있어서 코드를 이해할 때 수월하고 react-qurey에서 쿼리의 실행 여부를 알 수 있는 isPending이 존재 하는데 그것을 이용해서 조건부 UI를 다룰 때 장점이 있었던 거 같습니다!
📌 변경 사항 개요
✨ 요약
📝 상세 내용
Text-violet이 추가 되었습니다!useAuth
useAuth는react-qurey를 사용하게 되면서 상태만 관리하도록 변경하였습니다. (기존에는 api 호출도 useAuth에 포함되어 있었습니다.)useLoginSubmit -> useLoginMutaion
axios + try/catch를 사용한 부분을react-qurey를 사용하면서 파일명도 변경 되었습니다.mutationFnawait처리)onSuccessonErrorawait new Promise((resolve) => setTimeout(resolve, 400))이 부분은 테스트로 토스트를 사용 했을 때 보이기도 전에 페이지 이동으로 인해 보이지 않았던 현상이 있었기 때문에 약간의 딜레이를 추가했습니다.🔗 관련 이슈
#58
🖼️ 스크린샷
White
Dark
로그인 시
✅ 체크리스트
💡 참고 사항
login_v2로 만들어서 작업했습니다 흑흑Summary by CodeRabbit
신규 기능
useLoginMutation)이 추가되었습니다.DashboardLayout)이 도입되어 인증 페이지의 UI가 개선되었습니다..Text-violet)가 추가되었습니다.버그 수정
리팩터링
useLoginSubmit)이 제거되었습니다.