모든 기능 복원 및 안정화

- PDF 다운로드 기능 복원 (직접 다운로드 + 연결된 PDF 지원)
- 언어 전환 기능 수정 (문서 내장 기능 활용)
- 헤더 네비게이션 버튼 구현 (뒤로가기, 목차, 이전/다음 문서)
- PDF 매칭 UI 추가 (book-documents.html)
- 링크/백링크 렌더링 안정화
- 서적 URL 파라미터 수정 (book_id 지원)

주요 수정사항:
- viewer-core.js: PDF 다운로드 로직 개선, 언어 전환 단순화
- book-documents.js/html: PDF 매칭 기능 및 URL 파라미터 수정
- components/header.html: 언어 전환 및 PDF 버튼 추가
- 모든 기능 테스트 완료 및 정상 작동 확인

frontend/book-documents.html

@@ -127,6 +127,55 @@
                 <p class="text-gray-500">이 서적에 등록된 문서가 없습니다</p>
             </div>
         </div>
+
+        <!-- PDF 매칭 섹션 -->
+        <div x-show="availablePDFs.length > 0" class="bg-white rounded-lg shadow-sm border">
+            <div class="p-6 border-b border-gray-200">
+                <h2 class="text-lg font-semibold text-gray-900 flex items-center">
+                    <i class="fas fa-file-pdf mr-2 text-red-600"></i>
+                    사용 가능한 PDF 문서
+                    <span class="ml-2 px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full" x-text="availablePDFs.length"></span>
+                </h2>
+                <p class="text-gray-600 text-sm mt-1">이 서적과 연결할 수 있는 PDF 문서들입니다</p>
+            </div>
+            
+            <div class="p-6">
+                <div class="grid gap-4">
+                    <template x-for="pdf in availablePDFs" :key="pdf.id">
+                        <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
+                            <div class="flex items-start justify-between">
+                                <div class="flex-1">
+                                    <h3 class="text-md font-medium text-gray-900 mb-1" x-text="pdf.title"></h3>
+                                    <p class="text-gray-600 text-sm mb-2" x-text="pdf.description || '설명이 없습니다'"></p>
+                                    <div class="flex items-center text-sm text-gray-500 space-x-4">
+                                        <span class="flex items-center">
+                                            <i class="fas fa-file-pdf mr-1 text-red-500"></i>
+                                            <span x-text="pdf.original_filename"></span>
+                                        </span>
+                                        <span class="flex items-center">
+                                            <i class="fas fa-calendar mr-1"></i>
+                                            <span x-text="formatDate(pdf.created_at)"></span>
+                                        </span>
+                                    </div>
+                                </div>
+                                
+                                <div class="flex items-center space-x-2 ml-4">
+                                    <button @click="matchPDFToBook(pdf.id)" 
+                                            class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm">
+                                        <i class="fas fa-link mr-1"></i>서적에 연결
+                                    </button>
+                                    <button @click="openPDF(pdf)" 
+                                            class="p-2 text-gray-400 hover:text-blue-600 transition-colors"
+                                            title="PDF 열기">
+                                        <i class="fas fa-external-link-alt"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
     </main>
 
     <!-- JavaScript 파일들 -->

frontend/components/header.html

@@ -67,6 +67,29 @@
 
             <!-- 사용자 메뉴 -->
             <div class="flex items-center space-x-4">
