dpdpdndn 블로그

FE-08-web-form-sido-input

NEW2 min read

[FE-08] 웹 시설 폼 시/도 입력

작업 내용 (설계 의도)

근거: design-fe-web.md FR-6 — 단건 폼에 시/도 드롭다운.

변경 사항

  • web/app/portal/facilities/facility-form-schema.ts — sido: z.string().optional() 추가(미선택 허용, 서버 보간). FacilityFormValues·update 스키마 반영.
  • web/app/portal/facilities/_hooks/useFacilityForm.ts — INITIAL_VALUES에 sido: "", handleChange가 sido 처리. 기존 useState 구조 유지.
  • web/app/portal/facilities/_components/FacilityForm.tsx — 지역 그룹에 SidoSelect(FE-01) 배치(구 입력 위), help text “미선택 시 주소로 자동 판별됩니다”. 기존 gu 자유 입력 유지.
  • web/app/portal/facilities/new/page.tsx(create 컨테이너) — 제출 payload에 sido 포함. (edit 컨테이너 [id]/page.tsx는 FE-09에서 처리 — 파일 충돌 회피.)

의존

  • FE-01 (SidoSelect, sido 옵션)

다이어그램

클래스 의존

flowchart LR
    Sido[SidoSelect] --> Form[FacilityForm]
    Schema[form-schema sido] --> Hook[useFacilityForm]
    Hook --> Form
    Form --> New[new/page 제출]

테스트 케이스

  • 폼에 시/도 드롭다운이 렌더되고 선택값이 폼 상태에 반영된다
  • 시/도를 선택하지 않아도(빈 값) 나머지 필수 필드가 유효하면 제출된다
  • 기존 필수 필드(name/gu/address 등) 검증이 회귀 없이 동작한다
  • 제출 시 sido 값이 onSubmit payload에 포함된다

그래프 뷰