Pagination

페이지네이션 컴포넌트입니다.

개요

Pagination은 많은 데이터를 여러 페이지로 나누어 표시하는 네비게이션 컴포넌트입니다. iCignal Pagination은 iCignal 브랜드 스타일이 적용되어 있으며, 대량의 분석 데이터와 리포트 목록에 최적화되어 있습니다. Foundation Pagination의 모든 기능을 상속합니다.

주요 특징:

페이지 번호 표시
이전/다음 버튼
iCignal 브랜드 강조 색상

사용 사례:

iCignal 데이터 테이블 페이지네이션
리포트 목록 네비게이션
검색 결과 페이지
로그 목록 페이지

알림: 이 컴포넌트는 현재 구현 중입니다.

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Button } from "@vortex/ui-icignal";
 
<div className="flex items-center gap-sm">
  <Button variant="outline" size="sm">
    이전
  </Button>
  <Button variant="outline" size="sm">
    1
  </Button>
  <Button variant="primary" size="sm">
    2
  </Button>
  <Button variant="outline" size="sm">
    3
  </Button>
  <Button variant="outline" size="sm">
    다음
  </Button>
</div>;

iCignal 브랜딩

iCignal 특화 사용 가이드

데이터 테이블 페이지네이션:


import { Button } from "@vortex/ui-icignal";
import { ChevronLeft, ChevronRight } from "lucide-react";
 
<div className="flex items-center justify-between p-md border-t">
  <div className="text-sm text-gray-600">
    총 <span className="font-medium">1,234</span>개 중{" "}
    <span className="font-medium">1-50</span>개 표시
  </div>
 
  <div className="flex items-center gap-sm">
    <Button variant="outline" size="sm">
      <ChevronLeft size={16} />
    </Button>
    <Button variant="outline" size="sm">
      1
    </Button>
    <Button variant="primary" size="sm">
      2
    </Button>
    <Button variant="outline" size="sm">
      3
    </Button>
    <Button variant="outline" size="sm">
      ...
    </Button>
    <Button variant="outline" size="sm">
      25
    </Button>
    <Button variant="outline" size="sm">
      <ChevronRight size={16} />
    </Button>
  </div>
</div>;

리포트 목록 페이지네이션:


import { Button } from "@vortex/ui-icignal";
 
<div className="flex items-center justify-center gap-sm mt-lg">
  <Button variant="outline" size="sm" disabled>
    이전
  </Button>
  <Button variant="primary" size="sm">
    1
  </Button>
  <Button variant="outline" size="sm">
    2
  </Button>
  <Button variant="outline" size="sm">
    3
  </Button>
  <Button variant="outline" size="sm">
    4
  </Button>
  <Button variant="outline" size="sm">
    5
  </Button>
  <Button variant="outline" size="sm">
    다음
  </Button>
</div>;

Foundation과의 차이점

속성	Foundation	iCignal
활성 색상	중립 블루	iCignal Blue (`#2196f3`)
브랜드 적용	없음	iCignal 버튼 스타일
사용 맥락	범용	Analytics 데이터 목록
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

사용 패턴 차이:


// Foundation - 범용 페이지네이션
<Pagination currentPage={2} totalPages={10} />
 
// iCignal - Analytics 데이터 페이지네이션
<div className="flex justify-between items-center">
  <span>총 1,234건</span>
  <Pagination currentPage={2} totalPages={25} />
</div>

Props API

Prop	Type	Default	Description
currentPage	number	1	현재 페이지
totalPages	number	-	전체 페이지 수
onPageChange	(page) => void	-	페이지 변경 핸들러

예제

예제 1: iCignal 분석 데이터 테이블


import "@vortex/ui-icignal/theme";
import { Table, Button } from "@vortex/ui-icignal";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useState } from "react";
 
export default function AnalyticsTable() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 25;
  const totalRecords = 1234;
 
  const startRecord = (currentPage - 1) * 50 + 1;
  const endRecord = Math.min(currentPage * 50, totalRecords);
 
  return (
    <div>
      <Table>{/* Table content */}</Table>
 
      <div className="flex items-center justify-between p-md border-t mt-md">
        <div className="text-sm text-gray-600">
          총{" "}
          <span className="font-medium">{totalRecords.toLocaleString()}</span>개
          중{" "}
          <span className="font-medium">
            {startRecord}-{endRecord}
          </span>
          개 표시
        </div>
 
        <div className="flex items-center gap-sm">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setCurrentPage(currentPage - 1)}
            disabled={currentPage === 1}
          >
            <ChevronLeft size={16} className="mr-xs" />
            이전
          </Button>
 
          {[1, 2, 3, "...", totalPages - 1, totalPages].map((page, index) => (
            <Button
              key={index}
              variant={page === currentPage ? "primary" : "outline"}
              size="sm"
              onClick={() => typeof page === "number" && setCurrentPage(page)}
              disabled={page === "..."}
            >
              {page}
            </Button>
          ))}
 
          <Button
            variant="outline"
            size="sm"
            onClick={() => setCurrentPage(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            다음
            <ChevronRight size={16} className="ml-xs" />
          </Button>
        </div>
      </div>
    </div>
  );
}