🔧 Alpine.js 변수 오류 수정 및 PDF 미리보기 간소화
🐛 Alpine.js 오류 수정: - PDF 관련 변수들 (pdfZoom, pdfLoading, pdfCurrentPage 등) 제거 - HTML 뷰어 변수들 유지 (htmlLoading, htmlRawMode, htmlSourceCode) - 중복 변수 정의 제거 📱 PDF 미리보기 간소화: - PDF.js Canvas 렌더링 → iframe 방식으로 변경 - 복잡한 줌/페이지 네비게이션 제거 - 브라우저 내장 PDF 뷰어 활용 - 401 Unauthorized 오류 해결을 위한 토큰 처리 🎯 성능 및 안정성 개선: - PDF.js 워커 설정을 HTML에서 전역으로 처리 - 불필요한 JavaScript 함수들 제거 - 메모리 누수 방지를 위한 리소스 정리 - 에러 처리 간소화 ✨ 사용자 경험: - 더 빠른 PDF 로딩 - 브라우저 기본 PDF 컨트롤 사용 가능 - Alpine.js 경고 메시지 제거 - 안정적인 미리보기 동작
This commit is contained in:
Hyungi Ahn
@@ -10,6 +10,12 @@
|
||||
|
||||
<!-- PDF.js 라이브러리 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>
|
||||
// PDF.js 워커 설정 (전역)
|
||||
if (typeof pdfjsLib !== 'undefined') {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
@@ -467,15 +473,6 @@
|
||||
<i class="fas fa-file-pdf mr-2 text-red-600"></i>PDF 미리보기
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button @click="zoomOut()"
|
||||
class="px-2 py-1 bg-gray-600 text-white rounded text-xs hover:bg-gray-700">
|
||||
<i class="fas fa-search-minus"></i>
|
||||
</button>
|
||||
<span class="text-xs text-gray-600" x-text="`${Math.round(pdfZoom * 100)}%`"></span>
|
||||
<button @click="zoomIn()"
|
||||
class="px-2 py-1 bg-gray-600 text-white rounded text-xs hover:bg-gray-700">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</button>
|
||||
<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에서 검색
|
||||
@@ -485,54 +482,22 @@
|
||||
|
||||
<!-- PDF 뷰어 컨테이너 -->
|
||||
<div class="border rounded-lg overflow-hidden bg-gray-100 relative" style="height: 500px;">
|
||||
<!-- PDF.js 뷰어 -->
|
||||
<div id="pdfViewerContainer" class="w-full h-full overflow-auto bg-gray-200">
|
||||
<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>
|
||||
|
||||
<canvas id="pdfCanvas"
|
||||
x-show="!pdfLoading && !pdfError"
|
||||
class="mx-auto shadow-lg"
|
||||
style="display: block; margin: 20px auto;"></canvas>
|
||||
|
||||
<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>
|
||||
<!-- PDF iframe 뷰어 -->
|
||||
<iframe :src="`/api/documents/${previewResult?.document_id}/pdf`"
|
||||
class="w-full h-full border-0"
|
||||
x-show="!pdfError"
|
||||
@error="pdfError = true">
|
||||
</iframe>
|
||||
|
||||
<!-- 페이지 네비게이션 -->
|
||||
<div x-show="!pdfLoading && !pdfError && pdfTotalPages > 1"
|
||||
class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-75 text-white px-4 py-2 rounded-lg flex items-center space-x-3">
|
||||
<button @click="prevPage()"
|
||||
:disabled="pdfCurrentPage <= 1"
|
||||
class="px-2 py-1 bg-gray-600 rounded text-xs hover:bg-gray-500 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<span class="text-sm">
|
||||
<input type="number"
|
||||
x-model="pdfCurrentPage"
|
||||
@change="goToPage(pdfCurrentPage)"
|
||||
:min="1"
|
||||
:max="pdfTotalPages"
|
||||
class="w-12 text-center bg-transparent border-b border-gray-400 text-white text-xs">
|
||||
/ <span x-text="pdfTotalPages"></span>
|
||||
</span>
|
||||
<button @click="nextPage()"
|
||||
:disabled="pdfCurrentPage >= pdfTotalPages"
|
||||
class="px-2 py-1 bg-gray-600 rounded text-xs hover:bg-gray-500 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user