# Fluent UI 2 (Microsoft)

> 생산성과 협업에 최적화된 엔터프라이즈 디자인 시스템. Office 365, Teams 계열.

## 핵심 원칙
- **Familiar**: 익숙한 패턴 유지
- **Inclusive**: 모든 사용자 접근 가능
- **Intentional**: 명확한 목적의 디자인
- **Connected**: 일관된 경험

---

## 컬러 시스템

```
Brand
  Brand 10:  #062338
  Brand 20:  #0A3249
  Brand 30:  #0D4661
  Brand 40:  #105E7D
  Brand 50:  #14729B
  Brand 60:  #1986B8
  Brand 70:  #1C9BD4
  Brand 80:  #0F6CBD   ← Primary
  Brand 90:  #2886DE
  Brand 100: #4495E3
  Brand 110: #5EA4EB
  Brand 120: #78B3F1
  Brand 130: #92C3F6
  Brand 140: #ADD3FA
  Brand 150: #C7E3FD
  Brand 160: #E2F2FE

Neutral
  Grey 2:    #F8F8F8
  Grey 4:    #F4F4F4   ← Background
  Grey 6:    #F0F0F0
  Grey 8:    #E8E8E8
  Grey 12:   #E0E0E0   ← Border
  Grey 16:   #D4D4D4
  Grey 20:   #C8C8C8
  Grey 24:   #BCBCBC
  Grey 30:   #ABABAB
  Grey 36:   #9A9A9A
  Grey 40:   #919191
  Grey 46:   #818181
  Grey 50:   #767676
  Grey 100:  #242424   ← Body text
  Grey 190:  #141414

Status
  Success:   #107C10
  Warning:   #F7630C
  Error:     #BC2F32
  Info:      #0F6CBD
```

## 타이포그래피 (Segoe UI / Pretendard KR)

```
Caption:      12px / Line 16 / Weight 400
Body 1:       14px / Line 20 / Weight 400  ← 기본
Body 2:       14px / Line 20 / Weight 600
Subtitle 1:   16px / Line 22 / Weight 400
Subtitle 2:   20px / Line 28 / Weight 600
Title 1:      24px / Line 32 / Weight 600
Title 2:      28px / Line 36 / Weight 600
Title 3:      32px / Line 40 / Weight 600
Large Title:  40px / Line 52 / Weight 600
Display:      68px / Line 92 / Weight 600
```

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

```
2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80, 120, 160
```

## 형태 (Border Radius)

```
None:   0px
Small:  2px
Medium: 4px   ← 기본
Large:  6px
XLarge: 8px
Circular: 10000px
```

## 그림자

```
2:  0 1px 2px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)
4:  0 2px 4px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)
8:  0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)
16: 0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)
28: 0 14px 28px rgba(0,0,0,0.14), 0 0 4px rgba(0,0,0,0.12)
64: 0 32px 64px rgba(0,0,0,0.24), 0 0 8px rgba(0,0,0,0.20)
```

---

## 주요 컴포넌트 패턴

### 버튼
```
Primary:   bg=#0F6CBD, text=#FFF, radius=4px, h=32, px=12
Secondary: bg=#FFF, border=1px #D4D4D4, radius=4px, h=32, px=12
Subtle:    bg=transparent, hover-bg=#F0F0F0, h=32, px=12
Outline:   border=1px #0F6CBD, text=#0F6CBD, h=32, px=12
```

### 입력 필드
```
배경:       #FFFFFF
테두리:     1px solid #D4D4D4
포커스:     2px solid #0F6CBD
오류:       2px solid #BC2F32
높이:       32px (small), 40px (medium), 44px (large)
패딩:       px=8
레이블:     위쪽, 12px, Grey 100
```

### 카드 / 패널
```
bg:      #FFFFFF
border:  1px solid #E0E0E0
radius:  4px
shadow:  shadow4
p:       16px
```

### 다이얼로그
```
bg:       #FFFFFF
radius:   8px
shadow:   shadow28
max-w:    600px
header p: 24px 24px 0
body p:   16px 24px
footer p: 0 24px 24px
```

---

## React 구현 가이드

```bash
npm install @fluentui/react-components
```

```jsx
import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      <Button appearance="primary">Primary</Button>
    </FluentProvider>
  );
}
```

## 아이콘
```bash
npm install @fluentui/react-icons
```
```jsx
import { AddRegular, DeleteRegular } from '@fluentui/react-icons';
```

## 금지 사항
- 이모티콘 사용 금지 → @fluentui/react-icons 사용
- 8px 미만 터치 타깃 금지
- 색상만으로 상태 구분 금지 (아이콘/텍스트 병행)