@tipp/ui 1.3.1 → 1.4.0

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>
   );
 }

package/src/molecules/learning-post.tsx

@@ -26,7 +26,7 @@ export interface LearningPostProps {
   onPageBack?: () => void;
 }
 
-export function LearningPost(props: LearningPostProps): React.ReactNode {
+export function LearningPost(props: LearningPostProps): React.ReactElement {
   const {
     defaultThemeProps,
     html,