@uniai-fe/ui-legacy 0.1.1

package/src/tab-menu/styles/styled-components/mode-menu.ts

@@ -0,0 +1,114 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import StyledTabMenuBase from "./tab-menu";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledTypeProps = Partial<{
+  $type: "divide" | "box";
+}>;
+type StyledListProps = StyledTypeProps &
+  Partial<{
+    $radius: number | string;
+  }>;
+const List = styled(StyledTabMenuBase.List)<StyledListProps>`
+  border: 1px solid var(--color_30);
+  background-color: ${({ $type }) =>
+    $type && $type === "box" ? "#F9FAFB" : "var(--color_0)"};
+  ${({ $type }) =>
+    $type === "box" &&
+    css`
+      padding: 0.2rem;
+    `}
+  border-radius: ${({ $radius }) =>
+    styleBaseSize("rem", $radius, "var(--field-item-border-radius)")};
+`;
+
+const Item = styled.li<StyledTypeProps>`
+  ${({ $type }) =>
+    $type === "box"
+      ? css`
+          margin-right: 0.3rem;
+          $:last-child {
+            margin-right: 0;
+          }
+        `
+      : css`
+          border-right: 1px solid var(--color_30);
+          &:last-child {
+            border-right: 0;
+          }
+        `}
+  &:after {
+    display: none;
+  }
+  &.selected {
+  }
+`;
+
+type StyledBtnProps = StyledTypeProps &
+  Partial<{
+    $width: number | string;
+    $minWidth: number | string;
+    $height: number | string;
+    $radius: number | string;
+    $textSize: number | string;
+    $selected: boolean;
+  }>;
+const Button = styled.button<StyledBtnProps>`
+  width: ${({ $width }) => styleBaseSize("rem", $width, "fit-content")};
+  ${({ $minWidth }) =>
+    typeof $minWidth !== "undefined" &&
+    css`
+      min-width: ${styleBaseSize("rem", $minWidth)};
+    `}
+  height: ${({ $height }) =>
+    styleBaseSize("rem", $height, "var(--field-item-height)")};
+  ${({ $type }) =>
+    $type === "box" &&
+    css`
+      border-radius: 0.4rem;
+    `}
+  ${({ $radius: $buttonRadius }) =>
+    typeof $buttonRadius !== "undefined" &&
+    css`
+      border-radius: ${styleBaseSize("rem", $buttonRadius)};
+    `}
+  padding: 0 .8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    font-size: ${({ $textSize }) => styleBaseSize("rem", $textSize, 14)};
+    white-space: nowrap;
+    color: ${({ $selected, $type }) =>
+      $selected
+        ? $type === "box"
+          ? "#fff"
+          : "var(--color_80)"
+        : $type === "box"
+          ? "var(--color_60)"
+          : "var(--color_70)"};
+  }
+  svg path {
+    fill: ${({ $selected }) =>
+      $selected ? "var(--color_80)" : "var(--color_40)"};
+  }
+
+  ${({ $selected, $type }) =>
+    $selected &&
+    css`
+      background-color: ${$type === "box"
+        ? "var(--color-light-blue-600)"
+        : "var(--color_10)"};
+    `}
+`;
+
+const StyledTabMenuMode = {
+  List,
+  Item,
+  Button,
+};
+
+export default StyledTabMenuMode;

package/src/tab-menu/styles/styled-components/page-menu.ts

