sn: 침수예측지도 오버레이 & 침수흔적깊이

2026-08-27 22:33:37 +09:00
parent 2c3961644c
commit c1ffc33834
10 changed files with 185 additions and 66 deletions
@@ -33,7 +33,7 @@
 - 신규 파일과 함수에 화면/API 역할 한글 주석을 작성한다.
 - 결과표는 `시도, 시군구, 분석시각, 강우시작시각, 관측 누적강수량, 예측시간, 예측 누적강수량, 초과 빈도(년), 침수위험도` 순서로 표시한다.
 - 예측시간은 `N시간 후`, 관측·예측 누적강수량은 소수점 한 자리로 표시한다.
- 지도화면 분석도구는 공용 분석시각 범위와 `심각` 조건의 count API를 조회하여 `침수예측현황(x건)`으로 표시한다.
+- 지도화면 분석도구는 공용 분석시각 범위와 `위험` 조건의 count API를 조회하여 `침수예측현황(x건)`으로 표시한다.

 ## 지도 연계

@@ -2,21 +2,22 @@

 ## 목적

-침수예측현황 선택행으로 지도 이동 시 선택한 도시침수지도 중앙에 시도, 시군구, 분석시각, 강우시작시각, 관측 누적강수량(mm), 예측시각, 예측 누적강수량(mm), 초과 빈도(년), 침수위험도를 포함한 단일 오버레이를 표시한다. 격자별 라벨은 표시하지 않는다.
+침수예측현황 선택행으로 지도 이동 시 선택한 도시침수지도 중앙에 사각 HTML table 단일 오버레이를 표시한다. 제목은 `[시도] [시군구] 침수예측` 두 열 병합이며, 본문은 분석시각, 강우시작시각, 관측 누적강수량(mm), 예측시각, 예측 누적강수량(mm), 초과 빈도(년), 침수위험도 순서다. 격자별 라벨과 위치 마커는 표시하지 않는다.

 ## 구현 방법

 - 현황 팝업 메시지에 `analysisDateTime`을 추가한다.
 - 지도 페이지에서 BE `grid-map` API를 호출한다.
- 기존 도시침수지도 extent 중심 좌표에 위 9개 표시 항목을 줄바꿈 라벨로 렌더링한다.
+- 기존 도시침수지도 extent 중심 좌표에 위 9개 표시 항목을 table 행으로 렌더링한다.
 - 초단기예보격자망 WFS 폴리곤은 기존 레이어 표현을 유지한다.
 - 다음 선택 시 전용 중앙 overlay를 삭제하고 새 응답으로 갱신한다.

-현재·예측 누적강우는 FE에서 격자별로 계산하지 않는다. BE가 반환하는 선택 시군구 분석행의 `obsrvn_acml_rn`, `predc_acml_rn`을 사용하며, 선택 도시침수지도 중앙의 단일 overlay에 표시한다.
+현재·예측 누적강우는 FE에서 격자별로 계산하지 않는다. BE가 반환하는 선택 시군구 분석행의 `obsrvn_acml_rn`, `predc_acml_rn`을 사용하며, 선택 도시침수지도 중앙의 단일 table overlay에 표시한다.

 ## 검증

 - 슬라이드 4의 선택 시군구 도시침수지도 중앙 정보 배치
 - 다른 행 선택 시 중앙 overlay 교체
+- 닫기 버튼 클릭 시 overlay 제거
 - 기존 지도 extent 이동·침수위험 레이어 선택 유지
 - API 오류 시 기존 지도 이동 기능 유지
@@ -0,0 +1,28 @@
+# SFR-011-009 FE 침수흔적도-깊이도 연계 작업계획
+
+## 1. 상태
+
+- 승인 대기
+- 구현 전 계획 문서
+- 범위: `apps/sn` 내부
+
+## 2. 화면 계획
+
+- 기존 침수흔적도 기본정보 상세 영역 우측에 침수깊이지도 연도 버튼 목록을 추가한다.
+- 버튼은 투명 배경, 테두리만 있는 라운드 형태로 기존 상세정보 UI와 조화되게 구현한다.
+- 선택 연도의 깊이도 항목은 기본정보 아래 별도 div와 table로 표시한다.
+- 상세 div 우측 상단에 `X` 닫기 버튼을 둔다.
+- 지도 시설물 클릭과 침수발생이력 선택에서 동일 상태 모델을 사용한다.
+- 현재 표시 중인 연도 버튼은 파란색으로 표시한다.
+- 연도가 많으면 좌우 화살표로 연도 버튼 목록을 가로 스크롤한다.
+- 연도 선택 시 해당 침수흔적도-깊이 feature를 지도에서 선택 상태로 표시한다.
+
+## 3. 구현 후보
+
+- `app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx`
+- `app/(map-layout)/map/components/fldngHstry/**`
+- 관련 침수흔적도 타입/API 호출부
+
+## 4. 검증
+
+- 연도 중복 제거·정렬, 선택 연도 파란색 상태, 좌우 스크롤, 연도 전환, 닫기, 빈 데이터, 지도 feature 선택, 양쪽 진입 경로 및 기존 상세정보 회귀를 브라우저에서 확인한다.