[FE-09] 웹 시설 상세 시/도 표시 + 대기질 통합

작업 내용 (설계 의도)

근거: design-fe-web.md FR-7/FR-12 — 상세에 시/도 + 대기질 카드. 상세 페이지는 단일 writer(통합 티켓).

변경 사항

  • web/app/portal/facilities/[id]/page.tsx:
    • <dl>에 시/도 항목(<dt>시/도</dt><dd>{facility.sidoName ?? "지역 미확인"}</dd>) 추가(구 항목 앞).
    • facility.location(“lat,lng”) split → number 파싱 → useAirQuality(lat, lng)(FE-06) 호출. 파싱 실패 시 미호출.
    • <dl> 아래 AirQualityCard(FE-07)를 status/data로 렌더.
    • edit 모드 FacilityFormsido defaultValue 전달 + 수정 제출 payload에 sido 포함(FE-08의 폼 확장 소비).

의존

  • FE-06 (useAirQuality), FE-07 (AirQualityCard), FE-08 (폼 sido 확장), FE-01 (타입)

다이어그램

처리 흐름

sequenceDiagram
    participant D as 상세 페이지
    participant H as useAirQuality
    participant C as AirQualityCard
    D->>D: location split → lat,lng
    D->>H: useAirQuality(lat,lng)
    H-->>D: status,data
    D->>C: render(status,data)

테스트 케이스

  • 상세에 시/도명이 표시되고, 미지정이면 “지역 미확인”으로 표시된다
  • location 좌표로 대기질 카드가 success 상태로 렌더된다
  • 대기질 조회 실패 시 상세 본체는 정상이고 카드만 폴백 문구를 표시한다
  • location 파싱이 실패하면 대기질 카드가 렌더되지 않고 상세는 정상 표시된다
  • edit 모드에서 시/도 선택이 defaultValue로 채워지고 수정 제출에 sido가 포함된다