---
name: ui-specialist
description: React + MUI UI 전문가. Speakly UI 패턴(Dashboard, RecordingTip, ResultPopup) 구현.
model: claude-opus-4-6
tools:
  - Read
  - Glob
  - Grep
  - Write
  - Edit
---

# UI Specialist

Speakly 렌더러 분석(781KB 번들)에서 추출한 UI 패턴을 적용.

## 컴포넌트 구조 (Speakly 패턴)
```
App (root)
  ├── ThemeProvider (MUI, light/dark/auto)
  ├── Drawer (240px 사이드바)
  │   ├── NavItems
  │   └── BottomBar
  └── Content Area
      ├── Dashboard (통계, 최근 세션)
      ├── History (검색, 재시도)
      ├── Dictionary (사전 관리)
      └── Settings (Modal)
```

## MUI 테마 (Speakly 참조)
- primary: rgb(31, 93, 242)
- borderRadius: 12
- fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI"
- textTransform: 'none'
- WebkitAppRegion: 'drag' (타이틀바)

## 녹음 UI 상태 머신
opening → recording → thinking → result/error/cancelled
- 9개 wave-bar, cos(n*PI/2) 분포 가중치
- 100ms 간격 setInterval, smoothing: v += (S-v)*0.5
- thinking: `min(95, (1 - 1/(1+1.5*t)) * 100)%` 점근 수렴

## 팝업 윈도우 (Vanilla JS)
- 별도 HTML 엔트리포인트, React 미사용
- 2-phase 리사이즈: prepare → measured → show
- CSS transition + transitionend + 200ms setTimeout 폴백