fix :: 페이지네이션 컴포넌트 분리

src/components/common/page/index.style.ts

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const PaginationWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0;
+    list-style-type: none;
+
+    button {
+        padding: 10px;
+        margin: 0 5px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 16px;
+        color: #777;
+
+        &:disabled {
+            color: #e0e0e0;
+            cursor: not-allowed;
+        }
+    }
+
+    .page-number {
+        padding: 10px;
+        margin: 0 5px;
+        cursor: pointer;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+        font-family: 'Inter', sans-serif;
+        font-size: 16px; 
+        font-style: normal; 
+        font-weight: 700; 
+        line-height: normal; 
+        /* background-color: #555;  */
+        color: #000;
+
+        &.active {
+            background-color: #0D6B23; 
+            color: white;
+        }
+    }
+`;

src/components/common/page/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import * as S from 'src/components/common/page/index.style';
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    displayTotalPages: number;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    onPageClick: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+    currentPage,
+    totalPages,
+    displayTotalPages,
+    onNextPage,
+    onPrevPage,
+    onPageClick,
+}) => {
+    return (
+        <S.PaginationWrapper>
+            <button onClick={onPrevPage} disabled={currentPage === 1}>
+                &larr;
+            </button>
+            {[...Array(displayTotalPages)].map((_, index) => (
+                <div
+                    key={index}
+                    className={`page-number ${currentPage === index + 1 ? 'active' : ''}`}
+                    onClick={() => onPageClick(index + 1)}
+                >
+                    {index + 1}
+                </div>
+            ))}
+            <button onClick={onNextPage} disabled={currentPage === displayTotalPages}>
+                &rarr;
+            </button>
+        </S.PaginationWrapper>
+    );
+};
+
+export default Pagination;

src/components/home/seniortojunior/index.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import * as S from './index.style';
 import PostHeader from 'src/components/common/postHeader/index';
 import PostItem from 'src/components/post/senior-to-junior/index';
-import posts from 'src/constants/postDummyData/index'; 
-import styled from 'styled-components';
+import posts from 'src/constants/postDummyData/index';
+import Pagination from 'src/components/common/page/index';
 
 const ITEMS_PER_PAGE = 6;
 const MAX_PAGES = 5; 
@@ -35,6 +35,10 @@ const Seniortojunior = () => {
         }
     };
 
+    const handlePageClick = (page: number) => {
+        setCurrentPage(page);
+    };
+
     return (
         <S.ContainerParents>
             <S.Container>
@@ -51,23 +55,14 @@ const Seniortojunior = () => {
                         />
                     ))}
                 </S.PostsGrid>
-                <S.PaginationWrapper>
-                    <button onClick={handlePrevPage} disabled={currentPage === 1}>
-                        &larr;
-                    </button>
-                    {[...Array(displayTotalPages)].map((_, index) => (
-                        <div
-                            key={index}
-                            className={`page-number ${currentPage === index + 1 ? 'active' : ''}`}
-                            onClick={() => setCurrentPage(index + 1)}
-                        >
-                            {index + 1}
-                        </div>
-                    ))}
-                    <button onClick={handleNextPage} disabled={currentPage === displayTotalPages}>
-                        &rarr;
-                    </button>
-                </S.PaginationWrapper>
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    displayTotalPages={displayTotalPages}
+                    onNextPage={handleNextPage}
+                    onPrevPage={handlePrevPage}
+                    onPageClick={handlePageClick}
+                />
             </S.Container>
         </S.ContainerParents>
     );