Pagination

페이지 간 이동을 위한 페이지네이션 컴포넌트

개요

Pagination 컴포넌트는 콘텐츠를 여러 페이지로 나누어 탐색할 수 있도록 페이지 번호, 이전/다음 버튼, 생략 표시를 제공합니다. 시맨틱한 nav + ul/li 구조와 Button 컴포넌트 기반 링크로 구성됩니다.

주요 특징

• ✅ 컴파운드 컴포넌트: Content, Item, Link, Previous, Next, Ellipsis 조합
• ✅ 활성 페이지 표시: isActive prop으로 현재 페이지 강조
• ✅ 반응형 텍스트: Previous/Next 텍스트는 작은 화면에서 자동 숨김
• ✅ 커스텀 텍스트: text prop으로 이전/다음 라벨 변경
• ✅ 접근성: aria-label="pagination", aria-current="page" 자동 적용
• ✅ 디자인 토큰: 테마 커스터마이징 지원

구조 (Anatomy)

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

사용 예시

기본 사용

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

커스텀 라벨

text prop으로 이전/다음 버튼의 텍스트를 변경할 수 있습니다.

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" text="이전" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" text="다음" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API Reference

Pagination

페이지네이션의 루트 컴포넌트입니다. nav 요소를 렌더링합니다.

PaginationContent

페이지 아이템들을 나열하는 ul 컨테이너입니다.

PaginationItem

개별 페이지 항목을 감싸는 li 요소입니다.

PaginationLink

페이지 번호 링크입니다. Button 컴포넌트 기반으로 a 요소를 렌더링합니다.

PaginationPrevious / PaginationNext

이전/다음 페이지 이동 링크입니다. 셰브론 아이콘이 자동 포함되며, 텍스트는 sm breakpoint 미만에서 숨겨집니다.

PaginationEllipsis

생략된 페이지를 나타내는 표시기입니다.

기본 사용법

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@vortex/ui-foundation"
 
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="/page/1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/2" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="/page/3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

접근성

시맨틱 마크업

• nav 요소에 role="navigation"과 aria-label="pagination" 자동 적용
• 활성 링크에 aria-current="page" 자동 설정
• Ellipsis는 aria-hidden 처리되고 스크린 리더용 “More pages” 텍스트 제공
• Previous/Next 링크에 aria-label(“Go to previous/next page”) 자동 설정

권장 사항

• ✅ 현재 페이지에 반드시 isActive 적용
• ✅ 페이지 수가 많을 때 PaginationEllipsis로 생략 표시
• ❌ 무한 스크롤이 적합한 콘텐츠에는 사용하지 않기

관련 컴포넌트

• Button: PaginationLink의 기반 버튼
• Table: 페이지네이션과 함께 사용하는 데이터 테이블
• Tabs: 콘텐츠 탭 전환