feat: 관리자 페이지 롤링 페이퍼 설정 화면에 페이지네이션 적용

Author: AAminha

src/apis/rolling.ts

@@ -57,11 +57,19 @@ export const postNewRollingPaper = async (title: string) => {
   }
 };
 
-export const getRollingPaperList = async (): Promise<RollingPaperList> => {
+export const getRollingPaperList = async (
+  page: string | number,
+  size: number,
+): Promise<RollingPaperList> => {
   try {
     const {
       data: { data },
-    } = await client.get('/api/admin/event-posts');
+    } = await client.get('/api/admin/event-posts', {
+      params: {
+        page,
+        size,
+      },
+    });
     return data;
   } catch (error) {
     console.error(error);

src/pages/Admin/RollingPaper.tsx

@@ -9,14 +9,23 @@ import PageTitle from './components/AdminPageTitle';
 import RollingPaperItem from './components/RollingPaperItem';
 import WrapperFrame from './components/WrapperFrame';
 import WrapperTitle from './components/WrapperTitle';
+import PagenationNavigation from './components/PagenationNavigation';
+
+const SIZE = 10;
 
 export default function AdminRollingPaper() {
   const [activeModal, setActiveModal] = useState(false);
-  const { data, isLoading, isSuccess } = useQuery({
-    queryKey: ['admin-rolling-paper'],
-    queryFn: getRollingPaperList,
+  const [currentPage, setCurrentPage] = useState<string>('1');
+  const { data, isLoading, isSuccess, refetch } = useQuery({
+    queryKey: ['admin-rolling-paper', currentPage],
+    queryFn: () => getRollingPaperList(currentPage ?? 1, SIZE),
   });
 
+  const handleNowPage = (page: string) => {
+    setCurrentPage(page);
+    refetch();
+  };
+
   return (
     <>
       {activeModal && <AddRollingPaperModal onClose={() => setActiveModal(false)} />}
@@ -58,7 +67,11 @@ export default function AdminRollingPaper() {
             )}
           </>
         )}
-        {/* TODO: 페이지네이션 적용 */}
+        <PagenationNavigation
+          totalPage={Number(data?.totalPages)}
+          buttonLength={5}
+          handlePageNumberButtonClick={handleNowPage}
+        />
       </WrapperFrame>
     </>
   );

src/pages/Admin/components/PagenationNavigation.tsx

@@ -50,13 +50,13 @@ export default function PagenationNavigation({
     }
   };
 
-  const buttonStyle = 'border bg-white px-2 py-1 disabled:bg-gray-20';
+  const buttonStyle = 'rounded-full bg-white w-8 h-8 disabled:bg-gray-20';
 
   return (
     <div className="mt-5 flex h-10 w-full items-center justify-center">
-      <div className="flex items-center">
+      <div className="flex items-center gap-2">
         <button
-          className={twMerge(buttonStyle)}
+          className={twMerge(buttonStyle, 'w-14')}
           disabled={nowSection <= 0}
           onClick={() => {
             handlePrevButtonClick();
@@ -69,7 +69,7 @@ export default function PagenationNavigation({
           return (
             <button
               key={num}
-              className={twMerge(buttonStyle, nowPageNumberAt === num && 'bg-accent-3')}
+              className={twMerge(buttonStyle, nowPageNumberAt === num && 'bg-primary-2/50')}
               onClick={() => {
                 handlePageButtonClick(num);
               }}
@@ -79,7 +79,7 @@ export default function PagenationNavigation({
           );
         })}
         <button
-          className={twMerge(buttonStyle)}
+          className={twMerge(buttonStyle, 'w-14')}
           disabled={nowSection >= totalSection}
           onClick={() => {
             handleNextButtonClick();