CorePagination

총 페이지 수와 현재 페이지를 기반으로 렌더링되는 페이지네이션 컴포넌트. Pagination으로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Pagination을 사용하세요.

CorePagination은 totalPage·activePage를 prop으로 받아 페이지 번호 목록을 렌더링하는 완전 제어 컴포넌트입니다.

onPageChange — 페이지 변경 시 번호를 받는 단일 핸들러 (권장)
세분화 핸들러 — onPageClick, onPreviousClick, onNextClick, onPreviousGroupClick, onNextGroupClick 개별 제어
maxVisible — 한 번에 표시할 페이지 번호 수 (기본 5)
showMoveGroupIcon — 첫 페이지·끝 페이지 그룹 이동 버튼 표시 여부
현재 그룹 앞뒤에 첫/마지막 페이지와 줄임표(...) 자동 표시

Usage

기본 사용법

() => {
const [page, setPage] = React.useState(1);
return (
  <CorePagination
    totalPage={30}
    activePage={page}
    onPageChange={setPage}
  />
);
}

최대 표시 페이지 수 설정

maxVisible로 한 번에 보이는 페이지 번호 수를 조정합니다.

() => {
const [page, setPage] = React.useState(1);
return (
  <CorePagination
    totalPage={50}
    activePage={page}
    onPageChange={setPage}
    maxVisible={10}
  />
);
}

그룹 이동 아이콘 숨기기

showMoveGroupIcon={false}로 양쪽 끝 그룹 이동 버튼을 제거합니다.

() => {
const [page, setPage] = React.useState(1);
return (
  <CorePagination
    totalPage={30}
    activePage={page}
    onPageChange={setPage}
    showMoveGroupIcon={false}
  />
);
}

세분화 핸들러 사용

각 버튼의 이벤트를 개별 핸들러로 세밀하게 제어합니다. onPageChange 없이 사용할 때는 모든 핸들러를 연결해야 합니다.

<CorePagination
  totalPage={30}
  activePage={activePage}
  onPageClick={(e) => {
    const page = parseInt(e.currentTarget.value);
    setActivePage(page);
  }}
  onPreviousClick={() => setActivePage((p) => p - 1)}
  onNextClick={() => setActivePage((p) => p + 1)}
  onPreviousGroupClick={() => setActivePage((p) => p - maxVisible)}
  onNextGroupClick={() => setActivePage((p) => p + maxVisible)}
/>

API 연동 예시

페이지 변경 시 API를 호출하는 전형적인 사용 패턴입니다.

const [page, setPage] = useState(1);
const { data } = useFetch(`/api/list?page=${page}`);

const handlePageChange = (nextPage: number) => {
  setPage(nextPage);
};

<CorePagination
  totalPage={data?.totalPage ?? 0}
  activePage={page}
  onPageChange={handlePageChange}
/>

Props

Prop

Type

스타일

기본 스타일

Pagination Group (ul): display: flex
Pagination Item: display: flex, justify-content: center, padding: spacing-150 (6px), height: 40px
Pagination Inner Item: border-radius: radius-100, height: 28px, transition: 0.2s

States

상태	스타일
Default	`typography: body[2]`, `color: text-3`
Hover	`background-color: primary-10`, `color: text-1`
Active	`typography: heading[2]`, `color: text-1`, 하단 `2px` 바 `primary[60]`
Focus-visible	`box-shadow: 0 0 0 2px focus`

Icon 버튼 States

상태	color
Enabled	`icon-primary`
Disabled	`icon-tertiary`
Ellipsis	`icon-secondary`, `cursor: default`

마이그레이션 가이드

CorePagination에서 Pagination으로 이전하세요.

// Before
<CorePagination
  totalPage={30}
  activePage={page}
  onPageChange={setPage}
  maxVisible={5}
  showMoveGroupIcon
/>

// After
<Pagination.Root total={30} page={page} onPageChange={setPage} groupSize={5}>
  <Pagination.PrevGroupTrigger />
  <Pagination.PrevTrigger />
  <Pagination.Items />
  <Pagination.NextTrigger />
  <Pagination.NextGroupTrigger />
</Pagination.Root>

CorePagination prop	Pagination 대응
`totalPage`	`Pagination.Root total`
`activePage`	`Pagination.Root page`
`maxVisible`	`Pagination.Root groupSize`
`showMoveGroupIcon`	`PrevGroupTrigger` / `NextGroupTrigger` 포함 여부
`onPageChange`	`Pagination.Root onPageChange`
`onPageClick` / `onPreviousClick` / `onNextClick`	`Pagination.Root onPageChange` 단일 핸들러로 통합

On this page