@@ -0,0 +1,90 @@
+"use client";
+
+import { createGlobalStyle, css, styled } from "styled-components";
+import StyledTabMenuBase from "./tab-menu";
+import {
+  styleBaseSize,
+  styleSpacingSize,
+  type StyleSpacingType,
+} from "@uniai-fe/util-functions";
+
+type StyledHeightProps = Partial<{
+  $height: number | string;
+}>;
+const UpdatePageMenuHeight = createGlobalStyle<StyledHeightProps>`
+  :root {
+    --page-menu-height: ${({ $height }) => styleBaseSize("rem", $height, 80)};
+  }
+`;
+
+type StyledListProps = Partial<{
+  $width: number | string;
+  $padding: StyleSpacingType;
+}>;
+const List = styled(StyledTabMenuBase.List)<StyledListProps>`
+  width: ${({ $width }) => styleBaseSize("rem", $width, "100%")};
+  padding: ${({ $padding }) => styleSpacingSize("rem", $padding, 0)};
+  border-bottom: var(--page-menu-border-bottom-width) solid var(--color_30);
+  overflow: visible;
+  background-color: var(--color_0);
+`;
+
+const Item = styled.li`
+  width: fit-content;
+  height: fit-content;
+`;
+
+type StyledButtonProps = Partial<{
+  $width: number | string;
+  $minWidth: number | string;
+  // $height: number | string;
+  $padding: StyleSpacingType;
+  $textSize: number | string;
+  $selected: boolean;
+}>;
+const Button = styled.button<StyledButtonProps>`
+  width: ${({ $width }) => styleBaseSize("rem", $width, "fit-content")};
+  ${({ $minWidth }) =>
+    typeof $minWidth !== "undefined" &&
+    css`
+      min-width: ${styleBaseSize("rem", $minWidth)};
+    `};
+  height: calc(var(--page-menu-height) - var(--page-menu-border-bottom-width));
+
+  ${({ $padding }) =>
+    typeof $padding !== "undefined" &&
+    `padding:${styleSpacingSize("rem", $padding)}`};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: ${({ $selected }) =>
+      $selected ? "var(--color-blue-500)" : "transparent"};
+  }
+
+  span {
+    font-size: ${({ $textSize }) => styleBaseSize("rem", $textSize, 20)};
+    color: ${({ $selected }) =>
+      $selected ? "var(--color-blue-500)" : "var(--color_60)"};
+    font-weight: 600;
+    line-height: 1em;
+  }
+`;
+
+const StyledTabMenuPage = {
+  List,
+  Item,
+  Button,
+  UpdateHeight: UpdatePageMenuHeight,
+};
+
+export default StyledTabMenuPage;

package/src/tab-menu/styles/styled-components/separated-square.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import StyledTabMenuBase from "./tab-menu";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+const Container = styled.div`
+  width: fit-content;
+  display: flex;
+  align-items: center;
+`;
+
+type StyledListProps = Partial<{
+  $height: number | string;
+  $padding: number | string;
+  $textSize: number | string;
+}>;
+const List = styled(StyledTabMenuBase.List)<StyledListProps>`
+  ${({ $height }) =>
+    typeof $height !== "undefined" &&
+    css`
+      --button-height-small: ${styleBaseSize("rem", $height)};
+    `};
+
+  ${({ $padding }) =>
+    typeof $padding !== "undefined" &&
+    css`
+      --button-padding-small: ${styleBaseSize("rem", $padding)};
+    `};
+
+  ${({ $textSize }) =>
+    typeof $textSize !== "undefined" &&
+    css`
+      --button-name-size-small: ${styleBaseSize("rem", $textSize)};
+    `};
+`;
+
+type StyledItemProps = Partial<{
+  $margin: number | string;
+}>;
+const Item = styled.li<StyledItemProps>`
+  margin: 0
+    ${({ $margin }) =>
+      styleBaseSize(
+        "rem",
+        typeof $margin === "number" ? $margin / 2 : $margin,
+        4,
+      )};
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+type StyledButtonProps = Partial<{
+  $minWidth: number | string;
+}>;
+const Button = styled.div<StyledButtonProps>`
+  ${({ $minWidth }) =>
+    typeof $minWidth !== "undefined" &&
+    css`
+      min-width: ${styleBaseSize("rem", $minWidth)};
+    `};
+
+  margin: 0;
+  justify-content: center;
+`;
+
+const StyledTabMenuSeparatedSquare = {
+  Container,
+  List,
+  Item,
+  Button,
+};
+
+export default StyledTabMenuSeparatedSquare;

package/src/tab-menu/styles/styled-components/tab-menu.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const List = styled.ul`
+  width: fit-content;
+  height: fit-content;
+
+  display: flex;
+  overflow: hidden;
+
+  button {
+    cursor: pointer;
+  }
+`;
+
+const StyledTabMenuBase = {
+  List,
+};
+
+export default StyledTabMenuBase;

package/src/tab-menu/styles/styled-components/text-menu.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import { css, styled } from "styled-components";
+import StyledTabMenuBase from "./tab-menu";
+import type { StyledButtonTextProps } from "../../../button/styles/styled-components/template";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+const Container = styled.div`
+  width: fit-content;
+  display: flex;
+  align-items: center;
+`;
+
+const List = styled(StyledTabMenuBase.List)``;
+
+type StyledItemProps = Partial<{
+  $margin: number | string;
+}>;
+const Item = styled.li<StyledItemProps>`
+  ${({ $margin }) =>
+    typeof $margin !== "undefined" &&
+    css`
+      --tab-menu-text-list-item-margin: ${styleBaseSize(
+        "rem",
+        typeof $margin === "number" ? $margin / 2 : $margin,
+      )};
+    `};
+
+  margin: 0 var(--tab-menu-text-list-item-margin);
+
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+const Button = styled.div<StyledButtonTextProps>`
+  ${({ $size }) =>
+    typeof $size !== "undefined" &&
+    css`
+      --tab-menu-text-list-height: calc(
+        ${styleBaseSize("rem", $size)} + 0.2rem * 2
+      );
+    `}
+  padding: 0.2rem 0;
+  position: relative;
+  &.selected {
+    span {
+      font-weight: 700;
+    }
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: var(--tab-menu-text-list-selected);
+    }
+  }
+`;
+
+const StyledTabMenuText = {
+  Container,
+  List,
+  Item,
+  Button,
+};
+
+export default StyledTabMenuText;

