@deepnoid/ui 0.1.211 → 0.1.213

package/README.md

@@ -1,23 +1,113 @@
-# @deepnoid/ui
+# @deepnoid-ui
 
-```
+`@deepnoid-ui`는 본부 내 프로젝트에서 공통으로 사용하는 **TailwindCSS 기반 UI 컴포넌트 라이브러리**입니다.  
+ 
+모노레포 구조로 구성되어 있으며, **Storybook**을 통해 컴포넌트 문서화 및 테스트를 수행합니다.
+
+- Storybook 앱 위치: [`./apps/docs`](../../apps/docs)
+
+## 📦 Monorepo 구성
+
+이 모노레포에는 다음 패키지들이 포함되어 있습니다.
+
+- [`./packages/eslint-config`](../../packages/eslint-config)  
+  공통 ESLint 규칙 정의
+
+- [`./packages/tailwind-config`](../../packages/tailwind-config)  
+  Tailwind 플러그인에서 사용되는 디자인 토큰 정의
+
+- [`./packages/typescript-config`](../../packages/typescript-config)  
+  공통 TypeScript 설정 정의
+
+- [`./packages/ui`](../../packages/ui)  
+  TailwindCSS 기반 UI 컴포넌트 패키지
+
+
+## 설치
+
+```bash
 yarn add @deepnoid/ui
 ```
 
-tailwind.config.ts 사용 예시
+## Tailwind 설정
 
-```ts
+```jsx
 import type { Config } from "tailwindcss";
-import { deepnoidUi } from "@deepnoid/ui"; // ADD
+import { deepnoidUi } from "@deepnoid/ui";
 
 const config: Config = {
   content: [
-    ...,
-    "./node_modules/@deepnoid/ui/dist/**/*.{js,ts,jsx,tsx,mdx}", // ADD
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@deepnoid/ui/dist/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  darkMode: "selector", // ADD
-  plugins: [deepnoidUi()], // ADD
+  darkMode: "selector",
+  plugins: [deepnoidUi()],
 };
 
 export default config;
 ```
+
+## 개발 환경
+
+```bash
+node@23.1.0
+npm@11.0.0
+yarn@1.22.22
+```
+
+## Storybook
+
+- 개발 환경: http://localhost:6006
+- 테스트 서버: http://172.30.10.148:6006
+
+```bash
+yarn install
+yarn build
+yarn dev
+```
+
+## 디자인 시스템
+
+- [Design System (Figma)](https://www.figma.com/design/RYAaUm28e2TL579y5VsAuk/%F0%9F%92%A0-DESIGN-SYSTEM-%F0%9F%92%A0?node-id=40002015-161&t=1yUVchnQPV9Xzl0Z-1)
+
+## Publish
+
+### 1. Storybook
+
+테스트 서버 Storybook 배포 방법:
+
+- [./storybook.Dockerfile](./storybook.Dockerfile) 파일 참고
+- [./docker-compose.yml](./docker-compose.yml) 파일 참고
+
+프로젝트 루트 경로에서 아래와 같은 커맨드를 통해 Storybook을 테스트 서버에 배포합니다.
+
+```bash
+// 서비스에 필요한 컨테이너를 생성하고 실행
+  docker compose up
+
+// 실행 중인 컨테이너를 멈추고 생성된 컨테이너나 이미지를 제거
+  docker compose down
+```
+
+### 2. NPM (Node Package Manager)
+
+커맨드 라인을 사용하여 NPM 배포:
+
+```bash
+yarn build
+
+yarn publish:npm
+```
+
+Gitlab Action을 사용하여 NPM 배포:
+
+release 브랜치에 머지했을 때 배포 파이프라인 실행되도록 스크립트가 작성되어 있습니다.
+
+- [./.gitlab-ci.yml](./.gitlab-ci.yml) 파일 참고
+
+## 기타
+
+[turborepo](https://turbo.build/)를 활용하여 프로젝트를 구성했으니 내용 참고해주시기 바랍니다.
+
+
+

package/dist/{chunk-YEYUS6DW.mjs → chunk-2GF7FJBM.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   template
-} from "./chunk-5BT37SLM.mjs";
+} from "./chunk-Q6H3TAWM.mjs";
 
 // src/components/icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-4F7SIDZB.mjs → chunk-5XPKK7JV.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-W3V4SZV5.mjs → chunk-7EOGSS7L.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   pagination_default
-} from "./chunk-VVCSY7DG.mjs";
+} from "./chunk-X6XRYX46.mjs";
 import {
   scrollArea_default
 } from "./chunk-EWS3FESG.mjs";

