From d4b10b16b1770340e202c8b336964544c8dca4f8 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Tue, 2 Sep 2025 17:22:35 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20PDF=20404=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=20=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🛠️ PDF 404 오류 해결:
- PDF 파일 존재 여부를 HEAD 요청으로 먼저 확인
- 파일이 존재할 때만 iframe src 설정
- 토큰을 URL 파라미터로 전달 (_token)
- 백엔드 PDF API에서 _token 파라미터 지원

📱 PDF 미리보기 로딩 개선:
- pdfLoading, pdfLoaded, pdfSrc 상태 추가
- 로딩 중 스피너 표시
- iframe 로드 완료/에러 이벤트 처리
- handlePdfError() 함수로 에러 처리 개선

🎯 사용자 경험 개선:
- PDF 로딩 상태 명확한 표시
- 에러 발생 시 적절한 메시지
- 불필요한 404 요청 방지
- 리소스 정리 개선

🔍 디버깅 개선:
- PDF 로드 과정 상세 로깅
- 에러 원인 명확한 표시
- 파일 존재 여부 사전 확인
---
 backend/src/api/routes/documents.py |  2 +-
 frontend/search.html                | 15 +++++++--
 frontend/static/js/search.js        | 50 +++++++++++++++++++++++++++--
 3 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/backend/src/api/routes/documents.py b/backend/src/api/routes/documents.py
index 651ea75..0104844 100644
--- a/backend/src/api/routes/documents.py
+++ b/backend/src/api/routes/documents.py
@@ -511,7 +511,7 @@ async def get_document_content(
 @router.get("/{document_id}/pdf")
 async def get_document_pdf(
     document_id: str,
-    token: Optional[str] = Query(None),
+    _token: Optional[str] = Query(None),
     current_user: User = Depends(get_current_active_user),
     db: AsyncSession = Depends(get_db)
 ):
diff --git a/frontend/search.html b/frontend/search.html
index c5d2711..3518d38 100644
--- a/frontend/search.html
+++ b/frontend/search.html
@@ -483,12 +483,21 @@
                     <!-- PDF 뷰어 컨테이너 -->
                     <div class="border rounded-lg overflow-hidden bg-gray-100 relative" style="height: 500px;">
                         <!-- PDF iframe 뷰어 -->
-                        <iframe :src="`/api/documents/${previewResult?.document_id}/pdf`" 
+                        <iframe x-show="!pdfError && !pdfLoading"
                                 class="w-full h-full border-0"
-                                x-show="!pdfError"
-                                @error="pdfError = true">
+                                :src="pdfSrc"
+                                @load="pdfLoaded = true"
+                                @error="handlePdfError()">
                         </iframe>
                         
+                        <!-- PDF 로딩 상태 -->
+                        <div x-show="pdfLoading" class="flex items-center justify-center h-full">
+                            <div class="text-center">
+                                <i class="fas fa-spinner fa-spin text-2xl text-gray-500 mb-2"></i>
+                                <p class="text-gray-600">PDF를 로드하는 중...</p>
+                            </div>
+                        </div>
+                        
                         <div x-show="pdfError" class="flex items-center justify-center h-full text-gray-500">
                             <div class="text-center">
                                 <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
diff --git a/frontend/static/js/search.js b/frontend/static/js/search.js
index 7e2267d..faee19c 100644
--- a/frontend/static/js/search.js
+++ b/frontend/static/js/search.js
@@ -25,6 +25,9 @@ window.searchApp = function() {
         previewResult: null,
         previewLoading: false,
         pdfError: false,
+        pdfLoading: false,
+        pdfLoaded: false,
+        pdfSrc: '',
         
         // HTML 뷰어 상태
         htmlLoading: false,
@@ -215,8 +218,8 @@ window.searchApp = function() {
                         
                         // PDF가 있으면 PDF 미리보기, 없으면 HTML 미리보기
                         if (docInfo.pdf_path) {
-                            // PDF 미리보기는 iframe으로 자동 처리
-                            console.log('PDF 미리보기 준비 완료');
+                            // PDF 미리보기 준비
+                            await this.loadPdfPreview(result.document_id);
                         } else if (docInfo.html_path) {
                             // HTML 문서 미리보기
                             await this.loadHtmlPreview(result.document_id);
@@ -318,12 +321,55 @@ window.searchApp = function() {
             this.previewLoading = false;
             this.pdfError = false;
             
+            // PDF 리소스 정리
+            this.pdfLoading = false;
+            this.pdfLoaded = false;
+            this.pdfSrc = '';
+            
             // HTML 리소스 정리
             this.htmlLoading = false;
             this.htmlRawMode = false;
             this.htmlSourceCode = '';
         },
 
+        // PDF 미리보기 로드
+        async loadPdfPreview(documentId) {
+            this.pdfLoading = true;
+            this.pdfError = false;
+            this.pdfLoaded = false;
+            
+            try {
+                // PDF 파일 존재 여부 먼저 확인
+                const response = await fetch(`/api/documents/${documentId}/pdf`, {
+                    method: 'HEAD',
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('token')}`
+                    }
+                });
+                
+                if (response.ok) {
+                    // PDF 파일이 존재하면 src 설정
+                    const token = localStorage.getItem('token');
+                    this.pdfSrc = `/api/documents/${documentId}/pdf?_token=${encodeURIComponent(token)}`;
+                    console.log('PDF 미리보기 준비 완료:', this.pdfSrc);
+                } else {
+                    throw new Error(`PDF 파일을 찾을 수 없습니다 (${response.status})`);
+                }
+            } catch (error) {
+                console.error('PDF 미리보기 로드 실패:', error);
+                this.pdfError = true;
+            } finally {
+                this.pdfLoading = false;
+            }
+        },
+
+        // PDF 에러 처리
+        handlePdfError() {
+            console.error('PDF iframe 로드 오류');
+            this.pdfError = true;
+            this.pdfLoading = false;
+        },
+
         // HTML 미리보기 로드
         async loadHtmlPreview(documentId) {
             this.htmlLoading = true;