feat:회원가입 기능 구현

[moo1677]

1) 작업한 이슈번호

1

2) 변경 요약 (What & Why)

• 무엇을 변경했는지: 회원가입 기능구현
• 왜 변경했는지(문제/목표):

3) 스크린샷/동영상 (UI 변경 시)

전/후 비교, 반응형(모바일/데스크톱) 캡쳐

• Before:
• After:

4) 상세 변경사항

• 라우팅/페이지:
• 컴포넌트:
• 상태관리:
• API 호출:
• 스타일:
• 기타:

5) 참고사항

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 회원가입 양식의 오류 검증 및 표시 기능 강화
  • 닉네임, 이메일, 비밀번호 필드 검증 추가
  • 회원 정보 저장 및 프로필 자동 생성
  • 이메일 중복 등록 감지 및 안내 메시지 제공

• 개선사항

  • 양식 필드의 오류 처리 및 사용자 피드백 개선
  • 불필요한 로깅 제거

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

회원가입 폼 컴포넌트를 단일 파일에서 모듈 구조로 재구성하고, FormField의 에러 처리 로직을 업데이트했으며, 새로운 Firebase 기반 회원가입 API 및 폼 검증 로직을 추가했습니다.

Changes

Cohort / File(s)	변경 사항
SignupForm 재구조화 app/(auth)/signup/page.tsx, components/auth/SignupForm.tsx	임포트 경로를 @/components/auth/SignupForm에서 @/components/auth/SignupForm/SignupForm으로 변경하고, 원본 SignupForm.tsx에서 컴포넌트를 제거한 후 새로운 모듈 구조로 이동
FormField 에러 처리 개선 components/auth/FormField.tsx	Props 타입을 FieldProps에서 Props로 변경 (type 속성 제거, error와 showError 속성 추가), 에러 메시지 렌더링 및 aria 속성 추가, 조건부 에러 스타일링 적용
SignupForm 새 구현 components/auth/SignupForm/SignupForm.tsx, components/auth/SignupForm/useSignupForm.tsx, components/auth/SignupForm/signup.api.ts, components/auth/SignupForm/validators.ts	useSignupForm 훅으로 폼 상태 및 검증 관리, Firebase 회원가입 API 구현, 필드별 검증 함수 (닉네임, 이메일, 비밀번호) 추가
기타 개선 components/auth/LoginForm.tsx	깃허브 로그인 에러 핸들링에서 console 로깅 제거

Sequence Diagram

sequenceDiagram
    participant User
    participant SignupForm as SignupForm<br/>(Component)
    participant useSignupForm as useSignupForm<br/>(Hook)
    participant Validators as Validators
    participant FirebaseAPI as Firebase API
    participant Firestore as Firestore
    participant Router as Next.js Router

    User->>SignupForm: 입력 (닉네임, 이메일, 비밀번호)
    SignupForm->>useSignupForm: 폼 상태 업데이트
    useSignupForm->>Validators: 각 필드 검증
    Validators-->>useSignupForm: 검증 결과
    User->>SignupForm: 회원가입 버튼 클릭
    SignupForm->>FirebaseAPI: signupWithEmail(nickname, email, password)
    FirebaseAPI->>FirebaseAPI: createUserWithEmailAndPassword
    FirebaseAPI->>FirebaseAPI: updateProfile(displayName)
    FirebaseAPI->>Firestore: users/{uid} 문서 작성
    Firestore-->>FirebaseAPI: 완료
    FirebaseAPI-->>SignupForm: user 객체 반환
    SignupForm->>User: 성공 알림
    SignupForm->>Router: /login으로 이동

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: 비밀번호 재설정 모달 구현 #11: FormField 컴포넌트의 공개 Props 인터페이스와 검증 동작을 변경하는 직접적인 관련성
• feat: 회원가입 페이지 UI 구현 #4: 회원가입 UI 컴포넌트 구조를 다루는 이전 PR로, FormField 및 SignupForm의 기초 구현
• feat: 로그인 기능 구현 #18: LoginForm.tsx의 에러 핸들링 로직(console 로깅)을 동일하게 수정

Poem

🐰 폼이 분산되니 모듈로 정렬하고,
검증자들이 오류를 잡아주니 안심이 되고,
Firebase와 Firestore 손을 잡아
회원가입의 새 길을 만들었네.
에러 메시지는 이제 말할 자리 있고,
사용자는 로그인 페이지로 솔솔 걸어간다! 🎉

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f2d90b4 and c1c675e.

📒 Files selected for processing (8)

• app/(auth)/signup/page.tsx
• components/auth/FormField.tsx
• components/auth/LoginForm.tsx
• components/auth/SignupForm.tsx
• components/auth/SignupForm/SignupForm.tsx
• components/auth/SignupForm/signup.api.ts
• components/auth/SignupForm/useSignupForm.tsx
• components/auth/SignupForm/validators.ts

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}