@deepnoid/ui 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,82 +1,83 @@
1
1
  # @deepnoid-ui
2
2
 
3
- 본부 프로젝트에서 공통으로 사용하는 TailwindCSS 기반 UI 컴포넌트 라이브러리입니다.
3
+ 본�? ???�로?�트?�서 공통?�로 ?�용?�는 TailwindCSS 기반 UI 컴포?�트 ?�이브러리입?�다.
4
4
 
5
- 모노레포 구조로 구성되어 있으며, Storybook 통해 컴포넌트 문서화 및 테스트를 수행합니다.
5
+ 모노?�포 구조�?구성?�어 ?�으�? Storybook???�해 컴포?�트 문서??�??�스?��? ?�행?�니??
6
6
 
7
- - Storybook 위치: [`./apps/docs`](../../apps/docs)
7
+ - Storybook ???�치: [`./apps/docs`](../../apps/docs)
8
8
 
9
- ## 📦 Monorepo 구성
9
+ ## ?�� Monorepo 구성
10
10
 
11
- 모노레포에는 다음 패키지들이 포함되어 있습니다.
11
+ ??모노?�포?�는 ?�음 ?�키지?�이 ?�함?�어 ?�습?�다.
12
12
 
13
13
  - [`./packages/eslint-config`](../../packages/eslint-config)
14
- 공통 ESLint 규칙 정의
14
+ 공통 ESLint 규칙 ?�의
15
15
 
16
16
  - [`./packages/tailwind-config`](../../packages/tailwind-config)
17
- Tailwind CSS v4 마이그레이션 적용 (CSS-First 기반 디자인 토큰 및 모듈화된 프리셋 제공)
17
+ Tailwind CSS v4 마이그레?�션 ?�용 (CSS-First 기반 ?�자???�큰 �?모듈?�된 ?�리???�공)
18
18
 
19
19
  - [`./packages/typescript-config`](../../packages/typescript-config)
20
- 공통 TypeScript 설정 정의
20
+ 공통 TypeScript ?�정 ?�의
21
21
 
22
22
  - [`./packages/ui`](../../packages/ui)
23
- TailwindCSS 기반 UI 컴포넌트 패키지
23
+ TailwindCSS 기반 UI 컴포?�트 ?�키지
24
24
 
25
25
 
26
- ## 설치
26
+ ## ?�치
27
27
 
28
28
  ```bash
29
29
  yarn add @deepnoid/ui
30
30
  ```
31
31
 
32
- ## Tailwind CSS v4 설정
32
+ ## Tailwind CSS v4 ?�정
33
33
 
34
- `@deepnoid/ui`는 Tailwind CSS v4의 **CSS-First** 아키텍처를 도입하여 플러그인(`plugin.ts`)과 `tailwind.config.ts`를 완전히 제거했습니다.
35
- 설정을 적용하려면 앱의 엔트리 CSS 파일(예: `global.css`) 다음과 같이 import 해야 합니다.
34
+ `@deepnoid/ui`??Tailwind CSS v4??**CSS-First** ?�키?�처�??�입?�여 ?�러그인(`plugin.ts`)�?`tailwind.config.ts`�??�전???�거?�습?�다.
35
+ ?�정???�용?�려�??�의 ?�트�?CSS ?�일(?? `global.css`)???�음�?같이 import ?�야 ?�니??
36
36
 
37
37
  ```css
38
38
  /* global.css */
39
39
  @import "tailwindcss";
40
40
  @import "@deepnoid/ui/style.css";
41
41
 
42
- /* Deepnoid UI 프리셋/폰트/@source가 포함된 엔트리 CSS 로드합니다. */
43
- /* (선택) 앱에서 사용하는 소스 경로를 추가 스캔하고 싶다면 @source 추가하세요. */
42
+ /* Deepnoid UI ?�리???�트/@source가 ?�함???�트�?CSS�?로드?�니?? */
43
+ /* (?�택) ?�에???�용?�는 ?�스 경로�?추�? ?�캔?�고 ?�다�?@source �?추�??�세?? */
44
44
  /* @source "./src/**/*.{ts,tsx,js,jsx}"; */
45
45
 
46
- /* 특정 프로젝트 전용 커스텀 색상(테마) 덮어쓰기 */
46
+ /* ?�정 ?�로?�트 ?�용 커스?� ?�상(?�마) ??��?�기 */
47
47
  :root, .light, [data-theme="light"],
48
48
  .dark, [data-theme="dark"] {
49
49
  --color-primary-soft: #EFF8FF;
50
- /* 동적 CSS 색상 매핑을 위해 --color- 접두사를 사용합니다. */
50
+ /* ?�적 CSS ?�상 매핑???�해 --color- ?�두?��? ?�용?�니?? */
51
51
  }
52
52
  ```
