From 2feeb5516907d41842f0ef6d09858cb78eba9a07 Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Wed, 5 Jun 2024 18:50:21 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20pagination=2010=EA=B0=9C=EC=94=A9=20?=
 =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index b3e85fe1..affd2e30 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -3,6 +3,14 @@ import styled from 'styled-components';
 import type { PaginationSchema } from '@/schema/pagination';
 
 function Pagination(props: { currentPage: number; onSetPage: (page: number) => void } & PaginationSchema) {
+  const getPaginationGroup = () => {
+    const start = Math.floor(props.currentPage / 10) * 10;
+    return new Array(10)
+      .fill(undefined)
+      .map((_, idx) => start + idx)
+      .filter((page) => page <= props.totalPages);
+  };
+
   return (
     <PaginationContainer>
       <button disabled={!props.prevPage} onClick={() => props.prevPage && props.onSetPage(props.prevPage)}>
@@ -14,7 +22,7 @@ function Pagination(props: { currentPage: number; onSetPage: (page: number) => v
           <rect x="8" y="16" width="4" height="4" fill="#141414" />
         </svg>
       </button>
-      {Array.from({ length: props.totalPages }, (_, i) => (
+      {getPaginationGroup().map((i) => (
         <button
           key={i}
           onClick={() => props.onSetPage(i)}