Pagination - OLUN. Design System

single page: pageCount가 1 이하이면 null을 반환해 불필요한 컨트롤을 숨깁니다.
ellipsis: 페이지가 많을 때 첫 페이지, 현재 주변, 마지막 페이지를 남기고 중간 범위를 축약합니다.
pageSize: Select 기반 크기 선택을 함께 제공하며 onPageSizeChange로 호출부 상태를 갱신합니다.
labels: totalLabel과 pageSizeLabel로 목록 맥락에 맞는 문구를 지정할 수 있습니다.

단일 페이지

pageCount <= 1이면 null 반환

결과가 한 페이지뿐이면 Pagination은 렌더링하지 않습니다.

코드 보기tsx

import { Pagination } from "@olundot/ui";

export function SinglePagePagination() {
  return (
    <div>
      <p>결과가 한 페이지뿐이면 Pagination은 렌더링하지 않습니다.</p>
      <Pagination total={18} page={1} pageSize={20} />
    </div>
  );
}

작은 페이지 수

모든 페이지 번호 노출

코드 보기tsx

import { useState } from "react";
import { Pagination } from "@olundot/ui";

export function SmallPagination() {
  const [page, setPage] = useState(3);

  return (
    <Pagination
      aria-label="학생 목록 페이지"
      total={95}
      page={page}
      pageSize={20}
      pageSizeOptions={[10, 20, 50]}
      onPageChange={setPage}
    />
  );
}

큰 페이지 수

ellipsis로 중간 범위 축약

코드 보기tsx

import { useState } from "react";
import { Pagination } from "@olundot/ui";

export function LargePagination() {
  const [page, setPage] = useState(12);

  return (
    <Pagination
      aria-label="문항 은행 페이지"
      total={1247}
      page={page}
      pageSize={20}
      onPageChange={setPage}
    />
  );
}

페이지 크기

onPageSizeChange로 목록 밀도 변경

코드 보기tsx

import { useState } from "react";
import { Pagination } from "@olundot/ui";

export function PageSizePagination() {
  const [pageSize, setPageSize] = useState(20);

  return (
    <Pagination
      aria-label="강의 목록 페이지"
      total={236}
      page={1}
      pageSize={pageSize}
      pageSizeOptions={[10, 20, 50, 100]}
      onPageSizeChange={setPageSize}
      totalLabel={(total) => `총 ${total.toLocaleString("ko-KR")}개 강의`}
    />
  );
}