5d4465b15c
주요 수정사항: - 하이라이트 생성 시 color → highlight_color 필드명 수정으로 색상 전달 문제 해결 - 분홍색을 더 연하게 변경하여 글씨 가독성 향상 - 다중 하이라이트 렌더링을 위아래 균등 분할로 개선 - CSS highlight-span 클래스 추가 및 색상 적용 강화 - 하이라이트 생성/렌더링 과정에 상세한 디버깅 로그 추가 UI 개선: - 단일 하이라이트: 선택한 색상으로 정확히 표시 - 다중 하이라이트: 위아래로 균등하게 색상 분할 표시 - 메모 입력 모달에서 선택된 텍스트 표시 개선 버그 수정: - 프론트엔드-백엔드 API 스키마 불일치 해결 - CSS 스타일 우선순위 문제 해결 - 하이라이트 색상이 노랑색으로만 표시되던 문제 해결
5.0 KiB
5.0 KiB
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 조작, 요소 검색
🔄 연결관계도
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[백링크↔하이라이트 연동]
📋 마이그레이션 순서
- 📄 DocumentLoader (가장 독립적)
- 🎨 HighlightManager (백링크와 연관성 적음)
- 📌 BookmarkManager (독립적 기능)
- 🎛️ UIManager (UI 관련 기능)
- 🔗 LinkManager (백링크 개선 예정이므로 마지막)
- 🔧 ViewerCore (모든 모듈 통합)
🔍 현재 코드 의존성 분석
핵심 함수들:
- 초기화:
init(),loadDocumentData() - 문서 로딩:
loadDocument(),loadNote(),loadNavigation() - 하이라이트:
renderHighlights(),createHighlight(),handleTextSelection() - 메모:
saveNote(),deleteNote(),createMemoForHighlight() - 북마크:
addBookmark(),saveBookmark(),deleteBookmark() - 링크:
renderDocumentLinks(),renderBacklinkHighlights(),loadBacklinks() - UI:
toggleLanguage(),searchInDocument(),goBack()
상호 의존성:
- 하이라이트 ↔ 메모:
createMemoForHighlight()연결 - 하이라이트 ↔ 링크:
renderBacklinkHighlights()연결 - 문서로딩 → 모든 기능: 초기화 후 모든 기능 활성화
- UI → 모든 기능: 모달/패널에서 모든 기능 호출
⚠️ 주의사항
- 점진적 마이그레이션: 한 번에 하나씩 분리
- 기능 테스트: 각 단계마다 기능 동작 확인
- 의존성 관리: 모듈 간 순환 참조 방지
- Alpine.js 호환성: 기존 템플릿과의 호환성 유지
🎯 기대 효과
- 유지보수성 향상: 기능별 코드 분리
- 개발 효율성: 병렬 개발 가능
- 테스트 용이성: 모듈별 단위 테스트
- 확장성: 새 기능 추가 시 영향 범위 최소화