Pagination
Pagination은 긴 목록이나 검색 결과를 여러 페이지로 나눠 탐색하는 네비게이션 컴포넌트입니다.
Figma 컴포넌트: Pagination
Page
상단 보더가 있는 풀-와이드 형태로, 테이블이나 콘텐츠 목록 하단에 사용합니다.
Page default
좌우 끝에 Previous / Next 링크, 가운데에 페이지 번호를 배치한 기본 형태입니다.
Page minimal center aligned
좌우 화살표 버튼과 가운데 Page X of Y 라벨로 구성된 미니멀 형태입니다.
Card
상단 보더 없이 카드/컨테이너 안에서 사용하는 형태입니다.
Card default
좌측 ← Previous, 우측 Next →, 가운데 페이지 번호로 구성됩니다.
Card minimal
Page X of Y 라벨과 Previous / Next 버튼을 좌·중·우로 정렬할 수 있습니다.
Card button group
Previous, 페이지 번호들, Next가 하나의 보더 그룹으로 묶인 형태입니다.
Shape
페이지 번호와 화살표 버튼의 모양을 square (둥근 사각형) 또는 circle (원형)로 설정할 수 있습니다.
Interactive
페이지 번호 / 화살표 / Previous·Next 버튼을 클릭하면 현재 페이지가 변경됩니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'page-default' | 'page-minimal' | 'card-default' | 'card-minimal' | 'card-button-group' | 'page-default' | Pagination 형태 |
align | 'left' | 'center' | 'right' | 'center' | 정렬 (card-minimal, card-button-group에서만 사용) |
shape | 'square' | 'circle' | 'square' | 페이지 번호 / 화살표 버튼의 모양 |
currentPage | number | 1 | 현재 페이지 (1-based) |
totalPages | number | 10 | 전체 페이지 수 |
onPageChange | (page: number) => void | - | 페이지가 변경될 때 호출되는 콜백 |
Figma Variants
| Property | Values |
|---|---|
| Type | Page default Page minimal center aligned Card default Card minimal right aligned Card minimal left aligned Card minimal center aligned Card button group right aligned Card button group left aligned Card button group center aligned |
| Shape | Square Circle |
| Breakpoint | Desktop Mobile |