@x-plat/design-system 0.6.1 → 0.7.1

package/dist/layout/index.css

@@ -266,6 +266,7 @@
   --semantic-interaction-overlay-25: var(--brand-base-overlay-25);
   --semantic-interaction-overlay-50: var(--brand-base-overlay-50);
   --semantic-interaction-overlay-75: var(--brand-base-overlay-75);
+  --semantic-interaction-overlay-85: var(--brand-base-overlay-85);
   --semantic-interaction-focus-ring: var(--brand-primary-700);
 }
 :root {
@@ -511,11 +512,26 @@
   --semantic-typo-caption-1-sb-lh: var(--typo-lh-caption-1);
   --semantic-typo-caption-1-sb-weight: var(--typo-weight-semibold);
   --semantic-typo-caption-1-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-caption-1-m-size: var(--typo-size-caption-1);
+  --semantic-typo-caption-1-m-lh: var(--typo-lh-caption-1);
+  --semantic-typo-caption-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-caption-1-m-ls: var(--typo-ls-wide);
   --semantic-typo-caption-1-r-font: var(--typo-font-family-default);
   --semantic-typo-caption-1-r-size: var(--typo-size-caption-1);
   --semantic-typo-caption-1-r-lh: var(--typo-lh-caption-1);
   --semantic-typo-caption-1-r-weight: var(--typo-weight-regular);
   --semantic-typo-caption-1-r-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-2-sb-font: var(--typo-font-family-default);
+  --semantic-typo-caption-2-sb-size: var(--typo-size-caption-2);
+  --semantic-typo-caption-2-sb-lh: var(--typo-lh-caption-2);
+  --semantic-typo-caption-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-caption-2-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-caption-2-m-size: var(--typo-size-caption-2);
+  --semantic-typo-caption-2-m-lh: var(--typo-lh-caption-2);
+  --semantic-typo-caption-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-caption-2-m-ls: var(--typo-ls-wide);
   --semantic-typo-caption-2-r-font: var(--typo-font-family-default);
   --semantic-typo-caption-2-r-size: var(--typo-size-caption-2);
   --semantic-typo-caption-2-r-lh: var(--typo-lh-caption-2);
@@ -669,6 +685,13 @@
   font-weight: var(--semantic-typo-caption-1-sb-weight);
   letter-spacing: var(--semantic-typo-caption-1-sb-ls);
 }
