@x-plat/design-system 0.7.0 → 0.7.2

package/guidelines/AGENT_PROMPT.md

@@ -594,7 +594,7 @@ CSS 변수 `--semantic-{category}-{role}` 사용.
 | 카테고리 | 컴포넌트 |
 |---|---|
 | 입력 | `Button`, `Input`, `PasswordInput`, `TextArea`, `Select`, `CheckBox`, `Radio`, `Switch`, `DatePicker`, `Calendar` |
-| 표시 | `Table`, `Card`, `Tag`, `Chip`, `Avatar`, `Badge`, `Skeleton`, `Spinner`, `Divider`, `EmptyState`, `Progress` |
+| 표시 | `Table`, `Card`, `Tag`, `Chip`, `Avatar`, `NotificationBadge`, `Skeleton`, `Spinner`, `Divider`, `EmptyState`, `Progress` |
 | 오버레이 | `Modal`, `Drawer`, `PopOver`, `Tooltip`, `Alert`, `Toast` (`ToastProvider` 필요) |
 | 네비 | `Tab`, `CardTab`, `Breadcrumb`, `Pagination`, `Steps`, `Dropdown` |
 | 미디어 | `Video`, `FileUpload`, `ImageSelector`, `Swiper` |

package/guidelines/Guidelines.md

@@ -52,7 +52,7 @@ React 기반 디자인 시스템 라이브러리이다. Figma Make Kit과 1:1
    - [Input](./components/input.md) - Input, PasswordInput, TextArea
    - [Select](./components/select.md)
    - [Table](./components/table.md)
-   - [피드백](./components/feedback.md) - Alert, Toast, Badge
+   - [피드백](./components/feedback.md) - Alert, Toast, NotificationBadge
    - [오버레이](./components/overlay.md) - Modal, Drawer, PopOver, Tooltip
    - [폼 컨트롤](./components/form.md) - CheckBox, Radio, Switch
    - [Chip & Tag](./components/chip-tag.md)

package/guidelines/components/feedback.md

@@ -1,4 +1,4 @@
-# 피드백: Alert / Toast / Badge
+# 피드백: Alert / Toast / NotificationBadge
 
 ## Alert
 
@@ -38,20 +38,46 @@ toast("error", "오류 발생", 5000);
 
 ---
 
-## Badge
+## NotificationBadge
 
-카운트 또는 도트를 표시한다.
+다른 요소의 **우상단 모서리에 얹히는 작은 원**이다. 아이콘·버튼 위에 읽지 않은
+개수나 상태 점을 표시한다.
+
+**`children` 은 뱃지 내용이 아니라 뱃지가 올라탈 대상이다.**
 
 ```tsx
-<Badge type="error" count={5}><BellIcon /></Badge>
-<Badge type="success" dot><UserIcon /></Badge>
+<NotificationBadge type="error" count={5}><BellIcon /></NotificationBadge>
+<NotificationBadge type="success" dot><UserIcon /></NotificationBadge>
 ```
 