package/src/tab-menu/tab-menu.scss

@@ -0,0 +1,3 @@
+@use "./styles/scss/mode.scss";
+@use "./styles/scss/text-menu.scss";
+@use "./styles/scss/page-menu.scss";

package/src/table/components/pagination/Button.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { clsx } from "clsx";
+
+import TablePaginationUtilIcon from "./Icon";
+import StyledTablePagination from "../../styles/styled/pagination";
+
+import type { TablePagerUtilType } from "../../../types";
+
+/**
+ * 테이블; 목록형 페이지네이션 컨테이너 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {TablePagerUtilType | "page"} props.pagerType 페이저 기능 유형
+ * @param {number} props.pageNo 페이지 넘버
+ * @param {number} props.currentPageNo 현재 활설화된 페이지 넘버
+ * @param {boolean} [props.disabled] 비활성화 여부
+ */
+export default function TablePaginationButton({
+  pagerType,
+  pageNo,
+  currentPageNo,
+  disabled,
+}: {
+  pagerType: TablePagerUtilType | "page";
+  pageNo: number;
+  currentPageNo: number;
+  disabled?: boolean;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <StyledTablePagination.item
+      type="button"
+      className={clsx("table-pagination-item", {
+        now: pagerType === "page" && currentPageNo === pageNo,
+        disabled: disabled,
+        active: !disabled,
+      })}
+      // pager-type={pagerType}
+      onClick={() => {
+        if (
+          (pagerType === "page" && currentPageNo === pageNo) ||
+          disabled === true
+        )
+          return;
+
+        const path = `${pathname}${pageNo === 1 ? "" : `?p=${pageNo}`}`;
+        router.push(path);
+      }}
+    >
+      {pagerType === "page" ? (
+        <span>{pageNo}</span>
+      ) : (
+        <TablePaginationUtilIcon pagerType={pagerType} />
+      )}
+    </StyledTablePagination.item>
+  );
+}

