04ae64fc4d
- 업로드 시 HTML과 PDF를 별도 폴더에 저장 (/documents/, /pdfs/) - 프론트엔드 필터링을 폴더 경로 기준으로 단순화 - PDF 삭제 시 외래키 참조 해제 로직 추가 - book-documents.js, book-editor.js 필터링 통일 - HTML 문서 목록에서 PDF 완전 분리
196 lines
10 KiB
HTML
196 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PDF 파일 관리 - Document Server</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
|
<style>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen" x-data="pdfManagerApp()">
|
|
<!-- 헤더 -->
|
|
<div id="header-container"></div>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">PDF 파일 관리</h1>
|
|
<p class="text-gray-600 mt-2">업로드된 PDF 파일들을 관리하고 삭제할 수 있습니다</p>
|
|
</div>
|
|
|
|
<button @click="refreshPDFs()"
|
|
:disabled="loading"
|
|
class="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded-lg transition-colors">
|
|
<i class="fas fa-sync-alt mr-2" :class="{'fa-spin': loading}"></i>
|
|
<span>새로고침</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 통계 카드 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-file-pdf text-red-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900">전체 PDF</h3>
|
|
<p class="text-2xl font-bold text-red-600" x-text="pdfDocuments.length"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-link text-green-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900">연결된 PDF</h3>
|
|
<p class="text-2xl font-bold text-green-600" x-text="linkedPDFs"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-unlink text-yellow-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900">독립 PDF</h3>
|
|
<p class="text-2xl font-bold text-yellow-600" x-text="standalonePDFs"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PDF 목록 -->
|
|
<div class="bg-white rounded-lg shadow-sm border">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold text-gray-900">PDF 파일 목록</h2>
|
|
|
|
<!-- 필터 버튼 -->
|
|
<div class="flex space-x-2">
|
|
<button @click="filterType = 'all'"
|
|
:class="filterType === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
|
|
class="px-3 py-1.5 rounded-lg text-sm transition-colors">
|
|
전체
|
|
</button>
|
|
<button @click="filterType = 'linked'"
|
|
:class="filterType === 'linked' ? 'bg-green-600 text-white' : 'bg-gray-200 text-gray-700'"
|
|
class="px-3 py-1.5 rounded-lg text-sm transition-colors">
|
|
연결됨
|
|
</button>
|
|
<button @click="filterType = 'standalone'"
|
|
:class="filterType === 'standalone' ? 'bg-yellow-600 text-white' : 'bg-gray-200 text-gray-700'"
|
|
class="px-3 py-1.5 rounded-lg text-sm transition-colors">
|
|
독립
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="loading" class="p-8 text-center">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-gray-400 mb-2"></i>
|
|
<p class="text-gray-500">PDF 파일을 불러오는 중...</p>
|
|
</div>
|
|
|
|
<!-- PDF 목록 -->
|
|
<div x-show="!loading && filteredPDFs.length > 0" class="divide-y divide-gray-200">
|
|
<template x-for="pdf in filteredPDFs" :key="pdf.id">
|
|
<div class="p-6 hover:bg-gray-50 transition-colors">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start space-x-4 flex-1">
|
|
<!-- PDF 아이콘 -->
|
|
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-file-pdf text-red-600 text-xl"></i>
|
|
</div>
|
|
|
|
<!-- PDF 정보 -->
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-1" x-text="pdf.title"></h3>
|
|
<p class="text-sm text-gray-500 mb-2" x-text="pdf.original_filename"></p>
|
|
<p class="text-sm text-gray-600 line-clamp-2" x-text="pdf.description || '설명이 없습니다'"></p>
|
|
|
|
<!-- 연결 상태 -->
|
|
<div class="mt-3 flex items-center space-x-4">
|
|
<span class="text-sm text-gray-500">
|
|
<i class="fas fa-calendar mr-1"></i>
|
|
<span x-text="formatDate(pdf.created_at)"></span>
|
|
</span>
|
|
|
|
<div x-show="pdf.isLinked">
|
|
<span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
|
|
<i class="fas fa-link mr-1"></i>
|
|
연결됨
|
|
</span>
|
|
</div>
|
|
|
|
<div x-show="!pdf.isLinked">
|
|
<span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">
|
|
<i class="fas fa-unlink mr-1"></i>
|
|
독립 파일
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 액션 버튼 -->
|
|
<div class="flex items-center space-x-2 ml-4">
|
|
<button @click="downloadPDF(pdf)"
|
|
class="p-2 text-gray-400 hover:text-blue-600 transition-colors"
|
|
title="PDF 다운로드">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
|
|
<button x-show="currentUser && currentUser.is_admin"
|
|
@click="deletePDF(pdf)"
|
|
class="p-2 text-gray-400 hover:text-red-600 transition-colors"
|
|
title="PDF 삭제">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 빈 상태 -->
|
|
<div x-show="!loading && filteredPDFs.length === 0" class="p-8 text-center">
|
|
<i class="fas fa-file-pdf text-gray-400 text-4xl mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">PDF 파일이 없습니다</h3>
|
|
<p class="text-gray-500">
|
|
<span x-show="filterType === 'all'">업로드된 PDF 파일이 없습니다</span>
|
|
<span x-show="filterType === 'linked'">연결된 PDF 파일이 없습니다</span>
|
|
<span x-show="filterType === 'standalone'">독립 PDF 파일이 없습니다</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- JavaScript 파일들 -->
|
|
<script src="/static/js/api.js?v=2025012384"></script>
|
|
<script src="/static/js/auth.js?v=2025012351"></script>
|
|
<script src="/static/js/header-loader.js?v=2025012351"></script>
|
|
<script src="/static/js/pdf-manager.js?v=2025012388"></script>
|
|
</body>
|
|
</html>
|