React 폼 검증

회원가입 폼: 계정 생성 흐름과 오류 복구

회원가입 폼은 입력칸 묶음이 아니라 계정 생성 계약입니다. 조건, 요청, 복구 상태를 한 흐름으로 분리해 보여야 합니다.

01 email · password · consent

가입 버튼을 막는 조건을 먼저 확정한다.

01 조건
02 submit + pending lock

서버 요청 중 중복 제출을 잠근다.

02 요청
03 field error / form error

고칠 필드와 전체 실패를 다른 위치에 보여준다.

03 복구
구분기준처리
필드 오류 이메일 중복, 비밀번호 불일치 입력칸 바로 아래
폼 오류 네트워크 실패, 서버 장애 폼 상단 안내
성공 계정 생성 완료 로그인 또는 온보딩

핵심 사용자는 가입이 막힌 이유와 다음 행동을 한 화면에서 알아야 한다.