Merge pull request #50 from DeveloperBlog-Devflow/feature/til-manage-page

feat: 페이지네이션 추가

Author: DongEun02

app/(with-sidebar)/tils/page.tsx

@@ -11,6 +11,7 @@ import { fetchTilList } from '@/services/tils/tilListService.service';
 import { deleteTil } from '@/services/write/til.service';
 
 import type { TilItem } from '@/types/til';
+import Pagination from '@/components/common/Pagination';
 
 const Page = () => {
   const { user, authLoading } = useAuthUser();
@@ -23,6 +24,9 @@ const Page = () => {
 
   const [searchTerm, setSearchTerm] = useState('');
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 4;
+
   // 데이터 가져오기
   useEffect(() => {
     if (!user) {
@@ -64,6 +68,27 @@ const Page = () => {
     setSortedItems(sorted);
   }, [items, sort, searchTerm]);
 
+  const totalPages = Math.ceil(sortedItems.length / itemsPerPage);
+
+  useEffect(() => {
+    if (totalPages === 0) {
+      if (currentPage !== 1) setCurrentPage(1);
+      return;
+    }
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [totalPages, currentPage]);
+
+  const currentData = sortedItems.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
   const handleDelete = async (id: string) => {
     if (!user) return;
 
@@ -115,8 +140,14 @@ const Page = () => {
       {loading ? (
         <p className="text-sm text-slate-400">불러오는 중...</p>
       ) : (
-        <TilList items={sortedItems} onDelete={handleDelete} />
+        <TilList items={currentData} onDelete={handleDelete} />
       )}
+
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+      />
     </div>
   );
 };

components/common/Pagination.tsx

@@ -0,0 +1,99 @@
+type PaginationProps = {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+};
+
+const Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
+}: PaginationProps) => {
+  const handleClick = (page: number) => {
+    if (page < 1 || page > totalPages) return;
+    onPageChange(page);
+  };
+
+  const getPages = (): number[] => {
+    const pages: number[] = [];
+    const maxVisible = 5;
+
+    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    const end = Math.min(totalPages, start + maxVisible - 1);
+
+    if (end - start < maxVisible - 1) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  };
+
+  const pages = getPages();
+
+  const baseBtn =
+    'border-0 bg-transparent cursor-pointer text-[16px] font-medium text-[#616161] px-[10px] py-[6px] rounded-[6px] transition-all duration-200 ease-in-out';
+  const activeBtn = '!bg-[#616161] text-white';
+  const disabledBtn = 'disabled:text-[#ccc] disabled:cursor-not-allowed';
+
+  return (
+    <div className="mt-7.5 flex items-center justify-center gap-1.5">
+      <button
+        className={`${baseBtn} ${disabledBtn}`}
+        onClick={() => handleClick(currentPage - 1)}
+        disabled={currentPage === 1}
+        type="button"
+      >
+        &lt; 이전
+      </button>
+
+      {pages[0] > 1 && (
+        <>
+          <button
+            className={baseBtn}
+            onClick={() => handleClick(1)}
+            type="button"
+          >
+            1
+          </button>
+          {totalPages > 10 && <span className="px-1 text-[#888]">...</span>}
+        </>
+      )}
+
+      {pages.map((page) => (
+        <button
+          key={page}
+          className={`${baseBtn} ${page === currentPage ? activeBtn : ''}`}
+          onClick={() => handleClick(page)}
+          type="button"
+        >
+          {page}
+        </button>
+      ))}
+
+      {pages[pages.length - 1] < totalPages && (
+        <>
+          {totalPages > 10 && <span className="px-1 text-[#888]">...</span>}
+          <button
+            className={baseBtn}
+            onClick={() => handleClick(totalPages)}
+            type="button"
+          >
+            {totalPages}
+          </button>
+        </>
+      )}
+
+      <button
+        className={`${baseBtn} ${disabledBtn}`}
+        onClick={() => handleClick(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        type="button"
+      >
+        다음 &gt;
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;