@uniai-fe/ui-legacy 0.1.1

package/src/table/hooks/useTablePage.ts

@@ -0,0 +1,150 @@
+"use client";
+
+import type { TablePaginationListType } from "../../types";
+import { useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * 테이블 페이지네이션 도구모음 Hook
+ * @hook
+ * @param {object} props
+ * @param {number} [props.rowPerPage] 페이지 당 row(행) 수 (default: 10)
+ * @param {number} [props.pagerLength] 페이지네이션 단위 (default: 5) << < 1 2 .... 5 > >>
+ * @param {TableDataType[] | undefined} props.tableData 테이블 배열 데이터
+ * @desc
+ * - return {
+ *  rowItems: 현재 페이지의 테이블 배열 데이터
+ *  pageNo: 현재 페이지 번호
+ *  paginationIndex: 현재 페이지네이션 인덱스
+ *  paginationList: 현재 페이지네이션 배열 데이터
+ * }
+ * @return rowItems, pageNo, paginationIndex, paginationList
+ */
+export default function useTablePage<TableDataType>({
+  rowPerPage = 10,
+  pagerLength = 5,
+  tableData,
+}: {
+  rowPerPage?: number;
+  pagerLength?: number;
+  tableData?: TableDataType[];
+}) {
+  const searchParams = useSearchParams();
+  const [pageNo, setPageNo] = useState<number>(1);
+  const [currentPaginationIndex, setCurrentPaginationIndex] =
+    useState<number>(0);
+  const [rowItems, setRowItems] = useState<TableDataType[]>([]);
+  const [paginationList, setPaginationList] = useState<
+    TablePaginationListType[][]
+  >([]);
+
+  const getPaginationIndex = useCallback(() => {
+    const updateIndex = paginationList.findIndex(
+      paginationEachList =>
+        paginationEachList.filter(pager => pager.pageNo === pageNo)?.[0]
+          ?.paginationIndex,
+    );
+    setCurrentPaginationIndex(updateIndex < 0 ? 0 : updateIndex);
+  }, [pageNo, paginationList]);
+
+  // 페이지네이션 업데이트
+  const generatePaginationList = useCallback(
+    (tableData?: TableDataType[]) => {
+      if (
+        typeof tableData === "undefined" ||
+        !Array.isArray(tableData) ||
+        tableData.length === 0
+      ) {
+        setPaginationList([]);
+        return;
+      }
+
+      // 총 데이터 항목 개수
+      const dataLength = tableData.length;
+
+      // 총 페이지 수
+      const totalPageLength = Math.ceil(dataLength / rowPerPage);
+      // 단위별 페이지네이션 개수
+      // pagerLength = 한번에 보여질 페이지네이션 개수
+      // 페이저가 5개씩 끊어서 보여질 경우, 페이지네이션이 몇 그룹이 생성되는가
+      const totalPaginationLength = Math.ceil(totalPageLength / pagerLength);
+      // 5개 미만의 마지막 페이지네이션 그룹의 페이저 개수
+      const remainLastLength = (dataLength / rowPerPage) % pagerLength;
+
+      const pagination_list = [];
+      let eachPagerList = [];
+
+      for (let p = 0; p < totalPaginationLength; p++) {
+        eachPagerList = [];
+
+        const pagerStartIndex = p * pagerLength;
+        const pagerEndIndex = pagerStartIndex + pagerLength;
+
+        const isLastIndex = p === totalPaginationLength - 1;
+        const dataLastIndex = isLastIndex
+          ? remainLastLength === 0
+            ? Math.ceil(dataLength / rowPerPage)
+            : pagerStartIndex + remainLastLength
+          : pagerEndIndex;
+
+        for (let i = pagerStartIndex; i < dataLastIndex; i++) {
+          eachPagerList.push({
+            key: `tablePager_paginationIndex_${p}_pageNo_${i}`,
+            paginationIndex: p,
+            pageNo: i + 1,
+          });
+        }
+        pagination_list.push(eachPagerList);
+      }
+      setPaginationList(pagination_list);
+    },
+    [pagerLength, rowPerPage],
+  );
+
+  // 페이지 당 테이블 데이터
+  const getTableRow = useCallback(
+    (tableData?: TableDataType[]) => {
+      if (
+        typeof tableData === "undefined" ||
+        !Array.isArray(tableData) ||
+        tableData.length === 0
+      ) {
+        setRowItems([]);
+        return;
+      }
+
+      const rangeStartIndex = (pageNo - 1) * rowPerPage;
+      const rangeEndIndex = rangeStartIndex + rowPerPage;
+
+      const dataPerPage = tableData.slice(rangeStartIndex, rangeEndIndex);
+
+      setRowItems(dataPerPage);
+    },
+    [pageNo, rowPerPage],
+  );
+
+  // 페이지 번호 업데이트
+  useEffect(() => {
+    const page_no: string = searchParams.get("p") || "1";
+    if (!isNaN(Number(page_no))) setPageNo(Number(page_no));
+
+    getPaginationIndex();
+  }, [getPaginationIndex, searchParams]);
+
+  useEffect(() => {
+    if (
+      typeof tableData === "undefined" ||
+      (rowItems.length === 0 && rowItems.length === tableData.length)
+    )
+      return;
+    generatePaginationList(tableData);
+    getTableRow(tableData);
+  }, [generatePaginationList, getTableRow, rowItems.length, tableData]);
+
+  return {
+    rowItems,
+    pageNo,
+    paginationIndex: currentPaginationIndex,
+    paginationList,
+  };
+}

package/src/table/hooks/useTableRowCheck.ts

@@ -0,0 +1,112 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type {
+  TableRowCheckListType,
+  TypeRowCheckStateCollectionType,
+} from "../../types";
+
+/**
+ * 테이블 row 체크 도구모음 hook
+ * @hook
+ * @param {object} props
+ * @param {string} props.tableKey 테이블 고유 키
+ * @param {TableRowCheckListType<object>[]} [props.indexCheckList] 체크 상태 관리를 위한 테이블 row index 목록 상태 데이터
+ * @return onCheckAll, onCheckEach, checkEach
+ */
+export default function useTableRowCheck<TableRowDataType extends object>({
+  indexCheckList,
+}: {
+  indexCheckList?: TableRowCheckListType<TableRowDataType>[];
+}) {
+  // 체크 상태 목록 데이터
+  const checkStateList =
+    useMemo((): TypeRowCheckStateCollectionType<TableRowDataType> => {
+      if (
+        typeof indexCheckList === "undefined" ||
+        !Array.isArray(indexCheckList) ||
+        indexCheckList.length === 0
+      )
+        return {};
+
+      const entries = indexCheckList.map(
+        (d: TableRowCheckListType<TableRowDataType>) => {
+          const state = {
+            selectorId: d.selectorId,
+            checked: false,
+            rowData: d.rowData,
+          };
+          return [d.selectorId, state];
+        },
+      );
+
+      return Object.fromEntries(entries);
+    }, [indexCheckList]);
+
+  const [checkAll, setCheckAll] = useState<boolean>(false);
+  const [checkEach, setCheckEach] = useState<
+    TypeRowCheckStateCollectionType<TableRowDataType>
+  >({});
+
+  useEffect(() => {
+    if (Object.keys(checkEach).length !== Object.keys(checkStateList).length)
+      setCheckEach(checkStateList);
+  }, [checkEach, checkStateList]);
+
+  // 모두 선택 실행
+  const onCheckAll = useCallback(
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      if (typeof e === "undefined" || Object.keys(checkEach).length == 0)
+        return;
+
+      // "전체" 항목 적용
+      const isAllChecked = e.target.checked;
+      setCheckAll(isAllChecked);
+
+      // 각 항목 일괄 적용
+      const allCheckState = Object.entries(checkEach).map(state => [
+        state[0], // selectorId
+        {
+          ...state[1],
+          checked: isAllChecked,
+        },
+      ]);
+      setCheckEach(Object.fromEntries(allCheckState));
+    },
+    [checkEach],
+  );
+
+  // 각 row 체크 실행
+  const onCheckEach = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (typeof e === "undefined" || Object.keys(checkEach).length == 0)
+        return;
+
+      const { id: selectorId, checked: isChecked } = e.target;
+
+      setCheckEach(prev => ({
+        ...prev,
+        [selectorId]: { ...prev[selectorId], checked: isChecked },
+      }));
+    },
+    [checkEach],
+  );
+
+  // 전체/개별 체크 모니터링
+  useEffect(() => {
+    if (typeof checkEach === "undefined" || Object.keys(checkEach).length === 0)
+      return;
+
+    // 개별 선택현황 체크
+    const isAllCheckedByEach = Object.values(checkEach).every(
+      state => state.checked,
+    );
+
+    // 전체 선택에 해당
+    if (!checkAll && isAllCheckedByEach) setCheckAll(true);
+    // 전체 선택 미해당
+    else if (checkAll && !isAllCheckedByEach) setCheckAll(false);
+  }, [checkAll, checkEach]);
+
+  return { onCheckAll, onCheckEach, checkEach };
+}

