페이징 데이터 갯수 상태저장

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

@@ -10,5 +10,5 @@ export const searchData = async<T extends Record<string, any>>(url: string, para
             }, {} as Record<string, string>)
     );
     const data = await getData(`${url}?${params.toString()}`);
-    return data && data.content
+    return data && {data : data.content, total : data.totalElements}
 }

apps/sn/app/oper/floodPre/page.tsx

@@ -9,7 +9,7 @@ import { searchData } from '@/components/lib/common/apiHelpers'
 import { tableHeadlist } from '..'
 import { handleDownload } from '@/components/lib/utils/fileDownload'
 import { formatDate } from '@/components/lib/utils/date'
-import { deleteData, getData, postData } from '@/components/lib/api'
+import { deleteData, postData } from '@/components/lib/api'
 
 const Page = () => {
     // 조회조건
@@ -25,8 +25,9 @@ const Page = () => {
     const [sbmrgPrevntBizSn, setSbmrgPrevntBizSn] = useState('') //파일 일련번호
     const [tableData, setTableData] = useState<any>([{}]) //테이블 데이터
     const [curPage, setCurPage] = useState(1) //현재 페이지
+    const [totalData, setTotalData] = useState(0) //총 데이터 수
     const fetchData = async () => {
-        const data = await searchData('v1/sbmrgPrevnt', {
+        const {data, total} = await searchData('v1/sbmrgPrevnt', {
             fromRegDt: formatDate(fromDate),
             fromMngYr: manageYear,
             toMngYr: mngQu,
@@ -37,6 +38,7 @@ const Page = () => {
             size: '10'
         })
         setTableData(data)
+        setTotalData(total)
     }
     useEffect(() => {
         setCurPage(1)
@@ -133,7 +135,7 @@ const Page = () => {
                         <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile} >삭제</Button>
                     </div>
                 </div>
-                <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={10} cellClick={(index) => { if (index != null) {const fileName = tableData[index]?.sbmrgPrevntBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn) } }} onPageChange={async (page:number)=>{setCurPage(page); await fetchData()}}></UiTable>
+                <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={totalData} cellClick={(index) => { if (index != null) {const fileName = tableData[index]?.sbmrgPrevntBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn);} }} onPageChange={async (page:number)=>{setCurPage(page); await fetchData()}}></UiTable>
             </ListDiv>
             <ListDiv className="mt-4">
                 <OperFileUploadForm title='도시침수 예방사업 사업추진현황 등록' onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id) }} />

apps/sn/app/oper/oldPp/page.tsx

@@ -22,9 +22,10 @@ const Page = () => {
     const [dcrpPplMtncBizSn, setDcrpPplMtncBizSn] = useState('')
     const [tableData, setTableData] = useState<any>([{}])
     const [curPage, setCurPage] = useState(1)
+    const [totalData, setTotalData] = useState(0) //총 데이터 수
     // 데이터 조회 
     const fetchData = async () => {
-        const data = await searchData('v1/dcrpPpl', {
+        const {data, total} = await searchData('v1/dcrpPpl', {
             fromRegDt: formatDate(fromDate),
             fromMngYr: manageYear,
             toMngYr: mngQu,
@@ -35,6 +36,8 @@ const Page = () => {
             size: '10'
         })
         setTableData(data)
+        setTotalData(total)
+        console.log(data, total)
     }
     useEffect(() => {
         setCurPage(1)
@@ -137,7 +140,7 @@ const Page = () => {
                         <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile}>삭제</Button>
                     </div>
                 </div>
-                <UiTable headName='' tableData={tableData} headlist={tableHeadlistOldPp} pageSize={10} total={20} children={undefined} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.dcrpPplMtncBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setDcrpPplMtncBizSn(tableData[index]?.dcrpPplMtncBizSn) } }} onPageChange={async (page:number)=>{setCurPage(page); await fetchData()}}></UiTable>
+                <UiTable headName='' tableData={tableData} headlist={tableHeadlistOldPp} pageSize={10} total={totalData} children={undefined} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.dcrpPplMtncBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setDcrpPplMtncBizSn(tableData[index]?.dcrpPplMtncBizSn) } }} onPageChange={async (page:number)=>{setCurPage(page); await fetchData()}}></UiTable>
             </ListDiv>
             <ListDiv className="mt-4">
                 <OperFileUploadForm title='노후 하수관로 정비사업 주진현황 등록' onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id) }} />