From 45c8d021cca79305819cea5ee51702ce78d7e762 Mon Sep 17 00:00:00 2001 From: ljpark Date: Fri, 30 Oct 2026 13:34:44 +0900 Subject: [PATCH] =?UTF-8?q?sn:=20=ED=99=95=EB=A5=A0=EA=B0=95=EC=9A=B0?= =?UTF-8?q?=EB=9F=89=20=EC=97=91=EC=85=80=EB=8B=A4=EC=9A=B4=EB=A1=9C?= =?UTF-8?q?=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...fe-SFR-011-008-침수예측현황-확률강우량-구현기록.md | 27 ++++++++++ .../fldng-predc-prst/ui/PrbbtRnflDialog.tsx | 53 +++++++++++++++++-- 2 files changed, 77 insertions(+), 3 deletions(-) diff --git a/apps/sn/docs/작업내용/SFR-011-008-침수예측/005-fe-SFR-011-008-침수예측현황-확률강우량-구현기록.md b/apps/sn/docs/작업내용/SFR-011-008-침수예측/005-fe-SFR-011-008-침수예측현황-확률강우량-구현기록.md index 302591ae5..be7205fc3 100644 --- a/apps/sn/docs/작업내용/SFR-011-008-침수예측/005-fe-SFR-011-008-침수예측현황-확률강우량-구현기록.md +++ b/apps/sn/docs/작업내용/SFR-011-008-침수예측/005-fe-SFR-011-008-침수예측현황-확률강우량-구현기록.md @@ -20,3 +20,30 @@ ## 수동 확인 필요 - 실제 로그인 화면에서 팝업 크기·가로 스크롤·강조 색상 및 지도 이동 회귀 확인 + +## 추가 작업: 확률강우량 팝업 엑셀다운로드 (2026-10-30) + +### 변경 내용 +- 팝업 헤더 우측(닫기 X 왼쪽)에 `엑셀다운로드` 버튼을 추가했다. 닫기 버튼과 겹치지 않도록 헤더에 `pr-14` 여백을 둔다. +- 공통 유틸 `src/shared/util/download-excel-workbook.ts`의 `downloadExcelWorkbook`을 재사용한다. +- 파일명은 `{시군구명}_확률강우량.xlsx`이며 시트는 두 개다. + - `확률강우량`: 재현기간(년) 행 × `N시간` 열. 셀은 소수 4자리로 자르지 않은 원본 숫자 값이다. + - `확률관측소 면적비율`: 확률관측소코드·관측소명·면적비율(%)과 합계(API `areaRtTotal`). +- 로딩 중·오류·표 데이터 없음 상태에서는 버튼을 비활성화한다. +- API 호출, 응답 구조, 화면 문구와 기존 표 렌더링은 변경하지 않았다. + +### 이슈: 팝업 본체가 투명하게 렌더링됨 +- 증상: 엑셀다운로드 버튼 추가 후 팝업 본체 배경이 투명해져 뒤쪽 목록 화면이 비쳐 보였다. 새로고침과 애니메이션 완료 후에도 재현됐다. +- 추정 원인: `DialogContent`의 배경이 `bg-[var(--dialog-bg)]`(`--dialog-bg: var(--background)`, `packages/common/assets/src/styles/base.css`)인데, 이 모달에서 해당 변수가 값을 가져오지 못한 것으로 추정한다. 정확한 근본 원인은 확인하지 못했다. 공통 패키지(`@common/components`, `@common/assets`)는 수정 범위 밖이라 변경하지 않았다. +- 조치: `PrbbtRnflDialog.tsx`의 `DialogContent` className에 `bg-background`를 추가해 배경을 직접 지정했다. 사용자가 해결을 확인했다(2026-10-30). +- 참고: 같은 증상이 다른 `DialogContent` 사용 팝업에서 보이면 공통 변수 문제일 수 있으므로 별도 보고 대상이다. + +### 수정 파일 +- `apps/sn/src/features/fldng-predc-prst/ui/PrbbtRnflDialog.tsx` + +### 검증 +- 사용자가 실제 화면에서 팝업 배경 정상 표시를 확인했다. +- 타입 체크·빌드·엑셀 파일 내용 열람은 수행하지 않았다. + +### 롤백 +- 위 파일의 변경(헤더 버튼, `handleExcelDownload`, 두 import, `bg-background`)을 되돌린다. diff --git a/apps/sn/src/features/fldng-predc-prst/ui/PrbbtRnflDialog.tsx b/apps/sn/src/features/fldng-predc-prst/ui/PrbbtRnflDialog.tsx index 02275efd2..bd9975312 100644 --- a/apps/sn/src/features/fldng-predc-prst/ui/PrbbtRnflDialog.tsx +++ b/apps/sn/src/features/fldng-predc-prst/ui/PrbbtRnflDialog.tsx @@ -2,7 +2,9 @@ import { useLayoutEffect, useMemo, useRef } from "react"; -import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@common/components"; +import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@common/components"; + +import { downloadExcelWorkbook } from "@/shared/util/download-excel-workbook"; /** 시군구별 면적가중 확률강우량 한 셀의 API 응답이다. */ export type PrbbtRnflCell = { @@ -77,6 +79,43 @@ export default function PrbbtRnflDialog({ }; }, [data]); + /** 화면에 표시 중인 확률강우량 표와 관측소 면적비율 표를 두 시트로 내려받는다. */ + const handleExcelDownload = async () => { + const stations = data?.stations ?? []; + await downloadExcelWorkbook({ + fileName: `${sggName}_확률강우량`, + sheets: [ + { + name: "확률강우량", + rows: [ + ["재현기간(년)", ...durations.map((hour) => `${hour}시간`)], + ...frequencies.map((frequencyYear) => [ + frequencyYear, + ...durations.map( + (durationHour) => + rainfallByKey.get(`${frequencyYear}:${durationHour}`) ?? null, + ), + ]), + ], + columnWidths: [14, ...durations.map(() => 12)], + }, + { + name: "확률관측소 면적비율", + rows: [ + ["확률관측소코드", "관측소명", "면적비율(%)"], + ...stations.map((station) => [ + station.prbbtObsvtrCd, + station.prbbtObsvtrNm || "-", + station.areaRt, + ]), + ["합계", "", data?.areaRtTotal ?? null], + ], + columnWidths: [18, 18, 14], + }, + ], + }); + }; + /** 표가 표시되면 선택 지속시간 열을 가로 스크롤 영역의 가운데로 맞춘다. */ useLayoutEffect(() => { if (!open || loading || error || selectedDurationHour == null) return; @@ -96,11 +135,19 @@ export default function PrbbtRnflDialog({ return ( - + {/* 우측 상단 닫기(X) 버튼과 겹치지 않도록 pr-14 여백을 둔다. */} + {sggName} 확률강우량 + {loading ? (