@iamfiro/design 0.0.0-stage → 0.3.0

package/agents/progress/AGENTS.md

@@ -0,0 +1,273 @@
+# Progress
+
+> 진행 표시 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+작업이 얼마나 진행됐는지 보여 주는 막대와 원형 표시. value가 바뀌면 부드럽게 채워지고, value를 생략하면 길이를 모르는 작업으로 계속 흘러가요. 접근성용 progressbar 역할이 함께 붙어요.
+
+```tsx
+import { Progress, ProgressCircle } from '@iamfiro/design'
+```
+
+## 디자인 규칙
+
+- 한 수량을 분류별로 나눈 조각(사용량 내역)은 범주색 대신 진한 파랑부터 옅어지는 `--chart-seq-1…5`. → `Progress segments`
+
+## API
+
+### Progress
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `value` | `number` |  | 0…max. 생략하면 길이를 모르는 진행(무한 반복) 표시. |
+| `max` | `number` | `100` | 최댓값. |
+| `tone` | `'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | `'default'` | 막대 색. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 막대 두께. |
+| `label` | `ReactNode` |  | 막대 위에 보이는 이름. |
+| `segments` | `{ value, label?, color? }[]` |  | 채움을 여러 조각으로 나눠요. value 대신 값의 합으로 채워요. color 기본은 --chart-seq-1부터. |
+| `unlimited` | `boolean` |  | 한도 없음. 빗금 트랙, 채움 없음. |
+| `showValue` | `boolean` |  | 값을 글자로 보여 줘요(기본은 퍼센트). |
+| `formatValue` | `(value, max) => ReactNode` |  | 값 표시 형식. 기본은 반올림한 퍼센트(예: 64%). |
+| `aria-label` | `string` |  | label이 없거나 글자가 아닐 때의 접근성 이름. |
+| `className / style` | `string / CSSProperties` |  | 루트에 적용돼요. |
+| `aria-valuetext` | `string` |  | 숫자만으로 부족할 때 읽어 줄 값(예: "10명 중 8명"). segments에 label이 있으면 자동으로 만들어요. |
+
+### ProgressCircle
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `value` | `number` |  | 0…max. 생략하면 길이를 모르는 진행(무한 반복) 표시. |
+| `max` | `number` | `100` | 최댓값. |
+| `tone` | `'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | `'default'` | 막대 색. |
+| `size` | `number` | `44` | 지름(px). |
+| `thickness` | `number` | `4` | 고리 두께(px). |
+| `label` | `ReactNode` |  | 원 아래에 보이는 이름. |
+| `children` | `ReactNode` |  | 가운데 내용. 생략하고 showValue면 값을 보여 줘요. |
+| `showValue` | `boolean` |  | 값을 글자로 보여 줘요(기본은 퍼센트). |
+| `formatValue` | `(value, max) => ReactNode` |  | 값 표시 형식. 기본은 반올림한 퍼센트(예: 64%). |
+| `aria-label` | `string` |  | label이 없거나 글자가 아닐 때의 접근성 이름. |
+| `className / style` | `string / CSSProperties` |  | 루트에 적용돼요. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본
+
+label은 막대 위 왼쪽, showValue는 오른쪽에 보여요. formatValue로 표시 형식을 바꿀 수 있어요.
+
+```tsx
+import { Progress } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <div style={{ display: 'grid', gap: 24, width: 360 }}>
+      <Progress value={64} label="프로필 완성도" showValue />
+      <Progress value={9.2} max={10} label="저장 공간" showValue formatValue={(value, max) => `${value}GB / ${max}GB`} tone="warning" />
+      <Progress value={40} aria-label="온보딩 진행률" />
+    </div>
+  )
+}
+```
+
+### 색 · 크기
+
+tone으로 상태를 나타내고, size로 막대 두께(sm / md / lg)를 골라요.
+
+```tsx
+import { Progress, type ProgressTone } from '@iamfiro/design'
+
+const TONES: Array<[ProgressTone, string, number]> = [
+  ['default', '기본', 72],
+  ['accent', '강조', 58],
+  ['success', '완료', 100],
+  ['warning', '주의', 88],
+  ['danger', '초과', 96],
+]
+
+export default function Example() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 32, width: '100%', maxWidth: 520 }}>
+      <div style={{ display: 'grid', gap: 18 }}>
+        {TONES.map(([tone, label, value]) => (
+          <Progress key={tone} tone={tone} value={value} label={label} showValue />
+        ))}
+      </div>
+      <div style={{ display: 'grid', gap: 18, alignContent: 'start' }}>
+        <Progress size="sm" value={45} label="작게 (sm)" />
+        <Progress size="md" value={45} label="기본 (md)" />
+        <Progress size="lg" value={45} label="크게 (lg)" />
+      </div>
+    </div>
+  )
+}
+```
+
+### 원형
+
+ProgressCircle은 카드·업로드·용량처럼 좁은 곳에 써요. size와 thickness는 px, 가운데 내용은 children으로 바꿀 수 있어요.
+
+```tsx
+import { Check } from 'lucide-react'
+import { ProgressCircle } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'center', gap: 32 }}>
+      <ProgressCircle value={30} size={32} thickness={3} aria-label="업로드" />
+      <ProgressCircle value={64} showValue label="오늘 목표" />
+      <ProgressCircle value={82} size={64} thickness={6} tone="warning" showValue label="저장 공간" />
+      <ProgressCircle value={100} size={64} thickness={6} tone="success" label="설정 완료">
+        <Check size={22} />
+      </ProgressCircle>
+      <ProgressCircle value={7} max={10} size={80} thickness={8} tone="accent" showValue formatValue={(value, max) => `${value}/${max}`} label="완료한 할 일" />
+    </div>
+  )
+}
+```
+
+### 진행률을 모를 때
+
+value를 넘기지 않으면 끝없이 흐르는 막대 · 도는 원으로 바뀌고 aria-busy가 붙어요.
+
+```tsx
+import { Progress, ProgressCircle } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
+      <Progress label="파일 목록 불러오는 중" style={{ width: 280 }} />
+      <ProgressCircle tone="accent" aria-label="처리 중" />
+    </div>
+  )
+}
+```
+
+### 업로드 흐름
+
+확인 중에는 진행률을 모르는 상태로, 업로드가 시작되면 실제 값으로, 끝나면 success 색으로 바꿔요.
+
+```tsx
+import { useEffect, useState } from 'react'
+import { FileText, Upload } from 'lucide-react'
+import { Button, Progress, Card, CardBody, CardFooter, CardHeader } from '@iamfiro/design'
+
+type Status = 'idle' | 'preparing' | 'uploading' | 'done'
+
+const LABEL: Record<Status, string> = {
+  idle: '업로드 대기',
+  preparing: '파일 확인 중…',
+  uploading: '업로드 중…',
+  done: '업로드 완료',
+}
+
+export default function Example() {
+  const [status, setStatus] = useState<Status>('idle')
+  const [percent, setPercent] = useState(0)
+
+  // 실제 앱에서는 업로드 요청의 progress 이벤트로 percent를 채워요.
+  useEffect(() => {
+    if (status === 'preparing') {
+      const timer = setTimeout(() => setStatus('uploading'), 900)
+      return () => clearTimeout(timer)
+    }
+    if (status !== 'uploading') return
+    const timer = setTimeout(() => {
+      const next = Math.min(100, Math.round(percent + 4 + Math.random() * 10))
+      setPercent(next)
+      if (next === 100) setStatus('done')
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [status, percent])
+
+  const start = () => {
+    setPercent(0)
+    setStatus('preparing')
+  }
+
+  return (
+    <Card style={{ width: 380 }}>
+      <CardHeader icon={<FileText />} title="3분기 이사회 보고서.pdf" description="4.2MB" />
+      <CardBody>
+        <Progress
+          value={status === 'preparing' ? undefined : percent}
+          tone={status === 'done' ? 'success' : 'accent'}
+          label={LABEL[status]}
+          showValue
+        />
+      </CardBody>
+      <CardFooter>
+        <Button variant="primary" icon={<Upload />} loading={status === 'preparing' || status === 'uploading'} onClick={start}>
+          {status === 'done' ? '다시 업로드' : '업로드'}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+### 나눠진 막대 (segments)
+
+한 수량을 분류별로 나눠 보여줘요. 채워진 길이는 값의 합이고, 조각 사이엔 작은 틈, 나머지는 회색 트랙이에요. 색을 생략하면 진한 파랑부터 옅어지는 --chart-seq-1…5. 값이 바뀌면 조각이 새 폭으로 미끄러지고, 조각 이름은 aria-valuetext로 읽어요.
+
+```tsx
+import { useState } from 'react'
+import { Button, Inline, Progress, Stack, type ProgressSegment } from '@iamfiro/design'
+
+const MONTHS: Record<string, ProgressSegment[]> = {
+  '9월': [
+    { label: '문서', value: 42 },
+    { label: '사진', value: 23 },
+    { label: '동영상', value: 16 },
+    { label: '기타', value: 9 },
+  ],
+  '10월': [
+    { label: '문서', value: 30 },
+    { label: '사진', value: 18 },
+    { label: '동영상', value: 12 },
+    { label: '기타', value: 6 },
+  ],
+}
+
+export default function Example() {
+  const [month, setMonth] = useState('10월')
+  return (
+    <Stack gap={6} style={{ width: '100%', maxWidth: 420 }}>
+      <Progress segments={MONTHS[month]} label="저장 공간" showValue aria-label="저장 공간" />
+      <Progress
+        size="lg"
+        label="분류 색 직접 지정"
+        segments={[
+          { label: '완료', value: 48, color: '--success' },
+          { label: '진행 중', value: 22, color: '--accent' },
+          { label: '막힘', value: 8, color: '--danger' },
+        ]}
+      />
+      <Inline gap={2}>
+        {Object.keys(MONTHS).map((m) => (
+          <Button key={m} size="sm" variant={m === month ? 'primary' : 'secondary'} onClick={() => setMonth(m)}>
+            {m}
+          </Button>
+        ))}
+      </Inline>
+    </Stack>
+  )
+}
+```
+
+### 무제한 (unlimited)
+
+한도가 없을 땐 채움 대신 빗금 트랙을 보여 주고 "무제한"으로 읽어요.
+
+```tsx
+import { Grid, Progress } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Grid columns={3} gap={5} style={{ width: '100%', maxWidth: 480 }}>
+      <Progress size="sm" tone="warning" value={8} max={10} label="좌석" />
+      <Progress size="sm" tone="accent" value={3.2} max={5} label="저장 공간" />
+      <Progress size="sm" unlimited value={12} label="프로젝트 (무제한)" />
+    </Grid>
+  )
+}
+```

package/agents/progress-tracker/AGENTS.md

@@ -0,0 +1,305 @@
+# ProgressTracker
+
+> 진행 표시 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+온보딩 체크리스트 카드. 전용 스타일 없이 기존 컴포넌트(Card · CardHeader · Progress · List · 원형 Checkbox)만 조립해 만들었어요. 단계를 누르면 동그라미가 파랗게 차오르고 글자에 취소선이 그어지며, 막대와 숫자도 함께 따라와요.
+
+```tsx
+import { ProgressTracker, type TrackerGroup, type TrackerStep } from '@iamfiro/design'
+```
+
+## 디자인 규칙
+
+- **조합 컴포넌트는 파운데이션 조립으로 먼저 만든다.** Card · Stack/Inline/Grid · Text · Progress · Checkbox 등 이미 있는 것만으로 짜고, 전용 CSS·음수 여백·내부 변수 참조(`--_pad` 등)를 쓰지 않는다. 그래야 정렬(왼쪽 끝)과 여백이 자동으로 맞는다. 정말 없는 표현만 기존 요소에 옵션으로 추가한다(예: Checkbox `shape="circle"`, Text `strike`). → `ProgressTracker`
+- 읽기 전용 단계 타임라인(계획 · 활동 기록 · 승인 흐름)은 `StepList`(`ol`, 마커 + 연결선, `meta` 시간, 아래 내용엔 Collapsible inline). 번호 원은 `StatusIcon number`(`persistNumber`면 모든 상태에서 번호). 사용자가 체크하는 목록은 `ProgressTracker`. 카드 아래 상태 띠는 `CardFooter band`.
+- 행 안의 진행률은 `ListItem progress`(행 뒤로 옅은 채움), 그룹으로 나눈 체크리스트는 `ProgressTracker groups`(Accordion `filled` + StatusIcon).
+
+## API
+
+### ProgressTracker
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `title` (필수) | `ReactNode` |  | 카드 제목. |
+| `steps` | `TrackerStep[]` |  | 단계 목록(한 줄로). groups를 쓰면 생략해요. |
+| `groups` | `TrackerGroup[]` |  | 단계를 접는 섹션으로 묶어요(시작 가이드). 열린 그룹은 회색 판, 행 앞은 StatusIcon, "n/전체"는 막대 옆으로 가요. |
+| `groupMode` | `'single' \| 'multiple'` | `'single'` | single: 그룹 하나만 열림(다 끝내면 다음 그룹이 열려요) · multiple: 여러 개. |
+| `openGroups / defaultOpenGroups` | `string[]` |  | 열린 그룹 id(제어 / 비제어). 기본은 아직 끝나지 않은 첫 그룹. |
+| `onOpenGroupsChange` | `(open: string[]) => void` |  | 그룹을 열거나 접을 때. |
+| `actions` | `ReactNode` |  | 제목 오른쪽 버튼(편집 · 작게 보기 · 닫기). 숫자나 chevron 앞에 놓여요. |
+| `completed` | `string[]` |  | 완료된 단계 id(제어). |
+| `defaultCompleted` | `string[]` |  | 처음 완료 상태(비제어). |
+| `onCompletedChange` | `(completed: string[]) => void` |  | 완료 목록이 바뀔 때. |
+| `readOnly` | `boolean` |  | 행을 눌러도 바뀌지 않음. 완료는 앱이 결정. |
+| `doneMessage` | `ReactNode` | `'모두 끝냈어요!'` | 모두 완료됐을 때 막대 아래 문구. |
+| `collapsible` | `boolean` |  | 단계를 chevron 뒤로 접어 제목 · 막대 · summary만 남겨요(사이드바 아래 작은 카드). 실제 높이만큼 펼쳐져요. |
+| `open / defaultOpen` | `boolean` | `false` | collapsible일 때 펼침 상태(제어 / 비제어). |
+| `onOpenChange` | `(open: boolean) => void` |  | 펼치거나 접을 때. |
+| `summary` | `ReactNode \| (done, total) => ReactNode` |  | 막대 아래 작은 글씨. collapsible이면 기본 "13% 완료". |
+
+### TrackerStep
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `id` (필수) | `string` |  | 고유 id. |
+| `label` (필수) | `ReactNode` |  | 단계 이름. |
+| `description` | `ReactNode` |  | 보조 설명. |
+| `action` | `ReactNode` |  | 오른쪽 버튼. 완료되면 사라져요. |
+| `disabled` | `boolean` |  | 아직 할 수 없는 단계. |
+
+### TrackerGroup
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `id` (필수) | `string` |  | 고유 id. |
+| `title` (필수) | `ReactNode` |  | 그룹 제목. 모든 단계를 끝내면 취소선이 그어져요. |
+| `steps` (필수) | `TrackerStep[]` |  | 이 그룹의 단계. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본
+
+눌러서 단계를 완료하거나 되돌려요. defaultCompleted로 시작 상태를 정해요.
+
+```tsx
+import { ProgressTracker, type TrackerStep } from '@iamfiro/design'
+
+const STEPS: TrackerStep[] = [
+  { id: 'tools', label: '쓰는 도구 연결하기' },
+  { id: 'notify', label: '알림 켜기' },
+  { id: 'blockers', label: '막힌 일 확인하기' },
+  { id: 'priorities', label: '우선순위 정리하기' },
+  { id: 'project', label: '첫 프로젝트 만들기' },
+]
+
+export default function Example() {
+  return <ProgressTracker title="시작하기" steps={STEPS} defaultCompleted={['notify', 'project']} style={{ width: 340 }} />
+}
+```
+
+### 설명과 액션
+
+단계마다 설명과 오른쪽 버튼을 둘 수 있어요. 완료되면 버튼이 사라져요.
+
+```tsx
+import { useState } from 'react'
+import { Button, ProgressTracker } from '@iamfiro/design'
+
+export default function Example() {
+  const [completed, setCompleted] = useState<string[]>(['profile'])
+  const finish = (id: string) => setCompleted((c) => (c.includes(id) ? c : [...c, id]))
+  return (
+    <ProgressTracker
+      title="워크스페이스 설정"
+      completed={completed}
+      onCompletedChange={setCompleted}
+      style={{ width: 380 }}
+      steps={[
+        { id: 'profile', label: '프로필 사진 올리기' },
+        {
+          id: 'slack',
+          label: 'Slack 연결',
+          description: '새 댓글과 멘션을 채널로 받아요.',
+          action: (
+            <Button size="sm" variant="secondary" onClick={() => finish('slack')}>
+              연결
+            </Button>
+          ),
+        },
+        {
+          id: 'invite',
+          label: '팀원 초대',
+          description: '이메일로 초대하면 바로 참여할 수 있어요.',
+          action: (
+            <Button size="sm" variant="secondary" onClick={() => finish('invite')}>
+              초대
+            </Button>
+          ),
+        },
+        { id: 'billing', label: '결제 수단 등록', description: '팀원을 초대한 뒤에 할 수 있어요.', disabled: !completed.includes('invite') },
+      ]}
+    />
+  )
+}
+```
+
+### 앱에서 완료 처리 (readOnly)
+
+실제 작업이 끝났을 때 앱이 completed를 바꾸는 방식. 모두 끝나면 막대가 초록이 되고 doneMessage가 나와요.
+
+```tsx
+import { useState } from 'react'
+import { Button, Inline, Stack, ProgressTracker, type TrackerStep } from '@iamfiro/design'
+
+const STEPS: TrackerStep[] = [
+  { id: 'upload', label: '파일 업로드' },
+  { id: 'scan', label: '보안 검사' },
+  { id: 'convert', label: '형식 변환' },
+  { id: 'publish', label: '게시' },
+]
+
+export default function Example() {
+  const [done, setDone] = useState(1)
+  return (
+    <Stack gap={4} style={{ width: 340 }}>
+      <ProgressTracker
+        title="배포 진행 상황"
+        steps={STEPS}
+        completed={STEPS.slice(0, done).map((s) => s.id)}
+        readOnly
+        doneMessage="배포가 끝났어요. 이제 팀원에게 공유할 수 있어요."
+      />
+      <Inline gap={2}>
+        <Button variant="primary" disabled={done >= STEPS.length} onClick={() => setDone((d) => d + 1)}>
+          다음 단계 완료
+        </Button>
+        <Button variant="ghost" onClick={() => setDone(0)}>
+          처음부터
+        </Button>
+      </Inline>
+    </Stack>
+  )
+}
+```
+
+### 접는 카드 (collapsible)
+
+사이드바 아래 같은 좁은 자리용. 평소엔 제목 · 얇은 막대 · summary("13% 완료 · 좋은 출발이에요!")만 보이고, chevron을 누르면 단계 목록이 펼쳐져요.
+
+```tsx
+import { ProgressTracker, type TrackerStep } from '@iamfiro/design'
+
+const STEPS: TrackerStep[] = [
+  { id: 'profile', label: '프로필 사진 올리기' },
+  { id: 'invite', label: '팀원 초대하기' },
+  { id: 'doc', label: '첫 문서 만들기' },
+  { id: 'folder', label: '폴더 정리하기' },
+  { id: 'share', label: '문서 공유하기' },
+  { id: 'notify', label: '알림 켜기' },
+  { id: 'app', label: '모바일 앱 받기' },
+  { id: 'theme', label: '테마 고르기' },
+]
+
+const cheer = (done: number, total: number) => {
+  const pct = Math.round((done / total) * 100)
+  return `${pct}% 완료 · ${pct < 30 ? '좋은 출발이에요!' : pct < 80 ? '절반을 넘었어요' : '거의 다 왔어요'}`
+}
+
+export default function Example() {
+  return <ProgressTracker collapsible title="시작하기" steps={STEPS} defaultCompleted={['profile']} summary={cheer} style={{ width: 260 }} />
+}
+```
+
+### 그룹으로 나눈 시작 가이드 (groups)
+
+단계를 접는 섹션으로 묶어요(Accordion variant="filled"). 열린 그룹은 옅은 회색 판 위에 놓이고, 행 앞은 StatusIcon(지금 할 단계 = 파란 링, 대기 = 점선 원, 완료 = 체크)이에요. 그룹을 다 끝내면 제목에 취소선이 그어지고 다음 그룹이 열려요. actions에 편집 · 작게 보기 · 닫기를 두고, "1/6"은 막대 옆으로 와요.
+
+```tsx
+import { useState } from 'react'
+import { Minimize2, X } from 'lucide-react'
+import { Button, ProgressTracker, type TrackerGroup } from '@iamfiro/design'
+
+const GROUPS: TrackerGroup[] = [
+  {
+    id: 'workspace',
+    title: '워크스페이스 준비',
+    steps: [
+      { id: 'name', label: '워크스페이스 이름 정하기' },
+      { id: 'invite', label: '팀원 초대하기' },
+      { id: 'calendar', label: '캘린더 연결하기' },
+    ],
+  },
+  {
+    id: 'billing',
+    title: '결제 설정',
+    steps: [
+      { id: 'card', label: '결제 수단 등록하기' },
+      { id: 'address', label: '청구서 받을 주소 입력하기' },
+    ],
+  },
+  { id: 'verify', title: '계정 인증', steps: [{ id: 'email', label: '이메일 인증하기' }] },
+]
+
+export default function Example() {
+  const [hidden, setHidden] = useState(false)
+  if (hidden) {
+    return (
+      <Button variant="secondary" onClick={() => setHidden(false)}>
+        시작 가이드 다시 보기
+      </Button>
+    )
+  }
+  return (
+    <ProgressTracker
+      title="시작 가이드"
+      groups={GROUPS}
+      defaultCompleted={['email']}
+      actions={
+        <>
+          <Button variant="ghost" size="sm">
+            편집
+          </Button>
+          <Button variant="ghost" size="sm" iconOnly icon={<Minimize2 />} aria-label="작게 보기" />
+          <Button variant="ghost" size="sm" iconOnly icon={<X />} aria-label="닫기" onClick={() => setHidden(true)} />
+        </>
+      }
+      style={{ width: 340 }}
+    />
+  )
+}
+```
+
+### 여러 그룹 함께 열기
+
+groupMode="multiple"이면 여러 그룹을 함께 열어 둬요. openGroups / onOpenGroupsChange로 제어해 모두 펼치기 · 접기를 만들었어요.
+
+```tsx
+import { useState } from 'react'
+import { Button, Inline, Stack, ProgressTracker, type TrackerGroup } from '@iamfiro/design'
+
+const GROUPS: TrackerGroup[] = [
+  {
+    id: 'account',
+    title: '계정',
+    steps: [
+      { id: 'photo', label: '프로필 사진 올리기' },
+      { id: 'alarm', label: '알림 켜기' },
+    ],
+  },
+  {
+    id: 'team',
+    title: '팀',
+    steps: [
+      { id: 'invite', label: '이도현 님 초대하기' },
+      { id: 'role', label: '역할 정하기' },
+    ],
+  },
+  {
+    id: 'first',
+    title: '첫 작업',
+    steps: [
+      { id: 'doc', label: '첫 문서 만들기' },
+      { id: 'share', label: '문서 공유하기' },
+    ],
+  },
+]
+
+export default function Example() {
+  const [open, setOpen] = useState<string[]>(['account', 'team'])
+  return (
+    <Stack gap={3} style={{ width: 340 }}>
+      <Inline gap={2}>
+        <Button size="sm" onClick={() => setOpen(GROUPS.map((g) => g.id))}>
+          모두 펼치기
+        </Button>
+        <Button size="sm" variant="ghost" onClick={() => setOpen([])}>
+          모두 접기
+        </Button>
+      </Inline>
+      <ProgressTracker title="김민지 님의 할 일" groups={GROUPS} groupMode="multiple" openGroups={open} onOpenGroupsChange={setOpen} defaultCompleted={['photo']} />
+    </Stack>
+  )
+}
+```