React · Signup Form

회원가입 폼의 제출 계약

회원가입 폼은 입력 항목을 모아 POST 하는 예제가 아니라, 사용자 식별 정보와 비밀번호 정책, 약관 동의, 제출 중복 방지를 한 흐름으로 묶는 화면이다.

01

입력 수집

필드별 value와 touched 상태를 분리해 아직 건드리지 않은 오류를 숨긴다.

02

로컬 검증

이메일 형식, 비밀번호 정책, 약관 동의를 요청 전 확인한다.

03

요청 전송

pending 상태에서 버튼을 비활성화하고 같은 계정 생성 요청을 반복하지 않는다.

04

결과 안내

성공 시 다음 단계로 이동하고, 중복 이메일은 해당 필드 오류로 표시한다.

email
로그인 식별자 형식 검증과 중복 확인 대상
존재 여부 과노출
password
비밀 입력 최소 길이, 조합, 유출 비밀번호 정책 가능
자동완성 속성 설정
consent
명시 동의 필수 약관과 선택 마케팅 동의를 구분
체크 여부를 서버로 전달
pending
중복 제출 차단 요청 중 버튼 잠금과 진행 표시
실패 후 다시 가능

자동완성 · 비밀번호 노출 · 서버 매핑 점검

자동완성 email, new-password 등 autocomplete 값을 적절히 지정한다.
비밀번호 노출 표시 토글은 사용자가 명시적으로 켤 때만 동작한다.
서버 매핑 중복 이메일과 약관 오류를 필드별로 표시한다.
성공 후 인증 메일 안내나 로그인 이동처럼 다음 행동이 분명하다.