+.typo-caption-1-m {
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
+}
 .typo-caption-1-r {
   font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
@@ -676,6 +699,20 @@
   font-weight: var(--semantic-typo-caption-1-r-weight);
   letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
+.typo-caption-2-sb {
+  font-family: var(--semantic-typo-caption-2-sb-font);
+  font-size: var(--semantic-typo-caption-2-sb-size);
+  line-height: var(--semantic-typo-caption-2-sb-lh);
+  font-weight: var(--semantic-typo-caption-2-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-2-sb-ls);
+}
+.typo-caption-2-m {
+  font-family: var(--semantic-typo-caption-2-m-font);
+  font-size: var(--semantic-typo-caption-2-m-size);
+  line-height: var(--semantic-typo-caption-2-m-lh);
+  font-weight: var(--semantic-typo-caption-2-m-weight);
+  letter-spacing: var(--semantic-typo-caption-2-m-ls);
+}
 .typo-caption-2-r {
   font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
@@ -869,6 +906,9 @@
 .semantic-interaction-overlay-75 {
   --ds-color: var(--semantic-interaction-overlay-75);
 }
+.semantic-interaction-overlay-85 {
+  --ds-color: var(--semantic-interaction-overlay-85);
+}
 .semantic-interaction-focus-ring {
   --ds-color: var(--semantic-interaction-focus-ring);
 }

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/accordion.md

@@ -3,7 +3,7 @@
 접이식 패널을 표시한다. 단일/다중 모드를 지원하며, controlled/uncontrolled 모두 가능하다.
 
 ```tsx
-import { Accordion } from "@xplat/design-system";
+import { Accordion } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/avatar.md

@@ -3,7 +3,7 @@
 프로필 이미지 또는 이니셜을 표시한다. `src`가 있으면 이미지를 렌더하고, 없으면 `name` 기반 이니셜을 표시한다. 둘 다 없으면 기본 사람 아이콘을 표시한다.
 
 ```tsx
-import { Avatar } from "@xplat/design-system";
+import { Avatar } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/card.md

@@ -3,7 +3,7 @@
 콘텐츠를 카드 형태로 감싸는 컨테이너이다.
 
 ```tsx
-import { Card } from "@xplat/design-system";
+import { Card } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/chart.md

@@ -3,7 +3,7 @@
 SVG 기반 차트를 렌더한다. line, bar, pie, doughnut 4가지 타입을 지원한다.
 
 ```tsx
-import { Chart } from "@xplat/design-system";
+import { Chart } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/data-display.md

@@ -5,7 +5,7 @@
 구분선을 표시한다.
 
 ```tsx
-import { Divider } from "@xplat/design-system";
+import { Divider } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -24,7 +24,7 @@ import { Divider } from "@xplat/design-system";
 빈 상태 안내를 표시한다.
 
 ```tsx
-import { EmptyState } from "@xplat/design-system";
+import { EmptyState } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -49,7 +49,7 @@ import { EmptyState } from "@xplat/design-system";
 로딩 플레이스홀더를 표시한다.
 
 ```tsx
-import { Skeleton } from "@xplat/design-system";
+import { Skeleton } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -71,7 +71,7 @@ import { Skeleton } from "@xplat/design-system";
 로딩 인디케이터를 표시한다.
 
 ```tsx
-import { Spinner } from "@xplat/design-system";
+import { Spinner } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |

package/guidelines/components/dropdown.md

@@ -3,7 +3,7 @@
 액션 메뉴를 표시한다. `children`이 트리거 역할을 하며, 클릭 시 메뉴가 열린다.
 
 ```tsx
-import { Dropdown } from "@xplat/design-system";
+import { Dropdown } from "@x-plat/design-system";
 ```
 
 ## Props

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/file-media.md

@@ -5,7 +5,7 @@
 파일 업로드 영역을 표시한다. 드래그 앤 드롭과 클릭 업로드를 모두 지원한다.
 
 ```tsx
-import { FileUpload } from "@xplat/design-system";
+import { FileUpload } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -34,7 +34,7 @@ import { FileUpload } from "@xplat/design-system";
 단일 이미지를 선택/미리보기하는 컨트롤이다. controlled 방식으로 동작한다.
 
 ```tsx
-import { ImageSelector } from "@xplat/design-system";
+import { ImageSelector } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -56,7 +56,7 @@ const [image, setImage] = useState<File | undefined>();
 비디오 플레이어를 표시한다. `controls={false}`이면 커스텀 재생/일시정지 오버레이를 표시한다. `ref`를 지원한다.
 
 ```tsx
-import { Video } from "@xplat/design-system";
+import { Video } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |

package/guidelines/components/html-typewriter.md

@@ -3,7 +3,7 @@
 HTML 문자열을 한 글자씩 타이핑하는 효과를 표시한다. HTML 태그 구조를 유지하면서 텍스트만 순차적으로 렌더한다.
 
 ```tsx
-import { HtmlTypeWriter } from "@xplat/design-system";
+import { HtmlTypeWriter } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/navigation.md

@@ -1,46 +1,120 @@
 # 내비게이션: Tab / CardTab / Breadcrumb / Pagination / Steps
 
+> 각 컴포넌트는 **배리언트가 여러 개다.** 첫 번째 예시만 보고 고르지 말고,
+> 아래 "배리언트" 표를 먼저 확인한 뒤 화면 맥락에 맞는 값을 고를 것.
+
+---
+
 ## Tab
 
-인덱스 기반 탭이다. 탭 영역만 제공한다.
+인덱스 기반 탭이다. 탭 영역만 렌더링하고 패널 콘텐츠는 직접 관리한다.
+
+**children 을 받지 않는다. `tabs` 배열로 전달한다.**
 
 ```tsx
-<Tab activeIndex={activeIndex} onChange={setActiveIndex} type="default">
-  <Tab.Item>탭1</Tab.Item>
-  <Tab.Item>탭2</Tab.Item>
-</Tab>
+const [activeIndex, setActiveIndex] = useState(0);
+
+<Tab
+  type="default"
+  activeIndex={activeIndex}
+  tabs={[
+    { value: "all", title: "전체" },
+    { value: "active", title: "진행중" },
+  ]}
+  onChange={(tab, idx) => setActiveIndex(idx)}
+/>
 ```
 
-| Prop | 설명 |
-|------|------|
-| activeIndex | 활성 탭 인덱스 (controlled) |
-| type | `"default" \| "toggle"` |
+<!-- props:Tab -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| activeIndex * | `number` | - |  |
+| tabs * | `{ value: string \| number; title: string }[]` | - |  |
+| onChange * | `(value: { value: string \| number; title: string }, index: number) => void` | - |  |
+| type * | `"default" \| "toggle"` | - |  |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+
+`*` = 필수
+<!-- /props:Tab -->
+
+### 배리언트 — type (필수, 기본값 없음)
+
+| 값 | 생김새 | 쓰는 곳 |
+|----|--------|---------|
+| `default` | 밑줄 없는 평면 탭 | 페이지 상단 주 내비게이션 |
+| `toggle` | 활성 탭 아래로 인디케이터가 슬라이드 | 콘텐츠 전환 토글, 세그먼트 컨트롤 |
+
+```tsx
+// toggle — 인디케이터가 따라 움직인다
+<Tab
+  type="toggle"
+  activeIndex={activeIndex}
+  tabs={[{ value: 1, title: "목록" }, { value: 2, title: "지도" }]}
+  onChange={(tab, idx) => setActiveIndex(idx)}
+/>
+```
+
+- `onChange` 에 `setActiveIndex` 를 **그대로 넘기면 안 된다.** 첫 인자가 탭 객체라 상태가 깨진다.
+  반드시 `(tab, idx) => setActiveIndex(idx)` 형태로 감쌀 것.
 
 ---
 
 ## CardTab
 
-값 기반 탭이다. **CardTab.Panel만 children으로 허용한다.**
+값 기반 탭이다. 탭 + 패널 콘텐츠를 함께 제공한다. **`CardTab.Panel` 만 children 으로 허용한다.**
 
 ```tsx
-<CardTab tabs={[{ value: "tab1", title: "탭1" }, { value: "tab2", title: "탭2" }]}>
+<CardTab
+  size="md"
+  tabs={[{ value: "tab1", title: "탭1" }, { value: "tab2", title: "탭2" }]}
+  onChange={(tab) => console.log(tab.value)}
+>
   <CardTab.Panel value="tab1">탭1 내용</CardTab.Panel>
   <CardTab.Panel value="tab2">탭2 내용</CardTab.Panel>
 </CardTab>
 ```
 
+<!-- props:CardTab -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| tabs * | `{ value: string \| number; title: string }[]` | - |  |
+| children * | `ReactElement< CardTabPanelProps, typeof CardTabPanel > \| ReactElement< CardTabPanelProps, typeof CardTabPanel >[]` | - | CardTab.Panel 만 허용 |
+| activeValue | `string \| number` | - | controlled: 외부에서 활성 탭 제어 |
+| onChange | `(tab: { value: string \| number; title: string }) => void` | - | 탭 변경 콜백 |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+
+`*` = 필수
+<!-- /props:CardTab -->
+
+- `activeValue` 를 **생략하면 컴포넌트가 스스로 상태를 관리한다.** 단순 탭 전환이면 생략하는 쪽이 낫다.
+
 ---
 
 ## Breadcrumb
 
-경로를 표시한다.
+경로를 표시한다. 마지막 항목은 자동으로 현재 위치로 렌더링된다 (`href` 를 줘도 링크가 아니다).
 
 ```tsx
-<Breadcrumb items={[
-  { label: "홈", href: "/" },
-  { label: "설정", href: "/settings" },
-  { label: "프로필" },
-]} />
+<Breadcrumb
+  items={[
+    { label: "홈", href: "/" },
+    { label: "설정", href: "/settings" },
+    { label: "프로필" },
+  ]}
+/>
+```
+
+<!-- props:Breadcrumb -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| items * | `{ label: string; href?: string; onClick?: () => void }[]` | - |  |
+| separator | `ReactNode` | `"/"` |  |
+
+`*` = 필수
+<!-- /props:Breadcrumb -->
+
+```tsx
+<Breadcrumb separator={<ChevronRightIcon />} items={...} />
 ```
 
 ---
@@ -53,6 +127,28 @@
 <Pagination current={page} total={100} onChange={setPage} />
 ```
 
+<!-- props:Pagination -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| current * | `number` | - |  |
+| total * | `number` | - |  |
+| pageSize | `number` | `10` |  |
+| siblingCount | `number` | `1` |  |
+| onChange | `(page: number) => void` | - |  |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+| type | `"brand" \| "success" \| "error" \| "warning" \| "info"` | `"brand"` |  |
+
+`*` = 필수
+<!-- /props:Pagination -->
+
+### 배리언트 — type (5종)
+
+`brand` 가 기본이다. 나머지는 페이지네이션이 상태를 가진 목록(오류 목록, 경고 목록 등)에 붙을 때 그 맥락 색을 따라간다.
+
+```tsx
+<Pagination current={page} total={240} pageSize={20} type="error" size="sm" onChange={setPage} />
+```
+
 ---
 
 ## Steps
@@ -62,7 +158,7 @@
 ```tsx
 <Steps
   items={[
-    { title: "정보 입력" },
+    { title: "정보 입력", description: "기본 정보를 입력한다" },
     { title: "확인" },
     { title: "완료" },
   ]}
@@ -70,11 +166,39 @@
 />
 ```
 
+<!-- props:Steps -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| items * | `{ title: string; description?: string }[]` | - |  |
+| current * | `number` | - |  |
+| type | `"brand" \| "success" \| "error" \| "warning" \| "info"` | `"brand"` |  |
+
+`*` = 필수
+<!-- /props:Steps -->
+
+### 배리언트 — type (5종)
+
+| 값 | 쓰는 곳 |
+|----|---------|
+| `brand` | 일반 진행 플로우 (기본) |
+| `success` | 완료된 프로세스 회고 표시 |
+| `error` | 실패 지점이 있는 플로우 |
+| `warning` | 주의가 필요한 단계가 포함된 플로우 |
+| `info` | 안내성 플로우 |
+
+- `current` 보다 앞 = 완료, 같으면 = 진행 중, 뒤 = 대기. 상태를 직접 넘기지 않는다.
+
 ---
 
 ## 의사결정
 
 | 상황 | 사용할 것 |
 |------|----------|
-| 탭 영역만 (콘텐츠는 직접 관리) | Tab |
-| 탭 + 패널 콘텐츠 | CardTab |
+| 탭 영역만 (콘텐츠는 직접 관리) | `Tab` |
+| 탭 + 패널 콘텐츠 | `CardTab` |
+| 탭 상태를 외부에서 제어해야 함 | `Tab` (controlled 전용) 또는 `CardTab` + `activeValue` |
+| 탭 상태를 신경쓰고 싶지 않음 | `CardTab` (`activeValue` 생략) |
+| 세그먼트 컨트롤 느낌 | `Tab` + `type="toggle"` |
+| 현재 위치 경로 | `Breadcrumb` |
+| 페이지 이동 | `Pagination` |
+| 순차 진행 단계 | `Steps` |

package/guidelines/components/swiper.md

@@ -3,8 +3,8 @@
 슬라이더/캐러셀을 표시한다. 드래그, 자동 재생, 루프를 지원하며 controlled/uncontrolled 모두 가능하다.
 
 ```tsx
-import { Swiper } from "@xplat/design-system";
-import type { SwiperHandle } from "@xplat/design-system";
+import { Swiper } from "@x-plat/design-system";
+import type { SwiperHandle } from "@x-plat/design-system";
 ```
 
 ## Props

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.6.1",
+  "version": "0.7.1",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",