@uniai-fe/ui-legacy 0.1.1

package/LICENSE

@@ -0,0 +1,27 @@
+MIT License
+
+Copyright (c) 2025 UNIAI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+This project includes third-party software governed by additional licenses,
+including Apache License 2.0. Refer to `THIRD_PARTY_NOTICES.md` for the full
+text of those notices and any required attributions.

package/README.md

@@ -0,0 +1,3 @@
+# client / ui
+
+스타일링 도구와 토큰, 디자인 시스템, 컴포넌트 등 관리

package/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "@uniai-fe/ui-legacy",
+  "version": "0.1.1",
+  "description": "Legacy UI Toolkit for UNIAI FE Projects",
+  "type": "module",
+  "private": false,
+  "sideEffects": false,
+  "license": "MIT",
+  "homepage": "https://www.uniai.co.kr/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.22.0",
+  "engines": {
+    "node": ">=22",
+    "pnpm": ">=10"
+  },
+  "author": {
+    "name": "GraffitoRyu",
+    "email": "yth4135@naver.com",
+    "url": "https://github.com/GraffitoRyu"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --project tsconfig.build.json --noEmit",
+    "build": "pnpm typecheck",
+    "dev": "tsc --project tsconfig.build.json --watch --noEmit",
+    "module:lint": "pnpm lint",
+    "module:typecheck": "pnpm typecheck",
+    "module:build": "pnpm build",
+    "ui-legacy:build": "pnpm run build",
+    "ui-legacy:dev": "pnpm run dev"
+  },
+  "module": "./src/index.tsx",
+  "main": "./src/index.tsx",
+  "types": "./src/types/index.d.ts",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types/index.d.ts",
+    "./components": "./src/components.tsx",
+    "./components/styled": "./src/styled.components.tsx",
+    "./template": "./src/template.tsx",
+    "./template/styled": "./src/styled.template.tsx",
+    "./frame": "./src/frame/index.tsx",
+    "./frame/styled": "./src/frame/styled.tsx",
+    "./modal": "./src/modal/index.tsx",
+    "./icon": "./src/icon/index.tsx",
+    "./icon/styled": "./src/icon/styled.tsx",
+    "./chart": "./src/chart/index.tsx",
+    "./chart/styled": "./src/chart/styled.tsx",
+    "./table": "./src/table/index.tsx",
+    "./table/styled": "./src/table/styled.tsx",
+    "./scss": "./src/index.scss",
+    "./responsive_style": "./src/style-base/responsive.scss",
+    "./mantine_style": "./src/style-base/mantine.css"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">= 5",
+    "airtable": ">= 0.12",
+    "jotai": ">= 2",
+    "next": ">= 15",
+    "react": ">= 19",
+    "react-dom": ">= 19",
+    "styled-components": ">= 6"
+  },
+  "peerDependenciesMeta": {
+    "optional": {
+      "next": true
+    }
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@mantine/core": "^8.3.7",
+    "@mantine/dates": "^8.3.7",
+    "@mantine/hooks": "^8.3.7",
+    "@mantine/tiptap": "^8.3.7",
+    "@tanstack/react-query": "^5.90.8",
+    "@tiptap/extension-blockquote": "^3.10.7",
+    "@tiptap/extension-bold": "^3.10.7",
+    "@tiptap/extension-code": "^3.10.7",
+    "@tiptap/extension-code-block": "^3.10.7",
+    "@tiptap/extension-document": "^3.10.7",
+    "@tiptap/extension-hard-break": "^3.10.7",
+    "@tiptap/extension-heading": "^3.10.7",
+    "@tiptap/extension-horizontal-rule": "^3.10.7",
+    "@tiptap/extension-italic": "^3.10.7",
+    "@tiptap/extension-link": "^3.10.7",
+    "@tiptap/extension-list": "^3.10.7",
+    "@tiptap/extension-paragraph": "^3.10.7",
+    "@tiptap/extension-placeholder": "^3.10.7",
+    "@tiptap/extension-strike": "^3.10.7",
+    "@tiptap/extension-text": "^3.10.7",
+    "@tiptap/extension-text-align": "^3.10.7",
+    "@tiptap/extension-underline": "^3.10.7",
+    "@tiptap/pm": "^3.10.7",
+    "@tiptap/react": "^3.10.7",
+    "@tiptap/starter-kit": "^3.10.7",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-flatpickr": "^3.8.11",
+    "@uniai-fe/eslint-config": "workspace:*",
+    "@uniai-fe/i18n": "workspace:*",
+    "@uniai-fe/react-hooks": "workspace:*",
+    "@uniai-fe/tsconfig": "workspace:*",
+    "@uniai-fe/util-functions": "workspace:*",
+    "@uniai-fe/util-jotai": "workspace:*",
+    "@uniai-fe/util-next": "workspace:*",
+    "@uniai-fe/util-react": "workspace:*",
+    "airtable": "^0.12.2",
+    "autoprefixer": "^10.4.22",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
+    "eslint": "^9.39.1",
+    "flatpickr": "^4.6.13",
+    "jotai": "^2.15.1",
+    "next": "^15.5.6",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "pretendard": "^1.3.9",
+    "pretendard-jp": "^1.3.9",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-daum-postcode": "^3.2.0",
+    "react-dom": "^19.2.0",
+    "react-flatpickr": "3.10.13",
+    "react-hook-form": "^7.66.0",
+    "recharts": "^3.4.1",
+    "sass": "^1.94.0",
+    "simplebar-core": "^1.3.2",
+    "simplebar-react": "3.3.2",
+    "styled-components": "^6.1.19",
+    "typescript": "~5.9.3"
+  }
+}

