hyungi/document-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

스토리 뷰 페이지 헤더 z-index 충돌 문제 해결

Browse Source 
- 메인 컨테이너 padding-top을 pt-4에서 pt-20으로 증가
- 드롭다운 z-index를 z-[60]으로 설정하여 헤더보다 높은 우선순위 부여
- 스토리 선택 드롭다운이 정상적으로 작동하도록 수정
- 디버깅용 코드 정리
This commit is contained in:
Hyungi Ahn
2025-09-04 10:22:43 +09:00
parent 3ba804276c
commit 43e7466195
11 changed files with 709 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
frontend/viewer.html
View File

@@ -266,13 +266,210 @@
</div>
<!-- 문서 내용 -->
<div x-show="!loading && !error" id="document-content" class="prose max-w-none">
<!-- 문서 HTML이 여기에 로드됩니다 -->
<div x-show="!loading && !error">
<!-- HTML 문서 내용 -->
<div x-show="contentType === 'document' && document && !document.pdf_path"
id="document-content" class="prose max-w-none">
<!-- 문서 HTML이 여기에 로드됩니다 -->
</div>
<!-- PDF 뷰어 -->
<div x-show="contentType === 'document' && document && document.pdf_path"
class="pdf-viewer-container">
<div class="mb-4 flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-file-pdf text-red-600 text-xl"></i>
<h1 class="text-2xl font-bold text-gray-900" x-text="document?.title"></h1>
</div>
<div class="flex items-center space-x-2">
<button @click="openPdfSearchModal()"
class="px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center space-x-2">
<i class="fas fa-search"></i>
<span>PDF에서 검색</span>
</button>
<button @click="downloadOriginalFile()"
class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2">
<i class="fas fa-download"></i>
<span>다운로드</span>
</button>
</div>
</div>
<!-- PDF 뷰어 컨테이너 -->
<div class="border rounded-lg overflow-hidden bg-white relative" style="min-height: 800px;">
<!-- PDF.js 뷰어 -->
<div x-show="!pdfError && !pdfLoading && pdfSrc" class="w-full h-full">
<!-- PDF 뷰어 툴바 -->
<div class="bg-gray-100 border-b px-4 py-2 flex items-center justify-between">
<div class="flex items-center space-x-4">
<button @click="previousPage()" :disabled="currentPage <= 1"
class="px-3 py-1 bg-blue-600 text-white rounded disabled:bg-gray-300">
<i class="fas fa-chevron-left"></i>
</button>
<span class="text-sm">
<input type="number" x-model="currentPage" @change="goToPage(currentPage)"
class="w-16 px-2 py-1 border rounded text-center" min="1" :max="totalPages">
/ <span x-text="totalPages"></span>
</span>
<button @click="nextPage()" :disabled="currentPage >= totalPages"
class="px-3 py-1 bg-blue-600 text-white rounded disabled:bg-gray-300">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="flex items-center space-x-2">
<button @click="zoomOut()" class="px-2 py-1 bg-gray-600 text-white rounded">
<i class="fas fa-search-minus"></i>
</button>
<span class="text-sm" x-text="Math.round(pdfScale * 100) + '%'"></span>
<button @click="zoomIn()" class="px-2 py-1 bg-gray-600 text-white rounded">
<i class="fas fa-search-plus"></i>
</button>
</div>
</div>
<!-- PDF 캔버스 -->
<div class="overflow-auto" style="height: 750px;">
<canvas id="pdf-canvas" class="mx-auto block"></canvas>
</div>
</div>
<!-- 기존 iframe (폴백용) -->
<iframe id="pdf-viewer-iframe"
x-show="false"
class="w-full border-0"
style="height: 800px;"
:src="pdfSrc"
@load="pdfLoaded = true; console.log('PDF iframe 로드 완료')"
@error="handlePdfError()"
allow="fullscreen">
</iframe>
<!-- PDF 로딩 상태 -->
<div x-show="pdfLoading" class="flex items-center justify-center h-full" style="min-height: 400px;">
<div class="text-center">
<i class="fas fa-spinner fa-spin text-3xl text-gray-500 mb-4"></i>
<p class="text-gray-600 text-lg">PDF를 로드하는 중...</p>
</div>
</div>
<!-- PDF 에러 상태 -->
<div x-show="pdfError" class="flex items-center justify-center h-full text-gray-500" style="min-height: 400px;">
<div class="text-center">
<i class="fas fa-exclamation-triangle text-3xl mb-4 text-red-500"></i>
<p class="text-lg mb-4">PDF를 로드할 수 없습니다</p>
<button @click="retryPdfLoad()"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 mr-2">
다시 시도
</button>
<button @click="downloadOriginalFile()"
class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
파일 다운로드
</button>
</div>
</div>
</div>
</div>
<!-- 노트 문서 내용 -->
<div x-show="contentType === 'note'"
id="note-content" class="prose max-w-none">
<!-- 노트 내용이 여기에 로드됩니다 -->
</div>
</div>
</div>
</main>
</div>
<!-- PDF 검색 모달 -->
<div x-show="showPdfSearchModal"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
@click.self="showPdfSearchModal = false">
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full">
<!-- 헤더 -->
<div class="flex items-center justify-between p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-900 flex items-center space-x-2">
<i class="fas fa-search text-green-600"></i>
<span>PDF에서 검색</span>
</h3>
<button @click="showPdfSearchModal = false"
class="text-gray-400 hover:text-gray-600 transition-colors">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- 내용 -->
<div class="p-6">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">검색어</label>
<div class="relative">
<input type="text"
x-model="pdfSearchQuery"
@keydown.enter="searchInPdf()"
@input="pdfSearchResults = []"
placeholder="예: pressure, vessel, design..."
class="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
x-ref="searchInput">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<i class="fas fa-search text-gray-400"></i>
</div>
</div>
<div class="mt-1 text-xs text-gray-500">
Enter 키를 누르거나 검색 버튼을 클릭하세요
</div>
</div>
<!-- 검색 결과 -->
<div x-show="pdfSearchResults.length > 0" class="mb-4">
<div class="text-sm text-gray-600 mb-2">
<i class="fas fa-check-circle text-green-500 mr-1"></i>
<span x-text="pdfSearchResults.length"></span>개의 결과를 찾았습니다.
</div>
<div class="max-h-40 overflow-y-auto space-y-2">
<template x-for="(result, index) in pdfSearchResults" :key="index">
<div class="p-3 bg-gray-50 rounded cursor-pointer hover:bg-green-50 border hover:border-green-200 transition-colors"
@click="jumpToPdfResult(result)">
<div class="text-sm font-medium text-green-700">
<i class="fas fa-file-pdf mr-1"></i>
페이지 <span x-text="result.page"></span>
</div>
<div class="text-xs text-gray-600 mt-1" x-text="result.context"></div>
</div>
</template>
</div>
</div>
<!-- 검색 결과 없음 -->
<div x-show="pdfSearchQuery.trim() && !pdfSearchLoading && pdfSearchResults.length === 0" class="mb-4">
<div class="text-center py-4 text-gray-500">
<i class="fas fa-search text-2xl mb-2"></i>
<p class="text-sm">검색 결과가 없습니다.</p>
<p class="text-xs mt-1">다른 검색어로 시도해보세요.</p>
</div>
</div>
<!-- 버튼 -->
<div class="flex space-x-3">
<button @click="searchInPdf()"
:disabled="!pdfSearchQuery.trim() || pdfSearchLoading"
class="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors">
<i :class="pdfSearchLoading ? 'fas fa-spinner fa-spin' : 'fas fa-search'" class="mr-2"></i>
<span x-text="pdfSearchLoading ? '검색 중...' : '검색'"></span>
</button>
<button @click="showPdfSearchModal = false"
class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors">
닫기
</button>
</div>
</div>
</div>
</div>
<!-- 링크 모달 -->
<div x-show="showLinksModal"
x-transition:enter="transition ease-out duration-300"
@@ -781,14 +978,17 @@
<script src="/static/js/viewer/utils/module-loader.js?v=2025012607"></script>
<!-- 모든 모듈들 직접 로드 -->
<script src="/static/js/viewer/core/document-loader.js?v=2025012607"></script>
<script src="/static/js/viewer/core/document-loader.js?v=2025012624"></script>
<script src="/static/js/viewer/features/ui-manager.js?v=2025012607"></script>
<script src="/static/js/viewer/features/highlight-manager.js?v=2025012619"></script>
<script src="/static/js/viewer/features/link-manager.js?v=2025012622"></script>
<script src="/static/js/viewer/features/bookmark-manager.js?v=2025012607"></script>
<!-- ViewerCore (Alpine.js 컴포넌트) -->
<script src="/static/js/viewer/viewer-core.js?v=2025012623"></script>
<script src="/static/js/viewer/viewer-core.js?v=2025012626"></script>
<!-- PDF.js 라이브러리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<!-- Alpine.js 프레임워크 -->
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>