3e0a03f149
- Fix SyntaxError in viewer.js line 2868 (.bind(this) issue in setTimeout) - Resolve Alpine.js 'Can't find variable' errors (documentViewer, goBack, etc.) - Fix backlink rendering and persistence during temporary highlights - Add backlink protection and restoration mechanism in highlightAndScrollToText - Implement Note Management System with hierarchical notebooks - Add note highlights and memos functionality - Update cache version to force browser refresh (v=2025012641) - Add comprehensive logging for debugging backlink issues
331 lines
17 KiB
HTML
331 lines
17 KiB
HTML
<!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">
|
|
|
|
<style>
|
|
.notebook-card {
|
|
transition: all 0.3s ease;
|
|
border-left: 4px solid var(--notebook-color);
|
|
}
|
|
.notebook-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
|
}
|
|
.notebook-icon {
|
|
color: var(--notebook-color);
|
|
}
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen" x-data="notebooksApp()">
|
|
<!-- 헤더 -->
|
|
<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-6">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900 flex items-center">
|
|
<i class="fas fa-book text-blue-600 mr-3"></i>
|
|
노트북 관리
|
|
</h1>
|
|
<p class="text-gray-600 mt-2">노트들을 체계적으로 분류하고 관리하세요</p>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button onclick="window.location.href='/notes.html'"
|
|
class="flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors">
|
|
<i class="fas fa-sticky-note mr-2"></i>
|
|
<span>노트 관리</span>
|
|
</button>
|
|
|
|
<button @click="refreshNotebooks()"
|
|
:disabled="loading"
|
|
class="flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 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>
|
|
|
|
<button @click="showCreateModal = true"
|
|
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-plus mr-2"></i>
|
|
<span>새 노트북</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 통계 카드 -->
|
|
<div x-show="stats" class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-blue-100">
|
|
<i class="fas fa-book text-blue-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">전체 노트북</p>
|
|
<p class="text-2xl font-bold text-gray-900" x-text="stats?.total_notebooks || 0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-green-100">
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">활성 노트북</p>
|
|
<p class="text-2xl font-bold text-gray-900" x-text="stats?.active_notebooks || 0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-purple-100">
|
|
<i class="fas fa-sticky-note text-purple-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">전체 노트</p>
|
|
<p class="text-2xl font-bold text-gray-900" x-text="stats?.total_notes || 0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-orange-100">
|
|
<i class="fas fa-folder-open text-orange-600 text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-600">미분류 노트</p>
|
|
<p class="text-2xl font-bold text-gray-900" x-text="stats?.notes_without_notebook || 0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검색 및 필터 -->
|
|
<div class="bg-white rounded-lg shadow-sm border p-6 mb-6">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
|
|
<div class="flex-1 max-w-md">
|
|
<div class="relative">
|
|
<input type="text"
|
|
x-model="searchQuery"
|
|
@input="debounceSearch()"
|
|
placeholder="노트북 검색..."
|
|
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
x-model="activeOnly"
|
|
@change="loadNotebooks()"
|
|
class="mr-2 text-blue-600">
|
|
<span class="text-sm text-gray-700">활성 노트북만</span>
|
|
</label>
|
|
|
|
<select x-model="sortBy"
|
|
@change="loadNotebooks()"
|
|
class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<option value="updated_at">최근 수정순</option>
|
|
<option value="created_at">생성일순</option>
|
|
<option value="title">제목순</option>
|
|
<option value="sort_order">정렬순</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="loading" class="text-center py-12">
|
|
<i class="fas fa-spinner fa-spin text-4xl text-gray-400 mb-4"></i>
|
|
<p class="text-gray-600">노트북을 불러오는 중...</p>
|
|
</div>
|
|
|
|
<!-- 오류 메시지 -->
|
|
<div x-show="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-exclamation-triangle mr-2"></i>
|
|
<span x-text="error"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 노트북 그리드 -->
|
|
<div x-show="!loading && notebooks.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<template x-for="notebook in notebooks" :key="notebook.id">
|
|
<div class="notebook-card bg-white rounded-lg shadow-sm border p-6 cursor-pointer"
|
|
:style="`--notebook-color: ${notebook.color}`"
|
|
@click="openNotebook(notebook)">
|
|
|
|
<!-- 노트북 헤더 -->
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex items-center">
|
|
<i :class="`fas fa-${notebook.icon} notebook-icon text-2xl mr-3`"></i>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900" x-text="notebook.title"></h3>
|
|
<p class="text-sm text-gray-500" x-text="`${notebook.note_count}개 노트`"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<button @click.stop="editNotebook(notebook)"
|
|
class="p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 transition-colors">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button @click.stop="deleteNotebook(notebook)"
|
|
class="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50 transition-colors">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 노트북 설명 -->
|
|
<div x-show="notebook.description" class="mb-4">
|
|
<p class="text-gray-600 text-sm line-clamp-2" x-text="notebook.description"></p>
|
|
</div>
|
|
|
|
<!-- 노트북 메타데이터 -->
|
|
<div class="flex items-center justify-between text-xs text-gray-500">
|
|
<span x-text="formatDate(notebook.updated_at)"></span>
|
|
<div class="flex items-center space-x-2">
|
|
<span x-show="!notebook.is_active" class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full">
|
|
비활성
|
|
</span>
|
|
<span class="px-2 py-1 rounded-full text-white"
|
|
:style="`background-color: ${notebook.color}`"
|
|
x-text="notebook.created_by">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 빈 상태 -->
|
|
<div x-show="!loading && notebooks.length === 0" class="text-center py-16">
|
|
<i class="fas fa-book text-6xl text-gray-300 mb-4"></i>
|
|
<h3 class="text-xl font-semibold text-gray-600 mb-2">노트북이 없습니다</h3>
|
|
<p class="text-gray-500 mb-6">첫 번째 노트북을 만들어 노트들을 정리해보세요</p>
|
|
<button @click="showCreateModal = true"
|
|
class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
새 노트북 만들기
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 노트북 생성/편집 모달 -->
|
|
<div x-show="showCreateModal || showEditModal"
|
|
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 flex items-center justify-center z-50 p-4">
|
|
|
|
<div class="bg-white rounded-lg max-w-md w-full p-6"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform scale-95"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 transform scale-95">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900"
|
|
x-text="showEditModal ? '노트북 편집' : '새 노트북 만들기'"></h3>
|
|
<button @click="closeModal()" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form @submit.prevent="saveNotebook()">
|
|
<!-- 제목 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">제목 *</label>
|
|
<input type="text"
|
|
x-model="notebookForm.title"
|
|
placeholder="노트북 제목을 입력하세요..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
required>
|
|
</div>
|
|
|
|
<!-- 설명 -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">설명</label>
|
|
<textarea x-model="notebookForm.description"
|
|
rows="3"
|
|
placeholder="노트북에 대한 설명을 입력하세요..."
|
|
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 class="grid grid-cols-2 gap-4 mb-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">색상</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<template x-for="color in availableColors" :key="color">
|
|
<button type="button"
|
|
@click="notebookForm.color = color"
|
|
:class="notebookForm.color === color ? 'ring-2 ring-offset-2 ring-gray-400' : ''"
|
|
class="w-8 h-8 rounded-full border-2 border-white shadow-sm"
|
|
:style="`background-color: ${color}`">
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">아이콘</label>
|
|
<select x-model="notebookForm.icon"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<template x-for="icon in availableIcons" :key="icon.value">
|
|
<option :value="icon.value" x-text="icon.label"></option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 버튼 -->
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
@click="closeModal()"
|
|
class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="submit"
|
|
:disabled="saving || !notebookForm.title"
|
|
:class="saving || !notebookForm.title ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
|
|
class="px-4 py-2 text-white rounded-lg transition-colors">
|
|
<span x-show="!saving" x-text="showEditModal ? '수정' : '생성'"></span>
|
|
<span x-show="saving">저장 중...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript 파일들 -->
|
|
<script src="/static/js/header-loader.js?v=2025012603"></script>
|
|
<script src="/static/js/api.js?v=2025012607"></script>
|
|
<script src="/static/js/auth.js?v=2025012351"></script>
|
|
<script src="/static/js/notebooks.js?v=2025012609"></script>
|
|
</body>
|
|
</html>
|