Form Kit

폼 키트. 기본 폼, 다단계 폼, 파일 업로드, 동적 필드를 지원합니다.

기술 스택

ZustandReact Hook FormZodTypeScript

기능

  • 기본 폼 (유효성 검사)
  • 다단계 폼 (스텝 인디케이터, 데이터 유지)
  • 파일 업로드 (드래그 앤 드롭, 미리보기, 진행률)
  • 동적 필드 (추가/삭제)
  • Zod 스키마 기반 유효성 검사
  • 에러 메시지 자동 표시

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

코드

접근성

  • 모든 입력 필드에 label 연결
  • 오류 메시지는 aria-describedby로 연결
  • 필수 필드에 aria-required 적용
  • 다단계 폼에서 진행 상태를 aria-valuenow로 전달
  • 파일 업로드 영역에 키보드 접근 지원
  • 동적 필드 추가/삭제 시 포커스 관리