# Ant Design 5 (Alibaba)

> 중국발 엔터프라이즈 UI 프레임워크. 컴포넌트 수와 완성도가 최고 수준.

## 핵심 원칙
- **Natural**: 자연스러운 상호작용
- **Certain**: 명확한 피드백
- **Meaningful**: 의미 있는 애니메이션
- **Growing**: 사용자 성장 지원

---

## 컬러 시스템 (Design Token V2)

```
Brand Blue (Daybreak Blue)
  Blue-1:  #E6F4FF
  Blue-2:  #BAE0FF
  Blue-3:  #91CAFF
  Blue-4:  #69B1FF
  Blue-5:  #4096FF
  Blue-6:  #1677FF   ← Primary
  Blue-7:  #0958D9
  Blue-8:  #003EB3
  Blue-9:  #002C8C
  Blue-10: #001D66

Neutral
  Gray-1:  #FFFFFF
  Gray-2:  #FAFAFA   ← Table header bg
  Gray-3:  #F5F5F5   ← Bg layout
  Gray-4:  #F0F0F0
  Gray-5:  #D9D9D9   ← Border
  Gray-6:  #BFBFBF   ← Disabled text
  Gray-7:  #8C8C8C   ← Secondary text
  Gray-8:  #595959
  Gray-9:  #434343
  Gray-10: #262626   ← Heading
  Gray-11: #1F1F1F
  Gray-12: #141414   ← Title
  Gray-13: #000000

Semantic
  Success: #52C41A
  Warning: #FAAD14
  Error:   #FF4D4F
  Info:    #1677FF
```

## 타이포그래피

```
기본 폰트: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR"
코드 폰트: SFMono-Regular, Consolas, "Liberation Mono", Menlo

Base:       14px
H1:         38px / Weight 600 / Spacing -0.02em
H2:         30px / Weight 600 / Spacing -0.02em
H3:         24px / Weight 600 / Spacing -0.02em
H4:         20px / Weight 600 / Spacing -0.02em
H5:         16px / Weight 600
Body:       14px / Line 1.5714
Small:      12px / Line 1.6667
```

## 스페이싱 (4px 기반)

```
4, 8, 12, 16, 20, 24, 32, 40, 48, 64
```

## Border Radius

```
Small:   2px  ← 기본 컴포넌트
Base:    6px
Large:   8px
XLarge:  16px (카드 등)
```

## 그림자

```
sm:  0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.02)
md:  0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05)
lg:  0 6px 16px -8px rgba(0,0,0,0.08), 0 9px 28px rgba(0,0,0,0.05), 0 12px 48px 16px rgba(0,0,0,0.03)
```

---

## 주요 컴포넌트 패턴

### 버튼
```
Primary:  bg=#1677FF, text=#FFF, radius=6px, h=32px, px=15
Default:  bg=#FFF, border=1px #D9D9D9, h=32px, px=15
Dashed:   border=1px dashed #D9D9D9
Text:     bg=transparent, no border
Link:     text=#1677FF, no bg
Size sm:  h=24px, px=7
Size lg:  h=40px, px=15
```

### 폼 / 입력
```
Input h:       32px (middle), 24px (small), 40px (large)
border:        1px solid #D9D9D9
focus:         1px solid #1677FF + box-shadow: 0 0 0 2px #1677FF1A
radius:        6px
label:         위쪽, 14px
validation: 오류=red border+메시지, 경고=orange
```

### 테이블
```
header-bg:     #FAFAFA
border:        1px solid #F0F0F0
row-hover:     #FAFAFA
row-selected:  #E6F4FF
pagination:    하단 오른쪽
```

### 카드
```
bg:      #FFFFFF
border:  1px solid #F0F0F0
radius:  8px
shadow:  shadow-sm
header:  border-bottom 1px #F0F0F0, p=16
body:    p=24
```

### 메뉴 / 사이드바
```
bg:          #001529  (dark) / #FFF (light)
item-h:      40px
item-active: text=#1677FF, bg=#E6F4FF
indent:      24px per level
collapsed-w: 80px
expanded-w:  200px
```

### 모달 / 드로어
```
Modal:   radius=8px, shadow=lg, header-p=16 24
Drawer:  right slide, w=378px (default)
```

---

## React 구현 가이드

```bash
npm install antd
```

```jsx
import { ConfigProvider, Button, Form, Input, Table } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1677FF',
      borderRadius: 6,
      fontFamily: '"Noto Sans KR", -apple-system',
    },
  }}
>
  <Button type="primary">Primary</Button>
</ConfigProvider>
```

## 다크 모드
```jsx
import { theme } from 'antd';

<ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
```

## 아이콘
```bash
npm install @ant-design/icons
```
```jsx
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
```

## 금지 사항
- 이모티콘 사용 금지 → @ant-design/icons 사용
- 임의 CSS 오버라이드 최소화 → ConfigProvider token 활용