# 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 호환성**: 기존 템플릿과의 호환성 유지

## 🎯 기대 효과

- **유지보수성 향상**: 기능별 코드 분리
- **개발 효율성**: 병렬 개발 가능
- **테스트 용이성**: 모듈별 단위 테스트
- **확장성**: 새 기능 추가 시 영향 범위 최소화