@idbrnd/design-system 1.13.3 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -45
- package/dist/components/Pagination/Pagination.d.ts +5 -0
- package/dist/components/{Table/Pagination → Pagination}/Pagination.types.d.ts +16 -6
- package/dist/dev/pages/PaginationPage.d.ts +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1726 -1716
- package/package.json +1 -1
- package/dist/components/Table/Pagination/Pagination.d.ts +0 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -1369,18 +1369,24 @@ npm install @tanstack/react-table
|
|
|
1369
1369
|
```tsx
|
|
1370
1370
|
import { TableContainer, Table, Pagination } from "@idbrnd/design-system";
|
|
1371
1371
|
|
|
1372
|
+
// normal: 외곽선 + border-radius (단독 사용)
|
|
1373
|
+
<TableContainer variant="normal">
|
|
1374
|
+
<Table table={table} variant="normal" />
|
|
1375
|
+
<Pagination ... />
|
|
1376
|
+
</TableContainer>
|
|
1377
|
+
|
|
1378
|
+
// content: 외곽선 없음 (다른 컴포넌트 내부에 삽입할 때)
|
|
1372
1379
|
<TableContainer variant="content">
|
|
1373
1380
|
<Table table={table} variant="content" />
|
|
1374
|
-
<Pagination ... />
|
|
1375
1381
|
</TableContainer>
|
|
1376
1382
|
```
|
|
1377
1383
|
|
|
1378
|
-
| Prop | 타입 | 기본값 | 설명
|
|
1379
|
-
| ------------- | ------------------------- | ---------- |
|
|
1380
|
-
| `variant` | `"normal"` \| `"content"` | `"normal"` | `Table` variant와 동일하게 설정. `
|
|
1381
|
-
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일
|
|
1382
|
-
| `className` | `string` | — | 추가 클래스명
|
|
1383
|
-
| `children` | `ReactNode` | — | `Table`, `Pagination` 등
|
|
1384
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
1385
|
+
| ------------- | ------------------------- | ---------- | ----------------------------------------------------------------------------------------- |
|
|
1386
|
+
| `variant` | `"normal"` \| `"content"` | `"normal"` | `Table` variant와 동일하게 설정. `normal`: 외곽선 + border-radius, `content`: 외곽선 없음 |
|
|
1387
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
1388
|
+
| `className` | `string` | — | 추가 클래스명 |
|
|
1389
|
+
| `children` | `ReactNode` | — | `Table`, `Pagination` 등 |
|
|
1384
1390
|
|
|
1385
1391
|
---
|
|
1386
1392
|
|
|
@@ -1455,7 +1461,7 @@ const table = useReactTable({
|
|
|
1455
1461
|
| Prop | 타입 | 기본값 | 설명 |
|
|
1456
1462
|
| ------------------------ | -------------------------------- | ---------- | --------------------------------------------------------------------------- |
|
|
1457
1463
|
| `table` | `Table<TData>` | — | `useReactTable()`로 생성한 TanStack Table 인스턴스 (필수) |
|
|
1458
|
-
| `variant` | `"normal"` \| `"content"` | `"normal"` |
|
|
1464
|
+
| `variant` | `"normal"` \| `"content"` | `"normal"` | `normal`: 외곽선 있음 (헤더 44px, body row 56px), `content`: 외곽선 없음 |
|
|
1459
1465
|
| `selectable` | `boolean` | `false` | 첫 번째 컬럼에 체크박스 표시. `enableRowSelection` 설정 필요 |
|
|
1460
1466
|
| `interactive` | `boolean` | `false` | 행 hover/focus/pressed 인터랙션 활성화 |
|
|
1461
1467
|
| `onRowClick` | `(row: Row<TData>) => void` | — | 행 클릭 콜백. 제공 시 체크박스 없이도 행에 인터랙션 효과 적용 |
|
|
@@ -1547,6 +1553,34 @@ function OrderTable({ userId }: { userId: number }) {
|
|
|
1547
1553
|
|
|
1548
1554
|
### Pagination
|
|
1549
1555
|
|
|
1556
|
+
`@tanstack/react-table` 없이 독립적으로 사용할 수 있는 페이지네이션 컴포넌트입니다.
|
|
1557
|
+
|
|
1558
|
+
**독립 사용 (TanStack Table 불필요)**
|
|
1559
|
+
|
|
1560
|
+
```tsx
|
|
1561
|
+
import { useState } from "react";
|
|
1562
|
+
import { Pagination } from "@idbrnd/design-system";
|
|
1563
|
+
|
|
1564
|
+
function Example() {
|
|
1565
|
+
const [pageIndex, setPageIndex] = useState(0);
|
|
1566
|
+
const pageCount = 20;
|
|
1567
|
+
|
|
1568
|
+
return (
|
|
1569
|
+
<Pagination
|
|
1570
|
+
pageIndex={pageIndex}
|
|
1571
|
+
pageCount={pageCount}
|
|
1572
|
+
onPageChange={setPageIndex}
|
|
1573
|
+
canPreviousPage={pageIndex > 0}
|
|
1574
|
+
canNextPage={pageIndex < pageCount - 1}
|
|
1575
|
+
onPreviousPage={() => setPageIndex((p) => p - 1)}
|
|
1576
|
+
onNextPage={() => setPageIndex((p) => p + 1)}
|
|
1577
|
+
/>
|
|
1578
|
+
);
|
|
1579
|
+
}
|
|
1580
|
+
```
|
|
1581
|
+
|
|
1582
|
+
**TanStack Table과 함께 사용**
|
|
1583
|
+
|
|
1550
1584
|
```tsx
|
|
1551
1585
|
import { Pagination } from "@idbrnd/design-system";
|
|
1552
1586
|
import {
|
|
@@ -1569,57 +1603,71 @@ const table = useReactTable({
|
|
|
1569
1603
|
getPaginationRowModel: getPaginationRowModel(),
|
|
1570
1604
|
});
|
|
1571
1605
|
|
|
1572
|
-
// 기본
|
|
1573
1606
|
<Pagination
|
|
1574
|
-
|
|
1607
|
+
pageIndex={table.getState().pagination.pageIndex}
|
|
1575
1608
|
pageCount={table.getPageCount()}
|
|
1609
|
+
onPageChange={(idx) => table.setPageIndex(idx)}
|
|
1576
1610
|
canPreviousPage={table.getCanPreviousPage()}
|
|
1577
1611
|
canNextPage={table.getCanNextPage()}
|
|
1578
1612
|
onPreviousPage={() => table.previousPage()}
|
|
1579
1613
|
onNextPage={() => table.nextPage()}
|
|
1580
|
-
|
|
1614
|
+
variant="extended"
|
|
1615
|
+
boundary
|
|
1616
|
+
/>;
|
|
1617
|
+
```
|
|
1618
|
+
|
|
1619
|
+
**variant / boundary / trailingContent**
|
|
1581
1620
|
|
|
1582
|
-
|
|
1621
|
+
```tsx
|
|
1622
|
+
// compact + 첫/끝 고정 + 페이지 이동 입력란
|
|
1583
1623
|
<Pagination
|
|
1584
|
-
|
|
1585
|
-
pageCount={
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1624
|
+
pageIndex={pageIndex}
|
|
1625
|
+
pageCount={pageCount}
|
|
1626
|
+
onPageChange={setPageIndex}
|
|
1627
|
+
canPreviousPage={pageIndex > 0}
|
|
1628
|
+
canNextPage={pageIndex < pageCount - 1}
|
|
1629
|
+
onPreviousPage={() => setPageIndex((p) => p - 1)}
|
|
1630
|
+
onNextPage={() => setPageIndex((p) => p + 1)}
|
|
1590
1631
|
variant="compact"
|
|
1632
|
+
boundary
|
|
1591
1633
|
trailingContent
|
|
1592
1634
|
/>
|
|
1593
1635
|
|
|
1594
|
-
//
|
|
1636
|
+
// minimize + 페이지 이동 입력란을 맨 우측에 고정
|
|
1595
1637
|
<Pagination
|
|
1596
|
-
|
|
1597
|
-
pageCount={
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1638
|
+
pageIndex={pageIndex}
|
|
1639
|
+
pageCount={pageCount}
|
|
1640
|
+
onPageChange={setPageIndex}
|
|
1641
|
+
canPreviousPage={pageIndex > 0}
|
|
1642
|
+
canNextPage={pageIndex < pageCount - 1}
|
|
1643
|
+
onPreviousPage={() => setPageIndex((p) => p - 1)}
|
|
1644
|
+
onNextPage={() => setPageIndex((p) => p + 1)}
|
|
1645
|
+
variant="minimize"
|
|
1646
|
+
trailingContent
|
|
1647
|
+
isTrailingContentEnd
|
|
1603
1648
|
/>
|
|
1604
1649
|
```
|
|
1605
1650
|
|
|
1606
|
-
| Prop
|
|
1607
|
-
|
|
|
1608
|
-
| `
|
|
1609
|
-
| `pageCount`
|
|
1610
|
-
| `
|
|
1611
|
-
| `
|
|
1612
|
-
| `
|
|
1613
|
-
| `
|
|
1614
|
-
| `
|
|
1615
|
-
| `
|
|
1616
|
-
| `
|
|
1617
|
-
| `
|
|
1618
|
-
| `
|
|
1619
|
-
| `
|
|
1620
|
-
| `
|
|
1621
|
-
| `
|
|
1622
|
-
| `
|
|
1651
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
1652
|
+
| ---------------------- | ------------------------------------------- | --------------- | -------------------------------------------------------------------------- |
|
|
1653
|
+
| `pageIndex` | `number` | — | **(필수)** 현재 페이지 인덱스 (0-based) |
|
|
1654
|
+
| `pageCount` | `number` | — | **(필수)** 전체 페이지 수 |
|
|
1655
|
+
| `onPageChange` | `(pageIndex: number) => void` | — | **(필수)** 페이지 번호 클릭 시 호출. 0-based 인덱스 전달 |
|
|
1656
|
+
| `canPreviousPage` | `boolean` | — | **(필수)** 이전 버튼 활성화 여부 |
|
|
1657
|
+
| `canNextPage` | `boolean` | — | **(필수)** 다음 버튼 활성화 여부 |
|
|
1658
|
+
| `onPreviousPage` | `() => void` | — | **(필수)** 이전 버튼 클릭 콜백 |
|
|
1659
|
+
| `onNextPage` | `() => void` | — | **(필수)** 다음 버튼 클릭 콜백 |
|
|
1660
|
+
| `variant` | `"extended"` \| `"compact"` \| `"minimize"` | `"extended"` | `extended`: 최대 10개, `compact`: 최대 7개, `minimize`: 현재/전체 텍스트만 |
|
|
1661
|
+
| `boundary` | `boolean` | `true` | `false`: 슬라이딩 윈도우, `true`: 첫·끝 페이지 고정 + `...` 생략 |
|
|
1662
|
+
| `trailingContent` | `boolean` | `false` | 우측에 "페이지 이동" 입력란 표시 |
|
|
1663
|
+
| `trailingContentGap` | `number \| string` | `40` | 버튼 그룹과 입력란 사이 간격. 숫자는 px로 자동 변환 |
|
|
1664
|
+
| `isTrailingContentEnd` | `boolean` | `false` | `true`이면 입력란을 컨테이너 맨 우측에 고정 |
|
|
1665
|
+
| `prevLabel` | `string` | `"이전"` | 이전 버튼 레이블 |
|
|
1666
|
+
| `nextLabel` | `string` | `"다음"` | 다음 버튼 레이블 |
|
|
1667
|
+
| `jumpLabel` | `string` | `"페이지 이동"` | 페이지 이동 입력란 레이블 |
|
|
1668
|
+
| `loading` | `boolean` | `false` | 로딩 스켈레톤 표시 |
|
|
1669
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
1670
|
+
| `className` | `string` | — | 추가 클래스명 |
|
|
1623
1671
|
|
|
1624
1672
|
---
|
|
1625
1673
|
|
|
@@ -1856,8 +1904,9 @@ import type {
|
|
|
1856
1904
|
- `Select`와 `Dropdown`의 드롭다운 목록은 `document.body`에 포탈로 렌더링되므로 브라우저 환경에서만 동작합니다.
|
|
1857
1905
|
- `Select`는 폼 필드용, `Dropdown`은 컨텍스트 메뉴/액션 드롭다운용으로 사용을 권장합니다.
|
|
1858
1906
|
- `Table`은 `@tanstack/react-table`의 `useReactTable()`로 생성한 인스턴스를 필수로 받습니다. TanStack Table을 별도 설치해야 합니다.
|
|
1859
|
-
- `TableContainer
|
|
1907
|
+
- `TableContainer`와 `Table`의 `variant`는 반드시 동일하게 맞춰야 합니다. `normal`: 외곽선 + border-radius, `content`: 외곽선 없음.
|
|
1860
1908
|
- `Table`에서 `selectable` 사용 시 `useReactTable`에 `enableRowSelection`, `state.rowSelection`, `onRowSelectionChange`를 함께 설정해야 합니다.
|
|
1861
1909
|
- `Table`에서 `accordion` 사용 시 정렬·필터 기능과 함께 쓴다면 `useReactTable`에 `getRowId: (row) => String(row.id)`를 설정해야 합니다. 기본값(배열 인덱스)은 정렬 변경 시 엉뚱한 행이 펼쳐진 상태가 됩니다.
|
|
1910
|
+
- `Pagination`은 TanStack Table 없이 독립적으로 사용할 수 있습니다. TanStack Table과 함께 쓸 경우 `pageIndex`, `onPageChange` 등을 직접 연결해야 합니다.
|
|
1862
1911
|
- `Pagination`에서 서버사이드 페이지네이션을 사용할 경우 `pageCount`를 서버 응답 기준으로 직접 계산해 전달해야 합니다.
|
|
1863
1912
|
- CSS 변수/타이포그래피를 포함한 스타일을 위해 `@idbrnd/design-system/style.css` import를 권장합니다.
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { PaginationProps, PaginationVariant } from "./Pagination.types";
|
|
2
|
+
export type { PaginationVariant };
|
|
3
|
+
export type { PaginationProps };
|
|
4
|
+
declare function Pagination({ pageIndex, pageCount, onPageChange, canPreviousPage, canNextPage, onPreviousPage, onNextPage, variant, boundary, trailingContent, trailingContentGap, isTrailingContentEnd, loading, prevLabel, nextLabel, jumpLabel, customStyle, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export default Pagination;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import type { CSSProperties } from "react";
|
|
2
|
-
import type { Table } from "@tanstack/react-table";
|
|
3
2
|
export type PaginationVariant = "extended" | "compact" | "minimize";
|
|
4
|
-
export interface PaginationProps
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
/** 전체 페이지 수
|
|
3
|
+
export interface PaginationProps {
|
|
4
|
+
/** 현재 페이지 인덱스 (0-based) */
|
|
5
|
+
pageIndex: number;
|
|
6
|
+
/** 전체 페이지 수 */
|
|
8
7
|
pageCount: number;
|
|
9
|
-
/**
|
|
8
|
+
/** 페이지 변경 콜백 — 0-based 인덱스를 전달 */
|
|
9
|
+
onPageChange: (pageIndex: number) => void;
|
|
10
|
+
/** 이전 버튼 활성화 여부 */
|
|
10
11
|
canPreviousPage: boolean;
|
|
12
|
+
/** 다음 버튼 활성화 여부 */
|
|
11
13
|
canNextPage: boolean;
|
|
12
14
|
/** 이전 페이지 이동 콜백 */
|
|
13
15
|
onPreviousPage: () => void;
|
|
@@ -30,6 +32,14 @@ export interface PaginationProps<TData> {
|
|
|
30
32
|
* @defaultValue `false`
|
|
31
33
|
*/
|
|
32
34
|
trailingContent?: boolean;
|
|
35
|
+
/** 버튼 그룹과 trailingContent 사이 간격 (px 숫자 또는 CSS 문자열)
|
|
36
|
+
* @defaultValue `40`
|
|
37
|
+
*/
|
|
38
|
+
trailingContentGap?: number | string;
|
|
39
|
+
/** trailingContent를 컨테이너 맨 끝(우측)에 붙일지 여부
|
|
40
|
+
* @defaultValue `false`
|
|
41
|
+
*/
|
|
42
|
+
isTrailingContentEnd?: boolean;
|
|
33
43
|
/** 이전 버튼 레이블
|
|
34
44
|
* @defaultValue `'이전'`
|
|
35
45
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function PaginationPage(): import("react/jsx-runtime").JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -62,6 +62,6 @@ export { default as Table } from "./components/Table/Table";
|
|
|
62
62
|
export type { TableProps, TableVariant, } from "./components/Table/Table.types";
|
|
63
63
|
export { default as TableContainer } from "./components/Table/TableContainer";
|
|
64
64
|
export type { TableContainerProps } from "./components/Table/TableContainer";
|
|
65
|
-
export { default as Pagination } from "./components/
|
|
66
|
-
export type { PaginationProps, PaginationVariant, } from "./components/
|
|
65
|
+
export { default as Pagination } from "./components/Pagination/Pagination";
|
|
66
|
+
export type { PaginationProps, PaginationVariant, } from "./components/Pagination/Pagination.types";
|
|
67
67
|
export * from "./icons";
|