@nexus-cross/design-system 1.0.0

package/cursor-rules/nexus-ui-api.mdc

@@ -0,0 +1,698 @@
+---
+description: "@nexus-cross/design-system 컴포넌트 API 레퍼런스 — 모든 공용 컴포넌트의 props와 사용 예시"
+globs: "**/*.tsx,**/*.jsx,**/*.ts"
+alwaysApply: false
+---
+
+# @nexus-cross/design-system — Component API Reference
+
+모든 컴포넌트는 `@nexus-cross/design-system`에서 import.
+
+---
+
+## Button
+
+인터랙티브 버튼. `asChild`로 렌더링 요소 변경 가능.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | 시각 스타일 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 크기 |
+| `asChild` | `boolean` | `false` | 자식 요소로 렌더링 |
+| `detectDoubleClick` | `boolean` | `false` | 500ms 더블 클릭 방지 |
+| `disabled` | `boolean` | - | 비활성 (`aria-disabled` 자동) |
+| `className` | `string` | - | 스타일 오버라이드 |
+
+```tsx
+<Button variant="primary" size="lg">확인</Button>
+
+<Button variant="outline" disabled>비활성</Button>
+
+// 로딩 상태 (Spinner를 children에 직접 배치)
+<Button disabled>
+  <Spinner size={16} /> 처리 중...
+</Button>
+
+// <a> 태그로 렌더링
+<Button asChild variant="ghost">
+  <a href="/settings">설정</a>
+</Button>
+```
+
+---
+
+## TextInput
+
+텍스트 입력 필드. prefix/suffix 아이콘 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 크기 |
+| `error` | `boolean` | `false` | 에러 상태 (`aria-invalid` 자동) |
+| `prefixIcon` | `ReactNode` | - | 앞쪽 아이콘 |
+| `suffixIcon` | `ReactNode` | - | 뒤쪽 아이콘 |
+| `onValueChange` | `(value: string) => void` | - | 값 변경 콜백 |
+
+```tsx
+<TextInput placeholder="이메일" size="md" />
+
+<TextInput
+  error
+  prefixIcon={<SearchIcon />}
+  onValueChange={(v) => setQuery(v)}
+/>
+```
+
+---
+
+## TextArea
+
+여러 줄 텍스트 입력. 글자 수 카운터 내장.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `error` | `boolean` | `false` | 에러 상태 (`aria-invalid` 자동) |
+| `showCount` | `boolean` | `false` | 글자 수 표시 (`maxLength` 필요) |
+| `maxLength` | `number` | - | 최대 글자 수 |
+| `onValueChange` | `(value: string) => void` | - | 값 변경 콜백 |
+
+```tsx
+<TextArea
+  placeholder="내용을 입력하세요"
+  maxLength={500}
+  showCount
+  rows={4}
+/>
+```
+
+---
+
+## Select
+
+드롭다운 선택. Radix Select 기반.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | - | 선택된 값 |
+| `onValueChange` | `(value: string) => void` | - | 값 변경 콜백 |
+| `placeholder` | `string` | - | 플레이스홀더 |
+| `variant` | `'default' \| 'outline'` | `'default'` | 트리거 스타일 |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'full'` | 너비 |
+| `disabled` | `boolean` | - | 비활성 |
+| `displayComponent` | `ReactNode` | - | 트리거에 커스텀 표시 |
+
+```tsx
+<Select value={lang} onValueChange={setLang} placeholder="언어 선택">
+  <SelectItem value="ko">한국어</SelectItem>
+  <SelectItem value="en">English</SelectItem>
+  <SelectItem value="ja">日本語</SelectItem>
+</Select>
+```
+
+---
+
+## CheckBox
+
+체크박스. 네이티브 `<input>` 기반, square/round 형태 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md'` | `'md'` | 크기 |
+| `shape` | `'square' \| 'round'` | `'square'` | 형태 |
+| `checked` | `boolean` | - | 체크 상태 |
+| `indeterminate` | `boolean` | `false` | 불확정 상태 (`aria-checked="mixed"`) |
+| `onCheckedChange` | `(checked: boolean) => void` | - | 체크 변경 콜백 |
+| `label` | `ReactNode` | - | 라벨 텍스트 |
+
+```tsx
+<CheckBox
+  checked={agreed}
+  onCheckedChange={setAgreed}
+  label="이용약관에 동의합니다"
+/>
+
+<CheckBox shape="round" size="sm" checked indeterminate />
+```
+
+---
+
+## RadioGroup / RadioItem
+
+라디오 그룹. 네이티브 `<input type="radio">` 기반.
+
+| RadioGroup Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` | `string` (필수) | - | form name |
+| `value` | `string` | - | 선택된 값 |
+| `onValueChange` | `(value: string) => void` | - | 변경 콜백 |
+| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | 배치 방향 |
+| `size` | `'sm' \| 'md'` | `'md'` | 크기 |
+| `aria-label` | `string` | - | 접근성 라벨 |
+
+| RadioItem Prop | Type | Description |
+|---|---|---|
+| `value` | `string` (필수) | 항목 값 |
+| `label` | `ReactNode` | 라벨 텍스트 |
+
+```tsx
+<RadioGroup
+  name="plan"
+  value={plan}
+  onValueChange={setPlan}
+  orientation="horizontal"
+  aria-label="요금제 선택"
+>
+  <RadioItem value="free" label="무료" />
+  <RadioItem value="pro" label="프로" />
+  <RadioItem value="enterprise" label="엔터프라이즈" />
+</RadioGroup>
+```
+
+---
+
+## Switch
+
+토글 스위치. 네이티브 checkbox 기반, `role="switch"`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `'sm' \| 'md'` | `'md'` | 크기 |
+| `checked` | `boolean` | - | on/off 상태 |
+| `onCheckedChange` | `(checked: boolean) => void` | - | 변경 콜백 |
+| `disabled` | `boolean` | - | 비활성 |
+
+```tsx
+<Switch checked={darkMode} onCheckedChange={setDarkMode} />
+```
+
+---
+
+## Chip
+
+칩/태그/뱃지. `asChild`로 렌더링 요소 변경 가능.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'filled' \| 'outline' \| 'accent'` | `'default'` | 스타일 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 크기 |
+| `asChild` | `boolean` | `false` | 자식 요소로 렌더링 |
+| `disabled` | `boolean` | - | 비활성 (`aria-disabled` 자동) |
+| `onClose` | `(e: MouseEvent) => void` | - | 닫기 버튼 표시 및 콜백 |
+
+```tsx
+<Chip variant="accent" size="sm">New</Chip>
+
+<Chip onClose={() => removeTag(id)}>React</Chip>
+
+// <li>로 렌더링
+<Chip asChild variant="filled">
+  <li>리스트 칩</li>
+</Chip>
+```
+
+---
+
+## Spinner
+
+로딩 인디케이터. SVG 기반. `role="status"` 내장.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `number` | `20` | px 크기 |
+| `className` | `string` | - | 색상 등 오버라이드 |
+| `aria-label` | `string` | `'Loading'` | 접근성 라벨 |
+
+```tsx
+<Spinner size={24} />
+
+<Spinner size={14} className="text-white" aria-label="로딩 중" />
+```
+
+---
+
+## Divider
+
+구분선. 수평/수직 방향, 실선/점선/파선 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | 방향 |
+| `variant` | `'solid' \| 'dashed' \| 'dotted'` | `'solid'` | 선 스타일 |
+| `color` | `string` | - | 커스텀 색상 (CSS 값) |
+
+```tsx
+<Divider />
+<Divider orientation="vertical" variant="dashed" />
+```
+
+---
+
+## Tooltip
+
+툴팁. Radix Tooltip 기반. 단독 사용 가능 (Provider 내장).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `ReactNode` | - | 툴팁 내용 |
+| `variant` | `'dark' \| 'light'` | `'dark'` | 스타일 |
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | 위치 |
+| `align` | `'start' \| 'center' \| 'end'` | `'center'` | 정렬 |
+| `delayDuration` | `number` | `200` | 표시 지연 (ms) |
+| `disabled` | `boolean` | `false` | 비활성 |
+
+```tsx
+<Tooltip content="복사됨!" side="bottom">
+  <button>📋</button>
+</Tooltip>
+```
+
+---
+
+## Popover
+
+팝오버. Radix Popover 기반. 컴포저블 패턴과 단일 패턴 모두 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `trigger` | `ReactNode` | - | 트리거 요소 |
+| `children` | `ReactNode` | - | 팝오버 내용 |
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | 위치 |
+| `align` | `'start' \| 'center' \| 'end'` | `'center'` | 정렬 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 너비 |
+| `open` | `boolean` | - | 제어 모드 |
+| `onOpenChange` | `(open: boolean) => void` | - | 열림/닫힘 콜백 |
+
+```tsx
+<Popover trigger={<Button variant="outline">메뉴</Button>}>
+  <div className="p-4">팝오버 내용</div>
+</Popover>
+```
+
+---
+
+## Accordion
+
+아코디언. 단순 `items` 배열 방식과 컴포저블 방식 모두 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `AccordionItemData[]` | - | 항목 배열 |
+| `type` | `'single' \| 'multiple'` | `'single'` | 단일/다중 열기 |
+| `collapsible` | `boolean` | `true` | 전부 접기 가능 |
+| `value` / `defaultValue` | `string \| string[]` | - | 제어/비제어 |
+| `onValueChange` | `(value) => void` | - | 변경 콜백 |
+
+```tsx
+<Accordion items={[
+  { id: '1', trigger: 'FAQ 1', content: '답변 1' },
+  { id: '2', trigger: 'FAQ 2', content: '답변 2' },
+]} />
+
+// 컴포저블 방식
+<AccordionRoot type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>제목</AccordionTrigger>
+    <AccordionContent>내용</AccordionContent>
+  </AccordionItem>
+</AccordionRoot>
+```
+
+---
+
+## Drawer
+
+드로어/바텀시트. Vaul 기반. 4방향 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `direction` | `'bottom' \| 'top' \| 'left' \| 'right'` | `'bottom'` | 방향 |
+| `showHandle` | `boolean` | `true` | 핸들 바 표시 (top/bottom만) |
+| `blur` | `'none' \| 'sm' \| 'md'` | `'none'` | 오버레이 블러 |
+
+```tsx
+<Drawer direction="bottom">
+  <Drawer.Trigger asChild>
+    <Button>열기</Button>
+  </Drawer.Trigger>
+  <Drawer.Content>
+    <Drawer.Title>제목</Drawer.Title>
+    <Drawer.Description>설명</Drawer.Description>
+    <Drawer.Close asChild>
+      <Button variant="ghost">닫기</Button>
+    </Drawer.Close>
+  </Drawer.Content>
+</Drawer>
+```
+
+---
+
+## Modal (함수형 API)
+
+명령형 모달. 함수 호출로 열고 닫는다.
+
+**중요: 모달 컴포넌트는 반드시 `ModalTemplate`으로 감싸야 한다.**
+
+### 모달 컴포넌트 작성법
+
+```tsx
+import { ModalTemplate } from '@nexus-cross/design-system/modal';
+
+// 모달 컴포넌트는 반드시 close와 resolve를 props로 받는다
+function MyModal({ close, resolve }: { close: () => void; resolve: (value: any) => void }) {
+  return (
+    <ModalTemplate
+      title="모달 제목"
+      desc="모달 설명 (선택)"
+      close={close}
+      layout="default"          // 'default' | 'bottom-sheet' | 'slide-left' | 'slide-right' | 'full-page' | 'draggable'
+      hideFooter                // footer 없으면 하단 패딩 자동
+    >
+      <div className="space-y-4">
+        <p className="text-text-secondary">모달 내용</p>
+        <Button onClick={() => resolve({ confirmed: true })}>확인</Button>
+      </div>
+    </ModalTemplate>
+  );
+}
+```
+
+### ModalTemplate Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `title` | `ReactNode` | - | 헤더 제목 |
+| `desc` | `ReactNode` | - | 헤더 설명 |
+| `close` | `() => void` (필수) | - | 닫기 함수 (props로 자동 주입됨) |
+| `layout` | `'default' \| 'bottom-sheet' \| 'slide-left' \| 'slide-right' \| 'full-page' \| 'full-page-reverse' \| 'draggable'` | `'default'` | 레이아웃 |
+| `showDim` | `boolean` | `true` | 딤 배경 표시 |
+| `dimClose` | `boolean` | `true` | 딤 클릭 시 닫기 |
+| `hideHeader` | `boolean` | `false` | 헤더 숨김 |
+| `hideFooter` | `boolean` | `true` | 푸터 숨김 |
+| `footer` | `ReactElement` | - | 커스텀 푸터 |
+| `enableDrag` | `boolean` | `false` | 드래그 활성화 (draggable 레이아웃) |
+| `dragPersistKey` | `string` | - | 드래그 위치 저장 키 |
+| `innerClassName` | `string` | - | 모달 본체 스타일 오버라이드 |
+| `bodyClassName` | `string` | - | 바디 영역 스타일 오버라이드 |
+
+### 모달 호출
+
+```tsx
+import { modal, useModal, ModalContainer } from '@nexus-cross/design-system/modal';
+
+// 앱 루트에 ModalContainer 배치 필수
+<ModalContainer />
+
+// 방법 1: modal() 함수
+const result = await modal({
+  component: MyModal,
+  props: { /* 추가 props */ },
+});
+
+// 방법 2: useModal() 훅
+const { modal: openModal } = useModal();
+openModal({
+  component: MyModal,
+  options: { isAlone: true },  // 단독 모달 (다른 모달 위에 안 쌓임)
+});
+```
+
+### 금지 사항
+
+- ModalTemplate 없이 `<div>`만으로 모달 컴포넌트를 만들지 않는다
+- `close` prop을 직접 정의하지 않는다 (시스템이 자동 주입)
+- 모달 내에서 별도 dim/overlay를 구현하지 않는다
+
+---
+
+## Toast (함수형 API)
+
+토스트 알림. Sonner 기반.
+
+```tsx
+import { toast, Toaster } from '@nexus-cross/design-system';
+
+// 앱 루트에 Toaster 배치
+<Toaster position="top-right" />
+
+// 사용
+toast('저장되었습니다');
+toast.success('성공!');
+toast.error('오류가 발생했습니다');
+toast.loading('처리 중...');
+```
+
+---
+
+## InfiniteScroll
+
+무한 스크롤. IntersectionObserver 기반.
+
+| Prop | Type | Description |
+|---|---|---|
+| `list` | `unknown[]` | 현재 데이터 배열 |
+| `totalCount` | `number` | 전체 개수 (또는 `hasMore` 사용) |
+| `hasMore` | `boolean` | 더 있는지 (또는 `totalCount` 사용) |
+| `handleLoadMore` | `() => void` | 추가 로드 콜백 |
+| `loading` | `boolean` | 로딩 상태 |
+
+```tsx
+<InfiniteScroll
+  list={items}
+  totalCount={100}
+  loading={isLoading}
+  handleLoadMore={fetchMore}
+>
+  {items.map(item => <Card key={item.id} {...item} />)}
+</InfiniteScroll>
+```
+
+---
+
+## Ellipsis
+
+텍스트 말줄임. 더보기/접기 토글 내장.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `ReactNode` | - | 내용 |
+| `lineClamp` | `number` | `2` | 줄 수 제한 |
+| `triggerMore` | `ReactNode` | `'more'` | 더보기 텍스트 |
+| `triggerLess` | `ReactNode` | `'less'` | 접기 텍스트 |
+
+```tsx
+<Ellipsis content={longText} lineClamp={3} triggerMore="더보기" triggerLess="접기" />
+```
+
+---
+
+## Hooks
+
+### useModal
+
+```tsx
+const { open, close } = useModal();
+open(MyComponent, { title: '제목' });
+```
+
+### useInView
+
+```tsx
+const { ref, inView } = useInView({ threshold: 0.5 });
+<div ref={ref}>{inView && <LazyContent />}</div>
+```
+
+### useCheckDevice
+
+```tsx
+const { isMobile, isTablet, isDesktop } = useCheckDevice();
+```
+
+### useClickOutside
+
+```tsx
+const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
+<div ref={ref}>드롭다운 내용</div>
+```
+
+---
+
+## Pagination
+
+페이지네이션. 이전/다음 + 번호 버튼.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `currentPage` | `number` | - | 현재 페이지 (1부터) |
+| `totalPages` | `number` | - | 전체 페이지 수 |
+| `siblingCount` | `number` | `1` | 현재 페이지 양옆 표시 개수 |
+| `onPageChange` | `(page: number) => void` | - | 페이지 변경 콜백 |
+| `size` | `'sm' \| 'md'` | `'md'` | 크기 |
+
+```tsx
+<Pagination currentPage={2} totalPages={10} onPageChange={setPage} />
+```
+
+---
+
+## Avatar
+
+아바타. 이미지, 폴백 텍스트, children 지원.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `src` | `string` | - | 이미지 URL |
+| `alt` | `string` | - | 대체 텍스트 |
+| `fallback` | `ReactNode` | - | 이미지 로드 실패 시 표시 |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | 크기 |
+| `shape` | `'circle' \| 'square'` | `'circle'` | 형태 |
+| `onImageError` | `() => void` | - | 이미지 에러 콜백 |
+
+```tsx
+<Avatar src="/user.png" alt="User" size="lg" />
+<Avatar fallback="JD" shape="square" size="sm" />
+```
+
+---
+
+## Counter
+
+숫자 카운트 애니메이션.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `endValue` | `number` (필수) | - | 목표 값 |
+| `startValue` | `number` | `0` | 시작 값 |
+| `duration` | `number` | `1500` | 애니메이션 시간 (ms) |
+| `delay` | `number` | `0` | 시작 지연 (ms) |
+| `separator` | `boolean` | `true` | 천 단위 구분 |
+| `digits` | `number` | `0` | 소수 자릿수 |
+| `triggerOnView` | `boolean` | `false` | 뷰포트 진입 시 시작 |
+| `onEnd` | `() => void` | - | 완료 콜백 |
+
+```tsx
+<Counter endValue={1234} duration={2000} separator />
+```
+
+---
+
+## Countdown
+
+카운트다운 타이머.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `endTimestamp` | `number` (필수) | - | 종료 시각 (Unix ms) |
+| `separator` | `ReactNode` | `':'` | 구분자 |
+| `showDays` | `boolean` | `true` | 일 단위 표시 |
+| `labels` | `{ days?, hours?, minutes?, seconds? }` | - | 단위 라벨 |
+| `onEnd` | `() => void` | - | 완료 콜백 |
+| `render` | `(timeLeft: TimeLeft) => ReactNode` | - | 커스텀 렌더링 |
+
+```tsx
+<Countdown endTimestamp={Date.now() + 60_000} showDays={false} onEnd={handleEnd} />
+```
+
+---
+
+## Marquee
+
+마퀴(흐르는 텍스트/요소).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `direction` | `'left' \| 'right' \| 'up' \| 'down'` | `'left'` | 방향 |
+| `speed` | `number` | `40` | 애니메이션 속도 (초) |
+| `pauseOnHover` | `boolean` | `false` | 호버 시 일시정지 |
+| `gap` | `number` | `16` | 아이템 간격 (px) |
+
+```tsx
+<Marquee direction="left" speed={30} pauseOnHover>
+  <span>흐르는 텍스트</span>
+</Marquee>
+```
+
+---
+
+## Tab
+
+탭 네비게이션. line/pill 변형.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `TabItem[]` (필수) | - | 탭 항목 배열 |
+| `activeKey` | `string` | - | 제어 모드 활성 키 |
+| `defaultActiveKey` | `string` | - | 비제어 모드 초기 키 |
+| `variant` | `'line' \| 'pill'` | `'line'` | 스타일 |
+| `size` | `'sm' \| 'md'` | `'md'` | 크기 |
+| `destroyInactive` | `boolean` | `false` | 비활성 패널 언마운트 |
+| `onTabChange` | `(key: string) => void` | - | 탭 변경 콜백 |
+
+```tsx
+<Tab
+  items={[
+    { key: 'a', label: 'Tab A', children: <p>A</p> },
+    { key: 'b', label: 'Tab B', children: <p>B</p> },
+  ]}
+  defaultActiveKey="a"
+  variant="pill"
+/>
+```
+
+---
+
+## Carousel
+
+캐러셀. Embla Carousel 기반. 컴포저블 패턴.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `opts` | `EmblaOptionsType` | `{ loop: false }` | Embla 옵션 |
+| `plugins` | `EmblaPluginType[]` | - | Embla 플러그인 |
+| `onApiChange` | `(api: CarouselApi) => void` | - | API 변경 콜백 |
+
+서브 컴포넌트: `CarouselSlide`, `CarouselPrev`, `CarouselNext`, `CarouselDots`
+
+```tsx
+<Carousel opts={{ loop: true }}>
+  <CarouselSlide>슬라이드 1</CarouselSlide>
+  <CarouselSlide>슬라이드 2</CarouselSlide>
+  <CarouselPrev />
+  <CarouselNext />
+  <CarouselDots />
+</Carousel>
+```
+
+---
+
+## VirtualList / VirtualGrid
+
+가상 스크롤 리스트/그리드. @tanstack/react-virtual 기반.
+
+### VirtualList
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `T[]` (필수) | - | 데이터 배열 |
+| `estimateSize` | `number \| (index: number) => number` (필수) | - | 예상 아이템 높이 |
+| `renderItem` | `(item: T, index: number) => ReactNode` (필수) | - | 렌더러 |
+| `overscan` | `number` | `5` | 오버스캔 |
+| `gap` | `number` | `0` | 아이템 간격 |
+| `onEndReached` | `() => void` | - | 끝 도달 콜백 |
+| `endReachedThreshold` | `number` | `200` | 끝 감지 임계값 (px) |
+
+```tsx
+<VirtualList
+  items={data}
+  estimateSize={48}
+  renderItem={(item) => <div>{item.name}</div>}
+  onEndReached={loadMore}
+/>
+```
+
+### VirtualGrid
+
+VirtualList와 동일 + `columns: number` (필수).
+
+```tsx
+<VirtualGrid items={data} estimateSize={120} columns={3} renderItem={(item) => <Card {...item} />} />
+```