feat: release v2.0 - visual linker, instant edit, and ux improvements

This commit is contained in:
leeyj
2026-04-17 15:21:21 +09:00
parent 331411895e
commit bff0beea96
23 changed files with 560 additions and 78 deletions
+19
View File
@@ -0,0 +1,19 @@
# 버그 리포트: #20260417-01
## 버그 내용
1. **Ctrl + Enter 단축키 저장 불능**: 에디터에서 `Ctrl + Enter`를 눌렀을 때 작성 창은 정상적으로 닫히는 것처럼 보이나(포커스 해제 등), 실제 저장 로직이 호출되지 않아 데이터가 손실되는 문제.
2. **[[#ID]] 내부 링크와 해시태그 충돌**: 본문 내의 `[[#123]]` 형태의 내부 링크가 해시태그(`#123`)로 오인되어 백엔드 메타데이터 정리 과정에서 삭제되거나 태그 목록에 추가되는 문제.
## 조치 사항
1. **프론트엔드 조치**:
- `static/app.js`에서 에디터 초기화 시 저장 핸들러 콜백을 명시적으로 전달.
- 에디터 초기화 및 작성기 초기화 순서를 콜백 정의 이후로 조정하여 안정성 확보.
- `EditorManager.js` 내부의 캡처 단계 키다운 이벤트 리스너가 해당 콜백을 정상적으로 호출하도록 보장.
2. **백엔드 조치**:
- `app/utils/__init__.py`의 해시태그 추출 및 삭제 정규표현식 수정.
- 부정 후방 탐색(`(?<!\[\[)`)을 추가하여 `#` 앞에 `[[`가 오는 경우 태그 처리에서 제외.
- 수정된 패턴: `(?<!#)(?<!\[\[)#(\w+)`
## 향후 주의사항
- **특수 문법 충돌 주의**: 새로운 대괄호(`[[ ]]` 등) 또는 특수 기호를 사용하는 문법을 추가할 때는 기존의 정규표현식 기반 메타데이터 추출기(`parse_metadata`)와의 충돌 여부를 반드시 사전 검증해야 함.
- **키보드 이벤트 우선순위**: Toast UI 등 서드파티 라이브러리를 사용할 경우, 라이브러리 내부에서 이벤트를 전파 중단(stopPropagation)할 수 있으므로, 단축키 처리 시 캡처 단계에서 처리하거나 라이브러리 제공 옵션을 활용해야 함.
+1
View File
@@ -52,6 +52,7 @@
### 2.1 Memos & Search
- `GET /api/memos`: 필터링된 메모 목록 및 메타데이터 통합 조회.
- **`GET /api/memos/<int:memo_id>` (v2.0)**: 특정 메모의 상세 정보(본문, 태그, 첨부파일 포함) 단건 조회.
- `POST /api/memos/<id>/decrypt`: 암호화된 메모 복호화 요청.
- `GET /api/stats/heatmap`: 히트맵 렌더링을 위한 통계 데이터 조회.
+11 -1
View File
@@ -26,8 +26,12 @@ D3.js v7 물리 시뮬레이션 엔진을 통해 파편화된 메모들을 유
## 🔗 4. 내부 링크 및 백링크 시스템
### 4.1 연결 문법 (`[[#ID]]`)
### 4.1 연결 문법 및 자동화 (`[[#ID]]`)
- **자동 링크**: 본문에 `[[#12]]`와 같이 입력하면 뷰어에서 클릭 가능한 링크로 변환되며, 지식 맵 상에서 두 노드 사이에 **강력한 실선**이 형성됩니다.
- **비주얼 노드 링커 (v2.0)**:
- **Alt + 클릭 연결**: 메모 카드의 #ID를 `Alt` 키와 함께 클릭하면 화살표 점선이 나타나며, 다른 메모의 #ID를 클릭하는 것만으로 두 지식을 논리적으로 연결합니다.
- **드래그 앤 드롭**: 메모 카드를 작성기(Composer)로 드래그하여 떨어뜨리면 해당 메모의 링크가 커서 위치에 즉시 삽입됩니다.
- **퀵 카피 (Quick Copy)**: #ID 배지를 클릭하는 것만으로 `[[#ID]]` 형식이 클립보드에 복사됩니다.
- **역방향 추적 (Backlinks)**: 특정 메모 카드 하단에 해당 메모를 인용 중인 다른 메모의 목록이 노출되어, 지식의 흐름을 양방향으로 추적할 수 있습니다.
## 🌡️ 5. 지식 성장 히트맵 (Intellectual Growth Heatmap)
@@ -41,3 +45,9 @@ D3.js v7 물리 시뮬레이션 엔진을 통해 파편화된 메모들을 유
## ⚙️ 7. 맞춤형 사용자 환경 (v1.5 신규)
- **고급 설정 (Advanced Categories)**: 라이트 유저를 위해 복잡한 카테고리 기능을 숨길 수 있습니다. 설정에서 활성화 시에만 작성기 칩과 사이드바 섹션이 정밀한 레이아웃으로 노출됩니다.
- **글로벌 인텔리전스 (i18n Stabilization)**: 한국어와 영어를 완벽하게 지원하며, 언어 설정을 변경할 경우 히트맵과 달력 등 동적 컴포넌트까지 실시간으로(자동 새로고침) 완벽하게 번역이 적용됩니다.
## ⚡ 8. 고속 워크플로우 (v2.0 신규)
- **즉시 수정 (Instant Edit)**: 메모 카드 위에 마우스를 올리고 `e` 키를 누르면 본문 모달을 거치지 않고 즉시 수정 모드로 진입합니다.
- **직관적 행동 분리 (Discard vs Delete)**:
- **작성 취소**: 현재 작업 중인 내용을 버리고 안전하게 창을 닫습니다. (기존 메모는 보존됩니다.)
- **지식 삭제**: 수정 모드 내에서 별도의 빨간색 삭제 버튼을 통해 명시적으로 메모를 영구 제거합니다.
+7 -3
View File
@@ -20,11 +20,15 @@ D3.js 엔진은 데이터 간의 명시적 링크 외에도 의미론적 연결
### 2.1 자동 연결 규칙 (Semantic Linking)
1. **명시적 링크**: `[[#ID]]` 패턴으로 작성된 내부 링크 (실선 표시).
2. **동일 그룹**: 같은 그룹에 속한 메모들끼리 부유하며 성단을 형성 (은은한 연결선).
3. **공통 태그**: 같은 태그를 공유하는 메모들 사이에 인력이 작용하여 근접 배치.
2. **비주얼 노드 링커 (Interactive Linker)**:
- **절차**: Alt + Badge 클릭 (Source) -> 다른 Badge 클릭 (Target) -> Target ID를 Source의 본문에 자동 추가 -> DB 저장 및 UI 갱신.
- **좌표 동기화**: `requestAnimationFrame`을 통해 마우스 커서와 SVG 연결선의 실시간 좌표를 동기화하여 지연 없는 드래잉을 구현합니다.
3. **동일 그룹**: 같은 그룹에 속한 메모들끼리 부유하며 성단을 형성 (은은한 연결선).
4. **공통 태그**: 같은 태그를 공유하는 메모들 사이에 인력이 작용하여 근접 배치.
### 2.2 이미지 경로 보정 (Path Resolution)
### 2.2 메타데이터 보호 및 이미지 보정
- **후처리 로직**: 마크다운 본문의 `img src="photo.png"`와 같은 상대 경로를 `fixImagePaths` 유틸리티가 감지하여 `/api/download/photo.png`로 자동 보정합니다.
- **즉시 수정 (e-key Logic)**: 전역 `keydown` 리스너가 마우스가 위치한 메모 ID(`window.hoveredMemoId`)를 감지하여 즉시 수정 모달을 호출합니다.
---
+4 -1
View File
@@ -12,6 +12,7 @@
- **`Ctrl + Shift + E`**: 🔍 **지식 탐색기** (사이드바 드로어 열기)
- **`Ctrl + Shift + C`**: 📅 **캘린더 토글** (사이드바 미니 달력)
- **`Ctrl + Shift + Q`** 또는 **`ESC`**: 🚪 **닫기**
- **`e` (Mouse Over)**: ⚡ **즉시 수정** (메모 카드 위에 마우스를 올리고 누름)
---
@@ -23,7 +24,9 @@
---
## 🖱️ 마우스 인터렉션
- **Alt + 클릭**: 🪄 **즉시 수정**
- **#ID 클릭**: 📋 **링크 복사** (`[[#ID]]`)
- **Alt + #ID 클릭**: 🔗 **비주얼 노드 링커** (시각적 연결 시작)
- **카드 드래그 앤 드롭**: 📥 **링크 삽입** (작성기 위로 드래그 시)
- **클릭**: 상세 보기
---
+8 -2
View File
@@ -24,8 +24,11 @@
## ✍️ 3. 메모 작성 및 스타일링
### 3.1 지식 연결 문법 (`[[#ID]]`)
메모 간의 명시적인 지식을 연결하려면 본문에 샵(#) 기호와 메모 번호를 사용하세요.
### 3.1 지식 연결 및 자동화 (`[[#ID]]`)
메모 간의 명시적인 지식을 연결하는 방법은 세 가지가 있습니다.
- **비주얼 노드 링커 (Alt + 클릭)**: 메모 카드의 #ID를 `Alt` 키와 함께 누르면 선이 나타납니다. 다른 메모의 #ID를 클릭하면 자동으로 본문에 `[[#ID]]` 링크가 삽입됩니다.
- **드래그 앤 드롭 연결**: 메모 카드를 작성기(Composer)로 직접 드래그하여 원하는 위치에 놓으면 자동으로 링크가 삽입됩니다.
- **수동 입력 및 복사**: 본문에 직접 `[[#12]]`와 같이 입력하거나, 카드의 #ID를 단순 클릭하여 복제된 링크를 붙여넣으세요.
- **효과**: 뷰어에서 클릭 시 해당 메모로 바로 이동하며, 지식 네뷸라 상에 강력한 연결선이 형성됩니다.
### 3.2 컬러 텍스트 (Color Syntax)
@@ -34,6 +37,9 @@
### 3.3 V5 메타데이터 쉴드
시스템이 생성하는 하단 메타데이터는 자동으로 관리되므로 본문 작성에만 집중하면 됩니다.
### 3.4 고속 편집 (Instant Edit)
메어 카드 위에 마우스를 올리고 `e` 키를 누르면 본문 모달을 거치지 않고 즉시 수정 모드로 진입합니다. 작업의 흐름을 끊지 않고 빠르게 메모를 다듬을 수 있습니다.
---
## ⚙️ 4. 설정 및 커스터마이징 (v1.5 신규)