package/src/table/components/pagination/Container.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+
+import TablePaginationButton from "./Button";
+import StyledTablePagination from "../../styles/styled/pagination";
+
+import type { TablePaginationListType } from "../../../types";
+
+/**
+ * 테이블; 목록형 페이지네이션 컨테이너 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {TablePaginationListType[][]} props.paginationList 페이지네이션 목록(2차원 배열); useTablePage() return
+ * @param {number} props.paginationIndex 현재 페이지 목록(2차원 배열)의 인덱스; useTablePage() return
+ * @example
+ * ```typescript
+ * ...
+ * const { data: tableList = [] } = useQueryTableData();
+ * const { rowItems, paginationIndex, paginationList } =
+ *    useTablePage<TableDataType>({
+ *      rowPerPage: 8,
+ *      pagerLength: 5,
+ *      tableData: tableList,
+ *    });
+ *
+ * ...
+ *
+ * return (
+ *  <>
+ *    <TableContainer
+ *      tableType="list"
+ *      column={tableColumns.something}
+ *    >
+ *      {rowItems.length === 0 ? (
+ *          <TableListEmpty colSpan={tableColumns.something.length} />
+ *        ) : rowItems.map(d => (
+ *          <TableListRow>
+ *            <TableListBodyCell>
+ *              <TableCellContainer>
+ *                <span>컨텐츠</span>
+ *              </TableCellContainer>
+ *            </TableListBodyCell>
+ *          </TableListRow>
+ *        )
+ *      )}
+ *    </TableContainer>
+ *    <TablePaginationContainer
+ *      paginationList={paginationList}
+ *      paginationIndex={paginationIndex}
+ *    />
+ *  </>
+ * )
+ * ```
+ */
+export default function TablePaginationContainer({
+  paginationList,
+  paginationIndex,
+}: {
+  paginationList: TablePaginationListType[][];
+  paginationIndex: number;
+}) {
+  const searchParams = useSearchParams();
+  const currentPageNo = searchParams.get("p") || 1;
+
+  const currentPaginationList = useMemo(
+    () =>
+      paginationList.length > 0
+        ? paginationList[paginationIndex]
+        : [
+            {
+              key: `tablePager_paginationIndex_empty_pageNo_empty`,
+              paginationIndex: 0,
+              pageNo: 1,
+            },
+          ],
+    [paginationIndex, paginationList],
+  );
+  const lastPaginationIndex = useMemo(
+    () => (paginationList.length > 0 ? paginationList.length - 1 : 0),
+    [paginationList],
+  );
+
+  const prevPaginationList = useMemo(
+    () =>
+      paginationList.length > 0 && paginationIndex > 0
+        ? paginationList[paginationIndex - 1][
+            paginationList[paginationIndex - 1].length - 1
+          ]
+        : undefined,
+    [paginationIndex, paginationList],
+  );
+  const nextPaginationList = useMemo(
+    () =>
+      paginationList.length > 0 && paginationIndex < lastPaginationIndex
+        ? paginationList[paginationIndex + 1][0]
+        : undefined,
+    [lastPaginationIndex, paginationIndex, paginationList],
+  );
+  const lastPaginationList = useMemo(
+    () =>
+      paginationList.length > 0 && paginationIndex < lastPaginationIndex
+        ? paginationList[lastPaginationIndex][
+            paginationList[lastPaginationIndex].length - 1
+          ]
+        : undefined,
+    [lastPaginationIndex, paginationIndex, paginationList],
+  );
+
+  return (
+    <StyledTablePagination.container>
+      <TablePaginationButton
+        pagerType="first"
+        disabled={paginationIndex === 0}
+        pageNo={1}
+        currentPageNo={Number(currentPageNo)}
+      />
+      <TablePaginationButton
+        pagerType="prev"
+        disabled={paginationIndex === 0}
+        pageNo={prevPaginationList?.pageNo || 0}
+        currentPageNo={Number(currentPageNo)}
+      />
+
+      {currentPaginationList.map(({ key, pageNo }) => (
+        <TablePaginationButton
+          key={key}
+          pagerType="page"
+          pageNo={pageNo}
+          currentPageNo={Number(currentPageNo)}
+        />
+      ))}
+      <TablePaginationButton
+        pagerType="next"
+        disabled={paginationIndex === lastPaginationIndex}
+        pageNo={nextPaginationList?.pageNo || 0}
+        currentPageNo={Number(currentPageNo)}
+      />
+      <TablePaginationButton
+        pagerType="last"
+        disabled={paginationIndex === lastPaginationIndex}
+        pageNo={lastPaginationList?.pageNo || 0}
+        currentPageNo={Number(currentPageNo)}
+      />
+    </StyledTablePagination.container>
+  );
+}

