📄 PDF 본문 검색 및 미리보기 완성

🔍 PDF/HTML 본문 검색 개선:
- PDF OCR 데이터 전체 텍스트 검색 (BeautifulSoup + PyPDF2)
- 서적 HTML 파일 본문 검색 지원
- 파일 타입 구분 (PDF/HTML/PDF직접추출)
- 검색어 매치 횟수 기반 관련성 점수
- 절대/상대 경로 처리 개선

📱 PDF 미리보기 기능:
- 검색 결과에서 PDF 직접 미리보기 (iframe)
- PDF에서 검색 버튼으로 페이지 이동
- 검색어 위치 기반 뷰어 연동
- PDF 로드 실패 시 fallback UI

🎯 백엔드 API 추가:
- GET /documents/{id}/pdf: PDF 파일 직접 제공
- GET /documents/{id}/search-in-content: 문서 내 검색
- 페이지별 검색 결과 및 컨텍스트 제공
- 권한 확인 및 에러 처리

🎨 프론트엔드 UX:
- PDF/HTML 타입별 배지 표시
- 검색 통계에 본문 검색 결과 포함
- 미리보기 모달에서 PDF 뷰어 통합
- 검색어 하이라이트 및 컨텍스트 표시
This commit is contained in:
Hyungi Ahn
2025-09-02 17:09:32 +09:00
parent 0afe6dcf65
commit 4b65d45584
4 changed files with 332 additions and 21 deletions

View File

@@ -281,6 +281,12 @@
<span x-show="getResultCount('highlight') > 0">
🖍️ 하이라이트 <strong x-text="getResultCount('highlight')"></strong>
</span>
<span x-show="getResultCount('highlight_note') > 0">
💬 메모 <strong x-text="getResultCount('highlight_note')"></strong>
</span>
<span x-show="getResultCount('document_content') > 0">
📖 본문 <strong x-text="getResultCount('document_content')"></strong>
</span>
</div>
</div>
<div class="text-xs text-gray-500">
@@ -450,6 +456,39 @@
<!-- 모달 내용 -->
<div class="p-6 overflow-y-auto max-h-[60vh]">
<!-- PDF 미리보기 -->
<div x-show="previewResult?.type === 'document_content' && previewResult?.highlight_info?.has_pdf"
class="mb-4">
<div class="flex items-center justify-between mb-3">
<div class="text-sm font-medium text-gray-800">
<i class="fas fa-file-pdf mr-2 text-red-600"></i>PDF 미리보기
</div>
<div class="flex items-center space-x-2">
<button @click="searchInPdf()"
class="px-3 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700">
<i class="fas fa-search mr-1"></i>PDF에서 검색
</button>
</div>
</div>
<div class="border rounded-lg overflow-hidden bg-gray-100" style="height: 400px;">
<iframe :src="`/api/documents/${previewResult?.document_id}/pdf`"
class="w-full h-full"
x-show="!pdfError"
@error="pdfError = true">
</iframe>
<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>
<p>PDF를 로드할 수 없습니다</p>
<button @click="openResult(previewResult)"
class="mt-2 px-3 py-1 bg-blue-600 text-white rounded text-sm">
뷰어에서 열기
</button>
</div>
</div>
</div>
</div>
<!-- 하이라이트 정보 -->
<div x-show="previewResult?.type === 'highlight' && previewResult?.highlight_info"
class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
@@ -473,8 +512,23 @@
<div class="text-sm font-medium text-blue-800 mb-1">메모 내용:</div>
</div>
<!-- 본문 검색 결과 정보 -->
<div x-show="previewResult?.type === 'document_content' && previewResult?.highlight_info"
class="mb-4 p-4 bg-gray-50 border border-gray-200 rounded-lg">
<div class="flex items-center justify-between mb-2">
<div class="text-sm font-medium text-gray-800">
<i class="fas fa-search mr-2"></i>본문 검색 결과
</div>
<div class="text-xs text-gray-600">
<span x-text="previewResult?.highlight_info?.file_type"></span>
<span x-text="previewResult?.highlight_info?.match_count"></span>개 매치
</div>
</div>
</div>
<!-- 본문 내용 -->
<div class="prose max-w-none">
<div x-show="!previewResult?.highlight_info?.has_pdf || previewResult?.type !== 'document_content'"
class="prose max-w-none">
<div class="text-gray-700 leading-relaxed"
style="white-space: pre-wrap; word-wrap: break-word; max-height: 400px; overflow-y: auto;"
x-html="highlightText(previewResult?.content || '', searchQuery)"></div>