v1.0.6 페이지네이션 로직 수정

src/components/UI/AdminPagination.tsx

@@ -4,22 +4,39 @@ interface PaginationProps {
     currentPage: number
     totalPages: number
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+    setPage: React.Dispatch<React.SetStateAction<number>>
 }
 
-const AdminPagination: React.FC<PaginationProps> = ({ currentPage, totalPages, setCurrentPage }) => {
+const handlePrevPage = (setCurrentPage: React.Dispatch<React.SetStateAction<number>>, setPage: React.Dispatch<React.SetStateAction<number>>, totalPages: number) => {
+    setCurrentPage((prev) => {
+        const prevPage = Math.max(prev - 1, 1)
+        setPage(prevPage - 1)
+        return prevPage
+    })
+}
+
+const handleNextPage = (setCurrentPage: React.Dispatch<React.SetStateAction<number>>, setPage: React.Dispatch<React.SetStateAction<number>>, totalPages: number) => {
+    setCurrentPage((prev) => {
+        const nextPage = Math.min(prev + 1, totalPages)
+        setPage(nextPage - 1)
+        return nextPage
+    })
+}
+
+const AdminPagination: React.FC<PaginationProps> = ({ currentPage, totalPages, setCurrentPage, setPage }) => {
     return (
         <div className='my-6 space-x-4'>
             <button 
                 className='px-4 py-2 bg-gray-700 text-white rounded-lg disabled:opacity-50' 
-                onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))} 
+                onClick={() => handlePrevPage(setCurrentPage, setPage, totalPages)} 
                 disabled={currentPage === 1}
             >
                 이전
             </button>
             <span className='text-lg font-bold'>{currentPage} / {totalPages}</span>
             <button 
                 className='px-4 py-2 bg-gray-700 text-white rounded-lg disabled:opacity-50' 
-                onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))} 
+                onClick={() => handleNextPage(setCurrentPage, setPage, totalPages)} 
                 disabled={currentPage === totalPages}
             >
                 다음

src/pages/admin/ManApplicants.tsx

@@ -30,13 +30,9 @@ const ManApplicants: React.FC = () => {
     const [openDropdownId, setOpenDropdownId] = useState<number | null>(null)
 
     // 페이지네이션
-    const [currentPage, setCurrentPage] = useState<number>(1)              // 현재 페이지
-    const applicantsPerPage = 20                                           // 페이지 당 지원자 수
-    const LastApplicant = currentPage * applicantsPerPage                  // 페이지에서 마지막 지원자
-    const FirstApplicant = LastApplicant - applicantsPerPage               // 페이지에서 첫번째 지원자
-    const currentApplicants = applicants.slice(FirstApplicant, LastApplicant) // 현재 페이지에서 지원자
-    const totalPages = Math.ceil(applicants.length / applicantsPerPage)       // 총 페이지 수수
-
+    const [currentPage, setCurrentPage] = useState<number>(1)
+    const [totalPages, setTotalPages] = useState<number>(1)
+    const [page, setPage] = useState<number>(0)
 
 
     // 지원자 전체 조회
@@ -47,15 +43,16 @@ const ManApplicants: React.FC = () => {
                     alert('로그인이 필요합니다.')
                     return
                 }
-
                 const response = await axios.get('https://dmu-dasom-api.or.kr/api/admin/applicants', {
+                    params : { page },
                     headers: {
                         Authorization: `Bearer ${accessToken}`
                     }
                 })
                 console.log(response.data)
                 setApplicants(response.data.content)
                 setCount(response.data.totalElements)
+                setTotalPages(response.data.totalPages)
             } catch (err: any) {
                 console.error(err)
                 const errorCode = err.response?.data?.code
@@ -68,7 +65,7 @@ const ManApplicants: React.FC = () => {
         }
 
         fetchData()
-    }, [])
+    }, [page])
 
     // 상세정보 조회 및 토글
     const toggleDetail = async (id: number) => {
@@ -218,7 +215,7 @@ const ManApplicants: React.FC = () => {
                     </tr>
                 </thead>
                 <tbody>
-                    {currentApplicants.map((applicant) => (
+                    {applicants.map((applicant) => (
                         <ApplicantInfo key={applicant.id} applicant={applicant} />
                     ))}
                 </tbody>
@@ -230,7 +227,8 @@ const ManApplicants: React.FC = () => {
             <AdminPagination 
                 currentPage={currentPage} 
                 totalPages={totalPages} 
-                setCurrentPage={setCurrentPage} 
+                setCurrentPage={setCurrentPage}
+                setPage={setPage} 
             />
         </div>
     )

src/pages/admin/ManInterviewee.tsx

@@ -107,10 +107,11 @@ const ManInterviewee: React.FC = () => {
     // 페이지네이션
     const [currentPage, setCurrentPage] = useState<number>(1)
     const [itemsPerPage] = useState<number>(20)
-    const indexOfLastApplicant = currentPage * itemsPerPage
-    const indexOfFirstApplicant = indexOfLastApplicant - itemsPerPage
-    const currentApplicants = filteredApplicants.slice(indexOfFirstApplicant, indexOfLastApplicant)
+    const lastApplicant = currentPage * itemsPerPage
+    const firstApplicant = lastApplicant - itemsPerPage
+    const currentApplicants = filteredApplicants.slice(firstApplicant, lastApplicant)
     const totalPages = Math.ceil(filteredApplicants.length / itemsPerPage)
+    const [page, setPage] = useState<number>(0)
 
     return (
         <div className='h-[100vh] w-[100vw] bg-mainBlack font-pretendardRegular text-white flex flex-col items-center overflow-y-auto'>
@@ -176,6 +177,7 @@ const ManInterviewee: React.FC = () => {
             currentPage={currentPage} 
             totalPages={totalPages} 
             setCurrentPage={setCurrentPage} 
+            setPage={setPage}
         />
         </div>
     )

src/pages/admin/ManNewsList.tsx

@@ -19,6 +19,7 @@ const ManNewsList: React.FC = () => {
     const totalPages = Math.ceil(newsItems.length / itemsPerPage)
     const startIndex = (currentPage - 1) * itemsPerPage
     const visibleNews = newsItems.slice(startIndex, startIndex + itemsPerPage)
+    const [page, setPage] = useState<number>(0)
 
     useEffect(() => {
         const fetchData = async () => {
@@ -79,6 +80,7 @@ const ManNewsList: React.FC = () => {
                 currentPage={currentPage}
                 totalPages={totalPages}
                 setCurrentPage={setCurrentPage}
+                setPage={setPage}
             />
         </div>
     )