✨ Feat: 회원 가입 폼 구현 #57
Conversation
|
""" Walkthrough이 변경 사항은 기존의 로그인 폼을 제거하고, 회원가입 폼 및 관련 유효성 검사, 제출 로직, 타입, 커스텀 훅, 스키마 등을 새롭게 추가합니다. 회원가입 폼은 입력값 검증, 비밀번호 확인, 약관 동의 체크박스, 제출 처리 기능을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SignupForm
participant useSignupSubmit
participant AuthAPI
participant Router
participant Toast
User->>SignupForm: 입력값 작성 및 제출
SignupForm->>useSignupSubmit: submit(formData)
useSignupSubmit->>AuthAPI: signup(formData)
AuthAPI-->>useSignupSubmit: 응답(성공/실패)
alt 성공
useSignupSubmit->>Toast: 성공 토스트 표시
useSignupSubmit->>Router: 로그인 페이지로 이동
else 실패
useSignupSubmit->>Toast: 에러 토스트 표시
end
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 (2)
🚧 Files skipped from review as they are similar to previous 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: 4
🧹 Nitpick comments (3)
src/app/(auth)/signup/page.tsx (1)
5-9: 불필요한 Fragment 제거 제안
<SignupForm />하나만 반환하므로 빈 Fragment(<>...</>)는 의미 없습니다. JSX 노이즈를 줄이고 가독성을 높이려면 Fragment를 삭제하고 컴포넌트를 바로 반환하세요.- return ( - <> - <SignupForm /> - </> - ) + return <SignupForm />src/app/features/auth/hooks/useConfirmPasswordValidation.ts (1)
3-9: 성능 최적화를 위한useMemo고려매 렌더마다 새로운 객체를 반환하면
react-hook-form의 내부 비교가 불필요하게 실패할 수 있습니다. 훅 내에서useMemo로 래핑하면 불필요한 재생성을 방지할 수 있습니다.-export function useConfirmPasswordValidation(getValues: () => SignupFormData) { - return { - validate: (value: string) => { - const password = getValues().password - return value === password || '비밀번호가 일치하지 않습니다' - }, - } +export function useConfirmPasswordValidation(getValues: () => SignupFormData) { + return useMemo( + () => ({ + validate: (value: string) => { + const password = getValues().password + return value === password || '비밀번호가 일치하지 않습니다' + }, + }), + [getValues], + ) }src/app/features/auth/hooks/useSignupSubmit.ts (1)
18-24: 에러 메시지 국제화 및 Fallback 개선 제안현재 토스트 메시지가 한글 문자열로 하드코딩되어 있습니다. 향후 다국어 지원을 염두에 두고 i18n 모듈(예:
next-intl,react-i18next)을 통해 메시지를 관리하면 유지보수성이 올라갑니다. 또한axios.isAxiosError(e)블록 외부의 예외 메시지도 로깅하여 디버깅에 도움이 되도록 고려해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/app/(auth)/signin/page.tsx(0 hunks)src/app/(auth)/signup/page.tsx(1 hunks)src/app/features/auth/components/SignupForm.tsx(1 hunks)src/app/features/auth/hooks/useConfirmPasswordValidation.ts(1 hunks)src/app/features/auth/hooks/useSignupSubmit.ts(1 hunks)src/app/features/auth/schemas/signupValidation.ts(1 hunks)src/app/features/auth/types/auth.type.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/(auth)/signin/page.tsx
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/app/(auth)/signup/page.tsx (1)
src/app/features/auth/components/SignupForm.tsx (1)
SignupForm(13-107)
src/app/features/auth/hooks/useConfirmPasswordValidation.ts (1)
src/app/features/auth/types/auth.type.ts (1)
SignupFormData(19-21)
src/app/features/auth/components/SignupForm.tsx (5)
src/app/features/auth/types/auth.type.ts (1)
SignupFormData(19-21)src/app/features/auth/hooks/useSignupSubmit.ts (1)
useSignupSubmit(8-28)src/app/features/auth/hooks/useConfirmPasswordValidation.ts (1)
useConfirmPasswordValidation(3-10)src/app/features/auth/schemas/signupValidation.ts (1)
signupValidation(1-23)src/app/shared/lib/cn.ts (1)
cn(4-6)
🔇 Additional comments (2)
src/app/features/auth/schemas/signupValidation.ts (1)
1-23: 검증 스키마 적절성 확인 완료필수 메시지·패턴 모두 명확하며 요구사항(이메일 형식, 8자 이상 비밀번호, 한/영 10자 닉네임)을 충족합니다.
src/app/features/auth/components/SignupForm.tsx (1)
94-101: Tailwind 클래스 네이밍 일관성 확인 필요
BG-blue/BG-blue-disabled는 일반적인 Tailwind 접두어(bg-)와 다릅니다. 프로젝트 전역 유틸 클래스라면 상관없지만, 아닌 경우 렌더링 시 의도한 색상이 적용되지 않을 수 있습니다. 클래스를 다시 확인해 주세요.
dkslel1225
left a comment
dkslel1225
left a comment
There was a problem hiding this comment.
설명 감사합니다, 폼 구현 수고하셨습니다~~! 👍✨
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
인성님 회원가입 폼 구현 수고하셨습니다!!
질문사항은 남겨두었습니다 : )
| @@ -0,0 +1,28 @@ | |||
| import axios from 'axios' | |||
| import { useRouter } from 'next/navigation' | |||
| import { toast } from 'sonner' | |||
| labelName="비밀번호" | ||
| type="password" | ||
| placeholder="8자 이상 입력해 주세요" | ||
| autoComplete="new-password" |
There was a problem hiding this comment.
이렇게 적어주면 어떻게 자동완성이 이루어지는건가용?
There was a problem hiding this comment.
아니요 그 반대 입니다!
autoComplete라는 속성은 브라우저의 자동 완성 동작을 제어하는 속성입니다.
이 중에서 new-password는 해당 입력창이 새로운 비밀번호를 설정하는 필드임을 브라우저에게 알려주게 됩니다!
이 속성을 명시 하지 않았을 경우 브라우저에서는 과거에 입력한 데이터를 기준으로 자동 완성을 띄우게 됩니다. 이러면 UX 측면으로도 혼란을 야기할 수 있기 때문에 해당 속성을 사용하게 되었습니다.
공식 문서
| type="email" | ||
| placeholder="이메일을 입력해 주세요" | ||
| autoComplete="email" | ||
| {...register('email', signupValidation.email)} |
There was a problem hiding this comment.
정확히 어느 부분을 말씀하신 건지는 파악할 수 없으나
만약 ...register를 말씀하신 거라면 기본적으로 register(name, options)를 호출해 반환된 값을 props로 전달하는 형태입니다.
이때 register의 반환 값은 { ref, name, onChange, onBlur } 형태의 객체이며 options에는 다양한 유효성 검증과 관련된 옵션이 있습니다!
만약 전체 옵션이 궁금하시다면 공식 문서를 참고하시면 됩니다!
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
회원 가입 폼 구현 고생많으셨습니다~ 설명도 자세하게 작성해주셔서 이해가 잘되네요 👍
📌 변경 사항 개요
✨ 요약
📝 상세 내용
스키마 관련
/^[a-zA-Z가-힣]-
a-z(소문자)-
A-Z(대문자)-
가-힣(한글 전체){1,10}$validatevalue)이 유효한지 검증하는 로직 정의useWatch를 사용하여 값을 추적하였으나 값이 변경될 때마다 리렌더링이 발생하는 문제가 있어getValues를 사용하여 필요한 시점에만 값을 가져와 비교하도록 구현했습니다.폼 관련(코드래빗 리뷰 반영 전)
triggergetValuesvalidate만으로는 값이 변경될 때마다 동적으로 UI가 반영 되지 않는 상황 때문에trigger를 사용하였습니다.getValues로 현재 입력된 폼 데이터를 통하여 값 비교를 했습니다.useState를 통하여 구현했습니다.🔗 관련 이슈
#54
🖼️ 스크린샷
기본
에러 발생
성공
응답
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit
신규 기능
기타