@uniai-fe/ui-legacy 0.1.1

package/src/table/components/tables/basic/Container.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { clsx } from "clsx";
+
+import TableDefaultTemplate from "../common/DefaultTemplate";
+import StyledTable from "../../../styles/styled";
+
+import type { ComponentBaseProps, TableBasicProps } from "../../../../types";
+import ScrollbarContainer from "../../../../scrollbar/components/Container";
+
+/**
+ * 테이블 컴포넌트; basic container
+ * @component
+ * @param {object} props
+ * @param {string} [props.className] - 컴포넌트 클래스명
+ * @param {boolean} [props.isSideBorder] - 테이블 좌우 테두리 여부
+ * @param {TableColumnDataType[]} props.column - 테이블 컬럼 데이터
+ * @param {boolean} [props.isCustom] - 레이아웃 커스텀 여부
+ * @param {React.ReactNode} props.children - 테이블 컴포넌트 자식
+ */
+export default function TableBasicContainer({
+  className,
+  isSideBorder,
+  isBorderTop = true,
+  scroll,
+  ...tableDefaultProps
+}: ComponentBaseProps & TableBasicProps & Partial<{ scroll: boolean }>) {
+  return (
+    <>
+      {isBorderTop && <StyledTable.common.topLine />}
+      {scroll ? (
+        <ScrollbarContainer scrollbarOptions={{ autoHide: true }}>
+          <StyledTable.basic.container
+            className={clsx("basic", className)}
+            $isBorderTop={isBorderTop}
+            $sideBorder={isSideBorder}
+          >
+            <TableDefaultTemplate {...tableDefaultProps} />
+          </StyledTable.basic.container>
+        </ScrollbarContainer>
+      ) : (
+        <StyledTable.basic.container
+          className={clsx("basic", className)}
+          $isBorderTop={isBorderTop}
+          $sideBorder={isSideBorder}
+        >
+          <TableDefaultTemplate {...tableDefaultProps} />
+        </StyledTable.basic.container>
+      )}
+    </>
+  );
+}

package/src/table/components/tables/basic/index.tsx

@@ -0,0 +1,13 @@
+import TableBasicContainer from "./Container";
+
+/**
+ * 테이블 컴포넌트; 기본 타입
+ * @component
+ * @desc
+ * - container: 기본형 테이블 컨테이너
+ */
+const TableBasic = {
+  container: TableBasicContainer,
+};
+
+export default TableBasic;

package/src/table/components/tables/common/Body.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type { ComponentBaseProps } from "../../../../types";
+import StyledTable from "../../../styles/styled";
+
+/**
+ * 테이블; <tbody /> 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ */
+export default function TableBody({
+  className,
+  children,
+  isBorderBottom,
+}: ComponentBaseProps &
+  Partial<{
+    isBorderBottom: boolean;
+  }>) {
+  return (
+    <StyledTable.common.body
+      className={className}
+      $isBorderBottom={isBorderBottom}
+    >
+      {children}
+    </StyledTable.common.body>
+  );
+}

package/src/table/components/tables/common/Cell.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { memo } from "react";
+import StyledTable from "../../../styles/styled";
+import type { TableCellProps, TableCellType } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; <td />, <th />
+ * @component
+ * @param {object} props
+ * @param {"head" | "body"} [props.cellType] 테이블 셀 타입 (기본값 body)
+ * @param {TableCellProps} props.tableCellProps 테이블 셀 속성
+ */
+const TableCell = memo(
+  ({
+    cellType = "body",
+    ...tableCellProps
+  }: {
+    cellType?: TableCellType;
+  } & TableCellProps) => {
+    switch (cellType) {
+      case "head":
+        return <StyledTable.common.th {...tableCellProps} />;
+      case "body":
+        return <StyledTable.common.td {...tableCellProps} />;
+      default:
+        return <StyledTable.common.td {...tableCellProps} />;
+    }
+  },
+);
+
+export default TableCell;

package/src/table/components/tables/common/CellWrap.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import StyledTable from "../../../styles/styled";
+import type { ComponentBaseProps } from "../../../../types";
+
+/**
+ * 테이블; table cell 내부 컨텐츠 묶음 단위 컴포넌트
+ * @component
+ * @param {ComponentBaseProps} props
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ */
+export default function TableCellWrap({
+  className,
+  children,
+  clickEvent,
+}: ComponentBaseProps) {
+  return (
+    <StyledTable.common.cell
+      className={className}
+      onClick={clickEvent}
+      $isClickable={!!clickEvent}
+    >
+      {children}
+    </StyledTable.common.cell>
+  );
+}

package/src/table/components/tables/common/ColGroup.tsx

