From 7be1904a7dc4252b66bcde4461ee7af8d61b04a6 Mon Sep 17 00:00:00 2001
From: aken-you <kinsk2839@naver.com>
Date: Thu, 23 Oct 2025 01:09:06 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/admin/ui/member-list-table.tsx   |  3 +-
 .../admin/ui/sincerity-temp-table.tsx         |  1 -
 src/shared/ui/pagination/index.tsx            | 52 +++++++++++--------
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/features/admin/ui/member-list-table.tsx b/src/features/admin/ui/member-list-table.tsx
index d0623474..39e3720a 100644
--- a/src/features/admin/ui/member-list-table.tsx
+++ b/src/features/admin/ui/member-list-table.tsx
@@ -223,8 +223,7 @@ export default function MemberListTable() {
           className="mt-200"
           page={page}
           onChangePage={setPage}
-          totalPages={data?.totalPages}
-          middleButtonCount={4}
+          totalPages={data?.totalPages || 1}
         />
       </div>
     </>
diff --git a/src/features/admin/ui/sincerity-temp-table.tsx b/src/features/admin/ui/sincerity-temp-table.tsx
index 5490dca3..cbabd190 100644
--- a/src/features/admin/ui/sincerity-temp-table.tsx
+++ b/src/features/admin/ui/sincerity-temp-table.tsx
@@ -75,7 +75,6 @@ export default function SincerityTempTable({
         page={page}
         onChangePage={setPage}
         totalPages={data?.sincerityTemperatureHistory.totalPages || 1}
-        middleButtonCount={4}
       />
     </>
   );
diff --git a/src/shared/ui/pagination/index.tsx b/src/shared/ui/pagination/index.tsx
index c502dba4..693e445b 100644
--- a/src/shared/ui/pagination/index.tsx
+++ b/src/shared/ui/pagination/index.tsx
@@ -3,48 +3,60 @@ import ArrowBackIcon from 'public/icons/keyboard-arrow-left.svg';
 import ArrowForwardIcon from 'public/icons/keyboard-arrow-right.svg';
 import MoreIcon from 'public/icons/more.svg';
 
-// 현재 페이지를 중심으로 표시할 중간 페이지 범위 계산 (첫 페이지와 마지막 페이지 제외)
+// 보이는 중간 페이지
+// 1) 1~4 페이지: 앞에서부터 5개 페이지 표시 (1,2,3,4,5, ... , totalPages)
+// 2) 5페이지부터: 현재 페이지를 중심으로 앞뒤 1개씩 포함한 3개 페이지 표시 (1 ... page-1, page, page+1 ... totalPages)
+// 3) 마지막에서 4번째 페이지(= totalPages - 3)부터: 마지막 5개 페이지 표시 (1 ... totalPages-4, totalPages-3, totalPages-2, totalPages-1, totalPages)
+// 반환 값은 첫 페이지(1)와 마지막 페이지(totalPages)를 제외한 중간 페이지들만 포함
 const getVisibleMiddlePages = ({
   totalPages,
   page,
-  middleButtonCount,
 }: {
   totalPages: number;
   page: number;
-  middleButtonCount: number;
 }) => {
-  // 전체 페이지가 적으면 모든 페이지 표시
-  // 예를들면 totalPages가 5이고 middleButtonCount가 3이면, 모든 페이지 표시
-  if (totalPages <= middleButtonCount + 2) {
+  // 총 페이지가 5이하일 경우: 1~totalPages 모두 보여주기
+  if (totalPages <= 5) {
     return Array.from({ length: totalPages }, (_, i) => i + 1).filter(
-      (page) => page !== 1 && page !== totalPages,
+      (p) => p !== 1 && p !== totalPages,
     );
   }
 
-  // 현재 페이지를 중심으로 middleButtonCount개의 페이지 계산
-  let start = Math.max(2, page - Math.floor(middleButtonCount / 2));
-  const end = Math.min(totalPages - 1, start + middleButtonCount - 1);
+  // page가 1~4일 때: 앞에서부터 5개 (1,2,3,4,5, ... , totalPages)
+  if (page <= 4) {
+    const start = 2;
+    const end = Math.min(5, totalPages - 1);
+    const pages: number[] = [];
 
-  // 끝 부분에 맞춰서 시작점 조정
-  // 예를들면 totalPages 10 / middleButtonCount 3 / page 9이면, start가 8 end가 9이므로 start를 7로 조정
-  if (end - start + 1 < middleButtonCount) {
-    start = Math.max(2, end - middleButtonCount + 1);
+    for (let i = start; i <= end; i++) pages.push(i);
+
+    return pages;
   }
 
-  const pages = [];
+  // 마지막에서 4번째 페이지(즉 page >= totalPages - 3)부터: 마지막 5개 (1, ... , totalPages-4, totalPages-3, totalPages-2, totalPages-1, totalPages)
+  if (page >= totalPages - 3) {
+    const start = Math.max(2, totalPages - 4);
+    const end = totalPages - 1;
+    const pages: number[] = [];
+
+    for (let i = start; i <= end; i++) pages.push(i);
 
-  for (let i = start; i <= end; i++) {
-    pages.push(i);
+    return pages;
   }
 
-  return pages.filter((page) => page !== 1 && page !== totalPages);
+  // 그 외(중간 구간): 현재 페이지를 중심으로 앞뒤 1개씩 (page-1, page, page+1)
+  const middleStart = Math.max(2, page - 1);
+  const middleEnd = Math.min(totalPages - 1, page + 1);
+  const pages: number[] = [];
+  for (let i = middleStart; i <= middleEnd; i++) pages.push(i);
+
+  return pages;
 };
 
 interface PaginationProps {
   page: number;
   totalPages: number;
   onChangePage: (page: number) => void;
-  middleButtonCount: number;
   className?: string;
 }
 
@@ -69,13 +81,11 @@ export default function Pagination({
   page: currentPage,
   totalPages,
   onChangePage,
-  middleButtonCount,
   className,
 }: PaginationProps) {
   const visibleMiddlePages = getVisibleMiddlePages({
     totalPages,
     page: currentPage,
-    middleButtonCount,
   });
   const showFirstEllipsis = visibleMiddlePages[0] > 2; // 첫 페이지 다음에 생략 표시
   const showLastEllipsis =