From 908ec81fb7584a1c935042d2e5444b4922cadaf5 Mon Sep 17 00:00:00 2001
From: LGS <patanus1@gmail.com>
Date: Tue, 17 Mar 2026 15:47:34 +0900
Subject: [PATCH 1/8] =?UTF-8?q?=EC=B9=A8=EC=9E=85=EC=88=98=20=EB=B6=84?=
 =?UTF-8?q?=EC=84=9D=20=ED=8C=9D=EC=97=85=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/infilChart.tsx       | 447 +++++++++---------
 1 file changed, 226 insertions(+), 221 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 9f481a2b9..094936638 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -1,268 +1,273 @@
 'use client'
-import { CHART_FORM, type ChartConfig, MainChart, UiModal } from "@common/business_components";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+
+import {
+  CHART_FORM,
+  type ChartConfig,
+  MainChart,
+  UiModal,
+} from '@common/business_components';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
-import React, { useEffect, useState } from 'react';
-import moment from "moment";
 
 import type { TInftwtAnls } from './aplcnYms';
 import * as fn from './aplcnYms';
-import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
+import { useInfilChartModalStore } from '../chartModalStore';
+
 type ModalOpenProp = {
-  pplMngNo?: string, // 관로관리번호
-}
-type DataType = { label: string; val: number };
+  pplMngNo?: string; // 관로관리번호
+};
 
-const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
-  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어
-  const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 
-  const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
-  const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
-  const [selectedAplcnYm, setSelectedAplcnYm] = useState("");
+type DataType = {
+  label: string;
+  val: number;
+};
+
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+
+const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore();
+
+  const [selectedAplcnYm, setSelectedAplcnYm] = useState('');
   const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
-  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options
-  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
-  const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0); // 침입수분석 정보 선택시 사용
+  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
+    INITIAL_ANALYSIS_OPTIONS,
+  );
+  const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null);
+  const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0);
   const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({
-    chartData1: [], chartData2: [],
+    chartData1: [],
+    chartData2: [],
   });
-  const [inftwtQty, setInftwtQty] = useState<string>("0"); // 침입수량
-  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
+  const [inftwtQty, setInftwtQty] = useState<string>('0');
 
-  pplMngNo = "L" + pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여
-  const openPopup = () => {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
-      setPopupPosition({
-        top: rect.bottom + window.scrollY, // 버튼 아래쪽
-        left: rect.left + window.scrollX, // 버튼 왼쪽
-      });
-    }
-    setPopupOpen(true); // 팝업 열기
-  };
+  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt');
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
 
   const chartForm = CHART_FORM.LINE;
   const chartConfig = {
-    chartData1: { label: '순오수량', color: "red", },
-    chartData2: { label: '실측하수량', color: "orange", }
+    chartData1: { label: '순오수량', color: 'red' },
+    chartData2: { label: '실측하수량', color: 'orange' },
   } as ChartConfig;
 
+  const hasChartData = useMemo(() => {
+    return chartData.chartData1.length > 0 || chartData.chartData2.length > 0;
+  }, [chartData]);
+
+  const resetState = () => {
+    setSelectedAplcnYm('');
+    setInftwtAnlss([]);
+    setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+    setInftwtAnls(null);
+    setSelectedInftwtAnls(0);
+    setChartData({ chartData1: [], chartData2: [] });
+    setInftwtQty('0');
+  };
+
   useEffect(() => {
-    if (isModalOpen === false) {
-      setPopupOpen(true); // 모달이 닫힐 때 조회조건팝업은 열어두기
-      setSelectedAplcnYm(""); // 상수사용월 초기화
-      setInftwtAnlss([]); // 침입수분석 초기화
-      setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화
-      setInftwtAnls(null); // 침입수분석정보 초기화
-      setSelectedInftwtAnls(0); // 침입수분석 일련번호 초기화
-      setChartData({ chartData1: [], chartData2: [], }); // 차트 데이터 초기화
-      setInftwtQty("0"); // 침입수량 초기화
+    if (!isModalOpen) {
+      resetState();
     }
   }, [isModalOpen]);
 
-  // 상수사용월 변경 핸들러
   const handleAplcnYmChange = async (val: string | number) => {
     const selectedValue = String(val);
 
     setSelectedAplcnYm(selectedValue);
-
-    // 즉시 관련 상태 초기화
+    setInftwtAnlss([]);
     setInftwtAnls(null);
+    setSelectedInftwtAnls(0);
+    setInftwtQty('0');
+    setChartData({ chartData1: [], chartData2: [] });
 
-    // 빈 값이면 초기화만 하고 종료
-    if (!selectedValue || selectedValue === "0" || selectedValue === "") {
-      setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
+    if (!selectedValue || selectedValue === '0') {
+      setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
       return;
     }
 
-    // API 호출
     try {
       const data = await fn.selectInftwtAnls(selectedValue);
-      setInftwtAnlss(data ?? []);
-      setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data));
+      const list = data ?? [];
+      setInftwtAnlss(list);
+      setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(list));
     } catch (error) {
-      console.error("selectInftwtAnls 에러:", error);
+      console.error('selectInftwtAnls 에러:', error);
       setInftwtAnlss([]);
-      setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
+      setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     }
-    setSelectedInftwtAnls(0);
   };
 
-  // 분석정보 변경 핸들러
   const handleInftwtAnlsSnChange = (val: string | number) => {
     const selectedValue = Number(val);
-    setSelectedInftwtAnls(selectedValue);
 
-    // 선택된 침입수분석 정보에 대한 처리 로직
+    setSelectedInftwtAnls(selectedValue);
+    setChartData({ chartData1: [], chartData2: [] });
+    setInftwtQty('0');
+
     if (selectedValue === 0) {
       setInftwtAnls(null);
       return;
     }
 
-    const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === selectedValue);
-    if (selectedAnls) {
-      setInftwtAnls(selectedAnls);
+    const selectedAnls = inftwtAnlss.find((anls) => anls.inftwtAnlsSn === selectedValue) ?? null;
+    setInftwtAnls(selectedAnls);
+  };
+
+  const infilRsltChart = async () => {
+    if (!selectedAplcnYm || selectedInftwtAnls === 0 || !normalizedPplMngNo) {
+      setChartData({ chartData1: [], chartData2: [] });
+      setInftwtQty('0');
+      return;
+    }
+
+    try {
+      const [inftwtAnlsRslt, oilq, qty] = await Promise.all([
+        fn.selectInftwtAnlsRslt(selectedInftwtAnls, normalizedPplMngNo),
+        fn.selectOilq(selectedInftwtAnls, normalizedPplMngNo).catch((err) => {
+          console.error('selectOilq 에러:', err);
+          return [];
+        }),
+        fn.selectPplInftwtQty(selectedInftwtAnls, normalizedPplMngNo).catch((err) => {
+          console.error('selectPplInftwtQty 에러:', err);
+          return 0;
+        }),
+      ]);
+
+      setChartData({
+        chartData1: fn.getChartDataInftwtAnlsRslt(inftwtAnlsRslt ?? []),
+        chartData2: fn.getChartDataOilq(oilq ?? []),
+      });
+
+      const normalizedQty = Number(qty ?? 0);
+      setInftwtQty(normalizedQty.toLocaleString('ko-KR'));
+    } catch (error) {
+      console.error('infilRsltChart 에러:', error);
+      setChartData({ chartData1: [], chartData2: [] });
+      setInftwtQty('0');
     }
   };
 