package/dist/{chunk-K2RW5KLO.mjs → chunk-GMVZJPB5.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   icon_button_default
-} from "./chunk-TB2DOWSM.mjs";
+} from "./chunk-GZ7A7CWU.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-TB2DOWSM.mjs → chunk-GZ7A7CWU.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-SZL743JC.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-OX4T7OBC.mjs → chunk-HGHQHZVM.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-SSGCTWWW.mjs → chunk-IDAHJ4G4.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-4F7SIDZB.mjs";
+} from "./chunk-5XPKK7JV.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";

package/dist/{chunk-FFUZAOFL.mjs → chunk-L24D3ZSW.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-SZL743JC.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-XPFBM2RK.mjs → chunk-LUJSGNQI.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-D72ILS4A.mjs → chunk-MTZQZQD6.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-IH3BJRTV.mjs";
 import {
   button_default
-} from "./chunk-FFUZAOFL.mjs";
+} from "./chunk-L24D3ZSW.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-EMQML6YB.mjs → chunk-P2M2CTIU.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-4LUASWAN.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";

package/dist/{chunk-3RTVVQA3.mjs → chunk-PQ2A52BQ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-5BT37SLM.mjs → chunk-Q6H3TAWM.mjs}

@@ -1657,6 +1657,84 @@ var template = {
       }
     );
   },
+  tag: ({ className }) => {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3.30357 11.6448L6.70107 15.0423C8.09607 16.4373 10.3611 16.4373 11.7636 15.0423L15.0561 11.7498C16.4511 10.3548 16.4511 8.08978 15.0561 6.68728L11.6511 3.29728C10.9386 2.58478 9.95607 2.20228 8.95107 2.25478L5.20107 2.43478C3.70107 2.50228 2.50857 3.69478 2.43357 5.18728L2.25357 8.93727C2.20857 9.94977 2.59107 10.9323 3.30357 11.6448Z",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M7.30107 9.1698C8.33661 9.1698 9.17607 8.33033 9.17607 7.2948C9.17607 6.25927 8.33661 5.4198 7.30107 5.4198C6.26554 5.4198 5.42607 6.25927 5.42607 7.2948C5.42607 8.33033 6.26554 9.1698 7.30107 9.1698Z",
+              stroke: "currentColor",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M9.92607 12.9198L12.9261 9.9198",
+              stroke: "currentColor",
+              strokeMiterlimit: "10",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      }
+    );
+  },
+  "check-page": ({ className }) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "13",
+        height: "16",
+        viewBox: "0 0 13 16",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4.71875 0.5H1.34375C0.878 0.5 0.5 0.878 0.5 1.34375V14.2812C0.5 14.747 0.878 15.125 1.34375 15.125H10.9062C11.372 15.125 11.75 14.747 11.75 14.2812V7.53125M4.71875 0.5H5C6.79021 0.5 8.5071 1.21116 9.77297 2.47703C11.0388 3.7429 11.75 5.45979 11.75 7.25V7.53125M4.71875 0.5C5.39008 0.5 6.03391 0.766685 6.50861 1.24139C6.98332 1.71609 7.25 2.35992 7.25 3.03125V4.15625C7.25 4.622 7.628 5 8.09375 5H9.21875C9.89008 5 10.5339 5.26668 11.0086 5.74139C11.4833 6.21609 11.75 6.85992 11.75 7.53125M3.875 10.0625L5.5625 11.75L8.375 7.8125",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  rectangle: ({ className }) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2" })
+      }
+    );
+  },
   // ----------------------------------- old ---------------------------------
   // ** Status **
   "plus-circle": ({ className, fill }) => {
@@ -2428,28 +2506,6 @@ var template = {
       }
     );
   },
-  tag: ({ className }) => {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M5.25 8.25H20.25M3.75 15.75H18.75M16.95 2.25L13.05 21.75M10.95 2.25L7.05 21.75",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   clip: ({ className }) => {
     return /* @__PURE__ */ jsx(
       "svg",

package/dist/{chunk-JQ5C2U5I.mjs → chunk-S5C55OPB.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   template
-} from "./chunk-5BT37SLM.mjs";
+} from "./chunk-Q6H3TAWM.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";

package/dist/{chunk-5JRZQLXQ.mjs → chunk-SFQCENX3.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-KH63CD55.mjs";
 import {
   input_default
-} from "./chunk-3RTVVQA3.mjs";
+} from "./chunk-PQ2A52BQ.mjs";
 import {
   button_default
-} from "./chunk-FFUZAOFL.mjs";
+} from "./chunk-L24D3ZSW.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/{chunk-F6BQCZ54.mjs → chunk-UMCWKBW6.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";

