dpdpdndn 블로그

FE-06-web-airquality-bff-hook

NEW2 min read

[FE-06] 웹 대기질 BFF 라우트 + useAirQuality 훅

작업 내용 (설계 의도)

근거: design-fe-web.md FR-12 — 대기질 조회 경로(컴포넌트 직접 fetch 금지, 훅+BFF).

변경 사항

  • 신규 web/app/api/portal/air-quality/route.ts — GET ?lat&lng를 BE GET /air-quality?lat&lng로 프록시(기존 BFF·be-client 인증 패턴 재사용). BE가 실패 시 200+UNKNOWN을 반환하므로 그대로 전달.
  • 신규 web/app/portal/facilities/_hooks/useAirQuality.ts — (lat, lng) 입력, useState+useEffect로 BFF fetch(레포 관례), 반환 { data: AirQualityResponse|null, status: 'idle'|'loading'|'success'|'error' }. lat/lng가 없으면(NaN/null) 미조회(idle). fetch 실패는 error 상태로. 컴포넌트에서 직접 fetch 안 함(no-direct-fetch).

의존

  • FE-02 (AirQualityResponse 타입)

다이어그램

처리 흐름

sequenceDiagram
    participant H as useAirQuality
    participant R as BFF air-quality route
    participant B as BE /air-quality
    H->>R: GET ?lat&lng
    R->>B: GET /air-quality
    B-->>R: 200 (값 or UNKNOWN)
    R-->>H: AirQualityResponse

테스트 케이스

  • 좌표가 주어지면 훅이 대기질 데이터를 success 상태로 반환한다
  • fetch 실패 시 훅이 error 상태를 반환한다
  • lat/lng가 없으면(NaN) 훅이 조회하지 않고 idle을 유지한다
  • BFF 라우트가 lat/lng 쿼리를 BE로 그대로 전달한다
  • BE가 UNKNOWN을 반환하면 훅이 해당 응답을 success로 담아 폴백 판단을 컴포넌트에 맡긴다

그래프 뷰