-| Prop | 설명 |
-|------|------|
-| type | `"error" \| "success" \| "warning" \| "info" \| "brand"` |
-| count | 숫자 표시 |
-| dot | 도트만 표시 |
+<!-- props:NotificationBadge -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children * | `ReactNode` | - | 뱃지가 올라탈 **대상**. 뱃지에 표시할 내용이 아니다. 보통 아이콘이나 버튼을 넣는다. |
+| count | `number` | - | 표시할 개수. `count` 나 `dot` 중 하나가 없으면 **뱃지가 렌더되지 않는다** (`type` 을 줘도 아무 일도 일어나지 않는다). `count={0}` 도 표시하지 않는다 — 읽지 않은 항목이 없으면 숨기는 동작이다. |
+| dot | `boolean` | `false` | 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 |
+| type | `"error" \| "success" \| "warning" \| "info" \| "brand"` | `"error"` | 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 |
+| maxCount | `number` | `99` | `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 |
+| size | `"sm" \| "md" \| "lg"` | `"md"` | 뱃지 크기. 대상의 크기가 아니다 |
+
+`*` = 필수
+<!-- /props:NotificationBadge -->
+
+### 흔한 오용
+
+알약 모양 상태 라벨로 쓰면 **조용히 실패한다.** `count` 도 `dot` 도 없으면
+뱃지가 렌더되지 않고 `children` 만 그대로 통과한다. `type` 을 줘도 무시된다.
+
+```tsx
+<NotificationBadge type="success">진행중</NotificationBadge>
+// → <div class="lib-xplat-notification-badge md">진행중</div>  — 아무 모양 없는 맨 글자
+
+<Chip type="success">진행중</Chip>   // ✅ 알약 라벨은 Chip
+<Tag onClose={fn}>진행중</Tag>        // ✅ 제거 가능한 태그는 Tag
+```
+
+> 이전 이름은 `Badge` 였다. 알약 라벨로 오해되어 바뀌었다. `Badge` 와
+> `components/Badge` 경로는 기존 사용처를 위해 남아 있지만 새 코드에는 쓰지 않는다.
 
 ---
 
@@ -61,4 +87,6 @@ toast("error", "오류 발생", 5000);
 |------|----------|
 | 인라인 알림 (페이지 내 고정) | Alert |
 | 일시적 알림 (자동 사라짐) | Toast |
-| 카운트/상태 표시 | Badge |
+| 아이콘 위 카운트/상태 점 | `NotificationBadge` |
+| 알약 모양 상태 라벨 | `Chip` |
+| 제거 가능한 태그 | `Tag` |

package/guidelines/components/table.md

@@ -21,18 +21,81 @@
 
 ## Props
 
-| Prop | 설명 |
-|------|------|
-| headerSticky | 헤더 고정 |
-| isSticky | 특정 셀 고정 |
+### Table
+
+<!-- props:Table -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children * | `ReactNode` | - |  |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+| rowBorderUse | `boolean` | `true` |  |
+| colBorderUse | `boolean` | `true` |  |
+| headerSticky | `boolean` | `false` |  |
+| stickyShadow | `boolean` | `true` |  |
+
+`*` = 필수
+<!-- /props:Table -->
+
+### TableHead
+
+<!-- props:Table.TableHead -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children * | `ReactNode` | - |  |
+| cellHover | `boolean` | `false` |  |
+
+`*` = 필수
+<!-- /props:Table.TableHead -->
+
+### TableRow
+
+<!-- props:Table.TableRow -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children * | `ReactNode` | - |  |
+| type | `"primary" \| "secondary" \| "success" \| "error" \| "warning" \| "info"` | `"secondary"` |  |
+| color | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| "neutral"` | - |  |
+| isHover | `boolean` | - |  |
+| onClick | `(e: MouseEvent<HTMLTableRowElement>) => void` | - |  |
 
-## TableRow type
+`*` = 필수
+<!-- /props:Table.TableRow -->
 
 | type | 용도 |
 |------|------|
 | primary | 기본 행 |
 | secondary | 보조 행 (배경색 구분) |
 
+### TableCell
+
+<!-- props:Table.TableCell -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children * | `ReactNode` | - |  |
+| align | `"start" \| "center" \| "end"` | `"center"` |  |
+| isSticky | `boolean` | `false` |  |
+| width | `string \| number` | - |  |
+| nowrap | `boolean` | `false` |  |
+| scope | `"col" \| "row"` | `"col"` | th 로 렌더될 때의 scope. 기본 "col" (thead 안에서만 의미가 있다) |
+| colSpan | `number` | - | 가로로 합칠 칸 수. 합계 행처럼 표 안에서 칸을 합칠 때 쓴다 |
+| onClick | `(e: MouseEvent<HTMLTableCellElement>) => void` | - |  |
+
+`*` = 필수
+<!-- /props:Table.TableCell -->
+
+- `TableHead` 안의 `TableCell` 은 자동으로 `<th scope="col">` 로 렌더된다. 별도 prop 이 필요 없다.
+- `align` 기본값은 `center` 다. 왼쪽 정렬이 필요하면 칸마다 `align="start"` 를 준다.
+- `colSpan` 은 합계 행처럼 표 **안**에서 칸을 합칠 때 쓴다. "데이터 없음" 같은 빈 상태는
+  표를 비우고 바깥에 `EmptyState` 를 두는 쪽이 낫다.
+
+```tsx
+// 합계 행 — 앞 2칸을 합쳐 라벨, 마지막 칸에 값
+<TableRow type="secondary">
+  <TableCell colSpan={2} align="start">합계</TableCell>
+  <TableCell align="end">1,240,000</TableCell>
+</TableRow>
+```
+
 ---
 
 ## 올바른 예시

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",