---
title: {Component Name}
description: {한국어 설명}
---

## Example           # 컴포넌트 사용 예시
## Installation      # CLI 또는 수동 설치 방법 (Snippet 레이어가 있는 경우)
## Usage             # Import 및 기본 사용법
## Props             # Props API 문서 (선택)
## Examples          # 다양한 사용 사례
## Accessibility     # 접근성 가이드 (선택)
## API Reference     # 상세 API 레퍼런스 (선택)

# Snippet 레이어 확인
ls docs/registry/ui/{component-id}.tsx

## Example

<ComponentExample name="react/{component-id}/default">
  ```json doc-gen:file
  {
    "file": "examples/react/{component-id}/default.tsx",
    "codeblock": true
  }

## Installation

다음 명령어로 컴포넌트를 설치할 수 있습니다:

```package-install
npx @seed-design/cli@latest add ui:{component-id}

## Usage

Alert Dialog는 다음 sub-component들로 구성됩니다:

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"  // Snippet이 있는 경우
// 또는
// } from "@seed-design/react"  // Snippet이 없는 경우

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

### Simple 컴포넌트 예시 (Badge):

```markdown
## Usage

Badge 컴포넌트를 사용하려면 다음과 같이 import합니다:

```tsx
import { Badge } from "@seed-design/react";

<Badge>Badge</Badge>

**Usage 작성 가이드**:
1. **Import 경로 명확히**:
   - Snippet 있음: `@/components/ui/{component-id}`
   - Snippet 없음: `@seed-design/react`
2. **Sub-component 목록**: Composite인 경우 모든 sub-component 나열
3. **기본 구조**: 컴포넌트의 전형적인 계층 구조 예시 제공
4. **간결함**: Usage는 가장 기본적인 사용법만, 상세한 예시는 Examples 섹션에

## Examples Section

다양한 사용 사례와 패턴을 보여줍니다.

```markdown
## Examples

### {Use Case 1}

<ComponentExample name="react/{component-id}/{example-name}">
  ```json doc-gen:file
  {
    "file": "examples/react/{component-id}/{example-name}.tsx",
    "codeblock": true
  }

## Props

### {ComponentName}

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | `'default' \| 'primary' \| 'secondary'` | `'default'` | 컴포넌트의 시각적 스타일을 지정합니다. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 컴포넌트의 크기를 지정합니다. |
| disabled | `boolean` | `false` | 컴포넌트를 비활성화합니다. |
| children | `React.ReactNode` | - | 컴포넌트의 자식 요소입니다. |

docs/content/react/components/{component-id}.mdx

examples/react/{component-id}/default.tsx
examples/react/{component-id}/with-icon.tsx
examples/react/{component-id}/variants.tsx

docs/registry/ui/{component-id}.tsx

examples/react/{component-id}/manual-installation.tsx

<ComponentExample name="react/component-id/example-name">
  ```json doc-gen:file
  {
    "file": "examples/react/component-id/example-name.tsx",
    "codeblock": true
  }

<ManualInstallation name="component-id">
  ```json doc-gen:file
  {
    "file": "examples/react/component-id/manual-installation.tsx",
    "codeblock": true
  }

```package-install
npx @seed-design/cli@latest add ui:component-id

- Snippet 레이어 설치 명령어에 사용
- 자동으로 패키지 매니저별 명령어 변환 (npm, yarn, pnpm, bun)

## Checklist

문서 생성 후 다음 사항을 확인합니다:

- [ ] Frontmatter의 title과 description이 정확한가?
- [ ] Snippet 레이어 존재 여부에 따라 Installation/Usage 섹션이 올바른가?
- [ ] Import 경로가 정확한가? (`@/components/ui/*` vs `@seed-design/react`)
- [ ] ComponentExample의 name 속성이 `react/{component-id}/{example-name}` 패턴인가?
- [ ] 모든 예시 파일 경로가 실제 파일과 일치하는가?
- [ ] Composite 컴포넌트의 모든 sub-component가 문서화되었는가?
- [ ] Props 테이블의 타입이 정확하게 표기되었는가?
- [ ] 한국어 설명이 명확하고 일관된가?

## Reference Files

**참조할 기존 문서**:
- Composite 예시: `/docs/content/react/components/alert-dialog.mdx`
- Simple 예시: `/docs/content/react/components/badge.mdx`
- Snippet 레이어: `/docs/registry/ui/*.tsx`
- 예시 코드: `/examples/react/*/*.tsx`

## Tips

1. **Snippet vs Direct Import**:
   - Snippet이 있으면 사용자가 커스터마이징 가능
   - Snippet이 없으면 `@seed-design/react`에서 직접 사용
   - Installation 섹션은 Snippet이 있을 때만 작성

2. **Example 파일 작성**:
   - 예시 파일은 실제로 동작하는 코드여야 함
   - TypeScript로 작성하고 타입 안정성 확보
   - 필요한 import를 모두 포함

3. **MDX 컴포넌트 활용**:
   - `<ComponentExample>`, `<ManualInstallation>`은 자동 import됨
   - Import 문 불필요

4. **한국어 작성**:
   - Description, Props 설명은 한국어로
   - 코드 예시와 기술 용어는 영어 유지

5. **문서 업데이트**:
   - 기존 문서를 먼저 읽어서 내용 보존
   - 변경이 필요한 부분만 수정
   - 예시 추가 시 Examples 섹션만 업데이트