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] =?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>