Skip to content

docs(react): Pretendard 폰트 로드 정책 명시 및 가이드 추가 #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndaemy merged 1 commit into from
May 7, 2026
Merged

docs(react): Pretendard 폰트 로드 정책 명시 및 가이드 추가 #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion packages/react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,40 @@ import '@bubbly-design-system/react/styles.css';

> Panda CSS의 preflight(CSS 리셋)는 **비활성** 상태입니다. 필요하다면 별도의 리셋(예: `modern-normalize`)을 직접 적용하세요.

### 2. 컴포넌트 사용
### 2. 폰트 설정 (Pretendard)

이 디자인시스템은 **Pretendard** 를 기본 폰트로 가정합니다. 패키지는 폰트를 번들하지 않으므로 (dynamic subsetting 보존 및 중복 로드 회피) 호스트 앱에서 다음 중 한 가지 방법으로 직접 로드해주세요.

#### A. CSS에서 `@import`

```css
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
```

#### B. HTML `<head>` (예: Next.js App Router의 `app/layout.tsx`)

```html
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
```

#### C. Self-host (npm 패키지)

```bash
pnpm add pretendard
```

```css
@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
```

> 폰트를 로드하지 않으면 컴포넌트들은 시스템 폰트로 fallback 됩니다 (`sans-serif`).

### 3. 컴포넌트 사용

```tsx
import { Button, SearchField, Tabs, TabItem } from '@bubbly-design-system/react';
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
/*
* Storybook 전용 entry — `panda cssgen`이 생성하는 publish용 `dist/styles.css`에는 포함되지 않습니다.
* 패키지 사용자가 받는 폰트 로드 정책은 README의 "폰트 설정" 섹션을 참고하세요.
*/

/* Pretendard (dynamic subset) — Storybook 캔버스에서만 로드됩니다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* Panda PostCSS 플러그인이 generated CSS를 layer에 inject하기 위해 필수로 필요한 선언입니다. */
@layer reset, base, tokens, recipes, utilities;
Loading