-  const closePopup = () => {  // 팝업 닫기
-    setPopupOpen(false);
-  }
-  const infilRsltChart = () => {  // 그래프 & 팝업 닫기
-
-    fn.selectInftwtAnlsRslt(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수분석 결과 조회
-      const rsltData = fn.getChartDataInftwtAnlsRslt(data ?? []);
-      setChartData(prev => ({
-        ...prev,
-        chartData1: rsltData // 침입수분석결과
-      }));
-    });
-    fn.selectOilq(selectedInftwtAnls, pplMngNo).then((data) => {// 유량 조회
-      const rsltData = fn.getChartDataOilq(data ?? []);
-      setChartData(prev => ({
-        ...prev,
-        chartData2: rsltData // 유량
-      }));
-    }).catch((err) => {
-      console.error("selectOilq 에러:", err);
-      setChartData(prev => ({
-        ...prev,
-        chartData2: [] // 유량 데이터 초기화
-      }));
-    });
-    fn.selectPplInftwtQty(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수량 조회
-      if (data > 0) {
-        setInftwtQty(data.toLocaleString('ko-KR'));
-      }
-    });
-    setPopupOpen(false);
-  };
+  const renderInfoInput = (label: string, value?: string | number | null) => (
+    <div className="grid grid-cols-[150px_minmax(0,1fr)] items-center gap-3">
+      <Label className="w-auto text-[18px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
+      <Input
+        className="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white px-3 text-[16px] text-[#2b3440]"
+        placeholder=""
+        value={value ?? ''}
+        readOnly
+      />
+    </div>
+  );
 
   const renderBody = () => (
-    <>
-      <div className="text-black text-3xl font-bold mb-5">침입수분석결과</div>
-
-      <div className='grid grid-cols-[1fr_3fr] gap-4'>
-        <div className="h-[90%] grid grid-rows-4 gap-4 mb-4">
-          <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
-            분석 입력현황 조회
-          </Button>
-          {/* 상수사용량 적용연월 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 상수사용량 적용연월</span>
-            <div className="flex items-center mt-2">
-              <span className="ml-5 text-black text-xl font-bold">
-                {(selectedAplcnYm) ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : ""}
-              </span>
-            </div>
-          </div>
-          {/* 침입수량 분석결과 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 침입수량 산정결과</span>
-            <div className="flex items-center mt-2">
-              <span className="ml-5 text-black text-xl">침입수량 : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold">{inftwtQty}</span>
-              <span className="ml-2 text-black text-xl">m³/d</span>
-            </div>
-          </div>
-        </div>
-        {/* 차트 */}
-        <div className="h-[90%] bg-white text-3xl">
-          <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'침입수량 그래프'} 
-            yFieldText2="" yFieldText="유량(m³/h)"/>
-        </div>
+    <div className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
       </div>