package/src/table/hooks/useTableSearch.ts

@@ -0,0 +1,69 @@
+// "use client";
+
+// import { getPrevDay, getToday } from "@uniai-fe/util-functions";
+// import { useCallback, useMemo, useState } from "react";
+// import { useFormContext } from "react-hook-form";
+
+// /**
+//  * 테이블 검색기능 도구모음 Hook
+//  * @hook
+//  * @return isSearched, checkCages, dateRange, onSearch, onReset
+//  */
+// export default function useTableSearch() {
+//   const { resetField } = useFormContext();
+
+//   const [isSearched, setSearched] = useState<boolean>(false);
+
+//   const today = useMemo(() => getToday(), []);
+//   const prevDay = useMemo(() => getPrevDay(today, 52, 1) as Date, [today]);
+
+//   const [checkCages, setCheckCages] = useState<number[]>([]);
+//   const [dateRange, setDateRange] = useState<(Date | string)[]>([
+//     prevDay,
+//     today,
+//   ]);
+
+//   // 검색 실행
+//   const onSearch = useCallback((formData: TableListSearchFormType) => {
+//     console.log(`list형 테이블 검색 실행`, formData);
+
+//     // 체크 사육동
+//     const cages =
+//       typeof formData.searchCheckCage === "undefined" ||
+//       !Array.isArray(formData.searchCheckCage) ||
+//       formData.searchCheckCage.length === 0
+//         ? []
+//         : formData.searchCheckCage
+//             .filter(({ checked }) => checked)
+//             .map(({ value }) => Number(value));
+
+//     setCheckCages(cages);
+
+//     // 선택 날짜범위
+//     const range =
+//       typeof formData.searchDateRange === "undefined" ||
+//       !Array.isArray(formData.searchDateRange) ||
+//       formData.searchDateRange.length === 0
+//         ? []
+//         : formData.searchDateRange;
+//     setDateRange(range);
+
+//     // 검색상태 활성화
+//     setSearched(true);
+//   }, []);
+
+//   // 검색 초기화 실행
+//   const onReset = useCallback(() => {
+//     console.log(`list형 테이블 검색 초기화`);
+
+//     setCheckCages([]);
+//     setDateRange([prevDay, today]);
+
+//     resetField("searchCheckCage");
+//     resetField("searchDateRange");
+
+//     setSearched(false);
+//   }, [prevDay, resetField, today]);
+
+//   return { isSearched, checkCages, dateRange, onSearch, onReset };
+// }

