물재이용사례관리 조회기능(페이지네이션 추가)완료

apps/wr/app/matMng/coMat/ruseCaseMng/page.tsx

@@ -26,7 +26,7 @@ import { toast, Toaster } from "react-hot-toast";
 
 export default function RuseCaseMng() {
     const { code, ruseCaseMng, selectRuseCaseMng } = useWrStore((state) => state);
-    const { ruseCaseMngList, status } = ruseCaseMng;
+    const { ruseCaseMngList, status, count } = ruseCaseMng;
     const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>([]);
     const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
     
@@ -36,8 +36,10 @@ export default function RuseCaseMng() {
     const [name, setName] = useState<string>("");
 
     // 물재이용사례 조회
-    const searchRuseCaseMng = async () => {
+    const searchRuseCaseMng = async (pageNo: number, pageSize: number) => {
         const res = await selectRuseCaseMng(
+            pageNo,
+            pageSize,
             sidoCd ?? "", 
             sigunguCd ?? "", 
             selectUtz[0] ?? "",
@@ -70,7 +72,7 @@ export default function RuseCaseMng() {
 
     // 다운로드
     const download = () => {
-        searchRuseCaseMng();
+        searchRuseCaseMng(1, 10000);;
         
         fetch(`/sample_ruseCaseMng.xlsx`, {}).then(async (response) => {
           if (!response.ok) {
@@ -210,7 +212,7 @@ export default function RuseCaseMng() {
                             <SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2">
                                 <div className="space-y">
                                     <div className="flex flex-row space-x-2">
-                                        <Button size={"sm"} onClick={() => { searchRuseCaseMng() }}>
+                                        <Button size={"sm"} onClick={() => { searchRuseCaseMng(1, 20) }}>
                                             조회
                                         </Button>
                                         <Button size={"sm"} onClick={() => { setIsExcelOpen({ isModal: true }); }}>
@@ -238,9 +240,11 @@ export default function RuseCaseMng() {
                                     children={undefined}
                                     headlist={ruseCaseMng.ruseHeadList}
                                     pageSize={20}
-                                    total={100000}
+                                    total={count}
                                     cellClick={(index: number | undefined, headId: string) => {}}
-                                    onPageChange={() => {}}
+                                    onPageChange={(pageNo: number) => {
+                                        searchRuseCaseMng(pageNo, 10);
+                                    }}
                                 />
                             </div>
                         </ListDiv>

apps/wr/app/store/matDmd/ruseCaseMng/index.tsx

@@ -1,4 +1,4 @@
-import { fetchType, getFetch, postFectch } from "@/components/lib/api";
+import { fetchType, getFetch, getFetchWithCount, postFectch } from "@/components/lib/api";
 import type { TableUpperProps } from "../../common/type/header";
 import { ruseCaseHeadListExport } from "./headList";
 import { toast } from "react-hot-toast";
@@ -7,6 +7,7 @@ export type ruseCaseState = {
     ruseHeadList:TableUpperProps[];
     ruseCaseMngList:ruseCaseMngExcelProps[];
     status: number;
+    count: number;
   };
 };
 
@@ -64,14 +65,14 @@ export interface ruseCaseMngExcelProps {
 }
 
 type ruseCaseActions = {
-  selectRuseCaseMng: (sidoCd: string, sigunguCd: string, usageCd : string, name: string) => Promise<void>;
+  selectRuseCaseMng: (pageNo: number, pageSize: number, sidoCd: string, sigunguCd: string, usageCd : string, name: string) => Promise<void>;
   insertRuseCaseMng: (data: any) => Promise<void>;
 };
 
-export const fetchSearchRuseCaseMng = async (sidoCd: string, sigunguCd: string, usageCd : string, name: string) => {
-  const tailUrl = ((sigunguCd !== '전체' && sigunguCd !=='') ? `/${sigunguCd}` :  (sidoCd != '전체' && sidoCd != '') ? `/${sidoCd}` : `/0`) + (usageCd? `/${usageCd}` : '/0') + (name? `/${name}` : '');
-  const resp = await getFetch(fetchType.WR,`/reuseFc/pubFcRuseCase${tailUrl}`);
-  return resp;
+export const fetchSearchRuseCaseMng = async (pageNo: number, pageSize: number, sidoCd: string, sigunguCd: string, usageCd : string, name: string) => {
+  const tailUrl = '/'+pageNo+'/'+pageSize+ ((sigunguCd !== '전체' && sigunguCd !=='') ? `/${sigunguCd}` :  (sidoCd != '전체' && sidoCd != '') ? `/${sidoCd}` : `/0`) + (usageCd? `/${usageCd}` : '/0') + (name? `/${name}` : '');
+  const resp = await getFetchWithCount(fetchType.WR,`/reuseFc/pubFcRuseCase${tailUrl}`);
+  return {data:resp.data, count:resp.count};
 };
 
 export const fetchInsertRuseCaseMng = async (data: any) => {
@@ -86,6 +87,7 @@ export const ruseCaseStateExport: ruseCaseState = {
     ruseHeadList:ruseCaseHeadListExport,
     ruseCaseMngList:[],
     status: 0,
+    count: 0,
   },
 };
 
@@ -93,12 +95,13 @@ export const ruseCaseActionsExport: (set: any) => ruseCaseActions = (
   set: any
 ) => {
   return {
-    selectRuseCaseMng: async (sidoCd: string, sigunguCd: string, usageCd : string, name: string) => {
-      const res = await fetchSearchRuseCaseMng(sidoCd, sigunguCd, usageCd, name);
+    selectRuseCaseMng: async (pageNo: number, pageSize: number, sidoCd: string, sigunguCd: string, usageCd : string, name: string) => {
+      const res = await fetchSearchRuseCaseMng(pageNo, pageSize, sidoCd, sigunguCd, usageCd, name);
       set((state: ruseCaseState) => ({
         ruseCaseMng: {
           ...state.ruseCaseMng,
-          ruseCaseMngList: res,
+          ruseCaseMngList: res.data,
+          count: res.count,
         },
       }));
     },
@@ -118,4 +121,4 @@ export const ruseCaseActionsExport: (set: any) => ruseCaseActions = (
       }));
     },
   };
-};
+};