@@ -0,0 +1,30 @@
+import { memo } from "react";
+import type { TableColumnGroupDataType } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; <colgroup />
+ * @param {object} props
+ * @param {TableColumnGroupDataType[]} props.column 컬럼 데이터
+ */
+const TableColumnGroup = memo(
+  ({ column }: { column: TableColumnGroupDataType[] }) => {
+    return (
+      <colgroup>
+        {column.map(({ key, width }) => (
+          <col
+            key={`${key}/colgroup`}
+            style={{
+              width:
+                typeof width === "number" || !isNaN(Number(width))
+                  ? `${Number(width) / 10}rem`
+                  : width,
+            }}
+            width={width}
+          />
+        ))}
+      </colgroup>
+    );
+  },
+);
+
+export default TableColumnGroup;

package/src/table/components/tables/common/DefaultTemplate.tsx

@@ -0,0 +1,37 @@
+import type { TableDefaultTemplateProps } from "../../../../types";
+import TableColumnGroup from "./ColGroup";
+import TableHeadDefault from "./HeadDefault";
+import TableBody from "./Body";
+import TableFoot from "./Foot";
+
+/**
+ * 테이블 컴포넌트; 테이블 내부구성 기본 템플릿
+ * @component
+ * @param {object} props
+ * @param {TableColumnDataType[]} props.column - 테이블 컬럼 데이터
+ * @param {boolean} [props.isCustom] - 레이아웃 커스텀 여부
+ * @param {React.ReactNode} props.children - 테이블 컴포넌트 자식
+ */
+export default function TableDefaultTemplate({
+  column,
+  isCustom,
+  foot,
+  children,
+}: TableDefaultTemplateProps) {
+  return (
+    <>
+      <TableColumnGroup column={column} />
+      {isCustom ? (
+        children
+      ) : (
+        <>
+          <TableHeadDefault column={column} />
+          <TableBody isBorderBottom={typeof foot === "undefined"}>
+            {children}
+          </TableBody>
+          {foot && <TableFoot>{foot}</TableFoot>}
+        </>
+      )}
+    </>
+  );
+}

package/src/table/components/tables/common/Foot.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledTable from "../../../styles/styled";
+
+/**
+ * 테이블; <tfoot /> 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ */
+export default function TableFoot({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledTable.common.foot className={clsx("table-foot", className)}>
+      {children}
+    </StyledTable.common.foot>
+  );
+}

package/src/table/components/tables/common/Head.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledTable from "../../../styles/styled";
+
+/**
+ * 테이블; <thead /> 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ */
+export default function TableHead({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledTable.common.head className={clsx("table-head", className)}>
+      {children}
+    </StyledTable.common.head>
+  );
+}

package/src/table/components/tables/common/HeadDefault.tsx

@@ -0,0 +1,42 @@
+import { memo } from "react";
+
+import TableCellWrap from "./CellWrap";
+import TableHead from "./Head";
+import TableCell from "./Cell";
+import TableRow from "./Row";
+import type { TableColumnGroupDataType } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; basic 타입의 기본 thead 템플릿
+ * @component
+ * @param {object} props
+ * @param {TableColumnGroupDataType[]} props.column 컬럼 데이터
+ */
+const TableHeadDefault = memo(
+  ({ column }: { column: TableColumnGroupDataType[] }) => {
+    return (
+      <TableHead>
+        <TableRow>
+          {column.map(
+            ({ key, dataKey, cellContents, sortedKey, sortEvent }) => (
+              <TableCell
+                cellType="head"
+                key={`${key}/thead`}
+                data-key={dataKey}
+                data-sorted={
+                  sortedKey && dataKey === sortedKey ? "true" : undefined
+                }
+              >
+                <TableCellWrap clickEvent={sortEvent}>
+                  {cellContents}
+                </TableCellWrap>
+              </TableCell>
+            ),
+          )}
+        </TableRow>
+      </TableHead>
+    );
+  },
+);
+
+export default TableHeadDefault;

package/src/table/components/tables/common/Row.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+import StyledTable from "../../../styles/styled";
+import type { TableRowProps } from "../../../../types";
+import { clsx } from "clsx";
+
+/**
+ * 테이블; <tr /> 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {string} [props.className]
+ * @param {HTMLCustomAttrProps} [props.htmlAttrs]
+ * @param {React.ReactNode} props.children
+ */
+const TableRow = memo(
+  forwardRef(
+    (
+      { className, children, clickEvent, ...htmlAttrs }: TableRowProps,
+      ref: React.ForwardedRef<HTMLTableRowElement | null>,
+    ) => {
+      return (
+        <StyledTable.common.row
+          className={clsx("table-row", className)}
+          onClick={clickEvent}
+          {...htmlAttrs}
+          ref={ref}
+        >
+          {children}
+        </StyledTable.common.row>
+      );
+    },
+  ),
+);
+
+export default TableRow;

