[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 모드
FacilityForm에sidodefaultValue 전달 + 수정 제출 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가 포함된다