feat: 계층구조 뷰 및 완전한 하이라이트/메모 시스템 구현
주요 기능: - 📚 Book 및 BookCategory 모델 추가 (서적 그룹화) - 🏗️ 계층구조 뷰 (Book > Category > Document) 구현 - 🎨 완전한 하이라이트 시스템 (생성, 표시, 삭제) - 📝 통합 메모 관리 (추가, 수정, 삭제) - 🔄 그리드 뷰와 계층구조 뷰 간 완전 동기화 - 🛡️ 관리자 전용 문서 삭제 기능 - 🔧 모든 CORS 및 500 오류 해결 기술적 개선: - API 베이스 URL을 Nginx 프록시로 변경 (/api) - 외래키 제약 조건 해결 (삭제 순서 최적화) - SQLAlchemy 관계 로딩 최적화 (selectinload) - 프론트엔드 캐시 무효화 시스템 - Alpine.js 컴포넌트 구조 개선 UI/UX: - 계층구조 네비게이션 (사이드바 + 트리 구조) - 하이라이트 모드 토글 스위치 - 완전한 툴팁 기반 메모 관리 인터페이스 - 반응형 하이라이트 메뉴 (색상 선택) - 스마트 툴팁 위치 조정 (화면 경계 고려)
This commit is contained in:
Hyungi Ahn
677
frontend/hierarchy.html
Normal file
677
frontend/hierarchy.html
Normal file
@@ -0,0 +1,677 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>문서 관리 시스템 - 계층구조</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* 드래그 앤 드롭 스타일 */
|
||||
.draggable {
|
||||
cursor: move;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.draggable:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.drag-over {
|
||||
border: 2px dashed #3b82f6;
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
.tree-item {
|
||||
position: relative;
|
||||
}
|
||||
.tree-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.tree-item:last-child::before {
|
||||
height: 20px;
|
||||
}
|
||||
.tree-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 20px;
|
||||
width: 12px;
|
||||
height: 1px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.sidebar-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e1 #f1f5f9;
|
||||
}
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.sidebar-scroll::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 하이라이트 스타일 */
|
||||
.highlight {
|
||||
border-radius: 2px;
|
||||
padding: 1px 2px;
|
||||
margin: 0 1px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.highlight:hover {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* 텍스트 선택 시 하이라이트 메뉴 */
|
||||
.highlight-menu {
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
|
||||
border: 3px solid #3b82f6 !important;
|
||||
background: white !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 문서 콘텐츠 영역 */
|
||||
.prose {
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50" x-data="hierarchyApp()" x-init="init()">
|
||||
<!-- 헤더 -->
|
||||
<header class="bg-white shadow-sm border-b">
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900">📚 문서 관리 시스템</h1>
|
||||
<div class="flex space-x-2">
|
||||
<a href="index.html" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">그리드 뷰</a>
|
||||
<span class="px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">계층구조 뷰</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 검색 -->
|
||||
<div class="relative" x-show="currentUser">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<input
|
||||
type="text"
|
||||
x-model="searchQuery"
|
||||
@input="searchDocuments"
|
||||
placeholder="문서, 메모 검색..."
|
||||
class="w-80 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 사용자 메뉴 -->
|
||||
<div x-show="currentUser" class="flex items-center space-x-3">
|
||||
<span class="text-sm text-gray-600" x-text="currentUser?.full_name || currentUser?.email"></span>
|
||||
<button @click="logout()" class="text-sm text-red-600 hover:text-red-800">로그아웃</button>
|
||||
</div>
|
||||
|
||||
<!-- 로그인 버튼 -->
|
||||
<button x-show="!currentUser" @click="openLoginModal()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
로그인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 메인 컨테이너 -->
|
||||
<div class="flex h-screen pt-16">
|
||||
<!-- 사이드바 -->
|
||||
<aside class="w-80 bg-white shadow-lg border-r flex flex-col">
|
||||
<!-- 사이드바 헤더 -->
|
||||
<div class="p-4 border-b bg-gray-50">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-semibold text-gray-900">📖 문서 구조</h2>
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
@click="showUploadModal = true"
|
||||
x-show="currentUser"
|
||||
class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"
|
||||
title="문서 업로드"
|
||||
>
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="refreshHierarchy()"
|
||||
class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg"
|
||||
title="새로고침"
|
||||
>
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 트리 구조 -->
|
||||
<div class="flex-1 overflow-y-auto sidebar-scroll p-4">
|
||||
<div x-show="loading" class="text-center py-8">
|
||||
<i class="fas fa-spinner fa-spin text-gray-400"></i>
|
||||
<p class="text-gray-500 mt-2">로딩 중...</p>
|
||||
</div>
|
||||
|
||||
<div x-show="!loading">
|
||||
<!-- 서적들 -->
|
||||
<template x-for="(book, bookId) in hierarchy.books" :key="bookId">
|
||||
<div class="mb-4">
|
||||
<!-- 서적 헤더 -->
|
||||
<div
|
||||
class="flex items-center p-3 bg-blue-50 border border-blue-200 rounded-lg cursor-pointer hover:bg-blue-100"
|
||||
@click="toggleBook(bookId)"
|
||||
>
|
||||
<i class="fas fa-book text-blue-600 mr-3"></i>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-medium text-blue-900" x-text="book.title"></h3>
|
||||
<p class="text-sm text-blue-700" x-text="book.author || '저자 미상'"></p>
|
||||
</div>
|
||||
<i
|
||||
class="fas fa-chevron-down transition-transform duration-200"
|
||||
:class="expandedBooks.includes(bookId) ? 'rotate-180' : ''"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<!-- 서적 내용 -->
|
||||
<div x-show="expandedBooks.includes(bookId)" class="mt-2 ml-4 space-y-2">
|
||||
<!-- 소분류들 -->
|
||||
<template x-for="(category, categoryId) in book.categories" :key="categoryId">
|
||||
<div class="tree-item">
|
||||
<!-- 소분류 헤더 -->
|
||||
<div
|
||||
class="flex items-center p-2 bg-green-50 border border-green-200 rounded cursor-pointer hover:bg-green-100"
|
||||
@click="toggleCategory(categoryId)"
|
||||
>
|
||||
<i class="fas fa-folder text-green-600 mr-2"></i>
|
||||
<span class="flex-1 font-medium text-green-900" x-text="category.name"></span>
|
||||
<span class="text-xs text-green-700" x-text="`${category.documents.length}개`"></span>
|
||||
<i
|
||||
class="fas fa-chevron-down ml-2 transition-transform duration-200"
|
||||
:class="expandedCategories.includes(categoryId) ? 'rotate-180' : ''"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<!-- 소분류 문서들 -->
|
||||
<div x-show="expandedCategories.includes(categoryId)" class="mt-1 ml-4 space-y-1">
|
||||
<template x-for="doc in category.documents" :key="doc.id">
|
||||
<div
|
||||
class="flex items-center p-2 bg-white border rounded cursor-pointer hover:bg-gray-50 draggable"
|
||||
@click="openDocument(doc.id)"
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart($event, doc)"
|
||||
@dragover.prevent
|
||||
@drop="handleDrop($event, categoryId)"
|
||||
>
|
||||
<i class="fas fa-file-alt text-gray-500 mr-2"></i>
|
||||
<span class="flex-1 text-sm" x-text="doc.title"></span>
|
||||
<div class="flex space-x-1">
|
||||
<button
|
||||
@click.stop="editDocument(doc)"
|
||||
class="p-1 text-gray-400 hover:text-blue-600"
|
||||
title="편집"
|
||||
>
|
||||
<i class="fas fa-edit text-xs"></i>
|
||||
</button>
|
||||
<button
|
||||
x-show="currentUser && currentUser.is_admin"
|
||||
@click.stop="deleteDocument(doc.id)"
|
||||
class="p-1 text-gray-400 hover:text-red-600"
|
||||
title="삭제"
|
||||
>
|
||||
<i class="fas fa-trash text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 서적 내 미분류 문서들 -->
|
||||
<div x-show="book.uncategorized_documents.length > 0" class="tree-item">
|
||||
<div
|
||||
class="flex items-center p-2 bg-yellow-50 border border-yellow-200 rounded cursor-pointer hover:bg-yellow-100"
|
||||
@click="toggleUncategorizedInBook(bookId)"
|
||||
>
|
||||
<i class="fas fa-folder-open text-yellow-600 mr-2"></i>
|
||||
<span class="flex-1 font-medium text-yellow-900">미분류</span>
|
||||
<span class="text-xs text-yellow-700" x-text="`${book.uncategorized_documents.length}개`"></span>
|
||||
<i
|
||||
class="fas fa-chevron-down ml-2 transition-transform duration-200"
|
||||
:class="expandedUncategorizedInBooks.includes(bookId) ? 'rotate-180' : ''"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<div x-show="expandedUncategorizedInBooks.includes(bookId)" class="mt-1 ml-4 space-y-1">
|
||||
<template x-for="doc in book.uncategorized_documents" :key="doc.id">
|
||||
<div
|
||||
class="flex items-center p-2 bg-white border rounded cursor-pointer hover:bg-gray-50 draggable"
|
||||
@click="openDocument(doc.id)"
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart($event, doc)"
|
||||
>
|
||||
<i class="fas fa-file-alt text-gray-500 mr-2"></i>
|
||||
<span class="flex-1 text-sm" x-text="doc.title"></span>
|
||||
<div class="flex space-x-1">
|
||||
<button
|
||||
@click.stop="editDocument(doc)"
|
||||
class="p-1 text-gray-400 hover:text-blue-600"
|
||||
title="편집"
|
||||
>
|
||||
<i class="fas fa-edit text-xs"></i>
|
||||
</button>
|
||||
<button
|
||||
x-show="currentUser && currentUser.is_admin"
|
||||
@click.stop="deleteDocument(doc.id)"
|
||||
class="p-1 text-gray-400 hover:text-red-600"
|
||||
title="삭제"
|
||||
>
|
||||
<i class="fas fa-trash text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 전체 미분류 문서들 -->
|
||||
<div x-show="hierarchy.uncategorized.length > 0" class="mb-4">
|
||||
<div
|
||||
class="flex items-center p-3 bg-gray-100 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-200"
|
||||
@click="toggleUncategorized()"
|
||||
>
|
||||
<i class="fas fa-folder-open text-gray-600 mr-3"></i>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-medium text-gray-900">📄 미분류 문서</h3>
|
||||
<p class="text-sm text-gray-600" x-text="`${hierarchy.uncategorized.length}개 문서`"></p>
|
||||
</div>
|
||||
<i
|
||||
class="fas fa-chevron-down transition-transform duration-200"
|
||||
:class="showUncategorized ? 'rotate-180' : ''"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<div x-show="showUncategorized" class="mt-2 ml-4 space-y-1">
|
||||
<template x-for="doc in hierarchy.uncategorized" :key="doc.id">
|
||||
<div
|
||||
class="flex items-center p-2 bg-white border rounded cursor-pointer hover:bg-gray-50 draggable"
|
||||
@click="openDocument(doc.id)"
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart($event, doc)"
|
||||
>
|
||||
<i class="fas fa-file-alt text-gray-500 mr-2"></i>
|
||||
<span class="flex-1 text-sm" x-text="doc.title"></span>
|
||||
<div class="flex space-x-1">
|
||||
<button
|
||||
@click.stop="editDocument(doc)"
|
||||
class="p-1 text-gray-400 hover:text-blue-600"
|
||||
title="편집"
|
||||
>
|
||||
<i class="fas fa-edit text-xs"></i>
|
||||
</button>
|
||||
<button
|
||||
x-show="currentUser && currentUser.is_admin"
|
||||
@click.stop="deleteDocument(doc.id)"
|
||||
class="p-1 text-gray-400 hover:text-red-600"
|
||||
title="삭제"
|
||||
>
|
||||
<i class="fas fa-trash text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 빈 상태 -->
|
||||
<div x-show="Object.keys(hierarchy.books).length === 0 && hierarchy.uncategorized.length === 0" class="text-center py-8">
|
||||
<i class="fas fa-folder-open text-gray-300 text-4xl mb-4"></i>
|
||||
<p class="text-gray-500">아직 문서가 없습니다.</p>
|
||||
<button
|
||||
x-show="currentUser"
|
||||
@click="showUploadModal = true"
|
||||
class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
첫 문서 업로드하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 메인 콘텐츠 영역 -->
|
||||
<main class="flex-1 flex flex-col">
|
||||
<!-- 콘텐츠 헤더 -->
|
||||
<div class="bg-white border-b p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900" x-text="selectedDocument ? selectedDocument.title : '문서를 선택하세요'"></h2>
|
||||
<p class="text-sm text-gray-500" x-text="selectedDocument ? `${selectedDocument.book_title || '미분류'} ${selectedDocument.category_name ? '> ' + selectedDocument.category_name : ''}` : '사이드바에서 문서를 클릭하여 내용을 확인하세요'"></p>
|
||||
</div>
|
||||
|
||||
<div x-show="selectedDocument" class="flex space-x-2">
|
||||
<button
|
||||
@click="toggleHighlightMode()"
|
||||
class="px-3 py-2 rounded transition-colors"
|
||||
:class="highlightMode ? 'bg-yellow-500 text-white' : 'text-yellow-600 border border-yellow-600 hover:bg-yellow-50'"
|
||||
>
|
||||
<i class="fas fa-highlighter mr-1"></i>
|
||||
<span x-text="highlightMode ? '하이라이트 ON' : '하이라이트 OFF'"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="editDocument(selectedDocument)"
|
||||
class="px-3 py-2 text-blue-600 border border-blue-600 rounded hover:bg-blue-50"
|
||||
>
|
||||
<i class="fas fa-edit mr-1"></i> 편집
|
||||
</button>
|
||||
<button
|
||||
x-show="currentUser && currentUser.is_admin"
|
||||
@click="deleteDocument(selectedDocument.id)"
|
||||
class="px-3 py-2 text-red-600 border border-red-600 rounded hover:bg-red-50"
|
||||
>
|
||||
<i class="fas fa-trash mr-1"></i> 삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 문서 뷰어 -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<div x-show="!selectedDocument" class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-file-alt text-gray-300 text-6xl mb-4"></i>
|
||||
<h3 class="text-xl font-medium text-gray-600 mb-2">문서를 선택하세요</h3>
|
||||
<p class="text-gray-500">왼쪽 사이드바에서 문서를 클릭하면 내용이 표시됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="selectedDocument && documentContent" class="p-6">
|
||||
<div x-html="documentContent" class="prose max-w-none"></div>
|
||||
</div>
|
||||
|
||||
<div x-show="selectedDocument && !documentContent && loadingDocument" class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-spinner fa-spin text-gray-400 text-3xl mb-4"></i>
|
||||
<p class="text-gray-500">문서를 불러오는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 하이라이트 메뉴 (직접 DOM 조작) -->
|
||||
<div
|
||||
id="highlight-menu"
|
||||
class="fixed top-20 left-1/2 transform -translate-x-1/2 z-50 bg-white border border-gray-300 rounded-lg shadow-lg p-3"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="text-center mb-2">
|
||||
<h4 class="font-semibold text-sm">하이라이트 색상</h4>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button onclick="window.hierarchyInstance.createHighlight('yellow')" class="w-8 h-8 bg-yellow-300 rounded hover:bg-yellow-400" title="노랑"></button>
|
||||
<button onclick="window.hierarchyInstance.createHighlight('blue')" class="w-8 h-8 bg-blue-300 rounded hover:bg-blue-400" title="파랑"></button>
|
||||
<button onclick="window.hierarchyInstance.createHighlight('green')" class="w-8 h-8 bg-green-300 rounded hover:bg-green-400" title="초록"></button>
|
||||
<button onclick="window.hierarchyInstance.createHighlight('red')" class="w-8 h-8 bg-red-300 rounded hover:bg-red-400" title="빨강"></button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 로그인 모달 -->
|
||||
<div x-data="authModal()" x-show="showLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-lg p-6 w-96 max-w-md mx-4">
|
||||
<h2 class="text-xl font-bold mb-4">로그인</h2>
|
||||
<form @submit.prevent="login()">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
|
||||
<input
|
||||
type="email"
|
||||
x-model="loginForm.email"
|
||||
required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
|
||||
<input
|
||||
type="password"
|
||||
x-model="loginForm.password"
|
||||
required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
<div x-show="loginError" class="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
<span x-text="loginError"></span>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="showLoginModal = false"
|
||||
class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loggingIn"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!loggingIn">로그인</span>
|
||||
<span x-show="loggingIn">로그인 중...</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 업로드 모달 -->
|
||||
<div x-data="uploadModal()" x-show="showUploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<h2 class="text-xl font-bold mb-4">문서 업로드</h2>
|
||||
<form @submit.prevent="upload()">
|
||||
<!-- 파일 선택 -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">HTML 파일 *</label>
|
||||
<input
|
||||
type="file"
|
||||
accept=".html,.htm"
|
||||
@change="handleFileSelect($event, 'html_file')"
|
||||
required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">PDF 파일 (선택사항)</label>
|
||||
<input
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
@change="handleFileSelect($event, 'pdf_file')"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 서적 선택 -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">서적 분류</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center">
|
||||
<input type="radio" x-model="bookSelectionMode" value="existing" class="mr-2 text-blue-600" name="bookSelectionMode">
|
||||
기존 서적 선택
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input type="radio" x-model="bookSelectionMode" value="new" class="mr-2 text-blue-600" name="bookSelectionMode">
|
||||
새 서적 생성
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input type="radio" x-model="bookSelectionMode" value="none" class="mr-2 text-blue-600" name="bookSelectionMode">
|
||||
서적 없이 업로드
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기존 서적 선택 -->
|
||||
<div x-show="bookSelectionMode === 'existing'" class="mb-4 space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
x-model="bookSearchQuery"
|
||||
@input="searchBooks"
|
||||
placeholder="서적 제목으로 검색..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<div x-show="searchedBooks.length > 0" class="max-h-40 overflow-y-auto border border-gray-200 rounded-md">
|
||||
<template x-for="book in searchedBooks" :key="book.id">
|
||||
<div
|
||||
@click="selectBook(book)"
|
||||
class="p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
|
||||
>
|
||||
<div class="font-medium" x-text="book.title"></div>
|
||||
<div class="text-sm text-gray-600" x-text="book.author || '저자 미상'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div x-show="selectedBook" class="p-3 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<div class="font-medium text-blue-900" x-text="selectedBook?.title"></div>
|
||||
<div class="text-sm text-blue-700" x-text="selectedBook?.author || '저자 미상'"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 새 서적 생성 -->
|
||||
<div x-show="bookSelectionMode === 'new'" class="mb-4 space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
x-model="newBook.title"
|
||||
@input="getSuggestions"
|
||||
placeholder="서적 제목 *"
|
||||
:required="bookSelectionMode === 'new'"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
x-model="newBook.author"
|
||||
placeholder="저자"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<div x-show="suggestions.length > 0" class="p-3 bg-yellow-50 border border-yellow-200 rounded-md">
|
||||
<p class="text-sm text-yellow-800 mb-2">비슷한 서적이 있습니다:</p>
|
||||
<template x-for="suggestion in suggestions" :key="suggestion.id">
|
||||
<div
|
||||
@click="selectExistingFromSuggestion(suggestion)"
|
||||
class="p-2 hover:bg-yellow-100 cursor-pointer rounded text-sm"
|
||||
>
|
||||
<span class="font-medium" x-text="suggestion.title"></span>
|
||||
<span class="text-yellow-700" x-text="suggestion.author ? ` - ${suggestion.author}` : ''"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 문서 정보 -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">문서 제목 *</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="uploadForm.title"
|
||||
required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="문서 제목"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">문서 날짜</label>
|
||||
<input
|
||||
type="date"
|
||||
x-model="uploadForm.document_date"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">설명</label>
|
||||
<textarea
|
||||
x-model="uploadForm.description"
|
||||
rows="3"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="문서에 대한 간단한 설명"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">태그</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="uploadForm.tags"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="태그를 쉼표로 구분하여 입력 (예: 중요, 회의록, 2024)"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" x-model="uploadForm.is_public" class="mr-2">
|
||||
<span class="text-sm text-gray-700">공개 문서로 설정</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div x-show="uploadError" class="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
<span x-text="uploadError"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeUploadModal()"
|
||||
class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="uploading || !uploadForm.html_file || !uploadForm.title"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-show="!uploading">업로드</span>
|
||||
<span x-show="uploading">
|
||||
<i class="fas fa-spinner fa-spin mr-2"></i>
|
||||
업로드 중...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="static/js/api.js?v=2025012225"></script>
|
||||
<script src="static/js/auth.js?v=2025012225"></script>
|
||||
<script src="static/js/hierarchy.js?v=2025012225"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user