diff --git a/VIEWER_REFACTORING.md b/VIEWER_REFACTORING.md
new file mode 100644
index 0000000..c6b6519
--- /dev/null
+++ b/VIEWER_REFACTORING.md
@@ -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 호환성**: 기존 템플릿과의 호환성 유지
+
+## 🎯 기대 효과
+
+- **유지보수성 향상**: 기능별 코드 분리
+- **개발 효율성**: 병렬 개발 가능
+- **테스트 용이성**: 모듈별 단위 테스트
+- **확장성**: 새 기능 추가 시 영향 범위 최소화
diff --git a/backend/src/api/routes/document_links.py b/backend/src/api/routes/document_links.py
index 8a44f4b..7d0199b 100644
--- a/backend/src/api/routes/document_links.py
+++ b/backend/src/api/routes/document_links.py
@@ -88,6 +88,16 @@ async def create_document_link(
db: AsyncSession = Depends(get_db)
):
"""문서 링크 생성"""
+ print(f"🔗 링크 생성 요청 - 문서 ID: {document_id}")
+ print(f"📋 링크 데이터: {link_data}")
+ print(f"🎯 target_text: '{link_data.target_text}'")
+ print(f"🎯 target_start_offset: {link_data.target_start_offset}")
+ print(f"🎯 target_end_offset: {link_data.target_end_offset}")
+ print(f"🎯 link_type: {link_data.link_type}")
+
+ if link_data.link_type == 'text_fragment' and not link_data.target_text:
+ print("🚨 CRITICAL: text_fragment 링크인데 target_text가 없습니다!")
+
# 출발 문서 확인
result = await db.execute(select(Document).where(Document.id == document_id))
source_doc = result.scalar_one_or_none()
@@ -150,6 +160,13 @@ async def create_document_link(
await db.commit()
await db.refresh(new_link)
+ print(f"✅ 링크 생성 완료: {source_doc.title} -> {target_doc.title}")
+ print(f" - 링크 타입: {new_link.link_type}")
+ print(f" - 선택된 텍스트: {new_link.selected_text}")
+ print(f" - 대상 텍스트: {new_link.target_text}")
+
+ # 백링크는 자동으로 생성되지 않음 - 기존 링크를 역방향으로 조회하는 방식 사용
+
# 응답 데이터 구성
return DocumentLinkResponse(
id=str(new_link.id),
@@ -402,14 +419,17 @@ class BacklinkResponse(BaseModel):
source_document_id: str
source_document_title: str
source_document_book_id: Optional[str]
- target_document_id: str # 추가
- target_document_title: str # 추가
- selected_text: str
- start_offset: int
- end_offset: int
+ target_document_id: str
+ target_document_title: str
+ selected_text: str # 소스 문서에서 선택한 텍스트
+ start_offset: int # 소스 문서 오프셋
+ end_offset: int # 소스 문서 오프셋
link_text: Optional[str]
description: Optional[str]
link_type: str
+ target_text: Optional[str] # 🎯 타겟 문서의 텍스트 (백링크 렌더링용)
+ target_start_offset: Optional[int] # 🎯 타겟 문서 오프셋 (백링크 렌더링용)
+ target_end_offset: Optional[int] # 🎯 타겟 문서 오프셋 (백링크 렌더링용)
created_at: str
class Config:
@@ -465,7 +485,9 @@ async def get_document_backlinks(
for link, source_doc, book in result.fetchall():
print(f"📋 백링크 발견: {source_doc.title} -> {document.title}")
- print(f" - 선택된 텍스트: {link.selected_text}")
+ print(f" - 소스 텍스트 (selected_text): {link.selected_text}")
+ print(f" - 타겟 텍스트 (target_text): {link.target_text}")
+ print(f" - 타겟 오프셋: {link.target_start_offset}-{link.target_end_offset}")
print(f" - 링크 타입: {link.link_type}")
backlinks.append(BacklinkResponse(
@@ -473,14 +495,17 @@ async def get_document_backlinks(
source_document_id=str(link.source_document_id),
source_document_title=source_doc.title,
source_document_book_id=str(book.id) if book else None,
- target_document_id=str(link.target_document_id), # 추가
- target_document_title=document.title, # 추가
- selected_text=link.selected_text,
- start_offset=link.start_offset,
- end_offset=link.end_offset,
+ target_document_id=str(link.target_document_id),
+ target_document_title=document.title,
+ selected_text=link.selected_text, # 소스 문서에서 선택한 텍스트 (참고용)
+ start_offset=link.start_offset, # 소스 문서 오프셋 (참고용)
+ end_offset=link.end_offset, # 소스 문서 오프셋 (참고용)
link_text=link.link_text,
description=link.description,
link_type=link.link_type,
+ target_text=link.target_text, # 🎯 타겟 문서의 텍스트 (백링크 렌더링용)
+ target_start_offset=link.target_start_offset, # 🎯 타겟 문서 오프셋 (백링크 렌더링용)
+ target_end_offset=link.target_end_offset, # 🎯 타겟 문서 오프셋 (백링크 렌더링용)
created_at=link.created_at.isoformat()
))
diff --git a/frontend/static/js/api.js b/frontend/static/js/api.js
index c6ca692..2788ea1 100644
--- a/frontend/static/js/api.js
+++ b/frontend/static/js/api.js
@@ -3,12 +3,14 @@
*/
class DocumentServerAPI {
constructor() {
- // nginx를 통한 프록시 API (24100 포트)
- this.baseURL = 'http://localhost:24100/api';
+ // nginx 프록시를 통한 API 호출 (절대 경로로 강제)
+ this.baseURL = `${window.location.origin}/api`;
this.token = localStorage.getItem('access_token');
console.log('🌐 API Base URL (NGINX PROXY):', this.baseURL);
- console.log('🔧 nginx 프록시 환경 설정 완료 - 버전 2025012607');
+ console.log('🔧 현재 브라우저 위치:', window.location.origin);
+ console.log('🔧 현재 브라우저 전체 URL:', window.location.href);
+ console.log('🔧 nginx 프록시 환경 설정 완료 - 상대 경로 사용');
}
// 토큰 설정
@@ -36,16 +38,25 @@ class DocumentServerAPI {
// GET 요청
async get(endpoint, params = {}) {
- const url = new URL(`${this.baseURL}${endpoint}`, window.location.origin);
- Object.keys(params).forEach(key => {
- if (params[key] !== null && params[key] !== undefined) {
- url.searchParams.append(key, params[key]);
- }
- });
+ // URL 생성 시 포트 유지를 위해 단순 문자열 연결 사용
+ let url = `${this.baseURL}${endpoint}`;
+
+ // 쿼리 파라미터 추가
+ if (Object.keys(params).length > 0) {
+ const searchParams = new URLSearchParams();
+ Object.keys(params).forEach(key => {
+ if (params[key] !== null && params[key] !== undefined) {
+ searchParams.append(key, params[key]);
+ }
+ });
+ url += `?${searchParams.toString()}`;
+ }
const response = await fetch(url, {
method: 'GET',
headers: this.getHeaders(),
+ mode: 'cors',
+ credentials: 'same-origin'
});
return this.handleResponse(response);
@@ -53,21 +64,41 @@ class DocumentServerAPI {
// POST 요청
async post(endpoint, data = {}) {
- const response = await fetch(`${this.baseURL}${endpoint}`, {
+ const url = `${this.baseURL}${endpoint}`;
+ console.log('🌐 POST 요청 시작');
+ console.log(' - baseURL:', this.baseURL);
+ console.log(' - endpoint:', endpoint);
+ console.log(' - 최종 URL:', url);
+ console.log(' - 데이터:', data);
+
+ console.log('🔍 fetch 호출 직전 URL 검증:', url);
+ console.log('🔍 URL 타입:', typeof url);
+ console.log('🔍 URL 절대/상대 여부:', url.startsWith('http') ? '절대경로' : '상대경로');
+
+ const response = await fetch(url, {
method: 'POST',
headers: this.getHeaders(),
body: JSON.stringify(data),
+ mode: 'cors',
+ credentials: 'same-origin'
});
+ console.log('📡 POST 응답 받음:', response.url, response.status);
+ console.log('📡 실제 요청된 URL:', response.url);
return this.handleResponse(response);
}
// PUT 요청
async put(endpoint, data = {}) {
- const response = await fetch(`${this.baseURL}${endpoint}`, {
+ const url = `${this.baseURL}${endpoint}`;
+ console.log('🌐 PUT 요청 URL:', url); // 디버깅용
+
+ const response = await fetch(url, {
method: 'PUT',
headers: this.getHeaders(),
body: JSON.stringify(data),
+ mode: 'cors',
+ credentials: 'same-origin'
});
return this.handleResponse(response);
@@ -75,9 +106,14 @@ class DocumentServerAPI {
// DELETE 요청
async delete(endpoint) {
- const response = await fetch(`${this.baseURL}${endpoint}`, {
+ const url = `${this.baseURL}${endpoint}`;
+ console.log('🌐 DELETE 요청 URL:', url); // 디버깅용
+
+ const response = await fetch(url, {
method: 'DELETE',
headers: this.getHeaders(),
+ mode: 'cors',
+ credentials: 'same-origin'
});
return this.handleResponse(response);
@@ -85,15 +121,20 @@ class DocumentServerAPI {
// 파일 업로드
async uploadFile(endpoint, formData) {
+ const url = `${this.baseURL}${endpoint}`;
+ console.log('🌐 UPLOAD 요청 URL:', url); // 디버깅용
+
const headers = {};
if (this.token) {
headers['Authorization'] = `Bearer ${this.token}`;
}
- const response = await fetch(`${this.baseURL}${endpoint}`, {
+ const response = await fetch(url, {
method: 'POST',
headers: headers,
body: formData,
+ mode: 'cors',
+ credentials: 'same-origin'
});
return this.handleResponse(response);
@@ -206,6 +247,7 @@ class DocumentServerAPI {
// 하이라이트 관련 API
async createHighlight(highlightData) {
+ console.log('🎨 createHighlight 메서드 호출됨:', highlightData);
return await this.post('/highlights/', highlightData);
}
@@ -310,6 +352,7 @@ class DocumentServerAPI {
}
async createHighlight(highlightData) {
+ console.log('🎨 createHighlight 메서드 호출됨:', highlightData);
return await this.post('/highlights/', highlightData);
}
@@ -434,6 +477,7 @@ class DocumentServerAPI {
}
async createHighlight(highlightData) {
+ console.log('🎨 createHighlight 메서드 호출됨:', highlightData);
return await this.post('/highlights/', highlightData);
}
diff --git a/frontend/static/js/book-documents.js b/frontend/static/js/book-documents.js
index c2cfdda..b20ce4f 100644
--- a/frontend/static/js/book-documents.js
+++ b/frontend/static/js/book-documents.js
@@ -159,8 +159,8 @@ window.bookDocumentsApp = () => ({
// 현재 페이지 정보를 세션 스토리지에 저장
sessionStorage.setItem('previousPage', 'book-documents.html');
- // 뷰어로 이동
- window.open(`/viewer.html?id=${documentId}&from=book`, '_blank');
+ // 뷰어로 이동 - 같은 창에서 이동
+ window.location.href = `/viewer.html?id=${documentId}&from=book`;
},
// 서적 편집 페이지 열기
diff --git a/frontend/static/js/main.js b/frontend/static/js/main.js
index 7bdd7d3..d3a3839 100644
--- a/frontend/static/js/main.js
+++ b/frontend/static/js/main.js
@@ -289,9 +289,9 @@ window.documentApp = () => ({
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
sessionStorage.setItem('previousPage', currentPage);
- // from 파라미터 추가
+ // from 파라미터 추가 - 같은 창에서 이동
const fromParam = currentPage === 'hierarchy.html' ? 'hierarchy' : 'index';
- window.open(`/viewer.html?id=${documentId}&from=${fromParam}`, '_blank');
+ window.location.href = `/viewer.html?id=${documentId}&from=${fromParam}`;
},
// 서적의 문서들 보기
diff --git a/frontend/static/js/viewer.js b/frontend/static/js/viewer.js.backup
similarity index 84%
rename from frontend/static/js/viewer.js
rename to frontend/static/js/viewer.js.backup
index 217b195..c2e9f43 100644
--- a/frontend/static/js/viewer.js
+++ b/frontend/static/js/viewer.js.backup
@@ -48,13 +48,19 @@ window.documentViewer = () => ({
showLinkModal: false,
showNotesModal: false,
showBookmarksModal: false,
- showBacklinksModal: false,
showLinksModal: false,
+ showBacklinksModal: false,
+
+ // 기능 메뉴 상태
activeFeatureMenu: null,
- activeMode: null, // 'link', 'memo', 'bookmark' 등
- textSelectionHandler: null,
+
+ // 링크 관련 데이터
availableBooks: [], // 사용 가능한 서적 목록
filteredDocuments: [], // 필터링된 문서 목록
+
+ // 모드 및 핸들러
+ activeMode: null, // 'link', 'memo', 'bookmark' 등
+ textSelectionHandler: null,
editingNote: null,
editingBookmark: null,
editingLink: null,
@@ -78,18 +84,36 @@ window.documentViewer = () => ({
end_offset: 0,
link_text: '',
description: '',
- // 고급 링크 기능
- link_type: 'document',
+ // 고급 링크 기능 (무조건 텍스트 선택만 지원)
+ link_type: 'text_fragment',
target_text: '',
target_start_offset: 0,
- target_end_offset: 0
+ target_end_offset: 0,
+ // 서적 범위 선택
+ book_scope: 'same', // 'same' 또는 'other'
+ target_book_id: ''
},
// 초기화
async init() {
+ // 중복 초기화 방지
+ if (this._initialized) {
+ console.log('⚠️ 이미 초기화됨, 중복 실행 방지');
+ return;
+ }
+ this._initialized = true;
+
+ console.log('🚀 DocumentViewer 초기화 시작');
+
// 전역 인스턴스 설정 (말풍선에서 함수 호출용)
window.documentViewerInstance = this;
+ // 모듈 초기화
+ this.documentLoader = new DocumentLoader(api);
+ this.highlightManager = new HighlightManager(api);
+ this.bookmarkManager = new BookmarkManager(api);
+ this.linkManager = new LinkManager(api);
+
// URL에서 문서 ID 추출
const urlParams = new URLSearchParams(window.location.search);
this.documentId = urlParams.get('id');
@@ -134,15 +158,15 @@ window.documentViewer = () => ({
try {
if (this.contentType === 'note') {
- await this.loadNote();
+ this.document = await this.documentLoader.loadNote(this.documentId);
} else {
- await this.loadDocument();
- await this.loadNavigation();
+ this.document = await this.documentLoader.loadDocument(this.documentId);
+ this.navigation = await this.documentLoader.loadNavigation(this.documentId);
}
await this.loadDocumentData();
// URL 파라미터 확인해서 특정 텍스트로 스크롤
- this.checkForTextHighlight();
+ this.documentLoader.checkForTextHighlight();
} catch (error) {
console.error('Failed to load document:', error);
@@ -155,163 +179,11 @@ window.documentViewer = () => ({
this.filterNotes();
},
- // 노트 로드
- async loadNote() {
- try {
- console.log('📝 노트 로드 시작:', this.documentId);
-
- // 백엔드에서 노트 정보 가져오기
- this.document = await api.get(`/note-documents/${this.documentId}`);
-
- // 노트 제목 설정
- document.title = `${this.document.title} - Document Server`;
-
- // 노트 내용을 HTML로 설정
- const contentElement = document.getElementById('document-content');
- if (contentElement && this.document.content) {
- contentElement.innerHTML = this.document.content;
- }
-
- console.log('📝 노트 로드 완료:', this.document.title);
-
- } catch (error) {
- console.error('노트 로드 실패:', error);
- throw new Error('노트를 불러올 수 없습니다');
- }
- },
- // 문서 로드 (실제 API 연동)
- async loadDocument() {
- try {
- // 백엔드에서 문서 정보 가져오기
- this.document = await api.getDocument(this.documentId);
-
- // HTML 파일 경로 구성 (백엔드 서버를 통해 접근)
- const htmlPath = this.document.html_path;
- const fileName = htmlPath.split('/').pop();
- const response = await fetch(`http://localhost:24102/uploads/documents/${fileName}`);
-
- if (!response.ok) {
- throw new Error('문서 파일을 불러올 수 없습니다');
- }
-
- const htmlContent = await response.text();
- document.getElementById('document-content').innerHTML = htmlContent;
-
- // 페이지 제목 업데이트
- document.title = `${this.document.title} - Document Server`;
-
- // 문서 내 스크립트 오류 방지를 위한 전역 함수들 정의
- this.setupDocumentScriptHandlers();
-
- } catch (error) {
- console.error('Document load error:', error);
-
- // 백엔드 연결 실패시 목업 데이터로 폴백
- console.warn('Using fallback mock data');
- this.document = {
- id: this.documentId,
- title: 'Document Server 테스트 문서',
- description: '하이라이트와 메모 기능을 테스트하기 위한 샘플 문서입니다.',
- uploader_name: '관리자'
- };
-
- // 기본 HTML 내용 표시
- document.getElementById('document-content').innerHTML = `
- 테스트 문서
- 이 문서는 Document Server의 하이라이트 및 메모 기능을 테스트하기 위한 샘플입니다.
- 텍스트를 선택하면 하이라이트를 추가할 수 있습니다.
- 주요 기능
-
- - 텍스트 선택 후 하이라이트 생성
- - 하이라이트에 메모 추가
- - 메모 검색 및 관리
- - 책갈피 기능
-
- 테스트 단락
- 이것은 하이라이트 테스트를 위한 긴 단락입니다. 이 텍스트를 선택하여 하이라이트를 만들어보세요.
- 하이라이트를 만든 후에는 메모를 추가할 수 있습니다. 메모는 나중에 검색하고 편집할 수 있습니다.
- 또 다른 단락입니다. 여러 개의 하이라이트를 만들어서 메모 기능을 테스트해보세요.
- 각 하이라이트는 고유한 색상을 가질 수 있으며, 연결된 메모를 통해 중요한 정보를 기록할 수 있습니다.
- `;
-
- // 폴백 모드에서도 스크립트 핸들러 설정
- this.setupDocumentScriptHandlers();
-
- // 디버깅을 위한 전역 함수 노출
- window.testHighlight = () => {
- console.log('Test highlight function called');
- const selection = window.getSelection();
- console.log('Current selection:', selection.toString());
- this.handleTextSelection();
- };
- }
- },
- // 문서 내 스크립트 핸들러 설정
- setupDocumentScriptHandlers() {
- // 업로드된 HTML 문서에서 사용할 수 있는 전역 함수들 정의
-
- // 언어 토글 함수 (많은 문서에서 사용)
- window.toggleLanguage = function() {
- const koreanContent = document.getElementById('korean-content');
- const englishContent = document.getElementById('english-content');
-
- if (koreanContent && englishContent) {
- // ID 기반 토글 (압력용기 매뉴얼 등)
- if (koreanContent.style.display === 'none') {
- koreanContent.style.display = 'block';
- englishContent.style.display = 'none';
- } else {
- koreanContent.style.display = 'none';
- englishContent.style.display = 'block';
- }
- } else {
- // 클래스 기반 토글 (다른 문서들)
- const koreanElements = document.querySelectorAll('.korean, .ko');
- const englishElements = document.querySelectorAll('.english, .en');
-
- koreanElements.forEach(el => {
- el.style.display = el.style.display === 'none' ? 'block' : 'none';
- });
-
- englishElements.forEach(el => {
- el.style.display = el.style.display === 'none' ? 'block' : 'none';
- });
- }
-
- // 토글 버튼 텍스트 업데이트
- const toggleButton = document.querySelector('.language-toggle');
- if (toggleButton && koreanContent) {
- const isKoreanVisible = koreanContent.style.display !== 'none';
- toggleButton.textContent = isKoreanVisible ? '🌐 English' : '🌐 한국어';
- }
- };
-
- // 기타 공통 함수들 (필요시 추가)
- window.showSection = function(sectionId) {
- const section = document.getElementById(sectionId);
- if (section) {
- section.scrollIntoView({ behavior: 'smooth' });
- }
- };
-
- // 인쇄 함수
- window.printDocument = function() {
- window.print();
- };
-
- // 문서 내 링크 클릭 시 새 창에서 열기 방지
- const links = document.querySelectorAll('#document-content a[href^="http"]');
- links.forEach(link => {
- link.addEventListener('click', (e) => {
- e.preventDefault();
- if (confirm('외부 링크로 이동하시겠습니까?\n' + link.href)) {
- window.open(link.href, '_blank');
- }
- });
- });
- },
+
+
+
// 문서 관련 데이터 로드
async loadDocumentData() {
@@ -319,52 +191,65 @@ window.documentViewer = () => ({
console.log('Loading document data for:', this.documentId, 'type:', this.contentType);
if (this.contentType === 'note') {
- // 노트의 경우: 노트용 API 호출
+ // 노트의 경우: HighlightManager 사용
console.log('📝 노트 데이터 로드 중...');
const [highlights, notes] = await Promise.all([
- api.get(`/note/${this.documentId}/highlights`).catch(() => []),
- api.get(`/note/${this.documentId}/notes`).catch(() => [])
+ this.highlightManager.loadHighlights(this.documentId, this.contentType),
+ this.highlightManager.loadNotes(this.documentId, this.contentType)
]);
- this.highlights = highlights || [];
- this.notes = notes || [];
+ this.highlights = highlights;
+ this.notes = notes;
this.bookmarks = []; // 노트에서는 북마크 미지원
this.documentLinks = []; // 노트에서는 링크 미지원 (향후 구현 예정)
this.backlinks = [];
console.log('📝 노트 데이터 로드됨:', { highlights: this.highlights.length, notes: this.notes.length });
+ // HighlightManager에 데이터 동기화
+ this.highlightManager.highlights = this.highlights;
+ this.highlightManager.notes = this.notes;
+
// 하이라이트 렌더링
- this.renderHighlights();
+ this.highlightManager.renderHighlights();
return;
}
- // 문서의 경우: 기존 로직
- const [highlights, notes, bookmarks, documentLinks] = await Promise.all([
- api.getDocumentHighlights(this.documentId).catch(() => []),
- api.getDocumentNotes(this.documentId).catch(() => []),
- api.getDocumentBookmarks(this.documentId).catch(() => []),
- api.getDocumentLinks(this.documentId).catch(() => [])
+ // 문서의 경우: 모듈별 로딩
+ const [highlights, notes, bookmarks, documentLinks, backlinks] = await Promise.all([
+ this.highlightManager.loadHighlights(this.documentId, this.contentType),
+ this.highlightManager.loadNotes(this.documentId, this.contentType),
+ this.bookmarkManager.loadBookmarks(this.documentId),
+ this.linkManager.loadDocumentLinks(this.documentId),
+ this.linkManager.loadBacklinks(this.documentId)
]);
- this.highlights = highlights || [];
- this.notes = notes || [];
+ this.highlights = highlights;
+ this.notes = notes;
this.bookmarks = bookmarks || [];
this.documentLinks = documentLinks || [];
+ this.backlinks = backlinks || [];
console.log('Loaded data:', { highlights: this.highlights.length, notes: this.notes.length, bookmarks: this.bookmarks.length });
+ // 모듈에 데이터 동기화
+ this.highlightManager.highlights = this.highlights;
+ this.highlightManager.notes = this.notes;
+ this.bookmarkManager.bookmarks = this.bookmarks;
+ this.linkManager.documentLinks = this.documentLinks;
+ this.linkManager.backlinks = this.backlinks;
+
// 하이라이트 렌더링
- this.renderHighlights();
+ this.highlightManager.renderHighlights();
- // 백링크 렌더링 (이 문서를 참조하는 링크들) - 먼저 렌더링
- this.renderBacklinkHighlights();
+ // 백링크 렌더링 (먼저 렌더링)
+ this.linkManager.renderBacklinks();
- // 문서 링크 렌더링 - 백링크 후에 렌더링 (백링크 보호)
- this.renderDocumentLinks();
+ // 문서 링크 렌더링 (백링크 후에 렌더링)
+ this.linkManager.renderDocumentLinks();
- // 백링크 데이터 로딩 (배너 숫자 표시용)
- this.loadBacklinks();
+ // 백링크 배너 숫자 업데이트
+ this.updateBacklinkBanner();
} catch (error) {
console.warn('Some document data failed to load, continuing with empty data:', error);
@@ -374,56 +259,7 @@ window.documentViewer = () => ({
}
},
- // 하이라이트 렌더링 (개선된 버전)
- renderHighlights() {
- const content = document.getElementById('document-content');
-
- // 기존 하이라이트 제거
- content.querySelectorAll('.highlight, .multi-highlight').forEach(el => {
- const parent = el.parentNode;
- parent.replaceChild(document.createTextNode(el.textContent), el);
- parent.normalize();
- });
-
- // 텍스트 위치별로 하이라이트 그룹화
- const positionGroups = this.groupHighlightsByPosition();
-
- // 각 위치 그룹에 대해 하이라이트 적용
- Object.values(positionGroups).forEach(group => {
- this.applyHighlightGroup(group);
- });
- },
- // 위치별로 하이라이트 그룹화
- groupHighlightsByPosition() {
- const groups = {};
-
- this.highlights.forEach(highlight => {
- // 겹치는 하이라이트들을 찾아서 그룹화
- let foundGroup = null;
-
- for (const [key, group] of Object.entries(groups)) {
- const hasOverlap = group.some(h =>
- (highlight.start_offset < h.end_offset && highlight.end_offset > h.start_offset)
- );
-
- if (hasOverlap) {
- foundGroup = key;
- break;
- }
- }
-
- if (foundGroup) {
- groups[foundGroup].push(highlight);
- } else {
- // 새 그룹 생성
- const groupKey = `${highlight.start_offset}-${highlight.end_offset}`;
- groups[groupKey] = [highlight];
- }
- });
-
- return groups;
- },
// 하이라이트 그룹 적용 (여러 색상 지원)
applyHighlightGroup(highlightGroup) {
@@ -601,39 +437,12 @@ window.documentViewer = () => ({
}
},
- // 텍스트 선택 처리
+ // 텍스트 선택 처리 (HighlightManager로 위임)
handleTextSelection() {
- console.log('handleTextSelection called');
- const selection = window.getSelection();
-
- if (selection.rangeCount === 0 || selection.isCollapsed) {
- console.log('No selection or collapsed');
- return;
- }
-
- const range = selection.getRangeAt(0);
- const selectedText = selection.toString().trim();
- console.log('Selected text:', selectedText);
-
- if (selectedText.length < 2) {
- console.log('Text too short');
- return;
- }
-
- // 문서 컨텐츠 내부의 선택인지 확인
- const content = document.getElementById('document-content');
- if (!content.contains(range.commonAncestorContainer)) {
- console.log('Selection not in document content');
- return;
- }
-
- // 선택된 텍스트와 범위 저장
- this.selectedText = selectedText;
- this.selectedRange = range.cloneRange();
-
- console.log('Showing highlight button');
- // 컨텍스트 메뉴 표시 (간단한 버튼)
- this.showHighlightButton(selection);
+ this.highlightManager.handleTextSelection();
+ // 상태 동기화
+ this.selectedText = this.highlightManager.selectedText;
+ this.selectedRange = this.highlightManager.selectedRange;
},
// 하이라이트 버튼 표시
@@ -671,24 +480,13 @@ window.documentViewer = () => ({
},
// 색상 버튼으로 하이라이트 생성
+ // HighlightManager로 위임
createHighlightWithColor(color) {
- console.log('createHighlightWithColor called with color:', color);
-
- // 현재 선택된 텍스트가 있는지 확인
- const selection = window.getSelection();
- if (selection.rangeCount === 0 || selection.isCollapsed) {
- alert('먼저 하이라이트할 텍스트를 선택해주세요.');
- return;
- }
-
- // 색상 설정 후 하이라이트 생성
+ this.highlightManager.selectedHighlightColor = color;
this.selectedHighlightColor = color;
- this.handleTextSelection(); // 텍스트 선택 처리
-
- // 바로 하이라이트 생성 (버튼 클릭 없이)
- setTimeout(() => {
- this.createHighlight();
- }, 100);
+ this.highlightManager.createHighlightWithColor(color);
+ // 상태 동기화
+ this.highlights = this.highlightManager.highlights;
},
// 하이라이트 생성
@@ -735,7 +533,7 @@ window.documentViewer = () => ({
this.highlights.push(highlight);
// 하이라이트 렌더링
- this.renderHighlights();
+ this.highlightManager.renderHighlights();
// 선택 해제
window.getSelection().removeAllRanges();
@@ -893,9 +691,12 @@ window.documentViewer = () => ({
this.showNoteModal = true;
},
- // 메모 저장
+ // 메모 저장 (HighlightManager로 위임)
async saveNote() {
- this.noteLoading = true;
+ await this.highlightManager.saveNote();
+ // 상태 동기화
+ this.notes = this.highlightManager.notes;
+ this.noteLoading = false;
try {
const noteData = {
@@ -928,15 +729,12 @@ window.documentViewer = () => ({
}
},
- // 메모 삭제
+ // 메모 삭제 (HighlightManager로 위임)
async deleteNote(noteId) {
- if (!confirm('이 메모를 삭제하시겠습니까?')) {
- return;
- }
-
try {
- await api.deleteNote(noteId);
- this.notes = this.notes.filter(n => n.id !== noteId);
+ await this.highlightManager.deleteNote(noteId);
+ // 상태 동기화
+ this.notes = this.highlightManager.notes;
this.filterNotes();
} catch (error) {
console.error('Failed to delete note:', error);
@@ -967,30 +765,36 @@ window.documentViewer = () => ({
}
},
- // 책갈피 추가
+ // 책갈피 추가 (BookmarkManager로 위임)
async addBookmark() {
- const scrollPosition = window.scrollY;
- this.bookmarkForm = {
- title: `${this.document.title} - ${new Date().toLocaleString()}`,
- description: ''
- };
- this.currentScrollPosition = scrollPosition;
- this.showBookmarkModal = true;
+ await this.bookmarkManager.addBookmark(this.document);
+ // 상태 동기화
+ this.bookmarkForm = this.bookmarkManager.bookmarkForm;
+ this.currentScrollPosition = this.bookmarkManager.currentScrollPosition;
},
- // 책갈피 편집
+ // 책갈피 편집 (BookmarkManager로 위임)
editBookmark(bookmark) {
- this.editingBookmark = bookmark;
- this.bookmarkForm = {
- title: bookmark.title,
- description: bookmark.description || ''
- };
- this.showBookmarkModal = true;
+ this.bookmarkManager.editBookmark(bookmark);
+ // 상태 동기화
+ this.editingBookmark = this.bookmarkManager.editingBookmark;
+ this.bookmarkForm = this.bookmarkManager.bookmarkForm;
},
- // 책갈피 저장
+ // 책갈피 저장 (BookmarkManager로 위임)
async saveBookmark() {
- this.bookmarkLoading = true;
+ // BookmarkManager의 폼 데이터 동기화
+ this.bookmarkManager.bookmarkForm = this.bookmarkForm;
+ this.bookmarkManager.editingBookmark = this.editingBookmark;
+ this.bookmarkManager.currentScrollPosition = this.currentScrollPosition;
+
+ await this.bookmarkManager.saveBookmark(this.documentId);
+
+ // 상태 동기화
+ this.bookmarks = this.bookmarkManager.bookmarks;
+ this.editingBookmark = this.bookmarkManager.editingBookmark;
+ this.bookmarkForm = this.bookmarkManager.bookmarkForm;
+ this.currentScrollPosition = this.bookmarkManager.currentScrollPosition;
try {
const bookmarkData = {
@@ -1023,35 +827,25 @@ window.documentViewer = () => ({
}
},
- // 책갈피 삭제
+ // 책갈피 삭제 (BookmarkManager로 위임)
async deleteBookmark(bookmarkId) {
- if (!confirm('이 책갈피를 삭제하시겠습니까?')) {
- return;
- }
-
- try {
- await api.deleteBookmark(bookmarkId);
- this.bookmarks = this.bookmarks.filter(b => b.id !== bookmarkId);
- } catch (error) {
- console.error('Failed to delete bookmark:', error);
- alert('책갈피 삭제에 실패했습니다');
- }
+ await this.bookmarkManager.deleteBookmark(bookmarkId);
+ // 상태 동기화
+ this.bookmarks = this.bookmarkManager.bookmarks;
},
- // 책갈피로 스크롤
+ // 책갈피로 스크롤 (BookmarkManager로 위임)
scrollToBookmark(bookmark) {
- window.scrollTo({
- top: bookmark.scroll_position,
- behavior: 'smooth'
- });
+ this.bookmarkManager.scrollToBookmark(bookmark);
},
- // 책갈피 모달 닫기
+ // 책갈피 모달 닫기 (BookmarkManager로 위임)
closeBookmarkModal() {
- this.showBookmarkModal = false;
- this.editingBookmark = null;
- this.bookmarkForm = { title: '', description: '' };
- this.currentScrollPosition = null;
+ this.bookmarkManager.closeBookmarkModal();
+ // 상태 동기화
+ this.editingBookmark = this.bookmarkManager.editingBookmark;
+ this.bookmarkForm = this.bookmarkManager.bookmarkForm;
+ this.currentScrollPosition = this.bookmarkManager.currentScrollPosition;
},
// 문서 내 검색
@@ -1260,10 +1054,56 @@ window.documentViewer = () => ({
return '기타';
},
- // 하이라이트 말풍선 표시
+ // 하이라이트 말풍선 표시 (HighlightManager로 위임)
showHighlightTooltip(clickedHighlight, element) {
- // 기존 말풍선 제거
- this.hideTooltip();
+ if (this.highlightManager) {
+ this.highlightManager.showHighlightTooltip(clickedHighlight, element);
+ }
+ },
+
+ // 말풍선 외부 클릭 처리
+ handleTooltipOutsideClick(e) {
+ const highlightTooltip = document.getElementById('highlight-tooltip');
+ const linkTooltip = document.getElementById('link-tooltip');
+ const backlinkTooltip = document.getElementById('backlink-tooltip');
+
+ const isOutsideHighlightTooltip = highlightTooltip && !highlightTooltip.contains(e.target) && !e.target.classList.contains('highlight');
+ const isOutsideLinkTooltip = linkTooltip && !linkTooltip.contains(e.target) && !e.target.classList.contains('document-link');
+ const isOutsideBacklinkTooltip = backlinkTooltip && !backlinkTooltip.contains(e.target) && !e.target.classList.contains('backlink-highlight');
+
+ if (isOutsideHighlightTooltip || isOutsideLinkTooltip || isOutsideBacklinkTooltip) {
+ this.hideTooltip();
+ }
+ },
+
+ // 짧은 날짜 형식
+ formatShortDate(dateString) {
+ const date = new Date(dateString);
+ const now = new Date();
+ const diffTime = Math.abs(now - date);
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+ if (diffDays === 1) {
+ return '오늘';
+ } else if (diffDays === 2) {
+ return '어제';
+ } else if (diffDays <= 7) {
+ return `${diffDays-1}일 전`;
+ } else {
+ return date.toLocaleDateString('ko-KR', {
+ year: '2-digit',
+ month: '2-digit',
+ day: '2-digit'
+ });
+ }
+ },
+
+ // 메모 추가 폼 표시 (HighlightManager로 위임)
+ showAddNoteForm(highlightId) {
+ if (this.highlightManager) {
+ this.highlightManager.showAddNoteForm(highlightId);
+ }
+ },
// 동일한 범위의 모든 하이라이트 찾기
const overlappingHighlights = this.findOverlappingHighlights(clickedHighlight);
@@ -1440,26 +1280,15 @@ window.documentViewer = () => ({
}, 100);
},
- // 말풍선 숨기기
+ // 말풍선 숨기기 (HighlightManager로 위임)
hideTooltip() {
- const highlightTooltip = document.getElementById('highlight-tooltip');
- if (highlightTooltip) {
- highlightTooltip.remove();
+ if (this.highlightManager) {
+ this.highlightManager.hideTooltip();
}
-
- const linkTooltip = document.getElementById('link-tooltip');
- if (linkTooltip) {
- linkTooltip.remove();
- }
-
- const backlinkTooltip = document.getElementById('backlink-tooltip');
- if (backlinkTooltip) {
- backlinkTooltip.remove();
- }
-
- document.removeEventListener('click', this.handleTooltipOutsideClick.bind(this));
},
+
+
// 말풍선 외부 클릭 처리
handleTooltipOutsideClick(e) {
const highlightTooltip = document.getElementById('highlight-tooltip');
@@ -1497,60 +1326,15 @@ window.documentViewer = () => ({
}
},
- // 메모 추가 폼 표시
+ // 메모 추가 폼 표시 (HighlightManager로 위임)
showAddNoteForm(highlightId) {
- console.log('🔍 showAddNoteForm 호출됨, highlightId:', highlightId);
- const tooltip = document.getElementById('highlight-tooltip');
- if (!tooltip) {
- console.error('❌ 툴팁을 찾을 수 없습니다');
- return;
+ if (this.highlightManager) {
+ this.highlightManager.showAddNoteForm(highlightId);
}
-
- console.log('✅ 툴팁 찾음:', tooltip);
- console.log('🔍 찾고 있는 ID:', `#notes-list-${highlightId}`);
-
- // 툴팁 내의 모든 ID 요소 확인
- const allIds = tooltip.querySelectorAll('[id]');
- console.log('📋 툴팁 내 모든 ID 요소들:', Array.from(allIds).map(el => el.id));
-
- // 툴팁 HTML 전체 구조 확인
- console.log('🔍 툴팁 HTML 구조:', tooltip.innerHTML.substring(0, 500) + '...');
-
- // 해당 하이라이트의 메모 섹션을 찾기
- const notesList = tooltip.querySelector(`#notes-list-${highlightId}`);
- if (!notesList) {
- console.error('❌ 메모 리스트 요소를 찾을 수 없습니다:', highlightId);
- console.log('🔍 툴팁 HTML:', tooltip.innerHTML);
- return;
- }
-
- console.log('✅ 메모 리스트 찾음:', notesList);
-
- notesList.innerHTML = `
-
-
-
-
-
-
-
테스트 문서
+ 이 문서는 Document Server의 하이라이트 및 메모 기능을 테스트하기 위한 샘플입니다.
+ 텍스트를 선택하면 하이라이트를 추가할 수 있습니다.
+ 주요 기능
+
+ - 텍스트 선택 후 하이라이트 생성
+ - 하이라이트에 메모 추가
+ - 메모 검색 및 관리
+ - 책갈피 기능
+
+ 테스트 단락
+ 이것은 하이라이트 테스트를 위한 긴 단락입니다. 이 텍스트를 선택하여 하이라이트를 만들어보세요.
+ 하이라이트를 만든 후에는 메모를 추가할 수 있습니다. 메모는 나중에 검색하고 편집할 수 있습니다.
+ 또 다른 단락입니다. 여러 개의 하이라이트를 만들어서 메모 기능을 테스트해보세요.
+ 각 하이라이트는 고유한 색상을 가질 수 있으며, 연결된 메모를 통해 중요한 정보를 기록할 수 있습니다.
+ `;
+
+ // 폴백 모드에서도 스크립트 핸들러 설정
+ this.setupDocumentScriptHandlers();
+
+ return mockDocument;
+ }
+ }
+
+ /**
+ * 네비게이션 정보 로드
+ */
+ async loadNavigation(documentId) {
+ try {
+ // CachedAPI의 getDocumentNavigation 메서드 사용
+ const navigation = await this.api.getDocumentNavigation(documentId);
+ console.log('📍 네비게이션 정보 로드됨:', navigation);
+ return navigation;
+ } catch (error) {
+ console.error('❌ 네비게이션 정보 로드 실패:', error);
+ return null;
+ }
+ }
+
+ /**
+ * URL 파라미터에서 특정 텍스트 하이라이트 확인
+ */
+ checkForTextHighlight() {
+ const urlParams = new URLSearchParams(window.location.search);
+ const highlightText = urlParams.get('highlight_text');
+ const startOffset = parseInt(urlParams.get('start_offset'));
+ const endOffset = parseInt(urlParams.get('end_offset'));
+
+ if (highlightText && !isNaN(startOffset) && !isNaN(endOffset)) {
+ console.log('🎯 URL에서 하이라이트 요청:', { highlightText, startOffset, endOffset });
+
+ // 임시 하이라이트 적용 및 스크롤
+ setTimeout(() => {
+ this.highlightAndScrollToText({
+ targetText: highlightText,
+ startOffset: startOffset,
+ endOffset: endOffset
+ });
+ }, 500); // DOM 로딩 완료 후 실행
+ }
+ }
+
+ /**
+ * 문서 내 스크립트 핸들러 설정
+ */
+ setupDocumentScriptHandlers() {
+ // 업로드된 HTML 문서에서 사용할 수 있는 전역 함수들 정의
+
+ // 언어 토글 함수 (많은 문서에서 사용)
+ window.toggleLanguage = function() {
+ const koreanContent = document.getElementById('korean-content');
+ const englishContent = document.getElementById('english-content');
+
+ if (koreanContent && englishContent) {
+ if (koreanContent.style.display === 'none') {
+ koreanContent.style.display = 'block';
+ englishContent.style.display = 'none';
+ } else {
+ koreanContent.style.display = 'none';
+ englishContent.style.display = 'block';
+ }
+ } else {
+ // 다른 언어 토글 방식들
+ const elements = document.querySelectorAll('[data-lang]');
+ elements.forEach(el => {
+ if (el.dataset.lang === 'ko') {
+ el.style.display = el.style.display === 'none' ? 'block' : 'none';
+ } else if (el.dataset.lang === 'en') {
+ el.style.display = el.style.display === 'none' ? 'block' : 'none';
+ }
+ });
+ }
+ };
+
+ // 문서 인쇄 함수
+ window.printDocument = function() {
+ // 현재 페이지의 헤더/푸터 숨기고 문서 내용만 인쇄
+ const originalTitle = document.title;
+ const printContent = document.getElementById('document-content');
+
+ if (printContent) {
+ const printWindow = window.open('', '_blank');
+ printWindow.document.write(`
+
+
+ ${originalTitle}
+
+
+ ${printContent.innerHTML}
+
+ `);
+ printWindow.document.close();
+ printWindow.print();
+ } else {
+ window.print();
+ }
+ };
+
+ // 링크 처리 함수 (문서 내 링크가 새 탭에서 열리지 않도록)
+ document.addEventListener('click', function(e) {
+ const link = e.target.closest('a');
+ if (link && link.href && !link.href.startsWith('#')) {
+ // 외부 링크는 새 탭에서 열기
+ if (!link.href.includes(window.location.hostname)) {
+ e.preventDefault();
+ window.open(link.href, '_blank');
+ }
+ }
+ });
+ }
+
+ /**
+ * 텍스트 하이라이트 및 스크롤 (임시 하이라이트)
+ * 이 함수는 나중에 HighlightManager로 이동될 예정
+ */
+ highlightAndScrollToText({ targetText, startOffset, endOffset }) {
+ // 임시 구현 - ViewerCore의 highlightAndScrollToText 호출
+ if (window.documentViewerInstance && window.documentViewerInstance.highlightAndScrollToText) {
+ window.documentViewerInstance.highlightAndScrollToText(targetText, startOffset, endOffset);
+ } else {
+ // 폴백: 간단한 스크롤만
+ console.log('🎯 텍스트 하이라이트 요청 (폴백):', { targetText, startOffset, endOffset });
+
+ const documentContent = document.getElementById('document-content');
+ if (!documentContent) return;
+
+ const textContent = documentContent.textContent;
+ const targetIndex = textContent.indexOf(targetText);
+
+ if (targetIndex !== -1) {
+ const scrollRatio = targetIndex / textContent.length;
+ const scrollPosition = documentContent.scrollHeight * scrollRatio;
+
+ window.scrollTo({
+ top: scrollPosition,
+ behavior: 'smooth'
+ });
+
+ console.log('✅ 텍스트로 스크롤 완료 (폴백)');
+ }
+ }
+ }
+}
+
+// 전역으로 내보내기
+window.DocumentLoader = DocumentLoader;
diff --git a/frontend/static/js/viewer/features/bookmark-manager.js b/frontend/static/js/viewer/features/bookmark-manager.js
new file mode 100644
index 0000000..85489ca
--- /dev/null
+++ b/frontend/static/js/viewer/features/bookmark-manager.js
@@ -0,0 +1,268 @@
+/**
+ * BookmarkManager 모듈
+ * 북마크 관리
+ */
+class BookmarkManager {
+ constructor(api) {
+ this.api = api;
+ // 캐싱된 API 사용 (사용 가능한 경우)
+ this.cachedApi = window.cachedApi || api;
+ this.bookmarks = [];
+ this.bookmarkForm = {
+ title: '',
+ description: ''
+ };
+ this.editingBookmark = null;
+ this.currentScrollPosition = null;
+ }
+
+ /**
+ * 북마크 데이터 로드
+ */
+ async loadBookmarks(documentId) {
+ try {
+ this.bookmarks = await this.cachedApi.get('/bookmarks', { document_id: documentId }, { category: 'bookmarks' }).catch(() => []);
+ return this.bookmarks || [];
+ } catch (error) {
+ console.error('북마크 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 북마크 추가
+ */
+ async addBookmark(document) {
+ const scrollPosition = window.scrollY;
+ this.bookmarkForm = {
+ title: `${document.title} - ${new Date().toLocaleString()}`,
+ description: ''
+ };
+ this.currentScrollPosition = scrollPosition;
+
+ // ViewerCore의 모달 상태 업데이트
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.showBookmarkModal = true;
+ }
+ }
+
+ /**
+ * 북마크 편집
+ */
+ editBookmark(bookmark) {
+ this.editingBookmark = bookmark;
+ this.bookmarkForm = {
+ title: bookmark.title,
+ description: bookmark.description || ''
+ };
+
+ // ViewerCore의 모달 상태 업데이트
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.showBookmarkModal = true;
+ }
+ }
+
+ /**
+ * 북마크 저장
+ */
+ async saveBookmark(documentId) {
+ try {
+ // ViewerCore의 로딩 상태 업데이트
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.bookmarkLoading = true;
+ }
+
+ const bookmarkData = {
+ title: this.bookmarkForm.title,
+ description: this.bookmarkForm.description,
+ scroll_position: this.currentScrollPosition || 0
+ };
+
+ if (this.editingBookmark) {
+ // 북마크 수정
+ const updatedBookmark = await this.api.updateBookmark(this.editingBookmark.id, bookmarkData);
+ const index = this.bookmarks.findIndex(b => b.id === this.editingBookmark.id);
+ if (index !== -1) {
+ this.bookmarks[index] = updatedBookmark;
+ }
+ } else {
+ // 새 북마크 생성
+ bookmarkData.document_id = documentId;
+ const newBookmark = await this.api.createBookmark(bookmarkData);
+ this.bookmarks.push(newBookmark);
+ }
+
+ this.closeBookmarkModal();
+ console.log('북마크 저장 완료');
+
+ } catch (error) {
+ console.error('Failed to save bookmark:', error);
+ alert('북마크 저장에 실패했습니다');
+ } finally {
+ // ViewerCore의 로딩 상태 업데이트
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.bookmarkLoading = false;
+ }
+ }
+ }
+
+ /**
+ * 북마크 삭제
+ */
+ async deleteBookmark(bookmarkId) {
+ if (!confirm('이 북마크를 삭제하시겠습니까?')) {
+ return;
+ }
+
+ try {
+ await this.api.deleteBookmark(bookmarkId);
+ this.bookmarks = this.bookmarks.filter(b => b.id !== bookmarkId);
+ console.log('북마크 삭제 완료:', bookmarkId);
+ } catch (error) {
+ console.error('Failed to delete bookmark:', error);
+ alert('북마크 삭제에 실패했습니다');
+ }
+ }
+
+ /**
+ * 북마크로 스크롤
+ */
+ scrollToBookmark(bookmark) {
+ window.scrollTo({
+ top: bookmark.scroll_position,
+ behavior: 'smooth'
+ });
+ }
+
+ /**
+ * 북마크 모달 닫기
+ */
+ closeBookmarkModal() {
+ this.editingBookmark = null;
+ this.bookmarkForm = { title: '', description: '' };
+ this.currentScrollPosition = null;
+
+ // ViewerCore의 모달 상태 업데이트
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.showBookmarkModal = false;
+ }
+ }
+
+ /**
+ * 선택된 텍스트로 북마크 생성
+ */
+ async createBookmarkFromSelection(documentId, selectedText, selectedRange) {
+ if (!selectedText || !selectedRange) return;
+
+ try {
+ // 하이라이트 생성 (북마크는 주황색)
+ const highlightData = await this.createHighlight(selectedText, selectedRange, '#FFA500');
+
+ // 북마크 생성
+ const bookmarkData = {
+ highlight_id: highlightData.id,
+ title: selectedText.substring(0, 50) + (selectedText.length > 50 ? '...' : ''),
+ description: `선택된 텍스트: "${selectedText}"`
+ };
+
+ const bookmark = await this.api.createBookmark(documentId, bookmarkData);
+ this.bookmarks.push(bookmark);
+
+ console.log('선택 텍스트 북마크 생성 완료:', bookmark);
+ alert('북마크가 생성되었습니다.');
+
+ } catch (error) {
+ console.error('북마크 생성 실패:', error);
+ alert('북마크 생성에 실패했습니다: ' + error.message);
+ }
+ }
+
+ /**
+ * 하이라이트 생성 (북마크용)
+ * HighlightManager와 연동
+ */
+ async createHighlight(selectedText, selectedRange, color) {
+ try {
+ const viewerInstance = window.documentViewerInstance;
+ if (viewerInstance && viewerInstance.highlightManager) {
+ // HighlightManager의 상태 설정
+ viewerInstance.highlightManager.selectedText = selectedText;
+ viewerInstance.highlightManager.selectedRange = selectedRange;
+ viewerInstance.highlightManager.selectedHighlightColor = color;
+
+ // ViewerCore의 상태도 동기화
+ viewerInstance.selectedText = selectedText;
+ viewerInstance.selectedRange = selectedRange;
+ viewerInstance.selectedHighlightColor = color;
+
+ // HighlightManager의 createHighlight 호출
+ await viewerInstance.highlightManager.createHighlight();
+
+ // 생성된 하이라이트 찾기 (가장 최근 생성된 것)
+ const highlights = viewerInstance.highlightManager.highlights;
+ if (highlights && highlights.length > 0) {
+ return highlights[highlights.length - 1];
+ }
+ }
+
+ // 폴백: 간단한 하이라이트 데이터 반환
+ console.warn('HighlightManager 연동 실패, 폴백 데이터 사용');
+ return {
+ id: Date.now().toString(),
+ selected_text: selectedText,
+ color: color,
+ start_offset: 0,
+ end_offset: selectedText.length
+ };
+
+ } catch (error) {
+ console.error('하이라이트 생성 실패:', error);
+
+ // 폴백: 간단한 하이라이트 데이터 반환
+ return {
+ id: Date.now().toString(),
+ selected_text: selectedText,
+ color: color,
+ start_offset: 0,
+ end_offset: selectedText.length
+ };
+ }
+ }
+
+ /**
+ * 북마크 모드 활성화
+ */
+ activateBookmarkMode() {
+ console.log('🔖 북마크 모드 활성화');
+
+ // 현재 선택된 텍스트가 있는지 확인
+ const selection = window.getSelection();
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const selectedText = selection.toString().trim();
+ if (selectedText.length > 0) {
+ // ViewerCore의 선택된 텍스트 상태 업데이트
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.selectedText = selectedText;
+ window.documentViewerInstance.selectedRange = selection.getRangeAt(0);
+ }
+ this.createBookmarkFromSelection(
+ window.documentViewerInstance?.documentId,
+ selectedText,
+ selection.getRangeAt(0)
+ );
+ return;
+ }
+ }
+
+ // 텍스트 선택 모드 활성화
+ console.log('📝 텍스트 선택 모드 활성화');
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.activeMode = 'bookmark';
+ window.documentViewerInstance.showSelectionMessage('텍스트를 선택하세요.');
+ window.documentViewerInstance.setupTextSelectionListener();
+ }
+ }
+}
+
+// 전역으로 내보내기
+window.BookmarkManager = BookmarkManager;
diff --git a/frontend/static/js/viewer/features/highlight-manager.js b/frontend/static/js/viewer/features/highlight-manager.js
new file mode 100644
index 0000000..7378406
--- /dev/null
+++ b/frontend/static/js/viewer/features/highlight-manager.js
@@ -0,0 +1,1017 @@
+/**
+ * HighlightManager 모듈
+ * 하이라이트 및 메모 관리
+ */
+class HighlightManager {
+ constructor(api) {
+ console.log('🎨 HighlightManager 초기화 시작');
+ this.api = api;
+ // 캐싱된 API 사용 (사용 가능한 경우)
+ this.cachedApi = window.cachedApi || api;
+ this.highlights = [];
+ this.notes = [];
+ this.selectedHighlightColor = '#FFFF00';
+ this.selectedText = '';
+ this.selectedRange = null;
+
+ // 텍스트 선택 이벤트 리스너 등록
+ this.textSelectionHandler = this.handleTextSelection.bind(this);
+ document.addEventListener('mouseup', this.textSelectionHandler);
+ console.log('✅ HighlightManager 텍스트 선택 이벤트 리스너 등록 완료');
+ }
+
+ /**
+ * 하이라이트 데이터 로드
+ */
+ async loadHighlights(documentId, contentType) {
+ try {
+ if (contentType === 'note') {
+ this.highlights = await this.api.get(`/note/${documentId}/highlights`).catch(() => []);
+ } else {
+ this.highlights = await this.cachedApi.get('/highlights', { document_id: documentId, content_type: contentType }, { category: 'highlights' }).catch(() => []);
+ }
+ return this.highlights || [];
+ } catch (error) {
+ console.error('하이라이트 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 메모 데이터 로드
+ */
+ async loadNotes(documentId, contentType) {
+ try {
+ if (contentType === 'note') {
+ this.notes = await this.api.get(`/note/${documentId}/notes`).catch(() => []);
+ } else {
+ this.notes = await this.cachedApi.get('/notes', { document_id: documentId, content_type: contentType }, { category: 'notes' }).catch(() => []);
+ }
+ return this.notes || [];
+ } catch (error) {
+ console.error('메모 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 하이라이트 렌더링 (개선된 버전)
+ */
+ renderHighlights() {
+ const content = document.getElementById('document-content');
+
+ console.log('🎨 하이라이트 렌더링 호출됨');
+ console.log('📄 document-content 요소:', content ? '존재' : '없음');
+ console.log('📊 this.highlights:', this.highlights ? this.highlights.length + '개' : 'null/undefined');
+
+ if (!content || !this.highlights || this.highlights.length === 0) {
+ console.log('❌ 하이라이트 렌더링 조건 미충족:', {
+ content: !!content,
+ highlights: !!this.highlights,
+ length: this.highlights ? this.highlights.length : 0
+ });
+ return;
+ }
+
+ console.log('🎨 하이라이트 렌더링 시작:', this.highlights.length + '개');
+
+ // 기존 하이라이트 제거
+ const existingHighlights = content.querySelectorAll('.highlight-span');
+ existingHighlights.forEach(el => {
+ const parent = el.parentNode;
+ parent.replaceChild(document.createTextNode(el.textContent), el);
+ parent.normalize();
+ });
+
+ // 위치별로 하이라이트 그룹화
+ const positionGroups = this.groupHighlightsByPosition();
+
+ // 각 그룹별로 하이라이트 적용
+ Object.keys(positionGroups).forEach(key => {
+ const group = positionGroups[key];
+ this.applyHighlightGroup(group);
+ });
+
+ console.log('✅ 하이라이트 렌더링 완료');
+ }
+
+ /**
+ * 위치별로 하이라이트 그룹화
+ */
+ groupHighlightsByPosition() {
+ const groups = {};
+
+ console.log('📊 하이라이트 그룹화 시작:', this.highlights.length + '개');
+ console.log('📊 하이라이트 데이터:', this.highlights);
+
+ this.highlights.forEach(highlight => {
+ const key = `${highlight.start_offset}-${highlight.end_offset}`;
+ if (!groups[key]) {
+ groups[key] = {
+ start_offset: highlight.start_offset,
+ end_offset: highlight.end_offset,
+ highlights: []
+ };
+ }
+ groups[key].highlights.push(highlight);
+ });
+
+ console.log('📊 그룹화 결과:', Object.keys(groups).length + '개 그룹');
+ console.log('📊 그룹 상세:', groups);
+
+ return groups;
+ }
+
+ /**
+ * 하이라이트 그룹 적용
+ */
+ applyHighlightGroup(group) {
+ const content = document.getElementById('document-content');
+ const textContent = content.textContent;
+
+ console.log('🎯 하이라이트 그룹 적용:', {
+ start: group.start_offset,
+ end: group.end_offset,
+ text: textContent.substring(group.start_offset, group.end_offset),
+ colors: group.highlights.map(h => h.highlight_color || h.color)
+ });
+
+ if (group.start_offset >= textContent.length || group.end_offset > textContent.length) {
+ console.warn('하이라이트 위치가 텍스트 범위를 벗어남:', group);
+ return;
+ }
+
+ const targetText = textContent.substring(group.start_offset, group.end_offset);
+
+ // 텍스트 노드 찾기 및 하이라이트 적용
+ const walker = document.createTreeWalker(
+ content,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let currentOffset = 0;
+ let node;
+ let found = false;
+
+ while (node = walker.nextNode()) {
+ const nodeLength = node.textContent.length;
+ const nodeStart = currentOffset;
+ const nodeEnd = currentOffset + nodeLength;
+
+ // 하이라이트 범위와 겹치는지 확인
+ if (nodeEnd > group.start_offset && nodeStart < group.end_offset) {
+ const highlightStart = Math.max(0, group.start_offset - nodeStart);
+ const highlightEnd = Math.min(nodeLength, group.end_offset - nodeStart);
+
+ if (highlightStart < highlightEnd) {
+ console.log('✅ 하이라이트 적용 중:', {
+ nodeText: node.textContent.substring(0, 50) + '...',
+ highlightStart,
+ highlightEnd,
+ highlightText: node.textContent.substring(highlightStart, highlightEnd)
+ });
+ this.highlightTextInNode(node, highlightStart, highlightEnd, group.highlights);
+ found = true;
+ break;
+ }
+ }
+
+ currentOffset = nodeEnd;
+ }
+
+ if (!found) {
+ console.warn('❌ 하이라이트 적용할 텍스트 노드를 찾지 못함:', targetText);
+ }
+ }
+
+ /**
+ * 텍스트 노드에 하이라이트 적용
+ */
+ highlightTextInNode(textNode, start, end, highlights) {
+ const text = textNode.textContent;
+ const beforeText = text.substring(0, start);
+ const highlightText = text.substring(start, end);
+ const afterText = text.substring(end);
+
+ // 하이라이트 스팬 생성
+ const span = document.createElement('span');
+ span.className = 'highlight-span';
+ span.textContent = highlightText;
+
+ // 첫 번째 하이라이트의 ID를 data 속성으로 설정
+ if (highlights.length > 0) {
+ span.dataset.highlightId = highlights[0].id;
+ }
+
+ // 다중 색상 처리
+ if (highlights.length === 1) {
+ console.log('🔍 하이라이트 데이터 구조:', highlights[0]);
+ const color = highlights[0].highlight_color || highlights[0].color || '#FFFF00';
+ span.style.setProperty('background', color, 'important');
+ span.style.setProperty('background-color', color, 'important');
+ console.log('🎨 단일 하이라이트 색상 적용 (!important):', color);
+ } else {
+ // 여러 색상이 겹치는 경우 줄무늬(스트라이프) 적용
+ const colors = highlights.map(h => h.highlight_color || h.color || '#FFFF00');
+ const stripeSize = 100 / colors.length; // 각 색상의 비율
+
+ // 색상별로 동일한 크기의 줄무늬 생성
+ const stripes = colors.map((color, index) => {
+ const start = index * stripeSize;
+ const end = (index + 1) * stripeSize;
+ return `${color} ${start}%, ${color} ${end}%`;
+ }).join(', ');
+
+ span.style.background = `linear-gradient(180deg, ${stripes})`;
+ console.log('🎨 다중 하이라이트 색상 적용 (위아래 절반씩):', colors);
+ }
+
+ // 메모 툴팁 설정
+ const notesForHighlight = highlights.filter(h => h.note_content);
+ if (notesForHighlight.length > 0) {
+ span.title = notesForHighlight.map(h => h.note_content).join('\n---\n');
+ span.style.cursor = 'help';
+ }
+
+ // 하이라이트 클릭 이벤트 추가
+ span.style.cursor = 'pointer';
+ span.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.showHighlightModal(highlights);
+ });
+
+ // DOM 교체
+ const parent = textNode.parentNode;
+ const fragment = document.createDocumentFragment();
+
+ if (beforeText) fragment.appendChild(document.createTextNode(beforeText));
+ fragment.appendChild(span);
+ if (afterText) fragment.appendChild(document.createTextNode(afterText));
+
+ parent.replaceChild(fragment, textNode);
+ }
+
+ /**
+ * 텍스트 선택 처리
+ */
+ handleTextSelection() {
+ console.log('handleTextSelection called');
+ const selection = window.getSelection();
+
+ if (!selection.rangeCount || selection.isCollapsed) {
+ return;
+ }
+
+ const range = selection.getRangeAt(0);
+ const selectedText = selection.toString().trim();
+
+ if (!selectedText) {
+ return;
+ }
+
+ console.log('Selected text:', selectedText);
+
+ // 선택된 텍스트와 범위 저장
+ this.selectedText = selectedText;
+ this.selectedRange = range.cloneRange();
+
+ // ViewerCore의 selectedText도 동기화
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.selectedText = selectedText;
+ window.documentViewerInstance.selectedRange = range.cloneRange();
+ }
+
+ // 하이라이트 버튼 표시
+ this.showHighlightButton(range);
+ }
+
+ /**
+ * 하이라이트 버튼 표시
+ */
+ showHighlightButton(range) {
+ // 기존 버튼 제거
+ const existingButton = document.querySelector('.highlight-button');
+ if (existingButton) {
+ existingButton.remove();
+ }
+
+ const rect = range.getBoundingClientRect();
+ const button = document.createElement('button');
+ button.className = 'highlight-button';
+ button.innerHTML = '🖍️ 하이라이트';
+ button.style.cssText = `
+ position: fixed;
+ top: ${rect.top - 40}px;
+ left: ${rect.left}px;
+ z-index: 1000;
+ background: #4F46E5;
+ color: white;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 6px;
+ font-size: 12px;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+ `;
+
+ document.body.appendChild(button);
+
+ button.addEventListener('click', () => {
+ this.createHighlight();
+ button.remove();
+ });
+
+ // 3초 후 자동 제거
+ setTimeout(() => {
+ if (button.parentNode) {
+ button.remove();
+ }
+ }, 3000);
+ }
+
+ /**
+ * 색상 버튼으로 하이라이트 생성
+ */
+ createHighlightWithColor(color) {
+ console.log('🎨 createHighlightWithColor called with color:', color);
+ console.log('🎨 이전 색상:', this.selectedHighlightColor);
+
+ // 현재 선택된 텍스트가 있는지 확인
+ const selection = window.getSelection();
+ if (!selection.rangeCount || selection.isCollapsed) {
+ console.log('선택된 텍스트가 없습니다');
+ return;
+ }
+
+ // 색상 설정 후 하이라이트 생성
+ this.selectedHighlightColor = color;
+ console.log('🎨 색상 설정 완료:', this.selectedHighlightColor);
+ this.handleTextSelection(); // 텍스트 선택 처리
+
+ // 바로 하이라이트 생성 (버튼 클릭 없이)
+ setTimeout(() => {
+ this.createHighlight();
+ }, 100);
+ }
+
+ /**
+ * 하이라이트 생성
+ */
+ async createHighlight() {
+ console.log('createHighlight called');
+ console.log('selectedText:', this.selectedText);
+ console.log('selectedRange:', this.selectedRange);
+
+ if (!this.selectedText || !this.selectedRange) {
+ console.log('선택된 텍스트나 범위가 없습니다');
+ return;
+ }
+
+ try {
+ // 문서 전체 텍스트에서 선택된 텍스트의 위치 계산
+ const documentContent = document.getElementById('document-content');
+ const fullText = documentContent.textContent;
+
+ // 선택된 범위의 시작점을 문서 전체에서의 오프셋으로 변환
+ const startOffset = this.getTextOffset(documentContent, this.selectedRange.startContainer, this.selectedRange.startOffset);
+ const endOffset = startOffset + this.selectedText.length;
+
+ console.log('Calculated offsets:', { startOffset, endOffset, text: this.selectedText });
+
+ const highlightData = {
+ selected_text: this.selectedText,
+ start_offset: startOffset,
+ end_offset: endOffset,
+ highlight_color: this.selectedHighlightColor // 백엔드 API 스키마에 맞게 수정
+ };
+
+ console.log('🎨 하이라이트 데이터 전송:', highlightData);
+ console.log('🎨 현재 선택된 색상:', this.selectedHighlightColor);
+
+ let highlight;
+ if (window.documentViewerInstance.contentType === 'note') {
+ const noteHighlightData = {
+ note_document_id: window.documentViewerInstance.documentId,
+ ...highlightData
+ };
+ highlight = await this.api.post('/note-highlights/', noteHighlightData);
+ } else {
+ // 문서 하이라이트의 경우 document_id 추가
+ const documentHighlightData = {
+ document_id: window.documentViewerInstance.documentId,
+ ...highlightData
+ };
+ console.log('🔍 최종 전송 데이터:', documentHighlightData);
+ highlight = await this.api.createHighlight(documentHighlightData);
+ }
+ console.log('🔍 생성된 하이라이트 응답:', highlight);
+ console.log('🎨 응답에서 받은 색상:', highlight.highlight_color);
+
+ this.highlights.push(highlight);
+
+ // 마지막 생성된 하이라이트 저장 (메모 생성용)
+ this.lastCreatedHighlight = highlight;
+
+ // 하이라이트 렌더링
+ this.renderHighlights();
+
+ // 선택 해제
+ window.getSelection().removeAllRanges();
+ this.selectedText = '';
+ this.selectedRange = null;
+
+ // ViewerCore의 selectedText도 동기화 (메모 모달에서 사용하기 전에는 유지)
+ // 메모 모달이 열리기 전에는 selectedText를 유지해야 함
+
+ // 하이라이트 버튼 제거
+ const button = document.querySelector('.highlight-button');
+ if (button) {
+ button.remove();
+ }
+
+ console.log('✅ 하이라이트 생성 완료:', highlight);
+ console.log('🔍 생성된 하이라이트 데이터 구조:', JSON.stringify(highlight, null, 2));
+ console.log('🔍 생성된 하이라이트 색상 필드들:', {
+ color: highlight.color,
+ highlight_color: highlight.highlight_color,
+ background_color: highlight.background_color
+ });
+
+ // 메모 입력 모달 열기
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.openNoteInputModal();
+ }
+
+ } catch (error) {
+ console.error('하이라이트 생성 실패:', error);
+ alert('하이라이트 생성에 실패했습니다: ' + error.message);
+ }
+ }
+
+ /**
+ * 하이라이트에 메모 생성
+ */
+ async createNoteForHighlight(highlight, content, tags = '') {
+ try {
+ console.log('📝 하이라이트에 메모 생성:', highlight.id, content);
+
+ const noteData = {
+ highlight_id: highlight.id,
+ content: content,
+ tags: tags
+ };
+
+ // 노트 타입에 따라 다른 API 호출
+ if (window.documentViewerInstance.contentType === 'note') {
+ noteData.note_document_id = window.documentViewerInstance.documentId;
+ } else {
+ noteData.document_id = window.documentViewerInstance.documentId;
+ }
+
+ const note = await this.api.createNote(noteData);
+
+ // 메모 목록에 추가
+ if (!this.notes) this.notes = [];
+ this.notes.push(note);
+
+ console.log('✅ 메모 생성 완료:', note);
+
+ // 메모 데이터 새로고침 (캐시 무효화)
+ await this.loadNotes(window.documentViewerInstance.documentId, window.documentViewerInstance.contentType);
+
+ } catch (error) {
+ console.error('❌ 메모 생성 실패:', error);
+ throw error;
+ }
+ }
+
+ /**
+ * 텍스트 오프셋 계산
+ */
+ getTextOffset(root, node, offset) {
+ let textOffset = 0;
+ const walker = document.createTreeWalker(
+ root,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let currentNode;
+ while (currentNode = walker.nextNode()) {
+ if (currentNode === node) {
+ return textOffset + offset;
+ }
+ textOffset += currentNode.textContent.length;
+ }
+
+ return textOffset;
+ }
+
+ /**
+ * 메모 저장
+ */
+ async saveNote() {
+ const noteContent = window.documentViewerInstance.noteForm.content;
+ const tags = window.documentViewerInstance.noteForm.tags;
+
+ if (!noteContent.trim()) {
+ alert('메모 내용을 입력해주세요.');
+ return;
+ }
+
+ try {
+ window.documentViewerInstance.noteLoading = true;
+
+ const noteData = {
+ content: noteContent,
+ tags: tags
+ };
+
+ let savedNote;
+ if (window.documentViewerInstance.contentType === 'note') {
+ noteData.note_document_id = window.documentViewerInstance.documentId;
+ savedNote = await this.api.post('/note-notes/', noteData);
+ } else {
+ savedNote = await this.api.createNote(noteData);
+ }
+
+ this.notes.push(savedNote);
+
+ // 폼 초기화
+ window.documentViewerInstance.noteForm.content = '';
+ window.documentViewerInstance.noteForm.tags = '';
+ window.documentViewerInstance.showNoteModal = false;
+
+ console.log('메모 저장 완료:', savedNote);
+
+ } catch (error) {
+ console.error('메모 저장 실패:', error);
+ alert('메모 저장에 실패했습니다: ' + error.message);
+ } finally {
+ window.documentViewerInstance.noteLoading = false;
+ }
+ }
+
+ /**
+ * 메모 삭제
+ */
+ async deleteNote(noteId) {
+ if (!confirm('이 메모를 삭제하시겠습니까?')) {
+ return;
+ }
+
+ try {
+ await this.api.deleteNote(noteId);
+ this.notes = this.notes.filter(n => n.id !== noteId);
+
+ // ViewerCore의 filterNotes 호출
+ if (window.documentViewerInstance.filterNotes) {
+ window.documentViewerInstance.filterNotes();
+ }
+
+ console.log('메모 삭제 완료:', noteId);
+
+ } catch (error) {
+ console.error('메모 삭제 실패:', error);
+ alert('메모 삭제에 실패했습니다: ' + error.message);
+ }
+ }
+
+ /**
+ * 하이라이트 삭제
+ */
+ async deleteHighlight(highlightId) {
+ try {
+ await this.api.delete(`/highlights/${highlightId}`);
+ this.highlights = this.highlights.filter(h => h.id !== highlightId);
+ this.renderHighlights();
+ console.log('하이라이트 삭제 완료:', highlightId);
+ } catch (error) {
+ console.error('하이라이트 삭제 실패:', error);
+ alert('하이라이트 삭제에 실패했습니다: ' + error.message);
+ }
+ }
+
+ /**
+ * 선택된 텍스트로 메모 생성
+ */
+ async createNoteFromSelection(documentId, contentType) {
+ if (!this.selectedText || !this.selectedRange) return;
+
+ try {
+ console.log('📝 메모 생성 시작:', this.selectedText);
+
+ // 하이라이트 생성
+ await this.createHighlight();
+
+ // 생성된 하이라이트 찾기 (가장 최근 생성된 것)
+ const highlightData = this.highlights[this.highlights.length - 1];
+
+ // 메모 내용 입력받기
+ const content = prompt('메모 내용을 입력하세요:', '');
+ if (content === null) {
+ // 취소한 경우 하이라이트 제거
+ if (highlightData && highlightData.id) {
+ await this.api.deleteHighlight(highlightData.id);
+ this.highlights = this.highlights.filter(h => h.id !== highlightData.id);
+ this.renderHighlights();
+ }
+ return;
+ }
+
+ // 메모 생성
+ const noteData = {
+ highlight_id: highlightData.id,
+ content: content
+ };
+
+ // 노트와 문서에 따라 다른 API 호출
+ let note;
+ if (contentType === 'note') {
+ noteData.note_id = documentId; // 노트 메모는 note_id 필요
+ note = await this.api.post('/note-notes/', noteData);
+ } else {
+ // 문서 메모는 document_id 필요
+ noteData.document_id = documentId;
+ note = await this.api.createNote(noteData);
+ }
+
+ this.notes.push(note);
+
+ console.log('✅ 메모 생성 완료:', note);
+ alert('메모가 생성되었습니다.');
+
+ } catch (error) {
+ console.error('메모 생성 실패:', error);
+ alert('메모 생성에 실패했습니다: ' + error.message);
+ }
+ }
+
+ /**
+ * 하이라이트 클릭 시 모달 표시
+ */
+ showHighlightModal(highlights) {
+ console.log('🔍 하이라이트 모달 표시:', highlights);
+
+ // 첫 번째 하이라이트로 툴팁 표시
+ const firstHighlight = highlights[0];
+ const element = document.querySelector(`[data-highlight-id="${firstHighlight.id}"]`);
+ if (element) {
+ this.showHighlightTooltip(firstHighlight, element);
+ }
+ }
+
+ /**
+ * 동일한 텍스트 범위의 모든 하이라이트 찾기
+ */
+ findOverlappingHighlights(clickedHighlight) {
+ const overlapping = [];
+
+ this.highlights.forEach(highlight => {
+ // 텍스트 범위가 겹치는지 확인
+ const isOverlapping = (
+ (highlight.start_offset <= clickedHighlight.end_offset &&
+ highlight.end_offset >= clickedHighlight.start_offset) ||
+ (clickedHighlight.start_offset <= highlight.end_offset &&
+ clickedHighlight.end_offset >= highlight.start_offset)
+ );
+
+ if (isOverlapping) {
+ overlapping.push(highlight);
+ }
+ });
+
+ // 시작 위치 순으로 정렬
+ return overlapping.sort((a, b) => a.start_offset - b.start_offset);
+ }
+
+ /**
+ * 색상별로 하이라이트 그룹화
+ */
+ groupHighlightsByColor(highlights) {
+ const colorGroups = {};
+
+ highlights.forEach(highlight => {
+ const color = highlight.highlight_color || highlight.color || '#FFFF00';
+ if (!colorGroups[color]) {
+ colorGroups[color] = [];
+ }
+ colorGroups[color].push(highlight);
+ });
+
+ return colorGroups;
+ }
+
+ /**
+ * 색상 이름 반환
+ */
+ getColorName(color) {
+ const colorNames = {
+ '#FFFF00': '노란색',
+ '#90EE90': '초록색',
+ '#FFCCCB': '분홍색',
+ '#87CEEB': '파란색'
+ };
+ return colorNames[color] || '기타';
+ }
+
+ /**
+ * 하이라이트 툴팁 표시
+ */
+ showHighlightTooltip(clickedHighlight, element) {
+ // 기존 말풍선 제거
+ this.hideTooltip();
+
+ // 동일한 범위의 모든 하이라이트 찾기
+ const overlappingHighlights = this.findOverlappingHighlights(clickedHighlight);
+ const colorGroups = this.groupHighlightsByColor(overlappingHighlights);
+
+ console.log('🎨 겹치는 하이라이트:', overlappingHighlights.length, '개');
+
+ const tooltip = document.createElement('div');
+ tooltip.id = 'highlight-tooltip';
+ tooltip.className = 'absolute bg-white border border-gray-300 rounded-lg shadow-lg p-4 z-50 max-w-lg';
+ tooltip.style.minWidth = '350px';
+
+ // 선택된 텍스트 표시 (가장 긴 텍스트 사용)
+ const longestText = overlappingHighlights.reduce((longest, current) =>
+ current.selected_text.length > longest.length ? current.selected_text : longest, ''
+ );
+
+ let tooltipHTML = `
+
+
선택된 텍스트
+
+ "${longestText}"
+
+
';
+
+ Object.entries(colorGroups).forEach(([color, highlights]) => {
+ const colorName = this.getColorName(color);
+ const allNotes = highlights.flatMap(h =>
+ this.notes.filter(note => note.highlight_id === h.id)
+ );
+
+ tooltipHTML += `
+
+
+
+
+
${colorName} 메모 (${allNotes.length})
+
+
+
+
+
+ ${allNotes.length > 0 ?
+ allNotes.map(note => `
+
+
${note.content}
+
+ ${this.formatShortDate(note.created_at)} · Administrator
+
+
+
+ `).join('') :
+ '
메모가 없습니다
'
+ }
+
+
+ `;
+ });
+
+ tooltipHTML += '
+
+
+ `;
+
+ tooltipHTML += `
+
+
+
+ `;
+
+ tooltip.innerHTML = tooltipHTML;
+
+ // 위치 계산
+ const rect = element.getBoundingClientRect();
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+ const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+ document.body.appendChild(tooltip);
+
+ // 말풍선 위치 조정
+ const tooltipRect = tooltip.getBoundingClientRect();
+ let top = rect.bottom + scrollTop + 5;
+ let left = rect.left + scrollLeft;
+
+ // 화면 경계 체크
+ if (left + tooltipRect.width > window.innerWidth) {
+ left = window.innerWidth - tooltipRect.width - 10;
+ }
+ if (top + tooltipRect.height > window.innerHeight + scrollTop) {
+ top = rect.top + scrollTop - tooltipRect.height - 5;
+ }
+
+ tooltip.style.top = top + 'px';
+ tooltip.style.left = left + 'px';
+
+ // 외부 클릭 시 닫기
+ setTimeout(() => {
+ document.addEventListener('click', this.handleTooltipOutsideClick.bind(this));
+ }, 100);
+ }
+
+ /**
+ * 말풍선 숨기기
+ */
+ hideTooltip() {
+ const highlightTooltip = document.getElementById('highlight-tooltip');
+ if (highlightTooltip) {
+ highlightTooltip.remove();
+ }
+
+ document.removeEventListener('click', this.handleTooltipOutsideClick.bind(this));
+ }
+
+ /**
+ * 말풍선 외부 클릭 처리
+ */
+ handleTooltipOutsideClick(e) {
+ const highlightTooltip = document.getElementById('highlight-tooltip');
+
+ const isOutsideHighlightTooltip = highlightTooltip && !highlightTooltip.contains(e.target);
+
+ if (isOutsideHighlightTooltip) {
+ this.hideTooltip();
+ }
+ }
+
+ /**
+ * 메모 추가 폼 표시
+ */
+ showAddNoteForm(highlightId) {
+ console.log('🔍 showAddNoteForm 호출됨, highlightId:', highlightId);
+ const tooltip = document.getElementById('highlight-tooltip');
+ if (!tooltip) return;
+
+ const notesList = document.getElementById(`notes-list-${highlightId}`);
+ if (!notesList) return;
+
+ // 기존 폼이 있으면 제거
+ const existingForm = document.getElementById('add-note-form');
+ if (existingForm) {
+ existingForm.remove();
+ }
+
+ const formHTML = `
+
+ `;
+
+ notesList.insertAdjacentHTML('afterend', formHTML);
+
+ // 텍스트 영역에 포커스
+ setTimeout(() => {
+ document.getElementById('new-note-content').focus();
+ }, 100);
+ }
+
+ /**
+ * 메모 추가 취소
+ */
+ cancelAddNote(highlightId) {
+ const form = document.getElementById('add-note-form');
+ if (form) {
+ form.remove();
+ }
+
+ // 툴팁 다시 표시
+ const highlight = this.highlights.find(h => h.id === highlightId);
+ if (highlight) {
+ const element = document.querySelector(`[data-highlight-id="${highlightId}"]`);
+ if (element) {
+ this.showHighlightTooltip(highlight, element);
+ }
+ }
+ }
+
+ /**
+ * 새 메모 저장
+ */
+ async saveNewNote(highlightId) {
+ const content = document.getElementById('new-note-content').value.trim();
+ if (!content) {
+ alert('메모 내용을 입력해주세요');
+ return;
+ }
+
+ try {
+ const noteData = {
+ highlight_id: highlightId,
+ content: content
+ };
+
+ // 문서 타입에 따라 다른 API 호출
+ let note;
+ if (window.documentViewerInstance.contentType === 'note') {
+ noteData.note_id = window.documentViewerInstance.documentId;
+ note = await this.api.post('/note-notes/', noteData);
+ } else {
+ noteData.document_id = window.documentViewerInstance.documentId;
+ note = await this.api.createNote(noteData);
+ }
+
+ this.notes.push(note);
+
+ // 폼 제거
+ const form = document.getElementById('add-note-form');
+ if (form) {
+ form.remove();
+ }
+
+ // 툴팁 다시 표시
+ const highlight = this.highlights.find(h => h.id === highlightId);
+ if (highlight) {
+ const element = document.querySelector(`[data-highlight-id="${highlightId}"]`);
+ if (element) {
+ this.showHighlightTooltip(highlight, element);
+ }
+ }
+
+ } catch (error) {
+ console.error('Failed to save note:', error);
+ alert('메모 저장에 실패했습니다');
+ }
+ }
+
+ /**
+ * 날짜 포맷팅 (짧은 형식)
+ */
+ formatShortDate(dateString) {
+ if (!dateString) return '';
+ const date = new Date(dateString);
+ const now = new Date();
+ const diffTime = Math.abs(now - date);
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+ if (diffDays === 1) {
+ return '오늘';
+ } else if (diffDays <= 7) {
+ return `${diffDays}일 전`;
+ } else {
+ return date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
+ }
+ }
+
+ /**
+ * 텍스트 선택 리스너 제거 (정리용)
+ */
+ removeTextSelectionListener() {
+ if (this.textSelectionHandler) {
+ document.removeEventListener('mouseup', this.textSelectionHandler);
+ this.textSelectionHandler = null;
+ }
+ }
+}
+
+// 전역으로 내보내기
+window.HighlightManager = HighlightManager;
diff --git a/frontend/static/js/viewer/features/link-manager.js b/frontend/static/js/viewer/features/link-manager.js
new file mode 100644
index 0000000..7c6e685
--- /dev/null
+++ b/frontend/static/js/viewer/features/link-manager.js
@@ -0,0 +1,591 @@
+/**
+ * LinkManager 모듈
+ * 문서 링크 및 백링크 통합 관리
+ */
+class LinkManager {
+ constructor(api) {
+ console.log('🔗 LinkManager 초기화 시작');
+ this.api = api;
+ // 캐싱된 API 사용 (사용 가능한 경우)
+ this.cachedApi = window.cachedApi || api;
+ this.documentLinks = [];
+ this.backlinks = [];
+ this.selectedText = '';
+ this.selectedRange = null;
+ this.availableBooks = [];
+ this.filteredDocuments = [];
+
+ console.log('✅ LinkManager 초기화 완료');
+ }
+
+ /**
+ * 문서 링크 데이터 로드
+ */
+ async loadDocumentLinks(documentId) {
+ try {
+ this.documentLinks = await this.cachedApi.get('/document-links', { document_id: documentId }, { category: 'links' }).catch(() => []);
+ return this.documentLinks || [];
+ } catch (error) {
+ console.error('문서 링크 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 백링크 데이터 로드
+ */
+ async loadBacklinks(documentId) {
+ try {
+ this.backlinks = await this.cachedApi.get('/document-links/backlinks', { target_document_id: documentId }, { category: 'links' }).catch(() => []);
+ return this.backlinks || [];
+ } catch (error) {
+ console.error('백링크 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 문서 링크 렌더링
+ */
+ renderDocumentLinks() {
+ const documentContent = document.getElementById('document-content');
+ if (!documentContent) return;
+
+ console.log('🔗 링크 렌더링 시작 - 총', this.documentLinks.length, '개');
+
+ // 기존 링크 제거
+ const existingLinks = documentContent.querySelectorAll('.document-link');
+ existingLinks.forEach(el => {
+ const parent = el.parentNode;
+ parent.replaceChild(document.createTextNode(el.textContent), el);
+ parent.normalize();
+ });
+
+ // 각 링크 렌더링
+ this.documentLinks.forEach(link => {
+ this.renderSingleLink(link);
+ });
+
+ console.log('✅ 링크 렌더링 완료');
+ }
+
+ /**
+ * 개별 링크 렌더링
+ */
+ renderSingleLink(link) {
+ const content = document.getElementById('document-content');
+ const textContent = content.textContent;
+
+ if (link.start_offset >= textContent.length || link.end_offset > textContent.length) {
+ console.warn('링크 위치가 텍스트 범위를 벗어남:', link);
+ return;
+ }
+
+ const walker = document.createTreeWalker(
+ content,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let currentOffset = 0;
+ let node;
+
+ while (node = walker.nextNode()) {
+ const nodeLength = node.textContent.length;
+ const nodeStart = currentOffset;
+ const nodeEnd = currentOffset + nodeLength;
+
+ // 링크 범위와 겹치는지 확인
+ if (nodeEnd > link.start_offset && nodeStart < link.end_offset) {
+ const linkStart = Math.max(0, link.start_offset - nodeStart);
+ const linkEnd = Math.min(nodeLength, link.end_offset - nodeStart);
+
+ if (linkStart < linkEnd) {
+ this.applyLinkToNode(node, linkStart, linkEnd, link);
+ break;
+ }
+ }
+
+ currentOffset = nodeEnd;
+ }
+ }
+
+ /**
+ * 텍스트 노드에 링크 적용
+ */
+ applyLinkToNode(textNode, start, end, link) {
+ const text = textNode.textContent;
+ const beforeText = text.substring(0, start);
+ const linkText = text.substring(start, end);
+ const afterText = text.substring(end);
+
+ // 링크 스팬 생성
+ const span = document.createElement('span');
+ span.className = 'document-link';
+ span.textContent = linkText;
+ span.dataset.linkId = link.id;
+
+ // 링크 스타일 (보라색) - 레이아웃 안전
+ span.style.cssText = `
+ color: #7C3AED !important;
+ text-decoration: underline !important;
+ cursor: pointer !important;
+ background-color: rgba(124, 58, 237, 0.1) !important;
+ border-radius: 2px !important;
+ padding: 0 1px !important;
+ display: inline !important;
+ line-height: inherit !important;
+ vertical-align: baseline !important;
+ margin: 0 !important;
+ box-sizing: border-box !important;
+ `;
+
+ // 클릭 이벤트 추가
+ span.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.showLinkTooltip(link, span);
+ });
+
+ // DOM 교체
+ const parent = textNode.parentNode;
+ const fragment = document.createDocumentFragment();
+
+ if (beforeText) fragment.appendChild(document.createTextNode(beforeText));
+ fragment.appendChild(span);
+ if (afterText) fragment.appendChild(document.createTextNode(afterText));
+
+ parent.replaceChild(fragment, textNode);
+ }
+
+ /**
+ * 백링크 렌더링 (링크와 동일한 방식)
+ */
+ renderBacklinks() {
+ const documentContent = document.getElementById('document-content');
+ if (!documentContent) return;
+
+ console.log('🔗 백링크 렌더링 시작 - 총', this.backlinks.length, '개');
+
+ // 기존 백링크는 제거하지 않고 중복 체크만 함
+ const existingBacklinks = documentContent.querySelectorAll('.backlink-highlight');
+ console.log(`🔍 기존 백링크 ${existingBacklinks.length}개 발견 (유지)`);
+
+ // 각 백링크 렌더링 (중복되지 않는 것만)
+ this.backlinks.forEach(backlink => {
+ // 이미 렌더링된 백링크인지 확인
+ const existingBacklink = Array.from(existingBacklinks).find(el =>
+ el.dataset.backlinkId === backlink.id.toString()
+ );
+
+ if (!existingBacklink) {
+ console.log(`🆕 새로운 백링크 렌더링: ${backlink.id}`);
+ this.renderSingleBacklink(backlink);
+ } else {
+ console.log(`✅ 백링크 이미 존재: ${backlink.id}`);
+ }
+ });
+
+ console.log('✅ 백링크 렌더링 완료');
+ }
+
+ /**
+ * 개별 백링크 렌더링
+ */
+ renderSingleBacklink(backlink) {
+ const content = document.getElementById('document-content');
+ if (!content) return;
+
+ // 실제 문서 내용만 추출 (CSS, 스크립트 제외)
+ const contentClone = content.cloneNode(true);
+ // 스타일 태그와 스크립트 태그 제거
+ const styleTags = contentClone.querySelectorAll('style, script');
+ styleTags.forEach(tag => tag.remove());
+
+ const textContent = contentClone.textContent || contentClone.innerText || '';
+
+ // target_text가 있으면 사용, 없으면 selected_text 사용
+ const searchText = backlink.target_text || backlink.selected_text;
+ if (!searchText) return;
+
+ // 텍스트 검색 (대소문자 무시, 공백 정규화)
+ const normalizedContent = textContent.replace(/\s+/g, ' ').trim();
+ const normalizedSearchText = searchText.replace(/\s+/g, ' ').trim();
+
+ let textIndex = normalizedContent.indexOf(normalizedSearchText);
+ if (textIndex === -1) {
+ // 부분 검색 시도
+ const words = normalizedSearchText.split(' ');
+ if (words.length > 1) {
+ // 첫 번째와 마지막 단어로 검색
+ const firstWord = words[0];
+ const lastWord = words[words.length - 1];
+ const partialPattern = firstWord + '.*' + lastWord;
+ const regex = new RegExp(partialPattern, 'i');
+ const match = normalizedContent.match(regex);
+ if (match) {
+ textIndex = match.index;
+ console.log('✅ 부분 매칭으로 백링크 텍스트 찾음:', searchText);
+ }
+ }
+ }
+
+ if (textIndex === -1) {
+ console.warn('백링크 텍스트를 찾을 수 없음:', searchText);
+ console.log('검색 대상 텍스트 미리보기:', normalizedContent.substring(0, 200));
+ return;
+ }
+
+ const walker = document.createTreeWalker(
+ content,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let currentOffset = 0;
+ let node;
+
+ while (node = walker.nextNode()) {
+ const nodeLength = node.textContent.length;
+ const nodeStart = currentOffset;
+ const nodeEnd = currentOffset + nodeLength;
+
+ // 백링크 범위와 겹치는지 확인
+ if (nodeEnd > textIndex && nodeStart < textIndex + searchText.length) {
+ const backlinkStart = Math.max(0, textIndex - nodeStart);
+ const backlinkEnd = Math.min(nodeLength, textIndex + searchText.length - nodeStart);
+
+ if (backlinkStart < backlinkEnd) {
+ this.applyBacklinkToNode(node, backlinkStart, backlinkEnd, backlink);
+ break;
+ }
+ }
+
+ currentOffset = nodeEnd;
+ }
+ }
+
+ /**
+ * 텍스트 노드에 백링크 적용
+ */
+ applyBacklinkToNode(textNode, start, end, backlink) {
+ const text = textNode.textContent;
+ const beforeText = text.substring(0, start);
+ const backlinkText = text.substring(start, end);
+ const afterText = text.substring(end);
+
+ // 백링크 스팬 생성
+ const span = document.createElement('span');
+ span.className = 'backlink-highlight';
+ span.textContent = backlinkText;
+ span.dataset.backlinkId = backlink.id;
+
+ // 백링크 스타일 (주황색) - 레이아웃 안전
+ span.style.cssText = `
+ color: #EA580C !important;
+ text-decoration: underline !important;
+ cursor: pointer !important;
+ background-color: rgba(234, 88, 12, 0.2) !important;
+ border: 1px solid #EA580C !important;
+ border-radius: 3px !important;
+ padding: 0 2px !important;
+ font-weight: bold !important;
+ display: inline !important;
+ line-height: inherit !important;
+ vertical-align: baseline !important;
+ margin: 0 !important;
+ box-sizing: border-box !important;
+ `;
+
+ // 클릭 이벤트 추가
+ span.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.showBacklinkTooltip(backlink, span);
+ });
+
+ // DOM 교체
+ const parent = textNode.parentNode;
+ const fragment = document.createDocumentFragment();
+
+ if (beforeText) fragment.appendChild(document.createTextNode(beforeText));
+ fragment.appendChild(span);
+ if (afterText) fragment.appendChild(document.createTextNode(afterText));
+
+ parent.replaceChild(fragment, textNode);
+ }
+
+ /**
+ * 링크 툴팁 표시
+ */
+ showLinkTooltip(link, element) {
+ this.hideTooltip();
+
+ const tooltip = document.createElement('div');
+ tooltip.id = 'link-tooltip';
+ tooltip.className = 'absolute bg-white border border-gray-300 rounded-lg shadow-lg p-4 z-50 max-w-lg';
+ tooltip.style.minWidth = '350px';
+
+ const tooltipHTML = `
+
+
링크 정보
+
+ "${link.selected_text}"
+
+
+
연결된 문서
+
+
${link.target_document_title}
+ ${link.target_text ? `
대상 텍스트: "${link.target_text}"
` : ''}
+
+
+
+
+
+
+
+
+
+ `;
+
+ tooltip.innerHTML = tooltipHTML;
+ this.positionTooltip(tooltip, element);
+ }
+
+ /**
+ * 백링크 툴팁 표시
+ */
+ showBacklinkTooltip(backlink, element) {
+ this.hideTooltip();
+
+ const tooltip = document.createElement('div');
+ tooltip.id = 'backlink-tooltip';
+ tooltip.className = 'absolute bg-white border border-gray-300 rounded-lg shadow-lg p-4 z-50 max-w-lg';
+ tooltip.style.minWidth = '350px';
+
+ const tooltipHTML = `
+
+
백링크 정보
+
+ "${backlink.target_text || backlink.selected_text}"
+
+
+
참조 문서
+
+
${backlink.source_document_title}
+
원본 텍스트: "${backlink.selected_text}"
+
+
+
+
+
+
+
+
+ `;
+
+ tooltip.innerHTML = tooltipHTML;
+ this.positionTooltip(tooltip, element);
+ }
+
+ /**
+ * 툴팁 위치 설정
+ */
+ positionTooltip(tooltip, element) {
+ const rect = element.getBoundingClientRect();
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+ const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+ document.body.appendChild(tooltip);
+
+ // 툴팁 위치 조정
+ const tooltipRect = tooltip.getBoundingClientRect();
+ let top = rect.bottom + scrollTop + 5;
+ let left = rect.left + scrollLeft;
+
+ // 화면 경계 체크
+ if (left + tooltipRect.width > window.innerWidth) {
+ left = window.innerWidth - tooltipRect.width - 10;
+ }
+ if (top + tooltipRect.height > window.innerHeight + scrollTop) {
+ top = rect.top + scrollTop - tooltipRect.height - 5;
+ }
+
+ tooltip.style.top = top + 'px';
+ tooltip.style.left = left + 'px';
+
+ // 외부 클릭 시 닫기
+ setTimeout(() => {
+ document.addEventListener('click', this.handleTooltipOutsideClick.bind(this));
+ }, 100);
+ }
+
+ /**
+ * 툴팁 숨기기
+ */
+ hideTooltip() {
+ const linkTooltip = document.getElementById('link-tooltip');
+ if (linkTooltip) {
+ linkTooltip.remove();
+ }
+
+ const backlinkTooltip = document.getElementById('backlink-tooltip');
+ if (backlinkTooltip) {
+ backlinkTooltip.remove();
+ }
+
+ document.removeEventListener('click', this.handleTooltipOutsideClick.bind(this));
+ }
+
+ /**
+ * 툴팁 외부 클릭 처리
+ */
+ handleTooltipOutsideClick(e) {
+ const linkTooltip = document.getElementById('link-tooltip');
+ const backlinkTooltip = document.getElementById('backlink-tooltip');
+
+ const isOutsideLinkTooltip = linkTooltip && !linkTooltip.contains(e.target);
+ const isOutsideBacklinkTooltip = backlinkTooltip && !backlinkTooltip.contains(e.target);
+
+ if (isOutsideLinkTooltip || isOutsideBacklinkTooltip) {
+ this.hideTooltip();
+ }
+ }
+
+ /**
+ * 링크된 문서로 이동
+ */
+ navigateToLinkedDocument(targetDocumentId, linkInfo) {
+ let targetUrl = `/viewer.html?id=${targetDocumentId}`;
+
+ // 특정 텍스트 위치가 있는 경우 URL에 추가
+ if (linkInfo.target_text && linkInfo.target_start_offset !== undefined) {
+ targetUrl += `&highlight_text=${encodeURIComponent(linkInfo.target_text)}`;
+ targetUrl += `&start_offset=${linkInfo.target_start_offset}`;
+ targetUrl += `&end_offset=${linkInfo.target_end_offset}`;
+ }
+
+ window.location.href = targetUrl;
+ }
+
+ /**
+ * 원본 문서로 이동 (백링크)
+ */
+ navigateToSourceDocument(sourceDocumentId, backlinkInfo) {
+ let targetUrl = `/viewer.html?id=${sourceDocumentId}`;
+
+ // 원본 텍스트 위치가 있는 경우 URL에 추가
+ if (backlinkInfo.selected_text && backlinkInfo.start_offset !== undefined) {
+ targetUrl += `&highlight_text=${encodeURIComponent(backlinkInfo.selected_text)}`;
+ targetUrl += `&start_offset=${backlinkInfo.start_offset}`;
+ targetUrl += `&end_offset=${backlinkInfo.end_offset}`;
+ }
+
+ window.location.href = targetUrl;
+ }
+
+ /**
+ * 링크 삭제
+ */
+ async deleteLink(linkId) {
+ if (!confirm('이 링크를 삭제하시겠습니까?')) {
+ return;
+ }
+
+ try {
+ await this.api.delete(`/document-links/${linkId}`);
+ this.documentLinks = this.documentLinks.filter(l => l.id !== linkId);
+
+ this.hideTooltip();
+ this.renderDocumentLinks();
+
+ console.log('링크 삭제 완료:', linkId);
+ } catch (error) {
+ console.error('링크 삭제 실패:', error);
+ alert('링크 삭제에 실패했습니다');
+ }
+ }
+
+ /**
+ * 선택된 텍스트로 링크 생성
+ */
+ async createLinkFromSelection(documentId, selectedText, selectedRange) {
+ if (!selectedText || !selectedRange) return;
+
+ try {
+ console.log('🔗 링크 생성 시작:', selectedText);
+
+ // ViewerCore의 링크 생성 모달 표시
+ if (window.documentViewerInstance) {
+ window.documentViewerInstance.selectedText = selectedText;
+ window.documentViewerInstance.selectedRange = selectedRange;
+ window.documentViewerInstance.showLinkModal = true;
+ window.documentViewerInstance.linkForm.selected_text = selectedText;
+
+ // 텍스트 오프셋 계산
+ const documentContent = document.getElementById('document-content');
+ const fullText = documentContent.textContent;
+ const startOffset = this.getTextOffset(documentContent, selectedRange.startContainer, selectedRange.startOffset);
+ const endOffset = startOffset + selectedText.length;
+
+ window.documentViewerInstance.linkForm.start_offset = startOffset;
+ window.documentViewerInstance.linkForm.end_offset = endOffset;
+ }
+
+ } catch (error) {
+ console.error('링크 생성 실패:', error);
+ alert('링크 생성에 실패했습니다: ' + error.message);
+ }
+ }
+
+ /**
+ * 텍스트 오프셋 계산
+ */
+ getTextOffset(root, node, offset) {
+ let textOffset = 0;
+ const walker = document.createTreeWalker(
+ root,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let currentNode;
+ while (currentNode = walker.nextNode()) {
+ if (currentNode === node) {
+ return textOffset + offset;
+ }
+ textOffset += currentNode.textContent.length;
+ }
+
+ return textOffset;
+ }
+}
+
+// 전역으로 내보내기
+window.LinkManager = LinkManager;
diff --git a/frontend/static/js/viewer/features/ui-manager.js b/frontend/static/js/viewer/features/ui-manager.js
new file mode 100644
index 0000000..d6a4c68
--- /dev/null
+++ b/frontend/static/js/viewer/features/ui-manager.js
@@ -0,0 +1,413 @@
+/**
+ * UIManager 모듈
+ * UI 컴포넌트 및 상태 관리
+ */
+class UIManager {
+ constructor() {
+ console.log('🎨 UIManager 초기화 시작');
+
+ // UI 상태
+ this.showNotesPanel = false;
+ this.showBookmarksPanel = false;
+ this.showBacklinks = false;
+ this.activePanel = 'notes';
+
+ // 모달 상태
+ this.showNoteModal = false;
+ this.showBookmarkModal = false;
+ this.showLinkModal = false;
+ this.showNotesModal = false;
+ this.showBookmarksModal = false;
+ this.showLinksModal = false;
+ this.showBacklinksModal = false;
+
+ // 기능 메뉴 상태
+ this.activeFeatureMenu = null;
+
+ // 검색 상태
+ this.searchQuery = '';
+ this.noteSearchQuery = '';
+ this.filteredNotes = [];
+
+ // 텍스트 선택 모드
+ this.textSelectorUISetup = false;
+
+ console.log('✅ UIManager 초기화 완료');
+ }
+
+ /**
+ * 기능 메뉴 토글
+ */
+ toggleFeatureMenu(feature) {
+ if (this.activeFeatureMenu === feature) {
+ this.activeFeatureMenu = null;
+ } else {
+ this.activeFeatureMenu = feature;
+
+ // 해당 기능의 모달 표시
+ switch(feature) {
+ case 'link':
+ this.showLinksModal = true;
+ break;
+ case 'memo':
+ this.showNotesModal = true;
+ break;
+ case 'bookmark':
+ this.showBookmarksModal = true;
+ break;
+ case 'backlink':
+ this.showBacklinksModal = true;
+ break;
+ }
+ }
+ }
+
+ /**
+ * 노트 모달 열기
+ */
+ openNoteModal(highlight = null) {
+ console.log('📝 노트 모달 열기');
+ if (highlight) {
+ console.log('🔍 하이라이트와 연결된 노트 모달:', highlight);
+ }
+ this.showNoteModal = true;
+ }
+
+ /**
+ * 노트 모달 닫기
+ */
+ closeNoteModal() {
+ this.showNoteModal = false;
+ }
+
+ /**
+ * 링크 모달 열기
+ */
+ openLinkModal() {
+ console.log('🔗 링크 모달 열기');
+ console.log('🔗 showLinksModal 설정 전:', this.showLinksModal);
+ this.showLinksModal = true;
+ this.showLinkModal = true; // 기존 호환성
+ console.log('🔗 showLinksModal 설정 후:', this.showLinksModal);
+ }
+
+ /**
+ * 링크 모달 닫기
+ */
+ closeLinkModal() {
+ this.showLinksModal = false;
+ this.showLinkModal = false;
+ }
+
+ /**
+ * 북마크 모달 닫기
+ */
+ closeBookmarkModal() {
+ this.showBookmarkModal = false;
+ }
+
+ /**
+ * 검색 결과 하이라이트
+ */
+ highlightSearchResults(element, searchText) {
+ if (!searchText.trim()) return;
+
+ // 기존 검색 하이라이트 제거
+ const existingHighlights = element.querySelectorAll('.search-highlight');
+ existingHighlights.forEach(highlight => {
+ const parent = highlight.parentNode;
+ parent.replaceChild(document.createTextNode(highlight.textContent), highlight);
+ parent.normalize();
+ });
+
+ if (!searchText) return;
+
+ // 새로운 검색 하이라이트 적용
+ const walker = document.createTreeWalker(
+ element,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ const textNodes = [];
+ let node;
+ while (node = walker.nextNode()) {
+ textNodes.push(node);
+ }
+
+ const searchRegex = new RegExp(`(${searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+
+ textNodes.forEach(textNode => {
+ const text = textNode.textContent;
+ if (searchRegex.test(text)) {
+ const highlightedHTML = text.replace(searchRegex, '$1');
+ const wrapper = document.createElement('div');
+ wrapper.innerHTML = highlightedHTML;
+
+ const fragment = document.createDocumentFragment();
+ while (wrapper.firstChild) {
+ fragment.appendChild(wrapper.firstChild);
+ }
+
+ textNode.parentNode.replaceChild(fragment, textNode);
+ }
+ });
+ }
+
+ /**
+ * 노트 검색 필터링
+ */
+ filterNotes(notes) {
+ if (!this.noteSearchQuery.trim()) {
+ this.filteredNotes = notes;
+ return notes;
+ }
+
+ const query = this.noteSearchQuery.toLowerCase();
+ this.filteredNotes = notes.filter(note =>
+ note.content.toLowerCase().includes(query) ||
+ (note.tags && note.tags.some(tag => tag.toLowerCase().includes(query)))
+ );
+
+ return this.filteredNotes;
+ }
+
+ /**
+ * 텍스트 선택 모드 UI 설정
+ */
+ setupTextSelectorUI() {
+ console.log('🔧 setupTextSelectorUI 함수 실행됨');
+
+ // 중복 실행 방지
+ if (this.textSelectorUISetup) {
+ console.log('⚠️ 텍스트 선택 모드 UI가 이미 설정됨 - 중복 실행 방지');
+ return;
+ }
+
+ // 헤더 숨기기
+ const header = document.querySelector('header');
+ if (header) {
+ header.style.display = 'none';
+ }
+
+ // 안내 메시지 표시
+ const messageDiv = document.createElement('div');
+ messageDiv.id = 'text-selection-message';
+ messageDiv.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+ messageDiv.innerHTML = `
+
+
+ 연결할 텍스트를 드래그하여 선택해주세요
+
+ `;
+ document.body.appendChild(messageDiv);
+
+ this.textSelectorUISetup = true;
+ console.log('✅ 텍스트 선택 모드 UI 설정 완료');
+ }
+
+ /**
+ * 텍스트 선택 확인 UI 표시
+ */
+ showTextSelectionConfirm(selectedText, startOffset, endOffset) {
+ // 기존 확인 UI 제거
+ const existingConfirm = document.getElementById('text-selection-confirm');
+ if (existingConfirm) {
+ existingConfirm.remove();
+ }
+
+ // 확인 UI 생성
+ const confirmDiv = document.createElement('div');
+ confirmDiv.id = 'text-selection-confirm';
+ confirmDiv.className = 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white border border-gray-300 rounded-lg shadow-xl p-6 z-50 max-w-md';
+ confirmDiv.innerHTML = `
+
+
+
+
+
+ `;
+ document.body.appendChild(confirmDiv);
+ }
+
+ /**
+ * 링크 생성 UI 표시
+ */
+ showLinkCreationUI() {
+ console.log('🔗 링크 생성 UI 표시');
+ this.openLinkModal();
+ }
+
+ /**
+ * 성공 메시지 표시
+ */
+ showSuccessMessage(message) {
+ const messageDiv = document.createElement('div');
+ messageDiv.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2';
+ messageDiv.innerHTML = `
+
+ ${message}
+ `;
+
+ document.body.appendChild(messageDiv);
+
+ // 3초 후 자동 제거
+ setTimeout(() => {
+ if (messageDiv.parentNode) {
+ messageDiv.parentNode.removeChild(messageDiv);
+ }
+ }, 3000);
+ }
+
+ /**
+ * 오류 메시지 표시
+ */
+ showErrorMessage(message) {
+ const messageDiv = document.createElement('div');
+ messageDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2';
+ messageDiv.innerHTML = `
+
+ ${message}
+ `;
+
+ document.body.appendChild(messageDiv);
+
+ // 5초 후 자동 제거
+ setTimeout(() => {
+ if (messageDiv.parentNode) {
+ messageDiv.parentNode.removeChild(messageDiv);
+ }
+ }, 5000);
+ }
+
+ /**
+ * 로딩 스피너 표시
+ */
+ showLoadingSpinner(container, message = '로딩 중...') {
+ const spinner = document.createElement('div');
+ spinner.className = 'flex items-center justify-center py-8';
+ spinner.innerHTML = `
+
+ ${message}
+ `;
+
+ if (container) {
+ container.innerHTML = '';
+ container.appendChild(spinner);
+ }
+
+ return spinner;
+ }
+
+ /**
+ * 로딩 스피너 제거
+ */
+ hideLoadingSpinner(container) {
+ if (container) {
+ const spinner = container.querySelector('.animate-spin');
+ if (spinner && spinner.parentElement) {
+ spinner.parentElement.remove();
+ }
+ }
+ }
+
+ /**
+ * 모달 배경 클릭 시 닫기
+ */
+ handleModalBackgroundClick(event, modalId) {
+ if (event.target === event.currentTarget) {
+ switch(modalId) {
+ case 'notes':
+ this.closeNoteModal();
+ break;
+ case 'bookmarks':
+ this.closeBookmarkModal();
+ break;
+ case 'links':
+ this.closeLinkModal();
+ break;
+ }
+ }
+ }
+
+ /**
+ * 패널 토글
+ */
+ togglePanel(panelType) {
+ switch(panelType) {
+ case 'notes':
+ this.showNotesPanel = !this.showNotesPanel;
+ if (this.showNotesPanel) {
+ this.showBookmarksPanel = false;
+ this.activePanel = 'notes';
+ }
+ break;
+ case 'bookmarks':
+ this.showBookmarksPanel = !this.showBookmarksPanel;
+ if (this.showBookmarksPanel) {
+ this.showNotesPanel = false;
+ this.activePanel = 'bookmarks';
+ }
+ break;
+ case 'backlinks':
+ this.showBacklinks = !this.showBacklinks;
+ break;
+ }
+ }
+
+ /**
+ * 검색 쿼리 업데이트
+ */
+ updateSearchQuery(query) {
+ this.searchQuery = query;
+ }
+
+ /**
+ * 노트 검색 쿼리 업데이트
+ */
+ updateNoteSearchQuery(query) {
+ this.noteSearchQuery = query;
+ }
+
+ /**
+ * UI 상태 초기화
+ */
+ resetUIState() {
+ this.showNotesPanel = false;
+ this.showBookmarksPanel = false;
+ this.showBacklinks = false;
+ this.activePanel = 'notes';
+ this.activeFeatureMenu = null;
+ this.searchQuery = '';
+ this.noteSearchQuery = '';
+ this.filteredNotes = [];
+ }
+
+ /**
+ * 모든 모달 닫기
+ */
+ closeAllModals() {
+ this.showNoteModal = false;
+ this.showBookmarkModal = false;
+ this.showLinkModal = false;
+ this.showNotesModal = false;
+ this.showBookmarksModal = false;
+ this.showLinksModal = false;
+ this.showBacklinksModal = false;
+ }
+}
+
+// 전역으로 내보내기
+window.UIManager = UIManager;
diff --git a/frontend/static/js/viewer/utils/cache-manager.js b/frontend/static/js/viewer/utils/cache-manager.js
new file mode 100644
index 0000000..ea9785c
--- /dev/null
+++ b/frontend/static/js/viewer/utils/cache-manager.js
@@ -0,0 +1,396 @@
+/**
+ * CacheManager - 데이터 캐싱 및 로컬 스토리지 관리
+ * API 응답, 문서 데이터, 사용자 설정 등을 효율적으로 캐싱합니다.
+ */
+class CacheManager {
+ constructor() {
+ console.log('💾 CacheManager 초기화 시작');
+
+ // 캐시 설정
+ this.config = {
+ // 캐시 만료 시간 (밀리초)
+ ttl: {
+ document: 30 * 60 * 1000, // 문서: 30분
+ highlights: 10 * 60 * 1000, // 하이라이트: 10분
+ notes: 10 * 60 * 1000, // 메모: 10분
+ bookmarks: 15 * 60 * 1000, // 북마크: 15분
+ links: 15 * 60 * 1000, // 링크: 15분
+ navigation: 60 * 60 * 1000, // 네비게이션: 1시간
+ userSettings: 24 * 60 * 60 * 1000 // 사용자 설정: 24시간
+ },
+ // 캐시 키 접두사
+ prefix: 'docviewer_',
+ // 최대 캐시 크기 (항목 수)
+ maxItems: 100,
+ // 로컬 스토리지 사용 여부
+ useLocalStorage: true
+ };
+
+ // 메모리 캐시 (빠른 접근용)
+ this.memoryCache = new Map();
+
+ // 캐시 통계
+ this.stats = {
+ hits: 0,
+ misses: 0,
+ sets: 0,
+ evictions: 0
+ };
+
+ // 초기화 시 오래된 캐시 정리
+ this.cleanupExpiredCache();
+
+ console.log('✅ CacheManager 초기화 완료');
+ }
+
+ /**
+ * 캐시에서 데이터 가져오기
+ */
+ get(key, category = 'default') {
+ const fullKey = this.getFullKey(key, category);
+
+ // 1. 메모리 캐시에서 먼저 확인
+ if (this.memoryCache.has(fullKey)) {
+ const cached = this.memoryCache.get(fullKey);
+ if (this.isValid(cached)) {
+ this.stats.hits++;
+ console.log(`💾 메모리 캐시 HIT: ${fullKey}`);
+ return cached.data;
+ } else {
+ // 만료된 캐시 제거
+ this.memoryCache.delete(fullKey);
+ }
+ }
+
+ // 2. 로컬 스토리지에서 확인
+ if (this.config.useLocalStorage) {
+ try {
+ const stored = localStorage.getItem(fullKey);
+ if (stored) {
+ const cached = JSON.parse(stored);
+ if (this.isValid(cached)) {
+ // 메모리 캐시에도 저장
+ this.memoryCache.set(fullKey, cached);
+ this.stats.hits++;
+ console.log(`💾 로컬 스토리지 캐시 HIT: ${fullKey}`);
+ return cached.data;
+ } else {
+ // 만료된 캐시 제거
+ localStorage.removeItem(fullKey);
+ }
+ }
+ } catch (error) {
+ console.warn('로컬 스토리지 읽기 오류:', error);
+ }
+ }
+
+ this.stats.misses++;
+ console.log(`💾 캐시 MISS: ${fullKey}`);
+ return null;
+ }
+
+ /**
+ * 캐시에 데이터 저장
+ */
+ set(key, data, category = 'default', customTtl = null) {
+ const fullKey = this.getFullKey(key, category);
+ const ttl = customTtl || this.config.ttl[category] || this.config.ttl.default || 10 * 60 * 1000;
+
+ const cached = {
+ data: data,
+ timestamp: Date.now(),
+ ttl: ttl,
+ category: category,
+ size: this.estimateSize(data)
+ };
+
+ // 메모리 캐시에 저장
+ this.memoryCache.set(fullKey, cached);
+
+ // 로컬 스토리지에 저장
+ if (this.config.useLocalStorage) {
+ try {
+ localStorage.setItem(fullKey, JSON.stringify(cached));
+ } catch (error) {
+ console.warn('로컬 스토리지 저장 오류 (용량 부족?):', error);
+ // 용량 부족 시 오래된 캐시 정리 후 재시도
+ this.cleanupOldCache();
+ try {
+ localStorage.setItem(fullKey, JSON.stringify(cached));
+ } catch (retryError) {
+ console.error('로컬 스토리지 저장 재시도 실패:', retryError);
+ }
+ }
+ }
+
+ this.stats.sets++;
+ console.log(`💾 캐시 저장: ${fullKey} (TTL: ${ttl}ms)`);
+
+ // 캐시 크기 제한 확인
+ this.enforceMaxItems();
+ }
+
+ /**
+ * 특정 키 또는 카테고리의 캐시 삭제
+ */
+ delete(key, category = 'default') {
+ const fullKey = this.getFullKey(key, category);
+
+ // 메모리 캐시에서 삭제
+ this.memoryCache.delete(fullKey);
+
+ // 로컬 스토리지에서 삭제
+ if (this.config.useLocalStorage) {
+ localStorage.removeItem(fullKey);
+ }
+
+ console.log(`💾 캐시 삭제: ${fullKey}`);
+ }
+
+ /**
+ * 카테고리별 캐시 전체 삭제
+ */
+ deleteCategory(category) {
+ const prefix = this.getFullKey('', category);
+
+ // 메모리 캐시에서 삭제
+ for (const key of this.memoryCache.keys()) {
+ if (key.startsWith(prefix)) {
+ this.memoryCache.delete(key);
+ }
+ }
+
+ // 로컬 스토리지에서 삭제
+ if (this.config.useLocalStorage) {
+ for (let i = localStorage.length - 1; i >= 0; i--) {
+ const key = localStorage.key(i);
+ if (key && key.startsWith(prefix)) {
+ localStorage.removeItem(key);
+ }
+ }
+ }
+
+ console.log(`💾 카테고리 캐시 삭제: ${category}`);
+ }
+
+ /**
+ * 모든 캐시 삭제
+ */
+ clear() {
+ // 메모리 캐시 삭제
+ this.memoryCache.clear();
+
+ // 로컬 스토리지에서 관련 캐시만 삭제
+ if (this.config.useLocalStorage) {
+ for (let i = localStorage.length - 1; i >= 0; i--) {
+ const key = localStorage.key(i);
+ if (key && key.startsWith(this.config.prefix)) {
+ localStorage.removeItem(key);
+ }
+ }
+ }
+
+ // 통계 초기화
+ this.stats = { hits: 0, misses: 0, sets: 0, evictions: 0 };
+
+ console.log('💾 모든 캐시 삭제 완료');
+ }
+
+ /**
+ * 캐시 유효성 검사
+ */
+ isValid(cached) {
+ if (!cached || !cached.timestamp || !cached.ttl) {
+ return false;
+ }
+
+ const age = Date.now() - cached.timestamp;
+ return age < cached.ttl;
+ }
+
+ /**
+ * 만료된 캐시 정리
+ */
+ cleanupExpiredCache() {
+ console.log('🧹 만료된 캐시 정리 시작');
+
+ let cleanedCount = 0;
+
+ // 메모리 캐시 정리
+ for (const [key, cached] of this.memoryCache.entries()) {
+ if (!this.isValid(cached)) {
+ this.memoryCache.delete(key);
+ cleanedCount++;
+ }
+ }
+
+ // 로컬 스토리지 정리
+ if (this.config.useLocalStorage) {
+ for (let i = localStorage.length - 1; i >= 0; i--) {
+ const key = localStorage.key(i);
+ if (key && key.startsWith(this.config.prefix)) {
+ try {
+ const stored = localStorage.getItem(key);
+ if (stored) {
+ const cached = JSON.parse(stored);
+ if (!this.isValid(cached)) {
+ localStorage.removeItem(key);
+ cleanedCount++;
+ }
+ }
+ } catch (error) {
+ // 파싱 오류 시 해당 캐시 삭제
+ localStorage.removeItem(key);
+ cleanedCount++;
+ }
+ }
+ }
+ }
+
+ console.log(`🧹 만료된 캐시 ${cleanedCount}개 정리 완료`);
+ }
+
+ /**
+ * 오래된 캐시 정리 (용량 부족 시)
+ */
+ cleanupOldCache() {
+ console.log('🧹 오래된 캐시 정리 시작');
+
+ const items = [];
+
+ // 로컬 스토리지의 모든 캐시 항목 수집
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i);
+ if (key && key.startsWith(this.config.prefix)) {
+ try {
+ const stored = localStorage.getItem(key);
+ if (stored) {
+ const cached = JSON.parse(stored);
+ items.push({ key, cached });
+ }
+ } catch (error) {
+ // 파싱 오류 시 해당 캐시 삭제
+ localStorage.removeItem(key);
+ }
+ }
+ }
+
+ // 타임스탬프 기준으로 정렬 (오래된 것부터)
+ items.sort((a, b) => a.cached.timestamp - b.cached.timestamp);
+
+ // 오래된 항목의 절반 삭제
+ const deleteCount = Math.floor(items.length / 2);
+ for (let i = 0; i < deleteCount; i++) {
+ localStorage.removeItem(items[i].key);
+ this.memoryCache.delete(items[i].key);
+ }
+
+ console.log(`🧹 오래된 캐시 ${deleteCount}개 정리 완료`);
+ }
+
+ /**
+ * 최대 항목 수 제한 적용
+ */
+ enforceMaxItems() {
+ if (this.memoryCache.size > this.config.maxItems) {
+ const excess = this.memoryCache.size - this.config.maxItems;
+ const keys = Array.from(this.memoryCache.keys());
+
+ // 오래된 항목부터 삭제
+ for (let i = 0; i < excess; i++) {
+ this.memoryCache.delete(keys[i]);
+ this.stats.evictions++;
+ }
+
+ console.log(`💾 캐시 크기 제한으로 ${excess}개 항목 제거`);
+ }
+ }
+
+ /**
+ * 전체 키 생성
+ */
+ getFullKey(key, category) {
+ return `${this.config.prefix}${category}_${key}`;
+ }
+
+ /**
+ * 데이터 크기 추정
+ */
+ estimateSize(data) {
+ try {
+ return JSON.stringify(data).length;
+ } catch {
+ return 0;
+ }
+ }
+
+ /**
+ * 캐시 통계 조회
+ */
+ getStats() {
+ const hitRate = this.stats.hits + this.stats.misses > 0
+ ? (this.stats.hits / (this.stats.hits + this.stats.misses) * 100).toFixed(2)
+ : 0;
+
+ return {
+ ...this.stats,
+ hitRate: `${hitRate}%`,
+ memoryItems: this.memoryCache.size,
+ localStorageItems: this.getLocalStorageItemCount()
+ };
+ }
+
+ /**
+ * 로컬 스토리지 항목 수 조회
+ */
+ getLocalStorageItemCount() {
+ let count = 0;
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i);
+ if (key && key.startsWith(this.config.prefix)) {
+ count++;
+ }
+ }
+ return count;
+ }
+
+ /**
+ * 캐시 상태 리포트
+ */
+ getReport() {
+ const stats = this.getStats();
+ const memoryUsage = Array.from(this.memoryCache.values())
+ .reduce((total, cached) => total + (cached.size || 0), 0);
+
+ return {
+ stats,
+ memoryUsage: `${(memoryUsage / 1024).toFixed(2)} KB`,
+ categories: this.getCategoryStats(),
+ config: this.config
+ };
+ }
+
+ /**
+ * 카테고리별 통계
+ */
+ getCategoryStats() {
+ const categories = {};
+
+ for (const [key, cached] of this.memoryCache.entries()) {
+ const category = cached.category || 'default';
+ if (!categories[category]) {
+ categories[category] = { count: 0, size: 0 };
+ }
+ categories[category].count++;
+ categories[category].size += cached.size || 0;
+ }
+
+ return categories;
+ }
+}
+
+// 전역 캐시 매니저 인스턴스
+window.cacheManager = new CacheManager();
+
+// 전역으로 내보내기
+window.CacheManager = CacheManager;
diff --git a/frontend/static/js/viewer/utils/cached-api.js b/frontend/static/js/viewer/utils/cached-api.js
new file mode 100644
index 0000000..062ac53
--- /dev/null
+++ b/frontend/static/js/viewer/utils/cached-api.js
@@ -0,0 +1,489 @@
+/**
+ * CachedAPI - 캐싱이 적용된 API 래퍼
+ * 기존 DocumentServerAPI를 확장하여 캐싱 기능을 추가합니다.
+ */
+class CachedAPI {
+ constructor(baseAPI) {
+ this.api = baseAPI;
+ this.cache = window.cacheManager;
+
+ console.log('🚀 CachedAPI 초기화 완료');
+ }
+
+ /**
+ * 캐싱이 적용된 GET 요청
+ */
+ async get(endpoint, params = {}, options = {}) {
+ const {
+ useCache = true,
+ category = 'api',
+ ttl = null,
+ forceRefresh = false
+ } = options;
+
+ // 캐시 키 생성
+ const cacheKey = this.generateCacheKey(endpoint, params);
+
+ // 강제 새로고침이 아니고 캐시 사용 설정인 경우 캐시 확인
+ if (useCache && !forceRefresh) {
+ const cached = this.cache.get(cacheKey, category);
+ if (cached) {
+ console.log(`🚀 API 캐시 사용: ${endpoint}`);
+ return cached;
+ }
+ }
+
+ try {
+ console.log(`🌐 API 호출: ${endpoint}`);
+
+ // 실제 백엔드 API 엔드포인트로 매핑
+ let response;
+ if (endpoint === '/highlights' && params.document_id) {
+ // 실제: /highlights/document/{documentId}
+ response = await this.api.get(`/highlights/document/${params.document_id}`);
+ } else if (endpoint === '/notes' && params.document_id) {
+ // 실제: /notes/document/{documentId}
+ response = await this.api.get(`/notes/document/${params.document_id}`);
+ } else if (endpoint === '/bookmarks' && params.document_id) {
+ // 실제: /bookmarks/document/{documentId}
+ response = await this.api.get(`/bookmarks/document/${params.document_id}`);
+ } else if (endpoint === '/document-links' && params.document_id) {
+ // 실제: /documents/{documentId}/links
+ response = await this.api.get(`/documents/${params.document_id}/links`);
+ } else if (endpoint === '/document-links/backlinks' && params.target_document_id) {
+ // 실제: /documents/{documentId}/backlinks
+ response = await this.api.get(`/documents/${params.target_document_id}/backlinks`);
+ } else if (endpoint.startsWith('/documents/') && endpoint.includes('/')) {
+ const documentId = endpoint.split('/')[2];
+ response = await this.api.getDocument(documentId);
+ } else {
+ // 기본 API 호출 (기존 방식)
+ response = await this.api.get(endpoint, params);
+ }
+
+ // 성공적인 응답만 캐시에 저장
+ if (useCache && response) {
+ this.cache.set(cacheKey, response, category, ttl);
+ console.log(`💾 API 응답 캐시 저장: ${endpoint}`);
+ }
+
+ return response;
+ } catch (error) {
+ console.error(`❌ API 호출 실패: ${endpoint}`, error);
+ throw error;
+ }
+ }
+
+ /**
+ * 캐싱이 적용된 POST 요청 (일반적으로 캐시하지 않음)
+ */
+ async post(endpoint, data = {}, options = {}) {
+ const {
+ invalidateCache = true,
+ invalidateCategories = []
+ } = options;
+
+ try {
+ const response = await this.api.post(endpoint, data);
+
+ // POST 후 관련 캐시 무효화
+ if (invalidateCache) {
+ this.invalidateRelatedCache(endpoint, invalidateCategories);
+ }
+
+ return response;
+ } catch (error) {
+ console.error(`❌ API POST 실패: ${endpoint}`, error);
+ throw error;
+ }
+ }
+
+ /**
+ * 캐싱이 적용된 PUT 요청
+ */
+ async put(endpoint, data = {}, options = {}) {
+ const {
+ invalidateCache = true,
+ invalidateCategories = []
+ } = options;
+
+ try {
+ const response = await this.api.put(endpoint, data);
+
+ // PUT 후 관련 캐시 무효화
+ if (invalidateCache) {
+ this.invalidateRelatedCache(endpoint, invalidateCategories);
+ }
+
+ return response;
+ } catch (error) {
+ console.error(`❌ API PUT 실패: ${endpoint}`, error);
+ throw error;
+ }
+ }
+
+ /**
+ * 캐싱이 적용된 DELETE 요청
+ */
+ async delete(endpoint, options = {}) {
+ const {
+ invalidateCache = true,
+ invalidateCategories = []
+ } = options;
+
+ try {
+ const response = await this.api.delete(endpoint);
+
+ // DELETE 후 관련 캐시 무효화
+ if (invalidateCache) {
+ this.invalidateRelatedCache(endpoint, invalidateCategories);
+ }
+
+ return response;
+ } catch (error) {
+ console.error(`❌ API DELETE 실패: ${endpoint}`, error);
+ throw error;
+ }
+ }
+
+ /**
+ * 문서 데이터 조회 (캐싱 최적화)
+ */
+ async getDocument(documentId, contentType = 'document') {
+ const cacheKey = `document_${documentId}_${contentType}`;
+
+ // 캐시 확인
+ const cached = this.cache.get(cacheKey, 'document');
+ if (cached) {
+ console.log(`🚀 문서 캐시 사용: ${documentId}`);
+ return cached;
+ }
+
+ // 기존 API 메서드 직접 사용
+ try {
+ const result = await this.api.getDocument(documentId);
+
+ // 캐시에 저장
+ this.cache.set(cacheKey, result, 'document', 30 * 60 * 1000);
+ console.log(`💾 문서 캐시 저장: ${documentId}`);
+
+ return result;
+ } catch (error) {
+ console.error('문서 로드 실패:', error);
+ throw error;
+ }
+ }
+
+ /**
+ * 하이라이트 조회 (캐싱 최적화)
+ */
+ async getHighlights(documentId, contentType = 'document') {
+ const cacheKey = `highlights_${documentId}_${contentType}`;
+
+ // 캐시 확인
+ const cached = this.cache.get(cacheKey, 'highlights');
+ if (cached) {
+ console.log(`🚀 하이라이트 캐시 사용: ${documentId}`);
+ return cached;
+ }
+
+ // 기존 API 메서드 직접 사용
+ try {
+ let result;
+ if (contentType === 'note') {
+ result = await this.api.get(`/note/${documentId}/highlights`).catch(() => []);
+ } else {
+ result = await this.api.getDocumentHighlights(documentId).catch(() => []);
+ }
+
+ // 캐시에 저장
+ this.cache.set(cacheKey, result, 'highlights', 10 * 60 * 1000);
+ console.log(`💾 하이라이트 캐시 저장: ${documentId}`);
+
+ return result;
+ } catch (error) {
+ console.error('하이라이트 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 메모 조회 (캐싱 최적화)
+ */
+ async getNotes(documentId, contentType = 'document') {
+ const cacheKey = `notes_${documentId}_${contentType}`;
+
+ // 캐시 확인
+ const cached = this.cache.get(cacheKey, 'notes');
+ if (cached) {
+ console.log(`🚀 메모 캐시 사용: ${documentId}`);
+ return cached;
+ }
+
+ // 기존 API 메서드 직접 사용
+ try {
+ let result;
+ if (contentType === 'note') {
+ result = await this.api.get(`/note/${documentId}/notes`).catch(() => []);
+ } else {
+ result = await this.api.getDocumentNotes(documentId).catch(() => []);
+ }
+
+ // 캐시에 저장
+ this.cache.set(cacheKey, result, 'notes', 10 * 60 * 1000);
+ console.log(`💾 메모 캐시 저장: ${documentId}`);
+
+ return result;
+ } catch (error) {
+ console.error('메모 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 북마크 조회 (캐싱 최적화)
+ */
+ async getBookmarks(documentId) {
+ const cacheKey = `bookmarks_${documentId}`;
+
+ // 캐시 확인
+ const cached = this.cache.get(cacheKey, 'bookmarks');
+ if (cached) {
+ console.log(`🚀 북마크 캐시 사용: ${documentId}`);
+ return cached;
+ }
+
+ // 기존 API 메서드 직접 사용
+ try {
+ const result = await this.api.getDocumentBookmarks(documentId).catch(() => []);
+
+ // 캐시에 저장
+ this.cache.set(cacheKey, result, 'bookmarks', 15 * 60 * 1000);
+ console.log(`💾 북마크 캐시 저장: ${documentId}`);
+
+ return result;
+ } catch (error) {
+ console.error('북마크 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 문서 링크 조회 (캐싱 최적화)
+ */
+ async getDocumentLinks(documentId) {
+ const cacheKey = `links_${documentId}`;
+
+ // 캐시 확인
+ const cached = this.cache.get(cacheKey, 'links');
+ if (cached) {
+ console.log(`🚀 문서 링크 캐시 사용: ${documentId}`);
+ return cached;
+ }
+
+ // 기존 API 메서드 직접 사용
+ try {
+ const result = await this.api.getDocumentLinks(documentId).catch(() => []);
+
+ // 캐시에 저장
+ this.cache.set(cacheKey, result, 'links', 15 * 60 * 1000);
+ console.log(`💾 문서 링크 캐시 저장: ${documentId}`);
+
+ return result;
+ } catch (error) {
+ console.error('문서 링크 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 백링크 조회 (캐싱 최적화)
+ */
+ async getBacklinks(documentId) {
+ const cacheKey = `backlinks_${documentId}`;
+
+ // 캐시 확인
+ const cached = this.cache.get(cacheKey, 'links');
+ if (cached) {
+ console.log(`🚀 백링크 캐시 사용: ${documentId}`);
+ return cached;
+ }
+
+ // 기존 API 메서드 직접 사용
+ try {
+ const result = await this.api.getDocumentBacklinks(documentId).catch(() => []);
+
+ // 캐시에 저장
+ this.cache.set(cacheKey, result, 'links', 15 * 60 * 1000);
+ console.log(`💾 백링크 캐시 저장: ${documentId}`);
+
+ return result;
+ } catch (error) {
+ console.error('백링크 로드 실패:', error);
+ return [];
+ }
+ }
+
+ /**
+ * 네비게이션 정보 조회 (캐싱 최적화)
+ */
+ async getNavigation(documentId, contentType = 'document') {
+ return await this.get('/documents/navigation', { document_id: documentId, content_type: contentType }, {
+ category: 'navigation',
+ ttl: 60 * 60 * 1000 // 1시간
+ });
+ }
+
+ /**
+ * 하이라이트 생성 (캐시 무효화)
+ */
+ async createHighlight(data) {
+ return await this.post('/highlights/', data, {
+ invalidateCategories: ['highlights', 'notes']
+ });
+ }
+
+ /**
+ * 메모 생성 (캐시 무효화)
+ */
+ async createNote(data) {
+ return await this.post('/notes/', data, {
+ invalidateCategories: ['notes', 'highlights']
+ });
+ }
+
+ /**
+ * 북마크 생성 (캐시 무효화)
+ */
+ async createBookmark(data) {
+ return await this.post('/bookmarks/', data, {
+ invalidateCategories: ['bookmarks']
+ });
+ }
+
+ /**
+ * 링크 생성 (캐시 무효화)
+ */
+ async createDocumentLink(data) {
+ return await this.post('/document-links/', data, {
+ invalidateCategories: ['links']
+ });
+ }
+
+ /**
+ * 캐시 키 생성
+ */
+ generateCacheKey(endpoint, params) {
+ const sortedParams = Object.keys(params)
+ .sort()
+ .reduce((result, key) => {
+ result[key] = params[key];
+ return result;
+ }, {});
+
+ return `${endpoint}_${JSON.stringify(sortedParams)}`;
+ }
+
+ /**
+ * 관련 캐시 무효화
+ */
+ invalidateRelatedCache(endpoint, categories = []) {
+ console.log(`🗑️ 캐시 무효화: ${endpoint}`);
+
+ // 기본 무효화 규칙
+ const defaultInvalidations = {
+ '/highlights': ['highlights', 'notes'],
+ '/notes': ['notes', 'highlights'],
+ '/bookmarks': ['bookmarks'],
+ '/document-links': ['links']
+ };
+
+ // 엔드포인트별 기본 무효화 적용
+ for (const [pattern, cats] of Object.entries(defaultInvalidations)) {
+ if (endpoint.includes(pattern)) {
+ cats.forEach(cat => this.cache.deleteCategory(cat));
+ }
+ }
+
+ // 추가 무효화 카테고리 적용
+ categories.forEach(category => {
+ this.cache.deleteCategory(category);
+ });
+ }
+
+ /**
+ * 특정 문서의 모든 캐시 무효화
+ */
+ invalidateDocumentCache(documentId) {
+ console.log(`🗑️ 문서 캐시 무효화: ${documentId}`);
+
+ const categories = ['document', 'highlights', 'notes', 'bookmarks', 'links', 'navigation'];
+ categories.forEach(category => {
+ // 해당 문서 ID가 포함된 캐시만 삭제하는 것이 이상적이지만,
+ // 간단하게 전체 카테고리를 무효화
+ this.cache.deleteCategory(category);
+ });
+ }
+
+ /**
+ * 캐시 강제 새로고침
+ */
+ async refreshCache(endpoint, params = {}, category = 'api') {
+ return await this.get(endpoint, params, {
+ category,
+ forceRefresh: true
+ });
+ }
+
+ /**
+ * 캐시 통계 조회
+ */
+ getCacheStats() {
+ return this.cache.getStats();
+ }
+
+ /**
+ * 캐시 리포트 조회
+ */
+ getCacheReport() {
+ return this.cache.getReport();
+ }
+
+ /**
+ * 모든 캐시 삭제
+ */
+ clearAllCache() {
+ this.cache.clear();
+ console.log('🗑️ 모든 API 캐시 삭제 완료');
+ }
+
+ // 기존 API 메서드들을 그대로 위임 (캐싱이 필요 없는 경우)
+ setToken(token) {
+ return this.api.setToken(token);
+ }
+
+ getHeaders() {
+ return this.api.getHeaders();
+ }
+
+ /**
+ * 문서 네비게이션 정보 조회 (캐싱 최적화)
+ */
+ async getDocumentNavigation(documentId) {
+ const cacheKey = `navigation_${documentId}`;
+ return await this.get(`/documents/${documentId}/navigation`, {}, {
+ category: 'navigation',
+ cacheKey,
+ ttl: 30 * 60 * 1000 // 30분 (네비게이션은 자주 변경되지 않음)
+ });
+ }
+}
+
+// 기존 api 인스턴스를 캐싱 API로 래핑
+if (window.api) {
+ window.cachedApi = new CachedAPI(window.api);
+ console.log('🚀 CachedAPI 래퍼 생성 완료');
+}
+
+// 전역으로 내보내기
+window.CachedAPI = CachedAPI;
diff --git a/frontend/static/js/viewer/utils/module-loader.js b/frontend/static/js/viewer/utils/module-loader.js
new file mode 100644
index 0000000..2126cf9
--- /dev/null
+++ b/frontend/static/js/viewer/utils/module-loader.js
@@ -0,0 +1,223 @@
+/**
+ * ModuleLoader - 지연 로딩 및 모듈 관리
+ * 필요한 모듈만 동적으로 로드하여 성능을 최적화합니다.
+ */
+class ModuleLoader {
+ constructor() {
+ console.log('🔧 ModuleLoader 초기화 시작');
+
+ // 로드된 모듈 캐시
+ this.loadedModules = new Map();
+
+ // 로딩 중인 모듈 Promise 캐시 (중복 로딩 방지)
+ this.loadingPromises = new Map();
+
+ // 모듈 의존성 정의
+ this.moduleDependencies = {
+ 'DocumentLoader': [],
+ 'HighlightManager': ['DocumentLoader'],
+ 'BookmarkManager': ['DocumentLoader'],
+ 'LinkManager': ['DocumentLoader'],
+ 'UIManager': []
+ };
+
+ // 모듈 경로 정의
+ this.modulePaths = {
+ 'DocumentLoader': '/static/js/viewer/core/document-loader.js',
+ 'HighlightManager': '/static/js/viewer/features/highlight-manager.js',
+ 'BookmarkManager': '/static/js/viewer/features/bookmark-manager.js',
+ 'LinkManager': '/static/js/viewer/features/link-manager.js',
+ 'UIManager': '/static/js/viewer/features/ui-manager.js'
+ };
+
+ // 캐시 버스팅을 위한 버전
+ this.version = '2025012607';
+
+ console.log('✅ ModuleLoader 초기화 완료');
+ }
+
+ /**
+ * 모듈 동적 로드
+ */
+ async loadModule(moduleName) {
+ // 이미 로드된 모듈인지 확인
+ if (this.loadedModules.has(moduleName)) {
+ console.log(`✅ 모듈 캐시에서 반환: ${moduleName}`);
+ return this.loadedModules.get(moduleName);
+ }
+
+ // 이미 로딩 중인 모듈인지 확인 (중복 로딩 방지)
+ if (this.loadingPromises.has(moduleName)) {
+ console.log(`⏳ 모듈 로딩 대기 중: ${moduleName}`);
+ return await this.loadingPromises.get(moduleName);
+ }
+
+ console.log(`🔄 모듈 로딩 시작: ${moduleName}`);
+
+ // 로딩 Promise 생성 및 캐시
+ const loadingPromise = this._loadModuleScript(moduleName);
+ this.loadingPromises.set(moduleName, loadingPromise);
+
+ try {
+ const moduleClass = await loadingPromise;
+
+ // 로딩 완료 후 캐시에 저장
+ this.loadedModules.set(moduleName, moduleClass);
+ this.loadingPromises.delete(moduleName);
+
+ console.log(`✅ 모듈 로딩 완료: ${moduleName}`);
+ return moduleClass;
+
+ } catch (error) {
+ console.error(`❌ 모듈 로딩 실패: ${moduleName}`, error);
+ this.loadingPromises.delete(moduleName);
+ throw error;
+ }
+ }
+
+ /**
+ * 의존성을 포함한 모듈 로드
+ */
+ async loadModuleWithDependencies(moduleName) {
+ console.log(`🔗 의존성 포함 모듈 로딩: ${moduleName}`);
+
+ // 의존성 먼저 로드
+ const dependencies = this.moduleDependencies[moduleName] || [];
+ if (dependencies.length > 0) {
+ console.log(`📦 의존성 로딩: ${dependencies.join(', ')}`);
+ await Promise.all(dependencies.map(dep => this.loadModule(dep)));
+ }
+
+ // 메인 모듈 로드
+ return await this.loadModule(moduleName);
+ }
+
+ /**
+ * 여러 모듈 병렬 로드
+ */
+ async loadModules(moduleNames) {
+ console.log(`🚀 병렬 모듈 로딩: ${moduleNames.join(', ')}`);
+
+ const loadPromises = moduleNames.map(name => this.loadModuleWithDependencies(name));
+ const results = await Promise.all(loadPromises);
+
+ console.log(`✅ 병렬 모듈 로딩 완료: ${moduleNames.join(', ')}`);
+ return results;
+ }
+
+ /**
+ * 스크립트 동적 로딩
+ */
+ async _loadModuleScript(moduleName) {
+ return new Promise((resolve, reject) => {
+ // 이미 전역에 클래스가 있는지 확인
+ if (window[moduleName]) {
+ console.log(`✅ 모듈 이미 로드됨: ${moduleName}`);
+ resolve(window[moduleName]);
+ return;
+ }
+
+ console.log(`📥 스크립트 로딩 시작: ${moduleName}`);
+ const script = document.createElement('script');
+ script.src = `${this.modulePaths[moduleName]}?v=${this.version}`;
+ script.async = true;
+
+ script.onload = () => {
+ console.log(`📥 스크립트 로드 완료: ${moduleName}`);
+
+ // 스크립트 로드 후 잠시 대기 (클래스 등록 시간)
+ setTimeout(() => {
+ if (window[moduleName]) {
+ console.log(`✅ 모듈 클래스 확인: ${moduleName}`);
+ resolve(window[moduleName]);
+ } else {
+ console.error(`❌ 모듈 클래스 없음: ${moduleName}`, Object.keys(window).filter(k => k.includes('Manager') || k.includes('Loader')));
+ reject(new Error(`모듈 클래스를 찾을 수 없음: ${moduleName}`));
+ }
+ }, 10); // 10ms 대기
+ };
+
+ script.onerror = (error) => {
+ console.error(`❌ 스크립트 로딩 실패: ${moduleName}`, error);
+ reject(new Error(`스크립트 로딩 실패: ${moduleName}`));
+ };
+
+ document.head.appendChild(script);
+ });
+ }
+
+ /**
+ * 모듈 인스턴스 생성 (팩토리 패턴)
+ */
+ async createModuleInstance(moduleName, ...args) {
+ const ModuleClass = await this.loadModuleWithDependencies(moduleName);
+ return new ModuleClass(...args);
+ }
+
+ /**
+ * 모듈 프리로딩 (백그라운드에서 미리 로드)
+ */
+ async preloadModules(moduleNames) {
+ console.log(`🔮 모듈 프리로딩: ${moduleNames.join(', ')}`);
+
+ // 백그라운드에서 로드 (에러 무시)
+ const preloadPromises = moduleNames.map(async (name) => {
+ try {
+ await this.loadModuleWithDependencies(name);
+ console.log(`✅ 프리로딩 완료: ${name}`);
+ } catch (error) {
+ console.warn(`⚠️ 프리로딩 실패: ${name}`, error);
+ }
+ });
+
+ // 모든 프리로딩이 완료될 때까지 기다리지 않음
+ Promise.all(preloadPromises);
+ }
+
+ /**
+ * 사용하지 않는 모듈 언로드 (메모리 최적화)
+ */
+ unloadModule(moduleName) {
+ if (this.loadedModules.has(moduleName)) {
+ this.loadedModules.delete(moduleName);
+ console.log(`🗑️ 모듈 언로드: ${moduleName}`);
+ }
+ }
+
+ /**
+ * 모든 모듈 언로드
+ */
+ unloadAllModules() {
+ this.loadedModules.clear();
+ this.loadingPromises.clear();
+ console.log('🗑️ 모든 모듈 언로드 완료');
+ }
+
+ /**
+ * 로드된 모듈 상태 확인
+ */
+ getLoadedModules() {
+ return Array.from(this.loadedModules.keys());
+ }
+
+ /**
+ * 메모리 사용량 추정
+ */
+ getMemoryUsage() {
+ const loadedCount = this.loadedModules.size;
+ const loadingCount = this.loadingPromises.size;
+
+ return {
+ loadedModules: loadedCount,
+ loadingModules: loadingCount,
+ totalModules: Object.keys(this.modulePaths).length,
+ memoryEstimate: `${loadedCount * 50}KB` // 대략적인 추정
+ };
+ }
+}
+
+// 전역 모듈 로더 인스턴스
+window.moduleLoader = new ModuleLoader();
+
+// 전역으로 내보내기
+window.ModuleLoader = ModuleLoader;
diff --git a/frontend/static/js/viewer/viewer-core.js b/frontend/static/js/viewer/viewer-core.js
new file mode 100644
index 0000000..d0762b9
--- /dev/null
+++ b/frontend/static/js/viewer/viewer-core.js
@@ -0,0 +1,651 @@
+/**
+ * ViewerCore - 문서 뷰어 Alpine.js 컴포넌트
+ * 모든 모듈을 통합하고 Alpine.js 컴포넌트를 관리합니다.
+ */
+window.documentViewer = () => ({
+ // ==================== 기본 상태 ====================
+ loading: true,
+ error: null,
+ document: null,
+ documentId: null,
+ contentType: 'document', // 'document' 또는 'note'
+ navigation: null,
+
+ // ==================== 데이터 상태 ====================
+ highlights: [],
+ notes: [],
+ bookmarks: [],
+ documentLinks: [],
+ linkableDocuments: [],
+ backlinks: [],
+
+ // ==================== 선택 상태 ====================
+ selectedHighlightColor: '#FFFF00',
+ selectedText: '',
+ selectedRange: null,
+
+ // ==================== 폼 데이터 ====================
+ noteForm: {
+ content: '',
+ tags: ''
+ },
+ bookmarkForm: {
+ title: '',
+ description: ''
+ },
+ linkForm: {
+ target_document_id: '',
+ selected_text: '',
+ start_offset: 0,
+ end_offset: 0,
+ link_text: '',
+ description: '',
+ link_type: 'text_fragment', // 무조건 텍스트 선택만 지원
+ target_text: '',
+ target_start_offset: 0,
+ target_end_offset: 0,
+ book_scope: 'same', // 'same' 또는 'other'
+ target_book_id: ''
+ },
+
+ // ==================== 언어 및 기타 ====================
+ isKorean: false,
+
+ // ==================== UI 상태 (Alpine.js 바인딩용) ====================
+ searchQuery: '',
+ activeFeatureMenu: null,
+ showLinksModal: false,
+ showLinkModal: false,
+ showNotesModal: false,
+ showBookmarksModal: false,
+ showBacklinksModal: false,
+ showNoteInputModal: false,
+ availableBooks: [],
+ filteredDocuments: [],
+
+ // ==================== 모듈 인스턴스 ====================
+ documentLoader: null,
+ highlightManager: null,
+ bookmarkManager: null,
+ linkManager: null,
+ uiManager: null,
+
+ // ==================== 초기화 플래그 ====================
+ _initialized: false,
+
+ // ==================== 초기화 ====================
+ async init() {
+ // 중복 초기화 방지
+ if (this._initialized) {
+ console.log('⚠️ 이미 초기화됨, 중복 실행 방지');
+ return;
+ }
+ this._initialized = true;
+
+ console.log('🚀 DocumentViewer 초기화 시작');
+
+ // 전역 인스턴스 설정 (말풍선에서 함수 호출용)
+ window.documentViewerInstance = this;
+
+ try {
+ // 모듈 초기화
+ await this.initializeModules();
+
+ // URL 파라미터 처리
+ this.parseUrlParameters();
+
+ // 문서 로드
+ await this.loadDocument();
+
+ console.log('✅ DocumentViewer 초기화 완료');
+ } catch (error) {
+ console.error('❌ DocumentViewer 초기화 실패:', error);
+ this.error = error.message;
+ this.loading = false;
+ }
+ },
+
+ // ==================== 모듈 초기화 (지연 로딩 + 폴백) ====================
+ async initializeModules() {
+ console.log('🔧 모듈 초기화 시작 (지연 로딩)');
+
+ // API 및 캐시 초기화
+ this.api = new DocumentServerAPI();
+
+ // 토큰 설정 (인증 확인)
+ const token = localStorage.getItem('access_token');
+ if (token) {
+ this.api.setToken(token);
+ console.log('🔐 API 토큰 설정 완료');
+ } else {
+ console.error('❌ 인증 토큰이 없습니다!');
+ throw new Error('인증이 필요합니다');
+ }
+
+ this.cache = new CacheManager();
+ this.cachedApi = new CachedAPI(this.api, this.cache);
+
+ // 직접 모듈 인스턴스 생성 (모든 모듈이 HTML에서 로드됨)
+ if (window.DocumentLoader && window.UIManager && window.HighlightManager &&
+ window.LinkManager && window.BookmarkManager) {
+
+ this.documentLoader = new window.DocumentLoader(this.cachedApi);
+ this.uiManager = new window.UIManager();
+ this.highlightManager = new window.HighlightManager(this.cachedApi);
+ this.linkManager = new window.LinkManager(this.cachedApi);
+ this.bookmarkManager = new window.BookmarkManager(this.cachedApi);
+
+ console.log('✅ 모든 모듈 직접 로드 성공');
+ } else {
+ console.error('❌ 필수 모듈이 로드되지 않음');
+ console.log('사용 가능한 모듈:', {
+ DocumentLoader: !!window.DocumentLoader,
+ UIManager: !!window.UIManager,
+ HighlightManager: !!window.HighlightManager,
+ LinkManager: !!window.LinkManager,
+ BookmarkManager: !!window.BookmarkManager
+ });
+ throw new Error('필수 모듈을 로드할 수 없습니다.');
+ }
+
+ // UI 상태를 UIManager와 동기화
+ this.syncUIState();
+
+ // 나머지 모듈들은 백그라운드에서 프리로딩 (지연 로딩 가능한 경우만)
+ if (window.moduleLoader) {
+ window.moduleLoader.preloadModules(['HighlightManager', 'BookmarkManager', 'LinkManager']);
+ }
+
+ console.log('✅ 모듈 초기화 완료');
+ },
+
+ // ==================== UI 상태 동기화 ====================
+ syncUIState() {
+ // UIManager의 상태를 Alpine.js 컴포넌트와 동기화 (getter/setter 방식)
+
+ // 패널 상태 동기화
+ Object.defineProperty(this, 'showNotesPanel', {
+ get: () => this.uiManager.showNotesPanel,
+ set: (value) => { this.uiManager.showNotesPanel = value; }
+ });
+
+ Object.defineProperty(this, 'showBookmarksPanel', {
+ get: () => this.uiManager.showBookmarksPanel,
+ set: (value) => { this.uiManager.showBookmarksPanel = value; }
+ });
+
+ Object.defineProperty(this, 'showBacklinks', {
+ get: () => this.uiManager.showBacklinks,
+ set: (value) => { this.uiManager.showBacklinks = value; }
+ });
+
+ Object.defineProperty(this, 'activePanel', {
+ get: () => this.uiManager.activePanel,
+ set: (value) => { this.uiManager.activePanel = value; }
+ });
+
+ // 모달 상태 동기화 (UIManager와 실시간 연동)
+ this.updateModalStates();
+
+ // 검색 상태 동기화
+ Object.defineProperty(this, 'noteSearchQuery', {
+ get: () => this.uiManager.noteSearchQuery,
+ set: (value) => { this.uiManager.updateNoteSearchQuery(value); }
+ });
+
+ Object.defineProperty(this, 'filteredNotes', {
+ get: () => this.uiManager.filteredNotes,
+ set: (value) => { this.uiManager.filteredNotes = value; }
+ });
+
+ // 모드 및 핸들러 상태
+ this.activeMode = null;
+ this.textSelectionHandler = null;
+ this.editingNote = null;
+ this.editingBookmark = null;
+ this.editingLink = null;
+ this.noteLoading = false;
+ this.bookmarkLoading = false;
+ this.linkLoading = false;
+ },
+
+ // ==================== 모달 상태 업데이트 ====================
+ updateModalStates() {
+ // UIManager의 모달 상태를 ViewerCore의 속성에 반영
+ if (this.uiManager) {
+ this.showLinksModal = this.uiManager.showLinksModal;
+ this.showLinkModal = this.uiManager.showLinkModal;
+ this.showNotesModal = this.uiManager.showNotesModal;
+ this.showBookmarksModal = this.uiManager.showBookmarksModal;
+ this.showBacklinksModal = this.uiManager.showBacklinksModal;
+ this.activeFeatureMenu = this.uiManager.activeFeatureMenu;
+ this.searchQuery = this.uiManager.searchQuery;
+ }
+ },
+
+ // ==================== URL 파라미터 처리 ====================
+ parseUrlParameters() {
+ const urlParams = new URLSearchParams(window.location.search);
+ this.documentId = urlParams.get('id');
+ this.contentType = urlParams.get('type') || 'document';
+
+ console.log('🔍 URL 파싱 결과:', {
+ documentId: this.documentId,
+ contentType: this.contentType
+ });
+
+ if (!this.documentId) {
+ throw new Error('문서 ID가 필요합니다.');
+ }
+ },
+
+ // ==================== 문서 로드 ====================
+ async loadDocument() {
+ console.log('📄 문서 로드 시작');
+ this.loading = true;
+
+ try {
+ // 문서 데이터 로드
+ if (this.contentType === 'note') {
+ this.document = await this.documentLoader.loadNote(this.documentId);
+ this.navigation = null; // 노트는 네비게이션 없음
+ } else {
+ this.document = await this.documentLoader.loadDocument(this.documentId);
+ // 네비게이션 별도 로드
+ this.navigation = await this.documentLoader.loadNavigation(this.documentId);
+ }
+
+ // 관련 데이터 병렬 로드
+ await this.loadDocumentData();
+
+ // 데이터를 모듈에 전달
+ this.distributeDataToModules();
+
+ // 렌더링
+ await this.renderAllFeatures();
+
+ // URL 하이라이트 처리
+ await this.handleUrlHighlight();
+
+ this.loading = false;
+ console.log('✅ 문서 로드 완료');
+
+ } catch (error) {
+ console.error('❌ 문서 로드 실패:', error);
+ this.error = error.message;
+ this.loading = false;
+ }
+ },
+
+ // ==================== 문서 데이터 로드 (지연 로딩) ====================
+ async loadDocumentData() {
+ console.log('📊 문서 데이터 로드 시작');
+
+ const [highlights, notes, bookmarks, documentLinks, backlinks] = await Promise.all([
+ this.highlightManager.loadHighlights(this.documentId, this.contentType),
+ this.highlightManager.loadNotes(this.documentId, this.contentType),
+ this.bookmarkManager.loadBookmarks(this.documentId),
+ this.linkManager.loadDocumentLinks(this.documentId),
+ this.linkManager.loadBacklinks(this.documentId)
+ ]);
+
+ // 데이터 저장
+ this.highlights = highlights;
+ this.notes = notes;
+ this.bookmarks = bookmarks;
+ this.documentLinks = documentLinks;
+ this.backlinks = backlinks;
+
+ console.log('📊 로드된 데이터:', {
+ highlights: highlights.length,
+ notes: notes.length,
+ bookmarks: bookmarks.length,
+ documentLinks: documentLinks.length,
+ backlinks: backlinks.length
+ });
+ },
+
+ // ==================== 모듈 지연 로딩 보장 (폴백 포함) ====================
+ async ensureModulesLoaded(moduleNames) {
+ const missingModules = [];
+
+ for (const moduleName of moduleNames) {
+ const propertyName = this.getModulePropertyName(moduleName);
+ if (!this[propertyName]) {
+ missingModules.push(moduleName);
+ }
+ }
+
+ if (missingModules.length > 0) {
+ console.log(`🔄 필요한 모듈 지연 로딩: ${missingModules.join(', ')}`);
+
+ // 각 모듈을 개별적으로 로드
+ for (const moduleName of missingModules) {
+ const propertyName = this.getModulePropertyName(moduleName);
+
+ try {
+ // 지연 로딩 시도
+ if (window.moduleLoader) {
+ const ModuleClass = await window.moduleLoader.loadModule(moduleName);
+
+ if (moduleName === 'UIManager') {
+ this[propertyName] = new ModuleClass();
+ } else {
+ this[propertyName] = new ModuleClass(this.cachedApi);
+ }
+
+ console.log(`✅ 지연 로딩 성공: ${moduleName}`);
+ } else {
+ throw new Error('ModuleLoader 없음');
+ }
+ } catch (error) {
+ console.warn(`⚠️ 지연 로딩 실패, 폴백 시도: ${moduleName}`, error);
+
+ // 폴백: 전역 클래스 직접 사용
+ if (window[moduleName]) {
+ if (moduleName === 'UIManager') {
+ this[propertyName] = new window[moduleName]();
+ } else {
+ this[propertyName] = new window[moduleName](this.cachedApi);
+ }
+
+ console.log(`✅ 폴백 성공: ${moduleName}`);
+ } else {
+ console.error(`❌ 폴백도 실패: ${moduleName} - 전역 클래스 없음`);
+ throw new Error(`모듈을 로드할 수 없습니다: ${moduleName}`);
+ }
+ }
+ }
+ }
+ },
+
+ // ==================== 모듈명 → 속성명 변환 ====================
+ getModulePropertyName(moduleName) {
+ const nameMap = {
+ 'DocumentLoader': 'documentLoader',
+ 'HighlightManager': 'highlightManager',
+ 'BookmarkManager': 'bookmarkManager',
+ 'LinkManager': 'linkManager',
+ 'UIManager': 'uiManager'
+ };
+ return nameMap[moduleName];
+ },
+
+ // ==================== 모듈에 데이터 분배 ====================
+ distributeDataToModules() {
+ // HighlightManager에 데이터 전달
+ this.highlightManager.highlights = this.highlights;
+ this.highlightManager.notes = this.notes;
+
+ // BookmarkManager에 데이터 전달
+ this.bookmarkManager.bookmarks = this.bookmarks;
+
+ // LinkManager에 데이터 전달
+ this.linkManager.documentLinks = this.documentLinks;
+ this.linkManager.backlinks = this.backlinks;
+ },
+
+ // ==================== 모든 기능 렌더링 ====================
+ async renderAllFeatures() {
+ console.log('🎨 모든 기능 렌더링 시작');
+
+ // 하이라이트 렌더링
+ this.highlightManager.renderHighlights();
+
+ // 백링크 먼저 렌더링 (링크보다 먼저)
+ this.linkManager.renderBacklinks();
+
+ // 문서 링크 렌더링 (백링크 후에 렌더링)
+ this.linkManager.renderDocumentLinks();
+
+ console.log('✅ 모든 기능 렌더링 완료');
+ },
+
+ // ==================== URL 하이라이트 처리 ====================
+ async handleUrlHighlight() {
+ const urlParams = new URLSearchParams(window.location.search);
+ const highlightText = urlParams.get('highlight');
+ const startOffset = parseInt(urlParams.get('start_offset'));
+ const endOffset = parseInt(urlParams.get('end_offset'));
+
+ if (highlightText || (startOffset && endOffset)) {
+ console.log('🎯 URL에서 하이라이트 요청:', { highlightText, startOffset, endOffset });
+ await this.documentLoader.highlightAndScrollToText({
+ text: highlightText,
+ start_offset: startOffset,
+ end_offset: endOffset
+ });
+ }
+ },
+
+ // ==================== 기능 모드 활성화 ====================
+ activateLinkMode() {
+ console.log('🔗 링크 모드 활성화');
+ this.activeMode = 'link';
+ this.linkManager.createLinkFromSelection();
+ },
+
+ activateNoteMode() {
+ console.log('📝 메모 모드 활성화');
+ this.activeMode = 'memo';
+ this.highlightManager.activateNoteMode();
+ },
+
+ activateBookmarkMode() {
+ console.log('🔖 북마크 모드 활성화');
+ this.activeMode = 'bookmark';
+ this.bookmarkManager.activateBookmarkMode();
+ },
+
+ // ==================== 하이라이트 기능 위임 ====================
+ createHighlightWithColor(color) {
+ console.log('🎨 하이라이트 생성 요청:', color);
+ // ViewerCore의 selectedHighlightColor도 동기화
+ this.selectedHighlightColor = color;
+ console.log('🎨 ViewerCore 색상 동기화:', this.selectedHighlightColor);
+ return this.highlightManager.createHighlightWithColor(color);
+ },
+
+ // ==================== 메모 입력 모달 관련 ====================
+ openNoteInputModal() {
+ console.log('📝 메모 입력 모달 열기');
+ this.showNoteInputModal = true;
+ // 폼 초기화
+ this.noteForm.content = '';
+ this.noteForm.tags = '';
+ // 포커스를 textarea로 이동 (다음 틱에서)
+ this.$nextTick(() => {
+ const textarea = document.querySelector('textarea[x-model="noteForm.content"]');
+ if (textarea) textarea.focus();
+ });
+ },
+
+ closeNoteInputModal() {
+ console.log('📝 메모 입력 모달 닫기');
+ this.showNoteInputModal = false;
+ this.noteForm.content = '';
+ this.noteForm.tags = '';
+ // 선택된 텍스트 정리
+ this.selectedText = '';
+ this.selectedRange = null;
+ },
+
+ async createNoteForHighlight() {
+ console.log('📝 하이라이트에 메모 생성');
+ if (!this.noteForm.content.trim()) {
+ alert('메모 내용을 입력해주세요.');
+ return;
+ }
+
+ try {
+ // 현재 생성된 하이라이트 정보가 필요함
+ if (this.highlightManager.lastCreatedHighlight) {
+ await this.highlightManager.createNoteForHighlight(
+ this.highlightManager.lastCreatedHighlight,
+ this.noteForm.content.trim(),
+ this.noteForm.tags.trim()
+ );
+ this.closeNoteInputModal();
+ } else {
+ alert('하이라이트 정보를 찾을 수 없습니다.');
+ }
+ } catch (error) {
+ console.error('메모 생성 실패:', error);
+ alert('메모 생성에 실패했습니다: ' + error.message);
+ }
+ },
+
+ skipNoteForHighlight() {
+ console.log('📝 메모 입력 건너뛰기');
+ this.closeNoteInputModal();
+ },
+
+ // ==================== UI 메서드 위임 ====================
+ toggleFeatureMenu(feature) {
+ const result = this.uiManager.toggleFeatureMenu(feature);
+ this.updateModalStates(); // 상태 동기화
+ return result;
+ },
+
+ openNoteModal(highlight = null) {
+ const result = this.uiManager.openNoteModal(highlight);
+ this.updateModalStates(); // 상태 동기화
+ return result;
+ },
+
+ closeNoteModal() {
+ const result = this.uiManager.closeNoteModal();
+ this.updateModalStates(); // 상태 동기화
+ return result;
+ },
+
+ closeLinkModal() {
+ const result = this.uiManager.closeLinkModal();
+ this.updateModalStates(); // 상태 동기화
+ return result;
+ },
+
+ closeBookmarkModal() {
+ const result = this.uiManager.closeBookmarkModal();
+ this.updateModalStates(); // 상태 동기화
+ return result;
+ },
+
+ highlightSearchResults(element, searchText) {
+ return this.uiManager.highlightSearchResults(element, searchText);
+ },
+
+ showSuccessMessage(message) {
+ return this.uiManager.showSuccessMessage(message);
+ },
+
+ showErrorMessage(message) {
+ return this.uiManager.showErrorMessage(message);
+ },
+
+ // ==================== 언어 전환 ====================
+ toggleLanguage() {
+ this.isKorean = !this.isKorean;
+ console.log('🌐 언어 전환:', this.isKorean ? '한국어' : 'English');
+ // 언어 전환 로직 구현 필요
+ },
+
+ // ==================== 유틸리티 메서드 ====================
+ formatDate(dateString) {
+ return new Date(dateString).toLocaleString('ko-KR');
+ },
+
+ formatShortDate(dateString) {
+ return new Date(dateString).toLocaleDateString('ko-KR');
+ },
+
+ getColorName(color) {
+ const colorNames = {
+ '#FFFF00': '노란색',
+ '#00FF00': '초록색',
+ '#FF0000': '빨간색',
+ '#0000FF': '파란색',
+ '#FF00FF': '보라색',
+ '#00FFFF': '청록색',
+ '#FFA500': '주황색',
+ '#FFC0CB': '분홍색'
+ };
+ return colorNames[color] || '기타';
+ },
+
+ getSelectedBookTitle() {
+ if (this.linkForm.book_scope === 'same') {
+ return this.document?.book_title || '현재 서적';
+ } else {
+ const selectedBook = this.availableBooks.find(book => book.id === this.linkForm.target_book_id);
+ return selectedBook ? selectedBook.title : '서적을 선택하세요';
+ }
+ },
+
+ // ==================== 모듈 메서드 위임 ====================
+
+ // 하이라이트 관련
+ selectHighlight(highlightId) {
+ return this.highlightManager.selectHighlight(highlightId);
+ },
+
+ deleteHighlight(highlightId) {
+ return this.highlightManager.deleteHighlight(highlightId);
+ },
+
+ deleteHighlightsByColor(color, highlightIds) {
+ return this.highlightManager.deleteHighlightsByColor(color, highlightIds);
+ },
+
+ deleteAllOverlappingHighlights(highlightIds) {
+ return this.highlightManager.deleteAllOverlappingHighlights(highlightIds);
+ },
+
+ hideTooltip() {
+ return this.highlightManager.hideTooltip();
+ },
+
+ showAddNoteForm(highlightId) {
+ return this.highlightManager.showAddNoteForm(highlightId);
+ },
+
+ deleteNote(noteId) {
+ return this.highlightManager.deleteNote(noteId);
+ },
+
+ // 링크 관련
+ navigateToLinkedDocument(documentId, linkData) {
+ return this.linkManager.navigateToLinkedDocument(documentId, linkData);
+ },
+
+ navigateToBacklinkDocument(documentId, backlinkData) {
+ return this.linkManager.navigateToBacklinkDocument(documentId, backlinkData);
+ },
+
+ // 북마크 관련
+ scrollToBookmark(bookmark) {
+ return this.bookmarkManager.scrollToBookmark(bookmark);
+ },
+
+ deleteBookmark(bookmarkId) {
+ return this.bookmarkManager.deleteBookmark(bookmarkId);
+ }
+});
+
+// Alpine.js 컴포넌트 등록
+document.addEventListener('alpine:init', () => {
+ console.log('🔧 Alpine.js 컴포넌트 로드됨');
+
+ // 전역 함수들 (말풍선에서 사용)
+ window.cancelTextSelection = () => {
+ if (window.documentViewerInstance && window.documentViewerInstance.linkManager) {
+ window.documentViewerInstance.linkManager.cancelTextSelection();
+ }
+ };
+
+ window.confirmTextSelection = (selectedText, startOffset, endOffset) => {
+ if (window.documentViewerInstance && window.documentViewerInstance.linkManager) {
+ window.documentViewerInstance.linkManager.confirmTextSelection(selectedText, startOffset, endOffset);
+ }
+ };
+});
diff --git a/frontend/text-selector.html b/frontend/text-selector.html
index 614f44a..8826bf4 100644
--- a/frontend/text-selector.html
+++ b/frontend/text-selector.html
@@ -364,14 +364,23 @@
}
confirmTextSelection(selectedText, startOffset, endOffset) {
+ console.log('🎯 텍스트 선택 확정:', {
+ selectedText: selectedText,
+ startOffset: startOffset,
+ endOffset: endOffset
+ });
+
// 부모 창에 선택된 텍스트 정보 전달
if (window.opener) {
- window.opener.postMessage({
+ const messageData = {
type: 'TEXT_SELECTED',
selectedText: selectedText,
startOffset: startOffset,
endOffset: endOffset
- }, '*');
+ };
+
+ console.log('📤 부모 창에 전송할 데이터:', messageData);
+ window.opener.postMessage(messageData, '*');
console.log('✅ 부모 창에 텍스트 선택 정보 전달됨');
diff --git a/frontend/viewer.html b/frontend/viewer.html
index 2601925..8d9a073 100644
--- a/frontend/viewer.html
+++ b/frontend/viewer.html
@@ -12,6 +12,20 @@
+
+
+
@@ -108,9 +122,9 @@
:class="selectedHighlightColor === '#90EE90' ? 'ring-2 ring-green-400 scale-110' : 'hover:scale-110'"
class="w-6 h-6 bg-gradient-to-br from-green-300 to-green-400 rounded-full border border-white shadow-sm transition-all duration-200"
title="초록색">
-
+
@@ -459,33 +478,8 @@
-
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+ 메모 추가
+
+
+
+
+
+
+
+
+
+
이 하이라이트에 메모를 추가하시겠습니까?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+