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

feat: PDF/HTML 폴더 분리 및 필터링 개선

Browse Source 
- 업로드 시 HTML과 PDF를 별도 폴더에 저장 (/documents/, /pdfs/)
- 프론트엔드 필터링을 폴더 경로 기준으로 단순화
- PDF 삭제 시 외래키 참조 해제 로직 추가
- book-documents.js, book-editor.js 필터링 통일
- HTML 문서 목록에서 PDF 완전 분리
This commit is contained in:
Hyungi Ahn
2025-08-26 07:44:25 +09:00
parent 4038040faa
commit 04ae64fc4d
20 changed files with 1334 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/book-documents.html
View File

@@ -31,11 +31,16 @@
<main class="container mx-auto px-4 py-8">
<!-- 뒤로가기 및 서적 정보 -->
<div class="mb-8">
<div class="flex items-center space-x-4 mb-4">
<div class="flex items-center justify-between mb-4">
<button @click="goBack()"
class="flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
<i class="fas fa-arrow-left mr-2"></i>목차로 돌아가기
</button>
<button @click="openBookEditor()"
class="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
<i class="fas fa-edit mr-2"></i>서적 편집
</button>
</div>
<div class="bg-white rounded-lg shadow-sm border p-6">
@@ -125,9 +130,9 @@
</main>
<!-- JavaScript 파일들 -->
<script src="/static/js/api.js?v=2025012380"></script>
<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/book-documents.js?v=2025012371"></script>
<script src="/static/js/book-documents.js?v=2025012401"></script>
</body>
</html>

194
frontend/book-editor.html Normal file
View File

