From b0c070437fb6f9cf3448c2f3e8489be7966eb4a0 Mon Sep 17 00:00:00 2001
From: dongsilove <ljparkmindone@gmail.com>
Date: Mon, 22 Dec 2025 16:28:11 +0900
Subject: [PATCH] =?UTF-8?q?sn:=20=EC=84=B8=EB=A1=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/(with-layout)/dashboard/page.tsx    | 98 +++++++++----------
 .../(with-base-layout)/oper/floodPre/page.tsx |  1 +
 .../oper/floodPre/tableModal.tsx              |  2 +-
 3 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/apps/fo/app/pages/(with-layout)/dashboard/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/page.tsx
index a6cf99008..8d431cf75 100644
--- a/apps/fo/app/pages/(with-layout)/dashboard/page.tsx
+++ b/apps/fo/app/pages/(with-layout)/dashboard/page.tsx
@@ -19,7 +19,7 @@ import { roundNumber } from "@/app/components/common/DataForm";
 
 const tabList = [
   { value: 'facilityInfo', label: '시설정보 및 운영현황' },
-  { value: 'mainGraph', label:  '주요그래프' },
+  { value: 'mainGraph', label: '주요그래프' },
   { value: 'rainManage', label: '강우일 운영현황' },
   //{ value: 'drainageEquipment', label: '배수설비 정비현황' }
 ];
