Multi-Step-Form 기능 요구사항

온보딩 Swagger API

시연영상

1. 온보딩 등록 폼 공통 요구사항

• 4단계로 구성된 프로필 등록 폼 구현 (닉네임 → 성별 → 선호 장르 → 인생 영화 혹은 드라마)
• 각 단계별 진행 상태를 보여주는 프로그레스 바 구현
• 이전/다음 버튼을 통한 단계별 이동 구현
• 이전/다음 버튼을 통한 단계별 이동 시 사용자 입력 데이터 유지
• 필수 입력값이 없는 경우 다음 단계로 이동 불가 및 유효성 검사

2. 단계별 상세 요구사항

1단계: 닉네임 입력

• 닉네임은 2-10자 이내로 제한
• 입력값 길이 실시간 유효성 검사
• 유효하지 않은 경우 에러 메시지 표시

2단계: 성별 선택

• 남성/여성 중 하나를 선택할 수 있는 라디오 버튼 구현
• 선택하지 않은 경우 다음 단계로 이동 불가

3단계: 선호 장르 선택

• 액션, 코미디, 드라마, 로맨스, SF, 공포 등 장르 중 다중 선택 가능
• 최소 1개 이상 선택해야 다음 단계로 이동 가능
• 선택된 장르는 시각적으로 구분되어야 함

4단계: 좋아하는 작품 입력

• 자유 텍스트 입력 필드 구현
• 입력값이 있어야 완료 버튼 활성화
• 완료 시 전체 입력 데이터를 확인할 수 있어야 함

5단계: 온보딩 결과 페이지

• 1 ~ 4 단계에서 사용자가 입력한 정보 데이터를 최종적으로 규합하여 확인할 수 있어야 함

3.기술적 요구사항 포인트

• 단계별 컴포넌트 분리 및 재사용 가능한 구조
• 이전/다음 버튼을 통한 단계별 이동 시 사용자 입력 데이터 유지