@pylerai/design-system 1.2.2 → 1.2.3

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
@@ -5,9 +5,9 @@ Pyler Frontend를 위한 디자인 시스템 패키지 (Tailwind CSS + shadcn/ui
5
5
  ## 📦 패키지 정보
6
6
 
7
7
  - **패키지명**: `@pylerai/design-system`
8
- - **버전**: 1.0.1
8
+ - **버전**: ![npm version](https://img.shields.io/npm/v/@pylerai/design-system)
9
9
  - **라이선스**: ISC
10
- - **레지스트리**: GitHub Packages
10
+ - **레지스트리**: npm (registry.npmjs.org, public)
11
11
  - **기술 스택**: React + TypeScript + Tailwind CSS + shadcn/ui + Storybook + Vitest
12
12
 
13
13
  ## 🚀 설치 및 사용
@@ -16,33 +16,17 @@ Pyler Frontend를 위한 디자인 시스템 패키지 (Tailwind CSS + shadcn/ui
16
16
 
17
17
  다른 레포지토리에서 이 디자인 시스템을 사용하려면 다음 단계를 따라하세요:
18
18
 
19
- #### 1. GitHub Personal Access Token 생성
19
+ #### 1. 패키지 설치
20
20
 
21
- 1. GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
22
- 2. "Generate new token (classic)" 클릭
23
- 3. `read:packages` 권한 체크
24
- 4. 토큰 생성 및 복사 (한 번만 표시되므로 안전하게 보관!)
25
-
26
- #### 2. 프로젝트에 `.npmrc` 파일 생성
27
-
28
- 프로젝트 루트에 `.npmrc` 파일을 생성하고 다음 내용을 추가하세요:
29
-
30
- ```
31
- @pylerai:registry=https://npm.pkg.github.com
32
- //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
33
- ```
34
-
35
- `YOUR_GITHUB_TOKEN` 부분을 1단계에서 생성한 토큰으로 교체하세요.
36
-
37
- > ⚠️ 주의: `.npmrc` 파일은 절대 git에 커밋하지 마세요! `.gitignore`에 추가되어 있는지 확인하세요.
38
-
39
- #### 3. 패키지 설치
21
+ public npm 레지스트리에 배포되어 있으므로 별도 인증 없이 바로 설치할 수 있습니다.
40
22
 
41
23
  ```bash
42
24
  npm install @pylerai/design-system
43
25
  ```
44
26
 
45
- #### 4. Tailwind CSS 설정
27
+ > [CHANGELOG](./CHANGELOG.md) · [CONTRIBUTING](./CONTRIBUTING.md)
28
+
29
+ #### 2. Tailwind CSS 설정
46
30
 
47
31
  사용할 프로젝트의 `tailwind.config.js` / `tailwind.config.cjs` 파일에 다음을 추가하세요:
48
32
 
@@ -75,7 +59,7 @@ import "@pylerai/design-system/style.css";
75
59
 
76
60
  > 구버전 번들러에서 서브패스가 동작하지 않으면 `@import "@pylerai/design-system/dist/style.css";` 또는 `import "@pylerai/design-system/dist/style.css";` 를 사용하세요.
77
61
 
78
- #### 5. 사용하기
62
+ #### 3. 사용하기
79
63
 
80
64
  ```typescript
81
65
  import { Button } from "@pylerai/design-system";
@@ -170,39 +154,6 @@ module.exports = {
170
154
 
171
155
  스토리북 **Design Tokens → Color Tokens**에서 전체 스와치와 HEX를 확인할 수 있습니다.
172
156
 
173
- #### 환경별 설정 예시
174
-
175
- **`.env` 파일을 사용하는 경우** (추천):
176
-
177
- 프로젝트 루트에 `.env` 파일 생성:
178
-
179
- ```
180
- GITHUB_TOKEN=your_token_here
181
- ```
182
-
183
- `.npmrc` 파일:
184
-
185
- ```
186
- @pylerai:registry=https://npm.pkg.github.com
187
- //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
188
- ```
189
-
190
- **CI/CD 환경** (GitHub Actions):
191
-
192
- 워크플로우 파일에 다음 추가:
193
-
194
- ```yaml
195
- - uses: actions/checkout@v5
196
- - uses: actions/setup-node@v4
197
- with:
198
- node-version: 20
199
- registry-url: https://npm.pkg.github.com/
200
- scope: "@pylerai"
201
- - run: npm install @pylerai/design-system
202
- env:
203
- NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
204
- ```
205
-
206
157
  ## 🎨 컴포넌트
207
158
 
208
159
  ### Typography
@@ -451,59 +402,21 @@ Storybook은 `http://localhost:6006`에서 실행됩니다.
451
402
 
452
403
  ## 📤 배포
453
404
 
454
- 이 프로젝트는 GitHub Actions를 통해 자동 배포됩니다.
405
+ 이 프로젝트는 `npm run publish:npm` 실행을 통해 public npm 레지스트리(`registry.npmjs.org`)로 배포됩니다.
455
406
 
456
407
  ### 배포 프로세스
457
408
 
458
- 1. **릴리스 생성**: GitHub에서 새로운 릴리스를 생성하면 자동으로 워크플로우가 트리거됩니다.
459
- 2. **빌드 단계**:
460
- - Node.js 20 환경에서 실행
461
- - `npm ci`로 의존성 설치
462
- - `npm test`로 테스트 실행
463
- 3. **퍼블리시 단계**:
464
- - GitHub Packages에 패키지 퍼블리시
465
- - 패키지 스코프: `@pylerai`
466
- - 레지스트리: `https://npm.pkg.github.com`
467
-
468
- ### 워크플로우 파일
469
-
470
- ```yaml:.github/workflows/release-package.yml
471
- name: Node.js Package
472
-
473
- on:
474
- release:
475
- types: [created]
476
-
477
- jobs:
478
- build:
479
- runs-on: ubuntu-latest
480
- steps:
481
- - uses: actions/checkout@v5
482
- - uses: actions/setup-node@v4
483
- with:
484
- node-version: 20
485
- - run: npm ci
486
- - run: npm test
487
-
488
- publish-gpr:
489
- needs: build
490
- runs-on: ubuntu-latest
491
- permissions:
492
- packages: write
493
- contents: read
494
- steps:
495
- - uses: actions/checkout@v5
496
- - uses: actions/setup-node@v4
497
- with:
498
- node-version: 20
499
- registry-url: https://npm.pkg.github.com/
500
- scope: "@pylerai"
501
- - run: npm ci
502
- - run: npm publish
503
- env:
504
- NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
409
+ 1. **버전 업데이트**: `package.json`의 `version`을 올립니다.
410
+ 2. **배포 실행**:
411
+
412
+ ```bash
413
+ npm run publish:npm
505
414
  ```
506
415
 
416
+ 이 스크립트는 `npm run build`로 패키지를 빌드한 뒤, `npm publish --access public`으로 `@pylerai/design-system`을 public 스코프로 퍼블리시합니다.
417
+
418
+ > ⚠️ `.github/workflows/release-package.yml`은 GitHub Release가 생성될 때 트리거되어 GitHub Packages(`npm.pkg.github.com`)로도 별도 퍼블리시를 시도하는 워크플로우입니다. 현재 실제 배포는 위 수동 `npm run publish:npm` 경로로만 이루어지고 있어 이 워크플로우와 실제 배포 방식이 어긋나 있습니다. GitHub Release를 생성하면 의도치 않게 GitHub Packages 쪽에도 배포가 실행될 수 있으니 주의하세요 (워크플로우 자체 정리는 별도 후속 작업 — [CONTRIBUTING](./CONTRIBUTING.md) 참고).
419
+
507
420
  ## 🔗 링크
508
421
 
509
422
  - **Repository**: https://github.com/pylerAI/design-system