package/src/table/hooks/useTableSort.ts

@@ -0,0 +1,108 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { TableColumnSortProps } from "../../types";
+import {
+  isValidDateType,
+  sortAsc,
+  sortDateAsc,
+  sortDateDesc,
+  sortDesc,
+} from "@uniai-fe/util-functions";
+
+/**
+ * 테이블 정렬 Hook
+ * @hook
+ * @return option, sort, onSort
+ * @example
+ * ```tsx
+ * const { option, sort, onSort } = useTableSort<TableDataType>();
+ * const tableList = useMemo(() => sort(list), [list]);
+ * ...
+ * {tableList.map(({ key, name }) => (
+ *  <Table.row key={key}>
+ *   <Table.cell>
+ *    <Table.cellWrap onClick={() => onSort("name")}>
+ *      <span>{name}</span>
+ *    </Table.cellWrap>
+ *    </Table.cell>
+ *   <Table.cell>
+ *    <Table.cellWrap onClick={() => onSort("weight")}>
+ *      <span>{weight}</span>
+ *    </Table.cellWrap>
+ *   </Table.cell>
+ *   ...
+ *  </Table.row>
+ * ...
+ * ```
+ */
+export default function useTableSort<
+  TableDataType extends Record<string, unknown>,
+>() {
+  const [option, setOption] = useState<TableColumnSortProps>({
+    dataKey: "",
+    direction: "asc",
+  });
+
+  /**
+   * 테이블 정렬옵션 업데이트
+   * @param {string} dataKey - 테이블 정렬 적용할 데이터 키
+   */
+  const onSort = useCallback((dataKey: string) => {
+    setOption(prev => ({
+      dataKey,
+      direction:
+        prev.dataKey === dataKey
+          ? prev.direction === "asc"
+            ? "desc"
+            : "asc"
+          : "asc",
+    }));
+  }, []);
+
+  /**
+   * 테이블 정렬 실행
+   * @param {TableDataType[]} list - 정렬할 테이블 데이터 리스트
+   * @return {TableDataType[]} 정렬된 테이블 데이터 리스트
+   */
+  const sort = useCallback(
+    (list: TableDataType[]) => {
+      if (!option.dataKey || !option.direction) return list;
+
+      return option.direction === "desc"
+        ? list.sort((a, b) =>
+            ["string", "number"].includes(typeof a[option.dataKey]) &&
+            !isValidDateType(a[option.dataKey])
+              ? sortDesc(
+                  a[option.dataKey] as string | number,
+                  b[option.dataKey] as string | number,
+                )
+              : isValidDateType(a[option.dataKey]) &&
+                  isValidDateType(b[option.dataKey])
+                ? sortDateDesc(
+                    a[option.dataKey] as Date,
+                    b[option.dataKey] as Date,
+                  )
+                : 0,
+          )
+        : list.sort((a, b) =>
+            ["string", "number"].includes(typeof a[option.dataKey]) &&
+            !isValidDateType(a[option.dataKey])
+              ? sortAsc(
+                  a[option.dataKey] as string | number,
+                  b[option.dataKey] as string | number,
+                )
+              : isValidDateType(a[option.dataKey]) &&
+                  isValidDateType(b[option.dataKey])
+                ? sortDateAsc(
+                    a[option.dataKey] as Date,
+                    b[option.dataKey] as Date,
+                  )
+                : 0,
+          );
+    },
+    [option.dataKey, option.direction],
+  );
+
+  return { option, sort, onSort };
+}

