From cb8743ea3932b1b3d556e8f2c5b6040ca94fd2d3 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 18 Mar 2026 16:15:25 +0900
Subject: [PATCH] =?UTF-8?q?sn:=20=EB=B6=84=EC=84=9D=ED=99=94=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/infilChart.tsx       | 12 +++---
 .../popupComponent/chart/rdiiChart.tsx        | 42 +++++++++----------
 2 files changed, 27 insertions(+), 27 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 b01ce79c9..3836b87f6 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,7 +150,7 @@ 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">
+    <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
       <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">{label}</Label>
       <Input
         className="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white px-3 text-xl md:text-xl text-[#2b3440]"
@@ -171,7 +171,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
         <div className="text-[18px] font-semibold text-[#111827]" />
       </div>
 
-      <div className="grid min-h-[68vh] grid-cols-[440px_minmax(0,1fr)] gap-5">
+      <div className="grid min-h-[68vh] grid-cols-[minmax(0,38%)_minmax(0,62%)] 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">
             침입수 분석 선택 조건
@@ -179,7 +179,7 @@ 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">
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
                 <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">
                   상수사용월:
                 </Label>
@@ -193,7 +193,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 />
               </div>
 
-              <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
                 <Label className="w-auto text-[14px] font-semibold text-[#5c6470] whitespace-nowrap">
                   분석정보:
                 </Label>
@@ -283,8 +283,8 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
       bodyClass={`
         w-[78vw]
         max-w-none
-        min-h-[74vh]
-        max-h-none
+        min-w-[1000px]
+        min-h-[72vh]
         overflow-visible
         z-[50]
       `}
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 07286bcbe..aa622be1b 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
@@ -174,7 +174,7 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
   };
 
   const renderInfoInput = (label: string, value?: string | number | null) => (
-    <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+    <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
       <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
         {label}
       </Label>
@@ -193,7 +193,7 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
         <div className="text-[18px] font-semibold text-[#111827]" />
       </div>
 
-      <div className="grid min-h-[68vh] grid-cols-[440px_minmax(0,1fr)] gap-5">
+      <div className="grid min-h-[68vh] grid-cols-[minmax(0,36%)_minmax(0,64%)] 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">
             강우유입수분석 선택 조건
@@ -201,7 +201,7 @@ const RdiiChart = ({ 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">
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
                 <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
                   상수사용월:
                 </Label>
@@ -215,7 +215,7 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 />
               </div>
 
-              <div className="grid grid-cols-[125px_minmax(0,1fr)] items-center gap-3">
+              <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
                 <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
                   분석정보:
                 </Label>
@@ -253,19 +253,19 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 강우유입수분석 결과
             </h3>
 
-            <div className="mb-6 grid grid-cols-2 gap-5">
+            <div className="mb-6 flex 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 className="flex min-h-[98px] min-w-0 basis-2/5 grow shrink-[1.4] 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] min-w-0 items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                <div className="flex min-h-[98px] min-w-0 basis-3/5 grow shrink items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
                     {/* 좌측: 제목 (세로 가운데 정렬) */}
                     <div className="flex min-w-0 basis-[32%] items-center">
                         <div className="text-[16px] font-bold text-[#ef4444] break-keep">
@@ -276,10 +276,10 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                     {/* 우측: 지표 영역 */}
                     <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]">
+                            <div className="min-w-0 basis-[48%] 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">
+                            <div className="min-w-0 basis-[32%] 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]">
@@ -288,10 +288,10 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                         </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 className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
                                 적용 강우량
                             </div>
-                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                            <div className="min-w-0 basis-[32%] 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]">
@@ -300,10 +300,10 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                         </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 className="min-w-0 basis-[48%] 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">
+                            <div className="min-w-0 basis-[32%] 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]">
@@ -343,8 +343,8 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
       bodyClass={`
         w-[78vw]
         max-w-none
-        min-h-[74vh]
-        max-h-none
+        min-w-[1100px]
+        min-h-[72vh]
         overflow-visible
         z-[50]
       `}