@iamfiro/design 0.0.0-stage → 0.1.0

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>
+  )
+}
+```

package/agents/tabs/AGENTS.md

@@ -0,0 +1,305 @@
+# Tabs
+
+> 내비게이션 · `@iamfiro/design` · 직접 만들지 말고 이 컴포넌트를 쓴다.
+
+같은 자리에서 여러 패널을 바꿔 보여줘요. Tabs 안에 TabList · Tab · TabPanel을 조합하고, 선택 표시는 탭 사이를 미끄러지듯 이동해요. ← → · Home / End로 탭을 옮기고, 무거운 패널은 manual 활성화로 Enter / Space를 누를 때만 바꿔요.
+
+```tsx
+import { Tab, TabList, TabPanel, Tabs } from '@iamfiro/design'
+```
+
+## 디자인 규칙
+
+- 탭은 `Tabs`(패널 연결). `SegmentedControl`은 같은 화면 안의 보기 전환에만.
+
+## API
+
+### Tabs
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `value` | `string` |  | 선택된 탭(제어). |
+| `defaultValue` | `string` | `''` | 처음 선택된 탭(비제어). |
+| `onValueChange` | `(value: string) => void` |  | 선택이 바뀔 때. |
+| `activation` | `'auto' \| 'manual'` | `'auto'` | auto: 화살표로 옮기면 바로 선택 · manual: 화살표는 포커스만, Enter / Space로 선택. |
+| `className` | `string` |  | 바깥 요소에 전달. |
+
+### TabList
+
+Tabs.List로도 쓸 수 있어요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `variant` | `'underline' \| 'pill'` | `'underline'` | underline: 선택 탭 아래 선 · pill: 회색 트랙 위 흰 칩. |
+| `size` | `'sm' \| 'md'` | `'md'` | 탭 크기. |
+| `fitted` | `boolean` |  | 탭이 줄 전체를 같은 폭으로 채워요. |
+| `aria-label` | `string` |  | 탭 목록의 접근성 이름. |
+| `className` | `string` |  | tablist 요소에 전달. |
+
+### Tab
+
+Tabs.Tab으로도 쓸 수 있어요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `value` (필수) | `string` |  | 이 탭의 값. 같은 value의 TabPanel과 연결돼요. |
+| `children` (필수) | `ReactNode` |  | 탭 이름. |
+| `icon` | `ReactNode` |  | 이름 앞 아이콘. |
+| `count` | `number` |  | 이름 뒤 작은 숫자. |
+| `disabled` | `boolean` |  | 비활성. 키보드 이동에서도 건너뛰어요. |
+
+### TabPanel
+
+Tabs.Panel로도 쓸 수 있어요.
+
+| prop | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `value` (필수) | `string` |  | 연결할 Tab의 value. |
+| `children` (필수) | `ReactNode` |  | 패널 내용. |
+| `keepMounted` | `boolean` |  | 숨겨져도 DOM에 남겨 폼 상태·스크롤을 유지해요. |
+| `className` | `string` |  | tabpanel 요소에 전달. |
+
+## 예제
+
+예제를 감싼 `style={{ ... }}` div는 미리보기 배치용이다. 실제 화면 배치는 `Stack` · `Inline` · `Grid`로 한다.
+
+### 기본 (underline)
+
+선택된 탭 아래 선이 움직여요. value를 생략하면 defaultValue로 비제어 사용.
+
+```tsx
+import { Box, Stack, Text, Tab, TabList, TabPanel, Tabs } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Tabs defaultValue="overview">
+      <Box style={{ width: 480 }}>
+        <TabList aria-label="프로젝트">
+          <Tab value="overview">개요</Tab>
+          <Tab value="activity">활동</Tab>
+          <Tab value="settings">설정</Tab>
+        </TabList>
+        <TabPanel value="overview">
+          <Stack gap={1}>
+            <Text variant="label-md">Lumen 리디자인</Text>
+            <Text variant="body-sm" tone="secondary">
+              10월 31일 출시를 목표로 디자인 시스템과 랜딩 페이지를 새로 만들고 있어요.
+            </Text>
+          </Stack>
+        </TabPanel>
+        <TabPanel value="activity">
+          <Text variant="body-sm" tone="secondary">
+            이도현님이 2분 전에 ‘버튼 상태 정리’ 작업을 완료했어요.
+          </Text>
+        </TabPanel>
+        <TabPanel value="settings">
+          <Text variant="body-sm" tone="secondary">
+            프로젝트 이름, 공개 범위, 보관 설정을 바꿀 수 있어요.
+          </Text>
+        </TabPanel>
+      </Box>
+    </Tabs>
+  )
+}
+```
+
+### pill
+
+회색 트랙 위 흰 칩. 화면 안의 작은 보기 전환에 어울려요. size="sm"으로 더 작게.
+
+```tsx
+import { Box, Stack, Text, Tab, TabList, TabPanel, Tabs } from '@iamfiro/design'
+
+const RANGES = [
+  { value: 'day', label: '오늘', visitors: '1,284' },
+  { value: 'week', label: '이번 주', visitors: '8,903' },
+  { value: 'month', label: '이번 달', visitors: '32,410' },
+]
+
+export default function Example() {
+  return (
+    <Stack gap={8} align="start">
+      <Tabs defaultValue="week">
+        <Box>
+          <TabList variant="pill" aria-label="기간">
+            {RANGES.map((r) => (
+              <Tab key={r.value} value={r.value}>
+                {r.label}
+              </Tab>
+            ))}
+          </TabList>
+          {RANGES.map((r) => (
+            <TabPanel key={r.value} value={r.value}>
+              <Stack gap={1}>
+                <Text variant="caption" tone="tertiary">
+                  {r.label} 방문자
+                </Text>
+                <Text variant="number-lg">{r.visitors}</Text>
+              </Stack>
+            </TabPanel>
+          ))}
+        </Box>
+      </Tabs>
+      <Tabs defaultValue="code">
+        <TabList variant="pill" size="sm" aria-label="보기">
+          <Tab value="preview">미리 보기</Tab>
+          <Tab value="code">코드</Tab>
+        </TabList>
+      </Tabs>
+    </Stack>
+  )
+}
+```
+
+### 아이콘과 개수
+
+icon과 count로 탭 옆에 아이콘·숫자를 붙여요. disabled 탭은 키보드 이동에서도 건너뛰어요.
+
+```tsx
+import { Archive, CircleDot, GitPullRequest, Inbox } from 'lucide-react'
+import { Box, Text, Tab, TabList, TabPanel, Tabs } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Tabs defaultValue="inbox">
+      <Box style={{ width: 520 }}>
+        <TabList aria-label="받은 항목">
+          <Tab value="inbox" icon={<Inbox />} count={12}>
+            받은 편지함
+          </Tab>
+          <Tab value="issues" icon={<CircleDot />} count={4}>
+            이슈
+          </Tab>
+          <Tab value="reviews" icon={<GitPullRequest />} count={2}>
+            리뷰 요청
+          </Tab>
+          <Tab value="archive" icon={<Archive />} disabled>
+            보관함
+          </Tab>
+        </TabList>
+        <TabPanel value="inbox">
+          <Text variant="body-sm" tone="secondary">
+            읽지 않은 알림 12개가 있어요.
+          </Text>
+        </TabPanel>
+        <TabPanel value="issues">
+          <Text variant="body-sm" tone="secondary">
+            나에게 배정된 열린 이슈 4개.
+          </Text>
+        </TabPanel>
+        <TabPanel value="reviews">
+          <Text variant="body-sm" tone="secondary">
+            김민지님과 박서연님이 리뷰를 요청했어요.
+          </Text>
+        </TabPanel>
+      </Box>
+    </Tabs>
+  )
+}
+```
+
+### 꽉 채우기
+
+fitted를 주면 탭이 줄 전체를 같은 폭으로 나눠 가져요.
+
+```tsx
+import { Stack, Tab, TabList, Tabs } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Stack gap={6} style={{ width: 400 }}>
+      <Tabs defaultValue="login">
+        <TabList fitted aria-label="계정">
+          <Tab value="login">로그인</Tab>
+          <Tab value="signup">회원가입</Tab>
+        </TabList>
+      </Tabs>
+      <Tabs defaultValue="monthly">
+        <TabList variant="pill" fitted aria-label="결제 주기">
+          <Tab value="monthly">월간</Tab>
+          <Tab value="yearly">연간</Tab>
+          <Tab value="custom">맞춤</Tab>
+        </TabList>
+      </Tabs>
+    </Stack>
+  )
+}
+```
+
+### 수동 활성화
+
+activation="manual"이면 화살표는 포커스만 옮기고 Enter / Space로 선택해요. 패널을 그리는 비용이 클 때. 제어(value / onValueChange) 예시이기도 해요.
+
+```tsx
+import { useState } from 'react'
+import { Box, Kbd, Stack, Text, Tab, TabList, TabPanel, Tabs } from '@iamfiro/design'
+
+const REPORTS = [
+  { value: 'sales', label: '매출', summary: '10월 매출은 지난달보다 12% 늘었어요.' },
+  { value: 'users', label: '사용자', summary: '주간 활성 사용자는 8,903명이에요.' },
+  { value: 'retention', label: '리텐션', summary: '4주 리텐션은 41%예요.' },
+]
+
+export default function Example() {
+  const [report, setReport] = useState('sales')
+  return (
+    <Tabs value={report} onValueChange={setReport} activation="manual">
+      <Stack gap={5} style={{ width: 460 }}>
+        <Box>
+          <TabList aria-label="리포트">
+            {REPORTS.map((r) => (
+              <Tab key={r.value} value={r.value}>
+                {r.label}
+              </Tab>
+            ))}
+          </TabList>
+          {REPORTS.map((r) => (
+            <TabPanel key={r.value} value={r.value}>
+              <Text variant="body-sm">{r.summary}</Text>
+            </TabPanel>
+          ))}
+        </Box>
+        <Text variant="caption" tone="tertiary">
+          <Kbd>←</Kbd> <Kbd>→</Kbd>로 포커스를 옮기고 <Kbd>Enter</Kbd>로 열어요.
+        </Text>
+      </Stack>
+    </Tabs>
+  )
+}
+```
+
+### 숨겨도 상태 유지
+
+keepMounted 패널은 숨겨져도 DOM에 남아서, 탭을 오가도 입력한 내용이 지워지지 않아요.
+
+```tsx
+import { Box, Field, Input, Stack, Textarea, Tab, TabList, TabPanel, Tabs } from '@iamfiro/design'
+
+export default function Example() {
+  return (
+    <Tabs defaultValue="basic">
+      <Box style={{ width: 440 }}>
+        <TabList aria-label="새 일정">
+          <Tab value="basic">기본 정보</Tab>
+          <Tab value="detail">상세 설명</Tab>
+        </TabList>
+        <TabPanel value="basic" keepMounted>
+          <Stack gap={4}>
+            <Field label="일정 이름" htmlFor="event-name">
+              <Input id="event-name" placeholder="예: 디자인 리뷰" />
+            </Field>
+            <Field label="날짜" htmlFor="event-date">
+              <Input id="event-date" placeholder="10월 25일" />
+            </Field>
+          </Stack>
+        </TabPanel>
+        <TabPanel value="detail" keepMounted>
+          <Field label="설명" htmlFor="event-desc">
+            <Textarea id="event-desc" rows={4} placeholder="탭을 바꿔도 입력한 내용이 남아 있어요." />
+          </Field>
+        </TabPanel>
+      </Box>
+    </Tabs>
+  )
+}
+```