@pylerai/design-system 2.0.0 → 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Pyler Inc.
+
+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.

package/README.md

@@ -12,7 +12,7 @@ Pyler Frontend를 위한 디자인 시스템 패키지 (React + TypeScript + Tai
 
 - **패키지명**: `@pylerai/design-system` ![npm version](https://img.shields.io/npm/v/@pylerai/design-system)
 - **레지스트리**: public npm (`registry.npmjs.org`) — 별도 인증 불필요
-- **라이선스**: ISC
+- **라이선스**: MIT ([LICENSE](./LICENSE))
 - **peer 의존성**: React 18 또는 19
 
 > [CHANGELOG](./CHANGELOG.md) · [CONTRIBUTING](./CONTRIBUTING.md)
@@ -43,6 +43,29 @@ CSS 파일에서 `@import` 해도 동일합니다.
 
 > 구버전 번들러에서 서브패스가 동작하지 않으면 `@pylerai/design-system/dist/style.css`를 사용하세요.
 
+#### 폰트
+
+`style.css`의 `--ds-font-sans`는 `"Pretendard JP", Pretendard, …` 라는 **이름**만 선언합니다. 그 이름을 실제로 등록하는 `@font-face`는 `fonts.css`에 있으므로 둘을 같이 로드합니다.
+
+```typescript
+import "@pylerai/design-system/style.css";
+import "@pylerai/design-system/fonts.css";
+```
+
+그리고 앱의 전역 스타일은 폰트 이름을 직접 쓰지 않고 변수만 참조합니다.
+
+```css
+body {
+  font-family: var(--ds-font-sans);
+}
+```
+
+- **앱에서 Pretendard를 따로 로드하지 않습니다** — `next/font`, `public/fonts`, CDN `<link>` 모두 해당. 이름이 한 글자만 어긋나도 스택이 매칭에 실패해 OS 폰트나 세리프로 조용히 떨어집니다(aid-frontend PF-3757). Montserrat 등 앱 고유의 장식 폰트는 이 규칙과 무관합니다.
+- `--ds-font-sans`를 앱에서 덮어쓰지 않습니다. `next/font` 변수로 바꿔 끼우던 방식은 폐기했습니다.
+- 폰트는 npm `pretendard-jp`·`pretendard`의 **가변 다이나믹 서브셋**입니다. `unicode-range`로 쪼개져 화면에 쓰인 글자 범위 조각만 내려받습니다(요청 수는 늘고 총량은 줍니다). JP 서브셋은 한글 range를 선언하지 않아 한글은 2순위 Pretendard가 받으며, 두 폰트의 한글·라틴 아웃라인과 메트릭은 같습니다.
+- `fonts.css`는 `:root { font-feature-settings: "ss05" }`를 함께 켭니다. Pretendard JP의 기본 자형은 일본어 관습(괄호·구두점 위치, 공용 한자)이라 벤더 지침대로 한국어 자형으로 맞추는 것이고, `lang="ja"` 요소는 원래 자형으로 돌아갑니다.
+- 스택 이름과 `fonts.css` 등록 이름이 어긋나면 `npm run check:tokens`가 실패합니다.
+
 ### 2. Tailwind 연동
 
 프리셋을 사용하면 `ds` 컬러 팔레트·타이포그래피 스케일·radius·shadow가 한 번에 합쳐집니다.
@@ -127,6 +150,7 @@ function App() {
 Figma Light 모드와 동일한 값을 **CSS 변수(`--ds-*`)**, **Tailwind `ds` 팔레트**, **TypeScript 상수** 세 가지 형태로 제공합니다. 앱 코드에 HEX를 직접 쓰지 말고 토큰을 참조하세요.
 
 > 세 형태의 값이 어긋나지 않도록 `npm run check:tokens`가 CI에서 정합성을 검사합니다.
+> 토큰 값을 바꾸는 기여자용 절차는 [CONTRIBUTING의 "토큰 변경 절차"](./CONTRIBUTING.md#토큰-변경-절차-컬러--타이포그래피)를 참고하세요.
 
 ### 컬러
 
@@ -176,7 +200,7 @@ flatPylerLightTokens.forEach(({ path, hex, cssVar }) => { /* 문서화·순회
 | Body 4 R | 12px | 400 | `text-body-4-r` | `.ds-type-body-4-r` |
 | Label 1 R | 11px | 400 | `text-label-1-r` | `.ds-type-label-1-r` |
 
-폰트는 Pretendard JP(`--ds-font-sans`)를 사용합니다. 앱에서 웹폰트를 별도로 로드해야 합니다.
+폰트는 Pretendard JP(`--ds-font-sans`)를 사용합니다. `@pylerai/design-system/fonts.css`를 함께 로드하면 등록됩니다(위 "폰트" 절 참고).
 
 컴포넌트로 쓸 수도 있습니다. `as`로 태그를, `asChild`로 자식 요소에 스타일만 입힐 수 있습니다.
 
@@ -234,7 +258,8 @@ design-system/
 ├── .storybook/                     # Storybook 설정 (main/preview/vitest.setup)
 ├── .github/workflows/
 │   ├── pr-checks.yml               # PR 검증 (tokens → lint → tsc → test → build)
-│   └── deploy-github-pages.yml     # Storybook 배포
+│   ├── deploy-github-pages.yml     # Storybook 배포
+│   └── release-package.yml         # GitHub Release 생성 시 npm 자동 배포
 ├── scripts/
 │   └── check-tokens.cjs            # 토큰 정합성 검사
 ├── src/
@@ -270,9 +295,7 @@ npm run build
 
 ## 📤 배포
 
-`main`은 브랜치 보호로 직접 push할 수 없습니다. 버전 릴리스 절차(버전 범프 → CHANGELOG → 태그 → `npm run publish:npm`)는 [CONTRIBUTING](./CONTRIBUTING.md)에 정리돼 있습니다.
-
-> ⚠️ `.github/workflows/release-package.yml`은 GitHub Release 생성 시 GitHub Packages로 배포하도록 되어 있으나, 실제 배포는 public npm으로 수동 실행하는 방식입니다. 한 번도 실행된 적 없는 워크플로이며 정리 대상입니다. 자세한 경위는 [CONTRIBUTING](./CONTRIBUTING.md#알려진-이슈-release-packageyml-워크플로-범위-외) 참고.
+`main`은 브랜치 보호로 직접 push할 수 없습니다. 버전 릴리스 절차(버전 범프 → CHANGELOG → 태그 → GitHub Release 생성 → CI 자동 npm 배포)는 [CONTRIBUTING](./CONTRIBUTING.md)에 정리돼 있습니다.
 
 ## 🔗 링크