diff --git a/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx b/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
index fd8e2a6d6..53a7a31f3 100644
--- a/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
+++ b/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
@@ -31,7 +31,6 @@ import { useCallback, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import { shallow } from "zustand/shallow";
 
-//-----------------------
 export default function Page() {
   const {
     code,
@@ -43,7 +42,6 @@ export default function Page() {
     rainChkExcelDownload,
     rainChkHeadChange,
     isRainSttn,
-
     rswtChkgdnInit,
     rswtChkPolInit,
     rswtChkDetilsUpdate,
@@ -61,7 +59,7 @@ export default function Page() {
     rswtrChkDetailsZodType[]
   >([]);
   const [deleteIdx, setDeleteIdx] = useState<number[]>([]);
-
+  const [pageNation, setPageNation] = useState(1);
   const [selFcltDiv, setSelFcltDiv] = useState("RNB");
   const [isModal, setIsModal] = useState({
     open: false,
@@ -70,9 +68,9 @@ export default function Page() {
   const cellClick = () => {
     if (searchYear)
       if (selFcltDiv === "RNB") {
-        rainChkInit(searchYear, "0");
+        rainChkInit("1", "20", searchYear, "0");
       } else {
-        rswtChkgdnInit(searchYear, "0");
+        rswtChkgdnInit("1", "20", searchYear, "0");
       }
   };
 
@@ -82,14 +80,14 @@ export default function Page() {
 
   useEffect(() => {
     if (!rainChkgdn.isInit) {
-      rainChkInit(new Date().getFullYear().toString(), "0");
+      rainChkInit("1", "20", new Date().getFullYear().toString(), "0");
       isRainSttn(false);
       setIsModal({ data: {}, open: false });
       setIsRegExcel(false);
     }
 
     if (!rswtChkgdn.isInit) {
-      rswtChkgdnInit(new Date().getFullYear().toString(), "0");
+      rswtChkgdnInit("1", "20", new Date().getFullYear().toString(), "0");
       setIsModal({ data: {}, open: false });
       setIsRegExcel(false);
     }
@@ -179,9 +177,11 @@ export default function Page() {
                   selectClass={""}
                   selectArray={yearOptions}
                   value={searchYear}
-                  onSelectValue={(val: string | number) =>
+                  onSelectValue={(val: string | number) => {
                     setSearchYear(String(val))
                   }
+
+                  }
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
@@ -255,6 +255,8 @@ export default function Page() {
                 detailUp={setUpdateRainDetail}
                 handleClick={handleClick}
                 rainChkData={rainChkgdn.rainChk}
+                pageNation={pageNation}
+                onPageChange={setPageNation}
               />
             ) : (
               <RswtChkgdTable
@@ -262,6 +264,8 @@ export default function Page() {
                 deleteRswtData={setDeleteIdx}
                 handleRswtClick={handleClick}
                 rswtChkData={rswtChkgdn.rswtChkRes}
+                pageNation={pageNation}
+                onPageChange={setPageNation}
               />
             )}
           </ListDiv>
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
index d8057cad6..d7335e129 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
@@ -134,7 +134,7 @@ export const rainChkgdnHeadListExport: TableUpperProps[] = [
   { id: "dtfcltCpct", title: "빗물저류조용량(m³)", mergeCell: true },
   { id: "chckYmd", title: "점검일", mergeCell: true },
   { id: "utztnUsgCd", title: "이용용도" },
-  { id: "totalSplyUswtrUtztnQnt", title: "연간보급수이용량(m³)" },
+  { id: "totalSplyUswtrUtztnQnt", title: "연간대체수이용량(m³)" },
   { id: "totalRuseFcltUtztnQnt", title: "연간빗물이용량(m³)" },
   {
     id: "ph",
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
index 3bd10169f..4af27a51c 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
@@ -52,7 +52,7 @@ export type rainChkgdnState = {
 };
 
 type rainChkgdnActions = {
-  rainChkInit: (sggCd: string, searchTxt: string) => void;
+  rainChkInit: (pageNo: string, cnt: string, sggCd: string, searchTxt: string) => void;
   rainChkDetilUpdate(rainChk: rainChkZodType[]): Promise<void>;
   rainChkGuidUpdate(rainChk: rainChkZodType): Promise<void>;
   rainChkExcelDownload(
@@ -98,11 +98,11 @@ const makeMdfrChk = (data: rainChkZodType[], type: string, toDo: string) => {
   return chData;
 };
 
-const initFetch = async (txt: string | undefined, sgg: string | undefined) => {
+const initFetch = async (pageNo: string, cnt: string, txt: string | undefined, sgg: string | undefined) => {
   const currentYear = new Date().getFullYear().toString();
   const rainRes = await getFetch(
     "wr",
-    `/reuseChk/rainy` + (txt ? `/${txt}` : currentYear) + (sgg ? `/${sgg}` : "/0")
+    `/reuseChk/rainy` + (pageNo ? `/${pageNo}` : "/1") + (cnt ? `/${cnt}` : "/20") + (txt ? `/${txt}` : `/${currentYear}`) + (sgg ? `/${sgg}` : "/0")
   );
   return rainRes;
 };
@@ -140,7 +140,7 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
           });
         }
         const currentYear = new Date().getFullYear().toString();
-        const rainChkRes = await initFetch(currentYear, "0");
+        const rainChkRes = await initFetch("1", "20", currentYear, "0");
         return set((state: rainChkgdnState) => ({
           ...state,
           rainChkgdn: {
@@ -156,9 +156,9 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
         });
       }
     },
-    rainChkInit: async (searchTxt: string, sggCd: string) => {
+    rainChkInit: async (pageNo: string, cnt: string, searchTxt: string, sggCd: string) => {
       try {
-        const rainChkRes = await initFetch(searchTxt, sggCd);
+        const rainChkRes = await initFetch(pageNo, cnt, searchTxt, sggCd);
 
         return set((state: rainChkgdnState) => ({
           ...state,
diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
index 1cc7bd766..acc6ccaba 100644
--- a/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
+++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
@@ -3,7 +3,7 @@ import {
 } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type {
   SelectDataType,
-   SheetParameter,
+  SheetParameter,
 } from "@common/business_components";
 import {
   deleteFectch,
@@ -41,12 +41,12 @@ export type rswtChkgdnState = {
     rswtChkRes: rswtChkZodType[];
     rswtChkPolGuide: rswtChkZodType[];
     isInit: boolean;
-    isSttn:boolean
+    isSttn: boolean
   };
 };
 
 type rswtChkgdnActions = {
-  rswtChkgdnInit: (year: string, sggCd: string) => void;
+  rswtChkgdnInit: (pageNo: string, cnt: string, year: string, sggCd: string) => void;
   rswtrChkExcelDownload(
     sidoCode: SelectDataType[],
     sggCode: SelectDataType[]
@@ -57,7 +57,7 @@ type rswtChkgdnActions = {
   rswtChkPolAndGuide: (chkGdnPk: number) => void;
   rswtChkPolInit: () => void;
   rwstPolAndGuideUpdate: (rswtChk: rswtChkZodType[]) => void;
-  rswtChkHeadChange:  (rswtChkgdn: rswtChkgdnState, isEdit: boolean) => void;
+  rswtChkHeadChange: (rswtChkgdn: rswtChkgdnState, isEdit: boolean) => void;
 };
 
 export type rswtChkgdnType = rswtChkgdnState & rswtChkgdnActions;
@@ -75,17 +75,19 @@ export const rswtChkgdnStateExport: rswtChkgdnState = {
     rswtChkRes: [],
     rswtChkPolGuide: [],
     isInit: false,
-    isSttn:false,
+    isSttn: false,
   },
 };
 
-const initFetch = async (year: string | undefined, sgg: string | undefined) => {
+const initFetch = async (pageNo: string, cnt: string, year: string | undefined, sgg: string | undefined) => {
   const currentYear = new Date().getFullYear().toString();
   const rswtChkRes = await getFetch(
     "wr",
-    `/reuseChk/reuseWater/` +
-      (year ? `${year}` : currentYear) +
-      (sgg ? `/${sgg}` : "/0")
+    `/reuseChk/reuseWater` +
+    (pageNo ? `/${pageNo}` : "/1") +
+    (cnt ? `/${cnt}` : "/20") +
+    (year ? `/${year}` : `/${currentYear}`) +
+    (sgg ? `/${sgg}` : "/0")
   );
   return rswtChkRes;
 };
@@ -137,9 +139,9 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
         },
       }));
     },
-    rswtChkgdnInit: async (year: string, sggCd: string) => {
+    rswtChkgdnInit: async (pageNo: string, cnt: string, year: string, sggCd: string) => {
       try {
-        const rswtChkRes = await initFetch(year, sggCd);
+        const rswtChkRes = await initFetch(pageNo, cnt, year, sggCd);
 
         return set((state: rswtChkgdnState) => ({
           ...state,
@@ -163,7 +165,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
           });
         }
         const currentYear = new Date().getFullYear().toString();
-        const rswtChkRes = await initFetch(currentYear, "0");
+        const rswtChkRes = await initFetch("1", "20", currentYear, "0");
         return set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
@@ -188,7 +190,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
           });
         }
         const currentYear = new Date().getFullYear().toString();
-        const rswtChkRes = await initFetch(currentYear, "0");
+        const rswtChkRes = await initFetch("1", "20", currentYear, "0");
         return set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
@@ -212,7 +214,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
           });
         }
         const currentYear = new Date().getFullYear().toString();
-        const rswtChkRes = await initFetch(currentYear, "0");
+        const rswtChkRes = await initFetch("1", "20", currentYear, "0");
         return set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
@@ -238,7 +240,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
             rswtChkPolGuide: rswtChkPolGuide,
           },
         }));
-      } catch (error) {}
+      } catch (error) { }
     },
     rswtChkPolInit: () => {
       try {
@@ -249,7 +251,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
             rswtChkPolGuide: undefined,
           },
         }));
-      } catch (error) {}
+      } catch (error) { }
     },
     rwstPolAndGuideUpdate: async (rswtChk: rswtChkZodType[]) => {
       try {
@@ -265,7 +267,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
           });
         }
         const currentYear = new Date().getFullYear().toString();
-        const rswtChkRes = await initFetch(currentYear, "0");
+        const rswtChkRes = await initFetch("1", "20", currentYear, "0");
         return set((state: rswtChkgdnState) => ({
           ...state,
           rswtChkgdn: {
@@ -299,7 +301,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
             rswtDetailHeadList: rswtDetailHeadList,
           },
         }));
-      } catch (e) {}
+      } catch (e) { }
     },
   };
 };
