# Phase 3: 텍스트 삽입 + 기본 UI ## 목표 전사된 텍스트를 활성 앱에 삽입하고, 녹음 상태/결과를 표시하는 UI 구축. ## 태스크 ### 3.1 TextInsertService - `src/main/services/TextInsertService.ts` - Speakly ClipboardPaste 패턴: 1. 클립보드 전체 백업 2. 텍스트를 클립보드에 설정 3. @nut-tree/nut-js로 Ctrl+V 시뮬레이션 4. 클립보드 복원 - 삽입 검증 (옵션) ### 3.2 RecordingTipWindow (Vanilla JS 팝업) - 녹음 상태 표시 (opening → recording → thinking → result/error) - 9개 웨이브 바 애니메이션 (Speakly 패턴) - 2-phase 리사이즈 - 프리로딩 방식 ### 3.3 ResultPopupWindow (Vanilla JS 팝업) - 전사 결과 텍스트 표시 - 복사 버튼, 닫기 버튼 - 자동 숨김 + 마우스 호버 시 유지 ### 3.4 Dashboard (React) - 통계: 총 시간, 단어 수, 세션 수 - 최근 세션 목록 - Speakly 패턴: MUI Drawer(240px) + Content Area ### 3.5 Settings (React Modal) - 언어, 테마(light/dark/auto), 핫키 설정 - 마이크 선택 + 테스트 - Ollama 서버 URL 설정 ## Speakly RE 참조 - ClipboardPaste 의사코드: save→set→SendInput(Ctrl+V)→restore - RecordingTip: wave-bar cos 분포, thinking 점근 수렴 - ResultPopup: requestAnimationFrame 높이 측정, mouseenter/leave - App.js: MUI 테마, Drawer 네비게이션, 라우팅 패턴 - Settings: HotkeyRecordModal, 마이크 선택 UI ## 완료 조건 - [ ] 전사된 텍스트가 활성 앱(메모장 등)에 삽입됨 - [ ] RecordingTip 웨이브 애니메이션 작동 - [ ] Dashboard에 통계 표시 - [ ] Settings에서 핫키/마이크 변경 가능