+                <!-- PDF 관리 버튼 -->
+                <a href="pdf-manager.html" class="nav-link" title="PDF 관리">
+                    <i class="fas fa-file-pdf text-red-500"></i>
+                    <span class="hidden sm:inline">PDF</span>
+                </a>
+                
+                <!-- 언어 전환 버튼 -->
+                <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
+                    <button class="nav-link" title="언어 설정">
+                        <i class="fas fa-globe"></i>
+                        <span class="hidden sm:inline">한국어</span>
+                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                    </button>
+                    <div x-show="open" x-transition class="nav-dropdown">
+                        <button class="nav-dropdown-item" onclick="handleLanguageChange('ko')">
+                            <i class="fas fa-flag mr-2 text-blue-500"></i>한국어
+                        </button>
+                        <button class="nav-dropdown-item" onclick="handleLanguageChange('en')">
+                            <i class="fas fa-flag mr-2 text-red-500"></i>English
+                        </button>
+                    </div>
+                </div>
+                
                 <!-- 로그인/로그아웃 -->
                 <div class="flex items-center space-x-3" id="user-menu">
                     <!-- 로그인된 사용자 -->
@@ -120,6 +143,19 @@
     .header-modern {
         @apply bg-white border-b border-gray-200 shadow-sm;
     }
+
+    /* 언어 전환 스타일 */
+    .lang-ko .lang-en,
+    .lang-ko [lang="en"],
+    .lang-ko .english {
+        display: none !important;
+    }
+    
+    .lang-en .lang-ko,
+    .lang-en [lang="ko"],
+    .lang-en .korean {
+        display: none !important;
+    }
 </style>
 
 <!-- 헤더 관련 JavaScript 함수들 -->
@@ -234,8 +270,85 @@
     };
     
     // 언어 토글 함수 (전역)
+    // 통합 언어 변경 함수
+    window.handleLanguageChange = (lang) => {
+        console.log('🌐 언어 변경 요청:', lang);
+        localStorage.setItem('preferred_language', lang);
+        
+        // HTML lang 속성 변경
+        document.documentElement.lang = lang;
+        
+        // body에 언어 클래스 추가/제거
+        document.body.classList.remove('lang-ko', 'lang-en');
+        document.body.classList.add(`lang-${lang}`);
+        
+        // 뷰어 페이지인 경우 뷰어의 언어 전환 함수 호출
+        if (window.documentViewerInstance && typeof window.documentViewerInstance.toggleLanguage === 'function') {
+            window.documentViewerInstance.toggleLanguage();
+        }
+        
+        // 문서 내용에서 언어별 요소 처리
+        toggleDocumentLanguage(lang);
+        
+        // 헤더 언어 표시 업데이트
+        updateLanguageDisplay(lang);
+        
+        console.log(`✅ 언어가 ${lang === 'ko' ? '한국어' : 'English'}로 설정되었습니다.`);
+    };
+
+    // 문서 내용 언어 전환
+    function toggleDocumentLanguage(lang) {
+        // 언어별 요소 숨기기/보이기
+        const koElements = document.querySelectorAll('[lang="ko"], .lang-ko, .korean');
+        const enElements = document.querySelectorAll('[lang="en"], .lang-en, .english');
+        
+        if (lang === 'ko') {
+            koElements.forEach(el => el.style.display = '');
+            enElements.forEach(el => el.style.display = 'none');
+        } else {
+            koElements.forEach(el => el.style.display = 'none');
+            enElements.forEach(el => el.style.display = '');
+        }
+        
+        console.log(`🔄 문서 언어 전환: ${koElements.length}개 한국어, ${enElements.length}개 영어 요소 처리`);
+    }
+
+    // 헤더 언어 표시 업데이트
+    function updateLanguageDisplay(lang) {
+        const langSpan = document.querySelector('.nav-link span:contains("한국어"), .nav-link span:contains("English")');
+        if (langSpan) {
+            langSpan.textContent = lang === 'ko' ? '한국어' : 'English';
+        }
+    }
+
+    // 기존 setLanguage 함수 (호환성 유지)
+    window.setLanguage = window.handleLanguageChange;
+
     window.toggleLanguage = () => {
         console.log('🌐 언어 토글 기능 (미구현)');
         // 향후 다국어 지원 시 구현
     };