diff --git a/apps/wr/components/lib/func/TableData.tsx b/apps/wr/components/lib/func/TableData.tsx
index 39c8b7739..9ac26827d 100644
--- a/apps/wr/components/lib/func/TableData.tsx
+++ b/apps/wr/components/lib/func/TableData.tsx
@@ -54,7 +54,7 @@ export const rainChkTableData = (chkData: rainChkZodType[]) => {
 export const rswtChkTableData = (chkData: rswtChkZodType[]) => {
   // 1. chkgdnFk + utztnUsgCd 기준 누계 정보 만들기
   const makeRswtData: any[] = [];
-  chkData.forEach((root) => {
+  chkData?.forEach((root) => {
     root.rswtrDetails.forEach((detail) => {
       let flatRswtChk = {};
       const findGuide = root.guideDetails.find(
diff --git a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
index d0ad437b3..5166b461f 100644
--- a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
+++ b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
@@ -16,22 +16,27 @@ import {
   TableHeader,
 } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
 export default function RainChkgdTable({
-  detailUp, 
-  handleClick=() => {},
+  detailUp,
+  handleClick = () => { },
   deleteData,
   rainChkData,
+  pageNation,
+  onPageChange,
 }: {
   detailUp: (data: rainChkZodType[]) => void;
-  handleClick?: (data:any) => void;
-  deleteData:(selectedIds:number[])=>void
+  handleClick?: (data: any) => void;
+  deleteData: (selectedIds: number[]) => void
   rainChkData?: rainChkZodType[];
+  pageNation: number;
+  onPageChange: (page: number) => void;
 }) {
-  const { code, rainChkgdn ,rainChkSttn,getRainSttnExcel } = useWrStore((state) => state);
+  const { code, rainChkgdn, rainChkSttn, getRainSttnExcel } = useWrStore((state) => state);
   const [makeTableData, setMakeTableData] = useState<any[]>([]);
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [upRaintDetail, setUpRaintDetail] = useState<rainChkZodType[]>([]);
-  const [headList, setHeadList] = useState< {headList:TableUpperProps[],upHeadList:chHeadType[]}>({headList:[], upHeadList:[]});
+  const [headList, setHeadList] = useState<{ headList: TableUpperProps[], upHeadList: chHeadType[] }>({ headList: [], upHeadList: [] });
 
 
   const toggleSelection = (pk: number, checked: boolean) => {
@@ -46,29 +51,29 @@ export default function RainChkgdTable({
   ) => {
 
     setMakeTableData((prev) =>
-      prev.map((row, idx) =>  {
-       return idx === rowIndex ? { ...row, [field]: value } : row
+      prev.map((row, idx) => {
+        return idx === rowIndex ? { ...row, [field]: value } : row
       }
       )
     );
   };
 
-  const handleCellClick= useCallback((index: number, headId: string) => {
+  const handleCellClick = useCallback((index: number, headId: string) => {
     if (
       headId === "totalSplyUswtrUtztnQnt" ||
       headId === "totalRuseFcltUtztnQnt"
     ) {
-    
+
       handleClick(makeTableData[index])
     }
 
-  },[makeTableData, handleClick]);
+  }, [makeTableData, handleClick]);
 
 
 
   useEffect(() => {
     setSelectedIds([])// 셀렉트 초기화를 위한 작업
-    if(rainChkData){
+    if (rainChkData) {
       const rainChg = rainChkData.map((item: any) => {
         const bud = tableData([item.building], { code });
         return {
@@ -83,10 +88,10 @@ export default function RainChkgdTable({
 
   useEffect(() => {
     //데이터를 평탄화 한것중에 체크박스 선택한 테이블만 선택
-   
+
     //현황 페이지에서 필요한 엑셀 데이터를 바뀔때마다 넣기 위해서 
     getRainSttnExcel(makeTableData);
-    const selectedData = makeTableData.filter((item) =>selectedIds.includes(item.chkgdnPk));
+    const selectedData = makeTableData.filter((item) => selectedIds.includes(item.chkgdnPk));
 
     if (selectedData.length > 0) {
       const updateTableData = rainChkgdn.rainChk
@@ -101,7 +106,7 @@ export default function RainChkgdTable({
               );
 
               if (findRain != undefined) {
-                  console.log(findRain)
+                console.log(findRain)
                 return {
                   ...rd,
                   ph: Number(findRain.ph),
@@ -127,34 +132,34 @@ export default function RainChkgdTable({
           }
         })
         .filter(Boolean);
-        
+
 
       setUpRaintDetail(updateTableData as rainChkZodType[]);
     }
-  }, [makeTableData,selectedIds]);
+  }, [makeTableData, selectedIds]);
 
   useEffect(() => {
     detailUp(upRaintDetail);
 
   }, [upRaintDetail]);
 
-  useEffect(() =>{
-    if(selectedIds.length >0){
+  useEffect(() => {
+    if (selectedIds.length > 0) {
       // 삭제를 위한 데이터 삽입
-      deleteData(selectedIds )
+      deleteData(selectedIds)
     }
-  },[selectedIds])
+  }, [selectedIds])
 
 
   ///현황일 경우 input 비활성화 한다.
-  useEffect(() => { 
-    if(rainChkSttn.isSttn){
-      
+  useEffect(() => {
+    if (rainChkSttn.isSttn) {
+
       setHeadList({
         headList: rainChkSttn.rainChkgdnHeadList,
         upHeadList: rainChkSttn.rainHeadNm
       })
-    }else{
+    } else {
       setHeadList({
         headList: rainChkgdn.rainChkgdnHeadList,
         upHeadList: rainChkgdn.rainHeadNm
@@ -162,28 +167,36 @@ export default function RainChkgdTable({
 
     }
 
-  }, [rainChkSttn.isSttn, rainChkgdn.rainChkgdnHeadList , rainChkSttn.rainChkgdnHeadList]);
+  }, [rainChkSttn.isSttn, rainChkgdn.rainChkgdnHeadList, rainChkSttn.rainChkgdnHeadList]);
 
 
   return (
-    <Table variant="secondary">
-      <TableHeader className="font-bold">
-        {headMakeprfmnc(
-          headList?.headList,
-          headList?.upHeadList
-        )}
-      </TableHeader>
+    <>
+      <Table variant="secondary">
+        <TableHeader className="font-bold">
+          {headMakeprfmnc(
+            headList?.headList,
+            headList?.upHeadList
+          )}
+        </TableHeader>
 
-      <TableBody>
-        {chRowspanTable(
-          makeTableData,
-          headList.headList,
-          handleChange,
-          toggleSelection,
-          selectedIds,
-          handleCellClick
-        )}
-      </TableBody>
-    </Table>
+        <TableBody>
+          {chRowspanTable(
+            makeTableData,
+            headList.headList,
+            handleChange,
+            toggleSelection,
+            selectedIds,
+            handleCellClick
+          )}
+        </TableBody>
+      </Table>
+      <UiPageNations
+        total={rainChkData?.length ?? 0}
+        cur={pageNation}
+        pageSize={20}
+        onPageChange={onPageChange}
+      />
+    </>
   );
 }
diff --git a/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx b/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
index da6cacc9a..31891a595 100644
--- a/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
+++ b/apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
@@ -14,22 +14,27 @@ import {
 } from "@/components/lib/func/TableData";
 import { Table, TableBody, TableHeader } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
 
 export default function RswtChkgdTable({
   detaiRswtlUpdate,
-  handleRswtClick = () => {},
+  handleRswtClick = () => { },
   deleteRswtData,
   rswtChkData,
+  pageNation,
+  onPageChange,
 }: {
   detaiRswtlUpdate: (data: rswtrChkDetailsZodType[]) => void;
   handleRswtClick?: (data: any) => void;
   deleteRswtData: (selectedIds: number[]) => void;
   rswtChkData: rswtChkZodType[];
+  pageNation: number;
+  onPageChange: (page: number) => void;
 }) {
-  const { code, rswtChkgdn,rswtChkSttn , rswtChkgdnInit, rswtChkPolAndGuide,getRswtSttnExcel } = useWrStore(
+  const { code, rswtChkgdn, rswtChkSttn, rswtChkgdnInit, rswtChkPolAndGuide, getRswtSttnExcel } = useWrStore(
     (state) => state
   );
-  const [headList, setHeadList] = useState< {headList:TableUpperProps[],upHeadList:chHeadType[]}>({headList:[], upHeadList:[]});
+  const [headList, setHeadList] = useState<{ headList: TableUpperProps[], upHeadList: chHeadType[] }>({ headList: [], upHeadList: [] });
 
   const [makeTableData, setMakeTableData] = useState<any[]>([]);
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
@@ -111,22 +116,20 @@ export default function RswtChkgdTable({
   }, [selectedIds]);
 
   ///현황일 경우 input 비활성화 한다.
-  useEffect(() => { 
-    if(rswtChkSttn.isSttn){
+  useEffect(() => {
+    if (rswtChkSttn.isSttn) {
       setHeadList({
         headList: rswtChkSttn.rswtChkSttnHeadList,
         upHeadList: rswtChkSttn.rswtSttnHeadNm
       })
-    }else{
+    } else {
       setHeadList({
         headList: rswtChkgdn.rswtChkHeadList,
         upHeadList: rswtChkgdn.rswtHeadNm
       })
 
     }
-
-  }, [rswtChkSttn.isSttn, rswtChkgdn.rswtChkHeadList , rswtChkSttn.rswtChkSttnHeadList]);
-
+  }, [rswtChkSttn.isSttn, rswtChkgdn.rswtChkHeadList, rswtChkSttn.rswtChkSttnHeadList]);
 
   return (
     <>
@@ -146,6 +149,12 @@ export default function RswtChkgdTable({
           )}
         </TableBody>
       </Table>
+      <UiPageNations
+        total={rswtChkData?.length ?? 0}
+        cur={pageNation}
+        pageSize={20}
+        onPageChange={onPageChange}
+      />
     </>
   );
 }