Merge branch 'main' of https://www.onasys.co.kr:3000/ONAANDALL/frontend

apps/dm/app/(base-layout)/pages/sdmMng/sdmInsert/page.tsx

@@ -58,6 +58,7 @@ export default function MyForm() {
           dataList={demandCompList}
           rtnValue={callback}
           rtnInputData={handleInsertSdmData}
+          openNetwork={true}
         />
         <Toaster position="top-center" />
       </div>

apps/dm/app/(base-layout)/pages/wrStatus/page.tsx

@@ -22,7 +22,10 @@ interface WrStatusChartProps {
 
 export default function WrStatusPage() {
 
-  const { dmStatus, getDmStatusData} = useDmStore((state) => state);
+
+
+
+  const { Common, dmStatus, getDmStatusData,initializeCommonData} = useDmStore((state) => state);
   const { statusData,facilityTotals ,chartData} = dmStatus;
   const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
   const [hoveredRegion, setHoveredRegion] = useState<string | null>(null);
@@ -33,10 +36,9 @@ export default function WrStatusPage() {
     { label: '하수', color: '#FF6B6B', key: 'sewage' },
     { label: '빗물', color: '#4ECDC4', key: 'rainwater' },
     { label: '중수도', color: '#45B7D1', key: 'reclaimed' },
-    { label: '온배수', color: '#FED16A', key: 'thermal' },
   ];
   const facilityTotalsColor = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
-
+  const defaultYear= '2023'
 
 
   const handleMarkerClick = (regionId: string) => {
@@ -47,6 +49,11 @@ export default function WrStatusPage() {
     }
   };
 
+
+  useEffect(() => {
+    initializeCommonData();
+  }, [initializeCommonData]);
+
   const createDonutMarker = useCallback((svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => {
     const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
     const radius = 26;
@@ -142,8 +149,9 @@ export default function WrStatusPage() {
 
 
   useEffect(() => {
-    getDmStatusData('2023');
-  },[])
+    if(Common.selectSidoData&&Common.selectSidoData.length>0)
+    getDmStatusData(Common.selectSidoData);
+  },[Common.selectSidoData])
 
 
 
@@ -219,8 +227,8 @@ export default function WrStatusPage() {
         chartConfig : chartConfig,
         chartData : chartData,
         chartTitle : '',
-        chartClassName : "h-[300px] w-full",
-        graphSize : 40,
+        chartClassName : "w-full h-[350px] ",
+        graphSize : 10,
         yFieldText : '시설(개소)',
         showLegend : true
       }
@@ -245,7 +253,7 @@ export default function WrStatusPage() {
           <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden max-h-[900px]">
             {/* 타이틀 영역 */}
             <div className="border-b border-[#DBE2E6] px-4 py-3">
-              <h3 className="text-[12px] font-semibold">재이용시설현황(2023)</h3>
+              <h3 className="text-[12px] font-semibold">{`재이용시설현황(${defaultYear})`}</h3>
               <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
             </div>
             
@@ -306,7 +314,7 @@ export default function WrStatusPage() {
               {/* 타이틀 + 버튼 영역 */}
               <div className="flex justify-between items-center border-b border-[#436d85] px-4 py-3">
                 <div>
-                  <h3 className="text-[12px] font-semibold">재이용시설현황(2023)</h3>
+                  <h3 className="text-[12px] font-semibold">{`재이용시설현황(${defaultYear})`}</h3>
                   <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황[개소(천m³/년)]</p>
                 </div>
               </div>
@@ -321,7 +329,6 @@ export default function WrStatusPage() {
                         <th className="text-[12px] font-semibold px-4 py-2">하수재이용시설</th>
                         <th className="text-[12px] font-semibold px-4 py-2">빗물이용시설</th>
                         <th className="text-[12px] font-semibold px-4 py-2">중수도시설</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">온배수시설</th>
                         {/* <th className="text-[12px] font-semibold px-4 py-2">하수(이용량,천𝓂³/년)</th>
                         <th className="text-[12px] font-semibold px-4 py-2">빗물(이용량,천𝓂³/년)</th>
                         <th className="text-[12px] font-semibold px-4 py-2">중수도(이용량,천𝓂³/년)</th>
@@ -338,7 +345,6 @@ export default function WrStatusPage() {
                           <td className="text-[12px]">{row.sewage}</td>
                           <td className="text-[12px]">{row.rainwater}</td>
                           <td className="text-[12px]">{row.reclaimed}</td>
-                          <td className="text-[12px]">{row.thermal}</td>
                         </tr>
                       ))}
                     </tbody>
@@ -350,7 +356,7 @@ export default function WrStatusPage() {
             {/* 재이용통계 차트 */}
             <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
               <div className="border-b border-[#DBE2E6] px-4 py-3">
-                <h3 className="text-[12px] font-semibold">재이용통계(2023)</h3>
+                <h3 className="text-[12px] font-semibold">{`재이용통계(${defaultYear})`}</h3>
                 <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설 현황 개소수 그래프</p>
               </div>
               <div className="p-4 bg-[#f9fbfd]">

apps/dm/app/common/comFunction.ts

@@ -1,4 +1,4 @@
-import type { DmStatusChartType, DmStatusDataType, RegionData,  } from "../store/wrStatus/type";
+import type {  RegionData,  } from "../store/wrStatus/type";
 
 
 
@@ -43,7 +43,7 @@ export const regionIdMap: Record<string, string> = {
   };
 
 
-const makeRegion = (region: string) => {
+export const makeRegion = (region: string) => {
   if (region === '서울특별시') return '서울'
   if (region === '부산광역시') return '부산'
   if (region === '대구광역시') return   '대구'
@@ -56,19 +56,10 @@ const makeRegion = (region: string) => {
   if (region === '강원특별자치도') return  '강원'
   if (region === '충청북도') return  '충북'
   if (region === '충청남도') return  '충남'
-  if (region === '전라북도') return  '전북'
+  if (region === '전북특별자치도') return  '전북'
   if (region === '전라남도') return  '전남'
   if (region === '경상북도') return  '경북'
   if (region === '경상남도') return  '경남'
   if (region === '제주특별자치도') return  '제주'
     return region;
 }
-export const changeStatusMapData= (data: DmStatusDataType[]) : DmStatusChartType[]=> {
-   return data.map((item) => ({
-    label: makeRegion(item.region??''),
-    하수: item.sewage.split('(')[0]??'',
-    빗물: item.rainwater.split('(')[0]??'',
-    중수도: item.reclaimed.split('(')[0] ??'',
-    온배수: item.thermal.split('(')[0] ??'',
-   }));
-} 

apps/dm/app/layout.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import "./globals.css";
 
 export default function RootLayout({
@@ -6,15 +6,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+
   return (
     <html lang="ko">
       <head>
         <title>물재이용 대민</title>
       </head>
-      <body>
-          {children}
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
-

apps/dm/app/store/common/index.tsx

@@ -214,7 +214,7 @@ const selectMiddleRegionData: SelectDataType[] = [
 // 시도 API 호출 함수 추가
 const fetchSidoData = async (): Promise<SelectDataType[]> => {
   try {
-    const res = await getFetch(fetchType.COMMON, '/addr/city');
+    const res = await getFetch(fetchType.FO, '/addr/city');
     const data = res.data;
     selectSidoData = [
       { text: "전체", val: '0'},
@@ -233,7 +233,7 @@ const fetchSidoData = async (): Promise<SelectDataType[]> => {
 // 시군구 API 호출 함수 추가
 const fetchSigunData = async (): Promise<SelectDataType[]> => {
   try {
-    const res = await getFetch(fetchType.COMMON, '/addr/sgg');
+    const res = await getFetch(fetchType.FO, '/addr/sgg');
     const data = res.data;
     selectSigunData = [
       { text: "전체", val: '0' },
@@ -253,7 +253,7 @@ const fetchSigunData = async (): Promise<SelectDataType[]> => {
 // 권역 API 호출 함수 추가
 const fetchRegionData = async (): Promise<SelectDataType[]> => {
   try {
-    const res = await getFetch(fetchType.COMMON, '/addr/sarea');
+    const res = await getFetch(fetchType.FO, '/addr/sarea');
     const data = res.data;
     return [
       { text: "전체", val: '0'},
@@ -271,7 +271,7 @@ const fetchRegionData = async (): Promise<SelectDataType[]> => {
 // 중권역 API 호출 함수 추가
 const fetchMiddleRegionData = async (): Promise<SelectDataType[]> => {
   try {
-    const res = await getFetch(fetchType.COMMON, '/addr/midArea');
+    const res = await getFetch(fetchType.FO, '/addr/midArea');
     const data = res.data;
     return [
       { text: "전체", val: '0' },
@@ -290,7 +290,7 @@ const fetchMiddleRegionData = async (): Promise<SelectDataType[]> => {
 // 단위유역 API 호출 함수 추가
 const fetchUnitWaterShedData = async (): Promise<SelectDataType[]> => {
   try {
-    const res = await getFetch(fetchType.COMMON, '/addr/largeArea');
+    const res = await getFetch(fetchType.FO, '/addr/largeArea');
     const data = res.data;
     return [
       { text: "전체", val: '0' },
@@ -309,7 +309,7 @@ const fetchUnitWaterShedData = async (): Promise<SelectDataType[]> => {
 // 환경청 데이터
 const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => {
   try {
-    const res = await getFetch(fetchType.COMMON, '/addr/govArea');
+    const res = await getFetch(fetchType.FO, '/addr/govArea');
     const data = res.data;
     selectEnvPartData = [
       { text: "전체", val: '0', adstDliStrCd: '' },

apps/dm/app/store/map/index.tsx

@@ -1,9 +1,9 @@
-import { getFetch } from "@/components/ui/api";
+import { fetchType, getFetch } from "@/components/ui/api";
 import { DEV_URL_FO } from "@/components/ui/config";
 import type { FacilityInfo, SubsInfo } from "./type";
 
 const checkWrRegList = async () => {
-  const wrRegList = await getFetch("wr", `/reuseFc/pubFc`);
+  const wrRegList = await getFetch(fetchType.WR, `/reuseFc/pubFc`);
   return wrRegList;
 };
 

apps/dm/app/store/wrStatus/index.tsx

@@ -1,12 +1,14 @@
-import { changeStatusMapData } from "@/app/common/comFunction";
 import { fetchType, getFetch } from "@/components/ui/api";
 import type {
   DmStatusDataType,
   DmStatusChartType,
+  DmStatusBoardType,
 } from "./type";
+import type { SelectDataType } from "../common";
+import { makeRegion } from "@/app/common/comFunction";
 
 export type DmStatusActions = {
-  getDmStatusData(year: string): void;
+  getDmStatusData(cityCd: SelectDataType[]): void;
 };
 
 export type DmStatusType = {
@@ -28,32 +30,89 @@ export type DmStatusStore = DmStatusType & DmStatusActions;
 
 export const DmStatusReducer = (set: any): DmStatusActions => {
   return {
-    getDmStatusData: async (year: string) => {
-      const data = await getFetch(fetchType.WR, "/daemin/" + year);
-      let  isData:DmStatusDataType[] =[]  
-        if(data.data&&data.data.length>0){
-            isData=data.data
-        }else{
-            fetch(`data/wrStatusData.json`).then((res) => res.json()).then((json) => isData=json)//만약 백엔드에서 못가져올경우 방어책
-        }
+    getDmStatusData: async (cityCd: SelectDataType[]) => {
+      const data = await getFetch(fetchType.FO, "/dashBoard/daemin");
 
-      const orgin: DmStatusDataType[] = isData;
-      const chartData = changeStatusMapData(orgin);
+      const dataSum = data.data.reduce(
+        (acc: DmStatusDataType, item: DmStatusDataType) => {
+          acc.sewage = (
+            parseInt(acc.sewage.replaceAll(",", "")) +
+            parseInt(item.sewage.replaceAll(",", ""))
+          ).toLocaleString();
+          acc.rainwater = (
+            parseInt(acc.rainwater.replaceAll(",", "")) +
+            parseInt(item.rainwater.replaceAll(",", ""))
+          ).toLocaleString();
+          acc.reclaimed = (
+            parseInt(acc.reclaimed.replaceAll(",", "")) +
+            parseInt(item.reclaimed.replaceAll(",", ""))
+          ).toLocaleString();
+          acc.sewageCnt = (
+            parseInt(acc.sewageCnt.replaceAll(",", "")) +
+            parseInt(item.sewageCnt.replaceAll(",", ""))
+          ).toLocaleString();
+          acc.rainwaterCnt = (
+            parseInt(acc.rainwaterCnt.replaceAll(",", "")) +
+            parseInt(item.rainwaterCnt.replaceAll(",", ""))
+          ).toLocaleString();
+          acc.reclaimedCnt = (
+            parseInt(acc.reclaimedCnt.replaceAll(",", "")) +
+            parseInt(item.reclaimedCnt.replaceAll(",", ""))
+          ).toLocaleString();
+          return acc;
+        },
+        {
+          region: "합계",
+          sewage: "0",
+          rainwater: "0",
+          reclaimed: "0",
+          sewageCnt: "0",
+          rainwaterCnt: "0",
+          reclaimedCnt: "0",
+        }
+      );
+      data.data.unshift(dataSum);
+
+      console.log("dataSum ", dataSum);
       const facilityTotals = [
-        "하수재이용시설" + "(총" + orgin[0]?.sewage.split("(")[0] + "개소)",
-        "빗물재이용시설" + "(총" + orgin[0]?.rainwater.split("(")[0] + "개소)",
-        "중수도재이용시설" +
-          "(총" +
-          orgin[0]?.reclaimed.split("(")[0] +
-          "개소)",
-        "온배수재이용시설" + "(총" + orgin[0]?.thermal.split("(")[0] + "개소)",
+        "하수재이용시설" + "(총" + dataSum?.sewageCnt + "개소)",
+        "빗물재이용시설" + "(총" + dataSum?.rainwaterCnt + "개소)",
+        "중수도재이용시설" + "(총" + dataSum?.reclaimedCnt + "개소)",
       ];
 
+      const boardData: DmStatusBoardType[] = data.data.map(
+        (item: DmStatusDataType) => {
+          const regionText = cityCd.find((city) => item.region === city.val);
+          const sewage = item.sewage;
+          const rainwater = item.rainwater;
+          const reclaimed = item.reclaimed;
+          const sewageCnt = item.sewageCnt;
+          const rainwaterCnt = item.rainwaterCnt;
+          const reclaimedCnt = item.reclaimedCnt;
+
+          return {
+            region: regionText ? regionText.text : item.region,
+            sewage: sewageCnt + "(" + sewage + ")",
+            rainwater: rainwaterCnt + "(" + rainwater + ")",
+            reclaimed: reclaimedCnt + "(" + reclaimed + ")",
+          };
+        }
+      );
+
+      const chartData = data.data.map((item) => ({
+        label: makeRegion(
+          cityCd.find((city) => item.region === city.val)?.text ?? ""
+        ),
+        하수: item.sewage,
+        빗물: item.rainwater,
+        중수도: item.reclaimed,
+      }));
+
       set((state: DmStatusType) => ({
         ...state,
         dmStatus: {
           ...state.dmStatus,
-          statusData: data.data,
+          statusData: boardData,
           chartData: chartData,
           facilityTotals: facilityTotals,
         },

apps/dm/app/store/wrStatus/type.ts

@@ -3,9 +3,17 @@ export type DmStatusDataType = {
   sewage: string;
   rainwater: string;
   reclaimed: string;
-  thermal: string;
+  sewageCnt:string
+  rainwaterCnt:string
+  reclaimedCnt:string
 };
 
+export type DmStatusBoardType = {
+  region: string;
+  sewage: string;
+  rainwater: string;
+  reclaimed: string;
+};
 
 export type DmStatusFcltType = {
     sewageFclt: string;
@@ -21,7 +29,6 @@ export type DmStatusChartType = {
     하수: string,
     빗물: string,
     중수도: string,
-    온배수: string,
 }
 
 export type RegionData = {

apps/dm/components/ui/api/index.ts

@@ -3,7 +3,8 @@ import { DEV_URL_FO, DEV_URL_WR } from "../config";
 
 export const fetchType = {
   COMMON: "common",
-  WR: "wr"
+  WR: "wr",
+  FO:'fo'
 };
 
 interface RequestParams {
@@ -11,7 +12,7 @@ interface RequestParams {
 }
 
 export const getFetch = async (type: string, url: string) => {
-  const baseUrl = type === fetchType.COMMON ? DEV_URL_FO : DEV_URL_WR;
+  const baseUrl = type === fetchType.FO ? DEV_URL_FO : DEV_URL_WR;
   const response = await fetch(baseUrl + url, {
     method: "GET",
     headers: {

apps/dm/components/ui/sdmInfoInsertForm/component.tsx

@@ -637,7 +637,7 @@ export function SdmInfoRegForm({
             }}
           />
           <div className="col-span-1">
-            <Label className="text-xl">수소이온농도(PH)</Label>
+            <Label className="text-xl">수소이온농도(pH)</Label>
             <div className="flex flex-row items-center gap-2">
               <Input
                 className="!text-xl w-36"

apps/fo/app/components/common/CommaToNumber.tsx

@@ -0,0 +1,4 @@
+export default function CommaToNumber (data: any){
+    const rtnValue = data&&data.toString().trim()!=''&&data!=undefined?Number(data.toString().replaceAll(',','')):'';
+    return rtnValue;
+}

apps/fo/app/components/common/UnderComment.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+/**
+ * 하단 주석 영역
+ */
+
+type CommentType={
+	commentStartPoint? : string,
+	commentArray? : string[],
+	divHeight? : string,
+}
+
+function UnderComment({commentStartPoint="☞", commentArray=[], divHeight="14"} :CommentType) {
+	
+	if(commentArray && commentArray.length > 0){
+		return (
+			<div className={"mt-"+divHeight}>
+				{commentArray.map((item, index) => (
+					<React.Fragment key={"comment" + index}>
+						<span className="text-2xl font-bold text-gray-500">
+							{commentStartPoint} {item}
+						</span>
+						<br/>
+					</React.Fragment>
+				))}
+			</div>
+		)
+	}
+}
+
+export default UnderComment;

apps/fo/app/intro.md

@@ -0,0 +1,137 @@
+# 운영실태 인수인계
+## 이력
+ written by yjs
+ 2025-
+## 0. 알아두면 좋아요
+ - 화면 초기 화면 : 메인 대시보드(표로 보는 대시보드)
+<br>&emsp;- API swagger 주소 : http://con.mind-one.co.kr:11082/swagger-ui/index.html#
+<br>&emsp;- 단위 : 유량은 정수까지 강우량은 소수점 1자리 반올림한다, 수질은 TN, TP만 소수점 3자리, 나머지는 1자리까지 반올림한다.
+<br>&emsp;&emsp;▶︎ roundNumber(value:any, decimal:number) 컴포넌트를 활용해보세요!!
+<br>&emsp;- 강우영향일 : 강우량이 3mm이상인 날은 강우영향일에 포함되고 하루전, 이틀전에 강우량이 3mm인 날의 경우도 강우량에 포함된다. 팝업의 강우시, 청천시 탭에서 보여주는 리스트를 만들 때 필요한 정보이니 참고한다.
+<br>&emsp;&emsp;▶︎ 예시 : 1월 13일 강우량이 5일 경우 - 강우영향일 포함됨, 1월 14일, 1월 15일 강우량에 상관없이  ___강우영향일 포함됨___, 1월 16일의 경우 14일, 15일이 3mm미만이면  ___강우영향일 미포함됨___ 
+<br>&emsp;&emsp;▶︎ CalcRainEffect(data:any, weather) 컴포넌트에서 측정일, 강우량이 포함된 데이터를 파라미터로 넘기면 강우영향일(rainEffectDay) 컬럼 및 0,1로 여부 value로 데이터에 추가되어 리턴한다. 
+<br>&emsp;- 운영실태는 대부분 시설의 정보를 추출해주는 화면이 대다수이며 검색은 행정별, 유역별, 환경청별로 시설을 분류하여 조회하고 엑셀, 초기화, 조회 버튼이 우측에 존재한다.
+<br>&emsp;- 메인 대시보드의 경우에는 수질, 유량 등 조회하는 화면의 정보들을 압축해서 보여주는 화면이라고 생각하면 좋다. 그렇기 때문에 대시보드에서의 각각의 데이터와 메인 화면의 데이터가 일치하는지 검증하는 작업이 많이 필요하다.
+<br>&emsp;- 하루 단위의 데이터를 보여주는 모달에서 연간, 하절기, 동절기, 청천시, 강우시 등의 1년치 데이터를 필터링 하여 보여주는데 탭을 누를 시 api가 재호출 되는 형식이 아니고 1년치 데이터를 필터링 하여 출력해주고 청천시탭의 경우 강우영향일은 미포함, 강우시탭의 경우 강우영향일 포함된 데이터를 보여줘야 한다.
+## 1. 표로 보기(메인 대시보드)
+### 1-1) 시설정보 및 운영현황
+&emsp;- 년도, 시설에 해당하는 시설정보 및 유량, 수질, 물사용량 등의 정보를 표로 표출해주는 화면
+<br>&emsp;- 시설계획 : 알에스원 DC-SERVICE API에서 받은 데이터를 화면에 출력
+<br>&emsp;&emsp;▶︎ 주소 : 'https://apigateway.apps.rsonesoft.com/dc-service/api/v1/nowDmgMtncGnsvy';
+<br>&emsp;&emsp;▶︎ 파라미터 : swtrmtFcltCd - 시설코드 / ctpvNm - 시도명 / sggNm - 시군구명 / targetYear - 대상년도
+<br>&emsp;&emsp;▶︎ 리턴값(사용되는것 위주) 
+<br>&emsp;&emsp;&emsp;/**
+<br>&emsp;&emsp;&emsp; * 증설계획
+<br>&emsp;&emsp;&emsp; */
+<br>&emsp;&emsp;&emsp;기승인(당초4단계), 현재, 변경1~4 
+<br>&emsp;&emsp;&emsp;planSwageQntSumDt4 : number | '',
+<br>&emsp;&emsp;&emsp;planSwageQntSum : number | '',
+<br>&emsp;&emsp;&emsp;planSwageQntSumDc1 : number | '',
+<br>&emsp;&emsp;&emsp;planSwageQntSumDc2 : number | '',
+<br>&emsp;&emsp;&emsp;planSwageQntSumDc3 : number | '',
+<br>&emsp;&emsp;&emsp;planSwageQntSumDc4 : number | '',
+<br>&emsp;&emsp;&emsp;/**
+<br>&emsp;&emsp;&emsp; * 처리인구
+<br>&emsp;&emsp;&emsp; */
+<br>&emsp;&emsp;&emsp;// 기승인(당초4단계), 현재, 변경1~4 
+<br>&emsp;&emsp;&emsp;swtrmtPpltnCntDt4 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtPpltnCnt : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtPpltnCntDc1 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtPpltnCntDc2 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtPpltnCntDc3 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtPpltnCntDc4 : number | '',
+<br>&emsp;&emsp;&emsp;/**
+<br>&emsp;&emsp;&emsp; * 처리구역면적
+<br>&emsp;&emsp;&emsp; */
+<br>&emsp;&emsp;&emsp;// 기승인(당초4단계), 현재, 변경1~4 
+<br>&emsp;&emsp;&emsp;swtrmtZoneAreaDt4 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtZoneArea : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtZoneAreaDc1 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtZoneAreaDc2 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtZoneAreaDc3 : number | '',
+<br>&emsp;&emsp;&emsp;swtrmtZoneAreaDc4 : number | '',
+<br>&emsp;&emsp;&emsp;// 처리구역
+<br>&emsp;&emsp;&emsp;trtDstr : string | '',
+<br>&emsp;&emsp;&emsp;
+<br>&emsp;- 물사용량 : 현재 DB가 없기 때문에 해당 년도의 평균 하수유입량 * 0.65 (65%)
+<br>&emsp;- 운영실태 표(우측 표)의 년도는 검색한 년도에 따라 값 설정
+<br>&emsp;- 유입유량 : 순수하수유입량 + 연계처리수 + 총인설비반류수
+
+### 1-2) 메인 그래프
+&emsp;- 1년치 수질항목들의 데이터들을 표출해주는 화면
+<br>&emsp;- lineBarChart, lineChart 컴포넌트를 사용하여 차트를 생성함
+
+### 1-3) 강우일 운영현황
+&emsp;- 1년치 시설의 강우량 데이터를 구간별로 일수와 강우량 정보를 표출해주는 화면
+<br>&emsp;- 순수 하루단위의 강우량에 따라서 데이터를 표출하는 것이 아닌 __강우영향일__ 계산된 후 통계를 구한다.
+<br>&emsp;&emsp;▶︎ 예시 : 1월 13일 강우량이 5일 경우 - 3~10mm구간 통계포함, 1월 14일 강우량이 0일 경우 - ___3~10mm구간 통계 포함___
+<br>&emsp;- 설계유입수질은 처음 설계 당시의 수질 데이터이기 때문에 한개의 데이터만 추출
+<br>&emsp;- 시설용량 대비는 유입유량/시설용량 * 100 (비율)
+<br>&emsp;- 계의 경우 일수는 합계 그 외에는 평균값을 나타낸다.
+## 2. 처리시설 현황
+### 2-1) 처리시설 시설정보
+&emsp;- 처리시설 정보들과 이력들을 조회할 수 있는 화면이다.
+<br>&emsp;- 모달 '기본정보' 탭의 시설계획정보는 '이력관리' 탭의 이력 리스트 중 마지막 이력의 수질정보를 표출해준다.
+<br>&emsp;- 모달 '이력관리' 탭에서는 이력정보와 해당 차수의 수질정보를 보여준다. (1대1)
+### 2-2) 처리구역정보
+&emsp;- 처리시설의 계획정보를 조회할 수 있는 화면이다.
+<br>&emsp;- 1-1)의 시설계획을 참고하도록 한다. 해당 api로 계획정보를 가져온다. 
+<br>&emsp;- 요구사항 중 원래는 단계별로 년도를 괄호로 표시해달라는 요청사항이 있었으나 시설들마다 다르기 때문에 메인화면에 단계하단에 년도를 넣는게 불가능하다.
+<br>&emsp;&emsp;▶︎ 대시보드의 계획정보 영역의 경우에는 시설코드를 파라미터로 던져 계획정보를 가져오기 때문에 가능하여 대시보드의 계획정보는 괄호로 년도를 추출하도록 한다.
+## 3. 처리시설 연간 운영 현황
+### 3-1) 강수현황
+&emsp;- 시설별 강수현황을 조회할 수 있는 화면이다.
+<br>&emsp;- 메인화면에서의 시설별 1년치 강우일, 강우일수, 강우량 데이터는 백엔드에서 계산되어 출력되는 형식이 아니라 하루치 데이터의 object(rainyDayObjList)를 store에서 계산하여 출력한다. swagger를 참고한다.
+<br>&emsp;&emsp;
+<br>&emsp;&emsp;data": [
+<br>&emsp;&emsp;&emsp;{
+<br>&emsp;&emsp;&emsp;&emsp;"bscFctCd": "11000SW001R",
+<br>&emsp;&emsp;&emsp;&emsp;"bscFctNm": "난지",
+<br>&emsp;&emsp;&emsp;&emsp;"sido": "서울특별시",
+<br>&emsp;&emsp;&emsp;&emsp;"gugun": " ",
+<br>&emsp;&emsp;&emsp;&emsp;"addr": "경기도 고양시 덕양구 현천동 692-2",
+<br>&emsp;&emsp;&emsp;&emsp;"fctCpc": 860000,
+<br>&emsp;&emsp;&emsp;&emsp;"stnKo": "강서",
+<br>&emsp;&emsp;&emsp;&emsp;"rvbsn": "한강",
+<br>&emsp;&emsp;&emsp;&emsp;"lgbsn": "한강본류",
+<br>&emsp;&emsp;&emsp;&emsp;"mdmbsn": "한강서울",
+<br>&emsp;&emsp;&emsp;&emsp;"rgnNm": "한강유역환경청",
+<br>&emsp;&emsp;&emsp;&emsp;"totalCount": 0,
+<br>&emsp;&emsp;&emsp;&emsp;"rainyDayObjList": [
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;{
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"bscFctCd": "11000SW001R",
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"rainDt": "2024-01-01",
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"infoRnDay": 0
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;},
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;{
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"bscFctCd": "11000SW001R",
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"rainDt": "2024-01-02",
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"infoRnDay": 0
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;},
+<br>&emsp;&emsp;&emsp;&emsp;&emsp;.....
+<br><br>&emsp;- 일별 데이터 object(rainyDayObjList)를 강우영향일 구하는 컴포넌트에 던져 강우영향일을 구한 후 메인화면에 출력해야한다.
+<br>&emsp;- 모달 화면에서는 일별 데이터를 추출해 보여준다.
+### 3-2) 유량현황
+&emsp;- 시설별 년도별 유량현황을 조회할 수 있는 화면이다.
+<br>&emsp;- 화면의 구성은 강수현황과 같이 메인화면에는 1년치 유량정보, 모달로는 하루 단위의 유량정보를 보여주지만 메인화면에서 데이터는 집계되어 추출된다.
+### 3-3) 수질현황
+&emsp;- 시설별 년도별 수질현황을 조회할 수 있는 화면이다.
+<br>&emsp;- 2021년 이전은 COD, 21년부터는 TOC값을 표출한다. 그것을 구분하기 위해 2021년 이전의 TOC값들은 소괄호로 감싸준다.
+<br>&emsp;- 모달에서 '수질 TMS'의 경우에는 운영실태 API가 아닌 물재이용 API에서 데이터를 얻으며 getFetch에서 'wr' 파라미터로 물재이용 데이터를 얻는다.
+<br>&emsp;&emsp;▶︎ api 주소 : http://con.mind-one.co.kr:11080/api/v1/il/getTms/{시설번호}
+## 4. 운영실태
+### 4-1) 오수발생량 추정
+&emsp;- 물사용량 : 원래는 연간 월별 물사용량을 연계받아서 사용해야하지만 현재 연계를 받지 못하여 하수유입량의 65%를 물사용량으로 잡았다.
+<br>&emsp;- 오수전환율 : 90%로 고정
+<br>&emsp;- 오수발생량 추정 : 물사용량 * (100/오수전환율)
+<br>&emsp;- 연간 하수유입량과 청천시 하수유입량을 구하기 위해서 1년치 하루단위의 데이터를 가져와 계산이 필요(강우영향일 계산필요)
+<br>&emsp;- 물 사용량은 월별로 연계를 받기 때문에 모달에서 하수유입량을 월별로 통계를 구해야 한다.
+<br>&emsp;- 계산을 해보면 모달에서 월별 사용량의 평균과 1년치 데이터의 평균은 다르다. 직접 계산해보면 다를 수 밖에 없다. 하지만 값을 맞추기 위해서 모달에서의 평균값을 모달의 데이터가 아닌 1년치 데이터의 평균을 넣고 최대, 최소만 월별 데이터를 기반으로 구한다.
+### 4-2) 지하수유입량 추정
+&emsp;-적정여부 = 연간 지하수유입량/연평균 유입하수량*100
+<br>&emsp;-지하수 유입량 = 하수처리장 청천시 실제유입량 - (물사용량 × 오수전환율)
+<br>&emsp;-모달에서의 오수발생량 전체 평균을 구할 때 평균 하수유입량을 기반으로 한 물사용량이 아닌 현재 월 데이터에서의 평균을 구한것을 넣는다.
+### 4-3) RDII분석
+&emsp;-RDII 추정값 : 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD))
+<br>&emsp;- RDII 추정시 일강수량 : 하절기 최저 유입 BOD 날짜의 강우량
+<br>&emsp;- 적정여부 : 하절기일 때 최저유입 BOD유입유량 > 시설용량 일 경우 초과유입 아니면 적정

apps/fo/app/pages/(with-layout)/dashboard/drainageEquipment/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ * 대시보드 - 표로보기 - 배수설비 정비현황
+ * 
+ * - 배수설비 현황을 조회하는 화면. 2차사업 때 예정인 화면으로 현재 사용되지 않음.
+ */
+
+"use client"
 
 import { useFoStore } from '@/app/store';
 import type { DrainageEquipmentListProps, TableUpperProps } from '@/app/store/dashboard';

apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/modal/page.tsx

@@ -1,4 +1,11 @@
-"use client"
+/**
+ * 대시보드 - 표로보기 - 시설정보 및 운영현황(모달)
+ * 
+ * - 유량, 수질, 총인시설의 연간, 하절기, 동절기 단위로 값을 차트로 시각화하여 보여주는 모달화면
+ * - 막대그래프로 모달을 그려준다.
+ */
+
+"use client"
 import type { OperationalStatusListProps } from "@/app/store/dashboard";
 import { CHART_FORM, MainChart, type ChartConfig } from "@common/business_components";
 import { Button } from "@common/business_components/ui/table/lib/button";

apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx

@@ -1,4 +1,13 @@
-"use client"
+/**
+ * 대시보드 - 표로보기 - 시설정보 및 운영현황
+ * 
+ * - 시설정보 및 운영현황 탭의 메인 페이지
+ * - 중앙상단에는 시설에 대한 요약정보가, 좌측 상단은 시설계획에 대한 정보, 좌측하단에는 물사용량에 대한 정보, 
+ *   우측에는 조회년도 및 시설에 해당하는 유량 및 수질정보를 연간,하절기,동절기별 추출하여 데이터를 보여준다.
+ * - 우측 운영실태는 연간, 하절기, 동절기별로 색이 칠해져있는데 어떤항목들끼리 차트로 그려지는지 확인하기 위해서다.
+ */
+
+"use client"
 import { roundNumber } from "@/app/components/common/DataForm";
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/processFacility";
@@ -13,7 +22,12 @@ export type facilityInfoProps = {
   fcltyList?: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string, efflWqltStndrdNm: string }[];
 };
 
-// 시설계획 table header 변경
+/**
+ * 시설계획 table header 변경
+ * @param upHeadList 
+ * @param planYearList 
+ * @returns 
+ */
 const headMakeColSpanPlanFclty = (upHeadList: TableUpperProps[], planYearList: string[]) => {
   return  ( <>
     <TableRow>{
@@ -29,6 +43,12 @@ const headMakeColSpanPlanFclty = (upHeadList: TableUpperProps[], planYearList: s
 }
 
 // 시설계획 table header 변경
+/**
+ * 
+ * @param upHeadList 
+ * @param searchYear 
+ * @returns 
+ */
 const headMakeColSpanOperationStatus = (upHeadList: TableUpperProps[], searchYear: string) => {
   return  ( <>
     <TableRow>

apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ * 대시보드 - 표로보기 - 주요그래프
+ * 
+ * - 시설의 조회년도에 해당하는 수질정보, 강우량, 유입량 등을 특정 항목별로 묶어서 차트로 시각화해주는 화면
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { lineChartDataProps } from "@/app/store/dashboard";
 import { CHART_FORM, type ChartConfig, ContentsDiv, MainChart } from "@common/business_components";
@@ -63,7 +69,7 @@ export default function DashBoardChart({searchYear = '', fcltyList = []}: facili
       color: colors[2],
     },
     lineVal0: {
-      label: '시설용량',
+      label: '지하수유입량',
       color: colors[1],
     },
     lineVal1: {

apps/fo/app/pages/(with-layout)/dashboard/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ * 대시보드 - 표로보기(메인)
+ * 
+ * - 대시보드 - 표로보기 메인페이지로 상단영역의 제어 및 탭 전환 시 보여주는 페이지를 지정해준다.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import { ContentsDiv, downloadExcel, downloadMultipleExcel, filePickedBlobArray, MainDiv, SelectBox, UITab, type SelectDataType } from "@common/business_components";
 import { Button, TabsContent } from "@common/components/ui";
@@ -153,7 +159,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.now,
               item.stepOne,
               item.stepTwo,
@@ -165,23 +171,24 @@ export default function DashBoard() {
           // operationalStatusList를 2차원 배열로 변환
           const excelData2 = operationalStatusList.map((item, index) => {
             const baseData = [
-              item.yearAvg,
-              item.yearMax,
-              item.yearMin,
-              item.summerAll,
-              item.summerThree,
-              item.summerRain,
-              item.winterAll,
-              item.winterSunnyAvg,
-              item.winterSunnyMax,
-              item.winterSunnyMin,
-              item.groundWaterAvg,
-              item.groundWaterSummer,
-              item.groundWaterWinter
+              Number(item.yearAvg?.replaceAll(',','')),
+              Number(item.yearMax?.replaceAll(',','')),
+              Number(item.yearMin?.replaceAll(',','')),
+              Number(item.summerAll?.replaceAll(',','')),
+              Number(item.summerThree?.replaceAll(',','')),
+              Number(item.summerRain?.replaceAll(',','')),
+              Number(item.winterAll?.replaceAll(',','')),
+              Number(item.winterSunnyAvg?.replaceAll(',','')),
+              Number(item.winterSunnyMax?.replaceAll(',','')),
+              Number(item.winterSunnyMin?.replaceAll(',','')),
+              Number(item.groundWaterAvg?.replaceAll(',','').replaceAll('%','')),
+              Number(item.groundWaterSummer?.replaceAll(',','').replaceAll('%','')),
+              Number(item.groundWaterWinter?.replaceAll(',','').replaceAll('%',''))
             ];
             
             // index가 0일 때만 rdi와 rdiRain 추가
-            return index === 0 ? [...baseData, item.rdi, item.rdiRain] : baseData;
+            console.log(item.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;
           });
 
           const sheetParameter = [
@@ -240,7 +247,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: '주요그래프'

apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx

@@ -1,4 +1,11 @@
-"use client"
+/**
+ * 대시보드 - 표로보기 - 강우일 운영현황
+ * 
+ * - 시설의 강우량 구간별(3~10mm미만..10~20mm미만 등) 강우일수 및 수질정보를 표로 보여주는 화면
+ * - 강우영향일 계산후 바뀌는 tobe강우일을 계산해야 한다.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import { UiTable } from "@common/business_components/ui/table";
 import { useEffect, useState } from "react";
@@ -46,16 +53,17 @@ export default function RainManageTab({searchYear = '', fcltyList = []}: facilit
   
   return (
     <div>
-    <UiTable 
-      headName=""
-      tableData={rainManageList}
-      headlist={upHeadListRainManage}
-      pageSize={0}
-      total={0}
-      cellClick={undefined}
-      onPageChange={() => {}}
-    >
-    </UiTable>
+      <UiTable 
+        headName=""
+        tableData={rainManageList}
+        headlist={upHeadListRainManage}
+        pageSize={0}
+        total={0}
+        cellClick={undefined}
+        onPageChange={() => {}}
+        widthFixed={true}
+      >
+      </UiTable>
       <span className="text-2xl font-bold text-gray-500">☞ 일수에 강우영향일 포함됨</span>
     </div>
   )

apps/fo/app/pages/(with-layout)/dashboardMain/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ * 대시보드 - 표로보기 상단구역 페에지
+ * 
+ * - 대시보드 - 표로보기의 3개의 탭 상단에 조회년도, 행정정보, 시설명의 구역을 컴포넌트
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import { useEffect, useState } from "react";
 import SearchInput from "../../../components/common/SearchInput";

apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 강수현황(모달)
+ * 
+ * - 선택한 시설을 조회한 년도의 하루단위로 강우량 및 강우영향일 정보를 보여주는 화면.
+ */
+
+"use client"
 import CalcRainEffect from "@/app/components/common/CalcRainEffect";
 import { roundNumber } from "@/app/components/common/DataForm";
 import { useFoStore } from "@/app/store";
@@ -105,6 +111,8 @@ export default function PrecipitationModal(props: PrecipitationModalProps) {
 
   const getTableData = () => {
     const totals = calculateTotals();
+    totals.infoRnDay = roundNumber(totals.infoRnDay, 1);
+
     return [
       {
         bscFctCd: "",
@@ -220,6 +228,7 @@ export default function PrecipitationModal(props: PrecipitationModalProps) {
           cellClick={undefined}
           onPageChange={() => {}}
           boldArray={[0]}
+          widthFixed={true}
         />
       </ListDiv>
     </>

apps/fo/app/pages/(with-layout)/facilityPrecipitation/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 강수현황(메인)
+ * 
+ * - 시설별 강수 현황을 조회조건대로 추출하여 표로 보여주는 화면.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
@@ -6,6 +12,7 @@ import ListDiv from "@common/business_components/ui/list_div";
 import { useCallback, useEffect, useRef, useState } from "react";
 import PrecipitationModal from "./modal/page";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
+import UnderComment from "@/app/components/common/UnderComment";
 
 export default function FacilityPrecipitation() {
   const {Common
@@ -223,9 +230,9 @@ export default function FacilityPrecipitation() {
           <LoadingOverlay isLoading={isLoading} />
           <div className="h-full w-full overflow-x-scroll">
             <div className={widthSize}>
-              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 강수현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 강수현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
             </div>
-            <span className="text-2xl font-bold text-gray-500">☞ 강우일은 3mm 이상만 해당 / 강우영향일은 강우일 및 강우일 후 연속 2일간으로 정의</span>
+            <UnderComment divHeight={"3"} commentArray={["강우일은 3mm 이상만 해당 / 강우영향일은 강우일 및 강우일 후 연속 2일간으로 정의"]} />
           </div>
         </ListDiv>
       </ContentsDiv>

apps/fo/app/pages/(with-layout)/facilityWaterQlty/HeadMakeColSpan.tsx

@@ -1,3 +1,9 @@
+/**
+ *  처리시설 연간 운영현황 - 수질현황
+ * 
+ * - 수질현황의 헤더를 만들어주는 컴포넌트
+ */
+
 import { TableHead, TableRow } from "@common/components/ui";
 
 interface TableUpperProps {

apps/fo/app/pages/(with-layout)/facilityWaterQlty/modal/page.tsx

@@ -1,13 +1,29 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 수질현황
+ * 
+ * - 메인화면에서 선택한 시설의 수질정보를 하루단위로 보여주는 모달.
+ */
+
+"use client"
+import CommaToNumber from "@/app/components/common/CommaToNumber";
+import { roundNumber } from "@/app/components/common/DataForm";
+import UnderComment from "@/app/components/common/UnderComment";
 import { useFoStore } from "@/app/store";
 import type { FacilityWaterQltyProps, modalExcelType } from "@/app/store/facilityWaterQlty";
-import { downloadExcel, UITab, UiTable } from "@common/business_components/ui";
+import { downloadExcelFormat, UITab, UiTable } from "@common/business_components/ui";
 import { Button, TabsContent } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReturnType } from "../../../../components/common/FacilityTermModalHeader";
 import FacilityTermModalHeader from "../../../../components/common/FacilityTermModalHeader";
 import { HeadMakeColSpan } from "../HeadMakeColSpan";
-import { roundNumber } from "@/app/components/common/DataForm";
+
+const commentArrayChungchun = [
+  "청천시 : 강우량이 3mm미만의 날"
+];
+
+const commentArrayRain = [
+  "강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날"
+];
 
 type ModalProps ={
   fcltyName: string;
@@ -40,9 +56,10 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     searchFacilityWaterQltyListHist,
     Common
   } = useFoStore((state) => state);
-  const {btnClass} = Common;
+  const {btnClass, COD_YEAR} = Common;
   const {
     upHeadListModalYear,
+    upHeadListModalYearCod,
     facilityWaterQltyYearList,
     upHeadListModalTms,
     tmsList,
@@ -65,12 +82,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let maxEfflWqltTn = 0;
     let maxEfflWqltTp = 0;
     let maxefflWqltToc = 0;
+    let maxefflWqltCod = 0;
     let maxEfflWqltSs = 0;
 
     let maxinflAssctBfrWqltBod = 0;
     let maxinflAssctBfrWqltTn = 0;
     let maxInflAssctBfrWqltTp = 0;
     let maxinflAssctBfrWqltToc = 0;
+    let maxinflAssctBfrWqltCod = 0;
     let maxinflAssctBfrWqltSs = 0;
 
     let maxTpInflWqltBod = 0;
@@ -84,12 +103,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let minEfflWqltTn = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltTn) : 0;
     let minEfflWqltTp = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltTp) : 0;
     let minefflWqltToc = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltToc) : 0;
+    let minefflWqltCod = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltCod) : 0;
     let minEfflWqltSs = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltSs) : 0;
     
     let mininflAssctBfrWqltBod = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltBod) : 0;
     let mininflAssctBfrWqltTn = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltTn) : 0;
     let minInflAssctBfrWqltTp = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltTp) : 0;
     let mininflAssctBfrWqltToc = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltToc) : 0;
+    let mininflAssctBfrWqltCod = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltCod) : 0;
     let mininflAssctBfrWqltSs = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltSs) : 0;
     
     let minTpInflWqltBod = 99999999;
@@ -101,12 +122,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let avgEfflWqltTn = 0;
     let avgEfflWqltTp = 0;
     let avgefflWqltToc = 0;
+    let avgefflWqltCod = 0;
     let avgEfflWqltSs = 0;
 
     let avginflAssctBfrWqltBod = 0;
     let avginflAssctBfrWqltTn = 0;
     let avgInflAssctBfrWqltTp = 0;
     let avginflAssctBfrWqltToc = 0;
+    let avginflAssctBfrWqltCod = 0;
     let avginflAssctBfrWqltSs = 0;
 
     let avgTpInflWqltBod = 0;
@@ -123,11 +146,13 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       const efflWqltTn = parseNumber(item.efflWqltTn);
       const efflWqltTp = parseNumber(item.efflWqltTp);
       const efflWqltToc = parseNumber(item.efflWqltToc);
+      const efflWqltCod = parseNumber(item.efflWqltCod?item.efflWqltCod.replaceAll("(","").replaceAll(")",""):0);
       const efflWqltSs = parseNumber(item.efflWqltSs);
       const inflAssctBfrWqltBod = parseNumber(item.inflAssctBfrWqltBod);
       const inflAssctBfrWqltTn = parseNumber(item.inflAssctBfrWqltTn);
       const inflAssctBfrWqltTp = parseNumber(item.inflAssctBfrWqltTp);
       const inflAssctBfrWqltToc = parseNumber(item.inflAssctBfrWqltToc);
+      const inflAssctBfrWqltCod = parseNumber(item.inflAssctBfrWqltCod?item.inflAssctBfrWqltCod.replaceAll("(","").replaceAll(")",""):0);
       const inflAssctBfrWqltSs = parseNumber(item.inflAssctBfrWqltSs);
 
       const tpInflWqltBod = parseNumber(item.tpInflWqltBod);
@@ -145,12 +170,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       maxEfflWqltTn = Math.max(maxEfflWqltTn, efflWqltTn);
       maxEfflWqltTp = Math.max(maxEfflWqltTp, efflWqltTp);
       maxefflWqltToc = Math.max(maxefflWqltToc, efflWqltToc);
+      maxefflWqltCod = Math.max(maxefflWqltCod, efflWqltCod);
       maxEfflWqltSs = Math.max(maxEfflWqltSs, efflWqltSs);
       
       maxinflAssctBfrWqltBod = Math.max(maxinflAssctBfrWqltBod, inflAssctBfrWqltBod);
       maxinflAssctBfrWqltTn = Math.max(maxinflAssctBfrWqltTn, inflAssctBfrWqltTn);
       maxInflAssctBfrWqltTp = Math.max(maxInflAssctBfrWqltTp, inflAssctBfrWqltTp);
       maxinflAssctBfrWqltToc = Math.max(maxinflAssctBfrWqltToc, inflAssctBfrWqltToc);
+      maxinflAssctBfrWqltCod = Math.max(maxinflAssctBfrWqltCod, inflAssctBfrWqltCod);
       maxinflAssctBfrWqltSs = Math.max(maxinflAssctBfrWqltSs, inflAssctBfrWqltSs);
 
       maxTpInflWqltBod = Math.max(maxTpInflWqltBod, tpInflWqltBod);
@@ -162,12 +189,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       minEfflWqltTn = Math.min(minEfflWqltTn, efflWqltTn);
       minEfflWqltTp = Math.min(minEfflWqltTp, efflWqltTp);
       minefflWqltToc = Math.min(minefflWqltToc, efflWqltToc);
+      minefflWqltCod = Math.min(minefflWqltCod, efflWqltCod);
       minEfflWqltSs = Math.min(minEfflWqltSs, efflWqltSs);
 
       mininflAssctBfrWqltBod = Math.min(mininflAssctBfrWqltBod, inflAssctBfrWqltBod);
       mininflAssctBfrWqltTn = Math.min(mininflAssctBfrWqltTn, inflAssctBfrWqltTn);
       minInflAssctBfrWqltTp = Math.min(minInflAssctBfrWqltTp, inflAssctBfrWqltTp);
       mininflAssctBfrWqltToc = Math.min(mininflAssctBfrWqltToc, inflAssctBfrWqltToc);
+      mininflAssctBfrWqltCod = Math.min(mininflAssctBfrWqltToc, inflAssctBfrWqltCod);
       mininflAssctBfrWqltSs = Math.min(mininflAssctBfrWqltSs, inflAssctBfrWqltSs);
 
       if(item.tpInflWqltBod != null && item.tpInflWqltBod.trim() != '' && item.tpInflWqltBod != undefined ){
@@ -185,12 +214,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       avgEfflWqltTn += efflWqltTn;
       avgEfflWqltTp += efflWqltTp;
       avgefflWqltToc += efflWqltToc;
+      avgefflWqltCod += efflWqltCod;
       avgEfflWqltSs += efflWqltSs;
 
       avginflAssctBfrWqltBod += inflAssctBfrWqltBod;
       avginflAssctBfrWqltTn += inflAssctBfrWqltTn;
       avgInflAssctBfrWqltTp += inflAssctBfrWqltTp;
       avginflAssctBfrWqltToc += inflAssctBfrWqltToc;
+      avginflAssctBfrWqltCod += inflAssctBfrWqltCod;
       avginflAssctBfrWqltSs += inflAssctBfrWqltSs;
 
       if(item.noProcessInflAmnt && item.noProcessInflAmnt.toString().trim() != '' && item.noProcessInflAmnt != undefined){
@@ -207,16 +238,18 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     const newFilteredData = [
       {
         msrDt: '평균',
-        efflWqltBod: filteredData.length==0?'0.0':(Math.round(avgEfflWqltBod / filteredData.length * 10) / 10).toFixed(1),
-        efflWqltToc: filteredData.length==0?'0.0':(Math.round(avgefflWqltToc / filteredData.length * 10) / 10).toFixed(1),
-        efflWqltSs: filteredData.length==0?'0.0':(Math.round(avgEfflWqltSs / filteredData.length * 10) / 10).toFixed(1),
-        efflWqltTn: filteredData.length==0?'0.000':(Math.round(avgEfflWqltTn / filteredData.length * 1000) / 1000).toFixed(3),
-        efflWqltTp: filteredData.length==0?'0.000':(Math.round(avgEfflWqltTp / filteredData.length * 1000) / 1000).toFixed(3),
-        inflAssctBfrWqltBod: filteredData.length==0?'0.0':(Math.round(avginflAssctBfrWqltBod / filteredData.length * 10) / 10).toFixed(1),
-        inflAssctBfrWqltTn: filteredData.length==0?'0.000':(Math.round(avginflAssctBfrWqltTn / filteredData.length * 1000) / 1000).toFixed(3),
-        inflAssctBfrWqltTp: filteredData.length==0?'0.000':(Math.round(avgInflAssctBfrWqltTp / filteredData.length * 1000) / 1000).toFixed(3),
-        inflAssctBfrWqltToc: filteredData.length==0?'0.0':(Math.round(avginflAssctBfrWqltToc / filteredData.length * 10) / 10).toFixed(1),
-        inflAssctBfrWqltSs: filteredData.length==0?'0.0':(Math.round(avginflAssctBfrWqltSs / filteredData.length * 10) / 10).toFixed(1),
+        efflWqltBod: filteredData.length==0 || avgEfflWqltBod===0?'0.0':roundNumber((avgEfflWqltBod / filteredData.length), 1),
+        efflWqltToc: filteredData.length==0 || avgefflWqltToc===0?'0.0':roundNumber((avgefflWqltToc / filteredData.length), 1),
+        efflWqltCod: filteredData.length==0 || avgefflWqltCod===0?"(0.0)":"("+roundNumber((avgefflWqltCod / filteredData.length), 1)+")",
+        efflWqltSs: filteredData.length==0 || avgEfflWqltSs===0?'0.0':roundNumber((avgEfflWqltSs / filteredData.length), 1),
+        efflWqltTn: filteredData.length==0 || avgEfflWqltTn ===0?'0.000':roundNumber((avgEfflWqltTn / filteredData.length), 3),
+        efflWqltTp: filteredData.length==0 || avgEfflWqltTp ===0?'0.000':roundNumber((avgEfflWqltTp / filteredData.length), 3),
+        inflAssctBfrWqltBod: filteredData.length==0 || avginflAssctBfrWqltBod===0?'0.0':roundNumber((avginflAssctBfrWqltBod / filteredData.length), 1),
+        inflAssctBfrWqltTn: filteredData.length==0 || avginflAssctBfrWqltTn===0?'0.000':roundNumber((avginflAssctBfrWqltTn / filteredData.length), 3),
+        inflAssctBfrWqltTp: filteredData.length==0 || avgInflAssctBfrWqltTp===0?'0.000':roundNumber((avgInflAssctBfrWqltTp / filteredData.length), 3),
+        inflAssctBfrWqltToc: filteredData.length==0 || avginflAssctBfrWqltToc===0?'0.0':roundNumber((avginflAssctBfrWqltToc / filteredData.length), 1),
+        inflAssctBfrWqltCod: filteredData.length==0 || avginflAssctBfrWqltCod===0?'(0.0)':"("+roundNumber((avginflAssctBfrWqltCod / filteredData.length), 1)+")",
+        inflAssctBfrWqltSs: filteredData.length==0 || avginflAssctBfrWqltSs===0?'0.0':roundNumber((avginflAssctBfrWqltSs / filteredData.length), 1),
         bscFctCd: "",
         bscFctNm: "",
         lclgvrnmntNm: "",
@@ -225,22 +258,24 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         addr: "",
         fctCpc: 0,
         noProcessInflAmnt : roundNumber(avgNoProcessInflAmnt / noProcessInflAmntCnt, 0),
-        infoRnDay: filteredData.length==0?'0.0':(Math.round(avgInfoRnDay / filteredData.length * 10) / 10).toFixed(1),
-        tpInflWqltBod: filteredData.length==0?'0.0':(Math.round(avgTpInflWqltBod / tpInflWqltBodCnt * 10) / 10).toFixed(1),
-        tpInflWqltTp: filteredData.length==0?'0.000':(Math.round(avgTpInflWqltTp / tpInflWqltTpCnt * 1000) / 1000).toFixed(3)
+        infoRnDay: filteredData.length==0 || avgInfoRnDay===0?'0.0':roundNumber(avgInfoRnDay / filteredData.length, 1),
+        tpInflWqltBod: filteredData.length==0 || avgTpInflWqltBod ===0 ?'0.0':roundNumber(avgTpInflWqltBod / tpInflWqltBodCnt, 1),
+        tpInflWqltTp: filteredData.length==0 || avgTpInflWqltTp === 0?'0.000':roundNumber(avgTpInflWqltTp / tpInflWqltTpCnt, 3)
       },
       {
         msrDt : '최대',
-        efflWqltBod : Math.round(maxEfflWqltBod * 10) / 10?(Math.round(maxEfflWqltBod * 10) / 10).toFixed(1):'0.0',
-        efflWqltToc : Math.round(maxefflWqltToc * 10) / 10?(Math.round(maxefflWqltToc * 10) / 10).toFixed(1):'0.0',
-        efflWqltSs : Math.round(maxEfflWqltSs * 10) / 10?(Math.round(maxEfflWqltSs * 10) / 10).toFixed(1):'0.0',
-        efflWqltTn : Math.round(maxEfflWqltTn * 1000) / 1000?(Math.round(maxEfflWqltTn * 1000) / 1000).toFixed(3):'0.000',
-        efflWqltTp : Math.round(maxEfflWqltTp * 1000) / 1000?(Math.round(maxEfflWqltTp * 1000) / 1000).toFixed(3):'0.000',
-        inflAssctBfrWqltBod : Math.round(maxinflAssctBfrWqltBod * 10) / 10?(Math.round(maxinflAssctBfrWqltBod * 10) / 10).toFixed(1):'0.0',
-        inflAssctBfrWqltTn : Math.round(maxinflAssctBfrWqltTn * 1000) / 1000?(Math.round(maxinflAssctBfrWqltTn * 1000) / 1000).toFixed(3):'0.000',
-        inflAssctBfrWqltTp : Math.round(maxInflAssctBfrWqltTp * 1000) / 1000?(Math.round(maxInflAssctBfrWqltTp * 1000) / 1000).toFixed(3):'0.000',
-        inflAssctBfrWqltToc : Math.round(maxinflAssctBfrWqltToc * 10) / 10?(Math.round(maxinflAssctBfrWqltToc * 10) / 10).toFixed(1):'0.0',
-        inflAssctBfrWqltSs : Math.round(maxinflAssctBfrWqltSs * 10) / 10?(Math.round(maxinflAssctBfrWqltSs * 10) / 10).toFixed(1):'0.0',
+        efflWqltBod : Math.round(maxEfflWqltBod * 10) / 10?roundNumber(maxEfflWqltBod, 1):'0.0',
+        efflWqltToc : Math.round(maxefflWqltToc * 10) / 10?roundNumber(maxefflWqltToc, 1):'0.0',
+        efflWqltCod : Math.round(maxefflWqltCod * 10) / 10?"("+roundNumber(maxefflWqltCod, 1)+")":'(0.0)',
+        efflWqltSs : Math.round(maxEfflWqltSs * 10) / 10?roundNumber(maxEfflWqltSs, 1):'0.0',
+        efflWqltTn : Math.round(maxEfflWqltTn * 1000) / 1000?roundNumber(maxEfflWqltTn, 3):'0.000',
+        efflWqltTp : Math.round(maxEfflWqltTp * 1000) / 1000?roundNumber(maxEfflWqltTp, 3):'0.000',
+        inflAssctBfrWqltBod : Math.round(maxinflAssctBfrWqltBod * 10) / 10?roundNumber(maxinflAssctBfrWqltBod, 1):'0.0',
+        inflAssctBfrWqltTn : Math.round(maxinflAssctBfrWqltTn * 1000) / 1000?roundNumber(maxinflAssctBfrWqltTn, 3):'0.000',
+        inflAssctBfrWqltTp : Math.round(maxInflAssctBfrWqltTp * 1000) / 1000?roundNumber(maxInflAssctBfrWqltTp, 3):'0.000',
+        inflAssctBfrWqltToc : Math.round(maxinflAssctBfrWqltToc * 10) / 10?roundNumber(maxinflAssctBfrWqltToc, 1):'0.0',
+        inflAssctBfrWqltCod : Math.round(maxinflAssctBfrWqltCod * 10) / 10?"("+roundNumber(maxinflAssctBfrWqltCod, 1)+")":'(0.0)',
+        inflAssctBfrWqltSs : Math.round(maxinflAssctBfrWqltSs * 10) / 10?roundNumber(maxinflAssctBfrWqltSs, 1):'0.0',
         bscFctCd: "",
         bscFctNm: "",
         lclgvrnmntNm: "",
@@ -249,22 +284,24 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         addr: "",
         fctCpc: 0,
         noProcessInflAmnt : roundNumber(maxNoProcessInflAmnt, 0),
-        infoRnDay: Math.round(maxInfoRnDay * 10) / 10?(Math.round(maxInfoRnDay * 10) / 10).toFixed(1):'0.0',
-        tpInflWqltBod: Math.round(maxTpInflWqltBod * 10) / 10?(Math.round(maxTpInflWqltBod * 10) / 10).toFixed(1):'0.0',
-        tpInflWqltTp: Math.round(maxTpInflWqltTp * 1000) / 1000?(Math.round(maxTpInflWqltTp * 1000) / 1000).toFixed(3):'0.000'
+        infoRnDay: Math.round(maxInfoRnDay * 10) / 10?roundNumber(maxInfoRnDay, 1):'0.0',
+        tpInflWqltBod: Math.round(maxTpInflWqltBod * 10) / 10?roundNumber(maxTpInflWqltBod, 1):'0.0',
+        tpInflWqltTp: Math.round(maxTpInflWqltTp * 1000) / 1000?roundNumber(maxTpInflWqltTp, 3):'0.000'
       },
       {
         msrDt : '최소',
-        efflWqltBod : Math.round(minEfflWqltBod * 10) / 10?(Math.round(minEfflWqltBod * 10) / 10).toFixed(1) : '0.0',
-        efflWqltToc : Math.round(minefflWqltToc * 10) / 10?(Math.round(minefflWqltToc * 10) / 10).toFixed(1) : '0.0',
-        efflWqltSs : Math.round(minEfflWqltSs * 10) / 10?(Math.round(minEfflWqltSs * 10) / 10).toFixed(1) : '0.0',
-        efflWqltTn : Math.round(minEfflWqltTn * 1000) / 1000?(Math.round(minEfflWqltTn * 1000) / 1000).toFixed(3) : '0.000',
-        efflWqltTp : Math.round(minEfflWqltTp * 1000) / 1000?(Math.round(minEfflWqltTp * 1000) / 1000).toFixed(3) : '0.000',
-        inflAssctBfrWqltBod : Math.round(mininflAssctBfrWqltBod * 10) / 10?(Math.round(mininflAssctBfrWqltBod * 10) / 10).toFixed(1) : '0.0',
-        inflAssctBfrWqltTn : Math.round(mininflAssctBfrWqltTn * 1000) / 1000?(Math.round(mininflAssctBfrWqltTn * 1000) / 1000).toFixed(3) : '0.000',
-        inflAssctBfrWqltTp : Math.round(minInflAssctBfrWqltTp * 1000) / 1000?(Math.round(minInflAssctBfrWqltTp * 1000) / 1000).toFixed(3) : '0.000',
-        inflAssctBfrWqltToc : Math.round(mininflAssctBfrWqltToc * 10) / 10?(Math.round(mininflAssctBfrWqltToc * 10) / 10).toFixed(1) : '0.0',
-        inflAssctBfrWqltSs : Math.round(mininflAssctBfrWqltSs * 10) / 10?(Math.round(mininflAssctBfrWqltSs * 10) / 10).toFixed(1) : '0.0',
+        efflWqltBod : Math.round(minEfflWqltBod * 10) / 10?roundNumber(minEfflWqltBod, 1) : '0.0',
+        efflWqltToc : Math.round(minefflWqltToc * 10) / 10?roundNumber(minefflWqltToc, 1) : '0.0',
+        efflWqltCod : Math.round(minefflWqltCod * 10) / 10?"("+roundNumber(minefflWqltCod, 1)+")" : '(0.0)',
+        efflWqltSs : Math.round(minEfflWqltSs * 10) / 10?roundNumber(minEfflWqltSs, 1) : '0.0',
+        efflWqltTn : Math.round(minEfflWqltTn * 1000) / 1000?roundNumber(minEfflWqltTn, 3) : '0.000',
+        efflWqltTp : Math.round(minEfflWqltTp * 1000) / 1000?roundNumber(minEfflWqltTp, 3) : '0.000',
+        inflAssctBfrWqltBod : Math.round(mininflAssctBfrWqltBod * 10) / 10?roundNumber(mininflAssctBfrWqltBod, 1) : '0.0',
+        inflAssctBfrWqltTn : Math.round(mininflAssctBfrWqltTn * 1000) / 1000?roundNumber(mininflAssctBfrWqltTn, 3) : '0.000',
+        inflAssctBfrWqltTp : Math.round(minInflAssctBfrWqltTp * 1000) / 1000?roundNumber(minInflAssctBfrWqltTp, 3) : '0.000',
+        inflAssctBfrWqltToc : Math.round(mininflAssctBfrWqltToc * 10) / 10?roundNumber(mininflAssctBfrWqltToc, 1) : '0.0',
+        inflAssctBfrWqltCod : Math.round(mininflAssctBfrWqltCod * 10) / 10?"("+roundNumber(mininflAssctBfrWqltCod, 1)+")" : '(0.0)',
+        inflAssctBfrWqltSs : Math.round(mininflAssctBfrWqltSs * 10) / 10?roundNumber(mininflAssctBfrWqltSs, 1) : '0.0',
         bscFctCd: "",
         bscFctNm: "",
         lclgvrnmntNm: "",
@@ -273,9 +310,9 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         addr: "",
         fctCpc: 0,
         noProcessInflAmnt : roundNumber(minNoProcessInflAmnt, 0),
-        infoRnDay: Math.round(minInfoRnDay * 10) / 10?'0.0':(Math.round(minInfoRnDay * 10) / 10).toFixed(1),
-        tpInflWqltBod: Math.round(minTpInflWqltBod * 10) / 10 && minTpInflWqltBod != 99999999?(Math.round(minTpInflWqltBod * 10) / 10).toFixed(1):'0.0',
-        tpInflWqltTp: Math.round(minTpInflWqltTp * 1000) / 1000 && minTpInflWqltTp != 99999999?(Math.round(minTpInflWqltTp * 1000) / 1000).toFixed(3):'0.000'
+        infoRnDay: Math.round(minInfoRnDay * 10) / 10?'0.0':roundNumber(minInfoRnDay, 1),
+        tpInflWqltBod: Math.round(minTpInflWqltBod * 10) / 10 && minTpInflWqltBod != 99999999?roundNumber(minTpInflWqltBod, 1):'0.0',
+        tpInflWqltTp: Math.round(minTpInflWqltTp * 1000) / 1000 && minTpInflWqltTp != 99999999?roundNumber(minTpInflWqltTp, 3):'0.000'
       },
       ...filteredData
     ];
@@ -319,22 +356,29 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       copyYearList.forEach((item) => {
         excelDownList.push({
           날짜: item.msrDt,
-          "유입BOD(mg/L)": item.inflAssctBfrWqltBod,
-          "유입TOC(COD)(mg/L)": item.inflAssctBfrWqltToc,
-          "유입SS(mg/L)": item.inflAssctBfrWqltSs,
-          "유입TN(mg/L)": item.inflAssctBfrWqltTn,
-          "유입TP(mg/L)": item.inflAssctBfrWqltTp,
-          "유출BOD(mg/L)": item.efflWqltBod,
-          "유출TOC(COD)(mg/L)": item.efflWqltToc,
-          "유출SS(mg/L)": item.efflWqltSs,
-          "유출TN(mg/L)": item.efflWqltTn,
-          "유출TP(mg/L)": item.efflWqltTp,
-/*           "강우량(mm/일)": item.infoRnDay?item.infoRnDay.toString():"0.0", */
+          "유입BOD(mg/L)": CommaToNumber(item.inflAssctBfrWqltBod),
+          "유입TOC(COD)(mg/L)": CommaToNumber(item.inflAssctBfrWqltToc),
+          "유입SS(mg/L)": CommaToNumber(item.inflAssctBfrWqltSs),
+          "유입TN(mg/L)": CommaToNumber(item.inflAssctBfrWqltTn),
+          "유입TP(mg/L)": CommaToNumber(item.inflAssctBfrWqltTp),
+          "유출BOD(mg/L)": CommaToNumber(item.efflWqltBod),
+          "유출TOC(COD)(mg/L)": CommaToNumber(item.efflWqltToc),
+          "유출SS(mg/L)": CommaToNumber(item.efflWqltSs),
+          "유출TN(mg/L)": CommaToNumber(item.efflWqltTn),
+          "유출TP(mg/L)": CommaToNumber(item.efflWqltTp),
+          "강우량(mm/일)": CommaToNumber(item.infoRnDay?item.infoRnDay.toString():"0.0"),
         });
       });
     }
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: searchYear+'년 '+fcltyName + ' 수질현황', sheetNameArray: [fcltyName + ' 수질현황'], headerRange: 'A1:K1' });
+      downloadExcelFormat(
+        { data: JSON.parse(JSON.stringify(excelDownList))
+          , fileName: searchYear+'년 '+fcltyName + ' 수질현황'
+          , sheetNameArray: [fcltyName + ' 수질현황']
+          , headerRange: 'A1:L1'
+          , decimalArray1: [1,2,3,6,7,8,11]
+          , decimalArray3: [4,5,9,10]
+        });
     } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
       alert('다운받을 데이터가 없습니다.');
     }
@@ -364,7 +408,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                 <UiTable 
                   headName={undefined} 
                   tableData={copyYearList} 
-                  headlist={upHeadListModalYear} 
+                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
                   pageSize={0} 
                   total={0} 
                   cellClick={undefined} 
@@ -392,7 +436,9 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalTms} layoutNum={4} />
                 </UiTable>
-                {msrmtDate != yesterDayStr?.replaceAll('-','')?<h3 className="text-2xl text-left text-gray-500">※전날 데이터 결측으로 인해 가장 최근 데이터 표출함</h3> : ''}
+                {msrmtDate != yesterDayStr?.replaceAll('-','') ? (
+                  <UnderComment commentArray={["전날 데이터 결측으로 인해 가장 최근 데이터 표출함"]} divHeight="0"/>
+                ) : null}
               </div>
             </TabsContent>
 
@@ -410,7 +456,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                 <UiTable 
                   headName={undefined}
                   tableData={copyYearList}
-                  headlist={upHeadListModalYear}
+                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear}
                   pageSize={0}
                   total={0}
                   cellClick={undefined}
@@ -421,10 +467,6 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <div className="mt-14">
-                <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-                <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-              </div>
             </TabsContent>
 
             <TabsContent value="tab_term_winter">
@@ -441,7 +483,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                 <UiTable 
                   headName={undefined} 
                   tableData={copyYearList} 
-                  headlist={upHeadListModalYear} 
+                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
                   pageSize={0} 
                   total={0} 
                   cellClick={undefined} 
@@ -452,10 +494,6 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <div className="mt-14">
-                <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-                <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-              </div>
             </TabsContent>
 
             <TabsContent value="tab_term_chuncheon">
@@ -472,7 +510,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                 <UiTable 
                   headName={undefined} 
                   tableData={copyYearList} 
-                  headlist={upHeadListModalYear} 
+                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
                   pageSize={0} 
                   total={0} 
                   cellClick={undefined} 
@@ -483,11 +521,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <div className="mt-14">
-                <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-                <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-                <span className="text-2xl font-bold text-gray-500">☞ 청천시 : 강우량이 3mm미만의 날</span>
-              </div>
+              <UnderComment commentArray={commentArrayChungchun} divHeight="10"/>
             </TabsContent>
 
             <TabsContent value="tab_term_rain">
@@ -504,7 +538,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                 <UiTable 
                   headName={undefined} 
                   tableData={copyYearList} 
-                  headlist={upHeadListModalYear} 
+                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
                   pageSize={0} 
                   total={0} 
                   cellClick={undefined} 
@@ -515,11 +549,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <div className="mt-14">
-                <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-                <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-                <span className="text-2xl font-bold text-gray-500">☞ 강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날</span>
-              </div>
+              <UnderComment commentArray={commentArrayRain} divHeight="10"/>
             </TabsContent>
           </UITab>
         </TabsContent>

apps/fo/app/pages/(with-layout)/facilityWaterQlty/page.tsx

@@ -1,13 +1,19 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 수질현황
+ * 
+ * - 시설별 수질 현황을 조회조건대로 추출하여 표로 보여주는 화면.
+ */
+
+"use client"
 
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
-import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
+import type { FacilityWaterQltyProps } from "@/app/store/facilityWaterQlty";
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
+import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import { useCallback, useEffect, useRef, useState } from "react";
 import WaterQualityModal from "./modal/page";
-import type { FacilityWaterQltyProps } from "@/app/store/facilityWaterQlty";
-import LoadingOverlay from "@common/business_components/ui/loadingBar";
 
 export default function ProcessFacilitySearch() {
   const { Common
@@ -138,12 +144,23 @@ export default function ProcessFacilitySearch() {
 
   useEffect(() => {
     if (excelList && excelList.length > 0) {
-      downloadExcel({ 
+      downloadExcelFormat(
+        {
+          data: excelList as unknown as JSON[], 
+          fileName: '시설별 수질현황', 
+          sheetNameArray: ['시설별 수질현황'], 
+          headerRange: 'A1:T1',
+          decimalArray1:[10,11,12,15,16,17],
+          decimalArray3:[13,14,18,19]
+        }
+      );
+
+      /* downloadExcel({ 
         data: excelList as unknown as JSON[], 
         fileName: '시설별 수질현황', 
         sheetNameArray: ['시설별 수질현황'], 
         headerRange: 'A1:T1' 
-      });
+      }); */
     }
   }, [excelList]);
 
@@ -190,7 +207,7 @@ export default function ProcessFacilitySearch() {
           <LoadingOverlay isLoading={isLoading} />
           <div className="h-full w-full overflow-x-scroll">
             <div className={widthSize}>
-              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total<10?facilityWaterQltyList.length:total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total<10?facilityWaterQltyList.length:total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
             </div>
           </div>
         </ListDiv>

apps/fo/app/pages/(with-layout)/flowRate/modal/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 유량현황(모달))
+ * 
+ * - 선택한 시설의 유량 정보를 하루 단위로 표로 출력해주는 모달
+ */
+
+"use client"
 import FacilityTermModalHeader from "@/app/components/common/FacilityTermModalHeader";
 import { useFoStore } from "@/app/store";
 import type { FlowRateModalInterface, modalExcelType } from "@/app/store/flowRate";
@@ -8,6 +14,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReturnType } from "../../../../components/common/FacilityTermModalHeader";
 import { roundUp } from "@/app/store/common";
 import { roundNumber } from "@/app/components/common/DataForm";
+import UnderComment from "@/app/components/common/UnderComment";
+import CommaToNumber from "@/app/components/common/CommaToNumber";
 
 const tabList = [
   { value: 'tab_term_year', label: '연간' },
@@ -179,11 +187,11 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
       copyYearList.forEach((item) => {
         excelDownList.push({
           "날짜": item.msrDt,
-          "총유입량(m³/일)": item.totInflAmnt,
-          "하수유입량(m³/일)": item.inflAmnt,
-          "연계처리량(m³/일)": item.sumFlow,
-          "총인반류수량(m³/일)": item.returnAmnt,
-          "방류량(m³/일)": item.efflAmnt,
+          "총유입량(m³/일)": CommaToNumber(item.totInflAmnt),
+          "하수유입량(m³/일)": CommaToNumber(item.inflAmnt),
+          "연계처리량(m³/일)": CommaToNumber(item.sumFlow),
+          "총인반류수량(m³/일)": CommaToNumber(item.returnAmnt),
+          "방류량(m³/일)": CommaToNumber(item.efflAmnt),
           /* "강우량(mm/일)": item.infoRnDay, */
         });
       });
@@ -225,10 +233,6 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
               boldArray={[0,1,2]}
             />
           </div>
-          <div className="mt-14">
-            <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-          </div>
         </TabsContent>
         <TabsContent value="tab_term_summer">
           <FacilityTermModalHeader<FlowRateModalInterface>
@@ -253,10 +257,6 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
               boldArray={[0,1,2]}
             />
           </div>
-          <div className="mt-14">
-            <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-          </div>
         </TabsContent>
         <TabsContent value="tab_term_winter">
           <FacilityTermModalHeader<FlowRateModalInterface>
@@ -281,10 +281,6 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
               boldArray={[0,1,2]}
             />
           </div>
-          <div className="mt-14">
-            <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-          </div>
         </TabsContent>
         <TabsContent value="tab_term_chuncheon">  
           <FacilityTermModalHeader<FlowRateModalInterface>
@@ -309,11 +305,6 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
               boldArray={[0,1,2]}
             />
           </div>
-          <div className="mt-14">
-            <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 청천시 : 강우량이 3mm미만의 날</span>
-          </div>
         </TabsContent>
         <TabsContent value="tab_term_rain">
           <FacilityTermModalHeader<FlowRateModalInterface>
@@ -328,11 +319,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
           <div className="h-[370px] overflow-y-auto overflow-x-hidden">
             <UiTable headName="유량현황" tableData={copyYearList} headlist={upHeadListFlowRateModalYear} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} className="h-[370px]" boldArray={[0,1,2]}/>
           </div>
-          <div className="mt-14">
-            <span className="text-2xl font-bold text-gray-500">☞ 미처리하수량 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]​/강우시 일별유입BOD)​</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 음수값 발생시 제외(null, 평균값 산정시 제외)</span><br></br>
-            <span className="text-2xl font-bold text-gray-500">☞ 강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날</span>
-          </div>
+          <UnderComment commentArray={["강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날"]} />
         </TabsContent>
       </UITab>
     </>

apps/fo/app/pages/(with-layout)/flowRate/page.tsx

@@ -1,12 +1,18 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 유량현황
+ * 
+ * - 시설별 유량 현황을 조회조건대로 추출하여 표로 보여주는 화면.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
-import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
+import type { ExcelType } from "@/app/store/flowRate";
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
+import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import { useCallback, useEffect, useRef, useState } from "react";
 import FlowRateModal from "./modal/page";
-import type { ExcelType } from "@/app/store/flowRate";
-import LoadingOverlay from "@common/business_components/ui/loadingBar";
 
 export default function ProcessFacilitySearch() {
   const {Common
@@ -134,7 +140,7 @@ export default function ProcessFacilitySearch() {
   
   useEffect(() => {
     if (excelList && excelList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelList)), fileName: '시설별 유량현황', sheetNameArray: ['시설별 유량현황'], headerRange: 'A1:O1' });
+      downloadExcelFormat({ data: JSON.parse(JSON.stringify(excelList)), fileName: '시설별 유량현황', sheetNameArray: ['시설별 유량현황'], headerRange: 'A1:O1', decimalArray0: [9,10,11,12,13,14] });
     } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
       alert('다운받을 데이터가 없습니다.');
     }
@@ -192,7 +198,7 @@ export default function ProcessFacilitySearch() {
           <LoadingOverlay isLoading={isLoading} />
           <div className="h-full w-full overflow-x-scroll">
             <div className={widthSize}>
-              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 유량현황"} tableData={flowRateList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 유량현황"} tableData={flowRateList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
             </div>
           </div>
         </ListDiv>

apps/fo/app/pages/(with-layout)/planSewage/page.tsx

@@ -1,11 +1,24 @@
-"use client"
+/**
+ *  처리시설 연간 운영현황 - 계획하수량 산정지표 현황
+ * 
+ * - 시설별 여유용량, 변동부하율, 분류식화율을 조회조건대로 추출하여 표로 보여주는 화면.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
 import { downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import { useCallback, useEffect, useRef, useState } from "react";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
- 
+import UnderComment from "@/app/components/common/UnderComment";
+
+const commentArray = [
+  "여유용량 = 하수처리시설 시설용량 – 건기시 유입유량(평균)​",
+  "변동부하율 = 건기시 일최대 유량/일평균​유량(기준 최근 3개년)​",
+  "분류식화율 = 분류식지역 면적(㎢) / 처리​구역 면적합계(㎢) ×100"
+]
+
 export default function PlanSewage() {
   const {Common
     ,PlanSewage 
@@ -135,12 +148,14 @@ export default function PlanSewage() {
       default:
         if(sidoValue !== '0') nameCd = sidoValue;
         if(sigunValue !== '0') nameCd = sigunValue;
-          partStr = envPartValue !== '0' ? envPartValue:partValue;
-          break;
+        partStr = envPartValue !== '0' ? envPartValue:partValue;
+        break;
     }
     if (partStr.length > 1 || fcltCpct !== '0' || operationValue!== '0' ||nameCd ||(fcltyName.trim() !== "" && fcltyName.trim() !== null)) {
       searchPlanSewageList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
     } else {
+      // G로 넘기면 데이터가 안떠서 환경청 전체로 넘기면 전체를 추출하기위해서...
+      partValue = partValue==='G'?'A':partValue;
       searchPlanSewageList(pageNo, pageCnt, searchYear, partValue);
     }
   }, [operationValue, fcltyName, searchPlanSewageList, searchYear, fcltCpct]);
@@ -191,13 +206,9 @@ export default function PlanSewage() {
         <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll">
           <div className={widthSize}>
-            <UiTable cellClick={ undefined } headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
-          </div>
-          <div className="mt-14">
-            <span className="text-2xl font-bold text-gray-500">☞ 여유용량 = 하수처리시설 시설용량 – 건기시 유입유량(평균)​</span><br/>
-            <span className="text-2xl font-bold text-gray-500">☞ 변동부하율 = 건기시 일최대 유량/일평균​유량(기준 최근 3개년)​</span><br/>
-            <span className="text-2xl font-bold text-gray-500">☞ 분류식화율 = 분류식지역 면적(㎢) / 처리​구역 면적합계(㎢) ×100</span><br/>
+            <UiTable cellClick={ undefined } headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
           </div>
+          <UnderComment divHeight={"5"} commentArray={commentArray} />
         </div>
       </ListDiv>
     </MainDiv>

apps/fo/app/pages/(with-layout)/processArea/modal/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ *  처리시설 현황 - 처리구역정보(모달)
+ * 
+ * - 선택한 시설의 계획정보를 가져와 표로 출력해주는 모달
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import { UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";

apps/fo/app/pages/(with-layout)/processArea/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ *  처리시설 현황 - 처리구역정보(메인)
+ * 
+ * - 시설계획 정보를 조회조건대로 추출하여 표로 보여주는 화면.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
@@ -157,7 +163,7 @@ export default function ProcessArea() {
           <LoadingOverlay isLoading={isLoading} />
           <div className="h-full w-full overflow-x-scroll">
             <div className="w-[180%]">
-              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"처리구역정보"} tableData={mainList} headlist={upHeadList1} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"처리구역정보"} tableData={mainList} headlist={upHeadList1} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
             </div>
           </div>
         </ListDiv>

apps/fo/app/pages/(with-layout)/processFacility/modal/page.tsx

@@ -1,8 +1,13 @@
-"use client"
-import { roundNumber } from "@/app/components/common/DataForm";
+/**
+ *  처리시설 현황 - 처리시설 시설정보(모달))
+ * 
+ * - 선택한 시설의 정보와 시설이력정보를 보여주는 모달.
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/dashboard";
-import { downloadExcel, filePickedBlobArray, UITab, UiTable } from "@common/business_components/ui";
+import { downloadExcelFormat, filePickedBlobArray, UITab, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import {
   TabsContent
@@ -131,12 +136,12 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
           "준공일": item.cmplDt,
           "시운전완료일": item.trlrnCmplDt,
           "가동개시일": item.rnDt,
-          "시설용량(m³/일)": roundNumber(item.fctCpc,0),
+          "시설용량(m³/일)": item.fctCpc&&item.fctCpc.toString().trim()!=''?Number(item.fctCpc.toString().replaceAll(',','')):'',
         });
       });
     }
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.fcltyName + ' 시설이력관리', sheetNameArray: [props.fcltyName + ' 시설이력관리'], headerRange: 'A1:I1' });
+      downloadExcelFormat({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.fcltyName + ' 시설이력관리', sheetNameArray: [props.fcltyName + ' 시설이력관리'], headerRange: 'A1:I1' });
     } else if (gridListFcltyHistInfo.length == 0) {
       alert('다운받을 데이터가 없습니다.');
     }

apps/fo/app/pages/(with-layout)/processFacility/page.tsx

@@ -1,11 +1,17 @@
-"use client"
-import { HeadMakeColSpan } from "@/app/components/common/HeadMakeColSpan";
+/**
+ *  처리시설 현황 - 처리시설 시설정보(메인)
+ * 
+ * - 시설별 정보를 조회조건대로 추출하여 표로 보여주는 화면.
+ */
+
+"use client"
+import UnderComment from "@/app/components/common/UnderComment";
 import { useFoStore } from "@/app/store";
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
+import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import { useCallback, useEffect, useRef, useState } from "react";
 import ProcessFacilityInfoModal from "./modal/page";
-import LoadingOverlay from "@common/business_components/ui/loadingBar";
 
 export default function ProcessFacilitySearch() {
   const {Common
@@ -274,13 +280,13 @@ export default function ProcessFacilitySearch() {
                 total={total} 
                 resetPageNo={resetPage}
                 onPageChange={changePage}
+                widthFixed={true}
               >
-                <HeadMakeColSpan upHeadList={upHeadList} layoutNum={partValue}/>
               </UiTable>
             </div>
+            <UnderComment divHeight={"0"} commentArray={["계획유입수질 및	설계유입수질은 해당 BOD를 나타냄"]} />
           </div>
         </ListDiv>
-        <span className="text-2xl text-gray-500">※계획유입수질 및	설계유입수질은 해당 BOD를 나타냄</span>
       </ContentsDiv>
       {selectedRow !== null && ( 
         <UiModal 

apps/fo/app/pages/(with-layout)/rdi/page.tsx

@@ -1,10 +1,22 @@
-"use client"
+/**
+ *  운영실태 - RDII 추정
+ * 
+ * - 시설별 유입량과 하절기 최저 유입 BOD 정보를 통해 RDII를 추정치를 보여주는 화면
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import { useCallback, useEffect, useRef, useState } from "react";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
+import UnderComment from "@/app/components/common/UnderComment";
+
+const commentArray = [
+  "강우시 총 추정유입량 = 청천시 유입하수량 + RDII 추정값",
+  "주) 처리장 유입부에서 측정된 유량 및 수질조사 자료를 기준으로 산정된 결과임"
+]
 
 export default function Rdi() {
   const {Common
@@ -60,7 +72,7 @@ export default function Rdi() {
   // 초기화 변수
   const [resetPage, setResetPage] = useState<boolean>(false);
   // 표 너비
-  const [widthSize, setWidthSize] = useState<string>("w-[120%]");
+  const [widthSize, setWidthSize] = useState<string>("w-[130%]");
   // 구분별 그리드 헤더
   const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
   // 용량별
@@ -149,7 +161,7 @@ export default function Rdi() {
   }, [operationValue, fcltyName, searchRdiList, searchYear, fcltCpct]);
 
   const chkVal = useCallback((returntype:ReturnType) => {
-    setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
+    setWidthSize(returntype.partValue=='A' ?"w-[130%]":"w-[150%]")
     setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
     setResetPage(true);
   }, [upHeadList1, upHeadList2, upHeadList3]);
@@ -195,10 +207,9 @@ export default function Rdi() {
       <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll">
           <div className={widthSize}>
-            <UiTable cellClick={ undefined } headName={"RDII추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+            <UiTable cellClick={ undefined } headName={"RDII추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
           </div>
-          <span className="text-2xl text-gray-500">※ 강우시 총 추정유입량 = 청천시 유입하수량 + RDII 추정값</span><br></br>
-          <span className="text-2xl text-gray-500">※ 주) 처리장 유입부에서 측정된 유량 및 수질조사 자료를 기준으로 산정된 결과임</span>
+          <UnderComment divHeight={"0"} commentArray={commentArray} />
         </div>
       </ListDiv>
       </ContentsDiv>

apps/fo/app/pages/(with-layout)/sewageOccur/modal/page.tsx

@@ -1,4 +1,10 @@
-"use client"
+/**
+ *  운영실태 - 오수발생량 추정(모달)
+ * 
+ * - 선택한 시설의 물사용량과 오수전환율을 가지고 오수발생량 추정 데이터를 월별로 보여주는 모달.
+ */
+
+"use client"
 import { roundNumber } from "@/app/components/common/DataForm";
 import { useFoStore } from "@/app/store";
 import type { modalTableType } from "@/app/store/sewageOccur";
@@ -142,7 +148,7 @@ export default function SewageOccurModal(props: { fcltyName: string; facilityCd
           <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownload}>
             {"엑셀다운로드"}
           </Button>
-          <UiTable headName={"오수발생량 추정"} tableData={detailList} headlist={upHeadListSewageOccurDetail} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} boldArray={[0, 1, 2]}>
+          <UiTable headName={"오수발생량 추정"} tableData={detailList} headlist={upHeadListSewageOccurDetail} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} boldArray={[0, 1, 2]} widthFixed={true} >
           </UiTable>
         </div>
       </ListDiv>

apps/fo/app/pages/(with-layout)/sewageOccur/page.tsx

@@ -1,4 +1,11 @@
-"use client"
+/**
+ *  운영실태 - 오수발생량 추정(메인)
+ * 
+ * - 조회조건대로 시설별 물 사용량과 오수전환율을 기반으로 오수발생량 추정치를 표로 보여주는 화면
+ * - 현재 물사용량의 경우 연계받는 데이터가 아닌 연 하수유입량의 65%로 가정하고 계산함
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
@@ -222,7 +229,7 @@ export default function PlanSewage() {
         <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll">
           <div className={widthSize}>
-            <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"오수발생량 추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+            <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"오수발생량 추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
           </div>
         </div>
       </ListDiv>

apps/fo/app/pages/(with-layout)/underWaterInput/modal/page.tsx

@@ -1,4 +1,11 @@
-"use client"
+/**
+ *  운영실태 - 지하수 유입량 추정(모달)
+ * 
+ * - 선택한 시설의 월별 청천시 실제 하수유입량, 오수발생량으로 지하수 유입량을 보여주는 모달
+ * - 청천시 실제 하수유입량 - 오수발생량으로 지하수유입량을 추정한다.
+ */
+
+"use client"
 import { roundNumber } from "@/app/components/common/DataForm";
 import { useFoStore } from "@/app/store";
 import type { UnderWaterInputModalProps } from "@/app/store/underWaterInput/types";
@@ -166,6 +173,7 @@ export default function UnderWaterInputModal({fcltyCd='', fcltyName='',searchYea
               onPageChange={() => {}} 
               className="h-[200px]"
               boldArray={[0,1,2]}
+              widthFixed={true}
             />
           </div>
         </TabsContent>
@@ -233,6 +241,7 @@ export default function UnderWaterInputModal({fcltyCd='', fcltyName='',searchYea
               onPageChange={() => { } }
               className="h-[500px]"
               boldArray={[0,1,2]}
+              widthFixed={true}
             />
           </div>
         </TabsContent>
@@ -291,6 +300,7 @@ export default function UnderWaterInputModal({fcltyCd='', fcltyName='',searchYea
               onPageChange={() => {}} 
               className="h-[500px]"
               boldArray={[0,1,2]}
+              widthFixed={true}
             />
           </div>
         </TabsContent>

apps/fo/app/pages/(with-layout)/underWaterInput/page.tsx

@@ -1,4 +1,12 @@
-"use client"
+/**
+ *  운영실태 - 지하수 유입량 추정(메인)
+ * 
+ * - 조회조건대로 시설별 연간, 하절기, 동절기 단위로 지하수 유입량 추정을 표로 보여주는 화면
+ * - 청천시 실제 하수유입량 - 오수발생량으로 지하수유입량을 추정한다.
+ * - 연간 지하수 유입량이 하수유입량보다 20% 클 경우 초과유입으로 아닌 경우 적정으로 적정여부를 표시한다. 
+ */
+
+"use client"
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
@@ -220,7 +228,7 @@ export default function UnderWaterInput() {
         <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll">
           <div className={widthSize}>
-            <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"지하수유입량 추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
+            <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"지하수유입량 추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true}/>
           </div>
         </div>
         <span className="text-2xl text-gray-500">※적정여부 = 연간 지하수유입량/연평균 유입하수량*100 </span><br></br>

apps/fo/app/store/common/index.tsx

@@ -225,6 +225,8 @@ export const qltyDataSetting = (value: number, day : number, digit: number) => {
     return value > 0 ? roundUp((value/day), digit).toFixed(digit) : toZero;
 };
 
+export const COD_YEAR = 2021;
+
 /**
  * STORE - API
  */
@@ -392,6 +394,7 @@ export type CommonType = {
     selectFlowPanel: SelectDataType[];
     selectEnvPartData: envPartSelectDataType[];
     btnClass: string;
+    COD_YEAR : number;
   };
 
   auth: {
@@ -421,6 +424,7 @@ export const commonState: CommonType = {
     selectFlowPanel: selectFlowPanel,
     selectEnvPartData: selectEnvPartData,
     btnClass: "p-4 m-2 !mr-10 text-white rounded-sm text-lg font-medium",
+    COD_YEAR : COD_YEAR,
   },
 
   auth: {

apps/fo/app/store/dashboard/index.tsx

@@ -26,6 +26,7 @@ export type TableUpperProps = {
     row? : number;
     rowSpan?: number;
     colSpan?: number;
+    widthPercent? : number;
 }
 
 // ===TAB1
@@ -52,9 +53,9 @@ export type planFcltyListProps = {
 export type OperationalStatusListProps = {
     flowRate : string,
     waterQlty : string,
-    yearAvg : number | string | '',
-    yearMax : number | string | '',
-    yearMin : number | string | '',
+    yearAvg : number | '',
+    yearMax : number | '',
+    yearMin : number | '',
     summerAll : number | string | '',
     summerThree : number | string | '',
     summerRain : number | string | '',
@@ -357,12 +358,12 @@ const upHeadListOperationStatus : TableUpperProps[] = [
 ]
 
 const upHeadListRainManage : TableUpperProps[] = [
-    { id: "rainItem", title: "강우량", row:0, rowSpan:2 },
-    { id: "rainRate", title: "강우조건\n비율(%)", row:0, rowSpan:2, align: "right" },
-    { id: "rainDay", title: "일수", row:0, rowSpan:2, align: "right" },
+    { id: "rainItem", title: "강우량", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "rainRate", title: "강우조건\n비율(%)", row:0, rowSpan:2, align: "right", widthPercent: 5 },
+    { id: "rainDay", title: "일수", row:0, rowSpan:2, align: "right", widthPercent: 5 },
     { id: "A", title: "유입(㎥/일)", row:0, colSpan:2 },
-    { id: "inflAmnt", title: "유입유량", row:1, align: "right" },
-    { id: "fctCpc", title: "시설용량대비", row:1, align: "right" },
+    { id: "inflAmnt", title: "유입유량", row:1, align: "right", widthPercent: 6 },
+    { id: "fctCpc", title: "시설용량대비", row:1, align: "right", widthPercent: 6 },
     { id: "B", title: "설계유입수질(㎎/L)", row:0, colSpan:5 }, 
     { id: "dsInflWqltBod", title: "BOD", row:1, align: "right" },
     { id: "dsInflWqltCod", title: "TOC\n(COD)", row:1, align: "right" },
@@ -404,7 +405,7 @@ const upHeadListDrainageEquipment : TableUpperProps[] = [
     { id: "etc", title: "비고", row:0, upName:"upChangeRe7", upSequnce:1 },
 ]
 
-let operationalStatusList : OperationalStatusListProps[] = [
+const operationalStatusListOrg : OperationalStatusListProps[] = [
     {
         flowRate : '유량\n(㎥/일)',
         waterQlty : '유입',
@@ -753,31 +754,40 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
 
         // (0) 전체변수
         let summerDay = 0;
+        let noNullSummerDay = 0;
         let totalInflBodAvgSummer = 0;
         let totalInflTnAvgSummer = 0;
         let totalInflTpAvgSummer = 0;
         let totalEfflBodAvgSummer = 0;
         let totalEfflTnAvgSummer = 0;
         let totalEfflTpAvgSummer = 0;
+        let totalTpInflAvgSummer = 0;
 
         let winterDay = 0;
+        let noNullWinterDay = 0;
         let totalInflBodAvgWinter = 0;
         let totalInflTnAvgWinter = 0;
         let totalInflTpAvgWinter = 0;
         let totalEfflBodAvgWinter = 0;
         let totalEfflTnAvgWinter = 0;
         let totalEfflTpAvgWinter = 0;
+        let totalTpInflAvgWinter = 0;
 
         // 전체 대상
         qltyData.forEach((item: any) => {
             const month = item.msrDt.substring(4, 6); // 월 추출
             if(month === '01' || month === '02'){
+                winterDay += 1;
+                if(item.tpInflWqltTp != null && item.tpInflWqltTp != 0){
+                    noNullWinterDay+=1;
+                }
                 const inflbod = nullToZero(item.inflAssctBfrWqltBod);
                 const infltn = nullToZero(item.inflAssctBfrWqltTn);
                 const infltp = nullToZero(item.inflAssctBfrWqltTp);
                 const effbod = nullToZero(item.efflWqltBod);
                 const efftn = nullToZero(item.efflWqltTn);
                 const efftp = nullToZero(item.efflWqltTp);
+                const tpInfl = nullToZero(item.tpInflWqltTp);
                 
                 totalInflBodAvgWinter += inflbod;
                 totalInflTnAvgWinter += infltn;
@@ -785,15 +795,19 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 totalEfflBodAvgWinter += effbod;
                 totalEfflTnAvgWinter += efftn;
                 totalEfflTpAvgWinter += efftp;
-                winterDay += 1;
+                totalTpInflAvgWinter += tpInfl;
             }else if(month === '06' || month === '07' || month === '08'){
                 summerDay += 1;
+                if(item.tpInflWqltTp != null && item.tpInflWqltTp != 0){
+                    noNullSummerDay+=1;
+                }
                 const inflbod = nullToZero(item.inflAssctBfrWqltBod);
                 const infltn = nullToZero(item.inflAssctBfrWqltTn);
                 const infltp = nullToZero(item.inflAssctBfrWqltTp);
                 const effbod = nullToZero(item.efflWqltBod);
                 const efftn = nullToZero(item.efflWqltTn);
                 const efftp = nullToZero(item.efflWqltTp);
+                const tpInfl = nullToZero(item.tpInflWqltTp);
 
                 totalInflBodAvgSummer += inflbod;
                 totalInflTnAvgSummer += infltn;
@@ -801,6 +815,7 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 totalEfflBodAvgSummer += effbod;
                 totalEfflTnAvgSummer += efftn;
                 totalEfflTpAvgSummer += efftp;
+                totalTpInflAvgSummer += tpInfl;
             }
         });
 
@@ -811,6 +826,10 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         orgData[9].winterAll = qltyDataSetting(totalInflTpAvgWinter, winterDay, 3);
         orgData[10].winterAll = qltyDataSetting(totalEfflTpAvgWinter, winterDay, 3);
 
+        //총인설비
+        orgData[11].winterAll = qltyDataSetting(totalTpInflAvgWinter, noNullWinterDay, 3);
+        orgData[12].winterAll = qltyDataSetting(totalEfflTpAvgWinter, winterDay, 3);
+
         orgData[5].summerAll = qltyDataSetting(totalInflBodAvgSummer, summerDay, 1);
         orgData[6].summerAll = qltyDataSetting(totalEfflBodAvgSummer, summerDay, 1);
         orgData[7].summerAll = qltyDataSetting(totalInflTnAvgSummer, summerDay, 3);
@@ -818,10 +837,16 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         orgData[9].summerAll = qltyDataSetting(totalInflTpAvgSummer, summerDay, 3);
         orgData[10].summerAll = qltyDataSetting(totalEfflTpAvgSummer, summerDay, 3);
 
+        //총인설비
+        orgData[11].summerAll = qltyDataSetting(totalTpInflAvgSummer, noNullSummerDay, 3);
+        orgData[12].summerAll = qltyDataSetting(totalEfflTpAvgSummer, summerDay, 3);
+
         // (1) 청천시 변수
         // (1-1) 날짜 count
         let chungchunSummerDay = 0;
         let chungchunWinterDay = 0;
+        let noNullChungchunSummerDay = 0;
+        let noNullChungchunWinterDay = 0;
 
         // (1-2) 하절기
         let chungchunInflBodAvgSummer = 0;
@@ -830,17 +855,21 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         let chungchunEfflBodAvgSummer = 0;
         let chungchunEfflTnAvgSummer = 0;
         let chungchunEfflTpAvgSummer = 0;
+        let chungchunTpInflAvgSummer = 0;
 
         // (1-3) 동절기 (최대, 최소, 평균 다 필요)
         let chungchunInflBodAvg = 0;
         let chungchunInflTnAvg = 0;
         let chungchunInflTpAvg = 0;
+        let chungchunTpInflAvg = 0;
         let chungchunInflBodMax = 0;
         let chungchunInflTnMax= 0;
         let chungchunInflTpMax = 0;
+        let chungchunTpInflMax = 0;
         let chungchunInflBodMin = 99999999;
         let chungchunInflTnMin = 99999999;
         let chungchunInflTpMin = 99999999;
+        let chungchunTpInflMin = 99999999;
 
         let chungchunEfflBodAvg = 0;
         let chungchunEfflTnAvg = 0;
@@ -857,6 +886,9 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
             const month = item.msrDt.substring(4, 6); // 월 추출
             if(month === '01' || month === '02'){
                 chungchunWinterDay += 1;
+                if(item.tpInflWqltTp != null && item.tpInflWqltTp != 0){
+                    noNullChungchunWinterDay+=1;
+                }
                 
                 const inflbod = nullToZero(item.inflAssctBfrWqltBod);
                 const infltn = nullToZero(item.inflAssctBfrWqltTn);
@@ -864,10 +896,12 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 const effbod = nullToZero(item.efflWqltBod);
                 const efftn = nullToZero(item.efflWqltTn);
                 const efftp = nullToZero(item.efflWqltTp);
+                const tpInfl = nullToZero(item.tpInflWqltTp);
 
                 chungchunInflBodAvg += inflbod;
                 chungchunInflTnAvg += infltn;
                 chungchunInflTpAvg += infltp;
+                chungchunTpInflAvg += tpInfl;
                 chungchunEfflBodAvg += effbod;
                 chungchunEfflTnAvg += efftn;
                 chungchunEfflTpAvg += efftp;
@@ -875,6 +909,7 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 if(chungchunInflBodMax < inflbod) chungchunInflBodMax = inflbod;
                 if(chungchunInflTnMax < infltn) chungchunInflTnMax = infltn;
                 if(chungchunInflTpMax < infltp) chungchunInflTpMax = infltp;
+                if(chungchunTpInflMax < tpInfl) chungchunTpInflMax = tpInfl;
                 if(chungchunEfflBodMax < effbod) chungchunEfflBodMax = effbod;
                 if(chungchunEfflTnMax < efftn) chungchunEfflTnMax = efftn;
                 if(chungchunEfflTpMax < efftp) chungchunEfflTpMax = efftp;
@@ -882,11 +917,15 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 if(chungchunInflBodMin > inflbod) chungchunInflBodMin = inflbod;
                 if(chungchunInflTnMin > infltn) chungchunInflTnMin = infltn;
                 if(chungchunInflTpMin > infltp) chungchunInflTpMin = infltp;
+                if(chungchunTpInflMin > tpInfl) chungchunTpInflMin = tpInfl;
                 if(chungchunEfflBodMin > effbod) chungchunEfflBodMin = effbod;
                 if(chungchunEfflTnMin > efftn) chungchunEfflTnMin = efftn;
                 if(chungchunEfflTpMin > efftp) chungchunEfflTpMin = efftp;
             }else if(month === '06' || month === '07' || month === '08'){
                 chungchunSummerDay += 1;
+                if(item.tpInflWqltTp != null && item.tpInflWqltTp != 0){
+                    noNullChungchunSummerDay+=1;
+                }
                 
                 const inflbod = nullToZero(item.inflAssctBfrWqltBod);
                 const infltn = nullToZero(item.inflAssctBfrWqltTn);
@@ -894,6 +933,7 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 const effbod = nullToZero(item.efflWqltBod);
                 const efftn = nullToZero(item.efflWqltTn);
                 const efftp = nullToZero(item.efflWqltTp);
+                const tpInfl = nullToZero(item.tpInflWqltTp);
 
                 chungchunInflBodAvgSummer += inflbod;
                 chungchunInflTnAvgSummer += infltn;
@@ -901,6 +941,7 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 chungchunEfflBodAvgSummer += effbod;
                 chungchunEfflTnAvgSummer += efftn;
                 chungchunEfflTpAvgSummer += efftp;
+                chungchunTpInflAvgSummer += tpInfl;
             }
         });
 
@@ -913,6 +954,10 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         orgData[9].summerRain = qltyDataSetting(chungchunInflTpAvgSummer, chungchunSummerDay, 3);
         orgData[10].summerRain = qltyDataSetting(chungchunEfflTpAvgSummer, chungchunSummerDay, 3);
 
+        // 총인설비
+        orgData[11].summerRain = qltyDataSetting(chungchunTpInflAvgSummer, noNullChungchunSummerDay, 3);
+        orgData[12].summerRain = qltyDataSetting(chungchunEfflTpAvgSummer, chungchunSummerDay, 3);
+
         // 동절기
         orgData[5].winterSunnyAvg = qltyDataSetting(chungchunInflBodAvg, chungchunWinterDay, 1);
         orgData[6].winterSunnyAvg = qltyDataSetting(chungchunEfflBodAvg, chungchunWinterDay, 1);
@@ -921,12 +966,18 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         orgData[9].winterSunnyAvg = qltyDataSetting(chungchunInflTpAvg, chungchunWinterDay, 3);
         orgData[10].winterSunnyAvg = qltyDataSetting(chungchunEfflTpAvg, chungchunWinterDay, 3);
 
+        // 총인설비
+        orgData[11].winterSunnyAvg = qltyDataSetting(chungchunTpInflAvg, noNullChungchunWinterDay, 3);
+        orgData[12].winterSunnyAvg = qltyDataSetting(chungchunInflTpAvg, chungchunWinterDay, 3);
+
         orgData[5].winterSunnyMax = roundUp(chungchunInflBodMax, 1).toFixed(1);
         orgData[6].winterSunnyMax = roundUp(chungchunEfflBodMax, 1).toFixed(1);
         orgData[7].winterSunnyMax = roundUp(chungchunInflTnMax, 3).toFixed(3);
         orgData[8].winterSunnyMax = roundUp(chungchunEfflTnMax, 3).toFixed(3);
         orgData[9].winterSunnyMax = roundUp(chungchunInflTpMax, 3).toFixed(3);
         orgData[10].winterSunnyMax = roundUp(chungchunEfflTpMax, 3).toFixed(3);
+        orgData[11].winterSunnyMax = roundUp(chungchunTpInflMax, 3).toFixed(3);
+        orgData[12].winterSunnyMax = roundUp(chungchunInflTpMax, 3).toFixed(3);
 
         orgData[5].winterSunnyMin = chungchunInflBodMin === 99999999 ? '0.0' : roundUp(chungchunInflBodMin, 1).toFixed(1);
         orgData[6].winterSunnyMin = chungchunEfflBodMin === 99999999 ? '0.0' : roundUp(chungchunEfflBodMin, 1).toFixed(1);
@@ -934,9 +985,12 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         orgData[8].winterSunnyMin = chungchunEfflTnMin === 99999999 ? '0.000' : roundUp(chungchunEfflTnMin, 3).toFixed(3);
         orgData[9].winterSunnyMin = chungchunInflTpMin === 99999999 ? '0.000' : roundUp(chungchunInflTpMin, 3).toFixed(3);
         orgData[10].winterSunnyMin = chungchunEfflTpMin === 99999999 ? '0.000' : roundUp(chungchunEfflTpMin, 3).toFixed(3);
+        orgData[11].winterSunnyMin = chungchunTpInflMin === 99999999 ? '0.000' : roundUp(chungchunTpInflMin, 3).toFixed(3);
+        orgData[12].winterSunnyMin = chungchunInflTpMin === 99999999 ? '0.000' : roundUp(chungchunInflTpMin, 3).toFixed(3);
 
         // 강우시 변수
         let rainSummerDay = 0;
+        let noNullRainSummerDay = 0;
 
         let rainInflBodAvg = 0;
         let rainInflTnAvg = 0;
@@ -944,12 +998,16 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         let rainEfflBodAvg = 0;
         let rainEfflTnAvg = 0;
         let rainEfflTpAvg = 0;
+        let rainTpInflAvg = 0;
 
         // 강우시
         qltyRainData.forEach((item: any) => {
             const month = item.msrDt.substring(4, 6); // 월 추출
             if(month === '06' || month === '07' || month === '08'){
                 rainSummerDay += 1;
+                if(item.tpInflWqltTp != null && item.tpInflWqltTp != 0){
+                    noNullRainSummerDay+=1;
+                }
                 
                 const inflbod = nullToZero(item.inflAssctBfrWqltBod);
                 const infltn = nullToZero(item.inflAssctBfrWqltTn);
@@ -957,6 +1015,7 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 const effbod = nullToZero(item.efflWqltBod);
                 const efftn = nullToZero(item.efflWqltTn);
                 const efftp = nullToZero(item.efflWqltTp);
+                const tpInfl = nullToZero(item.tpInflWqltTp);
 
                 rainInflBodAvg += inflbod;
                 rainInflTnAvg += infltn;
@@ -964,6 +1023,7 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
                 rainEfflBodAvg += effbod;
                 rainEfflTnAvg += efftn;
                 rainEfflTpAvg += efftp;
+                rainTpInflAvg += tpInfl;
             }
         });
 
@@ -974,6 +1034,11 @@ const calcWaterQltyData = async (data: any[], searchYear : string|undefined, fcl
         orgData[8].summerThree = qltyDataSetting(rainEfflTnAvg, rainSummerDay, 3);
         orgData[9].summerThree = qltyDataSetting(rainInflTpAvg, rainSummerDay, 3);
         orgData[10].summerThree = qltyDataSetting(rainEfflTpAvg, rainSummerDay, 3);
+
+        // 총인설비
+        orgData[11].summerThree = qltyDataSetting(rainTpInflAvg, noNullRainSummerDay, 3);
+        orgData[12].summerThree = qltyDataSetting(rainInflTpAvg, rainSummerDay, 3);
+
         return orgData;
     } else {
         return orgData;
@@ -1084,7 +1149,7 @@ export const dashBoardInitState:DashBoardType = {
     OperationStatus : {
         isInit : false,
         upHeadListOperationStatus : upHeadListOperationStatus,
-        operationalStatusList : operationalStatusList,
+        operationalStatusList : operationalStatusListOrg,
         isLoadingOperationStatus : false,
     },
 
@@ -1181,9 +1246,7 @@ const changeValue=(operationalStatus, data, keyTxt = 'INFL_AMNT')=>{
     operationalStatus.winterSunnyAvg = data.winterSunny ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.winterSunny?Number(Math.round(data.winterSunny["AVG_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.winterSunny["AVG_" + keyTxt] : '';
     operationalStatus.winterSunnyMax = data.winterSunny ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.winterSunny?Number(Math.round(data.winterSunny["MAX_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.winterSunny["MAX_" + keyTxt] : '';
     // 지하수
-    operationalStatus.groundWaterAvg = 10;
-    operationalStatus.groundWaterSummer = 11;
-    operationalStatus.groundWaterWinter = 12;
+    
     // 오염물질
     // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD))
     const summerLowFlow = data.summerBod && data.summerBod.INFL_AMNT && data.summerBod.INFL_AMNT != 'null' ? Number(data.summerBod.INFL_AMNT) : 0;
@@ -1395,8 +1458,10 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
             let winterChungchunEfflMax = 1 ;
             let winterChungchunEfflMin = 1 ;
             
-            let rdiPercent = 0; 
+            const clone = (arr: any[]) => arr?.map(v => ({ ...v })) ?? [];
 
+            let rdiPercent = 0; 
+            let operationalStatusList = clone(operationalStatusListOrg);
             if(data && operationalStatusList){
                 // 유량 - 유입
                 if (operationalStatusList?.[0]) {
@@ -1512,7 +1577,6 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
                         }
                     });
 
-                    const clone = (arr: any[]) => arr?.map(v => ({ ...v })) ?? [];
                     const calData = CalcRainEffect(clone(res2.data), 'SUNNY');
                     const calRainData = CalcRainEffect(clone(res2.data), 'RAIN');
                     
@@ -1712,10 +1776,15 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
                         winterCnt += 1;
                     });
 
-                    const winterBodAvg = winterBodSunny / winterCnt;
+                    const roundMinSummerBodInfl = Number(roundNumber(minSummerBodInfl, 0).toString().replaceAll(',',''));
+                    const roundMinSummerBod = Number(roundNumber(minSummerBod, 1).toString().replaceAll(',',''));
+                    const roundWinterBodSunny = Number(roundNumber(winterBodSunny, 1).toString().replaceAll(',',''));
+
+                    const winterBodAvg = Number(roundNumber((roundWinterBodSunny / winterCnt), 1).toString().replaceAll(',',''));
                     // 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD))
-                    const winMinusSum = winterBodAvg - minSummerBod;
-                    const rdiValue = winMinusSum===0 ? 0 : minSummerBodInfl * ((winMinusSum / winterBodAvg ));
+                    const winMinusSum = winterBodAvg - roundMinSummerBod;
+
+                    const rdiValue = winMinusSum===0 ? 0 : roundMinSummerBodInfl * (winMinusSum / winterBodAvg );
                     
                     rdiPercent = (rdiValue / minSummerBodInfl) * 100;
 
@@ -1838,13 +1907,15 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
             }
 
             const rtnData = await calcWaterQltyData(operationalStatusList, searchYear, fcltyCd);
-            operationalStatusList = rtnData;
 
             // 총인설비가 없을 경우 제외
             console.log('총인시설 여부 : ', data.yearData.TP_FCT_YN);
 
+            console.log('rtnData : ', rtnData);
             if(data.yearData.TP_FCT_YN !== 'Y') {
-                operationalStatusList = operationalStatusList.slice(0, 11);
+                operationalStatusList = rtnData.slice(0, 11);
+            }else{
+                operationalStatusList = rtnData;
             }
             set((state: DashBoardType) => ({
                 ...state,
@@ -1868,6 +1939,20 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
             const res = await fetchMainGraph(searchYear, fcltyCd);
             const res2 = await fetchFacilityWaterQltyInfo(fcltyCd);
 
+            let chungcunSumFlow = 0;
+            const calData = CalcRainEffect(res.data.wqltObjs, 'SUNNY')
+            calData.forEach((flowItem: any) => {
+                chungcunSumFlow += flowItem.inflAmnt && flowItem.inflAmnt !== 'x' ? Number(flowItem.inflAmnt.toString().trim()) : 0;
+            });
+            const usage = chungcunSumFlow&&chungcunSumFlow>0?chungcunSumFlow / calData.length:0;
+            
+            //bscFctCd === '11200PB001R') 중랑 - 테스트할 때 코드넣고 해야 보기편해요~
+            /* if(bscFctCd === '11200PB001R') {
+                console.log('calData.length : ', calData.length);
+                console.log('usage : ', usage, 'summerUsage : ', summerUsage, 'winterUsage : ', winterUsage);
+            } */
+            const underWaterInputYear = Math.round((usage-(usage*0.65*OSU_PERCENT)) * 1) / 1;
+
             // 법적방류수질 데이터
             const sortedWaterQltyInfo = [...res2].sort((a, b) => {
                 // 숫자로 변환하여 비교
@@ -1908,7 +1993,7 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
             const chart_inflowRain = res.data.wqltObjs.map((item: FacilityWaterQltyProps) => ({
                 label: item.msrDt.substring(0, 4)+"-"+item.msrDt.substring(4, 6)+"-"+item.msrDt.substring(6, 8),
                 barVal0: item.infoRnDay ?? 0,
-                lineVal0: item.fctCpc ?? 0,
+                lineVal0: underWaterInputYear,
                 lineVal1: item.inflAmnt ?? 0,
             }));
             
@@ -1994,7 +2079,7 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType)
             }
             const fcltyCpcValue = res.data.wqltObjs[0].fctCpc;
 
-            const itemList = ['계', '3~10mm 미만', '10~20mm 미만', '20~30mm 미만', '30~40mm 미만', '40~50mm 미만', '50mm~60mm 미만', '60mm 이상'];
+            const itemList = ['계', '3~10mm 미만', '10~20mm 미만', '20~30mm 미만', '30~40mm 미만', '40~50mm 미만', '50~60mm 미만', '60mm 이상'];
             const rainRate = ['0', '0', '0', '0', '0', '0', '0', '0'];
             const rainDate = [0, 0, 0, 0, 0, 0, 0, 0];
             const inflAmtCnt = [0, 0, 0, 0, 0, 0, 0, 0];

apps/fo/app/store/facilityPrecipitation/index.tsx

@@ -1,6 +1,7 @@
-import DataForm from "@/app/components/common/DataForm";
-import type { TableUpperProps } from "../dashboard";
 import { getFetch } from "@/app/components/api";
+import CalcRainEffect from "@/app/components/common/CalcRainEffect";
+import { roundNumber } from "@/app/components/common/DataForm";
+import type { TableUpperProps } from "../dashboard";
 export type { TableUpperProps };
 /**====================================
  * Store - 타입
@@ -68,48 +69,48 @@ const LabelArray:string[] = ['구분', '시도', '시군구','용량별', '시
 
 // 리스트 헤더
 const upHeadList1:TableUpperProps[] = [
-    { id: "A", title: "행정구역", row: 0, colSpan: 2 },
-    { id: "sido", title: "시도", upName:"upChangeRe", upSequnce:1, row: 1 },
-    { id: "gugun", title: "시군구", upName:"upChangeRe",upSequnce:2, row: 1 },
-    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2},
+    { id: "A", title: "행정구역", row: 0, colSpan: 2, widthPercent: 20 },
+    { id: "sido", title: "시도", upName:"upChangeRe", upSequnce:1, row: 1, widthPercent: 10 },
+    { id: "gugun", title: "시군구", upName:"upChangeRe",upSequnce:2, row: 1, widthPercent: 10 },
+    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 10},
     { id: "addr", title: "주소", row: 0, rowSpan: 2},
-    { id: "fctCpc", title: "시설용량(m³/일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "stnKo", title: "관측소 정보", row: 0, rowSpan: 2},
-    { id: "infoRnDay", title: "강우일\n(일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "rainEffectDay", title: "강우영향일\n(일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "totalYearRain", title: "연간 총 총강수량\n(mm)", row: 0, rowSpan: 2, align:"right"}
+    { id: "fctCpc", title: "시설용량(m³/일)", row: 0, rowSpan: 2, align:"right", widthPercent: 10 },
+    { id: "stnKo", title: "관측소 정보", row: 0, rowSpan: 2, widthPercent: 10 },
+    { id: "infoRnDay", title: "강우일\n(일)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 },
+    { id: "rainEffectDay", title: "강우영향일\n(일)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 },
+    { id: "totalYearRain", title: "연간 총 총강수량\n(mm)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 }
 ];
 
 const upHeadList2:TableUpperProps[] = [
-    { id: "A", title: "유역", row: 0, colSpan: 3} ,
-    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row: 1} ,
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row: 1},
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row: 1},
-    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2},
+    { id: "A", title: "유역", row: 0, colSpan: 3, widthPercent: 21 } ,
+    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row: 1, widthPercent: 7 } ,
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row: 1, widthPercent: 7 },
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row: 1, widthPercent: 7 },
+    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 10 },
     { id: "addr", title: "주소", row: 0, rowSpan: 2},
-    { id: "fctCpc", title: "시설용량(m³/일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "stnKo", title: "관측소 정보", row: 0, rowSpan: 2},
-    { id: "infoRnDay", title: "강우일\n(일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "rainEffectDay", title: "강우영향일\n(일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "totalYearRain", title: "연간 총 총강수량\n(mm)", row: 0, rowSpan: 2, align:"right"}
+    { id: "fctCpc", title: "시설용량(m³/일)", row: 0, rowSpan: 2, align:"right", widthPercent: 10 },
+    { id: "stnKo", title: "관측소 정보", row: 0, rowSpan: 2, widthPercent: 10 },
+    { id: "infoRnDay", title: "강우일\n(일)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 },
+    { id: "rainEffectDay", title: "강우영향일\n(일)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 },
+    { id: "totalYearRain", title: "연간 총 총강수량\n(mm)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 }
 ];
 
 const upHeadList3:TableUpperProps[] = [
-    { id: "A", title: "유역", row: 0, colSpan: 3} ,
-    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row: 1},
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row: 1},
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row: 1},
-    { id: "rgnNm", title: "환경청", row: 0, rowSpan: 2},
-    { id: "B", title: "행정구역", upName:"upChangeRe2", row: 0, colSpan: 2},
-    { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1, row: 1},
-    { id: "gugun", title: "시군구", upName:"upChangeRe2",upSequnce:2, row: 1},
-    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2},
+    { id: "A", title: "유역", row: 0, colSpan: 3, widthPercent: 15 } ,
+    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row: 1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row: 1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row: 1, widthPercent: 5 },
+    { id: "rgnNm", title: "환경청", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "B", title: "행정구역", upName:"upChangeRe2", row: 0, colSpan: 2, widthPercent: 10 },
+    { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1, row: 1, widthPercent: 5 },
+    { id: "gugun", title: "시군구", upName:"upChangeRe2",upSequnce:2, row: 1, widthPercent: 5 },
+    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 10 },
     { id: "addr", title: "주소", row: 0, rowSpan: 2},
-    { id: "fctCpc", title: "시설용량(m³/일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "stnKo", title: "관측소 정보", row: 0, rowSpan: 2},
-    { id: "infoRnDay", title: "강우일\n(일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "rainEffectDay", title: "강우영향일\n(일)", row: 0, rowSpan: 2, align:"right"},
-    { id: "totalYearRain", title: "연간 총 총강수량\n(mm)", row: 0, rowSpan: 2, align:"right"}
+    { id: "fctCpc", title: "시설용량(m³/일)", row: 0, rowSpan: 2, align:"right", widthPercent: 10 },
+    { id: "stnKo", title: "관측소 정보", row: 0, rowSpan: 2, widthPercent: 10 },
+    { id: "infoRnDay", title: "강우일\n(일)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 },
+    { id: "rainEffectDay", title: "강우영향일\n(일)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 },
+    { id: "totalYearRain", title: "연간 총 총강수량\n(mm)", row: 0, rowSpan: 2, align:"right", widthPercent: 7 }
 ];
 
 const facilityPrecipitation:FacilityPrecipitationProps[] = [
@@ -155,14 +156,15 @@ const fetchFacilityPrecipitationList = async (pageNo: number, pageSize: number,
                 })
             }
         }
-
+        
         res.data.map((item: FacilityPrecipitationProps) => {
             const filteredList = tmpData.filter((gridItem) => {
-            return gridItem.bscFctCd === item.bscFctCd;
+                return gridItem.bscFctCd === item.bscFctCd;
             });
 
-            item.rainEffectDay = filteredList.reduce((acc, curr) => acc + curr.rainEffectDay, 0);
-            item.totalYearRain = filteredList.reduce((acc, curr) => acc + curr.infoRnDay, 0);
+            const rtnData = CalcRainEffect(filteredList);
+            item.rainEffectDay = rtnData.reduce((acc, curr) => acc + curr.rainEffectDay, 0);
+            item.totalYearRain = rtnData.reduce((acc, curr) => acc + Number(curr.infoRnDay), 0);
             item.infoRnDay = filteredList.reduce((acc, curr) => acc + curr.rainDay, 0);
         });
         
@@ -178,11 +180,6 @@ export type FacilityPrecipitationActions = {
     searchFacilityPrecipitationList: (pageNo: number, pageSize: number, searchYear: string, part?: string, nameCd?: string, fcltCpct?: string, operationValue?: string, fcltyNm?: string) => void;
 }
 
-const dataFormSetting=(item : FacilityPrecipitationProps)=> {
-    DataForm({ type: 'number', column: 'fctCpc', item: item as unknown as Record<string, unknown> });
-    DataForm({ type: 'float1', column: 'totalYearRain', item: item as unknown as Record<string, unknown>});
-};
-
 export type FacilityPrecipitationType = {
     FacilityPrecipitationSearch: {
         isInit: boolean;
@@ -246,13 +243,16 @@ export const facilityPrecipitationReducer:(set:(fn: (state: FacilityPrecipitatio
 
             const res = await fetchFacilityPrecipitationList(pageNo, pageSize, searchYear, part, nameCd, fcltCpct, operationValue, fcltyNm);
             const data = res.data;
+
+            data.forEach(item => {
+                item.fctCpc = roundNumber(item.fctCpc, 0);
+                item.totalYearRain = roundNumber(item.totalYearRain, 1);
+            });
+
             const excelDownList: ExcelType[] = [];
 
             if(pageSize>5000){
                 data.forEach((item: FacilityPrecipitationProps) => {
-                    dataFormSetting(item)
-                    item.fctCpc = item.fctCpc ? parseFloat(item.fctCpc.toString().replace(/,/g, '')) : 0;
-                    item.totalYearRain = item.totalYearRain ? parseFloat(item.totalYearRain.toString().replace(/,/g, '')) : 0;
                     excelDownList.push({
                         시설코드: item.bscFctCd,
                         권역: item.rvbsn,
@@ -270,18 +270,12 @@ export const facilityPrecipitationReducer:(set:(fn: (state: FacilityPrecipitatio
                         "연간총강수량(mm)": item.totalYearRain,
                     })
                 })
-            }else{
-                data.forEach((item: FacilityPrecipitationProps) => {
-                    dataFormSetting(item)
-                    item.fctCpc = item.fctCpc ? parseFloat(item.fctCpc.toString().replace(/,/g, '')) : 0;
-                    item.totalYearRain = item.totalYearRain ? parseFloat(item.totalYearRain.toString().replace(/,/g, '')) : 0;
-                })
             }
             set((state:FacilityPrecipitationType) => ({
                 ...state,
                 FacilityPrecipitation: pageSize<5000?{
                     ...state.FacilityPrecipitation,
-                    facilityPrecipitation: res.data,
+                    facilityPrecipitation: data,
                     facilityPrecipitationCount: res.count,
                     isLoading : false,
                 }:{

apps/fo/app/store/facilityWaterQlty/index.tsx

@@ -2,6 +2,8 @@
 import DataForm, { roundNumber } from "@/app/components/common/DataForm";
 import type { TableUpperProps } from "../dashboard";
 import CalcRainEffect from "@/app/components/common/CalcRainEffect";
+import { COD_YEAR } from "../common";
+import CommaToNumber from "@/app/components/common/CommaToNumber";
 export type { TableUpperProps };
 
 /**====================================
@@ -26,6 +28,8 @@ export interface FacilityWaterQltyProps {
     inflAssctAftWqltBod: string | '',
     inflAssctBfrWqltToc: string | '',
     inflAssctAftWqltToc: string | '',
+    inflAssctBfrWqltCod : string | '',
+    inflAssctAftWqltCod : string | '',
     inflAssctBfrWqltSs: string | '',
     inflAssctAftWqltSs: string | '',
     inflAssctBfrWqltTn: string | '',
@@ -34,6 +38,7 @@ export interface FacilityWaterQltyProps {
     inflAssctAftWqltTp: string | '',
     efflWqltBod: string | '',
     efflWqltToc: string | '',
+    efflWqltCod : string | '',
     efflWqltSs: string | '',
     efflWqltTn: string | '',
     efflWqltTp: string | '',
@@ -66,17 +71,17 @@ export interface ExcelType {
     시군구: string,
     시설이름: string,
     주소: string,
-    "시설용량(m³/일)": number,
-    "유입BOD(mg/L)": string | '',
-    "유입TOC(mg/L)": string | '',
-    "유입SS(mg/L)": string | '',
-    "유입TN(mg/L)": string | '',
-    "유입TP(mg/L)": string | '',
-    "유출BOD(mg/L)": string | '',
-    "유출TOC(mg/L)": string | '',
-    "유출SS(mg/L)": string | '',
-    "유출TN(mg/L)": string | '',
-    "유출TP(mg/L)": string | '',
+    "시설용량(m³/일)": number | '',
+    "유입BOD(mg/L)": number | '',
+    "유입TOC(mg/L)": number | '',
+    "유입SS(mg/L)": number | '',
+    "유입TN(mg/L)": number | '',
+    "유입TP(mg/L)": number | '',
+    "유출BOD(mg/L)": number | '',
+    "유출TOC(mg/L)": number | '',
+    "유출SS(mg/L)": number | '',
+    "유출TN(mg/L)": number | '',
+    "유출TP(mg/L)": number | '',
 }
 
 /**
@@ -100,17 +105,17 @@ export interface WaterQualityHistoryResponse {
 
 export type modalExcelType = {
     날짜: string;
-    "유입BOD(mg/L)": string;
-    "유입TOC(COD)(mg/L)": string;
-    "유입SS(mg/L)": string;
-    "유입TN(mg/L)": string;
-    "유입TP(mg/L)": string;
-    "유출BOD(mg/L)": string;
-    "유출TOC(COD)(mg/L)": string;
-    "유출SS(mg/L)": string;
-    "유출TN(mg/L)": string;
-    "유출TP(mg/L)": string;
-   /*  "강우량(mm/일)": string; */
+    "유입BOD(mg/L)": number | '';
+    "유입TOC(COD)(mg/L)": number | '';
+    "유입SS(mg/L)": number | '';
+    "유입TN(mg/L)": number | '';
+    "유입TP(mg/L)": number | '';
+    "유출BOD(mg/L)": number | '';
+    "유출TOC(COD)(mg/L)": number | '';
+    "유출SS(mg/L)": number | '';
+    "유출TN(mg/L)": number | '';
+    "유출TP(mg/L)": number | '';
+    "강우량(mm/일)": number | '';
 }
 
 /**====================================
@@ -124,74 +129,74 @@ const mainLabelArray: string[] = ['구분', '시도', '시군구', '용량별',
 
 // 시설수질리스트 헤더(행정별)
 const upHeadList1: TableUpperProps[] = [
-    { id: "C", title: "행정명", colSpan: 2, row: 0 },
-    { id: "sidoNm", title: "시도", row: 1 },
-    { id: "sggNm", title: "시군구", row: 1 },
-    { id: "bscFctNm", title: "시설명", rowSpan: 2, row: 0 },
+    { id: "C", title: "행정명", colSpan: 2, row:0, widthPercent:10 },
+    { id: "sidoNm", title: "시도", row: 1, widthPercent:5},
+    { id: "sggNm", title: "시군구", row: 1, widthPercent:5 },
+    { id: "bscFctNm", title: "시설명", rowSpan: 2, row: 0, widthPercent: 10 },
     { id: "addr", title: "주소", rowSpan: 2, row: 0 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align: "right", rowSpan: 2, row: 0 },
-    { id: "A", title: "유입", colSpan: 5, row: 0 },
-    { id: "B", title: "방류", colSpan: 5, row: 0 },
-    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe3", upSequnce: 1, align: "right", row: 1 },
-    { id: "inflAssctBfrWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row: 1 },
-    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row: 1 },
-    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe3", upSequnce: 4, align: "right", row: 1 },
-    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row: 1 },
-    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe4", upSequnce: 1, align: "right", row: 1 },
-    { id: "efflWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row: 1 },
-    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row: 1 },
-    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe4", upSequnce: 4, align: "right", row: 1 },
-    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row: 1 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align: "right", rowSpan: 2, row: 0, widthPercent:10 },
+    { id: "A", title: "유입", colSpan: 5, row: 0, widthPercent:25 },
+    { id: "B", title: "방류", colSpan: 5, row: 0, widthPercent:25 },
+    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe3", upSequnce: 1, align: "right", row: 1, widthPercent:5 },
+    { id: "inflAssctBfrWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row: 1, widthPercent:5 },
+    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row: 1, widthPercent:5 },
+    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe3", upSequnce: 4, align: "right", row: 1, widthPercent:5 },
+    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row: 1, widthPercent:5 },
+    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe4", upSequnce: 1, align: "right", row: 1, widthPercent:5 },
+    { id: "efflWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row: 1, widthPercent:5 },
+    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row: 1, widthPercent:5 },
+    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe4", upSequnce: 4, align: "right", row: 1, widthPercent:5 },
+    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row: 1, widthPercent:5 },
 ];
 
 // 시설수질리스트 헤더(권역별)
 const upHeadList2: TableUpperProps[] = [
-    { id: "C", title: "유역", colSpan: 3, row: 0 },
-    { id: "rvbsn", title: "권역", upName: "upChangeRe1", upSequnce: 1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName: "upChangeRe1", upSequnce: 2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName: "upChangeRe1", upSequnce: 3, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "C", title: "유역", colSpan: 3, row: 0, widthPercent:15 },
+    { id: "rvbsn", title: "권역", upName: "upChangeRe1", upSequnce: 1, row:1, widthPercent:5 },
+    { id: "lgbsn", title: "단위유역", upName: "upChangeRe1", upSequnce: 2, row:1, widthPercent:5 },
+    { id: "mdmbsn", title: "중권역", upName: "upChangeRe1", upSequnce: 3, row:1, widthPercent:5 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent:10 },
     { id: "addr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/L)", align: "right", row:0, rowSpan:2 },
-    { id: "A", title: "유입", colSpan: 5, row: 0 },
-    { id: "B", title: "방류", colSpan: 5, row: 0 },
-    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe3", upSequnce: 1, align: "right", row:1 },
-    { id: "inflAssctBfrWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1 },
-    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1 },
-    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1 },
-    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1 },
-    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe4", upSequnce: 1, align: "right", row:1 },
-    { id: "efflWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1 },
-    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1 },
-    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1 },
-    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1 },
+    { id: "fctCpc", title: "시설용량(m³/L)", align: "right", row:0, rowSpan:2, widthPercent:8 },
+    { id: "A", title: "유입", colSpan: 5, row: 0, widthPercent:25 },
+    { id: "B", title: "방류", colSpan: 5, row: 0, widthPercent:25 },
+    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe3", upSequnce: 1, align: "right", row:1, widthPercent:5 },
+    { id: "inflAssctBfrWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1, widthPercent:5 },
+    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1, widthPercent:5 },
+    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1, widthPercent:5 },
+    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1, widthPercent:5 },
+    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe4", upSequnce: 1, align: "right", row:1, widthPercent:5 },
+    { id: "efflWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1, widthPercent:5 },
+    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1, widthPercent:5 },
+    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1, widthPercent:5 },
+    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1, widthPercent:5 },
 ];
 
 // 시설수질리스트 헤더(환경청별)
 const upHeadList3: TableUpperProps[] = [
-    { id: "C", title: "유역", colSpan: 3, row: 0 },
-    { id: "rvbsn", title: "권역", row:1 },
-    { id: "lgbsn", title: "단위유역", row:1 },
-    { id: "mdmbsn", title: "중권역", row:1 },
-    { id: "rgnNm", title: "환경청", row:0, rowSpan:2 },
-    { id: "D", title: "행정명", colSpan: 2, row: 0 },
-    { id: "sidoNm", title: "시도", upName: "upChangeRe2", row:1 },
-    { id: "sggNm", title: "시군구", upName: "upChangeRe2", row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "C", title: "유역", colSpan: 3, row: 0, widthPercent: 15 },
+    { id: "rvbsn", title: "권역", row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", row:1, widthPercent: 5 },
+    { id: "rgnNm", title: "환경청", row:0, rowSpan:2, widthPercent: 7 },
+    { id: "D", title: "행정명", colSpan: 2, row: 0, widthPercent: 10 },
+    { id: "sidoNm", title: "시도", upName: "upChangeRe2", row:1, widthPercent: 5 },
+    { id: "sggNm", title: "시군구", upName: "upChangeRe2", row:1, widthPercent: 5 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "addr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/L)", align: "right", row:0, rowSpan:2 },
-    { id: "A", title: "유입", colSpan: 5, row: 0 },
-    { id: "B", title: "방류", colSpan: 5, row: 0 },
-    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe3", upSequnce: 1, align: "right", row:1 },
-    { id: "inflAssctBfrWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1 },
-    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1 },
-    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1 },
-    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1 },
-    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe4", upSequnce: 1, align: "right", row:1 },
-    { id: "efflWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1 },
-    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1 },
-    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1 },
-    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1 },
+    { id: "fctCpc", title: "시설용량(m³/L)", align: "right", row:0, rowSpan:2, widthPercent: 5 },
+    { id: "A", title: "유입", colSpan: 5, row: 0, widthPercent: 20 },
+    { id: "B", title: "방류", colSpan: 5, row: 0, widthPercent: 20 },
+    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe3", upSequnce: 1, align: "right", row:1, widthPercent: 4 },
+    { id: "inflAssctBfrWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1, widthPercent: 4 },
+    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1, widthPercent: 4 },
+    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe3", upSequnce: 2, align: "right", row:1, widthPercent: 4 },
+    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe3", upSequnce: 3, align: "right", row:1, widthPercent: 4 },
+    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe4", upSequnce: 1, align: "right", row:1, widthPercent: 4 },
+    { id: "efflWqltToc", title: "TOC\n(COD)\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1, widthPercent: 4 },
+    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1, widthPercent: 4 },
+    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe4", upSequnce: 2, align: "right", row:1, widthPercent: 4 },
+    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe4", upSequnce: 3, align: "right", row:1, widthPercent: 4 },
 ];
 
 /**
@@ -210,7 +215,22 @@ const upHeadListModalYear: TableUpperProps[] = [
     { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe2", upSequnce: 3, align: "right" },
     { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe2", upSequnce: 2, align: "right" },
     { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe2", upSequnce: 3, align: "right" },
-    { id: "noProcessInflAmnt", title: "미처리하수량\n(m³/일)", align:"right"},
+    { id: "infoRnDay", title: "강우량\n(mm/일)", align: "right" }
+];
+
+// 처리시설 수질현황 헤더(모달-연간)
+const upHeadListModalYearCod: TableUpperProps[] = [
+    { id: "msrDt", title: "날짜" },
+    { id: "inflAssctBfrWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe1", upSequnce: 1, align: "right" },
+    { id: "inflAssctBfrWqltCod", title: "TOC(COD)\n(mg/L)", upName: "upChangeRe1", upSequnce: 2, align: "right" },
+    { id: "inflAssctBfrWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe1", upSequnce: 3, align: "right" },
+    { id: "inflAssctBfrWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe1", upSequnce: 2, align: "right" },
+    { id: "inflAssctBfrWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe1", upSequnce: 3, align: "right" },
+    { id: "efflWqltBod", title: "BOD\n(mg/L)", upName: "upChangeRe2", upSequnce: 1, align: "right" },
+    { id: "efflWqltCod", title: "TOC(COD)\n(mg/L)", upName: "upChangeRe2", upSequnce: 2, align: "right" },
+    { id: "efflWqltSs", title: "SS\n(mg/L)", upName: "upChangeRe2", upSequnce: 3, align: "right" },
+    { id: "efflWqltTn", title: "T-N\n(mg/L)", upName: "upChangeRe2", upSequnce: 2, align: "right" },
+    { id: "efflWqltTp", title: "T-P\n(mg/L)", upName: "upChangeRe2", upSequnce: 3, align: "right" },
     { id: "infoRnDay", title: "강우량\n(mm/일)", align: "right" }
 ];
 
@@ -298,6 +318,7 @@ export type FacilityWaterQltyType = {
     FacilityWaterQltyModal: {
         // 처리시설 수질현황
         upHeadListModalYear: TableUpperProps[];
+        upHeadListModalYearCod : TableUpperProps[];
         facilityWaterQltyYearList: FacilityWaterQltyProps[];
         upHeadListModalTms: TableUpperProps[];
         facilityWaterQltyTmsList: FacilityWaterQltyTmsProps[];
@@ -327,6 +348,7 @@ export const facilityWaterQltyInitState: FacilityWaterQltyType = {
     FacilityWaterQltyModal: {
         // 처리시설 수질현황
         upHeadListModalYear: upHeadListModalYear,
+        upHeadListModalYearCod: upHeadListModalYearCod,
         facilityWaterQltyYearList: facilityWaterQltyYearList,
         upHeadListModalTms: upHeadListModalTms,
         facilityWaterQltyTmsList: facilityWaterQltyTmsList,
@@ -453,8 +475,8 @@ export const facilityWaterQltyReducer = (set: (fn: (state: FacilityWaterQltyType
                     item.fctCpc = parseFloat(item.fctCpc.toString().replace(/,/g, ''));
                     item.sidoNm = item.lclgvrnmntNm.split(' ')[0]?.toString() || '';
                     item.sggNm = item.lclgvrnmntNm.split(' ')[1]?.toString() || '';
-                    item.inflAssctBfrWqltToc = Number(searchYear)<2021? "("+item.inflAssctBfrWqltToc+")" : item.inflAssctBfrWqltToc;
-                    item.efflWqltToc = Number(searchYear)<2021? "("+item.efflWqltToc+")" : item.efflWqltToc;
+                    item.inflAssctBfrWqltToc = Number(searchYear)<COD_YEAR? "("+item.inflAssctBfrWqltToc+")" : item.inflAssctBfrWqltToc;
+                    item.efflWqltToc = Number(searchYear)<COD_YEAR? "("+item.efflWqltToc+")" : item.efflWqltToc;
                     excelDownList.push({
                         시설코드: item.bscFctCd,
                         권역: item.rvbsn,
@@ -465,17 +487,17 @@ export const facilityWaterQltyReducer = (set: (fn: (state: FacilityWaterQltyType
                         시군구: item.sggNm,
                         시설이름: item.bscFctNm,
                         주소: item.addr,
-                        "시설용량(m³/일)": item.fctCpc,
-                        "유입BOD(mg/L)": item.inflAssctBfrWqltBod,
-                        "유입TOC(mg/L)": item.inflAssctBfrWqltToc,
-                        "유입SS(mg/L)": item.inflAssctBfrWqltSs,
-                        "유입TN(mg/L)": item.inflAssctBfrWqltTn,
-                        "유입TP(mg/L)": item.inflAssctBfrWqltTp,
-                        "유출BOD(mg/L)": item.efflWqltBod,
-                        "유출TOC(mg/L)": item.efflWqltToc,
-                        "유출SS(mg/L)": item.efflWqltSs,
-                        "유출TN(mg/L)": item.efflWqltTn,
-                        "유출TP(mg/L)": item.efflWqltTp,
+                        "시설용량(m³/일)": CommaToNumber(item.fctCpc),
+                        "유입BOD(mg/L)": CommaToNumber(item.inflAssctBfrWqltBod),
+                        "유입TOC(mg/L)": CommaToNumber(item.inflAssctBfrWqltToc),
+                        "유입SS(mg/L)": CommaToNumber(item.inflAssctBfrWqltSs),
+                        "유입TN(mg/L)": CommaToNumber(item.inflAssctBfrWqltTn),
+                        "유입TP(mg/L)": CommaToNumber(item.inflAssctBfrWqltTp),
+                        "유출BOD(mg/L)": CommaToNumber(item.efflWqltBod),
+                        "유출TOC(mg/L)": CommaToNumber(item.efflWqltToc),
+                        "유출SS(mg/L)": CommaToNumber(item.efflWqltSs),
+                        "유출TN(mg/L)": CommaToNumber(item.efflWqltTn),
+                        "유출TP(mg/L)": CommaToNumber(item.efflWqltTp),
                     });
                 });
             }else{
@@ -484,8 +506,8 @@ export const facilityWaterQltyReducer = (set: (fn: (state: FacilityWaterQltyType
                     item.fctCpc = parseFloat(item.fctCpc.toString().replace(/,/g, ''));
                     item.sidoNm = item.lclgvrnmntNm.split(' ')[0]?.toString() || '';
                     item.sggNm = item.lclgvrnmntNm.split(' ')[1]?.toString() || '';
-                    item.inflAssctBfrWqltToc = Number(searchYear)<2021? "("+item.inflAssctBfrWqltToc+")" : item.inflAssctBfrWqltToc;
-                    item.efflWqltToc = Number(searchYear)<2021? "("+item.efflWqltToc+")" : item.efflWqltToc;
+                    item.inflAssctBfrWqltToc = Number(searchYear)<COD_YEAR? "("+item.inflAssctBfrWqltToc+")" : item.inflAssctBfrWqltToc;
+                    item.efflWqltToc = Number(searchYear)<COD_YEAR? "("+item.efflWqltToc+")" : item.efflWqltToc;
                 });
             }
             set((state: FacilityWaterQltyType) => ({
@@ -625,6 +647,12 @@ export const facilityWaterQltyReducer = (set: (fn: (state: FacilityWaterQltyType
                 if(item.efflWqltToc){
                     item.efflWqltToc = Number(Math.round(Number(item.efflWqltToc) * 10)/10).toFixed(1);
                 }
+                if(item.inflAssctBfrWqltCod){
+                    item.inflAssctBfrWqltCod = "("+Number(Math.round(Number(item.inflAssctBfrWqltCod) * 10)/10).toFixed(1)+")";
+                }
+                if(item.efflWqltCod){
+                    item.efflWqltCod = "("+Number(Math.round(Number(item.efflWqltCod) * 10)/10).toFixed(1)+")";
+                }
                 if(item.inflAssctBfrWqltBod){
                     item.inflAssctBfrWqltBod = Number(Math.round(Number(item.inflAssctBfrWqltBod) * 10)/10).toFixed(1);
                 }

apps/fo/app/store/flowRate/index.tsx

@@ -3,6 +3,7 @@ import type { TableUpperProps } from "../dashboard";
 import DataForm, { roundNumber } from "@/app/components/common/DataForm";
 import CalcRainEffect from "@/app/components/common/CalcRainEffect";
 import { fetchFacilityWaterQltyListHist } from "../facilityWaterQlty";
+import CommaToNumber from "@/app/components/common/CommaToNumber";
 
 /**====================================
  * Store - 타입
@@ -95,53 +96,53 @@ export type FlowRateModalProps = {
  */
 // 리스트 (행정별)
 const upHeadList1:TableUpperProps[] = [
-    { id: "A", title: "행정명", row: 0 ,colSpan: 2 },
-    { id: "sido", title: "시도", upName:"upChangeRe", row:1 },
-    { id: "gugun", title: "시군구", upName:"upChangeRe", row:1 },
-    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2},
-    { id: "daddr", title: "주소", row: 0, rowSpan: 2},
-    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row: 0, rowSpan: 2},
-    { id: "totInflAmnt", title: "총 유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2},
-    { id: "inflAmnt", title: "하수유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2},
-    { id: "sumFlow", title: '연계처리량\n(m³/일)', align:"right", row: 0, rowSpan: 2},
-    { id: "returnAmnt", title: '총인 반류수량\n(m³/일)', align:"right", row: 0, rowSpan: 2},
-    { id: "efflAmnt", title: '방류량\n(m³/일)', align:"right", row: 0, rowSpan: 2}
+    { id: "A", title: "행정명", row: 0, colSpan: 2, widthPercent: 16 },
+    { id: "sido", title: "시도", upName:"upChangeRe", row:1, widthPercent: 8 },
+    { id: "gugun", title: "시군구", upName:"upChangeRe", row:1, widthPercent: 8 },
+    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 10},
+    { id: "daddr", title: "주소", row: 0, rowSpan: 2 },
+    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "totInflAmnt", title: "총 유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "inflAmnt", title: "하수유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "sumFlow", title: '연계처리량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "returnAmnt", title: '총인 반류수량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "efflAmnt", title: '방류량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 }
 ];
 
 // 리스트 (권역별)
 const upHeadList2:TableUpperProps[] = [
-    { id: "A", title: "유역", row: 0, colSpan: 3},
-    { id: "rvbsn", title: "권역", upName:"upChangeRe", row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", row:1 },
-    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2},
-    { id: "daddr", title: "주소", row: 0, rowSpan: 2},
-    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row: 0, rowSpan: 2},
-    { id: "totInflAmnt", title: "총 유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2},
-    { id: "inflAmnt", title: "하수유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2},
-    { id: "sumFlow", title: '연계처리량\n(m³/일)', align:"right", row: 0, rowSpan: 2},
-    { id: "returnAmnt", title: '총인 반류수량\n(m³/일)', align:"right", row: 0, rowSpan: 2},
-    { id: "efflAmnt", title: '방류량\n(m³/일)', align:"right", row: 0, rowSpan: 2}
+    { id: "A", title: "유역", row: 0, colSpan: 3, widthPercent: 24 },
+    { id: "rvbsn", title: "권역", upName:"upChangeRe", row:1, widthPercent: 8 },
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", row:1, widthPercent: 8 },
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", row:1, widthPercent: 8 },
+    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 10 },
+    { id: "daddr", title: "주소", row: 0, rowSpan: 2 },
+    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 10 },
+    { id: "totInflAmnt", title: "총 유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "inflAmnt", title: "하수유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "sumFlow", title: '연계처리량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "returnAmnt", title: '총인 반류수량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "efflAmnt", title: '방류량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 }
 ];
 
 // 리스트 (환경청별별)
 const upHeadList3:TableUpperProps[] = [
-    { id: "A", title: "유역", row: 0, colSpan: 3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe1", row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", row:1 },
-    { id: "rgnNm", title: "환경청", row:0, rowSpan:2 },
-    { id: "B", title: "행정명", row: 0 ,colSpan: 2 },
-    { id: "sido", title: "시도", upName:"upChangeRe2", row:1 },
-    { id: "gugun", title: "시군구", upName:"upChangeRe2", row:1 },
-    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2 },
+    { id: "A", title: "유역", row: 0, colSpan: 3, widthPercent: 15 },
+    { id: "rvbsn", title: "권역", upName:"upChangeRe1", row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", row:1, widthPercent: 5 },
+    { id: "rgnNm", title: "환경청", row:0, rowSpan:2, widthPercent: 7 },
+    { id: "B", title: "행정명", row: 0 ,colSpan: 2, widthPercent: 10 },
+    { id: "sido", title: "시도", upName:"upChangeRe2", row:1, widthPercent: 5 },
+    { id: "gugun", title: "시군구", upName:"upChangeRe2", row:1, widthPercent: 5 },
+    { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 7 },
     { id: "daddr", title: "주소", row: 0, rowSpan: 2 },
-    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row: 0, rowSpan: 2 },
-    { id: "totInflAmnt", title: "총 유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2 },
-    { id: "inflAmnt", title: "하수유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2 },
-    { id: "sumFlow", title: '연계처리량\n(m³/일)', align:"right", row: 0, rowSpan: 2 },
-    { id: "returnAmnt", title: '총인 반류수량\n(m³/일)', align:"right", row: 0, rowSpan: 2 },
-    { id: "efflAmnt", title: '방류량\n(m³/일)', align:"right", row: 0, rowSpan: 2 }
+    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "totInflAmnt", title: "총 유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "inflAmnt", title: "하수유입량\n(m³/일)", align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "sumFlow", title: '연계처리량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "returnAmnt", title: '총인 반류수량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 },
+    { id: "efflAmnt", title: '방류량\n(m³/일)', align:"right", row: 0, rowSpan: 2, widthPercent: 7 }
 ];
 
 const flowRateList:flowRateListProps[] = [
@@ -172,6 +173,7 @@ const fetchFlowRateList = async (pageNo: number, pageSize: number, searchYear: s
     try {
         const tailStr = partCd ? '/'+ partCd + '/' + nameCd + '/' + fcltCpct + '/' + operationValue + (fcltyNm && fcltyNm !== '' ? '/' + fcltyNm : '') : '';
         const url = '/fclt/flow/' + pageNo + '/' + pageSize + '/' + searchYear + tailStr;
+        console.log(url);
         const res = await getFetch('fo', url);
         return { data: res.data, count: res.count }
     } catch (error) {
@@ -299,11 +301,11 @@ export const flowRateSearchReducer:(set:(fn: (state: FlowRateSearchType) => Flow
                         시설이름: item.bscFctNm,
                         주소: item.daddr,
                         "시설용량(m³/일)": item.fctCpc,
-                        "총유입량(m³/일)": item.totInflAmnt,
-                        "하수유입량(m³/일)": item.inflAmnt,
-                        "연계처리량(m³/일)": item.sumFlow,
-                        "총인반류수량(m³/일)": item.returnAmnt,
-                        "방류량(m³/일)": item.efflAmnt,
+                        "총유입량(m³/일)": CommaToNumber(item.totInflAmnt),
+                        "하수유입량(m³/일)": CommaToNumber(item.inflAmnt),
+                        "연계처리량(m³/일)": CommaToNumber(item.sumFlow),
+                        "총인반류수량(m³/일)": CommaToNumber(item.returnAmnt),
+                        "방류량(m³/일)": CommaToNumber(item.efflAmnt),
                     });
                 });
             }

apps/fo/app/store/planSewage/index.tsx

@@ -47,44 +47,44 @@ const LabelArray:string[] = ['구분', '시도', '시군구','용량별', '시
 // 리스트 헤더
 const upHeadList1:TableUpperProps[] = [
     { id: "A", title: "행정구역", upSequnce:1, row:0, colSpan:2 },
-    { id: "sido", title: "시도", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "gugun", title: "시군구", upName:"upChangeRe",upSequnce:2, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sido", title: "시도", upName:"upChangeRe", upSequnce:1, row:1, widthPercent: 10 },
+    { id: "gugun", title: "시군구", upName:"upChangeRe",upSequnce:2, row:1, widthPercent: 10 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 10 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", row:0, rowSpan:2, align:'right' },
-    { id: "spareCapacity", title: "여유용량(m³/일)", row:0, rowSpan:2, align:'right' },
-    { id: "variableLoadPercent", title: "변동부하율(%)", row:0, rowSpan:2, align:'right' },
-    { id: "classifiedSewerPercent", title: "분류식화율(%)", row:0, rowSpan:2, align:'right' },
+    { id: "fctCpc", title: "시설용량(m³/일)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "spareCapacity", title: "여유용량(m³/일)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "variableLoadPercent", title: "변동부하율(%)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "classifiedSewerPercent", title: "분류식화율(%)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
 ];
 
 const upHeadList2:TableUpperProps[] = [
     { id: "A", title: "유역", upName:"upChangeRe", upSequnce:1, row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row:1},
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row:1},
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row:1},
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row:1, widthPercent: 8 },
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row:1, widthPercent: 8},
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row:1, widthPercent: 8},
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 10 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", row:0, rowSpan:2, align:'right' },
-    { id: "spareCapacity", title: "여유용량(m³/일)", row:0, rowSpan:2, align:'right' },
-    { id: "variableLoadPercent", title: "변동부하율(%)", row:0, rowSpan:2, align:'right' },
-    { id: "classifiedSewerPercent", title: "분류식화율(%)", row:0, rowSpan:2, align:'right' },
+    { id: "fctCpc", title: "시설용량(m³/일)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "spareCapacity", title: "여유용량(m³/일)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "variableLoadPercent", title: "변동부하율(%)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "classifiedSewerPercent", title: "분류식화율(%)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
 ];
 
 const upHeadList3:TableUpperProps[] = [
     { id: "A", title: "유역", upName:"upChangeRe", upSequnce:1, row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row:1},
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row:1},
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row:1},
-    { id: "rgnNm", title: "환경청", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row:1, widthPercent: 5},
+    { id: "rgnNm", title: "환경청", row:0, rowSpan:2, widthPercent: 8 },
     { id: "B", title: "행정구역", upName:"upChangeRe", upSequnce:1, row:0, colSpan:2 },
-    { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1, row:1 },
-    { id: "gugun", title: "시군구", upName:"upChangeRe2",upSequnce:2, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1, row:1, widthPercent: 5 },
+    { id: "gugun", title: "시군구", upName:"upChangeRe2",upSequnce:2, row:1, widthPercent: 5 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 10 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", row:0, rowSpan:2, align:'right' },
-    { id: "spareCapacity", title: "여유용량(m³/일)", row:0, rowSpan:2, align:'right' },
-    { id: "variableLoadPercent", title: "변동부하율(%)", row:0, rowSpan:2, align:'right' },
-    { id: "classifiedSewerPercent", title: "분류식화율(%)", row:0, rowSpan:2, align:'right' },
+    { id: "fctCpc", title: "시설용량(m³/일)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "spareCapacity", title: "여유용량(m³/일)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "variableLoadPercent", title: "변동부하율(%)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
+    { id: "classifiedSewerPercent", title: "분류식화율(%)", row:0, rowSpan:2, align:'right', widthPercent: 8 },
 ];
 
 const planSewageList:PlanSewageProps[] = [
@@ -96,6 +96,7 @@ const planSewageList:PlanSewageProps[] = [
  const fetchPlanSewageList = async (pageNo: number, pageSize: number, searchYear: string, partCd?: string, nameCd?: string, fcltCpct?: string, operationValue?: string, fcltyNm?: string) => {
     const tailStr = partCd ? '/'+ partCd + '/' + (nameCd || '0') + '/' + (fcltCpct || '0') + '/' + (operationValue || '0') +'/0'+ (fcltyNm && fcltyNm !== '' ? '/' + fcltyNm : '') : '';
     const url = '/prcsFclt/info/plan/' + pageNo + '/' + pageSize + '/' + searchYear + tailStr;
+    console.log(url);
     const res = await getFetch('fo', url);
     return { data: res.data, count: res.count }
  }

apps/fo/app/store/processArea/index.tsx

@@ -128,35 +128,35 @@ const ProcessFacilityLabelArray:string[] = ['구분', '시도', '시군구','용
 
 // 리스트 헤더(행정별)
 const upHeadList1:TableUpperProps[] = [
-    { id: "A", title: "행정구역", colSpan:2, rowSpan:2, row:0},
-    { id: "sido", title: "시도", upName:"upChangeRe", row:2 },
-    { id: "sigungo", title: "시군구", upName:"upChangeRe", row:2 },
-    { id: "swtrmtFcltNm", title: "시설명", rowSpan:3, row:0},
-    { id: "location", title: "주소", rowSpan:3, row:0, },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", rowSpan:3, row:0},
-    { id: "B", title: "시설계획", colSpan:19, row:0},
-    { id: "C", title: "증설계획(m³/일)", colSpan:6, row:1},
-    { id: "planSwageQntSumDt4", title: "기승인\n4단계", row:2, align:"right"},
-    { id: "planSwageQntSum", title: "현재", row:2, align:"right"},
-    { id: "planSwageQntSumDc1", title: "1단계", row:2, align:"right"},    
-    { id: "planSwageQntSumDc2", title: "2단계", row:2, align:"right"},
-    { id: "planSwageQntSumDc3", title: "3단계", row:2, align:"right"},
-    { id: "planSwageQntSumDc4", title: "4단계", row:2, align:"right"},
-    { id: "D", title: "처리인구(인)", colSpan:6, row:1},
-    { id: "swtrmtPpltnCntDt4", title: "기승인\n4단계", row:2, align:"right"},
-    { id: "swtrmtPpltnCnt", title: "현재", row:2, align:"right"},
-    { id: "swtrmtPpltnCntDc1", title: "1단계", row:2, align:"right"},
-    { id: "swtrmtPpltnCntDc2", title: "2단계", row:2, align:"right"},
-    { id: "swtrmtPpltnCntDc3", title: "3단계", row:2, align:"right"},
-    { id: "swtrmtPpltnCntDc4", title: "4단계", row:2, align:"right"},
-    { id: "E", title: "처리구역(km²)", colSpan:7, row:1},
-    { id: "swtrmtZoneAreaDt4", title: "기승인\n4단계", row:2, align:"right"},
-    { id: "swtrmtZoneArea", title: "현재", row:2, align:"right"},
-    { id: "swtrmtZoneAreaDc1", title: "1단계", row:2, align:"right"},
-    { id: "swtrmtZoneAreaDc2", title: "2단계", row:2, align:"right"},
-    { id: "swtrmtZoneAreaDc3", title: "3단계", row:2, align:"right"},
-    { id: "swtrmtZoneAreaDc4", title: "4단계", row:2, align:"right"},
-    { id: "trtDstr", title: "처리구역", row:2}
+    { id: "A", title: "행정구역", colSpan:2, rowSpan:2, row:0 },
+    { id: "sido", title: "시도", upName:"upChangeRe", row:2, widthPercent:4 },
+    { id: "sigungo", title: "시군구", upName:"upChangeRe", row:2, widthPercent:4 },
+    { id: "swtrmtFcltNm", title: "시설명", rowSpan:3, row:0, widthPercent: 8 },
+    { id: "location", title: "주소", rowSpan:3, row:0 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", rowSpan:3, row:0, widthPercent: 5 },
+    { id: "B", title: "시설계획", colSpan:19, row: 0 },
+    { id: "C", title: "증설계획(m³/일)", colSpan:6, row: 1 },
+    { id: "planSwageQntSumDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "planSwageQntSum", title: "현재", row:2, align:"right", widthPercent: 2.5 },
+    { id: "planSwageQntSumDc1", title: "1단계", row:2, align:"right", widthPercent: 2.5 },    
+    { id: "planSwageQntSumDc2", title: "2단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "planSwageQntSumDc3", title: "3단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "planSwageQntSumDc4", title: "4단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "D", title: "처리인구(인)", colSpan:6, row:1 },
+    { id: "swtrmtPpltnCntDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtPpltnCnt", title: "현재", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtPpltnCntDc1", title: "1단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtPpltnCntDc2", title: "2단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtPpltnCntDc3", title: "3단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtPpltnCntDc4", title: "4단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "E", title: "처리구역(km²)", colSpan:7, row:1 },
+    { id: "swtrmtZoneAreaDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtZoneArea", title: "현재", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtZoneAreaDc1", title: "1단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtZoneAreaDc2", title: "2단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtZoneAreaDc3", title: "3단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "swtrmtZoneAreaDc4", title: "4단계", row:2, align:"right", widthPercent: 2.5 },
+    { id: "trtDstr", title: "처리구역", row:2 }
 ];
 
 const processAreaList:ProcessAreaProps[] = [

apps/fo/app/store/processFacility/index.tsx

@@ -162,52 +162,56 @@ const ProcessFacilityLabelArray:string[] = ['구분', '시도', '시군구','용
 
 // 리스트 헤더
 const upHeadList1:TableUpperProps[] = [
-  { id: "sido", title: "시도", upName:"upChangeRe", upSequnce:1 },
-  { id: "gugun", title: "시군구", upName:"upChangeRe",upSequnce:2 },
-  { id: "bscFctNm", title: "시설명"},
-  { id: "daddr", title: "주소"},
-  { id: "fctCpc", title: "시설용량\n(m³/일)", align: 'right'},
-  { id: "plInflWqltBod", title: "계획유입수질\n(mg/L)", align:"right"},
-  { id: "dsInflWqltBod", title: "설계유입수질\n(mg/L)", align:"right"},
-  { id: "trtFrfNm", title: '공법'},
-  { id: "rnDt", title: '가동개시일'},
-  { id: "cmplDt", title: '준공일' },
-  { id: "trstOprEtpNm", title: '관리대행업자'}
+  { id: "A", title: "행정명", colSpan: 2, row: 0, widthPercent: 10 },
+  { id: "sido", title: "시도", upName:"upChangeRe", row: 1, upSequnce:1, widthPercent: 5 },
+  { id: "gugun", title: "시군구", upName:"upChangeRe", row: 1, upSequnce:2, widthPercent: 5 },
+  { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 8 },
+  { id: "daddr", title: "주소", row: 0, rowSpan: 2 },
+  { id: "fctCpc", title: "시설용량\n(m³/일)", row: 0, align: 'right', rowSpan: 2, widthPercent: 5 },
+  { id: "plInflWqltBod", title: "계획유입수질\n(mg/L)", row: 0, align:"right", rowSpan: 2, widthPercent: 5 },
+  { id: "dsInflWqltBod", title: "설계유입수질\n(mg/L)", row: 0, align:"right", rowSpan: 2, widthPercent: 5 },
+  { id: "trtFrfNm", title: '공법', row: 0, rowSpan: 2 },
+  { id: "rnDt", title: '가동개시일', row: 0, rowSpan: 2, widthPercent: 5 },
+  { id: "cmplDt", title: '준공일', row: 0, rowSpan: 2, widthPercent: 5 },
+  { id: "trstOprEtpNm", title: '관리대행업자', row: 0, rowSpan: 2 , widthPercent: 14}
 ];
 
 // 처리시설 리스트 (유역)
 const upHeadList2:TableUpperProps[] = [
-  { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1},
-  { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2},
-  { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3},
-  { id: "bscFctNm", title: "시설명"},
-  { id: "daddr", title: "주소"},
-  { id: "fctCpc", title: "시설용량\n(m³/일)", align: 'right'},
-  { id: "plInflWqltBod", title: "계획유입수질\n(mg/L)", align:'right'},
-  { id: "dsInflWqltBod", title: "설계유입수질\n(mg/L)", align:'right'},
-  { id: "trtFrfNm", title: '공법'},
-  { id: "rnDt", title: '가동개시일'},
-  { id: "cmplDt", title: '준공일' },
-  { id: "trstOprEtpNm", title: '관리대행업자'}
+  { id: "A", title: "유역", colSpan: 3, row: 0, widthPercent: 15 },
+  { id: "rvbsn", title: "권역", row: 1, widthPercent: 5 },
+  { id: "lgbsn", title: "단위유역", row: 1, widthPercent: 5 },
+  { id: "mdmbsn", title: "중권역", row: 1, widthPercent: 5 },
+  { id: "bscFctNm", title: "시설명", rowSpan: 2,row: 0, widthPercent: 8 },
+  { id: "daddr", title: "주소", rowSpan: 2,row: 0 },
+  { id: "fctCpc", title: "시설용량\n(m³/일)", rowSpan: 2,row: 0, widthPercent: 5, align: 'right'},
+  { id: "plInflWqltBod", title: "계획유입수질\n(mg/L)", rowSpan: 2,row: 0, widthPercent: 6, align:'right'},
+  { id: "dsInflWqltBod", title: "설계유입수질\n(mg/L)", rowSpan: 2,row: 0, widthPercent: 6, align:'right'},
+  { id: "trtFrfNm", title: '공법', rowSpan: 2,row: 0 },
+  { id: "rnDt", title: '가동개시일', rowSpan: 2,row: 0, widthPercent: 5 },
+  { id: "cmplDt", title: '준공일', rowSpan: 2,row: 0, widthPercent: 5 },
+  { id: "trstOprEtpNm", title: '관리대행업자', rowSpan: 2,row: 0, widthPercent: 14 }
 ];
 
 // 처리시설 리스트 (환경청청)
 const upHeadList3:TableUpperProps[] = [
-  { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1},
-  { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2},
-  { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3},
-  { id: "rgnNm", title: "환경청"},
-  { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1 },
-  { id: "gugun", title: "시군구", upName:"upChangeRe2",upSequnce:2 },
-  { id: "bscFctNm", title: "시설명"},
-  { id: "daddr", title: "주소"},
-  { id: "fctCpc", title: "시설용량\n(m³/일)", align: 'right'},
-  { id: "plInflWqltBod", title: "계획유입수질\n(mg/L)", align:'right'},
-  { id: "dsInflWqltBod", title: "설계유입수질\n(mg/L)", align:'right'},
-  { id: "trtFrfNm", title: '공법'},
-  { id: "rnDt", title: '가동개시일'},
-  { id: "cmplDt", title: '준공일' },
-  { id: "trstOprEtpNm", title: '관리대행업자'}
+  { id: "A", title: "유역", colSpan: 3, row: 0, widthPercent: 12 },
+  { id: "rvbsn", title: "권역", row: 1, widthPercent: 4 },
+  { id: "lgbsn", title: "단위유역", row: 1, widthPercent: 4},
+  { id: "mdmbsn", title: "중권역", row: 1, widthPercent: 4 },
+  { id: "rgnNm", title: "환경청", row: 0, rowSpan: 2, widthPercent: 6 },
+  { id: "B", title: "행정명", colSpan: 2, row: 0, widthPercent: 8 },
+  { id: "sido", title: "시도", row: 1, widthPercent: 4 },
+  { id: "gugun", title: "시군구", row: 1, widthPercent: 4 },
+  { id: "bscFctNm", title: "시설명", row: 0, rowSpan: 2, widthPercent: 8 },
+  { id: "daddr", title: "주소", row: 0, rowSpan: 2 },
+  { id: "fctCpc", title: "시설용량\n(m³/일)", row: 0, rowSpan: 2, align: 'right', widthPercent: 5 },
+  { id: "plInflWqltBod", title: "계획유입수질\n(mg/L)", row: 0, rowSpan: 2, align:'right', widthPercent: 5 },
+  { id: "dsInflWqltBod", title: "설계유입수질\n(mg/L)", row: 0, rowSpan: 2, align:'right', widthPercent: 5 },
+  { id: "trtFrfNm", title: '공법', row: 0, rowSpan: 2 },
+  { id: "rnDt", title: '가동개시일', row: 0, rowSpan: 2, widthPercent: 5 },
+  { id: "cmplDt", title: '준공일', row: 0, rowSpan: 2, widthPercent: 5 },
+  { id: "trstOprEtpNm", title: '관리대행업자', row: 0, rowSpan: 2, widthPercent: 14 }
 ];
 
 const processFacilityList:facilityListProps[] = [

apps/fo/app/store/rdi/index.tsx

@@ -101,65 +101,65 @@ export interface ExcelType {
 // 리스트 헤더
 const upHeadList1:TableUpperProps[] = [
     { id: "A", title: "행정구역", row:0, colSpan:2 },
-    { id: "sido", title: "시도", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "sigungo", title: "시군구", upName:"upChangeRe",upSequnce:2, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sido", title: "시도", row:1, widthPercent: 6 },
+    { id: "sigungo", title: "시군구", row:1, widthPercent: 6 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 7 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "chungchunFlow", title: "청천시 유입하수량\n(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 7  },
+    { id: "chungchunFlow", title: "청천시 유입하수량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 7 },
     { id: "B", title: "하절기 운영현황(6~8월)", row:0, colSpan:2 },
-    { id: "summerMinBodValue", title: "3mm 이상 강우일 중 최저 유입BOD\n(mg/L)", align:"right", row:1 },
-    { id: "inflAmnt", title: "하절기최저유입BOD유입유량\n(m³/일)", row:1, align:"right" },
+    { id: "summerMinBodValue", title: "3mm 이상 강우일 중\n최저 유입BOD\n(mg/L)", align:"right", row:1, widthPercent: 7 },
+    { id: "inflAmnt", title: "하절기최저유입\nBOD유입유량\n(m³/일)", row:1, align:"right", widthPercent: 7 },
     { id: "C", title: "동절기 운영현황(1~2월)", row:0 },
-    { id: "winterAvgBodLowRainfall", title: "청천시 유입BOD\n(mg/L)", row:1, align:"right" },
-    { id: "rdiiValue", title: "RDII추정", row:0, rowSpan:2, align:"right" },
-    { id: "infoRnDay", title: "RDII추정시일강수량\n(mm)", row:0, rowSpan:2, align:"right" },
-    { id: "rainCalInflAmnt", title: "강우시 총 추정유입량\n(m³/일)", row:0, rowSpan:2, align:"right" },
-    { id: "properYn", title: "적정여부", row:0, rowSpan:2 },
+    { id: "winterAvgBodLowRainfall", title: "청천시 유입BOD\n(mg/L)", row:1, align:"right", widthPercent: 8 },
+    { id: "rdiiValue", title: "RDII추정", row:0, rowSpan:2, align:"right", widthPercent: 8 },
+    { id: "infoRnDay", title: "RDII추정시\n일강수량\n(mm)", row:0, rowSpan:2, align:"right", widthPercent: 7 },
+    { id: "rainCalInflAmnt", title: "강우시\n총 추정유입량\n(m³/일)", row:0, rowSpan:2, align:"right", widthPercent: 6 },
+    { id: "properYn", title: "적정여부", row:0, rowSpan:2, widthPercent: 6 },
 ];
 
 const upHeadList2:TableUpperProps[] = [
     { id: "A", title: "유역", row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", row:1, widthPercent: 5 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 7 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "chungchunFlow", title: "청천시 유입하수량\n(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 7 },
+    { id: "chungchunFlow", title: "청천시 유입하수량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 7 },
     { id: "B", title: "하절기 운영현황(6~8월)", row:0, colSpan:2 },
-    { id: "summerMinBodValue", title: "3mm 이상 강우일 중 최저 유입BOD\n(mg/L)", align:"right", row:1 },
-    { id: "inflAmnt", title: "하절기최저유입BOD유입유량", row:1, align:"right" },
+    { id: "summerMinBodValue", title: "3mm 이상 강우일 중\n최저 유입BOD\n(mg/L)", align:"right", row:1, widthPercent: 7 },
+    { id: "inflAmnt", title: "하절기최저유입\nBOD유입유량\n(m³/일)", row:1, align:"right", widthPercent: 7 },
     { id: "D", title: "동절기 운영현황(1~2월)", row:0 },
-    { id: "winterAvgBodLowRainfall", title: "동절기청천시유입BOD", row:1, align:"right" },
-    { id: "rdiiValue", title: "RDII추정", row:0, rowSpan:2, align:"right" },
-    { id: "infoRnDay", title: "RDII추정시일강수량", row:0, rowSpan:2, align:"right" },
-    { id: "rainCalInflAmnt", title: "강우시 총 추정유입량\n(m³/일)", row:0, rowSpan:2, align:"right" },
-    { id: "properYn", title: "적정여부", row:0, rowSpan:2 },
+    { id: "winterAvgBodLowRainfall", title: "청천시 유입BOD\n(mg/L)", row:1, align:"right", widthPercent: 8 },
+    { id: "rdiiValue", title: "RDII추정", row:0, rowSpan:2, align:"right", widthPercent: 7 },
+    { id: "infoRnDay", title: "RDII추정시\n일강수량\n(mm)", row:0, rowSpan:2, align:"right", widthPercent: 7 },
+    { id: "rainCalInflAmnt", title: "강우시\n총 추정유입량\n(m³/일)", row:0, rowSpan:2, align:"right", widthPercent: 6 },
+    { id: "properYn", title: "적정여부", row:0, rowSpan:2, widthPercent: 6 },
 ];
 
 const upHeadList3:TableUpperProps[] = [
     { id: "A", title: "유역", row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row:1 },
-    { id: "rgnNm", title: "환경청", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", row:1, widthPercent: 4 },
+    { id: "lgbsn", title: "단위유역", row:1, widthPercent: 4 },
+    { id: "mdmbsn", title: "중권역", row:1, widthPercent: 4 },
+    { id: "rgnNm", title: "환경청", row:0, rowSpan:2, widthPercent: 6 },
     { id: "B", title: "행정구역", row:0, colSpan:2 },
-    { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1, row:1 },
-    { id: "sigungo", title: "시군구", upName:"upChangeRe2",upSequnce:2, row:1 }, 
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sido", title: "시도", upName:"upChangeRe2", upSequnce:1, row:1, widthPercent: 4 },
+    { id: "sigungo", title: "시군구", upName:"upChangeRe2",upSequnce:2, row:1, widthPercent: 4 }, 
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 6 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "chungchunFlow", title: "청천시 유입하수량\n(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 5 },
+    { id: "chungchunFlow", title: "청천시 유입하수량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
     { id: "C", title: "하절기 운영현황(6~8월)", row:0, colSpan:2 },
-    { id: "summerMinBodValue", title: "3mm 이상 강우일 중 최저 유입BOD\n(mg/L)", align:"right", row:1 },
-    { id: "inflAmnt", title: "하절기최저유입BOD유입유량", row:1, align:"right" },
+    { id: "summerMinBodValue", title: "3mm 이상 강우일 중\n최저 유입BOD\n(mg/L)", align:"right", row:1, widthPercent: 6 },
+    { id: "inflAmnt", title: "하절기최저유입\nBOD유입유량\n(m³/일)", row:1, align:"right", widthPercent: 6 },
     { id: "D", title: "동절기 운영현황(1~2월)", row:0 },
-    { id: "winterAvgBodLowRainfall", title: "동절기청천시유입BOD", row:1, align:"right" },
-    { id: "rdiiValue", title: "RDII추정", row:0, rowSpan:2, align:"right" },
-    { id: "infoRnDay", title: "RDII추정시일강수량", row:0, rowSpan:2, align:"right" },
-    { id: "rainCalInflAmnt", title: "강우시 총 추정유입량\n(m³/일)", row:0, rowSpan:2, align:"right" },
-    { id: "properYn", title: "적정여부", row:0, rowSpan:2 },
+    { id: "winterAvgBodLowRainfall", title: "청천시 유입BOD\n(mg/L)", row:1, align:"right", widthPercent: 8 },
+    { id: "rdiiValue", title: "RDII추정", row:0, rowSpan:2, align:"right", widthPercent: 6 },
+    { id: "infoRnDay", title: "RDII추정시\n일강수량\n(mm)", row:0, rowSpan:2, align:"right", widthPercent: 6 },
+    { id: "rainCalInflAmnt", title: "강우시\n총 추정유입량\n(m³/일)", row:0, rowSpan:2, align:"right", widthPercent: 6 },
+    { id: "properYn", title: "적정여부", row:0, rowSpan:2, widthPercent: 6 },
 ];
 
 const rdiList:RdiProps[] = [
@@ -336,11 +336,20 @@ export const rdiReducer:(set:SetStateFunction)=>RdiActions=(set: SetStateFunctio
                     minSummerBod = minSummerBod === 99999999 ? 0 : minSummerBod;
                     minSummerBodInfl = minSummerBodInfl === 99999999 ? 0 : minSummerBodInfl;
 
-                    const winterBodAvg = winterBodSunny / winterCnt;
+                    const roundMinSummerBodInfl = Number(roundNumber(minSummerBodInfl, 0).toString().replaceAll(',',''));
+                    const roundMinSummerBod = Number(roundNumber(minSummerBod, 1).toString().replaceAll(',',''));
+                    const roundWinterBodSunny = Number(roundNumber(winterBodSunny, 1).toString().replaceAll(',',''));
+                    
+                    console.log('bsccd : ', item.bscFctCd);
+                    console.log('roundMinSummerBodInfl : ',roundMinSummerBodInfl);
+                    console.log('roundMinSummerBod : ',roundMinSummerBod);
+                    console.log('roundWinterBodSunny : ',roundWinterBodSunny);
+
+                    const winterBodAvg = Number(roundNumber((roundWinterBodSunny / winterCnt), 1).toString().replaceAll(',',''));
                     // 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD))
-                    const winMinusSum = winterBodAvg - minSummerBod;
-                    console.log(item.bscFctCd+' '+minSummerBodInfl+' '+winMinusSum+' ('+winterBodSunny+' '+winterCnt+') '+' '+winterBodSunny)
-                    const rdiValue = winMinusSum===0 ? 0 : minSummerBodInfl * ((winMinusSum / winterBodAvg ));
+                    const winMinusSum = winterBodAvg - roundMinSummerBod;
+
+                    const rdiValue = winMinusSum===0 ? 0 : roundMinSummerBodInfl * (winMinusSum / winterBodAvg );
 
                     rtnWinterInflBod = winterBodAvg;
                     rtnSummerBodInfl = minSummerBodInfl;

apps/fo/app/store/sewageOccur/index.tsx

@@ -63,50 +63,50 @@ export interface ExcelType {
 // 리스트 헤더
 const upHeadList1:TableUpperProps[] = [
     { id: "A", title: "행정구역", row:0, colSpan:2 },
-    { id: "sidoNm", title: "시도", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "sggNm", title: "시군구", upName:"upChangeRe",upSequnce:2, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sidoNm", title: "시도", row:1, widthPercent: 8 },
+    { id: "sggNm", title: "시군구", row:1, widthPercent: 8 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "waterUsage", title: "물사용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "swageChangePercent", title: "오수전환율\n(%)", align:"right", row:0, rowSpan:2 },
-    { id: "estimationSewage", title: "오수발생량 추정\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "sewageInputYear", title: "연간 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "sewageInputChungchun", title: "청천시 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "waterUsage", title: "물사용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "swageChangePercent", title: "오수전환율\n(%)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "estimationSewage", title: "오수발생량 추정\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "sewageInputYear", title: "연간 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "sewageInputChungchun", title: "청천시 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
 ];
 
 const upHeadList2:TableUpperProps[] = [
     { id: "A", title: "유역", row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", row:1, widthPercent: 6 },
+    { id: "lgbsn", title: "단위유역", row:1, widthPercent: 6 },
+    { id: "mdmbsn", title: "중권역", row:1, widthPercent: 6 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "waterUsage", title: "물사용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "swageChangePercent", title: "오수전환율", align:"right", row:0, rowSpan:2 },
-    { id: "estimationSewage", title: "오수발생량 추정\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "sewageInputYear", title: "연간 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "sewageInputChungchun", title: "청천시 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "waterUsage", title: "물사용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "swageChangePercent", title: "오수전환율", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "estimationSewage", title: "오수발생량 추정\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "sewageInputYear", title: "연간 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "sewageInputChungchun", title: "청천시 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
 ];
 
 const upHeadList3:TableUpperProps[] = [
     { id: "A", title: "유역", row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row:1 },
-    { id: "rgnNm", title: "환경청", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", row:1, widthPercent: 5 },
+    { id: "rgnNm", title: "환경청", row:0, rowSpan:2, widthPercent: 8 },
     { id: "B", title: "행정구역", row:0, colSpan:2 },
-    { id: "sidoNm", title: "시도", upName:"upChangeRe2", upSequnce:1, row:1 },
-    { id: "sggNm", title: "시군구", upName:"upChangeRe2",upSequnce:2, row:1 }, 
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sidoNm", title: "시도", row:1, widthPercent: 6 },
+    { id: "sggNm", title: "시군구", row:1, widthPercent: 6 }, 
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "waterUsage", title: "물사용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "swageChangePercent", title: "오수전환율", align:"right", row:0, rowSpan:2 },
-    { id: "estimationSewage", title: "오수발생량 추정\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "sewageInputYear", title: "연간 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "sewageInputChungchun", title: "청천시 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
+    { id: "waterUsage", title: "물사용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
+    { id: "swageChangePercent", title: "오수전환율", align:"right", row:0, rowSpan:2, widthPercent: 6 },
+    { id: "estimationSewage", title: "오수발생량 추정\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
+    { id: "sewageInputYear", title: "연간 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
+    { id: "sewageInputChungchun", title: "청천시 하수유입량\n(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
 ];
 
 const upHeadListSewageOccurDetail:TableUpperProps[] = [

apps/fo/app/store/underWaterInput/index.tsx

@@ -35,53 +35,53 @@ const LabelArray:string[] = ['구분', '시도', '시군구','용량별', '시
 // 리스트 헤더
 const upHeadList1:TableUpperProps[] = [
     { id: "A", title: "행정구역", row:0, colSpan:2 },
-    { id: "sidoNm", title: "시도", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "sggNm", title: "시군구", upName:"upChangeRe",upSequnce:2, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sidoNm", title: "시도", row:1, widthPercent: 8 },
+    { id: "sggNm", title: "시군구", row:1, widthPercent: 8 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "inflAmnt", title: "연평균유입하수량(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "inflAmnt", title: "연평균유입하수량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 10 },
     { id: "C", title: "지하수 유입량 추정", align:"right", row:0, colSpan:3 },
-    { id: "underWaterInputYear", title: "연간\n(m³/일)", align:"right", row:1 },
-    { id: "underWaterInputSummer", title: "하절기\n(m³/일)", align:"right", row:1 },
-    { id: "underWaterInputWinter", title: "동절기\n(m³/일)", align:"right", row:1 },
-    { id: "properYn", title: "적정여부", row:0, rowSpan:2 },
+    { id: "underWaterInputYear", title: "연간\n(m³/일)", align:"right", row:1, widthPercent: 8 },
+    { id: "underWaterInputSummer", title: "하절기\n(m³/일)", align:"right", row:1, widthPercent: 8 },
+    { id: "underWaterInputWinter", title: "동절기\n(m³/일)", align:"right", row:1, widthPercent: 8 },
+    { id: "properYn", title: "적정여부", row:0, rowSpan:2, widthPercent: 8 },
 ];
 
 const upHeadList2:TableUpperProps[] = [
     { id: "A", title: "유역", row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe", upSequnce:1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe", upSequnce:2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe", upSequnce:3, row:1 },
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", row:1, widthPercent: 5 },
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "inflAmnt", title: "연평균유입하수량(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 8 },
+    { id: "inflAmnt", title: "연평균유입하수량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 10 },
     { id: "C", title: "지하수 유입량 추정", align:"right", row:0, colSpan:3 },
-    { id: "underWaterInputYear", title: "연간\n(m³/일)", align:"right", row:1 },
-    { id: "underWaterInputSummer", title: "하절기\n(m³/일)", align:"right", row:1 },
-    { id: "underWaterInputWinter", title: "동절기\n(m³/일)", align:"right", row:1 },
-    { id: "properYn", title: "적정여부", row:0, rowSpan:2 },
+    { id: "underWaterInputYear", title: "연간\n(m³/일)", align:"right", row:1, widthPercent: 8 },
+    { id: "underWaterInputSummer", title: "하절기\n(m³/일)", align:"right", row:1, widthPercent: 8 },
+    { id: "underWaterInputWinter", title: "동절기\n(m³/일)", align:"right", row:1, widthPercent: 8 },
+    { id: "properYn", title: "적정여부", row:0, rowSpan:2, widthPercent: 8 },
 ];
 
 const upHeadList3:TableUpperProps[] = [
     { id: "A", title: "유역", row:0, colSpan:3 },
-    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row:1 },
-    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row:1 },
-    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row:1 },
-    { id: "rgnNm", title: "환경청", row:0, rowSpan:2 },
+    { id: "rvbsn", title: "권역", upName:"upChangeRe1", upSequnce:1, row:1, widthPercent: 5 },
+    { id: "lgbsn", title: "단위유역", upName:"upChangeRe1", upSequnce:2, row:1, widthPercent: 5 },
+    { id: "mdmbsn", title: "중권역", upName:"upChangeRe1", upSequnce:3, row:1, widthPercent: 5 },
+    { id: "rgnNm", title: "환경청", row:0, rowSpan:2, widthPercent: 8 },
     { id: "B", title: "행정구역", row:0, colSpan:2 },
-    { id: "sidoNm", title: "시도", upName:"upChangeRe2", upSequnce:1, row:1 },
-    { id: "sggNm", title: "시군구", upName:"upChangeRe2",upSequnce:2, row:1 }, 
-    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2 },
+    { id: "sidoNm", title: "시도", row:1, widthPercent: 6 },
+    { id: "sggNm", title: "시군구", row:1, widthPercent: 6 }, 
+    { id: "bscFctNm", title: "시설명", row:0, rowSpan:2, widthPercent: 8 },
     { id: "daddr", title: "주소", row:0, rowSpan:2 },
-    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2 },
-    { id: "inflAmnt", title: "연평균유입하수량(m³/일)", align:"right", row:0, rowSpan:2 },
+    { id: "fctCpc", title: "시설용량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 6 },
+    { id: "inflAmnt", title: "연평균유입하수량(m³/일)", align:"right", row:0, rowSpan:2, widthPercent: 10 },
     { id: "C", title: "지하수 유입량 추정", align:"right", row:0, colSpan:3 },
-    { id: "underWaterInputYear", title: "연간\n(m³/일)", align:"right", row:1 },
-    { id: "underWaterInputSummer", title: "하절기\n(m³/일)", align:"right", row:1 },
-    { id: "underWaterInputWinter", title: "동절기\n(m³/일)", align:"right", row:1 },
-    { id: "properYn", title: "적정여부", row:0, rowSpan:2 },
+    { id: "underWaterInputYear", title: "연간\n(m³/일)", align:"right", row:1, widthPercent: 6},
+    { id: "underWaterInputSummer", title: "하절기\n(m³/일)", align:"right", row:1, widthPercent: 6 },
+    { id: "underWaterInputWinter", title: "동절기\n(m³/일)", align:"right", row:1, widthPercent: 6 },
+    { id: "properYn", title: "적정여부", row:0, rowSpan:2, widthPercent: 6 },
 ];
 
 // 모달
@@ -288,6 +288,7 @@ export const underWaterReducer:(set:(fn: (state: UnderWaterType) => UnderWaterTy
                 const bscFctCd = item.bscFctCd;
                 const res2 = await getFetch('fo', '/fclt/flow/' + bscFctCd + '/' + searchYear) as ApiResponse;
                 const calData = CalcRainEffect(res2.data, 'SUNNY');
+                
                 let chungcunSumFlow = 0;
 
                 let sumSummerChungcunDay = 0;

apps/sn/.env.local

@@ -11,6 +11,9 @@ NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr/openapi/Gettile.do?apiKey=04trYP9_
 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083
 NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com
+NEXT_PUBLIC_DEV_CM_LOGIN_PAGE_URL = http://localhost:3000/auth/login
+NEXT_PUBLIC_VDI_DEV_CM_LOGIN_PAGE_URL = http://localhost:3000/auth/login
+NEXT_PUBLIC_VDI_DEV_CM_LOGIN_PAGE_URL = http://localhost:3000/auth/login
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.222:8883
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883

apps/sn/app/(map-layout)/layout.tsx

@@ -1,3 +1,16 @@
+/**
+ * ➡️ 경로 : 하수관망도 모든 페이지
+ * 
+ * 📄 Map Layout
+ * Next.js App Router (app/) 기반 맵 레이아웃 컴포넌트
+ *
+ * - 메뉴 클릭 이벤트 처리 및 라우팅
+ * - 현재 메뉴 정보 Zustand를 통한 상태 관리
+ * - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
+ * - NoFooterLayout을 통한 공통 레이아웃 적용
+ * - QueryClient를 통한 데이터 캐싱 및 관리
+ * - 경로 변경 시 메뉴 정보 동기화
+ */
 "use client";
 
 import React, { useEffect } from 'react';

apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx

@@ -1,3 +1,18 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수관로)
+ * 
+ * 📄 MsSwagePpl
+ * 하수관로 정보 컴포넌트
+ *
+ * - 하수관로의 자체입력정보 표시 및 편집 기능
+ * - 보수 및 갱신, 청소 및 준설, 점검 및 진단 데이터 조회 및 표시
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - InputSection을 통한 운영 데이터 관리
+ * - 저장 버튼을 통한 데이터 저장 기능
+ * 
+ * 🔗 사용 API
+ * - 시설별 운영 정보 조회: GET /api/v1/bizInfo/bizByFclt (sewerage-service)
+ */
 'use client'
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React, { useState, useEffect } from 'react'
@@ -88,9 +103,6 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
       setInspectionData(inspectionArr);
       setCleaningData(cleaningArr);
       setRepairData(repairArr);
-      console.log('inspectionArr', inspectionArr);
-      console.log('cleaningArr', cleaningArr);
-      console.log('repairArr', repairArr);
     };
     fetchAll();
   }, [featureData]);

apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx

@@ -1,7 +1,21 @@
-// 우수토실
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (우수토실)
+ * 
+ * 📄 Ssc
+ * 우수토실 정보 컴포넌트
+ *
+ * - 우수토실의 자체입력정보 표시 및 편집 기능
+ * - 중점우수토실 운영정보 모달 표시 (강우/측정 정보, 수량/수질측정 정보)
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - 저장 버튼을 통한 데이터 저장 기능
+ * 
+ * 🔗 사용 API
+ * - 위경도로 강우시 미처리 하수 목록 조회: GET /api/v1/onsemiro/getSwgRainsByGeomety (sewerage-service)
+ * - 강우시 월류 하수 관리 모니터링 조회: GET /api/v1/onsemiro/swgRain/{adstDstrCd}/{manageNo}/mntrngs (sewerage-service)
+ */
 import { UiModal, UiTable } from '@common/business_components/ui';
 import { Button, TableHead, TableRow } from '@common/components/ui';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
 import { VerticalTable } from '@/components/ui/verticalTable';
 import { getData } from "@/components/lib/api";
@@ -34,8 +48,6 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
   const [isResetDetailPage, setIsResetDetailPage] = useState<boolean>(true);
   const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
 
-  console.log('featureData', featureData);
-
   // 강우, 측정 정보 API 호출 함수
   const fetchRainMeasureData = async (chmbrXcnts: string, chmbrYdnts: string) => {
     setIsResetDetailPage(true);
@@ -53,13 +65,8 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
         size: '3',
       });
 
-      console.log('queryParams', queryParams.toString());
-      console.log(`추가 데이터 API 호출 시작: v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
-
       const result = await getData(`v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
 
-      console.log('추가 데이터 API 호출 성공:', result);
-
       const processedDataArray: any[] = result.content.map((data: any) => {
         // 🎯 formatDisplayData로 기본 포맷팅 적용
         const formattedItem = formatDisplayData(data);
@@ -92,12 +99,8 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
         size: '3',
       });
 
-      console.log(`SSC 추가 데이터 API 호출 시작: v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
-
       const result = await getData(`v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
 
-      console.log('SSC 추가 데이터 API 호출 성공:', result);
-
       // 각 아이템 전처리
       const processedDataArray = result.content.map((data: any) => {
         // 기본 포맷팅 적용
@@ -107,8 +110,6 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
         };
       });
 
-      console.log('processedDataArray', processedDataArray);
-
       setMntrngsData(processedDataArray);
       setTotalDetailCount(result?.totalElements || 0);
     } catch (error) {

apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx

@@ -1,3 +1,13 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수처리시설)
+ * 
+ * 📄 SwtrmtFclt
+ * 하수처리시설 정보 컴포넌트
+ *
+ * - 하수처리시설의 디지털 자료관 연계 정보 표시
+ * - VerticalTable을 통한 테이블 렌더링
+ * - 조회 버튼을 통한 모달 표시 및 ReportTab 연동
+ */
 'use client'
 import React, { useState } from 'react'
 import { VerticalTable } from '@/components/ui/verticalTable';

apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts

@@ -84,7 +84,6 @@ const selectAplcnYms = async(gubun:string) => { // 상수사용월
     const queryString = '';
     const result = await getData(`v1/${gubun}/aplcnYm${queryString ? `?${queryString}` : ''}`);
     if (result && result.length > 0) {
-        console.log("selectAplcnYms", result);
         return getOptionsAplcnYm(result);
     }
     } catch (error) {
@@ -119,7 +118,6 @@ export const selectInftwtAnls = async(aplcnYm:string) => { // 침입수분석
     const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : '';
     const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectInftwtAnls", result.content);
         return result.content;
     } 
   } catch (error) {
@@ -141,7 +139,6 @@ export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string)
     }
     const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectInftwtAnlsRslt", result.content);
         return result.content;
     } 
   } catch (error) {
@@ -163,7 +160,6 @@ export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { //
     }
     const result = await getData(`v1/inftwtAnlsRslt/oilqPpl/${inftwtAnlsSn}/${pplMngNo}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectOilq", result.content);
         return result.content;
     } 
   } catch (error) {
@@ -178,7 +174,6 @@ export const selectPplInftwtQty = async(inftwtAnlsSn:number, pplMngNo:string) =>
     }
     const result = await getData(`v1/inftwtAnlsRslt/pplInftwtQty/${inftwtAnlsSn}/${pplMngNo}`);
     if (result.length > 0) {
-        console.log("selectPplInftwtQty", result);
         return result[0].avg_day_flow;
     } else {
       return 0; // 데이터가 없을 경우 0 반환
@@ -196,7 +191,6 @@ export const selectPplRdiiQty = async(rainInfwtAnlsSn:number, pplMngNo:string) =
     }
     const result = await getData(`v1/rdiiAnlsRslt/pplRdiiQty/${rainInfwtAnlsSn}/${pplMngNo}`);
     if (result?.sustaintime > 0) {
-        console.log("selectPplRdiiQty", result);
         return result;
     } 
   } catch (error) {
@@ -218,7 +212,6 @@ export const selectRdiiAnls = async(aplcnYm:string) => { // 침입수분석
     const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : '';
     const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectRdiiAnls", result.content);
         return result.content;
     } 
   } catch (error) {
@@ -262,7 +255,6 @@ export const selectRainData = async(rainInfwtAnlsSn:number) => { // 강우데이
     }
     const result = await getData(`v1/rdiiAnlsRslt/rainData/${rainInfwtAnlsSn}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectRainData", result.content);
         return result.content;
     } 
   } catch (error) {

apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx

@@ -63,7 +63,6 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
   // 상수사용월 변경 핸들러
   const handleAplcnYmChange = async (val: string | number) => {
     const selectedValue = String(val);
-    console.log("선택된 상수사용월:", selectedValue);
 
     setSelectedAplcnYm(selectedValue);
 

apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx

@@ -1,3 +1,26 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창
+ * 
+ * 📄 FeatureClickEventPopup
+ * 시설물(피처) 클릭시 오른쪽 팝업창 컴포넌트
+ *
+ * - 지도 시설물(피처) 클릭 시 팝업 표시 및 데이터 로딩
+ * - 레이어 유형에 따른 동적 테이블 및 헤드리스트 설정
+ * - 자체입력정보 조회 및 저장 기능 (하수관로, 우수토실, 하수펌프장, 하수맨홀)
+ * - 코드 매핑 및 데이터 포맷팅 처리
+ * - 상류관로 검색, 침입수/RDII 분석 차트 표시
+ * - 모달을 통한 저장 확인 및 API 연동
+ * 
+ * 🔗 사용 API
+ * - 하수관로 자체입력정보 조회: GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 우수토실 자체입력정보 조회: GET /api/v1/fcltstofcbr/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수펌프장 자체입력정보 조회: GET /api/v1/fcltpump/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수맨홀 자체입력정보 조회: GET /api/v1/fcltmhl/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수관로 자체입력정보 저장: POST /api/v1/fcltppl (sewerage-service)
+ * - 우수토실 자체입력정보 저장: POST /api/v1/fcltstofcbr (sewerage-service)
+ * - 하수펌프장 자체입력정보 저장: POST /api/v1/fcltpump (sewerage-service)
+ * - 하수맨홀 자체입력정보 저장: POST /api/v1/fcltmhl (sewerage-service)
+ */
 'use client'
 import { getData, postData } from "@/components/lib/api";
 import Modal from "@/components/ui/modal";
@@ -75,7 +98,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     if (featureData['ol_uid']) {
       // Gis 레이어 클릭 이벤트
       setIsClicked(true);
-      console.log('gis data', featureData.values_);
       const lyrTyNm = featureData.id_.split('.')[0];
 
       switch (lyrTyNm) {
@@ -139,7 +161,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     else {
       // SearchModal 클릭 이벤트
       setIsClicked(false);
-      console.log('SearchModal data', featureData);
       const lyrTyNm = featureData.lyrTypeNm;
 
       switch (lyrTyNm) {
@@ -158,12 +179,10 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         case 'tb_ms_swage_pmstn': {
           const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
           if (drtwPumpCode && featureData.usgCd.trim() === drtwPumpCode.val) {
-            console.log('오수펌프장');
             setIsDrtwSewagePump(false);
             setHeadlist(ExclnSewagePumpCol2)
           }
           else {
-            console.log('빗물펌프장');
             setIsDrtwSewagePump(true);
             setHeadlist(DrtwSewagePumpCol2)
           }
@@ -299,9 +318,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
             const result = await getData(apiEndpoint);
 
             if (result) {
-              console.log('API 데이터 로드 성공:', result);
-
-              // ✅ codeMapper 사용하여 API 결과도 변환
               const processedApiData = codeMapper({
                 layerName: selectedLayerName,
                 data: { ...result, ...tableData }
@@ -381,12 +397,9 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
           bodyData.prrtymngYn = 'N';
         }
       }
-      console.log('bodyData', bodyData);
-      console.log('apiEndpoint', apiEndpoint);
 
       try {
         result = await postData(apiEndpoint, bodyData);
-        console.log('result', result);
 
         if (result) {
           alert('저장되었습니다');

apps/sn/app/(map-layout)/map/components/popupComponent/sewagePump.tsx

@@ -1,3 +1,13 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수펌프장)
+ * 
+ * 📄 sewagePump
+ * 하수펌프장 정보 컴포넌트
+ *
+ * - 빗물펌프장 및 오수펌프장 구분에 따른 자체 입력 정보 표시 및 편집 기능
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - 저장 버튼을 통한 데이터 저장 기능
+ */
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React, { useState, useEffect } from 'react'
 // 빗물펌프장 자체 입력 정보
@@ -12,7 +22,7 @@ const drtwInputColumn = [
   { id: "mltvDtdvNm", title: "처리분구", type: "input" },
 ]
 
-// 하수펌프장
+
 const sewagePump = ({ featureData, isDrtwSewagePump, onSaveClick }: { featureData: any, isDrtwSewagePump?: boolean, onSaveClick?: () => void }) => {
   const [formData, setFormData] = useState<any>({});
 

apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx

@@ -1,4 +1,17 @@
-// 하수맨홀
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수맨홀)
+ * 
+ * 📄 Smh
+ * 하수맨홀 정보 컴포넌트
+ *
+ * - 하수맨홀의 자체입력정보 표시 및 편집 기능
+ * - VerticalTable을 통한 입력 폼 렌더링
+ * - 상류관로 검색 및 지도 포커스 기능
+ * - 저장 버튼을 통한 데이터 저장 기능
+ * 
+ * 🔗 사용 API
+ * - 상류관로 조회: GET /api/v1/fcltmhl/upperPpls/{fcltMngNo} (sewerage-service)
+ */
 import { VerticalTable } from '@/components/ui/verticalTable';
 import { useEffect, useState } from 'react';
 import GisApp from "@common/business_components/ui/map/lib/gis.core";

apps/sn/app/(map-layout)/map/components/popupComponent/stormWaterPump.tsx

@@ -1,3 +1,12 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (빗물펌프)
+ * 
+ * 📄 StormWaterPump
+ * 빗물펌프 정보 컴포넌트
+ *
+ * - 빗물펌프의 자체입력정보 표시 및 편집 기능
+ * - VerticalTable을 통한 입력 폼 렌더링
+ */
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React from 'react'
 const inputColumn = [

apps/sn/app/(map-layout)/map/page.tsx

@@ -1,3 +1,20 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지
+ * 
+ * 📄 Map Page
+ * 지도 페이지 컴포넌트
+ *
+ * - OpenLayers 기반 GIS 지도 렌더링 및 상호작용
+ * - 레이어 트리 데이터 관리 및 동적 레이어 표시/숨김
+ * - 피처 검색 및 선택 기능 (SearchModal, ProcSearchBar)
+ * - 피처 클릭 이벤트 처리 및 상세 정보 팝업 표시
+ * - 수심(WaterDepth) 레이어 애니메이션 재생 기능
+ * - Zustand를 통한 검색 모달 상태 관리
+ * 
+ * 🔗 사용 API
+ * - 레이어 설정 조회: GET /api/v1/map/lyrStngs/{lyrGrp} (sewerage-service)
+ */
+
 "use client";
 
 import Gis from "@common/business_components/ui/map/Gis";
@@ -10,7 +27,6 @@ import { WaterDepth, WATER_DEPTH_LAYER_TYPES } from "./waterDepth/waterDepth";
 import { ProcSearchBar } from "@common/business_components/ui/map/searchBar";
 import useSearchModalStore from "@/store/useSearchModalStore";
 
-
 const Map = () => {
   const { isSearchModalOpen, setIsSearchModalOpen } = useSearchModalStore();
 
@@ -73,7 +89,6 @@ const Map = () => {
         });
     }
 
-
     // 3. 피처 선택
     if (foundFeature) {
       let geometry = foundFeature.getGeometry();

apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx

@@ -1,3 +1,13 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭
+ * 
+ * 📄 BasicTab Component
+ * Next.js App Router (app/) 기반 검색 모달의 기본정보 탭 컴포넌트
+ *
+ * - 기본정보 검색을 위한 구분 선택 및 조건 입력 UI 제공
+ * - 하수관로, 하수처리시설, 하수처리구역, 하수맨홀, 하수펌프장, 우수토실 등 다양한 유형별 컴포넌트 렌더링
+ * - useSearchModalStore를 통해 상태 관리 및 사용자 상호작용 처리
+ */
 import React from 'react';
 import { SelectBox } from '@common/business_components/ui';
 import { Label } from '@common/components';

apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx

@@ -1,9 +1,22 @@
-import React, { use } from 'react';
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 운영정보 탭
+ * 
+ * 📄 Operation Tab
+ * Next.js App Router (app/) 기반 검색 모달 운영정보 탭 컴포넌트
+ *
+ * - 업무구분 선택 (보수 및 갱신, 점검 및 진단, 청소 및 준설)
+ * - 사업명 입력 및 수행기간 범위 선택
+ * - 사업 유형 필터링 기능
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
+import React from 'react';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
-import useStore from '../../../store/useStore';
-import useSearchModalStore from '../../../store/useSearchModalStore';
+import useStore from '@/store/useStore';
+import useSearchModalStore from '@/store/useSearchModalStore';
 import useSearchModal from './useSearchModal';
 import useOperationTab from './useOperationTab';
 

apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx

@@ -1,6 +1,18 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭 (셀 클릭)
+ * 
+ * 📄 Report Files Modal
+ * Next.js App Router (app/) 기반 보고서 파일 모달 컴포넌트
+ *
+ * - 하수도정비 기본계획 보고서 파일 목록 표시
+ * - 파일명 및 등록일자 정보 테이블 출력
+ * - 페이지네이션 및 로딩 오버레이 지원
+ * - 파일 클릭 이벤트 처리 및 상세 조회
+ * - Zustand를 통한 모달 상태 및 데이터 관리
+ * - 모달 열림/닫힘 시 데이터 초기화 기능
+ */
 'use client'
-import React, { useEffect, useState } from 'react';
-
+import React, { useEffect } from 'react';
 import LoadingOverlay from '@/components/ui/LoadingBar';
 import useReportTab from './useReportTab';
 import { useReportTabStore } from '@/store/useReportTabStore';

apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx

@@ -1,3 +1,16 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭
+ * 
+ * 📄 Report Tab
+ * Next.js App Router (app/) 기반 검색 모달 보고서 탭 컴포넌트
+ *
+ * - 하수도정비 기본계획 보고서 목록 표시 및 필터링
+ * - 시도/시군구/보고서 구분/승인년도 기반 검색 기능
+ * - 테이블 데이터 표시 및 페이지네이션 지원
+ * - 보고서 클릭 시 파일 목록 모달 열기
+ * - Zustand를 통한 모달 상태 및 데이터 관리
+ * - 로딩 오버레이 및 선택 초기화 기능
+ */
 'use client';
 import React, { useEffect, useState } from 'react';
 import { Button, Label } from '@common/components';
@@ -7,6 +20,7 @@ import LoadingOverlay from '@/components/ui/LoadingBar';
 import useReportTab from './useReportTab';
 import useStore from '@/store/useStore';
 import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
+import useSearchModalStore from '@/store/useSearchModalStore';
 import { useReportTabStore } from '@/store/useReportTabStore';
 import ReportFilesModal from './reportFilesModal'; // 파일목록모달
 
@@ -31,19 +45,31 @@ interface ReportTabProps {
 
 const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sggNm }) => {
 
-  const [isLoading, setIsLoading] = useState(false);
+  // const [isLoading, setIsLoading] = useState(false);
   const [isResetPage, setIsResetPage] = useState<boolean>(false);
   const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
   const [showTable, setShowTable] = useState(false);
-  const [tableData, setTableData] = useState<any[]>([]);
-  const [tableCount, setTableCount] = useState(0);
-  const [curPage, setCurPage] = useState(1);
-  const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
+  // const [tableData, setTableData] = useState<any[]>([]);
+  // const [tableCount, setTableCount] = useState(0);
+  // const [curPage, setCurPage] = useState(1);
+  // const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
   const [ctpvCd, setCtpvCd] = useState('0');
   const [sggCd, setSggCd] = useState('0');
   const [reportGubun, setReportGubun] = useState("0");
   const [clsfSystmSn, setClsfSystmSn] = useState(''); // 자료관 기본계획 일련번호
 
+  const {
+    tableData,
+    tableCount,
+    isLoading,
+    yearFilter,
+    curPage,
+    setTableData,
+    setTableCount,
+    setIsLoading,
+    setYearFilter,
+    setCurPage
+  } = useSearchModalStore();
   const { ctpv, sgg } = useStore();
   const {
     isOpen: isReportFilesModalOpen, 

apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx

@@ -1,12 +1,23 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창
+ * 
+ * 📄 Search Modal
+ * Next.js App Router (app/) 기반 검색 모달 컴포넌트
+ *
+ * - 탭 기반 검색 인터페이스 (기본정보, 운영정보, 보고서)
+ * - 테이블 데이터 표시 및 페이지네이션 기능
+ * - 시설물 조회 결과 및 운영 사업 현황 표시
+ * - 엑셀 다운로드 및 지도에서 보기 기능
+ * - Zustand를 통한 검색 모달 상태 관리
+ * - 로딩 오버레이 및 선택 초기화 지원
+ */
 import LoadingOverlay from '@/components/ui/LoadingBar';
 import { UiModal, UITab, UiTable } from '@common/business_components/ui';
 import { Button } from '@common/components/ui';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Toaster } from "react-hot-toast";
-import useSearchModalStore from '../../../store/useSearchModalStore';
-import {
-  ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2
-} from '../components/common/table';
+import useSearchModalStore from '@/store/useSearchModalStore';
+import { ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 } from '../components/common/table';
 import BasicTab, { BASIC_TYPES } from './basicTab';
 import OperationTab from './operationTab';
 import ReportTab from './reportTab';
@@ -16,18 +27,24 @@ import useOperationTab from './useOperationTab';
 
 const SearchModal: React.FC = () => {
   const {
+    showTable,
     isSearchModalOpen, setIsSearchModalOpen,
     activeTab, basicType, workType,
     tableData, detailTableData,
     tableCount, detailTableCount,
     curPage, detailCurPage,
+    detailBizId,
     isLoading, isDetailLoading,
     isResetPage, isResetDetailPage,
     isResetSelection, isResetDetailSelection,
     setActiveTab,
     setCurPage, setDetailCurPage,
+    setIsResetPage, setIsResetDetailPage,
+    setDetailBizId,
+    setIsResetDetailSelection,
+    resetFilters
   } = useSearchModalStore();
-  const { TABS, viewMultipleFeature } = useSearchModal();
+  const { TABS, viewMultipleFeature, fetchFilteredData } = useSearchModal();
   const { handleBasicCellClick, basicExcelDownload } = useBasicTab();
   const {
     WORK_TYPES,
@@ -39,7 +56,8 @@ const SearchModal: React.FC = () => {
     handleOperationCellClick,
     handleOperationResultCellClick,
     operationExcelDownload,
-    operationResultExcelDownload
+    operationResultExcelDownload,
+    handleOperationPageNation
   } = useOperationTab();
 
 
@@ -69,6 +87,24 @@ const SearchModal: React.FC = () => {
     return [];
   }, [activeTab, workType]);
 
+  useEffect(() => {
+    resetFilters();
+  }, [activeTab, basicType, workType]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    setIsResetPage(false);
+    setIsResetDetailPage(true);
+    setDetailBizId(0);
+    if (showTable) fetchFilteredData();
+  }, [curPage]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    setIsResetDetailSelection(false);
+    if (showTable) handleOperationPageNation(Number(detailBizId));
+  }, [detailCurPage]);
+
 
   const renderBody = () => (
     <>

apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx

@@ -1,5 +1,15 @@
-// 우수토실
-
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 우수토실)
+ * 
+ * 📄 Stofcbr Tab
+ * Next.js App Router (app/) 기반 검색 모달 우수토실 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { Button } from '@common/components';
 import React from 'react';

apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx

@@ -1,5 +1,16 @@
-// 하수맨홀
-
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수맨홀)
+ * 
+ * 📄 SwageMhl Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수맨홀 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - 용도 및 구경 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
 import React from 'react';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { Button, Input, Label } from '@common/components';

apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx

@@ -1,5 +1,16 @@
-// 하수펌프장
-
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수펌프장)
+ * 
+ * 📄 SwagePmstn Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수펌프장 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - 일일처리용량 및 양수능력 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { Button, Input, Label } from '@common/components';
 import React from 'react';

apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx

@@ -1,5 +1,16 @@
-// 하수관로
-
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수관로)
+ * 
+ * 📄 SwagePpl Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수관로 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 설치년도 범위 필터링
+ * - 용도 및 관경 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';

apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx

@@ -1,5 +1,16 @@
-// 하수처리시설
-
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리시설)
+ * 
+ * 📄 SwagePrcsFclt Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수처리시설 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 가동개시일자 범위 필터링
+ * - 시설용량 범위 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
 import React from 'react';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { Button, Input, Label } from '@common/components';

apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx

@@ -1,5 +1,15 @@
-// 하수처리구역
-
+/**
+ * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리구역)
+ * 
+ * 📄 SwagePrcsZone Tab
+ * Next.js App Router (app/) 기반 검색 모달 하수처리구역 탭 컴포넌트
+ *
+ * - 시도/시군구 선택 및 하수처리시설명/구역명 기반 검색 기능
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - Zustand를 통한 상태 관리 및 필터 값 저장
+ * - Enter 키 입력 시 자동 조회 지원
+ */
 import React from 'react';
 import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
 import { Button, Input, Label } from '@common/components';

apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts

@@ -1,6 +1,18 @@
-import { useEffect, useState } from 'react';
+/**
+ * 📄 useBasicTab Hook
+ * 검색 모달 기본정보 탭 훅
+ *
+ * - 필터링된 시설물 데이터 조회 및 포맷팅
+ * - 테이블 셀 클릭 시 지도 피처 선택 및 줌 기능
+ * - 엑셀 다운로드 기능 (한글 헤더 지원)
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (시도/시군구, 용도 등)
+ * 
+ * 🔗 사용 API
+ * - 관망도 시설물 목록 조회: GET /api/v1/fclts (sewerage-service)
+ */
 import { downloadExcelWithKoreanHeaders } from '@common/business_components/ui';
-import axios from 'axios';
 import {
   MS_SWAGE_PPL_USE_CODES, MS_SWAGE_MHL_CODES, MS_SWAGE_MHL_USE_CODES,
   MsSwagePplExcelCol, SwtrmtFcltExcelCol, SwtrmtPrcsZoneExcelCol, MsSwageMhlExcelCol, ExclnSewagePumpExcelCol, stofcbrExcelCol
@@ -8,11 +20,11 @@ import {
 import { getData } from "@/components/lib/api";
 import { BASIC_TYPES } from './basicTab';
 import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
-import useStore from '../../../store/useStore';
+import useStore from '@/store/useStore';
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import { confirmToast } from '@/components/ui/toast'
 import { toast } from "react-hot-toast";
-import useSearchModalStore from '../../../store/useSearchModalStore';
+import useSearchModalStore from '@/store/useSearchModalStore';
 import { swagePplCqlFilters } from './swagePpl';
 import { swagePrcsFcltCqlFilters } from './swagePrcsFclt';
 import { swagePrcsZoneCqlFilters } from './swagePrcsZone';
@@ -52,11 +64,6 @@ export default function useBasicTab() {
     if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and '));
 
     const res = await getData(`v1/fclts?${queryParams.toString()}`);
-    // const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`);
-    console.log('fetch res', res);
-    console.log('fetch res.data', res.data);
-    console.log('fetch res.count', res.count);
-    console.log('fetch res.length', res.length);
 
     // 🎯 각 아이템을 개별적으로 포맷팅하면서 일련번호 추가
     const dataWithRowNumber = (res.data || []).map((item: any, index: number) => {
@@ -186,15 +193,13 @@ export default function useBasicTab() {
         if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and '));
 
         const res = await getData(`v1/fclts?${queryParams.toString()}`);
-        // const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`);
-        console.log('onDownload res', res);
 
         const mhlUsgCdMap = new Map(MS_SWAGE_MHL_USE_CODES.map(code => [code.val?.trim(), code.text]));
         const pplUsgCdMap = new Map(MS_SWAGE_PPL_USE_CODES.map(code => [code.val?.trim(), code.text]));
         const ctpvMap = new Map(ctpv.map(code => [code.val?.trim(), code.text]));
         const sggMap = new Map(sgg.map(code => [code.val?.trim(), code.text]));
 
-        const mappedContent = (res.data.data || []).map((item: any) => {
+        const mappedContent = (res.data || []).map((item: any) => {
           const formattedItem = formatDisplayData(item);
 
           let ctpvCd = item?.ctpvCd ?? formattedItem?.ctpvCd ?? '';
@@ -306,8 +311,6 @@ export default function useBasicTab() {
         const label = BASIC_TYPES.find((type) => type.val === basicType)?.text
         const fileName = `${label} 조회 결과_${todayYear}${todayMonth}${todayDate}`;
 
-        console.log(`excelData: ${excelData}, label: ${label}, fileName: ${fileName}`);
-
         await downloadExcelWithKoreanHeaders({
           data: excelData as JSON[],
           fileName: fileName,

apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts

@@ -1,3 +1,19 @@
+/**
+ * 📄 useOperationTab Hook
+ * 검색 모달 운영정보 탭 훅
+ *
+ * - 필터링된 사업 현황 데이터 조회 및 포맷팅
+ * - 사업 현황 테이블 셀 클릭 시 상세 결과표 조회
+ * - 결과표 셀 클릭 시 지도 피처 선택 및 줌 기능
+ * - 엑셀 다운로드 기능 (사업 현황 및 결과표)
+ * - CQL 필터 생성을 통한 쿼리 조건 설정
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (사업 유형, 용도, 재질 등)
+ * 
+ * 🔗 사용 API
+ * - 운영정보 목록 조회: GET /api/v1/bizInfo (sewerage-service)
+ * - 운영정보(사업정보) 관련 시설 목록 조회: GET /api/v1/bizInfo/fclts (sewerage-service)
+ */
 import { downloadExcelWithKoreanHeaders } from '@common/business_components/ui';
 import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
 import { getData } from "@/components/lib/api";
@@ -347,15 +363,12 @@ export default function useOperationTab() {
 
       try {
         const RequestDTO: Record<string, string> = {
-          size: '10000',
+          size: '100',
           bizId: String(detailBizId),
         };
-
-        const apiStartTime = performance.now();
+        
         const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
-        const apiEndTime = performance.now();
-
-        const mappingStartTime = performance.now();
+        
         // 헤더 매핑 정의
         const headerMapping: { [key: string]: string } = {
           'fcltMngNo': '관리번호',

apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts

@@ -1,7 +1,22 @@
+/**
+ * 📄 useReportTab Hook
+ * 검색 모달 보고서 탭 훅
+ *
+ * - 계층적 폴더 구조 평탄화 및 데이터 변환
+ * - 파일 목록 조회 및 페이징 처리
+ * - 파일 다운로드 기능
+ * - 셀 클릭 이벤트 처리
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (시도/시군구, 보고서 유형 등)
+ * 
+ * 🔗 사용 API
+ * - 보고서 파일 조회: GET /api/v1/dc/file (dc-service)
+ * - 파일 다운로드: GET /api/v1/dc/file/download (dc-service)
+ */
 import { getDcData } from '@/components/lib/api';
 import { fileDownload } from '@/utils';
 import { useReportTabStore } from '@/store/useReportTabStore';
-import useSearchModalStore from '@/app/store/useSearchModalStore';
+import useSearchModalStore from '@/store/useSearchModalStore';
 
 export type Folder = {
   clsfSystmSn: string;

apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts

@@ -1,4 +1,17 @@
-import { useEffect } from 'react';
+/**
+ * 📄 useSearchModal Hook
+ * 검색 모달 훅
+ *
+ * - 탭 기반 검색 인터페이스 관리 (기본정보, 운영정보, 보고서)
+ * - 필터링된 데이터 조회 및 포맷팅
+ * - 조회 버튼을 통한 데이터 검색 트리거
+ * - 여러 시설 보기 기능
+ * - Zustand를 통한 상태 관리 및 로딩 처리
+ * - 데이터 매핑 및 코드 변환 (사업 유형 등)
+ * 
+ * 🔗 사용 API
+ * - 운영정보 목록 조회: GET /api/v1/bizInfo (sewerage-service)
+ */
 import { getData } from "@/components/lib/api";
 import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
 import useStore from '../../../store/useStore';
@@ -9,11 +22,9 @@ import useOperationTab from './useOperationTab';
 
 export default function useSearchModal() {
   const {
-    activeTab, basicType, workType,
-    showTable,
+    activeTab, workType,
     tableData, detailTableData,
-    curPage, detailCurPage,
-    detailBizId,
+    curPage,
     var1, var2,
     yearFilter,
     todayYear, todayMonth, todayDate,
@@ -25,12 +36,10 @@ export default function useSearchModal() {
     setIsLoading,
     setIsResetPage, setIsResetDetailPage,
     setIsResetSelection, setIsResetDetailSelection,
-    setDetailBizId,
-    resetFilters,
     getDateString
   } = useSearchModalStore();
   const { fetchBasicFilteredData } = useBasicTab();
-  const { OPERATION_TABLE_SIZE, handleOperationPageNation } = useOperationTab();
+  const { OPERATION_TABLE_SIZE } = useOperationTab();
   const { BIZ_TY_CD } = useStore();
 
   const TABS = [
@@ -39,25 +48,6 @@ export default function useSearchModal() {
     { val: "report", text: "하수도정비기본계획보고서" },
   ];
 
-  useEffect(() => {
-    resetFilters();
-  }, [activeTab, basicType, workType]);
-
-  // 페이지 변경 시마다 데이터 fetch
-  useEffect(() => {
-    setIsResetPage(false);
-    setIsResetDetailPage(true);
-    setDetailBizId(0);
-    console.log(`curPage: ${curPage}, showTable: ${showTable}`);
-    if (showTable && curPage > 1) fetchFilteredData();
-  }, [curPage]);
-
-  // 페이지 변경 시마다 데이터 fetch
-  useEffect(() => {
-    setIsResetDetailSelection(false);
-    if (showTable) handleOperationPageNation(Number(detailBizId));
-  }, [detailCurPage]);
-
   // 검색 API 호출 함수
   const fetchFilteredData = async () => {
     setIsLoading(true); // 로딩 시작
@@ -167,5 +157,5 @@ export default function useSearchModal() {
     }
   }
 
-  return { TABS, getDateString, handleSearch, viewMultipleFeature };
+  return { TABS, getDateString, handleSearch, viewMultipleFeature, fetchFilteredData };
 };

apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx

@@ -1,3 +1,15 @@
+/**
+ * ➡️ 경로 : 하수관망도 메인페이지 내 침수심 범례
+ * 
+ * 📄 WaterDepth Component
+ * 침수심 범례 컴포넌트
+ *
+ * - 침수심 레이어의 범례 표시 및 애니메이션 재생 제어
+ * - 진행률 바를 통한 애니메이션 상태 시각화
+ * - 플레이/일시정지 버튼을 통한 사용자 상호작용
+ * - 범례 항목별 색상과 레이블 표시
+ */
+
 "use client";
 
 import { Label } from "@common/components/ui/label";

apps/sn/app/(with-base-layout)/fileValidation.tsx

@@ -1,5 +1,13 @@
 /**
+ * 📄 File Validation Utility
  * 파일 확장자 검증 유틸리티
+ *
+ * - 파일 확장자 검증 함수 (단일 및 다중 파일 지원)
+ * - 검증 결과 타입 정의 및 에러 메시지 생성
+ * - 자주 사용되는 파일 확장자 상수 제공
+ * - 파일 업로드 전 검증 로직 구현
+ * - 사용자 친화적인 에러 메시지 출력
+ * - 다양한 파일 타입(INP, EXCEL, OFFICE 등) 지원
  */
 
 // 파일 확장자 검증 함수

apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx

@@ -1,3 +1,16 @@
+/**
+ * ➡️ 경로 : I/I 분석 모든 페이지
+ * 
+ * 📄 Base Layout
+ * 분석 페이지 기본 레이아웃 컴포넌트
+ *
+ * - 검색 및 필터링 UI 제공 (시도/시군구/하수처리시설 선택)
+ * - 날짜 범위 선택 기능
+ * - 파일 다운로드 및 삭제 버튼 지원
+ * - 분석 실행 버튼 및 확인 토스트 처리
+ * - 양식 파일 다운로드 링크 제공
+ * - 폼 제출 및 이벤트 핸들링
+ */
 'use client'
 import { DateMonthPicker, Form, SelectBox } from '@common/business_components/ui'
 import ListDiv from '@common/business_components/ui/list_div'

apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx

@@ -1,3 +1,21 @@
+/**
+ * ➡️ 경로 : /ii/fileupload
+ * 
+ * 📄 File Upload Page
+ * 파일 업로드 테스트 페이지 컴포넌트
+ *
+ * - 파일 선택 및 텍스트 입력 기능
+ * - JSON 데이터와 파일을 함께 서버에 업로드
+ * - 쿠키 기반 인증 토큰을 통한 사용자 조회
+ * - 두 가지 방식의 사용자 조회 API 호출 지원
+ * - Axios를 통한 파일 업로드 처리
+ * - 폼 제출 및 에러 핸들링
+ * 
+ * 🔗 사용 API
+ * - 사이트 정보 조회: POST /api/v1/inftwtAnls/users/{userId} (sewerage-service)
+ * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/rdiiAnls/savewithfile (sewerage-service)
+ * - 사용자 단 건 조회: GET /api/v1/users/{userUnqId} (user-service)
+ */
 'use client'
 
 // FileUpload.js

apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx

@@ -1,3 +1,20 @@
+/**
+ * ➡️ 경로 : I/I 분석 - 침입수 분석
+ * 
+ * 📄 IrSetting Page
+ * 침입수 분석 설정 페이지 컴포넌트
+ *
+ * - 오수관망도, 수용가-맨홀 매칭결과, 오수량 시간패턴 등 파일 업로드 기능
+ * - 오수전환율 및 분석 정보 입력 기능
+ * - 엑셀 파일 데이터 파싱 및 JSON 변환 처리
+ * - 분석 데이터 서버 제출 및 폼 초기화 기능
+ * - 파일 확장자 및 입력 값 검증 기능
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * 
+ * 🔗 사용 API
+ * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/inftwtAnls/savewithfile (sewerage-service)
+ * - 로그인된 사용자의 사용자 정보 조회: GET /api/v1/users/info/me (user-service)
+ */
 'use client'
 import { postMutiPart } from '@/components/lib/api'
 import FileUploadForm from '@/components/ui/fileUploadForm'
@@ -130,15 +147,12 @@ const IrSetting = () => {
       };
       return newData;
     });
-    console.log(`Page: File data received for form index ${index}`, { fileName: selectedFile?.name, cd, id });
   };
 
 
   const registFile = async (analysisData: any) => {
     setIsLoadingResult(true);
-    console.log("Submitting combined analysis data to backend:", analysisData);
     const data = await postMutiPart('v1/inftwtAnls/savewithfile', analysisData);
-    console.log("Response from backend:", data);
     if (data) {
       setIsLoadingResult(false);
       alert("분석 데이터가 성공적으로 제출되었습니다.");
@@ -151,7 +165,6 @@ const IrSetting = () => {
 
   // 침입수 분석 실행 버튼 클릭 핸들러 
   const handleAnalysisClick = async () => {
-    console.log('분석 시작');
     setIsLoadingResult(true); // 로딩 상태 시작
 
     // 기본 선택 항목들 검증 (환경청, 시도, 시군구, 하수처리장)
@@ -165,19 +178,12 @@ const IrSetting = () => {
       return;
     }
 
-    console.log(uploadedFilesData);
     const file1 = uploadedFilesData[0]; // 오수관망도
     const file2 = uploadedFilesData[1]; // 수용가-맨홀 매칭결과
     const file3 = uploadedFilesData[2]; // 오수량 시간패턴
     const file4 = uploadedFilesData[3]; // 유량자료
     const file5 = uploadedFilesData[4]; // 수용가 상수사용량
 
-    console.log("오수관망도 정보:", file1?.file);
-    console.log("수용가-맨홀 매칭결과 정보:", file2);
-    console.log("오수량 시간패턴 정보:", file3);
-    console.log("유량자료 정보:", file4);
-    console.log("수용가 상수사용량 정보:", file5);
-
     // 모든 필수 파일이 선택되었는지 확인 (UploadedFileInfo 객체와 그 안의 file 객체 모두 확인)
     // 유량자료는 선택값
     if (!file1?.file || !file2?.file || !file3?.file) {
@@ -327,8 +333,6 @@ const IrSetting = () => {
         tbSnRcptrInfo: rcptrInfoData, // 수용가 상수사용량 (없을 수 있음)
       };
 
-      console.log("통합 분석 데이터 (JSON):", jsonData);
-
       const jsonBlob = new Blob([JSON.stringify(jsonData)], {
         type: 'application/json'
       });

apps/sn/app/(with-base-layout)/ii/rdii/page.tsx

@@ -1,3 +1,21 @@
+/**
+ * ➡️ 경로 : I/I 분석 - RDII 분석
+ * 
+ * 📄 RDII Page
+ * RDII 분석 페이지 컴포넌트
+ *
+ * - 오수관망도, 수용가-맨홀 매칭결과, 강우자료 등 파일 업로드 기능
+ * - RTK계수 출처 및 RDII 기여면적 입력 기능
+ * - 단위도 계수 및 초기 차단 깊이 테이블 편집 기능
+ * - 엑셀 파일 데이터 파싱 및 JSON 변환 처리
+ * - 분석 데이터 서버 제출 및 폼 초기화 기능
+ * - 파일 확장자 및 입력 값 검증 기능
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * 
+ * 🔗 사용 API
+ * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/inftwtAnls/savewithfile (sewerage-service)
+ * - 로그인된 사용자의 사용자 정보 조회: GET /api/v1/users/info/me (user-service)
+ */
 "use client"
 
 import { postMutiPart } from '@/components/lib/api'
@@ -153,14 +171,11 @@ export default function RTKForm() {
       };
       return newData;
     });
-    console.log(`Page: File data received for form index ${index}`, { fileName: selectedFile?.name, cd, id });
   };
 
   const registFile = async (analysisData: any) => {
     setIsLoadingResult(true);
-    console.log("Submitting combined analysis data to backend", analysisData);
     const data = await postMutiPart('v1/rdiiAnls/savewithfile', analysisData);
-    console.log("Response from backend:", data);
     if (data) {
       setIsLoadingResult(false);
       alert("분석 데이터가 성공적으로 제출되었습니다.");
@@ -187,15 +202,10 @@ export default function RTKForm() {
     }
 
     const formData = form.getValues();
-    console.log('uploadedFilesData', uploadedFilesData);
     const file1 = uploadedFilesData[0]; // 오수관망도
     const file2 = uploadedFilesData[1]; // 수용가-맨홀 매칭결과
     const file3 = uploadedFilesData[2]; // 강우자료
 
-    console.log("오수관망도 정보:", file1?.file);
-    console.log("수용가-맨홀 매칭결과 정보:", file2);
-    console.log("강우자료:", file3);
-
     // 모든 필수 파일이 선택되었는지 확인
     if (!file1?.file || !file2?.file || !file3?.file) {
       setIsLoadingResult(false);
@@ -351,8 +361,6 @@ export default function RTKForm() {
         tbSnRainData: rainData, // 강우자료
       };
 
-      console.log("통합 분석 데이터 (JSON):", jsonData);
-
       const jsonBlob = new Blob([JSON.stringify(jsonData)], {
         type: 'application/json'
       });

apps/sn/app/(with-base-layout)/ii/rdiiResult/page.tsx

@@ -1,3 +1,22 @@
+/**
+ * ➡️ 경로 : I/I 분석 - RDII 분석결과
+ * 
+ * 📄 RDII Result Page
+ * RDII 분석 결과 페이지 컴포넌트
+ *
+ * - RDII 분석 결과 조회 및 테이블 표시
+ * - 페이징 및 검색 기능 (시도/시군구/하수처리시설/기간 기반)
+ * - 분석 결과 선택 및 엑셀 다운로드 기능
+ * - 분석 결과 파일 삭제 기능
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * - Zustand를 통한 상태 관리 및 데이터 포맷팅
+ * 
+ * 🔗 사용 API
+ * - RDII분석 목록 조회: GET /api/v1/rdiiAnls (sewerage-service)
+ * - RDII분석결과관로 목록 조회: GET /api/v1/rdiiAnlsRslt/ppl/{rainInfwtAnlsSn} (sewerage-service)
+ * - RDII분석결과 삭제: DELETE /api/v1/rdiiAnlsRslt/{rainInfwtAnlsSn} (sewerage-service)
+ * - RDII분석 삭제: DELETE /api/v1/rdiiAnls/{rainInfwtAnlsSn} (sewerage-service)
+ */
 'use client'
 import { deleteData, getData, useCookieAuth } from '@/components/lib/api'
 import { UiTable, downloadExcelWithKoreanHeaders } from '@common/business_components/ui'
@@ -8,7 +27,7 @@ import { z } from 'zod'
 import BaseLayout from '../BaseLayout'
 import { handleDelete } from '@/components/lib/utils'
 import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
-import useStore from '../../../store/useStore';
+import useStore from '@/store/useStore';
 
 
 const formSchema = z.object({
@@ -107,7 +126,6 @@ const Result = () => {
     setResetSelection(true);
 
     const formValues = form.getValues(); // react-hook-form에서 현재 값 가져오기
-    console.log("formValues", formValues);
 
     const inftwtAnlsSearchDto = {
       aplcnYmFrom: formValues.aplcnYmFrom?.trim() ? formValues.aplcnYmFrom : null,
@@ -118,8 +136,6 @@ const Result = () => {
       auth: AUTH,
     };
 
-    console.log("Search DTO:", inftwtAnlsSearchDto);
-
     const queryParams = new URLSearchParams({
       page: `${curPage - 1}`,
       size: '10',
@@ -132,7 +148,6 @@ const Result = () => {
     });
     const queryString = queryParams.toString();
 
-    console.log("API: ", `v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
     try {
       const data = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
 
@@ -158,8 +173,6 @@ const Result = () => {
 
       setTableData(dataWithRowNumber);
       setTotalData(dataWithRowNumber.length);
-      console.log("response:", data);
-      console.log("response data:", dataWithRowNumber);
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
@@ -176,14 +189,12 @@ const Result = () => {
   const handleCellClick = (index: number | undefined, headId: string) => {
     if (index !== undefined && tableData[index]) {
       setSelectedRowData(tableData[index]);
-      console.log("Selected row data:", tableData[index]);
     }
   };
 
   // Excel 다운로드 핸들러 추가
   const handleExcelDownload = async () => {
     setIsLoadingResult(true);
-    console.log("Selected row data for download:", selectedRowData);
     if (!selectedRowData || selectedRowData.rainInfwtAnlsSn === undefined) {
       setIsLoadingResult(false);
       alert('다운로드할 데이터를 선택해주세요.');
@@ -225,7 +236,6 @@ const Result = () => {
   // 파일 삭제 핸들러 추가
   const handleFileDelete = async () => {
     setIsLoadingResult(true);
-    console.log("Selected row data for deletion:", selectedRowData);
     if (!selectedRowData || selectedRowData.rainInfwtAnlsSn === undefined) {
       alert('삭제할 파일을 선택해주세요.');
       return;
@@ -238,16 +248,14 @@ const Result = () => {
 
     try {
       // 삭제 API 호출
-      const response1 = await deleteData(`v1/rdiiAnlsRslt/${selectedRowData.rainInfwtAnlsSn}`);
-      const response2 = await deleteData(`v1/rdiiAnls/${selectedRowData.rainInfwtAnlsSn}`);
+      await deleteData(`v1/rdiiAnlsRslt/${selectedRowData.rainInfwtAnlsSn}`);
+      await deleteData(`v1/rdiiAnls/${selectedRowData.rainInfwtAnlsSn}`);
       // 첨부파일(inp파일) 삭제 API 호출
       handleDelete(selectedRowData.atflCd, {
         handleDeleteStart: () => console.log("파일 삭제 시작"),
         handleDeleteSuccess: (response) => console.log("파일 삭제 성공:", response),
         handleDeleteError: (error) => console.error("파일 삭제 실패:", error),
       });
-      console.log("File delete response1:", response1);
-      console.log("File delete response2:", response2);
 
       // 테이블 선택 상태 초기화 트리거
       setResetSelection(true);

apps/sn/app/(with-base-layout)/ii/result/page.tsx

@@ -1,3 +1,22 @@
+/**
+ * ➡️ 경로 : I/I 분석 - 침입수 분석결과
+ * 
+ * 📄 Result Page
+ * 침입수 분석 결과 페이지 컴포넌트
+ *
+ * - 침입수 분석 결과 조회 및 테이블 표시
+ * - 페이징 및 검색 기능 (시도/시군구/하수처리시설/기간 기반)
+ * - 분석 결과 선택 및 엑셀 다운로드 기능
+ * - 분석 결과 파일 삭제 기능
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * - Zustand를 통한 상태 관리 및 데이터 포맷팅
+ * 
+ * 🔗 사용 API
+ * - 침입수분석 목록 조회: GET /api/v1/inftwtAnls (sewerage-service)
+ * - 침입수분석결과관로 목록 조회: GET /api/v1/inftwtAnlsRslt/ppl/{inftwtAnlsSn} (sewerage-service)
+ * - 침입수분석결과 삭제: DELETE /api/v1/inftwtAnlsRslt/{inftwtAnlsSn} (sewerage-service)
+ * - 침입수분석 삭제: DELETE /api/v1/inftwtAnls/{inftwtAnlsSn} (sewerage-service)
+ */
 'use client'
 import { deleteData, getData, useCookieAuth } from '@/components/lib/api'
 import { UiTable, downloadExcelWithKoreanHeaders } from '@common/business_components/ui'
@@ -101,7 +120,6 @@ const Result = () => {
     setIsLoadingResult(true);
     setResetSelection(true);
     const formValues = form.getValues(); // react-hook-form에서 현재 값 가져오기
-    console.log("formValues", formValues);
 
     let inftwtAnlsSearchDto = {
       "aplcnYmFrom": formValues.aplcnYmFrom && formValues.aplcnYmFrom !== '' ? formValues.aplcnYmFrom : null,
@@ -112,8 +130,6 @@ const Result = () => {
       "auth": AUTH,
     };
 
-    console.log("Search DTO:", inftwtAnlsSearchDto);
-
     const queryParams = new URLSearchParams({
       page: `${curPage - 1}`,
       size: '10',
@@ -125,11 +141,8 @@ const Result = () => {
       }
     });
     const queryString = queryParams.toString();
-
-    console.log("API: ", `v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
     try {
       const data = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
-      console.log("API response:", data);
 
       // 🎯 각 아이템을 개별적으로 포맷팅하면서 일련번호 추가
       const dataWithRowNumber = (data.content || []).map((item: any, index: number) => {
@@ -153,8 +166,6 @@ const Result = () => {
 
       setTableData(dataWithRowNumber);
       setTotalData(data?.totalElements || 0); // totalElements가 없을 경우 0으로 설정
-      console.log("response:", data);
-      console.log("response data:", dataWithRowNumber);
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
@@ -171,14 +182,12 @@ const Result = () => {
   const handleCellClick = (index: number | undefined, headId: string) => {
     if (index !== undefined && tableData[index]) {
       setSelectedRowData(tableData[index]);
-      console.log("Selected row data:", tableData[index]);
     }
   };
 
   // Excel 다운로드 핸들러 추가
   const handleExcelDownload = async () => {
     setIsLoadingResult(true);
-    console.log("Selected row data for download:", selectedRowData);
     if (!selectedRowData || selectedRowData.inftwtAnlsSn === undefined) {
       setIsLoadingResult(false);
       alert('다운로드할 데이터를 선택해주세요.');
@@ -220,7 +229,6 @@ const Result = () => {
   // 파일 삭제 핸들러 추가
   const handleFileDelete = async () => {
     setIsLoadingResult(true);
-    console.log("Selected row data for deletion:", selectedRowData);
     if (!selectedRowData || selectedRowData.inftwtAnlsSn === undefined) {
       setIsLoadingResult(false);
       alert('삭제할 파일을 선택해주세요.');
@@ -234,17 +242,14 @@ const Result = () => {
 
     try {
       // // 삭제 API 호출
-      console.log("Deleting analysis result with inftwtAnlsSn:", selectedRowData.inftwtAnlsSn);
-      const response1 = await deleteData(`v1/inftwtAnlsRslt/${selectedRowData.inftwtAnlsSn}`);
-      const response2 = await deleteData(`v1/inftwtAnls/${selectedRowData.inftwtAnlsSn}`);
+      await deleteData(`v1/inftwtAnlsRslt/${selectedRowData.inftwtAnlsSn}`);
+      await deleteData(`v1/inftwtAnls/${selectedRowData.inftwtAnlsSn}`);
       // 첨부파일(inp파일) 삭제 API 호출
       handleDelete(selectedRowData.atflCd, {
         handleDeleteStart: () => console.log("파일 삭제 시작"),
         handleDeleteSuccess: (response) => console.log("파일 삭제 성공:", response),
         handleDeleteError: (error) => console.error("파일 삭제 실패:", error),
       });
-      console.log("File delete response1:", response1);
-      console.log("File delete response2:", response2);
 
       // 테이블 선택 상태 초기화 트리거
       setResetSelection(true);

apps/sn/app/(with-base-layout)/layout.tsx

@@ -1,3 +1,16 @@
+/**
+ * ➡️ 경로 : I/I분석, 운영정보 모든 페이지
+ * 
+ * 📄 With Base Layout
+ * Next.js App Router (app/) 기반 분석 페이지 기본 레이아웃 컴포넌트
+ *
+ * - 메뉴 클릭 이벤트 처리 및 라우팅
+ * - 현재 메뉴 정보 Zustand를 통한 상태 관리
+ * - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
+ * - BaseLayout을 통한 공통 레이아웃 적용
+ * - QueryClient를 통한 데이터 캐싱 및 관리
+ * - 경로 변경 시 메뉴 정보 동기화
+ */
 "use client";
 
 import React, { useEffect} from 'react';

apps/sn/app/(with-base-layout)/oper/floodPre/headMakeFloodPre.tsx

@@ -1,3 +1,13 @@
+/**
+ * 📄 HeadMakeFloodPre Component
+ * 침수예방 테이블 헤더 생성 컴포넌트
+ *
+ * - 테이블 상단 헤더 생성 및 렌더링
+ * - 하위 헤더 목록 기반 동적 헤더 구성
+ * - rowspan 및 colspan을 통한 테이블 구조 조정
+ * - 가시성 필터링 및 조건부 렌더링 지원
+ * - 상위 헤더와 하위 헤더의 계층적 표시
+ */
 import { TableHead, TableRow } from "@common/components/ui";
 
 

apps/sn/app/(with-base-layout)/oper/floodPre/inputTableBody.tsx

@@ -1,3 +1,14 @@
+/**
+ * 📄 InputTableBody Component
+ * 침수예방 입력 테이블 바디 컴포넌트
+ *
+ * - 숫자 입력 및 콤마 포맷팅 기능
+ * - mergeCell을 통한 셀 병합 처리
+ * - 편집 가능/불가능 상태 관리
+ * - 소계/총합계 행 스타일링 및 표시
+ * - 입력 값 검증 및 변경 핸들링
+ * - 빈 데이터 상태 처리
+ */
 import type { TableUpperProps } from "./headMakeFloodPre";
 import { Input, TableCell, TableRow } from "@common/components/ui";
 
@@ -81,7 +92,6 @@ export const InputTableBody = (
         return (
           <TableRow key={dataIndex + "row"}>
             {headList.map((head, headIndex) => {
-              // console.log('head, head.id', head, head.id);
               const isTextColumn = head.id === "__EMPTY_3";
               const textAlignClass = isTextColumn
                 ? "text-center"

apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx

@@ -1,3 +1,21 @@
+/**
+ * ➡️ 경로 : 운영정보 - 도시침수예방사업
+ * 
+ * 📄 FloodPre Page
+ * 침수예방 사업 정보 등록 및 조회 페이지 컴포넌트
+ *
+ * - 사업 정보 등록 현황 조회 및 테이블 표시
+ * - 페이징 및 검색 기능 (등록기간/등록자/파일명 기반)
+ * - 파일 업로드 및 등록 기능
+ * - 파일 다운로드 및 삭제 기능
+ * - 엑셀 데이터 테이블 모달 표시
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * 
+ * 🔗 사용 API
+ * - 도시침수예방사업 목록 조회: GET /api/v1/sbmrgPrevnt (sewerage-service)
+ * - 도시침수예방사업 등록: POST /api/v1/sbmrgPrevnt (sewerage-service)
+ * - 첨부파일 삭제및 Soft Delete 삭제: DELETE /api/v1/atfl/attachments/{atflId} (attach-service)
+ */
 'use client'
 import { deleteData, postData, useCookieAuth } from '@/components/lib/api'
 import { searchData } from '@/components/lib/common/apiHelpers'
@@ -133,7 +151,6 @@ const Page = () => {
       sbmrgPrevntBizNm: fileName,
       rgtr: tokenManager.getToken(AUTH_USER_ID) || null
     }
-    console.log('request DTO', json);
     const data = await postData('v1/sbmrgPrevnt', json)
     if (data) {
       alert('파일이 등록되었습니다.');

apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx

@@ -1,11 +1,25 @@
+/**
+ * 📄 Table Modal
+ * 침수예방 엑셀 데이터 테이블 모달 컴포넌트
+ *
+ * - 엑셀 파일 다운로드 및 특정 시트 파싱 기능
+ * - 탭 기반 테이블 표시 (관리SHEET, 운영관리현황 점검결과)
+ * - 데이터 필터링 및 빈 행 제거 처리
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * - XLSX 라이브러리를 통한 엑셀 데이터 변환
+ * - 테이블 헤더 및 데이터 동적 생성
+ * 
+ * 🔗 사용 API
+ * - 첨부파일 다운로드(파일ID): GET /attach-service/api/v1/download/{atflId} (attach-service)
+ */
 'use client'
 import { useState, useEffect } from 'react'
 import LoadingOverlay from '@/components/ui/LoadingBar'
 import { UITab, UiTable } from '@common/business_components/ui'
-import { Table, TableBody, TableHeader } from "@common/components/ui";
 import * as XLSX from 'xlsx';
-import { HeadMakeFloodPre } from './headMakeFloodPre';
-import { InputTableBody } from './inputTableBody';
+// import { Table, TableBody, TableHeader } from "@common/components/ui";
+// import { HeadMakeFloodPre } from './headMakeFloodPre';
+// import { InputTableBody } from './inputTableBody';
 
 const TABS = [
   { val: "management", text: "관리SHEET" },
@@ -71,15 +85,12 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
         }));
 
       setManagementTableHeader(filteredManagementHeader);
-      console.log('managementTableHeader', filteredManagementHeader);
 
       const managementData = Array.isArray(jsonDataBySheet['관리SHEET'])
         ? jsonDataBySheet['관리SHEET'].slice(8)
         : [];
-      // console.log('변환 후:', excelToManagementData(managementData));
       const filteredManagementData = filterEmptyRows(managementData);
       setManagementTableData(filteredManagementData);
-      console.log('managementTableData', filteredManagementData);
 
       // 운영관리현황 점검결과
       const resultHeader = jsonDataBySheet['운영관리현황 점검결과']?.[2] || [];
@@ -96,14 +107,12 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
         mergeCell: false
       });
       setResultTableHeader(dynamicResultHeader);
-      console.log('resultTableHeader', dynamicResultHeader);
 
       const resultData = Array.isArray(jsonDataBySheet['운영관리현황 점검결과'])
         ? jsonDataBySheet['운영관리현황 점검결과'].slice(3)
         : [];
       const filteredResultData = filterEmptyRows(resultData);
       setResultTableData(filteredResultData);
-      console.log('resultTableData', filteredResultData);
     } catch (error) {
       console.error('파일 처리 중 오류 발생:', error);
       alert('파일 처리 중 오류가 발생했습니다.');
@@ -174,7 +183,6 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
           if (sheetName) {
             const sheet = wb.Sheets[sheetName];
             if (sheet) {
-              console.log(`Found sheet: "${sheetName}"`);
               const jsonData = XLSX.utils.sheet_to_json(sheet, { range: headerNum, raw: false });
               result[targetSheetName] = jsonData;
             }

apps/sn/app/(with-base-layout)/oper/index.ts

@@ -1,3 +1,14 @@
+/**
+ * 📄 Oper Index Configuration
+ * 운영 관련 테이블 헤더 설정 파일
+ *
+ * - 침수예방 및 노후 하수관로 테이블 헤더 정의
+ * - 일련번호, 파일명, 년도, 분기, 등록 일자, 등록자 필드 포함
+ * - 테이블 컴포넌트에서 재사용 가능한 헤더 구조 제공
+ * - 데이터 표시 및 정렬을 위한 표준화된 헤더 포맷
+ * - 운영 관리 페이지에서 공통으로 사용되는 헤더 리스트
+ * - 동적 테이블 렌더링을 위한 ID와 타이틀 매핑
+ */
 export const tableHeadlist = [
   { id: 'rowNumber', title: '일련번호' },
   { id: 'sbmrgPrevntBizNm', title: '파일명' },

apps/sn/app/(with-base-layout)/oper/oldPp/headList.ts

@@ -1,3 +1,14 @@
+/**
+ * 📄 HeadList Configuration
+ * 오래된 하수관로 테이블 헤더 및 노드 설정 파일
+ *
+ * - 테이블 헤더 및 노드 구조 정의 (oldPpTable2, oldPpTable6)
+ * - Zod 스키마를 통한 타입 검증 및 안전성 보장
+ * - rowspan 및 colspan을 통한 복잡한 테이블 구조 지원
+ * - 가시성 및 계층적 헤더 구성 (상위/하위 헤더)
+ * - 연도별 사업비 및 물량 데이터 헤더 관리
+ * - 검토자 및 사업 정보 필드 포함
+ */
 import { z } from "zod";
 
 export const oldPpHeadListType = z.array(

apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx

@@ -1,3 +1,21 @@
+/**
+ * ➡️ 경로 : 운영정보 - 노후 하수관로 정비사업
+ * 
+ * 📄 OldPp Page
+ * 노후 하수관로 정비사업 추진현황 페이지 컴포넌트
+ *
+ * - 사업 정보 등록 현황 조회 및 테이블 표시
+ * - 페이징 및 검색 기능 (등록기간/등록자/파일명 기반)
+ * - 파일 업로드 및 등록 기능
+ * - 파일 다운로드 및 삭제 기능
+ * - 엑셀 데이터 테이블 모달 표시
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * 
+ * 🔗 사용 API
+ * - 노후관로정비사업 목록 조회: GET /api/v1/dcrpPpl (sewerage-service)
+ * - 노후관로정비사업 목록 등록: POST /api/v1/dcrpPpl (sewerage-service)
+ * - 첨부파일 삭제및 Soft Delete 삭제: DELETE /api/v1/atfl/attachments/{atflId} (attach-service)
+ */
 'use client'
 import { deleteData, postData, useCookieAuth } from '@/components/lib/api'
 import { searchData } from '@/components/lib/common/apiHelpers'

apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx

@@ -1,3 +1,17 @@
+/**
+ * 📄 Table Modal
+ * 노후 하수관로 엑셀 데이터 테이블 모달 컴포넌트
+ *
+ * - 엑셀 파일 다운로드 및 특정 시트 파싱 기능
+ * - 탭 기반 테이블 표시 (row data, 정밀조사, 정비사업 등)
+ * - 데이터 필터링 및 빈 행 제거 처리
+ * - 로딩 오버레이 및 에러 핸들링 지원
+ * - XLSX 라이브러리를 통한 엑셀 데이터 변환
+ * - 테이블 헤더 및 데이터 동적 생성
+ * 
+ * 🔗 사용 API
+ * - 첨부파일 다운로드(파일ID): GET /attach-service/api/v1/download/{atflId} (attach-service)
+ */
 'use client'
 import { useState, useEffect } from 'react'
 import LoadingOverlay from '@/components/ui/LoadingBar'

apps/sn/app/(with-base-layout)/selectionValidation.tsx

@@ -1,7 +1,14 @@
 /**
+ * 📄 Selection Validation Utility
  * 선택 항목 검증 유틸리티
+ *
+ * - 선택 항목 검증 함수 (단일 및 다중 선택 지원)
+ * - 검증 결과 타입 정의 및 에러 메시지 생성
+ * - 자주 사용되는 선택 항목 상수 제공
+ * - 선택 항목 검증 전 로직 구현
+ * - 사용자 친화적인 에러 메시지 출력
+ * - 다양한 선택 타입 지원 (환경청, 시도, 시군구 등)
  */
-
 export interface ApiSelectOption {
   text: string;
   val: string;

apps/sn/app/api/proxy/[...url]/route.ts

@@ -1,3 +1,14 @@
+/**
+ * 📄 Proxy Route
+ * API 프록시 라우트
+ *
+ * - 서버 API로의 요청 프록시 처리
+ * - 쿠키 기반 인증 토큰 및 리프레시 토큰 관리
+ * - POST 및 PUT 요청 핸들링
+ * - 사용자 인증 정보 검증 및 응답 처리
+ * - 에러 핸들링 및 상태 코드 반환
+ * - 사이트 ID 및 헤더 설정
+ */
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 

apps/sn/app/components/lib/api/attachment/attachment-interface.tsx

@@ -1,3 +1,14 @@
+/**
+ * 📄 Attachment Interface
+ * 첨부 파일 관련 인터페이스 정의 파일
+ *
+ * - 첨부 파일 목록 및 상세 정보 타입 정의
+ * - 페이지네이션 및 정렬 설정 인터페이스 제공
+ * - 첨부 파일 검색 및 필터링 파라미터 타입 지정
+ * - 첨부 파일 서비스 메소드 인터페이스 정의
+ * - Axios 응답 타입을 활용한 타입 안전성 보장
+ * - 첨부 파일 CRUD 작업을 위한 표준화된 타입 구조
+ */
 import type { AxiosResponse } from "axios";
 
 interface SortConfig {

apps/sn/app/components/lib/api/attachment/attachment-service.tsx

@@ -1,3 +1,18 @@
+/**
+ * 📄 Attachment Service
+ * 첨부 파일 서비스 클래스
+ *
+ * - 첨부 파일 목록 조회 및 페이지네이션 지원
+ * - 첨부 파일 상세 정보 조회 기능
+ * - 첨부 파일 삭제 기능
+ * - Axios 기반 HTTP 요청 처리
+ * - 타입 안전성 보장을 위한 인터페이스 활용
+ * - 첨부 파일 CRUD 작업을 위한 표준화된 서비스 메소드
+ * 
+ * 🔗 사용 API
+ * - 첨부 파일 조회: GET /attach-service/api/v1/atfl/attachments (attach-service)
+ * - 첨부 파일 삭제: DELETE /attach-service/api/v1/atfl/attachments/atflCd (attach-service)
+ */
 import type { AxiosResponse } from "axios";
 import type {
   Attachment,

apps/sn/app/components/lib/api/index.ts

@@ -1,3 +1,14 @@
+/**
+ * 📄 API Utility
+ * API 호출 유틸리티 파일
+ *
+ * - 다양한 HTTP 메소드의 API 호출 함수 (GET, POST, PUT, DELETE)
+ * - 쿠키 기반 인증 토큰 관리 및 사용자 조회
+ * - 특정 서비스 (DC, CMS, GeoServer) 호출 지원
+ * - Axios 및 Fetch 기반 HTTP 요청 처리
+ * - 타입 안전성 보장을 위한 인터페이스 활용
+ * - 에러 핸들링 및 응답 처리 표준화
+ */
 import { useEffect, useState } from "react";
 import axios from 'axios';
 

apps/sn/app/components/lib/common/apiHelpers.ts

@@ -1,3 +1,17 @@
+/**
+ * 📄 API Helpers
+ * 공통 코드 cs-service API 호출 유틸리티
+ *
+ * - 검색 데이터 조회 및 파라미터 처리
+ * - 상위 코드로 하위 코드 조회 기능
+ * - URL 파라미터 생성 및 필터링
+ * - 데이터 페이징 및 총 개수 반환
+ * - Axios 기반 HTTP 요청 처리
+ * - 타입 안전성 보장을 위한 제네릭 활용
+ * 
+ * 🔗 사용 API
+ * - 하위코드페이지 캐시 목록 조회: GET /api/v1/code/cache/{upCd} (cms-service)
+ */
 import { getData } from "../api";
 
 export const searchData = async<T extends Record<string, any>>(url: string, paramObj: T) => {

apps/sn/app/components/lib/utils/date.ts

@@ -1,3 +1,14 @@
+/**
+ * 📄 Date Utility
+ * 날짜 관련 유틸리티 파일
+ *
+ * - 날짜 포맷팅 및 유효성 검사 함수
+ * - 년도 및 분기 옵션 생성 기능
+ * - 날짜 문자열 변환 및 포맷팅
+ * - SelectBox 옵션으로의 날짜 변환
+ * - 8자리 또는 6자리 날짜 형식 지원
+ * - Date 객체 기반 날짜 조작 및 검증
+ */
 export const formatDate = (date: Date): string => {
   if (!date) return '';
   const year = date.getFullYear();

apps/sn/app/components/lib/utils/excelToJson.ts

@@ -1,3 +1,14 @@
+/**
+ * 📄 Excel to JSON Utility
+ * 엑셀 데이터 JSON 변환 유틸리티
+ *
+ * - 엑셀 파일 데이터 파싱 및 JSON 변환 기능
+ * - 날짜 및 시간 포맷팅 및 유효성 검사
+ * - Zod 스키마를 통한 데이터 타입 검증 및 안전성 보장
+ * - 수용가-맨홀 매칭결과, 시간패턴, 유량자료 등 데이터 변환
+ * - 강우자료 및 수용가 물사용량 데이터 처리
+ * - 다양한 날짜 형식(M/D/YYYY, YYYY-MM-DD 등) 지원
+ */
 export const TEST_UUID = '2d4b151d-1828-41e0-91d9-4cd28ea1cc7e'
 import { z } from "zod";