package/src/table/components/pagination/Icon.tsx

@@ -0,0 +1,26 @@
+import Icon from "../../../icon";
+import type { TablePagerUtilType } from "../../../types";
+
+/**
+ * 테이블; 페이징 유틸리티 버튼 아이콘
+ * @component
+ * @param {TablePagerUtilType} pagerType first, prev, next, last
+ */
+export default function TablePaginationUtilIcon({
+  pagerType,
+}: {
+  pagerType: TablePagerUtilType;
+}) {
+  switch (pagerType) {
+    case "first":
+      return <Icon.Table.Pagination.First />;
+    case "prev":
+      return <Icon.Table.Pagination.Prev />;
+    case "next":
+      return <Icon.Table.Pagination.Next />;
+    case "last":
+      return <Icon.Table.Pagination.Last />;
+    default:
+      return null;
+  }
+}

package/src/table/components/sort/Button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import IconTable from "../../../icon/components/table";
+import StyledTableSort from "../../styles/styled/sort";
+
+/**
+ * 테이블; 정렬 버튼
+ * @component
+ * @param {object} props
+ * @param {string} [props.direction] - 정렬 방향 (기본값; asc)
+ * @param {React.ReactNode} props.children - 버튼 내용
+ */
+export default function TableSortButton({
+  direction = "asc",
+  isCommonIcon,
+  children,
+}: {
+  children: React.ReactNode;
+  isCommonIcon?: boolean;
+  direction?: "asc" | "desc";
+}) {
+  return (
+    <StyledTableSort.button direction={direction}>
+      {children}
+      {isCommonIcon ? (
+        <IconTable.Sort.Common />
+      ) : direction === "desc" ? (
+        <IconTable.Sort.Desc />
+      ) : (
+        <IconTable.Sort.Asc />
+      )}
+    </StyledTableSort.button>
+  );
+}

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

@@ -0,0 +1,41 @@
+import TableBasicContainer from "./basic/Container";
+import type { TableLayoutProps } from "../../../types";
+import TableGridContainer from "./grid/Container";
+import TableListContainer from "./list/Container";
+import TableSheetContainer from "./sheet/Container";
+
+/**
+ * 테이블 컴포넌트; 테이블 컨테이너 <table />
+ * @component
+ * @param {TableLayoutProps} props
+ * @param {TableBasicProps} [props.basic] - 기본 테이블 레이아웃
+ * @param {TableDefaultProps} [props.list] - 리스트 테이블 레이아웃
+ * @param {boolean} [props.grid] - 그리드 테이블 레이아웃
+ * @param {TableSheetProps} [props.sheet] - 시트 테이블 레이아웃
+ * @param {string} [props.className] - 커스텀 클래스
+ * @param {React.ReactNode} [props.children] - 테이블 내부 구성
+ */
+export default function TableContainer({
+  basic,
+  list,
+  grid,
+  sheet,
+  ...commonProps
+}: TableLayoutProps) {
+  if (typeof basic !== "undefined")
+    return (
+      <TableBasicContainer {...basic} {...{ scroll: true, ...commonProps }} />
+    );
+  else if (typeof list !== "undefined")
+    return (
+      <TableListContainer {...list} {...{ scroll: true, ...commonProps }} />
+    );
+  else if (grid)
+    return <TableGridContainer {...{ scroll: true, ...commonProps }} />;
+  else if (typeof sheet !== "undefined")
+    return (
+      <TableSheetContainer {...sheet} {...{ scroll: true, ...commonProps }} />
+    );
+
+  return null;
+}