package/src/alternate/components/empty/Cage.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import Image from "next/image";
+import StyledAlternate from "../../styles/styled/alternate";
+import { AirtableText } from "@uniai-fe/i18n";
+import assetUrl from "../../../asset-url";
+
+/**
+ * 종합현황 - 계군 없을 때 보여주는 대체 컴포넌트
+ * @component
+ * @route /dashboard/**
+ */
+export default function AlternateEmptyCage() {
+  return (
+    <StyledAlternate.container className="dashboard-empty-cage">
+      <figure>
+        <Image
+          src={`${assetUrl}/img/icon/invalid.svg`}
+          width={56}
+          height={56}
+          alt="정보 없음"
+        />
+      </figure>
+      <p>
+        <AirtableText tKey="alt/empty/flock" tAlt="등록된 계군이 없습니다." />
+      </p>
+    </StyledAlternate.container>
+  );
+}

package/src/alternate/components/empty/Data.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledAlternate from "../../styles/styled/alternate";
+import { AirtableText } from "@uniai-fe/i18n";
+
+/**
+ * 차트; 데이터 없는 경우 대체 컴포넌트
+ * @component
+ */
+export default function AlternateEmptyData({
+  className,
+  direction = "vertical",
+  size,
+  children: text,
+}: Partial<{
+  className: string;
+  direction: "vertical" | "horizontal";
+  size: string | number;
+  children: React.ReactNode;
+}>) {
+  return (
+    <StyledAlternate.container
+      className={clsx("alternate empty-data", className)}
+      layout-direction={direction}
+      $size={size}
+    >
+      <span className="empty-text">
+        {text || (
+          <AirtableText tKey="alt/empty/no-data" tAlt="데이터가 없습니다." />
+        )}
+      </span>
+    </StyledAlternate.container>
+  );
+}

package/src/alternate/components/empty/Table.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledAlternate from "../../styles/styled/alternate";
+import StyledTable from "../../../table/styled";
+import { AirtableText } from "@uniai-fe/i18n";
+
+export default function AlternateEmptyTable({
+  className,
+  rowLength = 1,
+  columnLength,
+  children: text,
+}: Partial<{
+  className: string;
+  rowLength: number;
+  columnLength: number;
+  children: React.ReactNode;
+}>) {
+  return (
+    <StyledAlternate.tableRow
+      className={clsx("alternate empty-table", className)}
+      $rowLength={rowLength}
+    >
+      <StyledTable.common.td colSpan={columnLength}>
+        <StyledTable.common.cell>
+          {text || (
+            <span>
+              <AirtableText
+                tKey="alt/empty/no-data"
+                tAlt="데이터가 없습니다."
+              />
+            </span>
+          )}
+        </StyledTable.common.cell>
+      </StyledTable.common.td>
+    </StyledAlternate.tableRow>
+  );
+}

package/src/alternate/components/index.tsx

@@ -0,0 +1,19 @@
+import AlternateEmptyCage from "./empty/Cage";
+import AlternateEmptyData from "./empty/Data";
+import AlternateEmptySelectFlock from "./notice/SelectFlock";
+// import AlternateEmptySelectLabel from "./notice/SelectLabel";
+import AlternateLoadingDefault from "./loading/Default";
+import AlternateEmptyTable from "./empty/Table";
+import AlternateLoadingTable from "./loading/Table";
+
+const Alternate = {
+  EmptyCage: AlternateEmptyCage,
+  EmptyData: AlternateEmptyData,
+  EmptyTable: AlternateEmptyTable,
+  EmptySelectFlock: AlternateEmptySelectFlock,
+  // EmptySelectLabel: AlternateEmptySelectLabel,
+  LoadingDefault: AlternateLoadingDefault,
+  LoadingTable: AlternateLoadingTable,
+};
+
+export default Alternate;

package/src/alternate/components/loading/Default.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { AirtableText } from "@uniai-fe/i18n";
+import StyledAlternate from "../../styles/styled/alternate";
+import AlternateLoadingIcon from "./Icon";
+
+/**
+ * 데이터 로딩중 컴포넌트
+ * @component
+ */
+export default function AlternateLoadingDefault({
+  direction = "vertical",
+  children: text,
+}: Partial<{
+  direction: "vertical" | "horizontal";
+  children: React.ReactNode;
+}>) {
+  return (
+    <StyledAlternate.container
+      className="alternate loading"
+      layout-direction={direction}
+    >
+      <AlternateLoadingIcon direction={direction} />
+      {["string", "undefined"].includes(typeof text) ? (
+        <span className="empty-text">
+          {text || (
+            <AirtableText
+              tKey="alt/loading/data"
+              tAlt="데이터를 불러오는 중입니다."
+            />
+          )}
+        </span>
+      ) : (
+        text
+      )}
+    </StyledAlternate.container>
+  );
+}

package/src/alternate/components/loading/Icon.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import Image from "next/image";
+import assetUrl from "../../../asset-url";
+import StyledAlternate from "../../styles/styled/alternate";
+
+export default function AlternateLoadingIcon({
+  direction,
+}: {
+  direction?: "vertical" | "horizontal";
+}) {
+  return (
+    <StyledAlternate.loadingIcon
+      className="alternate-icon alternate-loading-icon"
+      $dir={direction}
+    >
+      <Image
+        src={`${assetUrl}/img/icon/refresh.svg`}
+        // width={24}
+        // height={24}
+        alt="불러오는 중"
+        fill={true}
+      />
+    </StyledAlternate.loadingIcon>
+  );
+}

package/src/alternate/components/loading/Table.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { clsx } from "clsx";
+import { AirtableText } from "@uniai-fe/i18n";
+import StyledTable from "../../../table/styled";
+import StyledAlternate from "../../styles/styled/alternate";
+import AlternateLoadingIcon from "./Icon";
+
+/**
+ * 데이터 로딩중 컴포넌트
+ * @component
+ */
+export default function AlternateLoadingTable({
+  className,
+  direction = "vertical",
+  rowLength = 1,
+  columnLength,
+  children: text,
+}: Partial<{
+  className: string;
+  direction: "vertical" | "horizontal";
+  rowLength: number;
+  columnLength: number;
+  children: React.ReactNode;
+}>) {
+  return (
+    <StyledAlternate.tableRow
+      className={clsx("alternate loading-table", className)}
+      $rowLength={rowLength}
+    >
+      <StyledTable.common.td colSpan={columnLength}>
+        <StyledTable.common.cell className="loading-table-cell-wrap">
+          <AlternateLoadingIcon direction={direction} />
+          <span className="loading-text">
+            {text || (
+              <AirtableText
+                tKey="alt/loading/data"
+                tAlt="데이터를 불러오는 중입니다."
+              />
+            )}
+          </span>
+        </StyledTable.common.cell>
+      </StyledTable.common.td>
+    </StyledAlternate.tableRow>
+  );
+}

package/src/alternate/components/notice/SelectFlock.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AirtableText } from "@uniai-fe/i18n";
+import StyledAlternate from "../../styles/styled/alternate";
+
+/**
+ * 차트; 계군이 아무것도 선택되지 않았을 때
+ * @component
+ */
+export default function AlternateEmptySelectFlock() {
+  return (
+    <StyledAlternate.container className="select-flock">
+      <span className="empty-text">
+        <AirtableText
+          tKey="analysis/compare/select/flock"
+          tAlt="계군을 선택해 주세요."
+        />
+      </span>
+    </StyledAlternate.container>
+  );
+}

package/src/alternate/components/notice/SelectLabel.tsx

@@ -0,0 +1,15 @@
+// "use client";
+
+// import StyledAlternate from "../../styles/styled/alternate";
+
+// /**
+//  * 차트; 레전드 레이블이 아무것도 선택되지 않았을 때
+//  * @component
+//  */
+// export default function AlternateEmptySelectLabel() {
+//   return (
+//     <StyledAlternate.container className="select-label">
+//       <span className="empty-text">차트 항목을 선택해주세요.</span>
+//     </StyledAlternate.container>
+//   );
+// }

package/src/alternate/index.tsx