package/src/table/index.tsx

@@ -0,0 +1,37 @@
+import TableContainer from "./components/tables/Container";
+import TableCommon from "./components/tables/common";
+import TableGrid from "./components/tables/grid";
+import TablePaginationContainer from "./components/pagination/Container";
+import TableSortButton from "./components/sort/Button";
+
+/**
+ * 테이블 컴포넌트 모듈
+ * @component
+ * @desc
+ * - container: 테이블 컨테이너 <table />. { basic, list, grid, sheet } 옵션 여부에 따라 해당 타입의 레이아웃으로 렌더링
+ * - colgroup: 컬럼 명세
+ * - head: 테이블 헤더 thead
+ * - headDefault: 테이븧 헤더 thead 기본 템플릿
+ * - body: 테이블 바디 tbody
+ * - row: 테이블 행 tr
+ * - cell: 테이블 셀 th, td
+ * - cellWrap: 테이블 셀 th, td 내부 컨텐츠 래핑
+ * - grid: 그리드 테이블 레이아웃
+ *   - container: 그리드 테이블 컨테이너
+ *   - contents: 그리드 컨텐츠 묶음
+ *   - cell: 그리드 셀
+ */
+const Table = {
+  container: TableContainer,
+  ...TableCommon,
+  Grid: TableGrid,
+  Pagination: TablePaginationContainer,
+  SortButton: TableSortButton,
+
+  // 이하는 TableContainer에서 옵션 정의로 활용
+  // basic: TableBasic,
+  // list: TableList,
+  // sheet: TableSheet,
+};
+
+export default Table;

