@tipp/ui 1.3.2 → 1.4.0

package/dist/molecules/tag-selector.js

@@ -1,63 +1,63 @@
 import {
   TagSelector
-} from "../chunk-MKYNSWMI.js";
+} from "../chunk-P7633BEQ.js";
 import "../chunk-76JGDATZ.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-ILRUXI2E.js";
 import "../chunk-JPIZP2PZ.js";
 import "../chunk-CYYWMYE7.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
 import "../chunk-3JRNKBMN.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
-import "../chunk-FR2GDOU2.js";
-import "../chunk-74DX4CU7.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-RJMSUTBQ.js";
+import "../chunk-5X3BCQPR.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
-import "../chunk-FPD73OHW.js";
+import "../chunk-DJN2IEY6.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
 import "../chunk-O3T3TM3V.js";
 import "../chunk-O3DNDMV3.js";
-import "../chunk-XQOL7UBI.js";
-import "../chunk-TULWX7D6.js";
+import "../chunk-LZJR77Q2.js";
+import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-6AJTMXLJ.js";
 import "../chunk-HJQQMAUB.js";
 import "../chunk-4WFMOFN2.js";
 import "../chunk-WKFZ5MMN.js";
 import "../chunk-ACVANQJ4.js";
-import "../chunk-2DZ2Y3JI.js";
-import "../chunk-QDZS4B6A.js";
 import "../chunk-52MVZ6AN.js";
-import "../chunk-25HMMI7R.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-P3YCIJUP.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
 import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
 import "../chunk-LHCDPZ5E.js";
 import "../chunk-OHMOP5PV.js";
-import "../chunk-LZJR77Q2.js";
-import "../chunk-Q37G2GS6.js";
+import "../chunk-66C4U3BG.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
 import "../chunk-3SSSCLJ5.js";
 import "../chunk-EWD4AO5N.js";
 import "../chunk-YGL6SWKN.js";
-import "../chunk-4Y5BEXVN.js";
-import "../chunk-P3YCIJUP.js";
-import "../chunk-66C4U3BG.js";
 import "../chunk-N552FDTV.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -54,8 +54,8 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/typescript-config": "1.0.0",
-    "@tipp/eslint-config": "1.0.0"
+    "@tipp/eslint-config": "1.0.0",
+    "@tipp/typescript-config": "1.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/atoms/pagination.tsx