-      {popupOpen && (
-        <div
-          className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
-          style={{
-            top: popupPosition.top,
-            left: popupPosition.left,
-            zIndex: 1000,
-          }}
-        >
-          <div className="font-bold mb-6 text-3xl">침입수분석 입력현황</div>
-          <div className='flex flex-col'>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
-                selectArray={aplcnYms}
-                value={selectedAplcnYm}
-                onSelectValue={handleAplcnYmChange}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
-                selectArray={inftwtAnlsInfos}
-                value={selectedInftwtAnls}
-                onSelectValue={handleInftwtAnlsSnChange}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.drtwSwtcRt ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">시간패턴 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflHrPttnNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflMpngNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflInpNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">유량 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={inftwtAnls?.atflOilqNm ?? ""}
-                readOnly={true}
-              />
+
+      <div className="grid min-h-[68vh] grid-cols-[440px_minmax(0,1fr)] gap-5">
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[24px] font-extrabold tracking-[-0.02em] text-black">
+            침입수 분석 선택 조건
+          </h3>
+
+          <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
+            <div className="space-y-3">
+              <div className="grid grid-cols-[150px_minmax(0,1fr)] items-center gap-3">
+                <Label className="w-auto text-[18px] font-semibold text-[#5c6470] whitespace-nowrap">
+                  상수사용월:
+                </Label>
+                <SelectBox
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white text-[16px]"
+                  label=""
+                  selectArray={aplcnYms}
+                  value={selectedAplcnYm}
+                  onSelectValue={handleAplcnYmChange}
+                />
+              </div>
+
+              <div className="grid grid-cols-[150px_minmax(0,1fr)] items-center gap-3">
+                <Label className="w-auto text-[18px] font-semibold text-[#5c6470] whitespace-nowrap">
+                  분석정보:
+                </Label>
+                <SelectBox
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white text-[16px]"
+                  label=""
+                  selectArray={inftwtAnlsInfos}
+                  value={selectedInftwtAnls}
+                  onSelectValue={handleInftwtAnlsSnChange}
+                />
+              </div>
+
+              {renderInfoInput('오수전환율:', inftwtAnls?.drtwSwtcRt ?? '')}
+              {renderInfoInput('시간패턴 파일명:', inftwtAnls?.atflHrPttnNm ?? '')}
+              {renderInfoInput('수용가-맨홀 매칭:', inftwtAnls?.atflMpngNm ?? '')}
+              {renderInfoInput('관망도 파일명:', inftwtAnls?.atflInpNm ?? '')}
+              {renderInfoInput('유량 파일명:', inftwtAnls?.atflOilqNm ?? '')}
             </div>
           </div>
-          <div className="flex justify-end mt-4 space-x-2">
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
-              닫기
-            </button>
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={infilRsltChart}>
+
+          <div className="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
+            <Button
+              className="w-[140px] h-[38px] rounded-[6px] bg-[#5d7088] px-6 py-3 text-xxl font-bold text-white hover:bg-[#50627a]"
+              onClick={infilRsltChart}
+            >
               선택조건 적용
-            </button>
+            </Button>
           </div>
-        </div>)}
-      {/* </Modal > */}
-    </>
-  )
+        </section>
+
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[24px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
+
+          <div className="mb-6 grid grid-cols-2 gap-5">
+            <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                <span className="text-[20px] leading-none">●</span>
+                <span>상수사용량 적용연월</span>
+              </div>
+              <div className="text-[24px] font-extrabold text-[#222]">
+                {selectedAplcnYm ? moment(selectedAplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+              </div>
+            </div>
+
+            <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                <span className="text-[20px] leading-none">●</span>
+                <span>침입수량 산정결과</span>
+              </div>
+              <div className="flex items-end gap-2 text-[#222]">
+                <span className="text-[18px] text-[#666]">침입수량</span>
+                <span className="text-[28px] font-extrabold">{inftwtQty}</span>
+                <span className="pb-[2px] text-[18px]">m³/d</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+            {hasChartData ? (
+              <MainChart
+                chartConfig={chartConfig}
+                chartForm={chartForm}
+                chartData={chartData}
+                chartTitle={'침입수량 그래프'}
+                yFieldText="유량(m³/h)"
+                yFieldText2=""
+              />
+            ) : (
+              <div className="flex h-[590px] items-center justify-center text-[18px] text-[#2c2f33]">
+                데이터가 없습니다.
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
 
   return (
     <UiModal
@@ -270,17 +275,17 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
       onOpenChange={setIsModalOpen}
       headerTitle=""
       bodyClass={`
-            min-h-[50vh]
-            w-[55vw]
-            max-w-none
-            max-h-none
-            overflow-visible
-            z-[50]
-          `}
+        w-[78vw]
+        max-w-none
+        min-h-[74vh]
+        max-h-none
+        overflow-visible
+        z-[50]
+      `}
       body={renderBody()}
-      noFooterYn='Y'
+      noFooterYn="Y"
     />
-  )
-}
+  );
+};
 
-export default React.memo(InfilChart);
\ No newline at end of file
+export default React.memo(InfilChart);

From 630c9492cdc380c885903408c592351cb6d66187 Mon Sep 17 00:00:00 2001
From: dongsilove <ljparkmindone@gmail.com>
Date: Tue, 17 Mar 2026 22:42:46 +0900
Subject: [PATCH 2/8] =?UTF-8?q?sn:=20=EC=B9=A8=EC=9E=85=EC=88=98=201?=
 =?UTF-8?q?=EC=B0=A8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/infilChart.tsx       | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 094936638..9b2401c28 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -150,10 +150,10 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
   };
 
   const renderInfoInput = (label: string, value?: string | number | null) => (
-    <div className="grid grid-cols-[150px_minmax(0,1fr)] items-center gap-3">
-      <Label className="w-auto text-[18px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
+    <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+      <Label className="w-auto text-[16px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
       <Input
-        className="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white px-3 text-[16px] text-[#2b3440]"
+        className="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white px-3 text-2xl md:text-2xl text-[#2b3440]"
         placeholder=""
         value={value ?? ''}
         readOnly
@@ -161,6 +161,9 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
     </div>
   );
 
+  const handleReset = () => {
+    resetState();
+  }
   const renderBody = () => (
     <div className="text-black">
       <div className="mb-4 flex items-start justify-between">
@@ -169,14 +172,14 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
 
       <div className="grid min-h-[68vh] grid-cols-[440px_minmax(0,1fr)] gap-5">
         <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
-          <h3 className="mb-6 text-[24px] font-extrabold tracking-[-0.02em] text-black">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
             침입수 분석 선택 조건
           </h3>
 
           <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
             <div className="space-y-3">
-              <div className="grid grid-cols-[150px_minmax(0,1fr)] items-center gap-3">
-                <Label className="w-auto text-[18px] font-semibold text-[#5c6470] whitespace-nowrap">
+              <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+                <Label className="w-auto text-[16px] font-semibold text-[#5c6470] whitespace-nowrap">
                   상수사용월:
                 </Label>
                 <SelectBox
@@ -189,8 +192,8 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 />
               </div>
 
-              <div className="grid grid-cols-[150px_minmax(0,1fr)] items-center gap-3">
-                <Label className="w-auto text-[18px] font-semibold text-[#5c6470] whitespace-nowrap">
+              <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+                <Label className="w-auto text-[16px] font-semibold text-[#5c6470] whitespace-nowrap">
                   분석정보:
                 </Label>
                 <SelectBox
@@ -212,17 +215,17 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
           </div>
 
           <div className="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
-            <Button
-              className="w-[140px] h-[38px] rounded-[6px] bg-[#5d7088] px-6 py-3 text-xxl font-bold text-white hover:bg-[#50627a]"
-              onClick={infilRsltChart}
-            >
-              선택조건 적용
+            <Button size="lg" onClick={infilRsltChart} >
+              조회
+            </Button>&nbsp;&nbsp;
+            <Button size="lg" color="gray" onClick={handleReset} >
+              초기화
             </Button>
           </div>
         </section>
 
         <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
-          <h3 className="mb-6 text-[24px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
 
           <div className="mb-6 grid grid-cols-2 gap-5">
             <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
@@ -259,7 +262,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 yFieldText2=""
               />
             ) : (
-              <div className="flex h-[590px] items-center justify-center text-[18px] text-[#2c2f33]">
+              <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
                 데이터가 없습니다.
               </div>
             )}

From f993a4a13e922af92343a6659ab2bb86d2065369 Mon Sep 17 00:00:00 2001
From: dongsilove <ljparkmindone@gmail.com>
Date: Tue, 17 Mar 2026 22:53:00 +0900
Subject: [PATCH 3/8] =?UTF-8?q?sn:=20=ED=8F=B0=ED=8A=B8=20=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/popupComponent/chart/infilChart.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 9b2401c28..0f4d0bdb7 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -230,23 +230,23 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
           <div className="mb-6 grid grid-cols-2 gap-5">
             <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
               <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
-                <span className="text-[20px] leading-none">●</span>
+                {/* <span className="text-[14px] leading-none">●</span> */}
                 <span>상수사용량 적용연월</span>
               </div>
-              <div className="text-[24px] font-extrabold text-[#222]">
+              <div className="text-[20px] font-extrabold text-[#222]">
                 {selectedAplcnYm ? moment(selectedAplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
               </div>
             </div>
 
             <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
               <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
-                <span className="text-[20px] leading-none">●</span>
+                {/* <span className="text-[14px] leading-none">●</span> */}
                 <span>침입수량 산정결과</span>
               </div>
               <div className="flex items-end gap-2 text-[#222]">
-                <span className="text-[18px] text-[#666]">침입수량</span>
-                <span className="text-[28px] font-extrabold">{inftwtQty}</span>
-                <span className="pb-[2px] text-[18px]">m³/d</span>
+                <span className="text-[16px] text-[#666]">침입수량</span>
+                <span className="text-[20px] font-extrabold">{inftwtQty}</span>
+                <span className="pb-[2px] text-[16px]">m³/d</span>
               </div>
             </div>
           </div>

From 13fad0c692906b7ee6c780bac6ba1769aa161643 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 18 Mar 2026 09:38:43 +0900
Subject: [PATCH 4/8] =?UTF-8?q?sn:=20=EC=B9=A8=EC=9E=85=EC=88=982=EC=B0=A8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/popupComponent/chart/infilChart.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 0f4d0bdb7..4086f1966 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -151,9 +151,9 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
 
   const renderInfoInput = (label: string, value?: string | number | null) => (
     <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
-      <Label className="w-auto text-[16px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
+      <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
       <Input
-        className="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white px-3 text-2xl md:text-2xl text-[#2b3440]"
+        className="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white px-3 text-xl md:text-xl text-[#2b3440]"
         placeholder=""
         value={value ?? ''}
         readOnly
@@ -179,12 +179,12 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
           <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
             <div className="space-y-3">
               <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
-                <Label className="w-auto text-[16px] font-semibold text-[#5c6470] whitespace-nowrap">
+                <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">
                   상수사용월:
                 </Label>
                 <SelectBox
                   className="w-full"
-                  selectClass="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white text-[16px]"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
                   label=""
                   selectArray={aplcnYms}
                   value={selectedAplcnYm}
@@ -193,12 +193,12 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
               </div>
 
               <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
-                <Label className="w-auto text-[16px] font-semibold text-[#5c6470] whitespace-nowrap">
+                <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">
                   분석정보:
                 </Label>
                 <SelectBox
                   className="w-full"
-                  selectClass="h-[42px] rounded-[10px] border border-[#d7dde5] bg-white text-[16px]"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
                   label=""
                   selectArray={inftwtAnlsInfos}
                   value={selectedInftwtAnls}

From a3270acd29b46e299869d65583e86b2dfcff5f3a Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 18 Mar 2026 10:43:03 +0900
Subject: [PATCH 5/8] =?UTF-8?q?sn:=20rdii=20=EB=B6=84=EC=84=9D=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/infilChart.tsx       |   3 +-
 .../popupComponent/chart/rdiiChart.tsx        | 538 ++++++++++--------
 2 files changed, 289 insertions(+), 252 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 4086f1966..d9ccccf0e 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -68,7 +68,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
 
   useEffect(() => {
     if (!isModalOpen) {
-      resetState();
+      resetState(); // 모달이 닫힐 때 리셋
     }
   }, [isModalOpen]);
 
@@ -164,6 +164,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
   const handleReset = () => {
     resetState();
   }
+
   const renderBody = () => (
     <div className="text-black">
       <div className="mb-4 flex items-start justify-between">
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index 39617eb21..12289254c 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -1,282 +1,318 @@
 'use client'
-import { CHART_FORM, type ChartConfig, MainChart, UiModal } from "@common/business_components";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+
+import {
+  CHART_FORM,
+  type ChartConfig,
+  MainChart,
+  UiModal,
+} from '@common/business_components';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
-import React, { useEffect, useState } from 'react';
-import moment from "moment";
 
 import type { TRdiiAnls } from './aplcnYms';
 import * as fn from './aplcnYms';
-import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
+import { useRdiiChartModalStore } from '../chartModalStore';
 
 type ModalOpenProp = {
-  pplMngNo: string, // 관로관리번호
-}
-// 차트
-type lineBarChartData = {
-    label : string;
-    lineVal0 : number;
-    barVal0 : number;
-}
+  pplMngNo?: string; // 관로관리번호
+};
 
+type LineBarChartData = {
+  label: string;
+  lineVal0: number;
+  barVal0: number;
+};
 
-const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
-  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어
-  const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업
-  const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
-  const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
-  const [aplcnYm, setAplcnYm] = useState("");
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+
+const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+  const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore();
+
+  const [aplcnYm, setAplcnYm] = useState('');
   const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
-  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options
+  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
+    INITIAL_ANALYSIS_OPTIONS,
+  );
   const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
-  const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0); // 강우유입수분석 정보 선택시 사용
-  const [chartData, setChartData] = useState<lineBarChartData[]>([]);
-  const [rdiiQty, setRdiiQty] = useState<string>("0"); // 강우유입수량
-  const [rainTotal, setRainTotal] = useState<string>("0"); // 적용강우량
-  const [totalVolume, setTotalVolume] = useState<string>("0"); // 총체적 m³/mm
+  const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0);// 강우유입수분석 정보 선택시 사용
+  const [chartData, setChartData] = useState<LineBarChartData[]>([]);
+  const [rdiiQty, setRdiiQty] = useState<string>('0');        // 강우유입수량
+  const [rainTotal, setRainTotal] = useState<string>('0');    // 적용강우량
+  const [totalVolume, setTotalVolume] = useState<string>('0');// 총체적 m³/mm
+
   const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
-  pplMngNo = "L"+pplMngNo; // "L13101003";
- 
-  const openPopup = () => {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
-      setPopupPosition({
-        top: rect.bottom + window.scrollY, // 버튼 아래쪽
-        left: rect.left + window.scrollX, // 버튼 왼쪽
-      });
-    }
-    setPopupOpen(true); // 팝업 열기
-  };
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
 
   const chartForm = CHART_FORM.LINEBAR2;
   const chartConfig = {
-     barVal0: {
+    barVal0: {
       label: '강수량',
-      color: "#33AAFF",
+      color: '#33AAFF',
     },
     lineVal0: {
       label: 'RDII',
-      color: "#FF0000",
+      color: '#FF0000',
     },
   } as ChartConfig;
 
+  const hasChartData = useMemo(() => chartData.length > 0, [chartData]);
+
+  const resetState = () => {
+    setAplcnYm(''); // 상수사용월 초기화
+    setRdiiAnlss([]); // 강우유입수분석 초기화
+    setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); // 강우유입수분석정보 초기화
+    setRdiiAnls(null); // 강우유입수분석정보 초기화
+    setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
+    setChartData([]);
+    setRdiiQty('0');  // 강우유입수량 초기화
+    setRainTotal('0');// 적용강우량 초기화
+    setTotalVolume('0');// 총체적 m³/mm 초기화
+  };
+
   useEffect(() => {
-    if (isModalOpen === false) {
-      setPopupOpen(true); // 모달이 닫힐 때 팝업은
-      setAplcnYm(""); // 상수사용월 초기화
-      setRdiiAnlss([]); // 강우유입수분석 초기화
-      setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
-      setRdiiAnls(null); // 강우유입수분석정보 초기화
-      setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
-      setChartData([]); // 차트 데이터 초기화
-      setRdiiQty("0"); // 강우유입수량 초기화
-      setRainTotal("0"); // 적용강우량 초기화
-      setTotalVolume("0"); // 총체적 m³/mm 초기화
+    if (!isModalOpen) {
+      resetState();
     }
   }, [isModalOpen]);
 
-  // 상수사용월 변경시 분석 정보 리스트 가져오기
-  useEffect(() => {
-    // aplcnYm이 비어있거나 "0"이면 API 호출하지 않음
-    if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") {
-      setRainInfwtAnlsSn(0); // 초기화
-      setRdiiAnlsInfos([]);
+  const handleAplcnYmChange = async (val: string | number) => {
+    const selectedValue = String(val);
+
+    setAplcnYm(selectedValue);
+    setRdiiAnlss([]);
+    setRdiiAnls(null);
+    setRainInfwtAnlsSn(0);
+    setChartData([]);
+    setRdiiQty('0');
+    setRainTotal('0');
+    setTotalVolume('0');
+
+    if (!selectedValue || selectedValue === '0') {
+      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
       return;
     }
-    fn.selectRdiiAnls(aplcnYm)
-      .then((data) => {
-        setRdiiAnlss(data ?? []); // 선택한 월의 분석성공한 RDII분석데이터[]
-        setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(data));
-        setRdiiAnls(null); // 오수전환율 이후 초기화
-        setRainInfwtAnlsSn(0); // 초기화
-      })
-      .catch((error) => {
-        console.error("selectrdiiAnls 에러:", error);
-        setRdiiAnlss([]);
-        setRdiiAnlsInfos([]);
-      });
-  }, [aplcnYm]);
 
-  // 값 표시
-  useEffect(() => {
-    // 선택된 강우유입수분석 정보에 대한 처리 로직
-    if (rainInfwtAnlsSn === 0) return;
-    const selectedAnls = rdiiAnlss.find(anls => anls.rainInfwtAnlsSn === rainInfwtAnlsSn);
-    if (selectedAnls) {
-      setRdiiAnls(selectedAnls);
+    try {
+      const data = await fn.selectRdiiAnls(selectedValue); // 상수사용월 변경시 분석 정보 리스트 가져오기
+      const list = data ?? [];
+      setRdiiAnlss(list);
+      setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(list));
+    } catch (error) {
+      console.error('selectRdiiAnls 에러:', error);
+      setRdiiAnlss([]);
+      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     }
-  }, [rainInfwtAnlsSn, rdiiAnlss]);
-
-  const closePopup = () => {  // 팝업 닫기
-    setPopupOpen(false);
-  }
-  const rdiiRsltChart = () => {  // 그래프 & 팝업 닫기
-    fetchFilteredData();
-    fn.selectPplRdiiQty(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수량 조회
-      setRdiiQty(Math.round(data?.rdiih*24).toLocaleString('ko-KR')); // cmd: m³/d 단위로 변환
-      if (data?.raintotal && data?.rainTotal !== 0) {
-        setRainTotal(data?.raintotal.toLocaleString('ko-KR')); // 총강우량mm
-        setTotalVolume(Math.round(data?.rdiih * data?.sustaintime / data?.raintotal).toLocaleString('ko-KR')); // 총체적 m³/mm
-      }
-    });
-    setPopupOpen(false);
   };
 
-  const fetchFilteredData: () => Promise<void> = async () => {
-    const rsltData = await fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo);
-    const rsltDataformatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []); // format 변경
-    const rainData = await fn.selectRainData(rainInfwtAnlsSn);
-    const rainDataformatted = fn.getChartDataRainData(rainData ?? []); // format 변경
-    const rainMap = new Map(rainDataformatted.map(item => [item.label, item.barVal0]));
+  const handleRdiiAnlsSnChange = (val: string | number) => {
+    const selectedValue = Number(val);
+
+    setRainInfwtAnlsSn(selectedValue);
+    setChartData([]);
+    setRdiiQty('0');
+    setRainTotal('0');
+    setTotalVolume('0');
+
+    if (selectedValue === 0) {
+      setRdiiAnls(null);
+      return;
+    }
+
+    const selectedAnls = rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null;
+    setRdiiAnls(selectedAnls);
+  };
+
+  const fetchFilteredData = async () => {
+    if (!rainInfwtAnlsSn || !normalizedPplMngNo) {
+      setChartData([]);
+      setRdiiQty('0');
+      setRainTotal('0');
+      setTotalVolume('0');
+      return;
+    }
+
+    try {
+      const [rsltData, rainData, qtyData] = await Promise.all([
+        fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, normalizedPplMngNo),
+        fn.selectRainData(rainInfwtAnlsSn),
+        fn.selectPplRdiiQty(rainInfwtAnlsSn, normalizedPplMngNo),
+      ]);
+
+      const rsltDataFormatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []);
+      const rainDataFormatted = fn.getChartDataRainData(rainData ?? []);
+      const rainMap = new Map(rainDataFormatted.map((item) => [item.label, item.barVal0]));
+
+      rsltDataFormatted.forEach((item) => {
+        const matchedVal = rainMap.get(item.label);
+        if (matchedVal !== undefined) {
+          item.barVal0 = matchedVal;
+        }
+      });
+
+      setChartData(rsltDataFormatted);// 차트 데이터 설정
+
+      const avgRdii = Number(qtyData?.rdiih ?? 0);
+      const appliedRainfall = Number(qtyData?.raintotal ?? 0);
+      const rdiiPerRainfall =
+        qtyData?.raintotal && qtyData?.raintotal !== 0
+          ? Math.round(avgRdii * Number(qtyData?.sustaintime ?? 0) / qtyData.raintotal)
+          : 0;
+
+      setRdiiQty(Math.round(avgRdii * 24).toLocaleString('ko-KR'));
+      setRainTotal(appliedRainfall.toLocaleString('ko-KR'));
+      setTotalVolume(rdiiPerRainfall.toLocaleString('ko-KR'));
+    } catch (error) {
+      console.error('rdiiRsltChart 에러:', error);
+      setChartData([]);
+      setRdiiQty('0');
+      setRainTotal('0');
+      setTotalVolume('0');
+    }
+  };
+
+  const renderInfoInput = (label: string, value?: string | number | null) => (
+    <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+      <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
+        {label}
+      </Label>
+      <Input
+        className="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white px-3 text-xl text-[#2b3440]"
+        placeholder=""
+        value={value ?? ''}
+        readOnly
+      />
+    </div>
+  );
 
-    rsltDataformatted.forEach(item => {
-      const matchedVal = rainMap.get(item.label);
-      if (matchedVal !== undefined) {
-        item.barVal0 = matchedVal;
-      }
-    });
-    setChartData(rsltDataformatted); // 차트 데이터 설정
-  }
   const renderBody = () => (
-    <>
-      <div className="text-black text-3xl font-bold mb-5">RDII분석결과</div>
-
-      <div className='grid grid-cols-[1fr_3fr] gap-4'>
-        <div className="grid grid-rows-4 gap-4 mb-4">
-          <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
-            분석 입력현황 조회
-          </Button>
-          {/* 상수사용량 적용연월 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 상수사용량 적용연월</span>
-            <div className="flex items-center mt-2">
-              <span className="ml-5 text-black text-xl font-bold">
-                {(aplcnYm)? moment(aplcnYm, "YYYYMM").format("YYYY-MM"):""}
-              </span>
-            </div>
-          </div>
-        
-          {/* 강우유입수량 분석결과 */}
-          <div className="bg-white px-4 py-2 ">
-            <span className="text-2xl text-red-600 font-bold">● 강우유입수량 분석결과</span>
-            <div className="flex items-center mt-2">
-              <span className="w-[95px] inline-block text-right text-black text-xl">평균RDII : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold"> {rdiiQty}</span>
-              <span className="ml-2 text-black"> m³/d</span>
-            </div>
-            <div className="flex items-center mt-2">
-              <span className="w-[95px] inline-block text-right text-black text-xl">적용강우량 : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold"> {rainTotal}</span>
-              <span className="ml-2 text-black"> mm</span>
-            </div>
-            <div className="flex items-center mt-2">
-              <span className="w-[95px] inline-block text-right text-black text-xl">강우량대비RDII : </span>
-              <span className="w-[45px] inline-block text-right text-black text-xl font-bold"> {totalVolume}</span>
-              <span className="ml-2 text-black"> m³/mm</span>
-            </div>
-          </div>
-        </div>
-        {/* 차트 */}
-        <div className="h-[90%] bg-white text-2xl">
-          <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'RDII 그래프'}
-                    yFieldText2="강수량(mm)" yFieldText="유량(m³/h)" />
-        </div>
+    <div className="text-black">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="text-[18px] font-semibold text-[#111827]" />
       </div>
-      {popupOpen && (
-        <div
-          className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
-          style={{
-            top: popupPosition.top,
-            left: popupPosition.left,
-            zIndex: 1000,
-          }}
-        >
-          <div className="font-bold mb-6 text-3xl">강우유입수분석 입력현황</div>
-          <div className='flex flex-col'>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
-                selectArray={aplcnYms}
-                value={aplcnYm}
-                onSelectValue={(val) => {
-                  setAplcnYm(String(val));
-                }}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
-              <SelectBox
-                className="w-[220px] mr-8 z-[51] mb-2"
-                selectClass="rounded-lg bg-white"
-                label=''
-                selectArray={rdiiAnlsInfos}
-                value={rainInfwtAnlsSn}
-                onSelectValue={(val) => {
-                  setRainInfwtAnlsSn(Number(val));
-                }}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.drtwSwtcRt ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.atflMpngNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.atflInpNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">강우 파일명:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.atflRainNm ?? ""}
-                readOnly={true}
-              />
-            </div>
-            <div className='flex items-center justify-between'>
-              <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">RTK계수 출처:</Label>
-              <Input
-                className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
-                placeholder=""
-                value={rdiiAnls?.srcNm ?? ""}
-                readOnly={true}
-              />
+
+      <div className="grid min-h-[68vh] grid-cols-[440px_minmax(0,1fr)] gap-5">
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+            강우유입수분석 선택 조건
+          </h3>
+
+          <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
+            <div className="space-y-3">
+              <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
+                  상수사용월:
+                </Label>
+                <SelectBox
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
+                  selectArray={aplcnYms}
+                  value={aplcnYm}
+                  onSelectValue={handleAplcnYmChange}
+                />
+              </div>
+
+              <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
+                  분석정보:
+                </Label>
+                <SelectBox
+                  className="w-full"
+                  selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
+                  label=""
+                  selectArray={rdiiAnlsInfos}
+                  value={rainInfwtAnlsSn}
+                  onSelectValue={handleRdiiAnlsSnChange}
+                />
+              </div>
+
+              {renderInfoInput('오수전환율:', rdiiAnls?.drtwSwtcRt ?? '')}
+              {renderInfoInput('수용가-맨홀 매칭:', rdiiAnls?.atflMpngNm ?? '')}
+              {renderInfoInput('관망도 파일명:', rdiiAnls?.atflInpNm ?? '')}
+              {renderInfoInput('강우 파일명:', rdiiAnls?.atflRainNm ?? '')}
+              {renderInfoInput('RTK계수 출처:', rdiiAnls?.srcNm ?? '')}
             </div>
           </div>
-          <div className="flex justify-end mt-4 space-x-2">
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
-              닫기
-            </button>
-            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={rdiiRsltChart}>
-              선택조건 적용
-            </button>
+
+          <div className="absolute inset-x-0 bottom-0 mb-[40px] flex justify-center">
+            <Button size="lg" onClick={fetchFilteredData}>
+              조회
+            </Button>
+            &nbsp;&nbsp;
+            <Button size="lg" color="gray" onClick={resetState}>
+              초기화
+            </Button>
           </div>
-        </div>)}
-      {/* </Modal > */}
-    </>
-  )
+        </section>
+
+        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+            강우유입수분석 결과
+          </h3>
+
+          <div className="mb-6 grid grid-cols-2 gap-5">
+            <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                <span>상수사용량 적용연월</span>
+              </div>
+              <div className="text-[20px] font-extrabold text-[#222]">
+                {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+              </div>
+            </div>
+
+            <div className="rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+              <div className="mb-3 flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
+                <span>강우유입수량 분석결과</span>
+              </div>
+              <div className="space-y-2 text-[#222]">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="text-[16px] text-[#666]">평균RDII</span>
+                  <div className="flex items-end gap-2">
+                    <span className="text-[20px] font-extrabold">{rdiiQty}</span>
+                    <span className="pb-[2px] text-[16px]">m³/d</span>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <span className="text-[16px] text-[#666]">적용강우량</span>
+                  <div className="flex items-end gap-2">
+                    <span className="text-[20px] font-extrabold">{rainTotal}</span>
+                    <span className="pb-[2px] text-[16px]">mm</span>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <span className="text-[16px] text-[#666]">강우량대비 RDII</span>
+                  <div className="flex items-end gap-2">
+                    <span className="text-[20px] font-extrabold">{totalVolume}</span>
+                    <span className="pb-[2px] text-[16px]">m³/mm</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+            {hasChartData ? (
+              <MainChart
+                chartConfig={chartConfig}
+                chartForm={chartForm}
+                chartData={chartData}
+                chartTitle={'RDII 그래프'}
+                yFieldText2="강수량(mm)"
+                yFieldText="유량(m³/h)"
+              />
+            ) : (
+              <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+                데이터가 없습니다.
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
 
   return (
     <UiModal
@@ -284,17 +320,17 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
       onOpenChange={setIsModalOpen}
       headerTitle=""
       bodyClass={`
-            min-h-[50vh]
-            w-[55vw]
-            max-w-none
-            max-h-none
-            overflow-visible
-            z-[50]
-          `}
+        w-[78vw]
+        max-w-none
+        min-h-[74vh]
+        max-h-none
+        overflow-visible
+        z-[50]
+      `}
       body={renderBody()}
-      noFooterYn = 'Y'
+      noFooterYn="Y"
     />
-  )
-}
+  );
+};
 
-export default React.memo(RdiiChart);
\ No newline at end of file
+export default React.memo(RdiiChart);

From daaff4a4ca312791b6a3445a9256a2c973cb11b8 Mon Sep 17 00:00:00 2001
From: LGS <patanus1@gmail.com>
Date: Wed, 18 Mar 2026 13:16:17 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=EB=A7=B5=20[=EC=B9=A8=EC=9E=85=EC=88=98=20?=
 =?UTF-8?q?=EB=B6=84=EC=84=9D]=20[RDII=EB=B6=84=EC=84=9D]=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/infilChart.tsx       |  12 +-
 .../popupComponent/chart/rdiiChart.tsx        | 120 ++++++++++--------
 2 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index d9ccccf0e..b01ce79c9 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -229,7 +229,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
           <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
 
           <div className="mb-6 grid grid-cols-2 gap-5">
-            <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
               <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
                 {/* <span className="text-[14px] leading-none">●</span> */}
                 <span>상수사용량 적용연월</span>
@@ -239,15 +239,17 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
               </div>
             </div>
 
-            <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
+            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
               <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
                 {/* <span className="text-[14px] leading-none">●</span> */}
                 <span>침입수량 산정결과</span>
               </div>
-              <div className="flex items-end gap-2 text-[#222]">
+              <div className="grid grid-cols-[1fr_auto] items-center gap-7 text-[#222]">
                 <span className="text-[16px] text-[#666]">침입수량</span>
-                <span className="text-[20px] font-extrabold">{inftwtQty}</span>
-                <span className="pb-[2px] text-[16px]">m³/d</span>
+                <div className='w-[66px] flex items-end justify-start gap-2'>
+                    <span className="text-[20px] font-extrabold">{inftwtQty}</span>
+                    <span className="pb-[2px] text-[16px]">m³/d</span>
+                </div>
               </div>
             </div>
           </div>
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index 12289254c..359b7978c 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -249,66 +249,76 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
         </section>
 
         <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
-          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
-            강우유입수분석 결과
-          </h3>
+            <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
+                강우유입수분석 결과
+            </h3>
 
-          <div className="mb-6 grid grid-cols-2 gap-5">
-            <div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
-              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
-                <span>상수사용량 적용연월</span>
-              </div>
-              <div className="text-[20px] font-extrabold text-[#222]">
-                {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
-              </div>
+            <div className="mb-6 grid grid-cols-2 gap-5">
+                {/* 좌측 카드 */}
+                <div className="flex min-h-[98px] items-center justify-between rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                <div className="text-[16px] font-bold text-[#ef4444]">
+                    상수사용량 적용연월
+                </div>
+                <div className="text-[24px] font-extrabold leading-none text-[#111]">
+                    {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
+                </div>
+                </div>
+
+                {/* 우측 카드 */}
+                <div className="flex min-h-[98px] items-center rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                    {/* 좌측: 제목 (세로 가운데 정렬) */}
+                    <div className="flex h-full items-center">
+                        <span className="text-[16px] font-bold text-[#ef4444]">
+                        강우유입수량 분석결과
+                        </span>
+                    </div>
+
+                    {/* 우측: 지표 영역 */}
+                    <div className="ml-auto flex flex-col gap-2 text-right">
+                        
+                        <div className="grid grid-cols-[1fr_auto] items-center gap-7">
+                            <span className="text-[15px] text-[#555]">평균RDII</span>
+                            <div className="w-[66px] flex items-end justify-start gap-2">
+                                <span className="text-[18px] font-extrabold text-[#111]">{rdiiQty}</span>
+                                <span className="text-[14px] text-[#111]">m³/d</span>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-[1fr_auto] items-center gap-7">
+                            <span className="text-[15px] text-[#555]">적용 강우량</span>
+                            <div className="w-[66px] flex items-end justify-start gap-2">
+                                <span className="text-[18px] font-extrabold text-[#111]">{rainTotal}</span>
+                                <span className="text-[14px] text-[#111]">mm</span>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-[1fr_auto] items-center gap-7">
+                            <span className="text-[15px] text-[#555]">강우량 대비 RDII</span>
+                            <div className="w-[66px] flex items-end justify-start gap-2">
+                                <span className="text-[18px] font-extrabold text-[#111]">{totalVolume}</span>
+                                <span className="text-[14px] text-[#111]">m³/mm</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
 
-            <div className="rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
-              <div className="mb-3 flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
-                <span>강우유입수량 분석결과</span>
-              </div>
-              <div className="space-y-2 text-[#222]">
-                <div className="flex items-center justify-between gap-3">
-                  <span className="text-[16px] text-[#666]">평균RDII</span>
-                  <div className="flex items-end gap-2">
-                    <span className="text-[20px] font-extrabold">{rdiiQty}</span>
-                    <span className="pb-[2px] text-[16px]">m³/d</span>
-                  </div>
+            <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+                {hasChartData ? (
+                <MainChart
+                    chartConfig={chartConfig}
+                    chartForm={chartForm}
+                    chartData={chartData}
+                    chartTitle={'RDII 그래프'}
+                    yFieldText2="강수량(mm)"
+                    yFieldText="유량(m³/h)"
+                />
+                ) : (
+                <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+                    데이터가 없습니다.
                 </div>
-                <div className="flex items-center justify-between gap-3">
-                  <span className="text-[16px] text-[#666]">적용강우량</span>
-                  <div className="flex items-end gap-2">
-                    <span className="text-[20px] font-extrabold">{rainTotal}</span>
-                    <span className="pb-[2px] text-[16px]">mm</span>
-                  </div>
-                </div>
-                <div className="flex items-center justify-between gap-3">
-                  <span className="text-[16px] text-[#666]">강우량대비 RDII</span>
-                  <div className="flex items-end gap-2">
-                    <span className="text-[20px] font-extrabold">{totalVolume}</span>
-                    <span className="pb-[2px] text-[16px]">m³/mm</span>
-                  </div>
-                </div>
-              </div>
+                )}
             </div>
-          </div>
-
-          <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
-            {hasChartData ? (
-              <MainChart
-                chartConfig={chartConfig}
-                chartForm={chartForm}
-                chartData={chartData}
-                chartTitle={'RDII 그래프'}
-                yFieldText2="강수량(mm)"
-                yFieldText="유량(m³/h)"
-              />
-            ) : (
-              <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
-                데이터가 없습니다.
-              </div>
-            )}
-          </div>
         </section>
       </div>
     </div>

From 165c7bcbbfa9a4a241f6cdc3c6c404b4f1a33aef Mon Sep 17 00:00:00 2001
From: LGS <patanus1@gmail.com>
Date: Wed, 18 Mar 2026 14:13:08 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=EC=B9=A8=EC=9E=85=EC=88=98=20=EB=B6=84?=
 =?UTF-8?q?=EC=84=9D=EA=B2=B0=EA=B3=BC=20[=EA=B0=95=EC=9A=B0=EC=9C=A0?=
 =?UTF-8?q?=EC=9E=85=EC=88=98=EB=B6=84=EC=84=9D=EA=B2=B0=EA=B3=BC]=20?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=E5=85=A7=203=EA=B0=9C=20=EC=88=AB?=
 =?UTF-8?q?=EC=9E=90=20=EB=8B=A8=EC=9C=84=20=EC=A0=95=EB=A0=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/rdiiChart.tsx        | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index 359b7978c..58d9f9a49 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -275,28 +275,39 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
 
                     {/* 우측: 지표 영역 */}
                     <div className="ml-auto flex flex-col gap-2 text-right">
-                        
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-7">
+                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
                             <span className="text-[15px] text-[#555]">평균RDII</span>
-                            <div className="w-[66px] flex items-end justify-start gap-2">
-                                <span className="text-[18px] font-extrabold text-[#111]">{rdiiQty}</span>
-                                <span className="text-[14px] text-[#111]">m³/d</span>
+                            <div className="flex justify-end">
+                                <div className="flex items-end gap-2">
+                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                        {rdiiQty}
+                                    </span>
+                                    <span className="w-[52px] text-left text-[14px] text-[#111]">m³/d</span>
+                                </div>
                             </div>
                         </div>
 
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-7">
+                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
                             <span className="text-[15px] text-[#555]">적용 강우량</span>
-                            <div className="w-[66px] flex items-end justify-start gap-2">
-                                <span className="text-[18px] font-extrabold text-[#111]">{rainTotal}</span>
-                                <span className="text-[14px] text-[#111]">mm</span>
+                            <div className="flex justify-end">
+                                <div className="flex items-end gap-2">
+                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                        {rainTotal}
+                                    </span>
+                                    <span className="w-[52px] text-left text-[14px] text-[#111]">mm</span>
+                                </div>
                             </div>
                         </div>
 
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-7">
+                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
                             <span className="text-[15px] text-[#555]">강우량 대비 RDII</span>
-                            <div className="w-[66px] flex items-end justify-start gap-2">
-                                <span className="text-[18px] font-extrabold text-[#111]">{totalVolume}</span>
-                                <span className="text-[14px] text-[#111]">m³/mm</span>
+                            <div className="flex justify-end">
+                                <div className="flex items-end gap-2">
+                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                        {totalVolume}
+                                    </span>
+                                    <span className="w-[52px] text-left text-[14px] text-[#111]">m³/mm</span>
+                                </div>
                             </div>
                         </div>
                     </div>

From 53356228a7dc31236905bcd9b8a18ca346b7da94 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 18 Mar 2026 15:24:32 +0900
Subject: [PATCH 8/8] =?UTF-8?q?sn:=20=EA=B0=95=EC=9A=B0=EC=9C=A0=EC=9E=85?=
 =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/rdiiChart.tsx        | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index 58d9f9a49..07286bcbe 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -265,49 +265,49 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 </div>
 
                 {/* 우측 카드 */}
-                <div className="flex min-h-[98px] items-center rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                <div className="flex min-h-[98px] min-w-0 items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
                     {/* 좌측: 제목 (세로 가운데 정렬) */}
-                    <div className="flex h-full items-center">
-                        <span className="text-[16px] font-bold text-[#ef4444]">
-                        강우유입수량 분석결과
-                        </span>
+                    <div className="flex min-w-0 basis-[32%] items-center">
+                        <div className="text-[16px] font-bold text-[#ef4444] break-keep">
+                            강우유입수량 분석결과
+                        </div>
                     </div>
 
                     {/* 우측: 지표 영역 */}
-                    <div className="ml-auto flex flex-col gap-2 text-right">
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
-                            <span className="text-[15px] text-[#555]">평균RDII</span>
-                            <div className="flex justify-end">
-                                <div className="flex items-end gap-2">
-                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                        {rdiiQty}
-                                    </span>
-                                    <span className="w-[52px] text-left text-[14px] text-[#111]">m³/d</span>
-                                </div>
+                    <div className="flex min-w-0 basis-[68%] flex-col gap-[2px]">
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[42%] text-right text-[15px] text-[#555]">
+                                평균RDII
+                            </div>
+                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rdiiQty}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/d
                             </div>
                         </div>
 
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
-                            <span className="text-[15px] text-[#555]">적용 강우량</span>
-                            <div className="flex justify-end">
-                                <div className="flex items-end gap-2">
-                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                        {rainTotal}
-                                    </span>
-                                    <span className="w-[52px] text-left text-[14px] text-[#111]">mm</span>
-                                </div>
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[42%] text-right text-[15px] text-[#555]">
+                                적용 강우량
+                            </div>
+                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rainTotal}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                mm
                             </div>
                         </div>
 
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
-                            <span className="text-[15px] text-[#555]">강우량 대비 RDII</span>
-                            <div className="flex justify-end">
-                                <div className="flex items-end gap-2">
-                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                        {totalVolume}
-                                    </span>
-                                    <span className="w-[52px] text-left text-[14px] text-[#111]">m³/mm</span>
-                                </div>
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[42%] text-right text-[15px] text-[#555]">
+                                강우량 대비 RDII
+                            </div>
+                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {totalVolume}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/mm
                             </div>
                         </div>
                     </div>