CorePagination

Usage

기본 사용법 (onPageChange 사용)

import { useState } from 'react';
import { CorePagination } from '@featuring-corp/components';

const [activePage, setActivePage] = useState(1);

<CorePagination
  totalPage={30}
  activePage={activePage}
  onPageChange={setActivePage}
/>

개별 이벤트 핸들러 사용

import { CorePagination } from '@featuring-corp/components';

<CorePagination
  totalPage={30}
  activePage={1}
  onPageClick={(e) => {
    const page = parseInt(e.currentTarget.textContent || '1');
    console.log('페이지 클릭:', page);
  }}
  onPreviousClick={(e) => {
    console.log('이전 페이지 클릭');
  }}
  onNextClick={(e) => {
    console.log('다음 페이지 클릭');
  }}
  onPreviousGroupClick={(e) => {
    console.log('이전 그룹 클릭');
  }}
  onNextGroupClick={(e) => {
    console.log('다음 그룹 클릭');
  }}
/>

최대 표시 페이지 수 설정

import { useState } from 'react';
import { CorePagination } from '@featuring-corp/components';

const [activePage, setActivePage] = useState(1);

<CorePagination
  totalPage={30}
  activePage={activePage}
  onPageChange={setActivePage}
  maxVisible={10}
/>

그룹 이동 아이콘 숨기기

import { useState } from 'react';
import { CorePagination } from '@featuring-corp/components';

const [activePage, setActivePage] = useState(1);

<CorePagination
  totalPage={30}
  activePage={activePage}
  onPageChange={setActivePage}
  showMoveGroupIcon={false}
/>

제어된 컴포넌트 예제

import { useState } from 'react';
import { CorePagination } from '@featuring-corp/components';

const PaginationExample = () => {
  const [activePage, setActivePage] = useState(1);
  const totalPage = 30;

  const handlePageChange = (page: number) => {
    setActivePage(page);
    // 페이지 변경 시 API 호출 등
    console.log('페이지 변경:', page);
  };

  return (
    <CorePagination
      totalPage={totalPage}
      activePage={activePage}
      onPageChange={handlePageChange}
    />
  );
};

Props

Prop

Type

스타일

기본 스타일 속성

Pagination Group:

display: flex

Pagination Item:

display: flex
justify-content: center
padding: spacing-150 (6px)
height: 40px

Pagination Inner Item:

display: flex
justify-content: center
padding-x: spacing-250 (10px)
border-radius: radius-100
height: 28px
transition: 0.2s
position: relative

Pagination Icon:

display: flex
justify-content: center
height: 40px
width: 40px
cursor: pointer

Active State

Active: typography: heading[2], color: text-1, 하단에 2px 높이의 primary[60] 색상 바 표시 (width: calc(100% - 12px), min-width: 16px)
Inactive: typography: body[2], color: text-3
Hover: background-color: primary-10, color: text-1
Focus: box-shadow: 0 0 0 2px focus 색상

States (상태별 토큰)

Pagination Inner Item:

Default: typography: body[2], color: text-3 (active: off)
Hover: background-color: primary-10, color: text-1
Active: color: text-1 (active: on)
Focus-visible: box-shadow: 0 0 0 2px focus 색상
Active (on): typography: heading[2], color: text-1, 하단에 2px 높이의 primary[60] 색상 바 표시 (width: calc(100% - 12px), min-width: 16px)

Pagination Icon:

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

On this page