package/src/table/styled.tsx

@@ -0,0 +1,3 @@
+import StyledTable from "./styles/styled";
+
+export default StyledTable;

package/src/table/styles/scss/common.scss

@@ -0,0 +1,31 @@
+:root {
+  --table-head-text-size: 1.6rem;
+  --table-body-text-size: 1.6rem;
+
+  --table-head-bg: var(--color_1);
+
+  --table-row-height-head: 5.4rem;
+  --table-row-height-body: 5.4rem;
+
+  --table-row-active: var(--theme-background-30);
+
+  --table-cell-padding-vertical: 0.9rem;
+  --table-cell-padding-horizontal: 1.2rem;
+
+  --table-cell-flex-direction: row;
+  --table-cell-flex-wrap: nowrap;
+  --table-cell-justify-content: center;
+  --table-cell-align-items: center;
+}
+
+// table {
+// &.basic {
+// }
+// &.list {
+// }
+// &.grid {
+// }
+// &.sheet {
+//   --table-head-bg: var(--theme-background-30);
+// }
+// }

package/src/table/styles/scss/pagination.scss

@@ -0,0 +1,14 @@
+:root {
+  --table-pagination-margin-top: var(--page-padding-default);
+
+  --table-pagination-button-size: var(--button-height-medium);
+  --table-pagination-button-radius: var(--button-radius);
+
+  --table-pagination-text-color: var(--button-neutral-solid-text);
+  --table-pagination-bg-color: var(--button-neutral-solid);
+  --table-pagination-disabled-cover: rgba(255, 255, 255, 0.6);
+
+  &.dark-mode {
+    --table-pagination-disabled-cover: rgba(18, 24, 31, 0.6);
+  }
+}

package/src/table/styles/scss/reset.scss

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}

package/src/table/styles/styled/basic.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import StyledTableCommon from "./common";
+
+const { container: _Container, th, td, cell } = StyledTableCommon;
+
+type StyledTableBasicProps = Partial<{
+  $isBorderTop: boolean;
+  $sideBorder: boolean;
+}>;
+const container = styled(_Container)<StyledTableBasicProps>`
+  ${({ $isBorderTop }) =>
+    $isBorderTop &&
+    css`
+      border-top: 1px solid transparent;
+    `}
+  ${({ $sideBorder }) =>
+    $sideBorder &&
+    css`
+      border-left: 1px solid var(--color_30);
+      border-right: 1px solid var(--color_30);
+    `}
+
+  ${th} {
+    ${cell} {
+      border-bottom: 1px solid var(--color_30);
+      border-right: 1px solid var(--color_30);
+    }
+    &[data-sorted="true"] {
+      ${cell} {
+        border-bottom: 1px solid var(--color-light-blue-600);
+      }
+    }
+    &:last-child {
+      ${cell} {
+        border-right: 0;
+      }
+    }
+    background-color: var(--table-head-bg);
+  }
+
+  ${td} {
+    ${cell} {
+      border-right: 1px solid var(--color_30);
+    }
+    &:last-child {
+      ${cell} {
+        border-right: 0;
+      }
+    }
+  }
+`;
+
+const StyledTableBasic = {
+  container,
+};
+
+export default StyledTableBasic;