Fix/122 회원가입 비밀번호 확인 오류 및 팝업 오류 개선

[minimo-9]

📌 변경 사항 개요

회원가입 비밀번호 확인 오류 및 팝업 오류 개선

📝 상세 내용

비밀번호 확인에서 다른 번호를 입력해도 가입 되던 부분을 수정, 백엔드에서 따로 검증 부분이 없어 그대로 가입됨, 프론트에서 해결해야하는 상황
수동 검증을 통해서 비밀번호가 다를 시 submit이 안되게 변경
팝업과 submit 동시에 요청이 되어 팝업이 꺼지지 않는 현상이 있음, 팝업 버튼에 오토 포커스를 통해서 팝업 버튼 우선으로 변경하여 처리

🔗 관련 이슈

• [fix] 회원가입 비밀번호 확인 검증 오류 #122

🖼️ 스크린샷(선택사항)

💡 참고 사항

Summary by CodeRabbit

• 버그 수정
  • 회원가입 폼에서 입력값 검증 및 제출 처리 방식이 개선되어, 입력값이 모두 올바른 경우에만 제출이 가능합니다.
  • 알림 팝업에서 "확인" 버튼이 자동으로 포커스를 받아 키보드로 바로 조작할 수 있습니다.

[coderabbitai]

Walkthrough

회원가입 폼의 유효성 검사 및 제출 로직이 명시적으로 리팩토링되었습니다. 기존에는 버튼 비활성화와 제출이 에러 메시지 및 필드 입력 여부에 따라 자동으로 처리되었으나, 이제는 별도의 검증 함수와 제출 핸들러를 통해 모든 필드의 유효성을 확인하고, 유효할 때만 제출이 진행됩니다. 또한, 팝업 컴포넌트의 알림형 팝업에서 확인 버튼에 자동 포커스가 추가되었습니다.

Changes

Cohort / File(s)	Change Summary
SignupForm 리팩토링 src/app/(non-header)/signup/components/SignupForm.tsx	회원가입 폼의 유효성 검사 및 제출 로직을 명확하게 분리 및 중앙화. 별도의 검증 함수와 제출 핸들러 도입.
팝업 UI 개선 src/components/Popup.tsx	알림형 팝업에서 확인 버튼에 autoFocus 속성 추가.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SignupForm
    participant formAction

    User->>SignupForm: 입력 및 제출 시도
    SignupForm->>SignupForm: handleSubmit 호출 (onSubmit)
    SignupForm->>SignupForm: validateAll()로 모든 필드 검증
    alt 모든 필드 입력 및 유효
        SignupForm->>formAction: formAction(form data) 호출
    else 입력 누락 또는 유효성 실패
        SignupForm->>SignupForm: 에러 상태 업데이트 및 제출 중단
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• [fix] 회원가입 비밀번호 확인 검증 오류 #122: 회원가입 폼의 유효성 검사 및 제출 로직 중앙화가 비밀번호 확인 검증 오류 수정과 직접적으로 연관됨.

Suggested labels

✨ Feature

Suggested reviewers

• evaain706

Poem

🐇
폼 검증 hop! hop!
에러는 이제 stop!
제출 전 꼼꼼히 체크,
팝업 버튼엔 포커스 척척!
개발자도 사용자도
한결 더 행복해진 밤,
토끼도 깡총깡총 박수 짝!

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 214c0a8 and a086da7.

📒 Files selected for processing (2)

• src/app/(non-header)/signup/components/SignupForm.tsx (4 hunks)
• src/components/Popup.tsx (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/app/(non-header)/signup/components/SignupForm.tsx (2)

src/utils/validateInput.ts (4)

• validateEmail (33-33)
• validateNickname (34-34)
• validatePassword (35-35)
• validatePasswordConfirmation (36-36)

src/app/(non-header)/signup/page.tsx (1)

• SignupPage (3-5)

🔇 Additional comments (6)

src/components/Popup.tsx (1)

70-70: 팝업 버튼 우선순위 개선이 적절합니다.

autoFocus 속성 추가로 알림 팝업 표시 시 확인 버튼에 자동으로 키보드 포커스가 설정되어, 폼 제출과 팝업 요청이 동시에 발생할 때 팝업 버튼 상호작용을 우선시하는 문제가 해결됩니다.

src/app/(non-header)/signup/components/SignupForm.tsx (5)

63-71: 비밀번호 확인 검증 로직이 올바르게 구현되었습니다.

모든 필드 검증을 중앙화한 validateAll 함수가 적절히 구현되어, 비밀번호와 비밀번호 확인이 일치하지 않을 때 검증 오류를 반환합니다. 이는 PR 목표인 백엔드 검증 없이 프론트엔드에서 비밀번호 불일치 문제를 해결하는 핵심 로직입니다.

---

73-79: 헬퍼 함수들이 명확하고 재사용 가능합니다.

hasErrors와 isAllFilled 함수는 검증 상태와 입력 완성도를 명확히 확인하며, disabled 상태 계산이 이해하기 쉽게 구성되었습니다. 코드 가독성과 유지보수성이 향상되었습니다.

---

102-116: 폼 제출 처리 로직이 안전하게 구현되었습니다.

handleSubmit 함수가 다음 절차를 올바르게 수행합니다:

1. 기본 폼 제출 동작 방지
2. 전체 필드 검증 실행 및 오류 상태 업데이트
3. 유효성 검사 통과 시에만 서버 액션 호출

이는 비밀번호 확인 불일치 시 폼 제출을 방지하는 핵심 개선사항입니다.

---

154-154: 폼 제출 방식 변경이 적절합니다.

action 속성을 onSubmit 핸들러로 변경하여 커스텀 검증 로직을 통한 제출 제어가 가능해졌습니다. 이는 클라이언트 사이드 검증을 먼저 수행한 후 서버 액션을 호출하는 올바른 패턴입니다.

---

225-225: 버튼 비활성화 상태가 새로운 검증 로직과 일치합니다.

업데이트된 disabled 변수를 사용하여 버튼 상태가 새로운 검증 및 완성도 확인 로직과 일관성을 유지합니다.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/122

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[BokyungCodes]

이제 로그인, 회원가입 기능 달인이 되셨네요,,😂

[evaain706]

수정수고하셨습니다! autoFocus로 해결이 가능한 문제였군요

[LeeCh0129]

고생하셨습니다!