@@ -11,7 +11,7 @@ import { Flex } from './flex';
 import { Typo } from './typo';
 
 export interface PaginationProps {
-  /** 현재 선택된 페이지 */
+  /** 현재 선택된 페이지, 1부터 시작 */
   page?: number;
   /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */
   defaultPage?: number;
@@ -19,6 +19,7 @@ export interface PaginationProps {
   onChange?: (page: number) => void;
   /** 전체 페이지의 수 */
   count?: number;
+  /** 표시할 페이지 버튼의 개수 */
   siblingCount?: number;
 }
 
@@ -98,8 +99,6 @@ export function Pagination(props: PaginationProps): React.ReactNode {
     style: { borderRadius: '50%' },
   };
 
-  if (!page) return null;
-
   return (
     <Flex align="center" className="tipp-pagination" gap="4">
       <IconButton

package/src/molecules/expand-table/index.tsx

@@ -3,6 +3,7 @@ import type {
   SortingState,
   RowData,
   Row as RowType,
+  PaginationState,
 } from '@tanstack/react-table';
 import type { CSSProperties } from 'react';
 import {
@@ -11,9 +12,10 @@ import {
   useReactTable,
   getSortedRowModel,
   createColumnHelper,
+  getPaginationRowModel,
 } from '@tanstack/react-table';
-import React, { useMemo, useState } from 'react';
-import { Flex, Typo } from '../../atoms';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Flex, Pagination, Spinner, Typo } from '../../atoms';
 import { TriangleArrowDownIcon } from '../../icons/down';
 import { TriangleArrowUpIcon } from '../../icons/up';
 import { Row, type ExpandComp, type OnRowClick } from './row';
@@ -34,24 +36,53 @@ export interface ExpandTableProps<Datum extends RowData> {
   onRowClick?: OnRowClick<Datum>;
   rowStyle?: CSSProperties;
   tableStyle?: CSSProperties;
+  isLoading?: boolean;
+
+  /** pagination - 표시 유무 */
+  showPagination?: boolean;
+  /** pagination - 현재 선택된 페이지, 0부터 시작 */
+  pageIndex?: number;
+  /** pagination - 한 페이지에 표시될 컬럼 개수 */
+  pageSize?: number;
+  /** pagination -  */
+  siblingCount?: number;
 }
 
 export function ExpandTable<Datum extends RowData>(
   props: ExpandTableProps<Datum>
 ): React.ReactNode {
-  const { data, columns, ExpandComp, placeholder, onRowClick, tableStyle } =
-    props;
+  const {
+    data,
+    columns,
+    ExpandComp,
+    placeholder,
+    onRowClick,
+    tableStyle,
+    showPagination,
+    isLoading,
+    pageIndex = 0,
+    pageSize = 10,
+    siblingCount = 2,
+  } = props;
   const defaultAlign = 'left';
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: pageIndex || 0,
+    pageSize: pageSize || 9999,
+  });
+
   const [sorting, setSorting] = useState<SortingState>([]);
-  const { getRowModel, getHeaderGroups } = useReactTable({
+  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
     data: data || [],
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     state: {
       sorting,
+      pagination,
     },
     onSortingChange: setSorting,
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
   });
 
   const gridColTemp = useMemo<string>(() => {
@@ -65,6 +96,51 @@ export function ExpandTable<Datum extends RowData>(
 
   const rowModels = getRowModel();
 
+  const onChangePagination = useCallback(
+    (page: number) => {
+      setPageIndex(page - 1);
+    },
+    [setPageIndex]
+  );
+
+  const helpCompRender = useCallback(
+    (rowLength: number) => {
+      if (isLoading) {
+        return (
+          <Flex
+            align="center"
+            height="100%"
+            justify="center"
+            p="5"
+            width="100%"
+          >
+            <Spinner />
+          </Flex>
+        );
+      }
+      if (rowLength === 0) {
+        return (
+          <div className="tr" key="expand_placeholder">
+            <Flex align="center" justify="center">
+              {placeholder || (
+                <Typo color="gray" mb="6" mt="6" variant="body">
+                  데이터가 없습니다
+                </Typo>
+              )}
+            </Flex>
+          </div>
+        );
+      }
+      return null;
+    },
+    [isLoading, placeholder]
+  );
+
+  const pageCount = useMemo(() => {
+    if (!data) return 0;
+    return Math.ceil(data.length / pageSize);
+  }, [data, pageSize]);
+
   return (
     <div className="expand-table" style={tableStyle}>
       <div className="thead">
@@ -122,33 +198,32 @@ export function ExpandTable<Datum extends RowData>(
         ))}
       </div>
       <div className="tbody">
-        {/* 데이터가 없을 시 표시되는 노드 */}
-        {rowModels.rows.length === 0 && (
-          <div className="tr" key="expand_placeholder">
-            <Flex align="center" justify="center">
-              {placeholder || (
-                <Typo color="gray" mb="6" mt="6" variant="body">
-                  데이터가 없습니다
-                </Typo>
-              )}
-            </Flex>
-          </div>
-        )}
-
-        {/* 행을 렌더하는 로직 */}
-        {rowModels.rows.map((row) => {
-          return (
-            <Row
-              ExpandComp={ExpandComp}
-              defaultAlign={defaultAlign}
-              gridColTemp={gridColTemp}
-              key={`row_${row.id}`}
-              onRowClick={onRowClick}
-              row={row}
-            />
-          );
-        })}
+        {/* 조건에 따라 placeholder 또는 loading 렌더*/}
+        {helpCompRender(rowModels.rows.length) ||
+          rowModels.rows.map((row) => {
+            return (
+              <Row
+                ExpandComp={ExpandComp}
+                defaultAlign={defaultAlign}
+                gridColTemp={gridColTemp}
+                key={`row_${row.id}`}
+                onRowClick={onRowClick}
+                row={row}
+              />
+            );
+          })}
       </div>
+
+      {showPagination ? (
+        <Flex justify="end" pt="3" width="100%">
+          <Pagination
+            count={pageCount}
+            onChange={onChangePagination}
+            page={pagination.pageIndex + 1}
+            siblingCount={siblingCount}
+          />
+        </Flex>
+      ) : null}
     </div>
   );
 }