dpdpdndn 블로그

FE-01-web-sido-foundation

NEW2 min read

[FE-01] 웹 시/도 공통 토대 (타입·옵션 상수·SidoSelect)

작업 내용 (설계 의도)

근거: design-fe-web.md — 시/도 공통 토대 (연관 병목: 지역 타입 + 옵션 상수 + 드롭다운 컴포넌트를 한 책임으로 묶어 후행 폼·목록·상세가 트리형으로 열리게 함).

변경 사항

  • web/lib/portal/types.ts MyFacility에 지역 4필드(sidoCode, sidoName, sigunguCode, sigunguName) 추가. BE FacilityResponse 계약과 1:1. 기존 gu·location 유지.
  • CreateFacilityInput/UpdateFacilityInput에 sido?: string(표준코드, optional — 미입력 시 서버 주소 파싱 보간) 추가.
  • 신규 web/app/portal/facilities/sido-options.ts — 17개 시도 { code, name } 상수(SIDO_OPTIONS) + “선택 안 함”(빈 값) 헬퍼. 코드값은 BE regions seed(design-db)와 반드시 일치(서울 11, 부산 26 …).
  • 신규 web/components/ui/SidoSelect.tsx — 네이티브 <select> 래퍼(레포에 Select 컴포넌트 없음). value/onChange/label props, 접근성(aria-label·연결된 label). 색은 기존 시맨틱 토큰만.

의존

  • 없음 (wave 1)

다이어그램

클래스 의존

flowchart LR
    Options[sido-options.ts] --> SidoSelect
    Types[types.ts region fields] --> Consumers[폼·목록·상세]
    SidoSelect --> Form[FacilityForm 후행]

테스트 케이스

  • SidoSelect가 17개 시도 옵션과 “선택 안 함” 기본 옵션을 렌더한다
  • SidoSelect 선택 변경 시 onChange에 해당 시도 코드가 전달된다
  • SidoSelect에 연결된 접근성 라벨로 요소를 찾을 수 있다
  • SIDO_OPTIONS는 17건이며 각 코드가 2자리 형식이다
  • SIDO_OPTIONS에 서울(11)·부산(26)이 포함된다

그래프 뷰