Pagination

Anatomy

• Root: 전체 Pagination을 감싸는 최상위 컨테이너입니다. 접근성을 위해 <nav> 요소로 렌더링됩니다.
• Previous Button: 이전 페이지로 이동합니다. 첫 번째 페이지에서는 비활성화됩니다.
• Next Button: 다음 페이지로 이동합니다. 마지막 페이지에서는 비활성화됩니다.
• Page Link: 특정 페이지 번호로 직접 이동하는 링크입니다. 현재 페이지는 Selected 상태로 표시됩니다.
• Ellipsis: 표시할 수 없는 페이지 범위를 …으로 축약하여 나타냅니다. 인터랙션이 없는 요소입니다.

Properties

State

• Enabled: 기본 상태입니다.
• Hover: 커서가 올라간 상태입니다.
• Focus: 키보드 탐색 시 포커스를 받은 상태입니다.
• Pressed: 클릭하는 순간의 상태입니다.

Guidelines

Pagination 사용하기

콘텐츠가 여러 페이지로 나뉘어 있고, 사용자가 특정 페이지로 직접 이동하거나 현재 위치를 파악해야 할 때 사용합니다. 검색결과, 게시판 목록이 대표적인 사용 맥락입니다.

Pagination은 콘텐츠 목록 하단에 배치하며, 가운데 정렬을 기본으로 합니다.

아래와 같은 경우에는 Pagination 대신 다른 방법을 고려합니다.

• 데이터 테이블: Table Pagination을 사용합니다.
• 단계적 흐름 (온보딩, 폼 진행 등): 스텝 인디케이터나 버튼 조합을 사용합니다.
• 콘텐츠 양이 적은 경우: 전체 길이가 화면 3~4개 분량 이하라면 페이지 분리 없이 한 번에 표시하는 것을 권장합니다.

슬롯 수와 Ellipsis 처리

총 슬롯 수는 화살표와 빈 내비게이션 슬롯을 포함해 화면 크기별로 고정합니다. 첫 페이지와 마지막 페이지에서는 사용할 수 없는 화살표 대신 40px 빈 슬롯을 유지해 페이지가 바뀌어도 버튼 위치와 전체 너비가 흔들리지 않습니다.

• 기본 (480px 이상): 총 슬롯 9개
• 좁은 화면 (480px 미만): 총 슬롯 7개

Pagination VS Table Pagination

데이터 테이블에서는 Pagination 대신 Table Pagination을 사용합니다.

데이터 테이블에서 사용자의 주요 행동은 페이지 번호로 이동하는 것보다 정렬, 필터로 원하는 데이터를 찾거나 순차적으로 훑어보는 것이기 때문에, 한 번에 몇 개를 볼지(Rows Per Page)와 현재 범위(Page Range)를 제어할 수 있는 별도 컴포넌트가 필요합니다.

Specification

Pagination Button

base

Pagination Page Item

base