- CLAUDE.md: 프로젝트 규칙, 기술 스택, 코딩 규칙, 페이즈 로드맵 - .claude/settings.json: 권한, 강제 훅 (매 프롬프트 설계서 규칙 주입) - .claude/skills/: implement-phase, review-phase, scaffold, test-commit, debug - .claude/agents/: electron-architect, voice-pipeline-expert, ui-specialist - docs/design/00-09: 마스터 아키텍처, 서비스 명세(16개), IPC(113채널), DB스키마, UI컴포넌트, 검증리포트, 외부엔진연동, 갭분석, VoiceMode패턴, 디자인시스템, 히스토리팝업 - docs/phases/1-7+3.5: 전체 구현 페이즈 문서 - docs/re-findings/: Speakly RE 노하우 5개 문서
54 lines
2.2 KiB
Markdown
54 lines
2.2 KiB
Markdown
# Phase 3.5: 커서 위치 히스토리 팝업
|
||
|
||
## 목표
|
||
핫키(Ctrl+Shift+V)로 커서 근처에 최근 전사 히스토리 팝업을 띄우고, Arrow 키로 선택하여 즉시 붙여넣기.
|
||
Speakly에 없는 D3RO-VOICE 고유 편의 기능.
|
||
|
||
## 전제 조건
|
||
Phase 3 완료 (TextInsertService, HistoryService, HotkeyService, WindowManager 모두 동작)
|
||
|
||
## 태스크
|
||
|
||
### 3.5.1 HistoryPopupWindow (Vanilla JS)
|
||
- 별도 HTML 엔트리포인트 (`src/renderer/popups/history-popup/`)
|
||
- 08-design-system.md 준수: 다크 카드(#242427), 앰버 악센트(#f25b29), 22px radius
|
||
- 최근 10건 표시, 텍스트 50자 truncate, 상대 시간 표시
|
||
- 선택 항목: 좌측 앰버 바 + hover 배경
|
||
- 하단 키보드 힌트 (↑↓ SELECT / ⏎ PASTE / ESC ×)
|
||
- 등장/퇴장 애니메이션 (0.15s ease-out / 0.1s ease-in)
|
||
|
||
### 3.5.2 위치 계산
|
||
- mouse.getPosition()으로 커서 좌표
|
||
- 기본: 커서 위에 표시, 화면 밖이면 아래로
|
||
- 멀티모니터: screen.getDisplayNearestPoint()
|
||
|
||
### 3.5.3 글로벌 키 인터셉트
|
||
- HotkeyService에 historyPopupMode 추가
|
||
- 팝업 열림 중: Arrow↑↓, Enter, Escape, 1-9 키 소비
|
||
- focusable: false로 활성 앱 포커스 유지
|
||
|
||
### 3.5.4 IPC 채널 추가
|
||
- `history:showPopup`, `history:hidePopup`
|
||
- `history:showItems` (send), `history:selectItem` (send)
|
||
- `history:itemSelected` (on), `history:popupDismissed` (on)
|
||
|
||
### 3.5.5 설정 연동
|
||
- ConfigService에 historyPopup 섹션 추가 (hotkey, maxItems, autoCloseMs)
|
||
- Settings UI에 핫키 설정 추가
|
||
|
||
## Speakly RE 참조
|
||
- ResultPopupWindow: Vanilla JS 팝업 패턴, 프리로딩, 2-phase 리사이즈
|
||
- AskGensparkWindow: 키보드 인터랙션 (Enter/Escape)
|
||
- HotkeyService: 키 인터셉트 모드 (keyRecordingMode 패턴 응용)
|
||
|
||
## 설계 문서 참조
|
||
- `docs/design/09-history-popup.md` — 전체 설계
|
||
- `docs/design/08-design-system.md` — 디자인 시스템
|
||
|
||
## 완료 조건
|
||
- [ ] Ctrl+Shift+V로 커서 위에 팝업 표시
|
||
- [ ] Arrow↑↓로 항목 선택, Enter로 붙여넣기
|
||
- [ ] 숫자 1-9로 직접 선택+삽입
|
||
- [ ] Escape로 닫기
|
||
- [ ] 활성 앱 포커스 유지 (focusable: false)
|
||
- [ ] 디자인 시스템 준수 (앰버 악센트, 다크 카드)
|