53
53
 
54
- ## Tailwind CSS v4 아키텍처 확장 관리
54
+ ## Tailwind CSS v4 ?�키?�처 �??�장 관�?
55
55
 
56
- 유지보수와 확장을 쉽게 하기 위해 설정들을 여러 CSS 파일로 분리하여 관리합니다.
56
+ ?��?보수?� ?�장???�게 ?�기 ?�해 ?�정?�을 ?�러 CSS ?�일�?분리?�여 관리합?�다.
57
57
 
58
58
  ```text
59
59
  packages/tailwind-config/
60
- ├── scripts/
61
- │ └── generate-border.ts # border 유틸리티 자동 생성 스크립트 (build-time)
62
- ├── src/
63
- │ ├── preset.css # 모든 CSS 하나로 묶는 @import 진입점 (최상위 설정)
64
- │ └── styles/
65
- │ ├── generated/
66
- │ │ └── border.css # 스크립트 실행으로 자동 생성된 파일
67
- │ ├── tokens/
68
- │ │ ├── theme.css # 폰트, Radius, Shadow, Spacing 등
69
- │ │ └── colors.css # 원시(Primitive) 기본 색상 시맨틱 매핑
70
- │ ├── utilities/
71
- │ │ └── scrollbar.css # 브라우저 스크롤바 커스텀 유틸리티 (@utility)
72
- │ └── animation.css # 타이밍, Keyframes, 애니메이션 테마 변수
60
+ ?��??� scripts/
61
+ ?? ?��??� generate-border.mjs # border ?�틸리티 ?�동 ?�성 ?�크립트 (build-time)
62
+ ?��??� src/
63
+ ?? ?��??� preset.css # 모든 CSS�??�나�?묶는 @import 진입??(최상???�정)
64
+ ?? ?��??� styles/
65
+ ?? ?��??� generated/
66
+ ?? ?? ?��??� border.css # ?�크립트 ?�행?�로 ?�동 ?�성???�일
67
+ ?? ?? ?��??� border.fallback.css # Tailwind �̺�ȯ ȯ��� plain CSS ����
68
+ ?? ?��??� tokens/
69
+ ?? ?? ?��??� theme.css # ?�트, Radius, Shadow, Spacing ??
70
+ ?? ?? ?��??� colors.css # ?�시(Primitive) 기본 ?�상 �??�맨??매핑
71
+ ?? ?��??� utilities/
72
+ ?? ?? ?��??� scrollbar.css # 브라?��? ?�크롤바 커스?� ?�틸리티 (@utility)
73
+ ?? ?��??� animation.css # ?�?�밍, Keyframes, ?�니메이???�마 변??
73
74
  ```
74
75
 
75
- **참고 사항:**
76
- - 이상 `tailwind.config.ts`에서 하드코딩으로 컴포넌트나 테마를 생성하지 않습니다.
77
- - 유틸리티 클래스가 반복되는 경우(예: `border-t-sm`, `border-x-md`), JS 플러그인을 다시 부활시키지 않고 `scripts/` 폴더 내에 TS/JS **코드 생성기(Generator)** 작성하여 빌드 타임에 정적인 CSS 객체를 뽑아냅니다.
76
+ **참고 ?�항:**
77
+ - ???�상 `tailwind.config.ts`?�서 ?�드코딩?�로 컴포?�트???�마�??�성?��? ?�습?�다.
78
+ - ?�틸리티 ?�래?��? 반복?�는 경우(?? `border-t-sm`, `border-x-md`), JS ?�러그인???�시 부?�시?��? ?�고 `scripts/` ?�더 ?�에 TS/JS **코드 ?�성�?Generator)** �??�성?�여 빌드 ?�?�에 ?�적??CSS 객체�?뽑아?�니??
78
79
 
79
- ## 개발 환경
80
+ ## 개발 ?�경
80
81
 
81
82
  ```bash
82
83
  node@23.1.0
@@ -86,8 +87,8 @@ yarn@1.22.22
86
87
 
87
88
  ## Storybook
88
89
 
89
- - 개발 환경: http://localhost:6006
90
- - ~~테스트 서버: http://172.30.10.148:6006~~
90
+ - 개발 ?�경: http://localhost:6006
91
+ - ~~?�스???�버: http://172.30.10.148:6006~~
91
92
 
92
93
  ```bash
93
94
  yarn install
@@ -95,7 +96,7 @@ yarn build
95
96
  yarn dev