package/dist/{chunk-XKWKJQEF.mjs → chunk-WZOVARNL.mjs}

@@ -7,10 +7,10 @@ import {
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   input_default
-} from "./chunk-3RTVVQA3.mjs";
+} from "./chunk-PQ2A52BQ.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-VVCSY7DG.mjs → chunk-X6XRYX46.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-3RTVVQA3.mjs";
+} from "./chunk-PQ2A52BQ.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-K3M3QEEV.mjs → chunk-YZMOQORK.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   avatar_default
-} from "./chunk-JQ5C2U5I.mjs";
+} from "./chunk-S5C55OPB.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";

package/dist/{chunk-JPNMYMDN.mjs → chunk-ZS7ILCNA.mjs}

@@ -8,19 +8,19 @@ import {
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   input_default
-} from "./chunk-3RTVVQA3.mjs";
-import {
-  text_button_default
-} from "./chunk-4LUASWAN.mjs";
+} from "./chunk-PQ2A52BQ.mjs";
 import {
   button_default
-} from "./chunk-FFUZAOFL.mjs";
+} from "./chunk-L24D3ZSW.mjs";
 import {
   icon_button_default
-} from "./chunk-TB2DOWSM.mjs";
+} from "./chunk-GZ7A7CWU.mjs";
+import {
+  text_button_default
+} from "./chunk-4LUASWAN.mjs";
 import {
   Icon_default
-} from "./chunk-YEYUS6DW.mjs";
+} from "./chunk-2GF7FJBM.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/components/avatar/avatar.js

@@ -1764,6 +1764,84 @@ var template = {
       }
     );
   },
+  tag: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M3.30357 11.6448L6.70107 15.0423C8.09607 16.4373 10.3611 16.4373 11.7636 15.0423L15.0561 11.7498C16.4511 10.3548 16.4511 8.08978 15.0561 6.68728L11.6511 3.29728C10.9386 2.58478 9.95607 2.20228 8.95107 2.25478L5.20107 2.43478C3.70107 2.50228 2.50857 3.69478 2.43357 5.18728L2.25357 8.93727C2.20857 9.94977 2.59107 10.9323 3.30357 11.6448Z",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M7.30107 9.1698C8.33661 9.1698 9.17607 8.33033 9.17607 7.2948C9.17607 6.25927 8.33661 5.4198 7.30107 5.4198C6.26554 5.4198 5.42607 6.25927 5.42607 7.2948C5.42607 8.33033 6.26554 9.1698 7.30107 9.1698Z",
+              stroke: "currentColor",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.92607 12.9198L12.9261 9.9198",
+              stroke: "currentColor",
+              strokeMiterlimit: "10",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      }
+    );
+  },
+  "check-page": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "13",
+        height: "16",
+        viewBox: "0 0 13 16",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M4.71875 0.5H1.34375C0.878 0.5 0.5 0.878 0.5 1.34375V14.2812C0.5 14.747 0.878 15.125 1.34375 15.125H10.9062C11.372 15.125 11.75 14.747 11.75 14.2812V7.53125M4.71875 0.5H5C6.79021 0.5 8.5071 1.21116 9.77297 2.47703C11.0388 3.7429 11.75 5.45979 11.75 7.25V7.53125M4.71875 0.5C5.39008 0.5 6.03391 0.766685 6.50861 1.24139C6.98332 1.71609 7.25 2.35992 7.25 3.03125V4.15625C7.25 4.622 7.628 5 8.09375 5H9.21875C9.89008 5 10.5339 5.26668 11.0086 5.74139C11.4833 6.21609 11.75 6.85992 11.75 7.53125M3.875 10.0625L5.5625 11.75L8.375 7.8125",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  rectangle: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2" })
+      }
+    );
+  },
   // ----------------------------------- old ---------------------------------
   // ** Status **
   "plus-circle": ({ className, fill }) => {
@@ -2535,28 +2613,6 @@ var template = {
       }
     );
   },
-  tag: ({ className }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M5.25 8.25H20.25M3.75 15.75H18.75M16.95 2.25L13.05 21.75M10.95 2.25L7.05 21.75",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   clip: ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",

package/dist/components/avatar/avatar.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   avatar_default
-} from "../../chunk-JQ5C2U5I.mjs";
-import "../../chunk-5BT37SLM.mjs";
+} from "../../chunk-S5C55OPB.mjs";
+import "../../chunk-Q6H3TAWM.mjs";
 import "../../chunk-U4DJHAM5.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {