DmNote-App · lee-sihun · Oct 2, 2025 · Oct 2, 2025 · Oct 2, 2025 · Oct 3, 2025
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ dist
 
 .roo
 AGENTS.md
-copilot-instructions.md
+copilot-instructions.md
+src-tauri/target
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 **한국어** | [English](docs/readme_en.md)
 
 <div align="center">
-  <img src="build/icon.ico" alt="dmnote Logo" width="120" height="120">
+  <img src="src-tauri/icons/icon.ico" alt="dmnote Logo" width="120" height="120">
 
   <h1>DM Note</h1>
 
@@ -13,20 +13,19 @@
   </p>
 
   [![GitHub release](https://img.shields.io/github/release/lee-sihun/DmNote.svg?logo=github)](https://github.com/lee-sihun/DmNote/releases)
-  [![GitHub downloads](https://img.shields.io/github/downloads/lee-sihun/DmNote/total.svg?logo=github)](https://github.com/lee-sihun/DmNote/releases/download/1.2.1/DM.NOTE.v.1.2.1.zip)
+  [![GitHub downloads](https://img.shields.io/github/downloads/lee-sihun/DmNote/total.svg?logo=github)](https://github.com/lee-sihun/DmNote/releases/download/1.3.0/DM.NOTE.v.1.3.0.zip)
   [![GitHub license](https://img.shields.io/github/license/lee-sihun/DmNote.svg?logo=github)](https://github.com/lee-sihun/DmNote/blob/master/LICENSE)
 </div>
 
 https://github.com/user-attachments/assets/20fb118d-3982-4925-9004-9ce0936590c2
 
-
 ## 🌟 개요
 
 **DM Note**는 DJMAX RESPECT V에서 사용하기 위해 만들어진 키뷰어 프로그램입니다. Electron과 React로 구축 되었으며
 키보드 후킹을 위해 [node-global-key-listener-extended](https://github.com/lee-sihun/node-global-key-listener) 패키지를 사용합니다.
 간편한 설정으로 스트리밍이나 플레이 영상 제작 시 키 입력을 시각적으로 보여줄 수 있습니다. 현재는 windows 환경만 지원하며, 리듬게임 이외의 다른 게임에서도 사용이 가능합니다.
 
-[DM NOTE v1.2.1 다운로드](https://github.com/lee-sihun/DmNote/releases/download/1.2.1/DM.NOTE.v.1.2.1.zip)
+[DM NOTE v1.3.0 다운로드](https://github.com/lee-sihun/DmNote/releases/download/1.3.0/DM.NOTE.v.1.3.0.zip)
 
 ## ✨ 주요 기능
 
@@ -98,11 +97,11 @@ DmNote/
 │  │  ├─ styles/                 # 전역/공통 스타일
 │  │  └─ assets/                 # 정적 리소스
 │  └─ types/                     # 공유 타입/스키마
-├─ package.json                  # 프로젝트 의존성 및 실행 스크립트 
+├─ package.json                  # 프로젝트 의존성 및 실행 스크립트
 ├─ tsconfig.json                 # TypeScript (렌더러/공용) 설정
 ├─ tsconfig.main.json            # TypeScript (메인) 전용 설정
 ├─ vite.config.ts                # Vite (렌더러) 설정
-└─ dist/                         # 빌드 결과물 
+└─ dist/                         # 빌드 결과물
 ```
 
 ### 기본 설치 및 실행
@@ -179,7 +178,3 @@ npm run start
 - 동시 입력 간격 밀리초(ms) 표시
 - 입력 통계 분석 기능
  -->
-
-
-
-
diff --git a/build/neonsign.css b/build/neonsign.css
diff --git a/build/presets/preset.json b/build/presets/preset.json
diff --git a/docs/assets/neonsign.css b/docs/assets/neonsign.css
@@ -0,0 +1,85 @@
+/* 커스텀 CSS 가이드 */
+
+/* 
+- 일부 속성 적용이 안된다면 !important를 사용해보세요.
+- 실시간 CSS 반영을 지원하지 않습니다. CSS 수정 후 파일을 다시 불러와야 합니다. 
+*/
+
+/* 키 스타일 예제 */
+
+/* 키 스타일 변수
+--key-radius: 키의 테두리 반경
+--key-bg: 키의 배경색
+--key-border: 키의 테두리 스타일
+--key-text-color: 키의 텍스트 색상
+*/
+
+/* 전역 키 스타일 */
+[data-state="inactive"],
+[data-state="active"] {
+  --key-radius: 6px;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+/* 전역 키 비활성 스타일 */
+[data-state="inactive"] {
+  --key-bg: transparent;
+  --key-border: 3px solid #474244;
+  --key-text-color: #474244;
+}
+
+/* 전역 키 활성 스타일 */
+[data-state="active"] {
+  --key-bg: transparent;
+  --key-border: 3px solid #ff2b80;
+  --key-text-color: #ff2b80;
+  text-shadow: 0px 0px 3px #ff2b80;
+  box-shadow: 0px 0px 4px #b3245d, 0px 0px 4px #b3245d;
+}
+
+/* 특정 키 활성 스타일 */
+.blue[data-state="active"] {
+  --key-bg: transparent;
+  --key-border: 3px solid #2ebef3;
+  --key-text-color: #2ebef3;
+  text-shadow: 0px 0px 3px #2ebef3;
+  box-shadow: 0px 0px 4px #2b8eff, 0px 0px 4px #2b8eff;
+}
+
+/* 카운터 스타일 예제 */
+
+/* 카운터 스타일 변수 
+--counter-color: 텍스트 색상
+--counter-stroke-color: 텍스트 외곽선 색상
+--counter-stroke-width: 텍스트 외곽선 두께
+*/
+
+/* 전역 카운터 스타일 */
+.counter {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+/* 전역 카운터 비활성 스타일 */
+.counter[data-counter-state="inactive"] {
+  --counter-color: #474244;
+  --counter-stroke-color: transparent;
+}
+
+/* 전역 카운터 활성 스타일  */
+.counter[data-counter-state="active"] {
+  --counter-color: #ff2b80;
+  --counter-stroke-color: transparent;
+  text-shadow: 0px 0px 3px #ff2b80;
+}
+
+/* 특정 키의 카운터 스타일 예제 */
+/* 클래스 선택자를 조합하여 특정 키의 카운터를 스타일링할 수 있습니다 */
+
+/* 클래스 조합 예제: .blue 클래스를 가진 키의 카운터 */
+.blue .counter[data-counter-state="active"] {
+  --counter-color: #2ebef3;
+  --counter-stroke-color: transparent;
+  text-shadow: 0px 0px 3px #2ebef3;
+}
diff --git a/docs/ipc-channels.md b/docs/ipc-channels.md
@@ -2,34 +2,44 @@
 
 아래 표기는 메인 프로세스에서 노출하는 IPC 채널과 페이로드 개요입니다. `window.api`는 `src/main/preload.ts`에서 래핑된 형태로 제공됩니다.
 
+> **Tauri 2 보안 메모**
+>
+> - 메인 창(`capabilities/main.json`)은 `dmnote-allow-all` 권한을 통해 아래 커맨드에 접근합니다.
+> - 각 Rust 커맨드는 `#[tauri::command(permission = "dmnote-allow-all")]` 로 선언되어 있어, 다른 윈도우/플러그인에 권한을 부여하지 않으면 호출할 수 없습니다.
+
 ## 데이터 흐름 개요
 
 - 초기화(앱 시작)
-  1) 메인 `Application`이 `electron-store` 스냅샷을 로드하고, 도메인/윈도우/서비스를 초기화합니다.
-  2) 렌더러는 `window.api.app.bootstrap()`을 호출해 초기 스냅샷(Settings/Keys/Positions/CustomTabs/SelectedKeyType/Overlay)을 받습니다.
-  3) `useAppBootstrap` 훅이 스냅샷을 Zustand 스토어에 반영하고, 아래 브로드캐스트 이벤트를 구독합니다.
+
+  1. 메인 `Application`이 `electron-store` 스냅샷을 로드하고, 도메인/윈도우/서비스를 초기화합니다.
+  2. 렌더러는 `window.api.app.bootstrap()`을 호출해 초기 스냅샷(Settings/Keys/Positions/CustomTabs/SelectedKeyType/Overlay)을 받습니다.
+  3. `useAppBootstrap` 훅이 스냅샷을 Zustand 스토어에 반영하고, 아래 브로드캐스트 이벤트를 구독합니다.
 
 - 변경(런타임)
-  1) 렌더러가 `settings:update`, `keys:update` 등 invoke 채널을 호출합니다.
-  2) 도메인이 입력을 `zod`로 정규화 후 `electron-store`에 저장, 필요한 부수효과(예: 오버레이 잠금/항상 위)를 적용합니다.
-  3) 변경 결과를 각 브로드캐스트 채널(`settings:changed`, `keys:changed` 등)로 전파 → 렌더러 스토어가 구독해 동기화합니다.
+
+  1. 렌더러가 `settings:update`, `keys:update` 등 invoke 채널을 호출합니다.
+  2. 도메인이 입력을 `zod`로 정규화 후 `electron-store`에 저장, 필요한 부수효과(예: 오버레이 잠금/항상 위)를 적용합니다.
+  3. 변경 결과를 각 브로드캐스트 채널(`settings:changed`, `keys:changed` 등)로 전파 → 렌더러 스토어가 구독해 동기화합니다.
 
 - 입력 이벤트(키보드)
   - `KeyboardService`가 전역 키 이벤트를 수집하여 현재 모드에 한해 `keys:state` 이벤트로 오버레이 렌더러에 전달합니다.
 
 ## app
-- `app:bootstrap` (invoke)
+
+- `app_bootstrap` (invoke)
   - 요청: `void`
   - 응답: `BootstrapPayload` (설정/키/포지션/커스텀탭/선택 탭/오버레이 상태)
 
 ## system
+
 - `window:minimize` (invoke)
 - `window:close` (invoke)
 - `app:open-external` (invoke)
   - 요청: `{ url: string }`
 - `app:restart` (invoke)
 
 ## settings
+
 - `settings:get` (invoke)
   - 응답: `SettingsState`
 - `settings:update` (invoke)
@@ -39,6 +49,7 @@
   - 페이로드: `SettingsState`
 
 ## keys / positions / customTabs
+
 - `keys:get` (invoke) → `KeyMappings`
 - `keys:update` (invoke) → 요청: `KeyMappings`, 응답: `KeyMappings`
 - `positions:get` (invoke) → `KeyPositions`
@@ -52,13 +63,15 @@
 - `custom-tabs:select` (invoke) → 요청: `{ id: string }`, 응답: `{ success: boolean; selected: string; error?: string }`
 
 브로드캐스트
+
 - `keys:changed` → `KeyMappings`
 - `positions:changed` → `KeyPositions`
 - `keys:mode-changed` → `{ mode: string }`
 - `customTabs:changed` → `{ customTabs: CustomTab[]; selectedKeyType: string }`
 - `keys:state` → `{ key: string; state: string; mode: string }` (키보드 이벤트)
 
 ## overlay
+
 - `overlay:get` (invoke) → `{ visible: boolean; locked: boolean; anchor: string }`
 - `overlay:set-visible` (invoke) → 요청: `{ visible: boolean }`, 응답: `{ visible: boolean }`
 - `overlay:set-lock` (invoke) → 요청: `{ locked: boolean }`, 응답: `{ locked: boolean }`
@@ -68,12 +81,14 @@
   - 응답: `{ bounds?: { x: number; y: number; width: number; height: number }; error?: string }`
 
 브로드캐스트
+
 - `overlay:visibility` → `{ visible: boolean }`
 - `overlay:lock` → `{ locked: boolean }`
 - `overlay:anchor` → `{ anchor: string }`
 - `overlay:resized` → `{ x: number; y: number; width: number; height: number }`
 
 ## css
+
 - `css:get` (invoke) → `CustomCss`
 - `css:get-use` (invoke) → `boolean`
 - `css:toggle` (invoke) → 요청: `{ enabled: boolean }`, 응답: `{ enabled: boolean }`
@@ -82,10 +97,12 @@
 - `css:reset` (invoke)
 
 브로드캐스트
+
 - `css:use` → `{ enabled: boolean }`
 - `css:content` → `CustomCss`
 
 ## preset
+
 - `preset:save` (invoke) → `{ success: boolean; error?: string }`
 - `preset:load` (invoke) → `{ success: boolean; error?: string }`
   - 로드 성공 시 관련 상태 채널(`keys:*`, `positions:*`, `customTabs:changed`, `settings:changed`, `css:*`)이 일괄 브로드캐스트됩니다.
diff --git a/docs/readme_en.md b/docs/readme_en.md
@@ -1,7 +1,7 @@
 [한국어](README.md) | **English**
 
 <div align="center">
-<img src="../build/icon.ico" alt="DM Note Logo" width="120" height="120">
+<img src="../src-tauri/icons/icon.ico" alt="DM Note Logo" width="120" height="120">
 
 <h1>DM Note</h1>
 
@@ -177,3 +177,4 @@ We welcome your contributions. See the [contribution guide](CONTRIBUTING.md) for
 - Millisecond interval display for simultaneous presses
 - Input analytics
 -->
+
diff --git a/docs/tauri-migration-log.md b/docs/tauri-migration-log.md
@@ -0,0 +1,64 @@
+# Tauri Migration Log
+
+## 2025-10-02 20:08 — 초기 분석
+
+- Electron 메인 프로세스가 `electron-store` 기반 상태와 IPC 도메인을 통해 창과 키 입력을 제어함.
+- `OverlayWindow` 는 항상 위, 투명, 마우스 이벤트 무시, 위치 복원을 처리하며 메인 창과 상태를 공유함.
+- `node-global-key-listener-extended` 로 글로벌 키 후킹, 특정 키맵 모드 필터 후 `keys:state` 이벤트 송신.
+- 렌더러는 `preload.ts` 에 노출된 `window.api` 로 모든 기능 호출 및 이벤트 구독을 수행함.
+- 마이그레이션 시 Tauri 다중 창, 영구 저장소, willhook 기반 후킹, 커맨드/이벤트 설계를 통해 동일한 기능을 복원해야 함.
+
+## 2025-10-02 20:11 — Tauri 스캐폴딩
+
+- `src-tauri` 디렉터리와 초기 `Cargo.toml`, `build.rs`, `main.rs` 를 추가해 Rust 백엔드 골격을 마련함.
+- `tauri.conf.json` 으로 Vite 출력(`dist/renderer`)과 개발 서버(`http://localhost:3000/main/index.html`)를 연결하는 기본 창 구성을 정의함.
+- fern 로깅 초기화를 포함해 Tauri 엔트리포인트를 준비하여 후속 모듈이 로그를 공유할 수 있도록 함.
+
+## 2025-10-02 21:00 — 상태/도메인 마이그레이션
+
+- Rust `AppStore` 와 데이터 모델을 도입하고 JSON 기반 기본값/복구 로직을 이식해 영구 저장소를 대체함.
+- Settings·Keys·CSS·Preset·System 커맨드를 Tauri 2 `#[command]` 구조로 변환하고 이벤트 전파를 `AppHandle::emit` 기반으로 재구성함.
+- `open`, `rfd` 등을 활용한 플랫폼 기능 대체와 함께 `cargo check` 를 통과하는 Tauri 백엔드 스켈레톤을 확보함.
+
+### 다음 단계
+
+- willhook 기반 키보드 후킹과 오버레이(WebviewWindow) 제어 로직을 구현하고 상태 연동을 마무리.
+- 프론트엔드 API 층을 Tauri invoke 기반으로 교체하고 타입/스토어 동기화를 정리.
+- 빌드/실행 스크립트를 Tauri 기준으로 정리하고 남은 Electron 의존성 제거.
+
+## 2025-10-02 21:45 – willhook 기반 글로벌 키 후킹 및 오버레이 제어
+
+- willhook 크레이트로 글로벌 키 훅 스레드를 구성하고 `keys:state` 이벤트를 Tauri emit으로 연동.
+- 오버레이 WebviewWindow 재생성·위치·잠금 제어 로직을 AppState 메서드로 정비하고 상태 질의를 위한 API 추가.
+- overlay:get/set-visible/set-lock/set-anchor/resize Tauri 커맨드를 구현하고 invoke 핸들러에 등록.
+- 앱 setup 단계에서 AppState 런타임 초기화를 수행하도록 조정.
+
+## 2025-10-02 22:15 – 프런트엔드 IPC를 Tauri invoke 기반으로 전환
+
+- `@tauri-apps/api` 기반 `tauriApi` 브리지를 작성해 기존 `window.api` 호출 레이어를 Tauri invoke/event로 대체.
+- 공용 IPC 타입을 `src/types/api.ts`로 정리하고 글로벌 선언을 단순화해 타입 안정성 확보.
+- 메인/오버레이 엔트리에서 브리지 초기화하도록 조정하고 npm 종속성에 Tauri API 패키지 추가 및 lockfile 갱신.
+
+## 2025-10-03 00:05 – Electron 잔여물 정리와 Tauri 빌드 검증
+
+- Electron 메인 프로세스/스크립트/빌드 리소스를 제거하고 npm 스크립트·의존성을 Tauri 중심으로 재구성.
+- `tauri.conf.json`을 npm build 파이프라인에 맞춰 갱신하고 번들 식별자를 `com.dmnote.desktop`으로 정정.
+- `npm run build` 및 `npm run tauri:build`를 실행해 프런트엔드와 Tauri 릴리스 빌드 파이프라인이 정상 동작함을 확인.
+
+## 2025-10-03 09:16 ? 타입 에러 정리 및 빌드 검증
+
+- Windows 파일시스템 대소문자 혼용으로 깨지던 Modal 경로 import를 모두 대문자 표기로 정리하여 `forceConsistentCasingInFileNames` 오류 해소.
+- `tsconfig.json`의 `module`/`moduleResolution`을 `ESNext`/`Node`로 전환해 `@tauri-apps/api` ESM import 경고를 제거.
+- `npm run type-check`, `npm run build`, `cargo check`, `npm run tauri:build` 순으로 검증 완료 (Browserslist 경고는 기존 TODO 유지).
+
+## 2025-10-03 09:39 — 개발 환경 경로 및 TypeScript 설정 정돈
+
+- Tauri devUrl을 루트(http://localhost:3000)로 조정해 개발 모드에서 main/index.html이 중복으로 붙던 404를 제거.
+- tsconfig.json에서 legacy baseUrl을 제거하고 moduleResolution을 Bundler로 전환, 경로 alias를 상대 경로로 재정리해 TypeScript 7 선제 대응 경고를 해소.
+- npm run tauri:dev와 npm run type-check로 각각 실행 및 타입 검증 확인.
+
+## 2025-10-03 11:20 — Tauri ACL 재정비 및 창 제어 복구
+
+- `dmnote-allow-all` 커스텀 권한을 정의하고 `capabilities/main.json`에 연결해 렌더러가 DM Note 전용 커맨드 세트를 호출할 수 있게 구성.
+- 모든 Rust 커맨드에 `permission = "dmnote-allow-all"` 속성을 부여하고 최소화/닫기 등 시스템 채널이 다시 동작하도록 허용 리스트를 정비.
+- `cargo check` 및 `npx tauri permission ls`로 ACL 컴파일과 권한 인식 상태를 검증, 문서(`docs/ipc-channels.md`)에 보안 메모를 추가.
diff --git a/docs/tauri-migration-progress.md b/docs/tauri-migration-progress.md
@@ -0,0 +1,25 @@
+# Tauri 마이그레이션 평행 진행 로그
+
+## 작업 개요
+
+- 목적: Electron 백엔드를 Tauri 기반으로 완전히 이관하면서 원래 동작을 1:1로 복원
+- 세부 이슈: 윈도우 구성, 오버레이 렌더링, 글로벌 키 후킹, 설정/프리셋/외부 링크 동작 이상 등 7건 확인됨
+
+## 진행 체크리스트
+
+- [x] 메인 창 윈도우 속성 원복 (보더리스, 크기 고정, 기본 크기)
+- [x] 오버레이 창 재생성 및 표시 로직 복원
+- [x] 넘버패드 키 후킹 예외 처리 복원
+- [x] Electron `electron-store` JSON과의 설정 호환성 확보
+- [x] 초기 부트스트랩/키맵 로딩 검증 및 그리드 노출 확인
+- [x] 프리셋 저장/불러오기 동작 복구
+- [x] 외부 링크 열기 기능 복구
+- [ ] 추가 회귀 점검 및 자동화 검증
+
+## 작업 로그
+
+- 2025-10-03 10:05 — 기존 Electron 커밋(`75f3e1c^`)에서 메인/오버레이 윈도우, 키보드 서비스, 스토어 스키마 구현 확인. 현재 Tauri 구현과의 차이점 목록화.
+- 2025-10-03 10:32 — `tauri.conf.json`과 `main.rs`에서 메인 창 크기·보더 상태·최대화/리사이즈 동작을 Electron 기본값과 동일하게 조정하고, 프런트엔드 `TitleBar`에 Tauri 드래그 영역 속성을 부여함.
+- 2025-10-03 14:20 ✅ Main/Overlay window behavior restored: enforced borderless sizing, overlay visibility, and updated window close flow.
+- 2025-10-03 14:25 ✅ Legacy electron-store data migrated to Tauri store.json with key grid defaults and numpad aliases; preset/export commands and external links verified.
+