package/src/table/components/tables/common/TopLine.tsx

@@ -0,0 +1,11 @@
+import StyledTable from "../../../styled";
+
+/**
+ * 테이블 컴포넌트; 상단 테두리
+ * @component
+ * @desc
+ * - 스크롤 시에도 위치를 유지할 수 있도록 하는 상단 테두리 컴포넌트
+ */
+export default function TableTopLine() {
+  return <StyledTable.common.topLine />;
+}

package/src/table/components/tables/common/index.tsx

@@ -0,0 +1,37 @@
+import TableBody from "./Body";
+import TableCell from "./Cell";
+import TableCellWrap from "./CellWrap";
+import TableColumnGroup from "./ColGroup";
+import TableFoot from "./Foot";
+import TableHead from "./Head";
+import TableHeadDefault from "./HeadDefault";
+import TableRow from "./Row";
+import TableTopLine from "./TopLine";
+
+/**
+ * 테이블 공통 컴포넌트
+ * @component
+ * @desc
+ * - colgroup: 컬럼 명세
+ * - head: 테이블 헤더 thead
+ * - headDefault: 테이븧 헤더 thead 기본 템플릿
+ * - body: 테이블 바디 tbody
+ * - foot: 테이블 풋 tfoot
+ * - row: 테이블 행 tr
+ * - cell: 테이블 셀 th, td
+ * - cellWrap: 테이블 셀 th, td 내부 컨텐츠 래핑
+ * - topLine: 테이블 상단 테두리
+ */
+const TableCommon = {
+  colgroup: TableColumnGroup,
+  head: TableHead,
+  headDefault: TableHeadDefault,
+  body: TableBody,
+  foot: TableFoot,
+  row: TableRow,
+  cell: TableCell,
+  cellWrap: TableCellWrap,
+  topLine: TableTopLine,
+};
+
+export default TableCommon;

package/src/table/components/tables/grid/Cell.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { TableGridCellProps } from "../../../../types";
+import StyledTable from "../../../styles/styled";
+
+/**
+ * 테이블 컴포넌트; grid cell
+ * @component
+ * @param {TableGridCellProps} props
+ * @param {React.ReactNode} props.cellTitle 셀 타이틀
+ * @param {React.ReactNode} props.cellValue 셀 값
+ */
+export default function TableGridCell({
+  cellTitle,
+  cellValue,
+}: TableGridCellProps) {
+  return (
+    <StyledTable.grid.cell>
+      <dl>
+        <dt>{cellTitle}</dt>
+        <dd>{cellValue}</dd>
+      </dl>
+    </StyledTable.grid.cell>
+  );
+}

package/src/table/components/tables/grid/Container.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledTable from "../../../styles/styled";
+import type { ComponentBaseProps } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; grid container
+ * @component
+ * @param {object} props
+ * @param {string} [props.className] - 컴포넌트 클래스명
+ * @param {React.ReactNode} props.children - 테이블 컴포넌트 자식
+ */
+export default function TableGridContainer({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledTable.grid.container className={clsx("grid", className)}>
+      {children}
+    </StyledTable.grid.container>
+  );
+}

package/src/table/components/tables/grid/Contents.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import TableGridCell from "./Cell";
+import StyledTable from "../../../styles/styled";
+import type { TableGridContentsProps } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; grid contents
+ * @component
+ * @param {TableGridContentsProps} props
+ * @param {number} props.columnLength 컬럼 수
+ * @param {TableGridDataType[]} props.data 그리드 데이터
+ */
+export default function TableGridContents({
+  columnLength,
+  data,
+}: TableGridContentsProps) {
+  return (
+    <StyledTable.grid.wrapper $columnLength={columnLength}>
+      {data.map(({ cellKey, ...cellProps }) => (
+        <TableGridCell key={cellKey} {...cellProps} />
+      ))}
+    </StyledTable.grid.wrapper>
+  );
+}

package/src/table/components/tables/grid/index.tsx

@@ -0,0 +1,19 @@
+import TableGridCell from "./Cell";
+import TableGridContainer from "./Container";
+import TableGridContents from "./Contents";
+
+/**
+ * 테이블 컴포넌트; 그리드 타입
+ * @component
+ * @desc
+ * - container: 그리드 테이블 컨테이너
+ * - contents: 그리드 컨텐츠 묶음
+ * - cell: 그리드 셀
+ */
+const TableGrid = {
+  container: TableGridContainer,
+  contents: TableGridContents,
+  cell: TableGridCell,
+};
+
+export default TableGrid;