@@ -42,7 +42,7 @@ export const generateYearDates = (searchYear: string) => {
 
 export default function DashBoard() {
   // 입력값 상태 관리
-  const { Common, initializeCommonData,searchMainGraph, searchRainManage, searchOperationStatus, OperationStatus, RainManage, MainGraph, PlanFclty } = useFoStore((state) => state);
+  const { Common, initializeCommonData, searchMainGraph, searchRainManage, searchOperationStatus, OperationStatus, RainManage, MainGraph, PlanFclty } = useFoStore((state) => state);
   const [activeTab, setActiveTab] = useState<string>('facilityInfo');
 
   const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
@@ -55,7 +55,7 @@ export default function DashBoard() {
     selectSidoData,
     selectSigunData,
   } = Common;
-  
+
   const {
     planFcltyList
   } = PlanFclty;
@@ -82,7 +82,7 @@ export default function DashBoard() {
   // 연도
   const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || '0');
   // 시설명
-  const [fcltyList, setFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
+  const [fcltyList, setFcltyList] = useState<{ bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }>({
     bscFctCd: '11000SW001R',
     bscFctNm: '난지',
     fcltyCpc: 860000,
@@ -90,7 +90,7 @@ export default function DashBoard() {
     efflWqltStndrdNm: '500톤 이상(Ⅲ지역)'
   });
 
-  const [searchFcltyList, setSearchFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
+  const [searchFcltyList, setSearchFcltyList] = useState<{ bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }>({
     bscFctCd: '',
     bscFctNm: '',
     fcltyCpc: '',
@@ -116,7 +116,7 @@ export default function DashBoard() {
   };
 
   const onSelectValue = (val: string, type: string) => {
-    switch(type) {
+    switch (type) {
       case 'sido':
         setSidoValue(val);
         initializeSigunData(val);
@@ -145,11 +145,11 @@ export default function DashBoard() {
 
   const excelDownload = () => {
     if (!fcltyList.bscFctCd) return;
-    
+
     switch (activeTab) {
-      case 'facilityInfo':
-        searchOperationStatus(false, searchYear, fcltyList.bscFctCd).then(() => {setTimeout(() => {makeExcelData();}, 200);});
-        
+      case 'facilityInfo': // 시설정보 및 운영현황
+        searchOperationStatus(false, searchYear, fcltyList.bscFctCd).then(() => { setTimeout(() => { makeExcelData(); }, 200); });
+
         const makeExcelData = async () => {
           fetch(`/mainDashBoard.xlsx`, {}).then(async (response) => {
             if (!response.ok) {
@@ -161,7 +161,7 @@ export default function DashBoard() {
             const excelData1 = planFcltyList.map((item) => {
               return [
                 item.item,
-                item.provisionalApproval?Number(item.provisionalApproval.toString().replaceAll(',',''))?Number(item.provisionalApproval.toString().replaceAll(',','')):item.provisionalApproval:'',
+                item.provisionalApproval ? Number(item.provisionalApproval.toString().replaceAll(',', '')) ? Number(item.provisionalApproval.toString().replaceAll(',', '')) : item.provisionalApproval : '',
                 item.now,
                 item.stepOne,
                 item.stepTwo,
@@ -172,25 +172,25 @@ export default function DashBoard() {
 
             // operationalStatusList를 2차원 배열로 변환
             const excelData2 = operationalStatusList.map((item, index) => {
-              console.log(item.yearAvg+' '+item.yearMax+' '+item.yearMin);
+              console.log(item.yearAvg + ' ' + item.yearMax + ' ' + item.yearMin);
               const baseData = [
-                Number(item.yearAvg?.toString().replaceAll(',','')),
-                Number(item.yearMax?.toString().replaceAll(',','')),
-                Number(item.yearMin?.toString().replaceAll(',','')),
-                Number(item.summerAll?.toString().replaceAll(',','')),
-                Number(item.summerThree?.toString().replaceAll(',','')),
-                Number(item.summerRain?.toString().replaceAll(',','')),
-                Number(item.winterAll?.toString().replaceAll(',','')),
-                Number(item.winterSunnyAvg?.toString().replaceAll(',','')),
-                Number(item.winterSunnyMax?.toString().replaceAll(',','')),
-                Number(item.winterSunnyMin?.toString().replaceAll(',','')),
-                Number(item.groundWaterAvg?.toString().replaceAll(',','').replaceAll('%','')),
-                Number(item.groundWaterSummer?.toString().replaceAll(',','').replaceAll('%','')),
-                Number(item.groundWaterWinter?.toString().replaceAll(',','').replaceAll('%',''))
+                Number(item.yearAvg?.toString().replaceAll(',', '')),
+                Number(item.yearMax?.toString().replaceAll(',', '')),
+                Number(item.yearMin?.toString().replaceAll(',', '')),
+                Number(item.summerAll?.toString().replaceAll(',', '')),
+                Number(item.summerThree?.toString().replaceAll(',', '')),
+                Number(item.summerRain?.toString().replaceAll(',', '')),
+                Number(item.winterAll?.toString().replaceAll(',', '')),
+                Number(item.winterSunnyAvg?.toString().replaceAll(',', '')),
+                Number(item.winterSunnyMax?.toString().replaceAll(',', '')),
+                Number(item.winterSunnyMin?.toString().replaceAll(',', '')),
+                Number(item.groundWaterAvg?.toString().replaceAll(',', '').replaceAll('%', '')),
+                Number(item.groundWaterSummer?.toString().replaceAll(',', '').replaceAll('%', '')),
+                Number(item.groundWaterWinter?.toString().replaceAll(',', '').replaceAll('%', ''))
               ];
-              
+
               // index가 0일 때만 rdi와 rdiRain 추가
-              return index === 0 ? [...baseData, item.rdi&&item.rdi.toString().trim()!=''?Number(item.rdi.toString().replaceAll(',','')):'', item.rdiRain&&item.rdiRain.toString().trim()!=''?Number(item.rdiRain.toString().replaceAll(',','')):''] : baseData;
+              return index === 0 ? [...baseData, item.rdi && item.rdi.toString().trim() != '' ? Number(item.rdi.toString().replaceAll(',', '')) : '', item.rdiRain && item.rdiRain.toString().trim() != '' ? Number(item.rdiRain.toString().replaceAll(',', '')) : ''] : baseData;
             });
 
             const sheetParameter = [
@@ -215,32 +215,32 @@ export default function DashBoard() {
         };
         break;
 
-      case 'mainGraph':
+      case 'mainGraph': // 주요그래프
         searchMainGraph(searchYear, fcltyList.bscFctCd);
         const yearData = generateYearDates(searchYear);
-        const yearValueData : any = [];
+        const yearValueData: any = [];
 
-        for (const i in yearData){
+        for (const i in yearData) {
           const rowArray: string[] = [];
           rowArray.push(yearData[i] ?? "");
           //강수량
-          rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.barVal0?.toString(), 1) || '');
+          rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.barVal0?.toString(), 1) || '');
           //유입하수량
-          rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal1?.toString(), 0) || '');
+          rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal1?.toString(), 0) || '');
           //시설용량
-          rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal0?.toString(), 0) || '');
+          rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal0?.toString(), 0) || '');
           //유입BOD
-          rowArray.push(roundNumber(chart_bodRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal0?.toString(), 1) || '');
+          rowArray.push(roundNumber(chart_bodRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal0?.toString(), 1) || '');
           //유입T-P
-          rowArray.push(roundNumber(chart_inflTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_inflTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //총인유입T-P
-          rowArray.push(roundNumber(chart_chongInTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_chongInTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //방류T-P
-          rowArray.push(roundNumber(chart_efflTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_efflTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //유입T-N
-          rowArray.push(roundNumber(chart_inflTn.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_inflTn.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //방류T-N
-          rowArray.push(roundNumber(chart_efflTn.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_efflTn.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
 
           yearValueData.push(
             rowArray
@@ -250,7 +250,7 @@ export default function DashBoard() {
 
         const sheetParameter = [
           {
-            data: [['날짜', '강수량', '유입하수량', '지하수유입량', '유입BOD', '유입T-P','총인유입T-P', '방류T-P', '유입T-N', '방류T-N'],...yearValueData],
+            data: [['날짜', '강수량', '유입하수량', '지하수유입량', '유입BOD', '유입T-P', '총인유입T-P', '방류T-P', '유입T-N', '방류T-N'], ...yearValueData],
             headerNum: 1,
             headerRange: 'A1:J1',
             sheetName: '주요그래프'
@@ -314,7 +314,7 @@ export default function DashBoard() {
         downloadMultipleExcel('주요그래프', sheetParameter);
         break;
 
-      case 'rainManage':
+      case 'rainManage': // 강우일 운영현황
         searchRainManage(searchYear, fcltyList.bscFctCd, true);
         if (excelList && excelList.length > 0) {
           downloadExcel({ data: excelList as unknown as JSON[], fileName: '강우일 운영현황', sheetNameArray: ['강우일 운영현황'], headerRange: 'A1:T1' });
@@ -351,7 +351,7 @@ export default function DashBoard() {
 
   const searchVal = () => {
     setSearchFcltyList(fcltyList);
-    if(searchFcltyList.bscFctCd) {
+    if (searchFcltyList.bscFctCd) {
       searchOperationStatus(false, searchYear, fcltyList.bscFctCd);
     }
   }
@@ -361,11 +361,11 @@ export default function DashBoard() {
       <ContentsDiv>
         <div className="flex card card-border !mt-6">
           <div className="grid grid-cols-12 gap-5 w-8/12 m-4">
-            <SelectBox className="col-span-2" label={'연도'} selectArray={selectSearchYear} onSelectValue={ (val) => setSearchYear(val.toString()) } value={searchYear} selectClass={undefined}/>
-            <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
-            <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
+            <SelectBox className="col-span-2" label={'연도'} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined} />
             <div className="col-span-4 flex">
-              <DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue!='0'?sigunValue:sidoValue!='0'?sidoValue:''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
+              <DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue != '0' ? sigunValue : sidoValue != '0' ? sidoValue : ''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
             </div>
           </div>
           <div className="w-4/12 mx-5 flex items-center justify-end space-x-2">
@@ -385,13 +385,13 @@ export default function DashBoard() {
             <ProcessFacilitySearch searchYear={searchYear} fcltyList={[searchFcltyList]} onFacilityChange={handleFacilityChange} />
           </TabsContent>
           <TabsContent value="mainGraph">
-            <DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]}/>
+            <DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]} />
           </TabsContent>
           <TabsContent value="rainManage">
-            <RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]}/>
+            <RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]} />
           </TabsContent>
           <TabsContent value="drainageEquipment">
-            <DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]}/>
+            <DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]} />
           </TabsContent>
         </UITab>
       </ContentsDiv>
diff --git a/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx b/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
index ada56d443..4b1db105b 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
@@ -281,6 +281,7 @@ const Page = () => {
               max-h-[100dvh]
               overflow-hidden
               z-[101]
+              flex flex-col gap-[10px]
             `}
         body={<TableModal fileNm={fileNm} atflId={atflId} />}
         useDirectRender={true}
diff --git a/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx b/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
index 1b6b18bb2..97e9d788d 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
@@ -220,7 +220,7 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
       {/* 관리SHEET 탭 */}
       {activeTab === 'management' && (
         <div className="h-[79vh] rounded-lg border flex flex-col">
-          <div className="flex-1 min-w-[50vw] max-w-[90vw] overflow-auto">
+          <div className="flex-1 min-w-[50vw] max-w-[100vw] overflow-auto">
             <LoadingOverlay isLoading={isLoading} />
             <div className="min-w-max">
               <UiTable