@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서적 편집 - 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">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<style>
.sortable-ghost {
opacity: 0.4;
}
.sortable-chosen {
background-color: #f3f4f6;
}
.sortable-drag {
background-color: white;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen" x-data="bookEditorApp()">
<!-- 헤더 -->
<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">
<button @click="goBack()"
class="flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
<i class="fas fa-arrow-left mr-2"></i>서적으로 돌아가기
</button>
<button @click="saveChanges()"
:disabled="saving"
class="flex items-center px-6 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded-lg transition-colors">
<i class="fas fa-save mr-2"></i>
<span x-text="saving ? '저장 중...' : '변경사항 저장'"></span>
</button>
</div>
<div class="bg-white rounded-lg shadow-sm border p-6">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center mr-6">
<i class="fas fa-book text-white text-2xl"></i>
</div>
<div>
<h1 class="text-2xl font-bold text-gray-900" x-text="bookInfo.title"></h1>
<p class="text-gray-600 mt-1" x-show="bookInfo.author" x-text="bookInfo.author"></p>
<p class="text-sm text-gray-500 mt-2">
<span x-text="documents.length"></span>개 문서 편집
</p>
</div>
</div>
</div>
</div>
<!-- 로딩 상태 -->
<div x-show="loading" class="text-center py-12">
<i class="fas fa-spinner fa-spin text-3xl text-gray-400 mb-4"></i>
<p class="text-gray-500">데이터를 불러오는 중...</p>
</div>
<!-- 편집 섹션 -->
<div x-show="!loading" class="space-y-8">
<!-- 서적 정보 편집 -->
<div class="bg-white rounded-lg shadow-sm border">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-info-circle mr-2 text-blue-600"></i>
서적 정보
</h2>
</div>
<div class="p-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">서적 제목</label>
<input type="text"
x-model="bookInfo.title"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">저자</label>
<input type="text"
x-model="bookInfo.author"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">설명</label>
<textarea x-model="bookInfo.description"
rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
</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 flex items-center">
<i class="fas fa-list-ol mr-2 text-green-600"></i>
문서 순서 및 PDF 매칭
</h2>
<div class="flex space-x-2">
<button @click="autoSortByName()"
class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors text-sm">
<i class="fas fa-sort-alpha-down mr-1"></i>이름순 정렬
</button>
<button @click="reverseOrder()"
class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors text-sm">
<i class="fas fa-exchange-alt mr-1"></i>순서 뒤집기
</button>
</div>
</div>
</div>
<div class="p-6">
<div id="sortable-list" class="space-y-3">
<template x-for="(doc, index) in documents" :key="doc.id">
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-move hover:bg-gray-100 transition-colors"
:data-id="doc.id">
<div class="flex items-center justify-between">
<div class="flex items-center flex-1">
<!-- 드래그 핸들 -->
<div class="mr-4 text-gray-400">
<i class="fas fa-grip-vertical"></i>
</div>
<!-- 순서 번호 -->
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">
<span x-text="index + 1"></span>
</div>
<!-- 문서 정보 -->
<div class="flex-1">
<h3 class="font-medium text-gray-900" x-text="doc.title"></h3>
<p class="text-sm text-gray-500" x-text="doc.description || '설명 없음'"></p>
</div>
</div>
<!-- PDF 매칭 및 컨트롤 -->
<div class="flex items-center space-x-3">
<!-- PDF 매칭 드롭다운 -->
<div class="min-w-48">
<select x-model="doc.matched_pdf_id"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
<option value="">PDF 매칭 없음</option>
<template x-for="pdf in availablePDFs" :key="pdf.id">
<option :value="pdf.id" x-text="pdf.title"></option>
</template>
</select>
</div>
<!-- 이동 버튼 -->
<div class="flex flex-col space-y-1">
<button @click="moveUp(index)"
:disabled="index === 0"
class="p-1 text-gray-400 hover:text-blue-600 disabled:opacity-30 disabled:cursor-not-allowed">
<i class="fas fa-chevron-up text-xs"></i>
</button>
<button @click="moveDown(index)"
:disabled="index === documents.length - 1"
class="p-1 text-gray-400 hover:text-blue-600 disabled:opacity-30 disabled:cursor-not-allowed">
<i class="fas fa-chevron-down text-xs"></i>
</button>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- 빈 상태 -->
<div x-show="documents.length === 0" class="text-center py-8">
<i class="fas fa-file-alt text-gray-400 text-3xl mb-4"></i>
<p class="text-gray-500">편집할 문서가 없습니다</p>
</div>
</div>
</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/book-editor.js?v=2025012401"></script>
</body>
</html>

3
frontend/components/header.html
View File

@@ -21,6 +21,9 @@
<a href="index.html" class="nav-dropdown-item" id="index-nav-item">
<i class="fas fa-th-large mr-2 text-blue-500"></i>문서 관리
</a>
<a href="pdf-manager.html" class="nav-dropdown-item" id="pdf-manager-nav-item">
<i class="fas fa-file-pdf mr-2 text-red-500"></i>PDF 관리
</a>
</div>
</div>

195
frontend/pdf-manager.html Normal file
View File

@@ -0,0 +1,195 @@
<!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>

6
frontend/static/js/api.js
View File

@@ -8,7 +8,7 @@ class DocumentServerAPI {
this.token = localStorage.getItem('access_token');
console.log('🐳 API Base URL (DOCKER BACKEND):', this.baseURL);
console.log('🔧 도커 환경 설정 완료 - 버전 2025012380');
console.log('🔧 도커 환경 설정 완료 - 버전 2025012384');
}
// 토큰 설정
@@ -383,6 +383,10 @@ class DocumentServerAPI {
return await this.get(`/books/${bookId}`);
}
async updateBook(bookId, bookData) {
return await this.put(`/books/${bookId}`, bookData);
}
async searchBooks(query, limit = 10) {
const params = new URLSearchParams({ q: query, limit });
return await this.get(`/books/search/?${params}`);

53
frontend/static/js/book-documents.js
View File

@@ -2,6 +2,7 @@
window.bookDocumentsApp = () => ({
// 상태 관리
documents: [],
availablePDFs: [],
bookInfo: {},
loading: false,
error: '',
@@ -73,15 +74,38 @@ window.bookDocumentsApp = () => ({
const allDocuments = await window.api.getDocuments();
if (this.bookId === 'none') {
// 서적 미분류 문서들
this.documents = allDocuments.filter(doc => !doc.book_id);
// 서적 미분류 HTML 문서들만 (폴더로 구분)
this.documents = allDocuments.filter(doc =>
!doc.book_id &&
doc.html_path &&
!doc.pdf_path?.includes('/pdfs/') // pdfs 폴더에 있는 건 제외
);
// 서적 미분류 PDF 문서들 (매칭용)
this.availablePDFs = allDocuments.filter(doc =>
!doc.book_id &&
doc.pdf_path &&
doc.pdf_path.includes('/pdfs/') // PDF는 pdfs 폴더에 저장됨
);
this.bookInfo = {
title: '서적 미분류',
description: '서적에 속하지 않은 문서들입니다.'
};
} else {
// 특정 서적의 문서들
this.documents = allDocuments.filter(doc => doc.book_id === this.bookId);
// 특정 서적의 HTML 문서들만 (폴더로 구분)
this.documents = allDocuments.filter(doc =>
doc.book_id === this.bookId &&
doc.html_path &&
!doc.pdf_path?.includes('/pdfs/') // pdfs 폴더에 있는 건 제외
);
// 특정 서적의 PDF 문서들 (매칭용)
this.availablePDFs = allDocuments.filter(doc =>
doc.book_id === this.bookId &&
doc.pdf_path &&
doc.pdf_path.includes('/pdfs/') // PDF는 pdfs 폴더에 저장됨
);
if (this.documents.length > 0) {
// 첫 번째 문서에서 서적 정보 추출
@@ -107,6 +131,18 @@ window.bookDocumentsApp = () => ({
}
console.log('📚 서적 문서 로드 완료:', this.documents.length, '개');
console.log('📕 사용 가능한 PDF:', this.availablePDFs.length, '개');
// 디버깅: 문서들의 original_filename 확인
console.log('🔍 문서들 확인:');
this.documents.slice(0, 5).forEach(doc => {
console.log(`- ${doc.title}: ${doc.original_filename}`);
});
console.log('🔍 PDF들 확인:');
this.availablePDFs.slice(0, 5).forEach(doc => {
console.log(`- ${doc.title}: ${doc.original_filename}`);
});
} catch (error) {
console.error('서적 문서 로드 실패:', error);
this.error = '문서를 불러오는데 실패했습니다: ' + error.message;
@@ -125,6 +161,15 @@ window.bookDocumentsApp = () => ({
window.open(`/viewer.html?id=${documentId}&from=book`, '_blank');
},
// 서적 편집 페이지 열기
openBookEditor() {
if (this.bookId === 'none') {
alert('서적 미분류 문서들은 편집할 수 없습니다.');
return;
}
window.location.href = `book-editor.html?bookId=${this.bookId}`;
},
// 문서 수정
editDocument(doc) {
// TODO: 문서 수정 모달 또는 페이지로 이동

246
frontend/static/js/book-editor.js Normal file
View File

@@ -0,0 +1,246 @@
// 서적 편집 애플리케이션 컴포넌트
window.bookEditorApp = () => ({
// 상태 관리
documents: [],
bookInfo: {},
availablePDFs: [],
loading: false,
saving: false,
error: '',
// 인증 상태
isAuthenticated: false,
currentUser: null,
// URL 파라미터
bookId: null,
// SortableJS 인스턴스
sortableInstance: null,
// 초기화
async init() {
console.log('🚀 Book Editor App 초기화 시작');
// URL 파라미터 파싱
this.parseUrlParams();
// 인증 상태 확인
await this.checkAuthStatus();
if (this.isAuthenticated) {
await this.loadBookData();
this.initSortable();
}
// 헤더 로드
await this.loadHeader();
},
// URL 파라미터 파싱
parseUrlParams() {
const urlParams = new URLSearchParams(window.location.search);
this.bookId = urlParams.get('bookId');
console.log('📖 편집할 서적 ID:', this.bookId);
},
// 인증 상태 확인
async checkAuthStatus() {
try {
const user = await window.api.getCurrentUser();
this.isAuthenticated = true;
this.currentUser = user;
console.log('✅ 인증됨:', user.username);
} catch (error) {
console.log('❌ 인증되지 않음');
this.isAuthenticated = false;
this.currentUser = null;
window.location.href = '/login.html';
}
},
// 헤더 로드
async loadHeader() {
try {
await window.headerLoader.loadHeader();
} catch (error) {
console.error('헤더 로드 실패:', error);
}
},
// 서적 데이터 로드
async loadBookData() {
this.loading = true;
this.error = '';
try {
// 서적 정보 로드
this.bookInfo = await window.api.getBook(this.bookId);
console.log('📚 서적 정보 로드:', this.bookInfo);
// 모든 문서 가져와서 이 서적에 속한 HTML 문서들만 필터링 (폴더로 구분)
const allDocuments = await window.api.getDocuments();
this.documents = allDocuments
.filter(doc =>
doc.book_id === this.bookId &&
doc.html_path &&
!doc.pdf_path?.includes('/pdfs/') // pdfs 폴더에 있는 건 제외
)
.sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0)); // 순서대로 정렬
console.log('📄 서적 문서들:', this.documents.length, '개');
// 사용 가능한 PDF 문서들 로드 (PDF 타입 문서들)
// PDF 문서들만 필터링 (폴더 경로 기준)
this.availablePDFs = allDocuments.filter(doc =>
doc.pdf_path &&
doc.pdf_path.includes('/pdfs/') // PDF는 pdfs 폴더에 저장됨
);
console.log('📎 사용 가능한 PDF:', this.availablePDFs.length, '개');
} catch (error) {
console.error('서적 데이터 로드 실패:', error);
this.error = '데이터를 불러오는데 실패했습니다: ' + error.message;
} finally {
this.loading = false;
}
},
// SortableJS 초기화
initSortable() {
this.$nextTick(() => {
const sortableList = document.getElementById('sortable-list');
if (sortableList && !this.sortableInstance) {
this.sortableInstance = Sortable.create(sortableList, {
animation: 150,
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
handle: '.fa-grip-vertical',
onEnd: (evt) => {
// 배열 순서 업데이트
const item = this.documents.splice(evt.oldIndex, 1)[0];
this.documents.splice(evt.newIndex, 0, item);
this.updateDisplayOrder();
}
});
console.log('✅ SortableJS 초기화 완료');
}
});
},
// 표시 순서 업데이트
updateDisplayOrder() {
this.documents.forEach((doc, index) => {
doc.sort_order = index + 1;
});
console.log('🔢 표시 순서 업데이트됨');
},
// 위로 이동
moveUp(index) {
if (index > 0) {
const item = this.documents.splice(index, 1)[0];
this.documents.splice(index - 1, 0, item);
this.updateDisplayOrder();
}
},
// 아래로 이동
moveDown(index) {
if (index < this.documents.length - 1) {
const item = this.documents.splice(index, 1)[0];
this.documents.splice(index + 1, 0, item);
this.updateDisplayOrder();
}
},
// 이름순 정렬
autoSortByName() {
this.documents.sort((a, b) => {
return a.title.localeCompare(b.title, 'ko', { numeric: true });
});
this.updateDisplayOrder();
console.log('📝 이름순 정렬 완료');
},
// 순서 뒤집기
reverseOrder() {
this.documents.reverse();
this.updateDisplayOrder();
console.log('🔄 순서 뒤집기 완료');
},
// 변경사항 저장
async saveChanges() {
if (this.saving) return;
this.saving = true;
try {
// 서적 정보 업데이트
await window.api.updateBook(this.bookId, {
title: this.bookInfo.title,
author: this.bookInfo.author,
description: this.bookInfo.description
});
// 각 문서의 순서와 PDF 매칭 정보 업데이트
const updatePromises = this.documents.map(doc => {
return window.api.updateDocument(doc.id, {
sort_order: doc.sort_order,
matched_pdf_id: doc.matched_pdf_id || null
});
});
await Promise.all(updatePromises);
console.log('✅ 모든 변경사항 저장 완료');
this.showNotification('변경사항이 저장되었습니다', 'success');
// 잠시 후 서적 페이지로 돌아가기
setTimeout(() => {
this.goBack();
}, 1500);
} catch (error) {
console.error('저장 실패:', error);
this.showNotification('저장에 실패했습니다: ' + error.message, 'error');
} finally {
this.saving = false;
}
},
// 뒤로가기
goBack() {
window.location.href = `book-documents.html?bookId=${this.bookId}`;
},
// 알림 표시
showNotification(message, type = 'info') {
console.log(`${type.toUpperCase()}: ${message}`);
// 간단한 토스트 알림 생성
const toast = document.createElement('div');
toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${
type === 'success' ? 'bg-green-600' :
type === 'error' ? 'bg-red-600' : 'bg-blue-600'
}`;
toast.textContent = message;
document.body.appendChild(toast);
// 3초 후 제거
setTimeout(() => {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 3000);
}
});
// 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', () => {
console.log('📄 Book Editor 페이지 로드됨');
});

229
frontend/static/js/pdf-manager.js Normal file
View File

@@ -0,0 +1,229 @@
// PDF 관리 애플리케이션 컴포넌트
window.pdfManagerApp = () => ({
// 상태 관리
pdfDocuments: [],
allDocuments: [],
loading: false,
error: '',
filterType: 'all', // 'all', 'linked', 'standalone'
// 인증 상태
isAuthenticated: false,
currentUser: null,
// 초기화
async init() {
console.log('🚀 PDF Manager App 초기화 시작');
// 인증 상태 확인
await this.checkAuthStatus();
if (this.isAuthenticated) {
await this.loadPDFs();
}
// 헤더 로드
await this.loadHeader();
},
// 인증 상태 확인
async checkAuthStatus() {
try {
const user = await window.api.getCurrentUser();
this.isAuthenticated = true;
this.currentUser = user;
console.log('✅ 인증됨:', user.username);
} catch (error) {
console.log('❌ 인증되지 않음');
this.isAuthenticated = false;
this.currentUser = null;
window.location.href = '/login.html';
}
},
// 헤더 로드
async loadHeader() {
try {
await window.headerLoader.loadHeader();
} catch (error) {
console.error('헤더 로드 실패:', error);
}
},
// PDF 파일들 로드
async loadPDFs() {
this.loading = true;
this.error = '';
try {
// 모든 문서 가져오기
this.allDocuments = await window.api.getDocuments();
// PDF 파일들만 필터링
this.pdfDocuments = this.allDocuments.filter(doc =>
(doc.original_filename && doc.original_filename.toLowerCase().endsWith('.pdf')) ||
(doc.pdf_path && doc.pdf_path !== '') ||
(doc.html_path === null && doc.pdf_path) // PDF만 업로드된 경우
);
// 연결 상태 확인
this.pdfDocuments.forEach(pdf => {
// 이 PDF를 참조하는 다른 문서가 있는지 확인
const linkedDocuments = this.allDocuments.filter(doc =>
doc.matched_pdf_id === pdf.id
);
pdf.isLinked = linkedDocuments.length > 0;
pdf.linkedDocuments = linkedDocuments;
});
console.log('📕 PDF 문서들:', this.pdfDocuments.length, '개');
} catch (error) {
console.error('PDF 로드 실패:', error);
this.error = 'PDF 파일을 불러오는데 실패했습니다: ' + error.message;
this.pdfDocuments = [];
} finally {
this.loading = false;
}
},
// 필터링된 PDF 목록
get filteredPDFs() {
switch (this.filterType) {
case 'linked':
return this.pdfDocuments.filter(pdf => pdf.isLinked);
case 'standalone':
return this.pdfDocuments.filter(pdf => !pdf.isLinked);
default:
return this.pdfDocuments;
}
},
// 통계 계산
get linkedPDFs() {
return this.pdfDocuments.filter(pdf => pdf.isLinked).length;
},
get standalonePDFs() {
return this.pdfDocuments.filter(pdf => !pdf.isLinked).length;
},
// PDF 새로고침
async refreshPDFs() {
await this.loadPDFs();
},
// PDF 다운로드
async downloadPDF(pdf) {
try {
console.log('📕 PDF 다운로드 시작:', pdf.id);
// PDF 파일 다운로드 URL 생성
const downloadUrl = `/api/documents/${pdf.id}/download`;
// 인증 헤더 추가를 위해 fetch 사용
const response = await fetch(downloadUrl, {
method: 'GET',
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
}
});
if (!response.ok) {
throw new Error('PDF 다운로드에 실패했습니다');
}
// Blob으로 변환하여 다운로드
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
// 다운로드 링크 생성 및 클릭
const link = document.createElement('a');
link.href = url;
link.download = pdf.original_filename || `${pdf.title}.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// URL 정리
window.URL.revokeObjectURL(url);
console.log('✅ PDF 다운로드 완료');
} catch (error) {
console.error('❌ PDF 다운로드 실패:', error);
alert('PDF 다운로드에 실패했습니다: ' + error.message);
}
},
// PDF 삭제
async deletePDF(pdf) {
// 연결된 문서가 있는지 확인
if (pdf.isLinked && pdf.linkedDocuments.length > 0) {
const linkedTitles = pdf.linkedDocuments.map(doc => doc.title).join('\n- ');
const confirmMessage = `이 PDF는 다음 문서들과 연결되어 있습니다:\n\n- ${linkedTitles}\n\n정말 삭제하시겠습니까? 연결된 문서들의 PDF 링크가 해제됩니다.`;
if (!confirm(confirmMessage)) {
return;
}
} else {
if (!confirm(`"${pdf.title}" PDF 파일을 삭제하시겠습니까?`)) {
return;
}
}
try {
await window.api.deleteDocument(pdf.id);
// 목록에서 제거
this.pdfDocuments = this.pdfDocuments.filter(p => p.id !== pdf.id);
this.showNotification('PDF 파일이 삭제되었습니다', 'success');
// 목록 새로고침 (연결 상태 업데이트를 위해)
await this.loadPDFs();
} catch (error) {
console.error('PDF 삭제 실패:', error);
this.showNotification('PDF 삭제에 실패했습니다: ' + error.message, 'error');
}
},
// 날짜 포맷팅
formatDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleDateString('ko-KR', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
},
// 알림 표시
showNotification(message, type = 'info') {
console.log(`${type.toUpperCase()}: ${message}`);
// 간단한 토스트 알림 생성
const toast = document.createElement('div');
toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${
type === 'success' ? 'bg-green-600' :
type === 'error' ? 'bg-red-600' : 'bg-blue-600'
}`;
toast.textContent = message;
document.body.appendChild(toast);
// 3초 후 제거
setTimeout(() => {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 3000);
}
});
// 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', () => {
console.log('📄 PDF Manager 페이지 로드됨');
});

111
frontend/static/js/upload.js
View File

@@ -261,8 +261,11 @@ window.uploadApp = () => ({
console.log('📄 HTML 파일:', htmlFiles.length, '개');
console.log('📕 PDF 파일:', pdfFiles.length, '개');
// HTML 파일 업로드 (백엔드 API에 맞게)
const uploadPromises = htmlFiles.map(async (file, index) => {
// 업로드할 파일들 처리
const uploadPromises = [];
// HTML 파일 업로드 (PDF 파일이 있으면 함께 업로드)
htmlFiles.forEach(async (file, index) => {
const formData = new FormData();
formData.append('html_file', file); // 백엔드가 요구하는 필드명
formData.append('title', file.name.replace(/\.[^/.]+$/, "")); // 확장자 제거
@@ -270,52 +273,96 @@ window.uploadApp = () => ({
formData.append('language', 'ko');
formData.append('is_public', 'false');
// 같은 이름의 PDF 파일이 있는지 확인
const htmlBaseName = file.name.replace(/\.[^/.]+$/, "");
const matchingPdf = pdfFiles.find(pdfFile => {
const pdfBaseName = pdfFile.name.replace(/\.[^/.]+$/, "");
return pdfBaseName === htmlBaseName;
});
if (matchingPdf) {
formData.append('pdf_file', matchingPdf);
console.log('📎 매칭된 PDF 파일 함께 업로드:', matchingPdf.name);
}
if (bookId) {
formData.append('book_id', bookId);
}
try {
const response = await window.api.uploadDocument(formData);
console.log('✅ HTML 파일 업로드 완료:', file.name);
return response;
} catch (error) {
console.error('❌ HTML 파일 업로드 실패:', file.name, error);
throw error;
const uploadPromise = (async () => {
try {
const response = await window.api.uploadDocument(formData);
console.log('✅ HTML 파일 업로드 완료:', file.name);
return response;
} catch (error) {
console.error('❌ HTML 파일 업로드 실패:', file.name, error);
throw error;
}
})();
uploadPromises.push(uploadPromise);
});
// HTML과 매칭되지 않은 PDF 파일들을 별도로 업로드
const unmatchedPdfs = pdfFiles.filter(pdfFile => {
const pdfBaseName = pdfFile.name.replace(/\.[^/.]+$/, "");
return !htmlFiles.some(htmlFile => {
const htmlBaseName = htmlFile.name.replace(/\.[^/.]+$/, "");
return htmlBaseName === pdfBaseName;
});
});
unmatchedPdfs.forEach(async (file, index) => {
const formData = new FormData();
formData.append('html_file', file); // PDF도 html_file로 전송 (백엔드에서 처리)
formData.append('title', file.name.replace(/\.[^/.]+$/, "")); // 확장자 제거
formData.append('description', `PDF 파일: ${file.name}`);
formData.append('language', 'ko');
formData.append('is_public', 'false');
if (bookId) {
formData.append('book_id', bookId);
}
const uploadPromise = (async () => {
try {
const response = await window.api.uploadDocument(formData);
console.log('✅ PDF 파일 업로드 완료:', file.name);
return response;
} catch (error) {
console.error('❌ PDF 파일 업로드 실패:', file.name, error);
throw error;
}
})();
uploadPromises.push(uploadPromise);
});
// PDF 파일은 별도로 처리 (나중에 HTML과 매칭)
const pdfUploadPromises = pdfFiles.map(async (file, index) => {
// PDF 전용 업로드 로직 (임시로 HTML 파일로 처리하지 않음)
console.log('📕 PDF 파일 대기 중:', file.name);
return {
id: `pdf-${Date.now()}-${index}`,
title: file.name.replace(/\.[^/.]+$/, ""),
original_filename: file.name,
file_type: 'pdf',
file: file // 실제 파일 객체 보관
};
});
// 모든 업로드 완료 대기
const uploadedDocs = await Promise.all(uploadPromises);
// HTML 파일 업로드 완료 대기
const uploadedHtmlDocs = await Promise.all(uploadPromises);
// HTML 문서와 PDF 문서 분리
const htmlDocuments = uploadedDocs.filter(doc =>
doc.html_path && doc.html_path !== null
);
// PDF 파일 처리 (실제 업로드는 하지 않고 매칭용으로만 보관)
const pdfDocs = await Promise.all(pdfUploadPromises);
const pdfDocuments = uploadedDocs.filter(doc =>
(doc.original_filename && doc.original_filename.toLowerCase().endsWith('.pdf')) ||
(doc.pdf_path && !doc.html_path)
);
// 업로드된 HTML 문서 정리
this.uploadedDocuments = uploadedHtmlDocs.map((doc, index) => ({
// 업로드된 HTML 문서들만 정리 (순서 조정용)
this.uploadedDocuments = htmlDocuments.map((doc, index) => ({
...doc,
display_order: index + 1,
matched_pdf_id: null,
file_type: 'html'
matched_pdf_id: null
}));
// PDF 파일 목록 (매칭용)
this.pdfFiles = pdfDocs;
// PDF 파일들을 매칭용으로 저장
this.pdfFiles = pdfDocuments;
console.log('🎉 모든 파일 업로드 완료!');
console.log('📄 HTML 문서:', this.uploadedDocuments.filter(doc => doc.file_type === 'html').length, '개');
console.log('📄 HTML 문서:', this.uploadedDocuments.length, '개');
console.log('📕 PDF 문서:', this.pdfFiles.length, '개');
// 3단계로 이동

63
frontend/static/js/viewer.js
View File

@@ -1095,7 +1095,7 @@ window.documentViewer = () => ({
const response = await fetch(downloadUrl, {
method: 'GET',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
}
});
@@ -1124,5 +1124,66 @@ window.documentViewer = () => ({
console.error('❌ PDF 다운로드 실패:', error);
alert('PDF 다운로드에 실패했습니다: ' + error.message);
}
},
// 원본 파일 다운로드 (연결된 PDF 파일)
async downloadOriginalFile() {
if (!this.document || !this.document.id) {
console.warn('문서 정보가 없습니다');
return;
}
// 연결된 PDF가 있는지 확인
if (!this.document.matched_pdf_id) {
alert('연결된 원본 PDF 파일이 없습니다.\n\n서적 편집 페이지에서 PDF 파일을 연결해주세요.');
return;
}
try {
console.log('📕 연결된 PDF 다운로드 시작:', this.document.matched_pdf_id);
// 연결된 PDF 문서 정보 가져오기
const pdfDocument = await window.api.getDocument(this.document.matched_pdf_id);
if (!pdfDocument) {
throw new Error('연결된 PDF 문서를 찾을 수 없습니다');
}
// PDF 파일 다운로드 URL 생성
const downloadUrl = `/api/documents/${this.document.matched_pdf_id}/download`;
// 인증 헤더 추가를 위해 fetch 사용
const response = await fetch(downloadUrl, {
method: 'GET',
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
}
});
if (!response.ok) {
throw new Error('연결된 PDF 다운로드에 실패했습니다');
}
// Blob으로 변환하여 다운로드
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
// 다운로드 링크 생성 및 클릭
const link = document.createElement('a');
link.href = url;
link.download = pdfDocument.original_filename || `${pdfDocument.title}.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// URL 정리
window.URL.revokeObjectURL(url);
console.log('✅ 연결된 PDF 다운로드 완료');
} catch (error) {
console.error('❌ 연결된 PDF 다운로드 실패:', error);
alert('연결된 PDF 다운로드에 실패했습니다: ' + error.message);
}
}
});

2
frontend/upload.html
View File

@@ -335,6 +335,6 @@
<script src="/static/js/api.js?v=2025012380"></script>
<script src="/static/js/auth.js?v=2025012351"></script>
<script src="/static/js/header-loader.js?v=2025012351"></script>
<script src="/static/js/upload.js?v=2025012384"></script>
<script src="/static/js/upload.js?v=2025012390"></script>
</body>
</html>

10
frontend/viewer.html
View File

@@ -102,12 +102,12 @@
<!-- 오른쪽: 한영 전환 -->
<div class="flex items-center">
<!-- PDF 다운로드 버튼 (매칭된 PDF가 있는 경우) -->
<button x-show="document.matched_pdf_id"
@click="downloadMatchedPDF()"
<!-- 원본 PDF 다운로드 (항상 표시) -->
<button @click="downloadOriginalFile()"
class="bg-red-600 text-white px-4 py-2 rounded-xl hover:bg-red-700 transition-all duration-200 flex items-center space-x-2 shadow-sm"
title="매칭된 PDF 다운로드">
title="연결된 원본 PDF 다운로드">
<i class="fas fa-file-pdf text-sm"></i>
<span class="font-medium text-sm">PDF 원본</span>
<span class="font-medium text-sm">원본 다운로드</span>
</button>
<button @click="toggleLanguage()"
@@ -391,7 +391,7 @@
<!-- 스크립트 -->
<script src="/static/js/api.js?v=2025012380"></script>
<script src="/static/js/viewer.js?v=2025012225"></script>
<script src="/static/js/viewer.js?v=2025012387"></script>
<style>
[x-cloak] { display: none !important; }