package/src/table/components/tables/list/Container.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { clsx } from "clsx";
+
+import TableDefaultTemplate from "../common/DefaultTemplate";
+import ScrollbarContainer from "../../../../scrollbar/components/Container";
+import StyledTable from "../../../styles/styled";
+
+import type { ComponentBaseProps, TableDefaultProps } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; list container
+ * @component
+ * @param {object} props
+ * @param {string} [props.className] - 컴포넌트 클래스명
+ * @param {TableColumnDataType[]} props.column - 테이블 컬럼 데이터
+ * @param {boolean} [props.isCustom] - 레이아웃 커스텀 여부
+ * @param {React.ReactNode} props.children - 테이블 컴포넌트 자식
+ */
+export default function TableListContainer({
+  className,
+  scroll,
+  ...tableDefaultProps
+}: ComponentBaseProps & TableDefaultProps & Partial<{ scroll: boolean }>) {
+  return scroll ? (
+    <ScrollbarContainer>
+      <StyledTable.list.container className={clsx("list", className)}>
+        <TableDefaultTemplate {...tableDefaultProps} />
+      </StyledTable.list.container>
+    </ScrollbarContainer>
+  ) : (
+    <StyledTable.list.container className={clsx("list", className)}>
+      <TableDefaultTemplate {...tableDefaultProps} />
+    </StyledTable.list.container>
+  );
+}

package/src/table/components/tables/list/index.tsx

@@ -0,0 +1,13 @@
+import TableListContainer from "./Container";
+
+/**
+ * 테이블 컴포넌트; 리스트 타입
+ * @component
+ * @desc
+ * - container: 리스트 테이블 컨테이너
+ */
+const TableList = {
+  container: TableListContainer,
+};
+
+export default TableList;

package/src/table/components/tables/sheet/Container.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { clsx } from "clsx";
+
+import TableDefaultTemplate from "../common/DefaultTemplate";
+import ScrollbarContainer from "../../../../scrollbar/components/Container";
+import StyledTable from "../../../styles/styled";
+
+import type { ComponentBaseProps, TableSheetProps } from "../../../../types";
+
+/**
+ * 테이블 컴포넌트; basic container
+ * @component
+ * @param {object} props
+ * @param {string} [props.className] - 컴포넌트 클래스명
+ * @param {TableColumnDataType[]} props.column - 테이블 컬럼 데이터
+ * @param {React.ReactNode} props.children - 테이블 컴포넌트 자식
+ */
+export default function TableSheetContainer({
+  className,
+  isSideBorder,
+  isBorderTop = true,
+  ...tableProps
+}: ComponentBaseProps & TableSheetProps) {
+  return (
+    <>
+      {isBorderTop && <StyledTable.common.topLine />}
+      <ScrollbarContainer>
+        <StyledTable.sheet.container
+          className={clsx("sheet", className)}
+          $isBorderTop={isBorderTop}
+          $sideBorder={isSideBorder}
+        >
+          <TableDefaultTemplate {...tableProps} isCustom={true} />
+        </StyledTable.sheet.container>
+      </ScrollbarContainer>
+    </>
+  );
+}

package/src/table/components/tables/sheet/index.tsx

@@ -0,0 +1,13 @@
+import TableSheetContainer from "./Container";
+
+/**
+ * 테이블 컴포넌트; 스프레드시트 타입
+ * @component
+ * @desc
+ * - container: 스프레드시트 테이블 컨테이너
+ */
+const TableSheet = {
+  const: TableSheetContainer,
+};
+
+export default TableSheet;

package/src/table/hooks/index.ts

@@ -0,0 +1,5 @@
+import useTablePage from "./useTablePage";
+import useTableRowCheck from "./useTableRowCheck";
+import useTableSort from "./useTableSort";
+
+export { useTablePage, useTableRowCheck, useTableSort };

package/src/table/hooks/useTableColumns.ts

@@ -0,0 +1,24 @@
+// import { useMemo } from "react";
+
+// import tableColumns from "@/data/static/table/column.data";
+
+// /**
+//  * 배열형 테이블 컴포넌트 컬럼 데이터 추출 Hook
+//  * @hook
+//  * @param {string} columnCategory 컬럼 카테고리
+//  * @param {boolean} [isEdit] 테이블 양식이 입력가능한지 여부
+//  * @return {TableColumnDataType[]} 컬럼 데이터
+//  */
+// export default function useTableColumnsForArrayFields(
+//   columnCategory: string,
+//   isEdit?: boolean,
+// ): TableColumnDataType[] {
+//   return useMemo(
+//     () =>
+//       tableColumns[columnCategory]?.filter(column => {
+//         if (!isEdit && column.dataName === "button") return false;
+//         return true;
+//       }) || [],
+//     [columnCategory, isEdit],
+//   );
+// }