하네스 정비: UI 재설계 TODO + 다음 세션 가이드
This commit is contained in:
parent
85d626b922
commit
f41fc277e3
1 changed files with 37 additions and 13 deletions
50
CLAUDE.md
50
CLAUDE.md
|
|
@ -77,22 +77,46 @@ npm run typecheck # tsc --noEmit
|
||||||
6. **녹음 UI**: 9개 웨이브 바, cos 분포 가중치, 100ms 애니메이션
|
6. **녹음 UI**: 9개 웨이브 바, cos 분포 가중치, 100ms 애니메이션
|
||||||
|
|
||||||
## 현재 상태
|
## 현재 상태
|
||||||
Phase: 8 완료 (Phase 1~8 + 3.5 전체 완료)
|
Phase: 7.5 완료 + UI WIP (Phase 1~7.5 + 3.5 기능 완료, UI 미완성)
|
||||||
마지막 완료: Phase 8 — UI 전면 리디자인 (08-design-system.md SSOT 적용)
|
마지막 작업: 인스트루먼트 UI 시도 (DS 컴포넌트 + CRT 셰이더) — WIP
|
||||||
다음 작업: 전사 테스트 (npm run dev) → 온보딩 위저드
|
다음 작업: **UI 디자인 근본 재설계** (아래 "디자인 재설계 TODO" 참조)
|
||||||
차단 이슈: @nut-tree-fork/nut-js 포크 사용
|
차단 이슈: @nut-tree-fork/nut-js 포크 사용
|
||||||
|
|
||||||
### Phase 8 구현 내용
|
### ⚠️ 디자인 재설계 TODO (다음 세션 최우선)
|
||||||
- 08-design-system.md SSOT 기반 MUI 테마 전면 교체 (다크+라이트+auto 테마 시스템)
|
시안 A (Meteorological Instrument) 정체성을 앱 전체에 충실히 반영해야 함.
|
||||||
|
현재 WIP 상태에서 해결해야 할 문제:
|
||||||
|
|
||||||
|
1. **SSOT 위반**: 색상/폰트 매직넘버 41곳 → 전부 d3roPalette/d3roFontMono 참조로 교체
|
||||||
|
2. **시안 A 정체성 부족**: CRT+버튼은 만들었으나 "정밀 기기" 느낌이 안 살아남
|
||||||
|
- 메탈 다이얼 컴포넌트 미구현
|
||||||
|
- 서브페이지(History/Dict/Commands)가 여전히 평범한 리스트
|
||||||
|
3. **모달/팝업 방치**: Settings 모달, 히스토리 팝업(Ctrl+Shift+V) 스타일 미적용
|
||||||
|
4. **08-design-system.md 정비 필요**: 문서와 실제 구현의 괴리 해소
|
||||||
|
5. **테마 시스템**: dark+light+auto 유지하되, 나중에 커스텀 테마 추가 가능 구조
|
||||||
|
|
||||||
|
순서: 08 문서 정비 → DS 토큰/컴포넌트 정비 → Dashboard → 서브페이지 → 모달/팝업
|
||||||
|
|
||||||
|
참조 파일:
|
||||||
|
- 시안 A HTML: docs/design-refs/instrument-panel.html (또는 유저가 준 HTML)
|
||||||
|
- 디자인 시스템: docs/design/08-design-system.md
|
||||||
|
- DS 컴포넌트: src/renderer/components/ds/
|
||||||
|
- 메모리: memory/ui_design_lessons.md
|
||||||
|
|
||||||
|
### DS 컴포넌트 현황 (src/renderer/components/ds/)
|
||||||
|
- CrtDisplay.tsx: WebGL CRT 셰이더 (파형+스캔라인+비네팅+글리치) ✅
|
||||||
|
- InstrumentPanel.tsx: 메탈 섀시 컨테이너 (각인 텍스트, 노이즈) ✅
|
||||||
|
- Led.tsx: LED 인디케이터 (amber/green/red/orange, pulse) ✅
|
||||||
|
- PhysicalButton.tsx: 물리 버튼 (돌출 그림자, 눌림 피드백) ✅
|
||||||
|
- MetalCard.tsx: 메탈 카드 컨테이너 ✅
|
||||||
|
- PhosphorText.tsx: 인광 텍스트 (hero/value/label/dim) ✅
|
||||||
|
- ❌ MetalDial: 미구현 (시안 A의 핵심 요소)
|
||||||
|
|
||||||
|
### Phase 8 구현 내용 (WIP)
|
||||||
- theme.ts: d3roPalette(SSOT), createD3ROTheme('dark'|'light'), getTheme(mode, prefersDark)
|
- theme.ts: d3roPalette(SSOT), createD3ROTheme('dark'|'light'), getTheme(mode, prefersDark)
|
||||||
- App.tsx: auto 모드 → 시스템 설정 따름 (나중에 커스텀 테마 확장 가능)
|
- DS 컴포넌트 6개 생성 (CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText)
|
||||||
- AppLayout: 앰버 LED, 라벨 스타일, 아이콘 색상, 네비게이션 앰버 선택
|
- Dashboard: CRT WebGL + 물리 버튼 + LED — 시안 A 느낌 시도 중
|
||||||
- DashboardPage: hero 수치(28px mono), 카드 그리드, LED 상태 패널, 태그 시스템
|
- 사이드바: 72px 미니 네비게이션 (물리 버튼 느낌)
|
||||||
- StatusBar: LED 인디케이터 + 모노 폰트 + 핫키 힌트
|
- 문제: 매직넘버 41곳, 시안 A 정체성 부족, 모달/팝업 방치
|
||||||
- HistoryPage: 카드 레이아웃, 앰버/퍼플 태그, 모노 메타데이터
|
|
||||||
- DictionaryPage: 카드 레이아웃, 카테고리 태그, 사용 횟수 모노
|
|
||||||
- CommandsPage: 카드 레이아웃, BUILT-IN/CUSTOM 태그
|
|
||||||
- SettingsModal: 디자인 시스템 border/close 스타일
|
|
||||||
|
|
||||||
### Phase 7.5 구현 내용
|
### Phase 7.5 구현 내용
|
||||||
- SoundEffectService: WAV 프리로드, fire-and-forget, PowerShell SoundPlayer로 재생
|
- SoundEffectService: WAV 프리로드, fire-and-forget, PowerShell SoundPlayer로 재생
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue