프롬프트 인터페이스

# {ComponentName}

## Summary

{1-2문장 요약. AI가 컴포넌트 선택 시 참조}

## When to Use

- {유스케이스 1}
- {유스케이스 2}

## When NOT to Use

- {안티패턴 1} → Use {대안}
- {안티패턴 2} → Use {대안}

## Props

### Required

| Prop   | Type   | Description |
| ------ | ------ | ----------- |
| {prop} | {type} | {설명}      |

### Optional

| Prop   | Type   | Default   | Description |
| ------ | ------ | --------- | ----------- |
| {prop} | {type} | {default} | {설명}      |

## Variants

| Variant | When to Use | Visual |
| ------- | ----------- | ------ |
| {name}  | {용도}      | {설명} |

## Examples

### Minimal

\`\`\`tsx
<Component prop="value">Content</Component>
\`\`\`

### With Options

\`\`\`tsx
<Component variant="secondary" size="large" disabled={false}>
  Content
</Component>
\`\`\`

## Composition

{다른 컴포넌트와 조합 패턴}

## Accessibility

- {ARIA 요구사항}
- {키보드 패턴}

## Related

- `{AlternativeComponent}`: {언제 대신 사용}
- `{ComposedComponent}`: {함께 사용하는 패턴}

# Button

## Summary

사용자 액션을 트리거하는 클릭 가능한 요소.
폼 제출, 대화상자 확인, 액션 실행에 사용.

## When to Use

- 폼 제출 (`type="submit"`)
- 대화상자 내 확인/취소 액션
- 즉시 실행되는 액션 (삭제, 저장 등)

## When NOT to Use

- 다른 페이지로 이동 → Use `Link`
- 토글 상태 전환 → Use `Toggle` or `Switch`
- 드롭다운 메뉴 트리거 → Use `MenuButton`

## Props

### Required

| Prop     | Type      | Description             |
| -------- | --------- | ----------------------- |
| children | ReactNode | 버튼 레이블 또는 아이콘 |

### Optional

| Prop       | Type                                                         | Default   | Description                      |
| ---------- | ------------------------------------------------------------ | --------- | -------------------------------- |
| variant    | 'default' \| 'destructive' \| 'outline' \| 'ghost' \| 'link' | 'default' | 시각적 스타일                    |
| size       | 'default' \| 'sm' \| 'lg' \| 'icon'                          | 'default' | 버튼 크기                        |
| disabled   | boolean                                                      | false     | 비활성화 상태                    |
| loading    | boolean                                                      | false     | 로딩 상태 (스피너 표시)          |
| type       | 'button' \| 'submit' \| 'reset'                              | 'button'  | HTML button type                 |
| aria-label | string                                                       | -         | 접근성 레이블 (아이콘 버튼 필수) |

## Variants

| Variant     | When to Use               |
| ----------- | ------------------------- |
| default     | 주요 액션, CTA            |
| destructive | 삭제, 위험한 액션         |
| outline     | 보조 액션, 취소           |
| ghost       | 최소 강조, 툴바           |
| link        | 인라인 텍스트 링크 스타일 |

## Examples

### Minimal

\`\`\`tsx
<Button>저장</Button>
\`\`\`

### Form Submit

\`\`\`tsx
<Button type="submit" loading={isSubmitting}>
{isSubmitting ? '저장 중...' : '저장'}
</Button>
\`\`\`

### Destructive Action

\`\`\`tsx
<Button variant="destructive" onClick={handleDelete}>
삭제
</Button>
\`\`\`

### Icon Button

\`\`\`tsx
<Button size="icon" aria-label="설정 열기">
<SettingsIcon />
</Button>
\`\`\`

## Composition

### Button Group

\`\`\`tsx

<div className="flex gap-2">
  <Button variant="outline">취소</Button>
  <Button>확인</Button>
</div>
\`\`\`

### With Icon

\`\`\`tsx
<Button>
<PlusIcon className="mr-2 h-4 w-4" />
추가
</Button>
\`\`\`

## Accessibility

- Enter/Space로 활성화
- disabled 시 `aria-disabled="true"` 자동 적용
- 아이콘 전용 버튼은 `aria-label` 필수

## Related

- `Link`: 페이지 네비게이션
- `IconButton`: 아이콘 전용 버튼 (aria-label 강제)
- `MenuButton`: 드롭다운 메뉴 트리거
- `Toggle`: 켜짐/꺼짐 상태 토글

// 좋은 예시 구조

// 1. 최소 예시 (Minimal)
// - 필수 props만 사용
// - 가장 흔한 유스케이스
<Button>저장</Button>

// 2. 기본 변형 (Basic Variations)
// - 각 variant/size 조합
// - 하나씩 독립적으로
<Button variant="outline">취소</Button>
<Button size="lg">큰 버튼</Button>

// 3. 조합 예시 (Composition)
// - 실제 UI 패턴
// - 다른 컴포넌트와 함께
<Card>
  <Card.Content>내용</Card.Content>
  <Card.Footer>
    <Button variant="ghost">취소</Button>
    <Button>확인</Button>
  </Card.Footer>
</Card>

// 4. 엣지 케이스 (Edge Cases)
// - 로딩, 에러, 비활성화
// - 긴 텍스트, 아이콘
<Button loading disabled>
  매우 긴 버튼 텍스트가 들어갈 때
</Button>

## variant 선택 가이드

### default (기본)

주요 액션에 사용. 화면당 1-2개 권장.

```tsx
<Button>저장</Button>
```

### destructive (위험)

되돌릴 수 없는 액션에만 사용.
삭제, 계정 탈퇴 등.
⚠️ 일반 에러 표시에는 사용 금지.

```tsx
<Button variant="destructive">삭제</Button>
```

### outline (보조)

보조 액션, 취소 버튼에 사용.
primary 버튼과 함께 배치할 때 적합.

```tsx
<Button variant="outline">취소</Button>
```

# Design System Quick Reference

## 컴포넌트 선택 가이드

### 버튼 계열

| 목적        | 컴포넌트                         | 예시       |
| ----------- | -------------------------------- | ---------- |
| 폼 제출     | `<Button type="submit">`         | 저장, 전송 |
| 위험 액션   | `<Button variant="destructive">` | 삭제       |
| 보조 액션   | `<Button variant="outline">`     | 취소       |
| 페이지 이동 | `<Link>`                         | 더보기     |
| 상태 토글   | `<Toggle>`                       | 즐겨찾기   |

### 입력 계열

| 목적             | 컴포넌트           |
| ---------------- | ------------------ |
| 단일 행 텍스트   | `<Input>`          |
| 다중 행 텍스트   | `<Textarea>`       |
| 옵션 선택 (단일) | `<Select>`         |
| 옵션 선택 (다중) | `<Combobox multi>` |
| 예/아니오        | `<Switch>`         |
| 다중 선택        | `<Checkbox>` 그룹  |

### 피드백 계열

| 목적                | 컴포넌트        |
| ------------------- | --------------- |
| 성공/정보/경고/에러 | `<Alert>`       |
| 짧은 피드백         | `<Toast>`       |
| 확인 필요           | `<AlertDialog>` |
| 상세 정보           | `<Tooltip>`     |

{
  "components": {
    "Button": {
      "summary": "사용자 액션 트리거",
      "category": "interactive",
      "variants": ["default", "destructive", "outline", "ghost", "link"],
      "sizes": ["default", "sm", "lg", "icon"],
      "useCases": ["form-submit", "dialog-action", "inline-action"],
      "avoidFor": ["navigation", "toggle-state", "menu-trigger"],
      "alternatives": {
        "navigation": "Link",
        "toggle-state": "Toggle",
        "menu-trigger": "MenuButton"
      }
    }
  }
}

DESIGN.md
components/
  button.spec.md
  card.spec.md
tokens/
  colors.tokens.json
  spacing.tokens.json

# Design System

## Overview
조용하고 밀도 높은 B2B 운영 화면. 장식보다 정보 구조를 우선한다.

## Colors
- **Primary** (#2665fd): 주요 액션, 활성 상태
- **Surface** (#f7f8fa): 기본 표면
- **On-surface** (#111827): 본문 텍스트

## Typography
- **Headline Font**: Pretendard
- **Body Font**: Pretendard

## Components
- **Buttons**: 10px radius, primary는 채움, secondary는 outline
- **Cards**: 강한 shadow보다 border contrast 사용

## Do's and Don'ts
- Do: 한 화면의 핵심 CTA만 primary 사용
- Don't: glossy gradient나 heavy shadow 남용

// mcp/design-system-server.ts

const tools = [
  {
    name: 'get_component',
    description: '컴포넌트 문서와 예시 조회',
    inputSchema: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          description: '컴포넌트 이름 (예: Button, Card)',
        },
        section: {
          type: 'string',
          enum: ['props', 'examples', 'accessibility', 'all'],
          description: '조회할 섹션',
        },
      },
      required: ['name'],
    },
  },
  {
    name: 'find_component',
    description: '용도에 맞는 컴포넌트 검색',
    inputSchema: {
      type: 'object',
      properties: {
        purpose: {
          type: 'string',
          description: '사용 목적 (예: "form submit", "show error")',
        },
      },
      required: ['purpose'],
    },
  },
  {
    name: 'get_token',
    description: '디자인 토큰 값 조회',
    inputSchema: {
      type: 'object',
      properties: {
        path: {
          type: 'string',
          description: '토큰 경로 (예: colors.primary, spacing.4)',
        },
      },
      required: ['path'],
    },
  },
  {
    name: 'get_pattern',
    description: 'UI 패턴 예시 조회',
    inputSchema: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          description: '패턴 이름 (예: login-form, data-table)',
        },
      },
      required: ['name'],
    },
  },
]

// mcp/handlers.ts

async function handleGetComponent(name: string, section = 'all') {
  const component = await loadComponent(name)

  if (section === 'all') {
    return {
      name: component.name,
      summary: component.summary,
      props: component.props,
      examples: component.examples,
      accessibility: component.accessibility,
      related: component.related,
    }
  }

  return component[section]
}

async function handleFindComponent(purpose: string) {
  const index = await loadComponentIndex()
  const matches = index.filter((c) => c.useCases.some((uc) => matchPurpose(uc, purpose)))

  return matches.map((c) => ({
    name: c.name,
    summary: c.summary,
    confidence: calculateConfidence(c, purpose),
  }))
}