@iamfiro/design 0.0.0-stage → 0.3.0

package/agents/step-list/AGENTS.md

@@ -0,0 +1,313 @@
+# StepList
+
+> 진행 표시 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+단계를 세로로 이어 보여 주는 읽기 전용 타임라인. 단계마다 왼쪽에 상태 마커(StatusIcon 또는 번호 원)가 있고 가는 연결선으로 이어져요. 제목 오른쪽엔 걸린 시간 같은 meta, 아래엔 회색 설명과 접는 줄 · 경고 줄 같은 내용을 넣어요. 상태가 바뀌면 마커가 자연스럽게 넘어가고, connector="progress"면 끝난 구간의 선이 아래로 차올라요. 사용자가 직접 체크하는 목록은 ProgressTracker를 써요.
+
+```tsx
+import { StepList, StepListItem } from '@iamfiro/design'
+```
+
+## 디자인 규칙
+
+- 읽기 전용 단계 타임라인(계획 · 활동 기록 · 승인 흐름)은 `StepList`(`ol`, 마커 + 연결선, `meta` 시간, 아래 내용엔 Collapsible inline). 번호 원은 `StatusIcon number`(`persistNumber`면 모든 상태에서 번호). 사용자가 체크하는 목록은 `ProgressTracker`. 카드 아래 상태 띠는 `CardFooter band`.
+
+## API
+
+### StepList
+
+<ol>로 그려지고 진행 중(active) 단계엔 aria-current="step"이 붙어요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `steps` | `StepListStep[]` |  | 단계 데이터. 대신 StepListItem을 children으로 조립해도 돼요. |
+| `marker` | `'status' \| 'number' \| 'status-number'` | `'status'` | status: StatusIcon · number: 모든 단계에 번호(테두리가 상태 색) · status-number: StatusIcon인데 대기 단계만 번호. |
+| `connector` | `'default' \| 'progress' \| 'none'` | `'default'` | default: 회색 선 · progress: 끝난 단계 아래 구간이 파랗게 차올라요 · none: 선 없음. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 마커 16 · 18 · 22px와 제목 · 설명 글자 크기. |
+| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | 단계 사이 간격 12 · 20 · 32px. |
+| `start` | `number` | `1` | 번호 마커의 첫 번호. |
+| `aria-label` | `string` |  | 목록 이름. |
+| `className / style` | `string / CSSProperties` |  | <ol>에 전달. |
+
+### StepListStep / StepListItem
+
+steps 배열의 항목(id 필수)과 StepListItem의 props는 같아요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `id` (필수) | `string` |  | steps 배열에서만. key로 쓰여요. |
+| `status` (필수) | `'done' \| 'active' \| 'pending' \| 'error' \| 'warning'` |  | 단계 상태. |
+| `title` (필수) | `ReactNode` |  | 제목. |
+| `description` | `ReactNode` |  | 제목 아래 회색 글. Text variant="code" 칩을 함께 넣을 수 있어요. |
+| `meta` | `ReactNode` |  | 제목 줄 오른쪽 끝(걸린 시간 "1.9초", Elapsed). |
+| `children` | `ReactNode` |  | 설명 아래 내용(Collapsible inline, 경고 줄, FileChip). |
+| `marker` | `'status' \| 'number' \| 'status-number' \| ReactNode` |  | 이 단계만 다른 마커. 노드를 넘기면 그대로 그려요. |
+| `number` | `number \| string` |  | 번호 마커의 숫자. 기본은 순서(start부터). |
+| `progress` | `number` |  | active일 때 0–100. 링이 돌지 않고 그만큼 채워져요. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 계획 카드
+
+Card + CardHeader(eyebrow 오버라인) + StepList + CardFooter band. marker="status-number"라 대기 단계는 번호, 진행 중은 파란 링, 완료는 회색 체크예요. 진행 중 단계와 아래 띠의 경과 시간은 Elapsed로 계속 올라가요.
+
+```tsx
+import { ListChecks } from 'lucide-react'
+import { Elapsed, Inline, StatusIcon, Text, formatElapsed, Card, CardBody, CardFooter, CardHeader, StepList, type StepListStep } from '@iamfiro/design'
+
+const STEPS: StepListStep[] = [
+  {
+    id: 'collect',
+    status: 'done',
+    title: '분기 실적 자료 모으기',
+    description: (
+      <>
+        재무팀 공유 폴더에서 <Text variant="code">q3-actuals.xlsx</Text> 불러옴
+      </>
+    ),
+    meta: '1.9초',
+  },
+  {
+    id: 'compare',
+    status: 'done',
+    title: '계획 대비 실적 비교',
+    description: (
+      <>
+        부서별 차이를 <Text variant="code">variance</Text> 시트로 정리
+      </>
+    ),
+    meta: '42초',
+  },
+  {
+    id: 'charts',
+    status: 'done',
+    title: '핵심 지표 차트 만들기',
+    description: '매출 · 영업이익 · 현금흐름 차트 3개',
+    meta: '3분 12초',
+  },
+  {
+    id: 'draft',
+    status: 'active',
+    title: '보고서 초안 작성',
+    description: (
+      <>
+        <Text variant="code">board-update-q3.docx</Text>에 요약과 차트를 넣는 중
+      </>
+    ),
+    // The running step keeps its own timer.
+    meta: <Elapsed initial={1052} format={(s) => formatElapsed(s, 'text')} />,
+  },
+  { id: 'review', status: 'pending', title: '검토 요청 보내기', description: '김민지 팀장에게 검토 요청' },
+]
+
+export default function Example() {
+  const done = STEPS.filter((s) => s.status === 'done').length
+  return (
+    <Card style={{ width: '100%', maxWidth: 480 }}>
+      <CardHeader
+        eyebrow={
+          <Inline gap={1} wrap={false}>
+            <ListChecks size={14} aria-hidden />
+            계획 · {STEPS.length}단계
+          </Inline>
+        }
+        title="3분기 이사회 보고서 준비"
+      />
+      <CardBody>
+        <StepList steps={STEPS} marker="status-number" aria-label="보고서 준비 단계" />
+      </CardBody>
+      <CardFooter band align="between">
+        <Inline gap={2} wrap={false}>
+          <StatusIcon status="active" size="sm" decorative />
+          <Text variant="label-sm" tone="secondary" numeric>
+            실행 중 · {done + 1}/{STEPS.length}
+          </Text>
+        </Inline>
+        <Text variant="label-sm" tone="tertiary">
+          <Elapsed initial={1060} />
+        </Text>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+### 활동 기록
+
+StepListItem을 직접 조립해요. marker="number"는 모든 단계에 번호를 두고 테두리 색만 상태를 따라가요. 내용 자리엔 IconStack 타일을 단 Collapsible variant="inline"과 주황 경고 줄을 넣었어요. 마지막 단계처럼 marker에 노드를 넘기면 원하는 아이콘을 써요.
+
+```tsx
+import type { ReactNode } from 'react'
+import { FileSearch, ListChecks, Server, ShieldCheck, TestTube } from 'lucide-react'
+import { IconStack, IconTile, Inline, Stack, Text, Collapsible, StepList, StepListItem } from '@iamfiro/design'
+
+const tile = (key: string, icon: ReactNode) => (
+  <IconTile key={key} size={18}>
+    {icon}
+  </IconTile>
+)
+
+export default function Example() {
+  return (
+    <Stack gap={3} style={{ width: '100%', maxWidth: 480 }}>
+      <Text as="h3" variant="heading-xs">
+        활동
+      </Text>
+      <StepList marker="number" aria-label="배포 활동">
+        <StepListItem status="done" title="배포 설정 확인">
+          <Collapsible
+            variant="inline"
+            icon={
+              <IconStack
+                shape="square"
+                size={18}
+                overlap={4}
+                icons={[tile('config', <FileSearch size={11} />), tile('security', <ShieldCheck size={11} />)]}
+                label="설정 검사, 보안 검사"
+              />
+            }
+            label="검사 2개 · 1.2초"
+          >
+            <Text variant="body-sm" tone="secondary">
+              환경 변수 14개, 보안 정책 3개 모두 통과
+            </Text>
+          </Collapsible>
+        </StepListItem>
+        <StepListItem status="done" title="테스트 실행">
+          <Collapsible
+            variant="inline"
+            icon={<IconStack shape="square" size={18} icons={[tile('unit', <TestTube size={11} />)]} label="단위 테스트" />}
+            label="테스트 묶음 1개 · 2분 4초"
+          >
+            <Text variant="body-sm" tone="secondary">
+              812개 통과 · 건너뜀 3개
+            </Text>
+          </Collapsible>
+        </StepListItem>
+        <StepListItem status="done" title="스테이징 서버에 배포" description="v2.14.0 · 서버 4대" />
+        <StepListItem status="warning" title="운영 서버에 배포">
+          <Inline gap={1} wrap={false}>
+            <Text as="span" tone="warning" style={{ display: 'inline-flex' }}>
+              <ListChecks size={14} aria-hidden />
+            </Text>
+            <Text variant="label-sm" tone="warning">
+              승인을 기다리고 있어요
+            </Text>
+          </Inline>
+        </StepListItem>
+        <StepListItem
+          status="pending"
+          title="배포 후 모니터링"
+          description="마커는 직접 넣을 수도 있어요"
+          marker={
+            <IconTile size={18} round>
+              <Server size={11} />
+            </IconTile>
+          }
+        />
+      </StepList>
+    </Stack>
+  )
+}
+```
+
+### 상태 변화
+
+"다음 단계"를 누르면 마커가 링 → 체크로 넘어가고, connector="progress"의 파란 선이 다음 단계까지 위에서 아래로 차올라요.
+
+```tsx
+import { useState } from 'react'
+import { RotateCcw } from 'lucide-react'
+import { Button, Inline, Stack, StepList, type StepListStatus, type StepListStep } from '@iamfiro/design'
+
+const TITLES = ['코드 가져오기', '빌드', '테스트', '이미지 올리기', '배포']
+
+export default function Example() {
+  // How many steps are finished; the one after them is running.
+  const [done, setDone] = useState(1)
+  const steps: StepListStep[] = TITLES.map((title, i) => {
+    const status: StepListStatus = i < done ? 'done' : i === done ? 'active' : 'pending'
+    return { id: title, status, title, meta: i < done ? `${(i + 1) * 7}초` : undefined }
+  })
+  return (
+    <Stack gap={4} style={{ width: '100%', maxWidth: 360 }}>
+      <StepList steps={steps} connector="progress" marker="status-number" density="compact" aria-label="배포 파이프라인" />
+      <Inline gap={2}>
+        <Button size="sm" variant="primary" disabled={done >= TITLES.length} onClick={() => setDone((d) => d + 1)}>
+          다음 단계
+        </Button>
+        <Button size="sm" variant="ghost" icon={<RotateCcw />} onClick={() => setDone(0)}>
+          처음부터
+        </Button>
+      </Inline>
+    </Stack>
+  )
+}
+```
+
+### 상태
+
+done · active · pending · error · warning. 기본 marker="status"는 대기를 회색 점선 원으로 그려요.
+
+```tsx
+import { Text, StepList, type StepListStep } from '@iamfiro/design'
+
+const STEPS: StepListStep[] = [
+  { id: 'submit', status: 'done', title: '휴가 신청서 제출', description: '이도현 · 10월 25일 오전 9:30' },
+  { id: 'lead', status: 'done', title: '팀장 승인', description: '김민지', meta: '12분' },
+  {
+    id: 'hr',
+    status: 'error',
+    title: '인사팀 확인',
+    description: (
+      <>
+        남은 연차가 부족해요 · <Text variant="code">잔여 1.5일</Text>
+      </>
+    ),
+    meta: '3분',
+  },
+  { id: 'fix', status: 'warning', title: '신청 기간 수정', description: '3일 → 1.5일로 바꿔 주세요' },
+  { id: 'final', status: 'pending', title: '최종 승인' },
+]
+
+export default function Example() {
+  return <StepList steps={STEPS} aria-label="휴가 승인 단계" style={{ width: '100%', maxWidth: 400 }} />
+}
+```
+
+### 크기 · 밀도
+
+size는 마커와 글자 크기(sm 16 · md 18 · lg 22px), density는 단계 사이 간격(compact 12 · default 20 · comfortable 32px)이에요.
+
+```tsx
+import { Grid, Stack, Text, StepList, type StepListDensity, type StepListSize, type StepListStep } from '@iamfiro/design'
+
+const STEPS: StepListStep[] = [
+  { id: 'quote', status: 'done', title: '견적 요청', meta: '2분' },
+  { id: 'review', status: 'active', title: '견적서 검토' },
+  { id: 'sign', status: 'pending', title: '계약서 서명' },
+]
+
+const VARIANTS: Array<{ size: StepListSize; density: StepListDensity }> = [
+  { size: 'sm', density: 'compact' },
+  { size: 'md', density: 'default' },
+  { size: 'lg', density: 'comfortable' },
+]
+
+export default function Example() {
+  return (
+    <Grid minItemWidth={160} gap={6} style={{ width: '100%' }}>
+      {VARIANTS.map(({ size, density }) => (
+        <Stack key={size} gap={3}>
+          <Text variant="overline">
+            {size} · {density}
+          </Text>
+          <StepList steps={STEPS} size={size} density={density} marker="number" aria-label={`${size} 크기`} />
+        </Stack>
+      ))}
+    </Grid>
+  )
+}
+```

package/agents/table/AGENTS.md

@@ -0,0 +1,286 @@
+# Table
+
+> 데이터 표시 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+격자선 없는 데이터 표. 머리글은 작은 회색 글씨로, 행은 선 대신 옅은 채움으로 구분해요. 열마다 render로 셀을 직접 그리고, 숫자 열은 자릿수가 맞게 정렬해요. 가로로 넘치면 표만 스크롤돼요.
+
+```tsx
+import { Table, type TableColumn } from '@iamfiro/design'
+```
+
+## 디자인 규칙
+
+- 차트에서 한 칸을 고르는 화면(피벗)은 `BarChart selected` + `Table selectedKey`를 같은 상태로 묶는다. 고르지 않은 칸은 옅은 색, 고른 칸의 x축 아이콘(`xIcon`)은 흰 칩으로 펼친다. 임계치·이상 구간은 `LineChart referenceLines` · `bands`, 실시간 데이터는 `streaming`(모양 변형 대신 한 칸 미끄러짐) + `endDot="pulse"`.
+- 표: 보여 주기만 하면 `Table`, 편집·정렬·필터·범위 선택이 필요하면 `DataGrid`. 셀 편집·키 입력·클립보드·한글 IME는 셀 위에 놓인 textarea 하나가 모두 받는다(조합 중에 포커스를 옮기면 한글이 깨진다).
+
+## API
+
+### Table
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `columns` (필수) | `TableColumn<Row>[]` |  | 열 정의. |
+| `rows` (필수) | `Row[]` |  | 데이터 행. |
+| `rowKey` | `(row, index) => string \| number` |  | 행마다 고유한 key. 생략하면 index. |
+| `density` | `'default' \| 'compact'` | `'default'` | 행 높이. |
+| `striped` | `boolean` | `true` | 행을 번갈아 채워 구분해요. |
+| `headerVariant` | `'label' \| 'overline'` | `'label'` | 머리글 모양. overline은 작은 대문자. |
+| `selectedKey` | `string \| number \| null` |  | rowKey가 같은 행을 옅은 회색으로 채워요. |
+| `onRowClick` | `(row, index) => void` |  | 행을 누를 때(클릭 · Enter/Space). 주면 hover 채움과 포커스가 생겨요. |
+| `empty` | `ReactNode` |  | 행이 없을 때 보여 줄 내용. |
+| `caption` | `ReactNode` |  | 표 위 작은 제목. |
+| `className / style` | `string / CSSProperties` |  | 스크롤 래퍼에 적용돼요. |
+
+### TableColumn
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `key` (필수) | `string` |  | 열 id. render가 없으면 row[key]를 보여 줘요. |
+| `header` (필수) | `ReactNode` |  | 머리글. |
+| `headerLeading` | `ReactNode` |  | 머리글 앞 요소(시리즈 열의 ColorDot). |
+| `render` | `(row, index) => ReactNode` |  | 셀 내용을 직접 그릴 때. |
+| `leading` | `(row, index) => ReactNode` |  | 셀 내용 앞 요소(첫 열 아이콘). |
+| `width` | `number \| string` |  | 열 너비. |
+| `align` | `'start' \| 'center' \| 'end'` | `numeric ? 'end' : 'start'` | 머리글과 셀 정렬. |
+| `numeric` | `boolean` |  | 숫자 열. 자릿수가 맞는 tabular 숫자에 기본 오른쪽 정렬. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본
+
+columns와 rows를 넘겨요. render가 없으면 row[key]를 그대로 보여 주고, numeric 열은 tabular 숫자로, align="end"면 오른쪽 정렬돼요.
+
+```tsx
+import { Avatar, Badge, Text, type Tone, Table, type TableColumn } from '@iamfiro/design'
+
+interface Member {
+  id: string
+  name: string
+  email: string
+  role: string
+  status: 'active' | 'invited' | 'suspended'
+  lastSeen: string
+  storage: number
+}
+
+const MEMBERS: Member[] = [
+  { id: 'u1', name: '김민지', email: 'minji@lumen.app', role: '관리자', status: 'active', lastSeen: '2분 전', storage: 12.4 },
+  { id: 'u2', name: '이도현', email: 'dohyun@lumen.app', role: '편집자', status: 'active', lastSeen: '1시간 전', storage: 8.15 },
+  { id: 'u3', name: '박서연', email: 'seoyeon@lumen.app', role: '편집자', status: 'invited', lastSeen: '—', storage: 0 },
+  { id: 'u4', name: '최준호', email: 'junho@lumen.app', role: '뷰어', status: 'suspended', lastSeen: '10월 3일', storage: 1.02 },
+]
+
+const STATUS: Record<Member['status'], { label: string; tone: Tone }> = {
+  active: { label: '활성', tone: 'success' },
+  invited: { label: '초대됨', tone: 'info' },
+  suspended: { label: '정지', tone: 'danger' },
+}
+
+const COLUMNS: TableColumn<Member>[] = [
+  {
+    key: 'name',
+    header: '멤버',
+    render: (m) => (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <Avatar name={m.name} />
+        <div>
+          <Text variant="label-md" as="div">
+            {m.name}
+          </Text>
+          <Text variant="caption" tone="tertiary" as="div">
+            {m.email}
+          </Text>
+        </div>
+      </div>
+    ),
+  },
+  { key: 'role', header: '역할' },
+  {
+    key: 'status',
+    header: '상태',
+    render: (m) => (
+      <Badge tone={STATUS[m.status].tone} dot>
+        {STATUS[m.status].label}
+      </Badge>
+    ),
+  },
+  { key: 'lastSeen', header: '최근 활동' },
+  { key: 'storage', header: '사용량', align: 'end', numeric: true, render: (m) => `${m.storage.toFixed(2)} GB` },
+]
+
+export default function Example() {
+  return <Table caption="멤버 4명" columns={COLUMNS} rows={MEMBERS} rowKey={(m) => m.id} style={{ width: 640 }} />
+}
+```
+
+### 간격 · 줄무늬
+
+density="compact"는 행 높이를 줄여요. striped를 끄면 행 구분 채움이 사라져요.
+
+```tsx
+import { useState } from 'react'
+import { SegmentedControl, Switch, Table, type TableColumn } from '@iamfiro/design'
+
+interface Invoice {
+  id: string
+  date: string
+  plan: string
+  seats: number
+  amount: number
+}
+
+const INVOICES: Invoice[] = [
+  { id: 'INV-2610', date: '10월 1일', plan: '팀', seats: 12, amount: 180000 },
+  { id: 'INV-2609', date: '9월 1일', plan: '팀', seats: 10, amount: 150000 },
+  { id: 'INV-2608', date: '8월 1일', plan: '팀', seats: 10, amount: 150000 },
+  { id: 'INV-2607', date: '7월 1일', plan: '스타터', seats: 4, amount: 36000 },
+  { id: 'INV-2606', date: '6월 1일', plan: '스타터', seats: 3, amount: 27000 },
+]
+
+const COLUMNS: TableColumn<Invoice>[] = [
+  { key: 'id', header: '청구서' },
+  { key: 'date', header: '발행일' },
+  { key: 'plan', header: '플랜' },
+  { key: 'seats', header: '좌석', align: 'end', numeric: true },
+  { key: 'amount', header: '금액', align: 'end', numeric: true, render: (r) => `${r.amount.toLocaleString('ko-KR')}원` },
+]
+
+export default function Example() {
+  const [density, setDensity] = useState<'default' | 'compact'>('default')
+  const [striped, setStriped] = useState(true)
+
+  return (
+    <div style={{ display: 'grid', gap: 16, width: 560 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <SegmentedControl
+          value={density}
+          onChange={setDensity}
+          ariaLabel="행 간격"
+          options={[
+            { value: 'default', label: '기본' },
+            { value: 'compact', label: '촘촘하게' },
+          ]}
+        />
+        <Switch label="줄무늬" checked={striped} onChange={(e) => setStriped(e.target.checked)} />
+      </div>
+      <Table columns={COLUMNS} rows={INVOICES} rowKey={(r) => r.id} density={density} striped={striped} />
+    </div>
+  )
+}
+```
+
+### 빈 상태
+
+행이 없으면 empty에 넣은 내용(보통 EmptyState)을 표 너비 전체에 보여 줘요.
+
+```tsx
+import { useState } from 'react'
+import { SearchX } from 'lucide-react'
+import { Button, SearchInput, EmptyState, Table, type TableColumn } from '@iamfiro/design'
+
+interface Project {
+  name: string
+  owner: string
+  updated: string
+}
+
+const PROJECTS: Project[] = [
+  { name: '웹사이트 리뉴얼', owner: '김민지', updated: '2분 전' },
+  { name: '모바일 앱 2.0', owner: '이도현', updated: '어제' },
+  { name: '디자인 시스템', owner: '박서연', updated: '10월 21일' },
+]
+
+const COLUMNS: TableColumn<Project>[] = [
+  { key: 'name', header: '프로젝트' },
+  { key: 'owner', header: '담당자' },
+  { key: 'updated', header: '수정', align: 'end' },
+]
+
+export default function Example() {
+  const [query, setQuery] = useState('결제')
+  const rows = PROJECTS.filter((p) => p.name.includes(query.trim()))
+
+  return (
+    <div style={{ display: 'grid', gap: 16, width: 520 }}>
+      <SearchInput size="sm" placeholder="프로젝트 검색" value={query} onChange={(e) => setQuery(e.target.value)} aria-label="프로젝트 검색" />
+      <Table
+        columns={COLUMNS}
+        rows={rows}
+        rowKey={(p) => p.name}
+        empty={
+          <EmptyState
+            size="sm"
+            icon={<SearchX />}
+            title="검색 결과가 없어요"
+            description={`‘${query}’와 일치하는 프로젝트가 없어요.`}
+            actions={
+              <Button size="sm" onClick={() => setQuery('')}>
+                검색어 지우기
+              </Button>
+            }
+          />
+        }
+      />
+    </div>
+  )
+}
+```
+
+### 행 선택 · 오버라인 머리글
+
+onRowClick을 주면 행에 hover 채움이 생기고 Tab · Enter/Space로도 눌러요. selectedKey와 같은 행은 옅은 회색으로 채워요. headerVariant="overline"은 작은 대문자 머리글, headerLeading은 머리글 앞 ColorDot, leading은 첫 열 아이콘이에요. numeric 열은 오른쪽 정렬 + tabular 숫자예요. 차트와 연동하는 예는 BarChart의 "표와 연동"을 보세요.
+
+```tsx
+import { useState, type ReactNode } from 'react'
+import { CreditCard, Globe, Search, Server, Smartphone } from 'lucide-react'
+import { Table, type TableColumn, ColorDot, Stack, Text } from '@iamfiro/design'
+
+interface Service {
+  id: string
+  name: string
+  icon: ReactNode
+  success: number
+  rollback: number
+  failed: number
+}
+
+const SERVICES: Service[] = [
+  { id: 'web', name: '웹', icon: <Globe size={16} color="var(--text-3)" />, success: 42, rollback: 3, failed: 2 },
+  { id: 'mobile', name: '모바일', icon: <Smartphone size={16} color="var(--text-3)" />, success: 18, rollback: 1, failed: 1 },
+  { id: 'api', name: 'API', icon: <Server size={16} color="var(--text-3)" />, success: 57, rollback: 5, failed: 4 },
+  { id: 'billing', name: '결제', icon: <CreditCard size={16} color="var(--text-3)" />, success: 12, rollback: 2, failed: 0 },
+  { id: 'search', name: '검색', icon: <Search size={16} color="var(--text-3)" />, success: 25, rollback: 0, failed: 1 },
+]
+
+const COLUMNS: TableColumn<Service>[] = [
+  { key: 'name', header: '서비스', leading: (s) => s.icon },
+  { key: 'total', header: '배포', numeric: true, render: (s) => s.success + s.rollback + s.failed },
+  { key: 'success', header: '성공', headerLeading: <ColorDot color="--chart-3" />, numeric: true },
+  { key: 'rollback', header: '롤백', headerLeading: <ColorDot color="--warning" />, numeric: true },
+  { key: 'failed', header: '실패', headerLeading: <ColorDot color="--danger" />, numeric: true },
+]
+
+export default function Example() {
+  const [selected, setSelected] = useState<string | null>('api')
+  const service = SERVICES.find((s) => s.id === selected)
+
+  return (
+    <Stack gap={3} style={{ width: 560 }}>
+      <Table
+        columns={COLUMNS}
+        rows={SERVICES}
+        rowKey={(s) => s.id}
+        headerVariant="overline"
+        striped={false}
+        selectedKey={selected}
+        onRowClick={(s) => setSelected((cur) => (cur === s.id ? null : s.id))}
+      />
+      <Text variant="body-sm" tone="secondary">
+        {service ? `${service.name} 서비스를 골랐어요. 다시 누르면 선택이 풀려요.` : '행을 누르거나 Tab으로 옮겨 Enter를 눌러 보세요.'}
+      </Text>
+    </Stack>
+  )
+}
+```