MDX 문서화

{/* Button.stories.mdx */}
import { Canvas, Meta, Story, ArgsTable, Source } from '@storybook/blocks';
import { Button } from './Button';

{/* Meta 정보 */}
<Meta 
  title="Components/Button" 
  component={Button}
/>

# Button 컴포넌트

재사용 가능한 버튼 컴포넌트로 다양한 스타일과 크기를 지원합니다.

## 설치

```bash
npm install @mycompany/button
```

## 기본 사용법

<Canvas>
  <Story name="Default">
    <Button>Click me</Button>
  </Story>
</Canvas>

## Props

<ArgsTable of={Button} />

## 예제

### Primary Button
<Canvas>
  <Story name="Primary">
    <Button variant="primary">Primary</Button>
  </Story>
</Canvas>

### Secondary Button
<Canvas>
  <Story name="Secondary">
    <Button variant="secondary">Secondary</Button>
  </Story>
</Canvas>

## 디자인 가이드라인

버튼은 사용자 액션을 명확하게 전달해야 합니다:

- ✅ **Do**: 짧고 명확한 텍스트 사용
- ❌ **Don't**: 모호한 문구 사용

## 접근성

- 키보드 탐색 지원 (Tab, Enter)
- 스크린 리더 호환
- 충분한 색상 대비 (WCAG AA)

## 코드 예제

<Source
  language="tsx"
  code={`
<Button 
  variant="primary" 
  size="large"
  onClick={() => console.log('Clicked!')}
>
  Submit Form
</Button>
`}
/>

{/* Alert.stories.mdx */}
import { Canvas, Meta, Story, ArgsTable, ColorPalette, ColorItem } from '@storybook/blocks';
import { Alert } from './Alert';

<Meta title="Feedback/Alert" component={Alert} />

# Alert 알림 컴포넌트

사용자에게 중요한 정보를 전달하는 알림 컴포넌트입니다.

<Canvas>
  <Story name="Overview">
    <div className="space-y-4">
      <Alert variant="info">정보 메시지입니다.</Alert>
      <Alert variant="success">성공적으로 완료되었습니다.</Alert>
      <Alert variant="warning">주의가 필요합니다.</Alert>
      <Alert variant="error">오류가 발생했습니다.</Alert>
    </div>
  </Story>
</Canvas>

## 언제 사용하나요?

| 상황 | 사용 예시 |
|------|-----------|
| 📘 Info | 일반 정보, 도움말 |
| ✅ Success | 작업 완료, 저장 성공 |
| ⚠️ Warning | 주의사항, 경고 |
| ❌ Error | 오류, 실패 메시지 |

## Props

<ArgsTable of={Alert} />

## 변형 (Variants)

### Info
<Canvas>
  <Story name="Info">
    <Alert variant="info" title="알림">
      새로운 기능이 추가되었습니다. 설정에서 확인하세요.
    </Alert>
  </Story>
</Canvas>

### Success
<Canvas>
  <Story name="Success">
    <Alert variant="success" title="완료" closable>
      데이터가 성공적으로 저장되었습니다.
    </Alert>
  </Story>
</Canvas>

### Warning
<Canvas>
  <Story name="Warning">
    <Alert variant="warning" title="경고" icon="⚠️">
      이 작업은 되돌릴 수 없습니다.
    </Alert>
  </Story>
</Canvas>

### Error
<Canvas>
  <Story name="Error">
    <Alert variant="error" title="오류" closable>
      네트워크 연결을 확인해주세요.
    </Alert>
  </Story>
</Canvas>

## 색상 팔레트

<ColorPalette>
  <ColorItem
    title="Info"
    subtitle="정보 알림"
    colors={{ Background: '#EFF6FF', Border: '#3B82F6', Text: '#1E40AF' }}
  />
  <ColorItem
    title="Success"
    subtitle="성공 알림"
    colors={{ Background: '#F0FDF4', Border: '#22C55E', Text: '#15803D' }}
  />
  <ColorItem
    title="Warning"
    subtitle="경고 알림"
    colors={{ Background: '#FFFBEB', Border: '#F59E0B', Text: '#92400E' }}
  />
  <ColorItem
    title="Error"
    subtitle="오류 알림"
    colors={{ Background: '#FEF2F2', Border: '#EF4444', Text: '#991B1B' }}
  />
</ColorPalette>

## 사용 예제

### 기본 사용
<Source
  language="tsx"
  code={Alert `
<Alert variant="info">
  일반 정보 메시지
</Alert>
`}
/>

### 제목 포함
<Source
  language="tsx"
  code={`
<Alert variant="success" title="성공">
  작업이 완료되었습니다.
</Alert>
`}
/>

### 닫기 버튼
<Source
  language="tsx"
  code={`
<Alert 
  variant="warning" 
  closable 
  onClose={() => console.log('Closed')}
>
  이 알림을 닫을 수 있습니다.
</Alert>
`}
/>

## 접근성 (A11y)

- ✅ ARIA role="alert" 적용
- ✅ 스크린 리더 지원
- ✅ 키보드 네비게이션
- ✅ 색상 대비 WCAG AA 준수

<Canvas>
  <Story name="Accessibility">
    <Alert 
      variant="info"
      role="alert"
      aria-live="polite"
    >
      접근성이 고려된 알림입니다.
    </Alert>
  </Story>
</Canvas>

## 디자인 토큰

| Token | Value |
|-------|-------|
| --alert-padding | 16px |
| --alert-border-radius | 8px |
| --alert-border-width | 1px |
| --alert-font-size | 14px |

## 관련 컴포넌트

- [Toast](/docs/feedback-toast--docs) - 일시적 알림
- [Modal](/docs/overlay-modal--docs) - 중요한 메시지
- [Notification](/docs/feedback-notification--docs) - 시스템 알림