4038040faa
- Removed hierarchy view and integrated functionality into index.html - Added book-based document grouping with dedicated book-documents.html page - Implemented comprehensive multi-file upload system with drag-and-drop reordering - Added HTML-PDF matching functionality with download capability - Enhanced upload workflow with 3-step process (File Selection, Book Settings, Order & Match) - Added book conflict resolution (existing book vs new edition) - Improved document order adjustment with one-click sort options - Added modular header component system - Updated API connectivity for Docker environment - Enhanced viewer.html with PDF download functionality - Fixed browser caching issues with version management - Improved mobile responsiveness and modern UI design
590 lines
22 KiB
JavaScript
590 lines
22 KiB
JavaScript
// 업로드 애플리케이션 컴포넌트
|
|
window.uploadApp = () => ({
|
|
// 상태 관리
|
|
currentStep: 1,
|
|
selectedFiles: [],
|
|
uploadedDocuments: [],
|
|
pdfFiles: [],
|
|
|
|
// 업로드 상태
|
|
uploading: false,
|
|
finalizing: false,
|
|
|
|
// 인증 상태
|
|
isAuthenticated: false,
|
|
currentUser: null,
|
|
|
|
// 서적 관련
|
|
bookSelectionMode: 'none',
|
|
bookSearchQuery: '',
|
|
searchedBooks: [],
|
|
selectedBook: null,
|
|
newBook: {
|
|
title: '',
|
|
author: '',
|
|
description: ''
|
|
},
|
|
|
|
// Sortable 인스턴스
|
|
sortableInstance: null,
|
|
|
|
// 초기화
|
|
async init() {
|
|
console.log('🚀 Upload App 초기화 시작');
|
|
|
|
// 인증 상태 확인
|
|
await this.checkAuthStatus();
|
|
|
|
if (this.isAuthenticated) {
|
|
// 헤더 로드
|
|
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);
|
|
}
|
|
},
|
|
|
|
// 드래그 오버 처리
|
|
handleDragOver(event) {
|
|
event.dataTransfer.dropEffect = 'copy';
|
|
event.target.closest('.drag-area').classList.add('drag-over');
|
|
},
|
|
|
|
// 드래그 리브 처리
|
|
handleDragLeave(event) {
|
|
event.target.closest('.drag-area').classList.remove('drag-over');
|
|
},
|
|
|
|
// 드롭 처리
|
|
handleDrop(event) {
|
|
event.target.closest('.drag-area').classList.remove('drag-over');
|
|
const files = Array.from(event.dataTransfer.files);
|
|
this.processFiles(files);
|
|
},
|
|
|
|
// 파일 선택 처리
|
|
handleFileSelect(event) {
|
|
const files = Array.from(event.target.files);
|
|
this.processFiles(files);
|
|
},
|
|
|
|
// 파일 처리
|
|
processFiles(files) {
|
|
const validFiles = files.filter(file => {
|
|
const isValid = file.type === 'text/html' ||
|
|
file.type === 'application/pdf' ||
|
|
file.name.toLowerCase().endsWith('.html') ||
|
|
file.name.toLowerCase().endsWith('.htm') ||
|
|
file.name.toLowerCase().endsWith('.pdf');
|
|
|
|
if (!isValid) {
|
|
console.warn('지원하지 않는 파일 형식:', file.name);
|
|
}
|
|
return isValid;
|
|
});
|
|
|
|
// 기존 파일과 중복 체크
|
|
validFiles.forEach(file => {
|
|
const isDuplicate = this.selectedFiles.some(existing =>
|
|
existing.name === file.name && existing.size === file.size
|
|
);
|
|
|
|
if (!isDuplicate) {
|
|
this.selectedFiles.push(file);
|
|
}
|
|
});
|
|
|
|
console.log('📁 선택된 파일:', this.selectedFiles.length, '개');
|
|
},
|
|
|
|
// 파일 제거
|
|
removeFile(index) {
|
|
this.selectedFiles.splice(index, 1);
|
|
},
|
|
|
|
// 파일 크기 포맷팅
|
|
formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
},
|
|
|
|
// 다음 단계
|
|
nextStep() {
|
|
if (this.selectedFiles.length === 0) {
|
|
alert('업로드할 파일을 선택해주세요.');
|
|
return;
|
|
}
|
|
this.currentStep = 2;
|
|
},
|
|
|
|
// 이전 단계
|
|
prevStep() {
|
|
this.currentStep = Math.max(1, this.currentStep - 1);
|
|
},
|
|
|
|
// 서적 검색
|
|
async searchBooks() {
|
|
if (!this.bookSearchQuery.trim()) {
|
|
this.searchedBooks = [];
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const books = await window.api.searchBooks(this.bookSearchQuery, 10);
|
|
this.searchedBooks = books;
|
|
} catch (error) {
|
|
console.error('서적 검색 실패:', error);
|
|
this.searchedBooks = [];
|
|
}
|
|
},
|
|
|
|
// 서적 선택
|
|
selectBook(book) {
|
|
this.selectedBook = book;
|
|
this.bookSearchQuery = book.title;
|
|
this.searchedBooks = [];
|
|
},
|
|
|
|
// 파일 업로드
|
|
async uploadFiles() {
|
|
if (this.selectedFiles.length === 0) {
|
|
alert('업로드할 파일이 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 서적 설정 검증
|
|
if (this.bookSelectionMode === 'new' && !this.newBook.title.trim()) {
|
|
alert('새 서적을 생성하려면 제목을 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
if (this.bookSelectionMode === 'existing' && !this.selectedBook) {
|
|
alert('기존 서적을 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
this.uploading = true;
|
|
|
|
try {
|
|
let bookId = null;
|
|
|
|
// 서적 처리
|
|
if (this.bookSelectionMode === 'new' && this.newBook.title.trim()) {
|
|
try {
|
|
const newBook = await window.api.createBook({
|
|
title: this.newBook.title,
|
|
author: this.newBook.author,
|
|
description: this.newBook.description
|
|
});
|
|
bookId = newBook.id;
|
|
console.log('📚 새 서적 생성됨:', newBook.title);
|
|
} catch (error) {
|
|
if (error.message.includes('already exists')) {
|
|
// 동일한 서적이 이미 존재하는 경우 - 선택 모달 표시
|
|
const choice = await this.showBookConflictModal();
|
|
|
|
if (choice === 'existing') {
|
|
// 기존 서적 검색해서 사용
|
|
const existingBooks = await window.api.searchBooks(this.newBook.title, 10);
|
|
const matchingBook = existingBooks.find(book =>
|
|
book.title === this.newBook.title &&
|
|
book.author === this.newBook.author
|
|
);
|
|
|
|
if (matchingBook) {
|
|
bookId = matchingBook.id;
|
|
console.log('📚 기존 서적 사용:', matchingBook.title);
|
|
} else {
|
|
throw new Error('기존 서적을 찾을 수 없습니다.');
|
|
}
|
|
} else if (choice === 'edition') {
|
|
// 에디션 정보 입력받아서 새 서적 생성
|
|
const edition = await this.getEditionInfo();
|
|
if (edition) {
|
|
const newBookWithEdition = await window.api.createBook({
|
|
title: `${this.newBook.title} (${edition})`,
|
|
author: this.newBook.author,
|
|
description: this.newBook.description
|
|
});
|
|
bookId = newBookWithEdition.id;
|
|
console.log('📚 에디션 서적 생성됨:', newBookWithEdition.title);
|
|
} else {
|
|
throw new Error('에디션 정보가 입력되지 않았습니다.');
|
|
}
|
|
} else {
|
|
throw new Error('사용자가 업로드를 취소했습니다.');
|
|
}
|
|
} else {
|
|
throw error;
|
|
}
|
|
}
|
|
} else if (this.bookSelectionMode === 'existing' && this.selectedBook) {
|
|
bookId = this.selectedBook.id;
|
|
}
|
|
|
|
// HTML과 PDF 파일 분리
|
|
const htmlFiles = this.selectedFiles.filter(file =>
|
|
file.type === 'text/html' ||
|
|
file.name.toLowerCase().endsWith('.html') ||
|
|
file.name.toLowerCase().endsWith('.htm')
|
|
);
|
|
|
|
const pdfFiles = this.selectedFiles.filter(file =>
|
|
file.type === 'application/pdf' ||
|
|
file.name.toLowerCase().endsWith('.pdf')
|
|
);
|
|
|
|
console.log('📄 HTML 파일:', htmlFiles.length, '개');
|
|
console.log('📕 PDF 파일:', pdfFiles.length, '개');
|
|
|
|
// HTML 파일 업로드 (백엔드 API에 맞게)
|
|
const uploadPromises = htmlFiles.map(async (file, index) => {
|
|
const formData = new FormData();
|
|
formData.append('html_file', file); // 백엔드가 요구하는 필드명
|
|
formData.append('title', file.name.replace(/\.[^/.]+$/, "")); // 확장자 제거
|
|
formData.append('description', `업로드된 파일: ${file.name}`);
|
|
formData.append('language', 'ko');
|
|
formData.append('is_public', 'false');
|
|
|
|
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;
|
|
}
|
|
});
|
|
|
|
// 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 // 실제 파일 객체 보관
|
|
};
|
|
});
|
|
|
|
// HTML 파일 업로드 완료 대기
|
|
const uploadedHtmlDocs = await Promise.all(uploadPromises);
|
|
|
|
// PDF 파일 처리 (실제 업로드는 하지 않고 매칭용으로만 보관)
|
|
const pdfDocs = await Promise.all(pdfUploadPromises);
|
|
|
|
// 업로드된 HTML 문서 정리
|
|
this.uploadedDocuments = uploadedHtmlDocs.map((doc, index) => ({
|
|
...doc,
|
|
display_order: index + 1,
|
|
matched_pdf_id: null,
|
|
file_type: 'html'
|
|
}));
|
|
|
|
// PDF 파일 목록 (매칭용)
|
|
this.pdfFiles = pdfDocs;
|
|
|
|
console.log('🎉 모든 파일 업로드 완료!');
|
|
console.log('📄 HTML 문서:', this.uploadedDocuments.filter(doc => doc.file_type === 'html').length, '개');
|
|
console.log('📕 PDF 문서:', this.pdfFiles.length, '개');
|
|
|
|
// 3단계로 이동
|
|
this.currentStep = 3;
|
|
|
|
// 다음 틱에서 Sortable 초기화
|
|
this.$nextTick(() => {
|
|
this.initSortable();
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('업로드 실패:', error);
|
|
alert('업로드 중 오류가 발생했습니다: ' + error.message);
|
|
} finally {
|
|
this.uploading = false;
|
|
}
|
|
},
|
|
|
|
// Sortable 초기화
|
|
initSortable() {
|
|
const sortableList = document.getElementById('sortable-list');
|
|
if (sortableList && !this.sortableInstance) {
|
|
this.sortableInstance = Sortable.create(sortableList, {
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
chosenClass: 'sortable-chosen',
|
|
handle: '.cursor-move',
|
|
onEnd: (evt) => {
|
|
// 배열 순서 업데이트
|
|
const item = this.uploadedDocuments.splice(evt.oldIndex, 1)[0];
|
|
this.uploadedDocuments.splice(evt.newIndex, 0, item);
|
|
|
|
// display_order 업데이트
|
|
this.updateDisplayOrder();
|
|
|
|
console.log('📋 드래그로 순서 변경됨');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
// display_order 업데이트
|
|
updateDisplayOrder() {
|
|
this.uploadedDocuments.forEach((doc, index) => {
|
|
doc.display_order = index + 1;
|
|
});
|
|
},
|
|
|
|
// 위로 이동
|
|
moveUp(index) {
|
|
if (index > 0) {
|
|
const item = this.uploadedDocuments.splice(index, 1)[0];
|
|
this.uploadedDocuments.splice(index - 1, 0, item);
|
|
this.updateDisplayOrder();
|
|
console.log('📋 위로 이동:', item.title);
|
|
}
|
|
},
|
|
|
|
// 아래로 이동
|
|
moveDown(index) {
|
|
if (index < this.uploadedDocuments.length - 1) {
|
|
const item = this.uploadedDocuments.splice(index, 1)[0];
|
|
this.uploadedDocuments.splice(index + 1, 0, item);
|
|
this.updateDisplayOrder();
|
|
console.log('📋 아래로 이동:', item.title);
|
|
}
|
|
},
|
|
|
|
// 이름순 정렬
|
|
autoSortByName() {
|
|
this.uploadedDocuments.sort((a, b) => {
|
|
return a.title.localeCompare(b.title, 'ko', { numeric: true });
|
|
});
|
|
this.updateDisplayOrder();
|
|
console.log('📋 이름순 정렬 완료');
|
|
},
|
|
|
|
// 순서 뒤집기
|
|
reverseOrder() {
|
|
this.uploadedDocuments.reverse();
|
|
this.updateDisplayOrder();
|
|
console.log('📋 순서 뒤집기 완료');
|
|
},
|
|
|
|
// 섞기
|
|
shuffleDocuments() {
|
|
for (let i = this.uploadedDocuments.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[this.uploadedDocuments[i], this.uploadedDocuments[j]] = [this.uploadedDocuments[j], this.uploadedDocuments[i]];
|
|
}
|
|
this.updateDisplayOrder();
|
|
console.log('📋 문서 섞기 완료');
|
|
},
|
|
|
|
// 최종 완료 처리
|
|
async finalizeUpload() {
|
|
this.finalizing = true;
|
|
|
|
try {
|
|
// 문서 순서 및 PDF 매칭 정보 업데이트
|
|
const updatePromises = this.uploadedDocuments.map(async (doc) => {
|
|
const updateData = {
|
|
display_order: doc.display_order
|
|
};
|
|
|
|
// PDF 매칭 정보 추가 (필요시 백엔드 API 확장)
|
|
if (doc.matched_pdf_id) {
|
|
updateData.matched_pdf_id = doc.matched_pdf_id;
|
|
}
|
|
|
|
return await window.api.updateDocument(doc.id, updateData);
|
|
});
|
|
|
|
await Promise.all(updatePromises);
|
|
|
|
console.log('🎉 업로드 완료 처리됨!');
|
|
alert('업로드가 완료되었습니다!');
|
|
|
|
// 메인 페이지로 이동
|
|
window.location.href = 'index.html';
|
|
|
|
} catch (error) {
|
|
console.error('완료 처리 실패:', error);
|
|
alert('완료 처리 중 오류가 발생했습니다: ' + error.message);
|
|
} finally {
|
|
this.finalizing = false;
|
|
}
|
|
},
|
|
|
|
// 업로드 재시작
|
|
resetUpload() {
|
|
if (confirm('업로드를 다시 시작하시겠습니까? 현재 진행 상황이 초기화됩니다.')) {
|
|
this.currentStep = 1;
|
|
this.selectedFiles = [];
|
|
this.uploadedDocuments = [];
|
|
this.pdfFiles = [];
|
|
this.bookSelectionMode = 'none';
|
|
this.selectedBook = null;
|
|
this.newBook = { title: '', author: '', description: '' };
|
|
|
|
if (this.sortableInstance) {
|
|
this.sortableInstance.destroy();
|
|
this.sortableInstance = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
// 뒤로가기
|
|
goBack() {
|
|
if (this.currentStep > 1) {
|
|
if (confirm('진행 중인 업로드를 취소하고 돌아가시겠습니까?')) {
|
|
window.location.href = 'index.html';
|
|
}
|
|
} else {
|
|
window.location.href = 'index.html';
|
|
}
|
|
},
|
|
|
|
// 서적 중복 시 선택 모달
|
|
showBookConflictModal() {
|
|
return new Promise((resolve) => {
|
|
const modal = document.createElement('div');
|
|
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
|
modal.innerHTML = `
|
|
<div class="bg-white rounded-lg p-6 max-w-md mx-4">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">📚 서적 중복 발견</h3>
|
|
<p class="text-gray-600 mb-6">
|
|
"<strong>${this.newBook.title}</strong>"${this.newBook.author ? ` (${this.newBook.author})` : ''} 서적이 이미 존재합니다.
|
|
<br><br>어떻게 처리하시겠습니까?
|
|
</p>
|
|
<div class="space-y-3">
|
|
<button id="use-existing" class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-left">
|
|
<div class="font-medium">🔄 기존 서적에 추가</div>
|
|
<div class="text-sm text-blue-100">기존 서적에 새 문서들을 추가합니다</div>
|
|
</button>
|
|
<button id="add-edition" class="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-left">
|
|
<div class="font-medium">📖 에디션으로 구분</div>
|
|
<div class="text-sm text-green-100">에디션 정보를 입력해서 별도 서적으로 생성합니다</div>
|
|
</button>
|
|
<button id="cancel-upload" class="w-full px-4 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-center">
|
|
❌ 업로드 취소
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
// 이벤트 리스너
|
|
modal.querySelector('#use-existing').onclick = () => {
|
|
document.body.removeChild(modal);
|
|
resolve('existing');
|
|
};
|
|
|
|
modal.querySelector('#add-edition').onclick = () => {
|
|
document.body.removeChild(modal);
|
|
resolve('edition');
|
|
};
|
|
|
|
modal.querySelector('#cancel-upload').onclick = () => {
|
|
document.body.removeChild(modal);
|
|
resolve('cancel');
|
|
};
|
|
});
|
|
},
|
|
|
|
// 에디션 정보 입력
|
|
getEditionInfo() {
|
|
return new Promise((resolve) => {
|
|
const modal = document.createElement('div');
|
|
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
|
modal.innerHTML = `
|
|
<div class="bg-white rounded-lg p-6 max-w-md mx-4">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">📖 에디션 정보 입력</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
서적을 구분할 에디션 정보를 입력해주세요.
|
|
</p>
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">에디션 정보</label>
|
|
<input type="text" id="edition-input"
|
|
placeholder="예: 2nd Edition, 2024년판, Ver 2.0"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
💡 예시: "2nd Edition", "2024년판", "개정판", "Ver 2.0"
|
|
</p>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button id="confirm-edition" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
|
확인
|
|
</button>
|
|
<button id="cancel-edition" class="flex-1 px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
|
|
취소
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
const input = modal.querySelector('#edition-input');
|
|
input.focus();
|
|
|
|
// 이벤트 리스너
|
|
const confirm = () => {
|
|
const edition = input.value.trim();
|
|
document.body.removeChild(modal);
|
|
resolve(edition || null);
|
|
};
|
|
|
|
const cancel = () => {
|
|
document.body.removeChild(modal);
|
|
resolve(null);
|
|
};
|
|
|
|
modal.querySelector('#confirm-edition').onclick = confirm;
|
|
modal.querySelector('#cancel-edition').onclick = cancel;
|
|
|
|
// Enter 키 처리
|
|
input.onkeypress = (e) => {
|
|
if (e.key === 'Enter') {
|
|
confirm();
|
|
}
|
|
};
|
|
});
|
|
}
|
|
});
|
|
|
|
// 페이지 로드 시 초기화
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('📄 Upload 페이지 로드됨');
|
|
});
|