96
97
  ```
97
98
 
98
- ## 디자인 시스템
99
+ ## ?�자???�스??
99
100
 
100
101
  - [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)
101
102
 
@@ -103,24 +104,24 @@ yarn dev
103
104
 
104
105
  ### 1. Storybook
105
106
 
106
- 테스트 서버 Storybook 배포 방법:
107
+ ?�스???�버 Storybook 배포 방법:
107
108
 
108
- - [./storybook.Dockerfile](./storybook.Dockerfile) 파일 참고
109
- - [./docker-compose.yml](./docker-compose.yml) 파일 참고
109
+ - [./storybook.Dockerfile](./storybook.Dockerfile) ?�일 참고
110
+ - [./docker-compose.yml](./docker-compose.yml) ?�일 참고
110
111
 
111
- 프로젝트 루트 경로에서 아래와 같은 커맨드를 통해 Storybook을 테스트 서버에 배포합니다.
112
+ ?�로?�트 루트 경로?�서 ?�래?� 같�? 커맨?��? ?�해 Storybook???�스???�버??배포?�니??
112
113
 
113
114
  ```bash
114
- // 서비스에 필요한 컨테이너를 생성하고 실행
115
+ // ?�비?�에 ?�요??컨테?�너�??�성?�고 ?�행
115
116
  docker compose up
116
117
 
117
- // 실행 중인 컨테이너를 멈추고 생성된 컨테이너나 이미지를 제거
118
+ // ?�행 중인 컨테?�너�?멈추�??�성??컨테?�너???��?지�??�거
118
119
  docker compose down
119
120
  ```
120
121
 
121
122
  ### 2. NPM (Node Package Manager)
122
123
 
123
- 커맨드 라인을 사용하여 NPM 배포:
124
+ 커맨???�인???�용?�여 NPM 배포:
124
125
 
125
126
  ```bash
126
127
  yarn build
@@ -128,15 +129,15 @@ yarn build
128
129
  yarn publish:npm
