하이라이트 색상 문제 해결 및 다중 하이라이트 렌더링 개선
주요 수정사항: - 하이라이트 생성 시 color → highlight_color 필드명 수정으로 색상 전달 문제 해결 - 분홍색을 더 연하게 변경하여 글씨 가독성 향상 - 다중 하이라이트 렌더링을 위아래 균등 분할로 개선 - CSS highlight-span 클래스 추가 및 색상 적용 강화 - 하이라이트 생성/렌더링 과정에 상세한 디버깅 로그 추가 UI 개선: - 단일 하이라이트: 선택한 색상으로 정확히 표시 - 다중 하이라이트: 위아래로 균등하게 색상 분할 표시 - 메모 입력 모달에서 선택된 텍스트 표시 개선 버그 수정: - 프론트엔드-백엔드 API 스키마 불일치 해결 - CSS 스타일 우선순위 문제 해결 - 하이라이트 색상이 노랑색으로만 표시되던 문제 해결
This commit is contained in:
Hyungi Ahn
139
VIEWER_REFACTORING.md
Normal file
139
VIEWER_REFACTORING.md
Normal file
@@ -0,0 +1,139 @@
|
||||
# Viewer.js 리팩토링 계획
|
||||
|
||||
## 📊 현재 상황
|
||||
- **파일 크기**: 3,712줄 (너무 큼!)
|
||||
- **주요 문제**: 유지보수 어려움, 기능 추가 시 복잡도 증가
|
||||
- **목표**: 모듈화를 통한 코드 분리 및 관리성 향상
|
||||
|
||||
## 🏗️ 분리 구조
|
||||
|
||||
```
|
||||
frontend/static/js/viewer/
|
||||
├── core/
|
||||
│ ├── viewer-core.js # 메인 Alpine.js 컴포넌트
|
||||
│ └── document-loader.js # 문서/노트 로딩
|
||||
├── features/
|
||||
│ ├── highlight-manager.js # 하이라이트/메모 관리
|
||||
│ ├── link-manager.js # 문서링크/백링크 관리
|
||||
│ ├── bookmark-manager.js # 북마크 관리
|
||||
│ └── ui-manager.js # 모달/패널/검색 UI
|
||||
└── utils/
|
||||
├── text-utils.js # 텍스트 선택/조작 유틸
|
||||
└── dom-utils.js # DOM 조작 유틸
|
||||
```
|
||||
|
||||
## 📦 모듈별 책임
|
||||
|
||||
### 1. 📄 DocumentLoader (`core/document-loader.js`)
|
||||
**책임**: 문서/노트 로딩 및 네비게이션
|
||||
- `loadDocument()` - HTML 문서 로딩
|
||||
- `loadNote()` - 노트 문서 로딩
|
||||
- `loadNavigation()` - 네비게이션 정보 로딩
|
||||
- `checkForTextHighlight()` - URL 파라미터 기반 하이라이트
|
||||
|
||||
### 2. 🎨 HighlightManager (`features/highlight-manager.js`)
|
||||
**책임**: 하이라이트 및 메모 관리
|
||||
- `loadHighlights()` - 하이라이트 데이터 로딩
|
||||
- `loadNotes()` - 메모 데이터 로딩
|
||||
- `renderHighlights()` - 하이라이트 렌더링
|
||||
- `createHighlightWithColor()` - 하이라이트 생성
|
||||
- `saveNote()` - 메모 저장
|
||||
- `deleteNote()` - 메모 삭제
|
||||
|
||||
### 3. 🔗 LinkManager (`features/link-manager.js`)
|
||||
**책임**: 문서링크 및 백링크 관리
|
||||
- `loadDocumentLinks()` - 문서링크 로딩
|
||||
- `loadBacklinks()` - 백링크 로딩
|
||||
- `renderDocumentLinks()` - 문서링크 렌더링
|
||||
- `renderBacklinkHighlights()` - 백링크 하이라이트 렌더링
|
||||
- `createLink()` - 링크 생성
|
||||
- `navigateToLink()` - 링크 네비게이션
|
||||
|
||||
### 4. 📌 BookmarkManager (`features/bookmark-manager.js`)
|
||||
**책임**: 북마크 관리
|
||||
- `loadBookmarks()` - 북마크 데이터 로딩
|
||||
- `saveBookmark()` - 북마크 저장
|
||||
- `deleteBookmark()` - 북마크 삭제
|
||||
- `navigateToBookmark()` - 북마크로 이동
|
||||
|
||||
### 5. 🎛️ UIManager (`features/ui-manager.js`)
|
||||
**책임**: 모달, 패널, 검색 UI 관리
|
||||
- `toggleFeatureMenu()` - 기능 메뉴 토글
|
||||
- `showModal()` / `hideModal()` - 모달 관리
|
||||
- `handleSearch()` - 검색 기능
|
||||
- `toggleLanguage()` - 언어 전환
|
||||
- `setupTextSelectionMode()` - 텍스트 선택 모드
|
||||
|
||||
### 6. 🔧 ViewerCore (`core/viewer-core.js`)
|
||||
**책임**: Alpine.js 컴포넌트 및 모듈 통합
|
||||
- Alpine.js 상태 관리
|
||||
- 모듈 간 통신 조정
|
||||
- 초기화 및 라이프사이클 관리
|
||||
- 전역 이벤트 처리
|
||||
|
||||
### 7. 🛠️ Utils
|
||||
**책임**: 공통 유틸리티 함수
|
||||
- `text-utils.js`: 텍스트 선택, 범위 조작
|
||||
- `dom-utils.js`: DOM 조작, 요소 검색
|
||||
|
||||
## 🔄 연결관계도
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[ViewerCore] --> B[DocumentLoader]
|
||||
A --> C[HighlightManager]
|
||||
A --> D[LinkManager]
|
||||
A --> E[BookmarkManager]
|
||||
A --> F[UIManager]
|
||||
|
||||
B --> G[text-utils]
|
||||
C --> G
|
||||
C --> H[dom-utils]
|
||||
D --> G
|
||||
D --> H
|
||||
E --> G
|
||||
F --> H
|
||||
|
||||
C -.-> D[하이라이트↔링크 연동]
|
||||
D -.-> C[백링크↔하이라이트 연동]
|
||||
```
|
||||
|
||||
## 📋 마이그레이션 순서
|
||||
|
||||
1. **📄 DocumentLoader** (가장 독립적)
|
||||
2. **🎨 HighlightManager** (백링크와 연관성 적음)
|
||||
3. **📌 BookmarkManager** (독립적 기능)
|
||||
4. **🎛️ UIManager** (UI 관련 기능)
|
||||
5. **🔗 LinkManager** (백링크 개선 예정이므로 마지막)
|
||||
6. **🔧 ViewerCore** (모든 모듈 통합)
|
||||
|
||||
## 🔍 현재 코드 의존성 분석
|
||||
|
||||
### 핵심 함수들:
|
||||
- **초기화**: `init()`, `loadDocumentData()`
|
||||
- **문서 로딩**: `loadDocument()`, `loadNote()`, `loadNavigation()`
|
||||
- **하이라이트**: `renderHighlights()`, `createHighlight()`, `handleTextSelection()`
|
||||
- **메모**: `saveNote()`, `deleteNote()`, `createMemoForHighlight()`
|
||||
- **북마크**: `addBookmark()`, `saveBookmark()`, `deleteBookmark()`
|
||||
- **링크**: `renderDocumentLinks()`, `renderBacklinkHighlights()`, `loadBacklinks()`
|
||||
- **UI**: `toggleLanguage()`, `searchInDocument()`, `goBack()`
|
||||
|
||||
### 상호 의존성:
|
||||
1. **하이라이트 ↔ 메모**: `createMemoForHighlight()` 연결
|
||||
2. **하이라이트 ↔ 링크**: `renderBacklinkHighlights()` 연결
|
||||
3. **문서로딩 → 모든 기능**: 초기화 후 모든 기능 활성화
|
||||
4. **UI → 모든 기능**: 모달/패널에서 모든 기능 호출
|
||||
|
||||
## ⚠️ 주의사항
|
||||
|
||||
- **점진적 마이그레이션**: 한 번에 하나씩 분리
|
||||
- **기능 테스트**: 각 단계마다 기능 동작 확인
|
||||
- **의존성 관리**: 모듈 간 순환 참조 방지
|
||||
- **Alpine.js 호환성**: 기존 템플릿과의 호환성 유지
|
||||
|
||||
## 🎯 기대 효과
|
||||
|
||||
- **유지보수성 향상**: 기능별 코드 분리
|
||||
- **개발 효율성**: 병렬 개발 가능
|
||||
- **테스트 용이성**: 모듈별 단위 테스트
|
||||
- **확장성**: 새 기능 추가 시 영향 범위 최소화
|
||||
Reference in New Issue
Block a user