@@ -0,0 +1,3 @@
+import Alternate from "./components";
+
+export default Alternate;

package/src/alternate/styles/styled/alternate.ts

@@ -0,0 +1,92 @@
+"use client";
+
+import { styled, css, keyframes } from "styled-components";
+
+type StyledAlternateProps = Partial<{
+  $size: string | number;
+}>;
+
+const altProps = (prop: string) =>
+  ["className", "layout-direction", "children"].includes(prop);
+
+const altConfig = { shouldForwardProp: altProps };
+
+const loading = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const loadingIcon = styled.figure<{ $dir?: "vertical" | "horizontal" }>`
+  width: 2.4rem;
+  height: 2.4rem;
+  position: relative;
+  animation: ${loading} 1s linear infinite;
+  ${({ $dir }) => {
+    if (!$dir) return "";
+    const dir = $dir === "horizontal" ? "right" : "bottom";
+    return `margin-${dir}: 1rem;`;
+  }}
+`;
+
+const container = styled.div.withConfig(altConfig)<StyledAlternateProps>`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    font-size: ${({ $size }) =>
+      $size
+        ? typeof $size === "number"
+          ? `${Number($size) / 10}rem`
+          : $size
+        : "1.4rem"};
+    color: var(--color_40);
+    line-height: 1.5em;
+    word-break: keep-all;
+    text-align: center;
+  }
+  &[layout-direction="horizontal"] {
+    flex-direction: row;
+  }
+  &.loading {
+    &[layout-direction="horizontal"] {
+      span {
+        transform: translateY(0.2rem);
+      }
+    }
+  }
+`;
+
+type StyledTableRowProps = {
+  $rowLength: number;
+};
+const tableRow = styled.tr<StyledTableRowProps>`
+  ${({ $rowLength }) => css`
+    height: calc(var(--table-row-height-body) * ${$rowLength});
+  `}
+  span {
+    font-size: 1.4rem;
+    color: var(--color_40);
+  }
+  &.loading-table {
+    .loading-table-cell-wrap {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+`;
+
+const StyledAlternate = {
+  container,
+  tableRow,
+  loadingIcon,
+};
+export default StyledAlternate;

package/src/asset-url.ts

@@ -0,0 +1,7 @@
+/**
+ * 이미지 호스팅 경로
+ */
+const assetUrl: string =
+  "https://raw.githubusercontent.com/uniai-corp/makeup/refs/heads/main/assets";
+
+export default assetUrl;

package/src/button/button.scss

@@ -0,0 +1,3 @@
+@use "./styles/scss/size.scss";
+@use "./styles/scss/theme.scss";
+@use "./styles/scss/multiple.scss";

package/src/button/components/array/Add.tsx

@@ -0,0 +1,39 @@
+import { AirtableText } from "@uniai-fe/i18n/component";
+import ButtonDefault from "../base/Default";
+
+/**
+ * array field 추가 버튼 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {Function} [props.clickEvent]
+ * @param {Function} [props.mouseDownEvent]
+ * @param {Function} [props.mouseUpEvent]
+ */
+export default function ButtonAddArray({
+  clickEvent,
+  mouseDownEvent,
+  mouseUpEvent,
+}: {
+  clickEvent?: () => void;
+  mouseDownEvent?: () => void;
+  mouseUpEvent?: () => void;
+}) {
+  return (
+    <ButtonDefault
+      buttonType="button"
+      styleOptions={{
+        priorityType: "primary",
+        fillType: "outline",
+        sizeType: "small",
+        widthType: "fit",
+      }}
+      clickEvent={clickEvent}
+      mouseDownEvent={mouseDownEvent}
+      mouseUpEvent={mouseUpEvent}
+    >
+      <span>
+        <AirtableText tKey="button/add" tAlt="추가" />
+      </span>
+    </ButtonDefault>
+  );
+}

package/src/button/components/array/Remove.tsx

@@ -0,0 +1,34 @@
+import assetUrl from "../../../asset-url";
+import Image from "next/image";
+
+/**
+ * array field 제거 버튼 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {string} [props.className] 클래스명
+ * @param {Function} props.clickEvent 제거 실행 이벤트
+ */
+export default function ButtonRemoveArray({
+  className,
+  clickEvent,
+}: {
+  className?: string;
+  clickEvent: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={`form-row-array-remove-button ${className ? className : ""}`}
+      onClick={clickEvent}
+    >
+      <figure>
+        <Image
+          src={`${assetUrl}/img/button/array-remove.svg`}
+          width={24}
+          height={24}
+          alt="삭제"
+        />
+      </figure>
+    </button>
+  );
+}