129
130
  ```
130
131
 
131
- Gitlab Action 사용하여 NPM 배포:
132
+ Gitlab Action???�용?�여 NPM 배포:
132
133
 
133
- release 브랜치에 머지했을 배포 파이프라인 실행되도록 스크립트가 작성되어 있습니다.
134
+ release 브랜치에 머�??�을 ??배포 ?�이?�라???�행?�도�??�크립트가 ?�성?�어 ?�습?�다.
134
135
 
135
- - [./.gitlab-ci.yml](./.gitlab-ci.yml) 파일 참고
136
+ - [./.gitlab-ci.yml](./.gitlab-ci.yml) ?�일 참고
136
137
 
137
- ## 기타
138
+ ## 기�?
138
139
 
139
- [turborepo](https://turbo.build/) 활용하여 프로젝트를 구성했으니 내용 참고해주시기 바랍니다.
140
+ [turborepo](https://turbo.build/)�??�용?�여 ?�로?�트�?구성?�으???�용 참고?�주?�기 바랍?�다.
140
141
 
141
142
 
142
143
 
@@ -8,7 +8,6 @@ import "../../chunk-7VOQKIIK.mjs";
8
8
  import "../../chunk-KE26ONWZ.mjs";
9
9
  import "../../chunk-2GCSFWHD.mjs";
10
10
  import "../../chunk-Y6EIO72X.mjs";
11
- import "../../chunk-3V4HT2K5.mjs";
12
11
  import "../../chunk-MY5U63QO.mjs";
13
12
  import "../../chunk-PRLKKUBY.mjs";
14
13
  import "../../chunk-ZDZKGGK3.mjs";
@@ -21,6 +20,7 @@ import "../../chunk-ZYIIXWVY.mjs";
21
20
  import "../../chunk-A6UUVHC6.mjs";
22
21
  import "../../chunk-Q5T3XRA3.mjs";
23
22
  import "../../chunk-AOU4QX7H.mjs";
23
+ import "../../chunk-3V4HT2K5.mjs";
24
24
  import "../../chunk-27Y6K5NK.mjs";
25
25
  import "../../chunk-E3G5QXSH.mjs";
26
26
  import "../../chunk-UP6RPQDX.mjs";
@@ -7,7 +7,6 @@ import "../../chunk-7VOQKIIK.mjs";
7
7
  import "../../chunk-KE26ONWZ.mjs";
8
8
  import "../../chunk-2GCSFWHD.mjs";
9
9
  import "../../chunk-Y6EIO72X.mjs";
10
- import "../../chunk-3V4HT2K5.mjs";
11
10
  import "../../chunk-MY5U63QO.mjs";
12
11
  import "../../chunk-PRLKKUBY.mjs";
13
12
  import "../../chunk-ZDZKGGK3.mjs";
@@ -20,6 +19,7 @@ import "../../chunk-ZYIIXWVY.mjs";
20
19
  import "../../chunk-A6UUVHC6.mjs";
21
20
  import "../../chunk-Q5T3XRA3.mjs";
22
21
  import "../../chunk-AOU4QX7H.mjs";
22
+ import "../../chunk-3V4HT2K5.mjs";
23
23
  import "../../chunk-27Y6K5NK.mjs";
24
24
  import "../../chunk-E3G5QXSH.mjs";
25
25
  import "../../chunk-UP6RPQDX.mjs";
package/dist/index.mjs CHANGED
@@ -45,6 +45,10 @@ import {
45
45
  import {
46
46
  definition_table_default
47
47
  } from "./chunk-HXBZB7CW.mjs";
48
+ import "./chunk-TPFN22HR.mjs";
49
+ import {
50
+ radio_default
51
+ } from "./chunk-AO6LNH3D.mjs";
48
52
  import "./chunk-QCEKPS7U.mjs";
49
53
  import {
50
54
  select_default
@@ -66,10 +70,11 @@ import {
66
70
  day_default
67
71
  } from "./chunk-G6SZN3EK.mjs";
68
72
  import "./chunk-3IBJXQTJ.mjs";
69
- import "./chunk-TPFN22HR.mjs";
73
+ import "./chunk-7B7LRG5J.mjs";
70
74
  import {
71
- radio_default
72
- } from "./chunk-AO6LNH3D.mjs";
75
+ pagination_default
76
+ } from "./chunk-AYTOWECM.mjs";
77
+ import "./chunk-F3HENRVM.mjs";
73
78
  import "./chunk-NNVGYR5T.mjs";
74
79
  import {
75
80
  useGlobalModal
@@ -80,11 +85,6 @@ import {
80
85
  import {
81
86
  modal_default
82
87
  } from "./chunk-TGXYSXEN.mjs";
83
- import "./chunk-7B7LRG5J.mjs";
84
- import {
85
- pagination_default
86
- } from "./chunk-AYTOWECM.mjs";
87
- import "./chunk-F3HENRVM.mjs";
88
88
  import "./chunk-RLXOHILK.mjs";
89
89
  import "./chunk-7MVEAQ7Z.mjs";
90
90
  import {
@@ -93,10 +93,6 @@ import {
93
93
  import {
94
94
  list_default
95
95
  } from "./chunk-7CTICAGW.mjs";
96
- import "./chunk-MGEWSREV.mjs";
97
- import {
98
- chip_default
99
- } from "./chunk-QUWWLVCI.mjs";
100
96
  import "./chunk-QZ3LVYJW.mjs";
101
97
  import {
102
98
  checkbox_default
@@ -105,6 +101,10 @@ import "./chunk-32GA3YW4.mjs";
105
101
  import {
106
102
  drawer_default
107
103
  } from "./chunk-CXVDES22.mjs";
104
+ import "./chunk-MGEWSREV.mjs";
105
+ import {
106
+ chip_default
107
+ } from "./chunk-QUWWLVCI.mjs";
108
108
  import {
109
109
  fileUpload_default
110
110
  } from "./chunk-FNES52QP.mjs";
@@ -137,11 +137,11 @@ import {
137
137
  import {
138
138
  radarChart_default
139
139
  } from "./chunk-Y3A7PN4Q.mjs";
140
+ import "./chunk-7DLOYKVC.mjs";
140
141
  import "./chunk-SE5TU755.mjs";
141
142
  import {
142
143
  backdrop_default
143
144
  } from "./chunk-5RJYESLP.mjs";
144
- import "./chunk-3V4HT2K5.mjs";
145
145
  import "./chunk-KYIODWXL.mjs";
146
146
  import {
147
147
  breadcrumb_default
@@ -175,11 +175,11 @@ import {
175
175
  import {
176
176
  accordionItem_default
177
177
  } from "./chunk-SLKXMIWY.mjs";
178
- import "./chunk-7DLOYKVC.mjs";
179
178
  import {
180
179
  avatar_default
181
180
  } from "./chunk-D3DKXTTY.mjs";
182
181
  import "./chunk-AOU4QX7H.mjs";
182
+ import "./chunk-3V4HT2K5.mjs";
183
183
  import "./chunk-27Y6K5NK.mjs";
184
184
  import "./chunk-E3G5QXSH.mjs";
185
185
  import {