✨Feat: 회원가입 페이지 구현 #69
Conversation
|
""" Walkthrough로그인 및 회원가입 페이지에서 클라이언트 마운트 감지를 위한 로직이 커스텀 훅 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SignupPage
participant SignupForm
participant useSignupMutation
participant API
participant Toast
participant Router
User->>SignupPage: 페이지 접속
SignupPage->>SignupForm: 렌더링 (useMounted로 마운트 확인)
User->>SignupForm: 폼 입력 후 제출
SignupForm->>useSignupMutation: signupMtate(formData) 호출
useSignupMutation->>API: signup API 요청
API-->>useSignupMutation: 응답 (성공/실패)
alt 성공
useSignupMutation->>Toast: 성공 토스트 표시
useSignupMutation->>Router: 로그인 페이지로 이동
else 실패
useSignupMutation->>Toast: 에러 메시지 토스트 표시
end
Possibly related PRs
Suggested labels
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 (2)
✅ Files skipped from review due to trivial changes (2)
✨ 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: 1
🧹 Nitpick comments (5)
src/app/shared/hooks/useMounted.ts (1)
3-10: 함수 반환 타입 명시로 가독성 및 타입 안정성 향상 제안현재
useMounted훅은 반환 타입을 명시하지 않아도 타입 추론이 가능하지만, 공용 훅인 만큼 명시적으로boolean을 반환한다고 선언해 두면 IDE-상 가독성과 재사용 시 안정성이 높아집니다.-export function useMounted() { +export function useMounted(): boolean {src/app/features/auth/components/LoginForm.tsx (1)
27-30: onSubmit 핸들러 간결화 제안
react-hook-form의handleSubmit은 콜백에formData를 넘겨 주므로, 래퍼 화살표 함수 없이 바로loginMutate를 전달해도 동일하게 동작합니다. 매 렌더마다 새 함수를 생성하지 않아도 되므로 미세하지만 불필요한 렌더 비용을 줄일 수 있습니다.- onSubmit={handleSubmit((data) => loginMutate(data))} + onSubmit={handleSubmit(loginMutate)}src/app/(auth)/signup/page.tsx (1)
15-22: UX 문구 국제화(I18N)·접근성(A11Y) 대비 고려고정 한국어 문구가 하드코딩되어 있습니다. 프로젝트 전반에 I18N을 고려하고 있다면, 해당 텍스트를 메시지 리소스 파일로 분리해 주세요. 또한
<p>안의 링크가 색상만으로 구분되는 경우 저시력 사용자를 위해 추가적인 시각적 피드백(밑줄 유지 등)이 필요합니다.src/app/features/auth/hooks/useSignupMutation.ts (1)
23-31: 오타 및 사용자 메시지 불일치
onError블록에서
severMessage→serverMessage철자 오류가 있습니다.- 실패 토스트가
"로그인 실패"로 표기되어 회원가입 컨텍스트와 맞지 않습니다.- const severMessage = ( + const serverMessage = ( ... - const fallback = error.message || '로그인 실패' + const fallback = error.message || '회원가입 실패' - showError(severMessage ?? fallback) + showError(serverMessage ?? fallback)src/app/features/auth/components/SignupForm.tsx (1)
31-32: 변수명 오타 – 가독성 저하
signupMtate→signupMutate등 의미가 명확한 이름으로 수정하면 가독성이 향상됩니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/app/(auth)/login/page.tsx(1 hunks)src/app/(auth)/signup/page.tsx(1 hunks)src/app/features/auth/components/LoginForm.tsx(1 hunks)src/app/features/auth/components/SignupForm.tsx(4 hunks)src/app/features/auth/hooks/useAuth.ts(0 hunks)src/app/features/auth/hooks/useSignupMutation.ts(1 hunks)src/app/features/auth/hooks/useSignupSubmit.ts(0 hunks)src/app/shared/hooks/useMounted.ts(1 hunks)src/app/shared/types/user.type.ts(1 hunks)
💤 Files with no reviewable changes (2)
- src/app/features/auth/hooks/useAuth.ts
- src/app/features/auth/hooks/useSignupSubmit.ts
🧰 Additional context used
🧠 Learnings (1)
src/app/features/auth/components/SignupForm.tsx (1)
Learnt from: Insung-Jo
PR: CoPlay-FE/coplan#57
File: src/app/features/auth/hooks/useSignupSubmit.ts:12-0
Timestamp: 2025-06-16T09:44:38.218Z
Learning: In src/app/features/auth/hooks/useSignupSubmit.ts, the developer intentionally uses SignupRequest type instead of SignupFormData for the submit function parameter to prevent sending unnecessary confirmPassword field to the API, aligning the function signature with server expectations.
🧬 Code Graph Analysis (1)
src/app/(auth)/login/page.tsx (1)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)
🔇 Additional comments (3)
src/app/shared/types/user.type.ts (1)
6-7:createdAt/updatedAt필수화에 따른 호환성 검증 필요두 필드를 선택형(
?)에서 필수로 변경하면
- 서버 응답(JSON)에서 해당 필드가 누락될 경우 런타임 오류가 발생할 수 있고
- 기존 코드베이스에서
Partial<User>등을 사용하던 부분이 컴파일 에러로 이어질 수 있습니다.PR 범위를 넘어서는 영향도가 있으므로, 다음을 확인해 주세요.
- BE 계약 또는 Mock 데이터가 두 필드를 항상 포함하는지.
- 전체 레포에서
User객체 생성·파싱 지점을 빌드 시점에 스캔해 타입 오류가 없는지.필요 시
Pick,Omit등 별도 타입을 도입해 단계적 마이그레이션을 고려해 주세요.src/app/(auth)/signup/page.tsx (1)
3-12: 경로 별칭@hooks사용 시 tsconfig 경로 매핑 누락 여부 확인
@hooks/useMounted별칭을 도입했지만tsconfig.json의paths에 해당 매핑이 없으면
로컬 IDE/빌드 환경과 CI 환경 간 차이로 컴파일 실패가 발생할 수 있습니다.
별칭이 이미 선언되어 있다면 무시하셔도 됩니다.src/app/(auth)/login/page.tsx (1)
3-12:useMounted적용 LGTM기존 로컬 상태/이펙트 코드를 훅으로 추출해 중복을 제거한 점 👍
추가 이슈는 없습니다.
dkslel1225
left a comment
dkslel1225
left a comment
There was a problem hiding this comment.
회원가입 페이지 구현 고생하셨습니다! 머지하면 저도 마운트 공통 함수로 교체해야겠네용
| import { useEffect, useState } from 'react' | ||
|
|
||
| export function useMounted() { | ||
| const [mounted, setMounted] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| setMounted(true) | ||
| }, []) | ||
|
|
||
| return mounted | ||
| } |
📌 변경 사항 개요
✨ 요약
signup로직 제거useMounted구현📝 상세 내용
useAuth에 있는signup로직이 제거 되었습니다.useMounted훅 구현 했습니다.useSignupMutation
useMounted
🔗 관련 이슈
#68
🖼️ 스크린샷
White + Error
Dark
제출 시(중복 이메일)
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit
Summary by CodeRabbit
useSignupMutation)과 마운트 상태를 확인하는 훅(useMounted)이 추가되었습니다.AuthLogo)와 하단에 로그인 링크가 추가되었습니다.User)에서createdAt,updatedAt필드가 필수값으로 변경되었습니다.