d0c4f9ee53
실시간 녹음 + 타임스탬프 메모 + STT 전사 + LLM 구조화 회의록 + PDF/MD 내보내기. CaptionService 연동, 동시 사용 충돌 방지, 긴 회의 2-pass 요약 지원. DB 2테이블, IPC 15채널, UI 3뷰(목록/녹음/상세), 12개 locale i18n.
48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
---
|
|
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
|
|
|
|
D3RO-VOICE의 "정밀 기기(Meteorological Instrument)" 디자인 정체성을 구현.
|
|
|
|
## 디자인 토큰 체계 (SSOT)
|
|
- **d3roPalette**: 색상 토큰 (theme.ts에서 export)
|
|
- **d3roTypo**: 13단계 타이포 (hero 42px ~ nano 7px)
|
|
- **d3roShadow**: 10종 그림자 (chassis/card/inset/button 등)
|
|
- **d3roRadius**: 7종 반경 (outer 24px ~ pill 999px)
|
|
- hex 리터럴 직접 사용 금지 (theme.ts 제외)
|
|
|
|
## DS 컴포넌트 (src/renderer/components/ds/)
|
|
- CrtDisplay: WebGL CRT 셰이더 (파형+스캔라인+비네팅+글리치)
|
|
- InstrumentPanel: 메탈 섀시 컨테이너
|
|
- Led: LED 인디케이터 (amber/green/red, pulse)
|
|
- PhysicalButton: 물리 버튼 (돌출 그림자, 눌림)
|
|
- MetalCard: 메탈 카드 컨테이너
|
|
- PhosphorText: 인광 텍스트 (13종 변형)
|
|
- MetalDial: 메탈 다이얼 (드래그 회전)
|
|
- ScreenPanel: 글래스 스크린 패널
|
|
- ButtonGroup: 인셋 버튼 클러스터
|
|
|
|
## 녹음 UI 상태 머신
|
|
opening → recording → thinking → result/error/cancelled
|
|
- 9개 wave-bar, cos(n*PI/2) 분포 가중치
|
|
- 100ms 간격, 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
|
|
- 앰버 악센트(#f25b29)
|
|
|
|
## i18n
|
|
- React: t() 함수 사용, 하드코딩 한국어/영어 금지
|
|
- 리소스: src/renderer/locales/{ko,en}.json
|