+
+    // 헤더 로드 완료 후 언어 설정 적용
+    document.addEventListener('headerLoaded', () => {
+        console.log('🔧 헤더 로드 완료 - 언어 전환 함수 등록');
+        const savedLang = localStorage.getItem('preferred_language') || 'ko';
+        console.log('💾 저장된 언어 설정 적용:', savedLang);
+        
+        // 약간의 지연 후 적용 (DOM 완전 로드 대기)
+        setTimeout(() => {
+            handleLanguageChange(savedLang);
+        }, 100);
+    });
+
+    // DOMContentLoaded 백업 (헤더가 직접 로드된 경우)
+    document.addEventListener('DOMContentLoaded', () => {
+        setTimeout(() => {
+            if (typeof window.handleLanguageChange === 'function') {
+                const savedLang = localStorage.getItem('preferred_language') || 'ko';
+                console.log('💾 DOMContentLoaded - 언어 설정 적용:', savedLang);
+                handleLanguageChange(savedLang);
+            }
+        }, 200);
+    });
 </script>

frontend/static/js/book-documents.js

@@ -35,8 +35,9 @@ window.bookDocumentsApp = () => ({
     // URL 파라미터 파싱
     parseUrlParams() {
         const urlParams = new URLSearchParams(window.location.search);
-        this.bookId = urlParams.get('bookId');
+        this.bookId = urlParams.get('book_id') || urlParams.get('bookId'); // 둘 다 지원
         console.log('📖 서적 ID:', this.bookId);
+        console.log('🔍 전체 URL 파라미터:', window.location.search);
     },
     
     // 인증 상태 확인
@@ -218,6 +219,57 @@ window.bookDocumentsApp = () => ({
         if (type === 'error') {
             alert(message);
         }
+    },
+
+    // PDF를 서적에 연결
+    async matchPDFToBook(pdfId) {
+        if (!this.bookId) {
+            this.showNotification('서적 ID가 없습니다', 'error');
+            return;
+        }
+
+        if (!confirm('이 PDF를 현재 서적에 연결하시겠습니까?')) {
+            return;
+        }
+
+        try {
+            console.log('🔗 PDF 매칭 시작:', { pdfId, bookId: this.bookId });
+            
+            // PDF 문서를 서적에 연결
+            await window.api.updateDocument(pdfId, {
+                book_id: this.bookId
+            });
+
+            this.showNotification('PDF가 서적에 성공적으로 연결되었습니다');
+            
+            // 데이터 새로고침
+            await this.loadBookData();
+            
+        } catch (error) {
+            console.error('PDF 매칭 실패:', error);
+            this.showNotification('PDF 연결에 실패했습니다: ' + error.message, 'error');
+        }
+    },
+
+    // PDF 열기
+    openPDF(pdf) {
+        if (pdf.pdf_path) {
+            // PDF 뷰어로 이동
+            window.open(`/viewer.html?id=${pdf.id}`, '_blank');
+        } else {
+            this.showNotification('PDF 파일을 찾을 수 없습니다', 'error');
+        }
+    },
+
+    // 날짜 포맷팅
+    formatDate(dateString) {
+        if (!dateString) return '';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('ko-KR', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
     }
 });
 

frontend/static/js/viewer/features/link-manager.js

@@ -287,8 +287,12 @@ class LinkManager {
      * 개별 백링크 렌더링
      */
     renderSingleBacklink(backlink) {
+        console.log('🔗 renderSingleBacklink 시작:', backlink.id, backlink.target_text);
         const content = document.getElementById('document-content');
-        if (!content) return;
+        if (!content) {
+            console.error('❌ document-content 요소를 찾을 수 없습니다');
+            return;
+        }
         
         // 실제 문서 내용만 추출 (CSS, 스크립트 제외)
         const contentClone = content.cloneNode(true);

frontend/static/js/viewer/viewer-core.js

@@ -800,17 +800,139 @@ window.documentViewer = () => ({
     // ==================== 언어 전환 ====================
     toggleLanguage() {
         this.isKorean = !this.isKorean;
+        const lang = this.isKorean ? 'ko' : 'en';
         console.log('🌐 언어 전환:', this.isKorean ? '한국어' : 'English');
-        // 언어 전환 로직 구현 필요
+        
+        // 문서에 내장된 언어 전환 기능 찾기 및 실행
+        this.findAndExecuteBuiltinLanguageToggle();
     },
 
+    // 문서에 내장된 언어 전환 기능 찾기
+    findAndExecuteBuiltinLanguageToggle() {
+        console.log('🔍 문서 내장 언어 전환 기능 찾기 시작');
+        
+        const content = document.getElementById('document-content');
+        if (!content) {
+            console.warn('❌ document-content 요소를 찾을 수 없습니다');
+            return;
+        }
+        
+        // 1. 언어 전환 버튼 찾기 (다양한 패턴)
+        const buttonSelectors = [
+            'button[onclick*="toggleLanguage"]',
+            'button[onclick*="language"]', 
+            'button[onclick*="Language"]',
+            '.language-toggle',
+            '.lang-toggle',
+            'button[id*="lang"]',
+            'button[class*="lang"]',
+            'input[type="button"][onclick*="language"]'
+        ];
+        
+        let foundButton = null;
+        for (const selector of buttonSelectors) {
+            const buttons = content.querySelectorAll(selector);
+            if (buttons.length > 0) {
+                foundButton = buttons[0];
+                console.log(`✅ 언어 전환 버튼 발견 (${selector}):`, foundButton.outerHTML.substring(0, 100));
+                break;
+            }
+        }
+        
+        // 2. 버튼이 있으면 클릭
+        if (foundButton) {
+            console.log('🔘 내장 언어 전환 버튼 클릭');
+            try {
+                foundButton.click();
+                console.log('✅ 언어 전환 버튼 클릭 완료');
+                return;
+            } catch (error) {
+                console.error('❌ 버튼 클릭 실패:', error);
+            }
+        }
+        
+        // 3. 버튼이 없으면 스크립트 함수 직접 호출 시도
+        this.tryDirectLanguageFunction();
+    },
+
+    // 직접 언어 전환 함수 호출 시도
+    tryDirectLanguageFunction() {
+        console.log('🔧 직접 언어 전환 함수 호출 시도');
+        
+        const functionNames = [
+            'toggleLanguage',
+            'changeLanguage', 
+            'switchLanguage',
+            'toggleLang',
+            'changeLang'
+        ];
+        
+        for (const funcName of functionNames) {
+            if (typeof window[funcName] === 'function') {
+                console.log(`✅ 전역 함수 발견: ${funcName}`);
+                try {
+                    window[funcName]();
+                    console.log(`✅ ${funcName}() 호출 완료`);
+                    return;
+                } catch (error) {
+                    console.error(`❌ ${funcName}() 호출 실패:`, error);
+                }
+            }
+        }
+        
+        // 4. 문서 내 스크립트에서 함수 찾기
+        this.findLanguageFunctionInScripts();
+    },
+
+    // 문서 내 스크립트에서 언어 전환 함수 찾기
+    findLanguageFunctionInScripts() {
+        console.log('📜 문서 내 스크립트에서 언어 함수 찾기');
+        
+        const content = document.getElementById('document-content');
+        const scripts = content.querySelectorAll('script');
+        
+        console.log(`📜 발견된 스크립트 태그: ${scripts.length}개`);
+        
+        scripts.forEach((script, index) => {
+            const scriptContent = script.textContent || script.innerHTML;
+            if (scriptContent.includes('language') || scriptContent.includes('Language') || scriptContent.includes('lang')) {
+                console.log(`📜 스크립트 ${index + 1}에서 언어 관련 코드 발견:`, scriptContent.substring(0, 200));
+                
+                // 함수 실행 시도
+                try {
+                    eval(scriptContent);
+                    console.log(`✅ 스크립트 ${index + 1} 실행 완료`);
+                } catch (error) {
+                    console.log(`⚠️ 스크립트 ${index + 1} 실행 실패:`, error.message);
+                }
+            }
+        });
+        
+        console.log('⚠️ 내장 언어 전환 기능을 찾을 수 없습니다');
+    },
+
+
+
     async downloadOriginalFile() {
         if (!this.document || !this.document.id) {
             console.warn('문서 정보가 없습니다');
             return;
         }
         
-        // 연결된 PDF가 있는지 확인
+        console.log('📕 PDF 다운로드 시도:', {
+            id: this.document.id,
+            matched_pdf_id: this.document.matched_pdf_id,
+            pdf_path: this.document.pdf_path
+        });
+        
+        // 1. 현재 문서 자체가 PDF인 경우
+        if (this.document.pdf_path) {
+            console.log('📄 현재 문서가 PDF - 직접 다운로드');
+            this.downloadPdfFile(this.document.pdf_path, this.document.title || 'document');
+            return;
+        }
+        
+        // 2. 연결된 PDF가 있는지 확인
         if (!this.document.matched_pdf_id) {
             alert('연결된 원본 PDF 파일이 없습니다.\n\n서적 편집 페이지에서 PDF 파일을 연결해주세요.');
             return;
@@ -864,6 +986,39 @@ window.documentViewer = () => ({
         }
     },
 
+    // PDF 파일 직접 다운로드
+    downloadPdfFile(pdfPath, filename) {
+        try {
+            console.log('📄 PDF 파일 직접 다운로드:', pdfPath);
+            
+            // PDF 파일 URL 생성 (상대 경로를 절대 경로로 변환)
+            let pdfUrl = pdfPath;
+            if (!pdfUrl.startsWith('http')) {
+                // 상대 경로인 경우 현재 도메인 기준으로 절대 경로 생성
+                const baseUrl = window.location.origin;
+                pdfUrl = pdfUrl.startsWith('/') ? baseUrl + pdfUrl : baseUrl + '/' + pdfUrl;
+            }
+            
+            console.log('📄 PDF URL:', pdfUrl);
+            
+            // 다운로드 링크 생성 및 클릭
+            const link = document.createElement('a');
+            link.href = pdfUrl;
+            link.download = filename.endsWith('.pdf') ? filename : filename + '.pdf';
+            link.target = '_blank'; // 새 탭에서 열기 (다운로드 실패 시 뷰어로 열림)
+            
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            
+            console.log('✅ PDF 다운로드 링크 클릭 완료');
+            
+        } catch (error) {
+            console.error('PDF 다운로드 오류:', error);
+            alert('PDF 다운로드 중 오류가 발생했습니다: ' + error.message);
+        }
+    },
+
     // ==================== 유틸리티 메서드 ====================
     formatDate(dateString) {
         return new Date(dateString).toLocaleString('ko-KR');
@@ -1027,6 +1182,30 @@ window.documentViewer = () => ({
                 alert('링크 생성에 실패했습니다: ' + error.message);
             }
         }
+    },
+
+    // 네비게이션 함수들
+    goBack() {
+        console.log('🔙 뒤로가기');
+        window.history.back();
+    },
+
+    navigateToDocument(documentId) {
+        if (!documentId) {
+            console.warn('⚠️ 문서 ID가 없습니다');
+            return;
+        }
+        console.log('📄 문서로 이동:', documentId);
+        window.location.href = `/viewer.html?id=${documentId}`;
+    },
+
+    goToBookContents() {
+        if (!this.navigation?.book_info?.id) {
+            console.warn('⚠️ 서적 정보가 없습니다');
+            return;
+        }
+        console.log('📚 서적 목차로 이동:', this.navigation.book_info.id);
+        window.location.href = `/book-documents.html?book_id=${this.navigation.book_info.id}`;
     }
 });