group 관리추가

2025-04-07 17:14:12 +09:00
parent c6cf493b51
commit 010ced20b5
17 changed files with 844 additions and 0 deletions
@@ -22,3 +22,4 @@ export * from "./slider";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./pagination";
@@ -0,0 +1,90 @@
+// apps/cs/src/common/components/ui/pagination.tsx
+import { Button } from "../button";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  // 표시할 페이지 번호 범위 계산
+  const getPageRange = () => {
+    const range: number[] = [];
+    const maxButtons = 5; // 한 번에 보여줄 최대 페이지 버튼 수
+    const halfMaxButtons = Math.floor(maxButtons / 2);
+
+    let startPage = Math.max(currentPage - halfMaxButtons, 1);
+    let endPage = Math.min(startPage + maxButtons - 1, totalPages);
+
+    if (endPage - startPage + 1 < maxButtons) {
+      startPage = Math.max(endPage - maxButtons + 1, 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      range.push(i);
+    }
+
+    return range;
+  };
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex items-center gap-1">
+      {/* 첫 페이지 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(1)}
+        disabled={currentPage === 1}
+      >
+        {"<<"}
+      </Button>
+
+      {/* 이전 페이지 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        {"<"}
+      </Button>
+
+      {/* 페이지 번호 버튼들 */}
+      {getPageRange().map((pageNum) => (
+        <Button
+          key={pageNum}
+          variant={currentPage === pageNum ? "default" : "outline"}
+          size="sm"
+          onClick={() => onPageChange(pageNum)}
+        >
+          {pageNum}
+        </Button>
+      ))}
+
+      {/* 다음 페이지 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        {">"}
+      </Button>
+
+      {/* 마지막 페이지 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(totalPages)}
+        disabled={currentPage === totalPages}
+      >
+        {">>"}
+      </Button>
+    </div>
+  );
+}
+
+export { Pagination };