Pagination

Description

페이지네이션을 위한 컴포넌트입니다. 대량의 데이터를 여러 페이지로 나누어 표시할 때 사용합니다.

현재 페이지: 1

"use client";

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

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex justify-center">
        <Pagination
          page={page}
          pageSize={10}
          totalCount={100}
          displayPage={5}
          onPageChange={setPage}
        />
      </div>
      <div className="text-center text-body-3 text-muted-foreground">
        현재 페이지: {page}
      </div>
    </div>
  );
}

Installation

pnpx shadcn add @allra/pagination

Usage

import { Pagination, PaginationSkeleton } from "@/registry/ui/pagination";

<Pagination
  page={page}
  pageSize={10}
  totalCount={100}
  displayPage={5}
  onPageChange={setPage}
/>

로딩 상태

<PaginationSkeleton displayPage={5} />

Props

Prop	Type	Default	Description
`page`	`number`	-	현재 페이지 번호 (1부터 시작)
`pageSize`	`number`	-	페이지당 표시할 아이템 개수
`totalCount`	`number`	-	전체 아이템 개수
`displayPage`	`number`	`5`	한 번에 표시할 페이지 번호 개수
`onPageChange`	`(page: number) => void`	-	페이지 변경 시 호출되는 콜백
`className`	`string`	`''`	추가 CSS 클래스

PaginationSkeleton

Prop	Type	Default	Description
`displayPage`	`number`	`5`	한 번에 표시할 페이지 번호 개수
`className`	`string`	`''`	추가 CSS 클래스

Constants

export const DEFAULT_PAGE_SIZE = 10
export const DEFAULT_DISPLAY_PAGE = 5

Features

페이지 이동: 이전/다음 페이지로 이동
빠른 이동: 처음/끝 페이지 그룹으로 빠르게 이동
반응형: 모바일에서도 사용하기 편리한 UI
자동 계산: 총 페이지 수와 표시 범위 자동 계산
빈 데이터 처리: 데이터가 없을 때도 1페이지 표시
비활성화 처리: 첫 페이지와 마지막 페이지에서 적절한 버튼 비활성화
로딩 상태: PaginationSkeleton을 통한 로딩 UI 지원

Examples

기본 사용

10개 아이템씩, 총 100개의 아이템을 페이지네이션합니다.

현재 페이지: 1

"use client";

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

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex justify-center">
        <Pagination
          page={page}
          pageSize={10}
          totalCount={100}
          displayPage={5}
          onPageChange={setPage}
        />
      </div>
      <div className="text-center text-body-3 text-muted-foreground">
        현재 페이지: {page}
      </div>
    </div>
  );
}

큰 데이터셋

많은 페이지가 있는 경우의 예시입니다.

현재 페이지: 1

"use client";

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

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex justify-center">
        <Pagination
          page={page}
          pageSize={10}
          totalCount={500}
          displayPage={5}
          onPageChange={setPage}
        />
      </div>
      <div className="text-center text-body-3 text-muted-foreground">
        현재 페이지: {page}
      </div>
    </div>
  );
}

표시 페이지 수 변경

한 번에 표시할 페이지 번호 개수를 변경할 수 있습니다.

현재 페이지: 1

"use client";

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

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex justify-center">
        <Pagination
          page={page}
          pageSize={10}
          totalCount={100}
          displayPage={7}
          onPageChange={setPage}
        />
      </div>
      <div className="text-center text-body-3 text-muted-foreground">
        현재 페이지: {page}
      </div>
    </div>
  );
}

적은 데이터

총 페이지가 displayPage보다 적은 경우입니다.

현재 페이지: 1

"use client";

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

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex justify-center">
        <Pagination
          page={page}
          pageSize={10}
          totalCount={30}
          displayPage={5}
          onPageChange={setPage}
        />
      </div>
      <div className="text-center text-body-3 text-muted-foreground">
        현재 페이지: {page}
      </div>
    </div>
  );
}

로딩 상태 (Skeleton)

데이터를 불러오는 동안 로딩 UI를 표시합니다.

"use client";

import { PaginationSkeleton } from "@/registry/ui/pagination";

export default function Example() {
  return <PaginationSkeleton displayPage={5} />;
}

동작 설명

페이지 계산

totalPage: 전체 페이지 수 = Math.ceil(totalCount / pageSize)
startPage: 현재 표시되는 첫 페이지 번호
endPage: 현재 표시되는 마지막 페이지 번호

버튼 동작

이전 페이지: 현재 페이지 - 1로 이동
다음 페이지: 현재 페이지 + 1로 이동
이전 그룹: 현재 표시된 페이지 그룹의 이전 그룹으로 이동
다음 그룹: 현재 표시된 페이지 그룹의 다음 그룹으로 이동

빠른 이동 버튼 표시 조건

전체 페이지 수가 displayPage보다 클 때만 표시
첫 번째 그룹에 있을 때 "이전 그룹" 버튼 비활성화
마지막 그룹에 있을 때 "다음 그룹" 버튼 비활성화

Pagination

On this page