From 90cc710ab81e53b3a88d6a7f77b06f395a4a01c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?=
 <39869096+gwansikk@users.noreply.github.com>
Date: Mon, 8 Apr 2024 20:47:25 +0900
Subject: [PATCH] =?UTF-8?q?refactor(member):=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20UI=20=EA=B0=9C=EC=84=A0=20(#86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Pagination/Pagination.tsx          | 72 ++++++++++---------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/apps/member/src/components/common/Pagination/Pagination.tsx b/apps/member/src/components/common/Pagination/Pagination.tsx
index 9f5d6764..bbfc6098 100644
--- a/apps/member/src/components/common/Pagination/Pagination.tsx
+++ b/apps/member/src/components/common/Pagination/Pagination.tsx
@@ -1,64 +1,72 @@
-import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import { MdOutlineSkipNext } from 'react-icons/md';
+import { cn } from '@utils/string';
+import { MdOutlineNavigateNext } from 'react-icons/md';
+import type { PaginationOnChange } from '@type/common';
 
 interface PaginationProps {
-  className?: string;
-  totalItems: number;
-  pageLimit: number;
-  postLimit: number;
-  setPage: (page: number) => void;
   page: number;
-  sort?: string;
+  postLimit: number;
+  totalItems: number;
+  onChange?: PaginationOnChange;
+  className?: string;
 }
 
 const Pagination = ({
-  className,
-  totalItems,
-  pageLimit,
-  postLimit,
-  setPage,
   page,
+  postLimit,
+  totalItems,
+  onChange,
+  className,
 }: PaginationProps) => {
   const totalPages = Math.ceil(totalItems / postLimit);
   const [startPage, setStartPage] = useState(1);
-  const [endPage, setEndPage] = useState(Math.min(pageLimit, totalPages));
-  const [clickedButton, setClickedButton] = useState(1);
+  const [endPage, setEndPage] = useState(totalPages);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const pageNumber = [];
   for (let i = startPage; i <= endPage; i++) {
     pageNumber.push(i);
   }
 
-  const handleButtonClick = (index: number) => {
-    setPage(index);
-    setClickedButton(index);
+  const handleCurrentPageClick = (index: number) => {
+    const changePage = Math.max(1, Math.min(index, totalPages));
+    onChange && onChange(changePage);
+    setCurrentPage(changePage);
   };
 
   useEffect(() => {
     setStartPage(page - (page % 5) + 1);
     setEndPage(Math.min(totalPages, page - (page % 5) + 5));
-  }, [page, totalPages, pageLimit]);
+  }, [page, totalPages]);
 
   return (
-    <div className={classNames('flex items-center', className)}>
-      <button onClick={() => handleButtonClick(1)}>
-        <MdOutlineSkipNext className="rotate-180" />
+    <div className={cn('flex items-center space-x-4', className)}>
+      <button
+        onClick={() => handleCurrentPageClick(-postLimit)}
+        className="px-1 text-gray-500 border rounded"
+      >
+        <MdOutlineNavigateNext size={20} className="rotate-180" />
       </button>
-      {pageNumber.map((index) => (
-        <div key={index}>
+      {pageNumber.length === 0 ? (
+        <span>1</span>
+      ) : (
+        pageNumber.map((page) => (
           <button
-            className={classNames('rounded-full px-2', {
-              underline: clickedButton === index,
+            key={page}
+            className={cn('underline-offset-4 text-gray-500', {
+              'underline text-clab-main': currentPage === page,
             })}
-            onClick={() => handleButtonClick(index)}
+            onClick={() => handleCurrentPageClick(page)}
           >
-            {index}
+            {page}
           </button>
-        </div>
-      ))}
-      <button onClick={() => handleButtonClick(totalPages)}>
-        <MdOutlineSkipNext />
+        ))
+      )}
+      <button
+        onClick={() => handleCurrentPageClick(Math.ceil(+postLimit))}
+        className="px-1 text-gray-500 border rounded"
+      >
+        <MdOutlineNavigateNext size={20} />
       </button>
     </div>
   );