f221a5611c
주요 변경사항: - story-reader.html: pt-4 → pt-20 - pdf-manager.html: py-8 → pt-20 pb-8 - upload.html: py-8 → pt-20 pb-8 - index.html: py-8 → pt-20 pb-8 - search.html: py-8 → pt-20 pb-8 - memo-tree.html: pt-16 → pt-20 - notebooks.html: py-8 → pt-20 pb-8 - notes.html: py-8 → pt-20 pb-8 헤더(h-16, z-50)와의 충돌을 방지하기 위해 모든 페이지의 상단 여백을 pt-20(80px)으로 통일
741 lines
38 KiB
HTML
741 lines
38 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">
|
|
|
|
<!-- 인증 가드 -->
|
|
<script src="static/js/auth-guard.js"></script>
|
|
|
|
<!-- PDF.js 라이브러리 -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
|
<script>
|
|
// PDF.js 워커 설정 (전역)
|
|
if (typeof pdfjsLib !== 'undefined') {
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
|
|
.search-result-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-result-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.highlight-text {
|
|
background: linear-gradient(120deg, #fbbf24 0%, #f59e0b 100%);
|
|
color: #92400e;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-filter-chip {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search-filter-chip.active {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.search-stats {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
border-left: 4px solid #3b82f6;
|
|
}
|
|
|
|
.result-type-badge {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.badge-document {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
color: white;
|
|
}
|
|
|
|
.badge-note {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
color: white;
|
|
}
|
|
|
|
.badge-memo {
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
|
color: white;
|
|
}
|
|
|
|
.badge-highlight {
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
color: white;
|
|
}
|
|
|
|
.badge-highlight_note {
|
|
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.badge-document_content {
|
|
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
|
|
color: white;
|
|
}
|
|
|
|
.search-input-container {
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
border: 2px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-input-container:focus-within {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.search-input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 18px;
|
|
padding: 20px 60px 20px 24px;
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.search-button {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search-button:hover {
|
|
transform: translateY(-50%) scale(1.05);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.empty-state {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border: 2px dashed #cbd5e1;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.loading-spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen" x-data="searchApp()" x-init="init()" x-cloak>
|
|
<!-- 헤더 -->
|
|
<div id="header-container"></div>
|
|
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="container mx-auto px-4 pt-20 pb-8">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
|
<i class="fas fa-search text-blue-600 mr-3"></i>
|
|
통합 검색
|
|
</h1>
|
|
<p class="text-xl text-gray-600">문서, 노트, 메모를 한 번에 검색하세요</p>
|
|
</div>
|
|
|
|
<!-- 검색 입력 -->
|
|
<div class="max-w-4xl mx-auto mb-8">
|
|
<form @submit.prevent="performSearch()">
|
|
<div class="search-input-container">
|
|
<input
|
|
type="text"
|
|
x-model="searchQuery"
|
|
placeholder="검색어를 입력하세요..."
|
|
class="search-input"
|
|
@input="debounceSearch()"
|
|
>
|
|
<button type="submit" class="search-button" :disabled="loading">
|
|
<i class="fas fa-search" :class="{'loading-spinner': loading}"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 검색 필터 -->
|
|
<div class="max-w-4xl mx-auto mb-8" x-show="searchResults.length > 0 || hasSearched">
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<!-- 타입 필터 -->
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-sm font-medium text-gray-700">타입:</span>
|
|
<button
|
|
@click="typeFilter = ''"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === '' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
전체
|
|
</button>
|
|
<button
|
|
@click="typeFilter = 'document'"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === 'document' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-file-alt mr-1"></i>문서
|
|
</button>
|
|
<button
|
|
@click="typeFilter = 'note'"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === 'note' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-sticky-note mr-1"></i>노트
|
|
</button>
|
|
<button
|
|
@click="typeFilter = 'memo'"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === 'memo' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-tree mr-1"></i>메모
|
|
</button>
|
|
<button
|
|
@click="typeFilter = 'highlight'"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === 'highlight' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-highlighter mr-1"></i>하이라이트
|
|
</button>
|
|
<button
|
|
@click="typeFilter = 'highlight_note'"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === 'highlight_note' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-comment mr-1"></i>메모
|
|
</button>
|
|
<button
|
|
@click="typeFilter = 'document_content'"
|
|
class="search-filter-chip px-3 py-1 rounded-full text-sm border"
|
|
:class="typeFilter === 'document_content' ? 'active' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-file-text mr-1"></i>본문
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 파일 타입 필터 -->
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-sm font-medium text-gray-700">파일 타입:</span>
|
|
<button
|
|
@click="fileTypeFilter = fileTypeFilter === 'PDF' ? '' : 'PDF'; applyFilters()"
|
|
class="search-filter-chip px-2 py-1 rounded text-xs border transition-all"
|
|
:class="fileTypeFilter === 'PDF' ? 'bg-red-100 text-red-800 border-red-300' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-file-pdf mr-1"></i>PDF
|
|
</button>
|
|
<button
|
|
@click="fileTypeFilter = fileTypeFilter === 'HTML' ? '' : 'HTML'; applyFilters()"
|
|
class="search-filter-chip px-2 py-1 rounded text-xs border transition-all"
|
|
:class="fileTypeFilter === 'HTML' ? 'bg-orange-100 text-orange-800 border-orange-300' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
|
|
>
|
|
<i class="fas fa-code mr-1"></i>HTML
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 정렬 -->
|
|
<div class="flex items-center space-x-2 ml-auto">
|
|
<span class="text-sm font-medium text-gray-700">정렬:</span>
|
|
<select x-model="sortBy" @change="applyFilters()"
|
|
class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<option value="relevance">관련도순</option>
|
|
<option value="date_desc">최신순</option>
|
|
<option value="date_asc">오래된순</option>
|
|
<option value="title">제목순</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검색 통계 -->
|
|
<div class="max-w-4xl mx-auto mb-6" x-show="searchResults.length > 0">
|
|
<div class="search-stats rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<span class="text-sm font-medium text-gray-700">
|
|
<strong x-text="filteredResults.length"></strong>개 결과
|
|
<span x-show="searchQuery" class="text-gray-500">
|
|
"<span x-text="searchQuery"></span>" 검색
|
|
</span>
|
|
</span>
|
|
<div class="flex items-center space-x-3 text-xs text-gray-500">
|
|
<span x-show="getResultCount('document') > 0">
|
|
📄 문서 <strong x-text="getResultCount('document')"></strong>개
|
|
</span>
|
|
<span x-show="getResultCount('note') > 0">
|
|
📝 노트 <strong x-text="getResultCount('note')"></strong>개
|
|
</span>
|
|
<span x-show="getResultCount('memo') > 0">
|
|
🌳 메모 <strong x-text="getResultCount('memo')"></strong>개
|
|
</span>
|
|
<span x-show="getResultCount('highlight') > 0">
|
|
🖍️ 하이라이트 <strong x-text="getResultCount('highlight')"></strong>개
|
|
</span>
|
|
<span x-show="getResultCount('highlight_note') > 0">
|
|
💬 메모 <strong x-text="getResultCount('highlight_note')"></strong>개
|
|
</span>
|
|
<span x-show="getResultCount('document_content') > 0">
|
|
📖 본문 <strong x-text="getResultCount('document_content')"></strong>개
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
<span x-text="searchTime"></span>ms
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="loading" class="max-w-4xl mx-auto text-center py-12">
|
|
<i class="fas fa-spinner fa-spin text-4xl text-blue-600 mb-4"></i>
|
|
<p class="text-gray-600">검색 중...</p>
|
|
</div>
|
|
|
|
<!-- 검색 결과 -->
|
|
<div x-show="!loading && filteredResults.length > 0" class="max-w-4xl mx-auto space-y-4">
|
|
<template x-for="result in filteredResults" :key="result.unique_id || result.id">
|
|
<div class="search-result-card bg-white rounded-lg shadow-sm border p-6 fade-in">
|
|
<!-- 결과 헤더 -->
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<span class="result-type-badge"
|
|
:class="`badge-${result.type}`"
|
|
x-text="getTypeLabel(result.type)"></span>
|
|
|
|
<!-- 파일 타입 정보 (PDF/HTML) -->
|
|
<span x-show="result.highlight_info?.file_type"
|
|
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
|
:class="{
|
|
'bg-red-100 text-red-800': result.highlight_info?.file_type === 'PDF',
|
|
'bg-orange-100 text-orange-800': result.highlight_info?.file_type === 'HTML'
|
|
}">
|
|
<i class="fas mr-1"
|
|
:class="{
|
|
'fa-file-pdf': result.highlight_info?.file_type === 'PDF',
|
|
'fa-code': result.highlight_info?.file_type === 'HTML'
|
|
}"></i>
|
|
<span x-text="result.highlight_info?.file_type"></span>
|
|
</span>
|
|
|
|
<!-- 매치 개수 -->
|
|
<span x-show="result.highlight_info && result.highlight_info.match_count > 0"
|
|
class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
|
|
<i class="fas fa-search mr-1"></i>
|
|
<span x-text="result.highlight_info?.match_count || 0"></span>개 매치
|
|
</span>
|
|
|
|
<span class="text-xs text-gray-500" x-text="formatDate(result.created_at)"></span>
|
|
<div x-show="result.relevance_score > 0" class="flex items-center text-xs text-gray-500">
|
|
<i class="fas fa-star text-yellow-500 mr-1"></i>
|
|
<span x-text="Math.round(result.relevance_score * 100) + '%'"></span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2 cursor-pointer hover:text-blue-600"
|
|
@click="openResult(result)"
|
|
x-html="highlightText(result.title, searchQuery)"></h3>
|
|
<p class="text-sm text-gray-600 mb-2" x-text="result.document_title"></p>
|
|
</div>
|
|
<div class="ml-4 flex space-x-2">
|
|
<button @click="showPreview(result)"
|
|
class="px-3 py-1 bg-gray-600 text-white rounded-lg text-sm hover:bg-gray-700 transition-colors">
|
|
<i class="fas fa-eye mr-1"></i>미리보기
|
|
</button>
|
|
<button @click="openResult(result)"
|
|
class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors">
|
|
<i class="fas fa-external-link-alt mr-1"></i>열기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 결과 내용 -->
|
|
<div class="text-gray-700 text-sm leading-relaxed"
|
|
x-html="highlightText(truncateText(result.content, 200), searchQuery)"></div>
|
|
|
|
<!-- 하이라이트 정보 -->
|
|
<div x-show="result.type === 'highlight' && result.highlight_info" class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|
<div class="text-xs text-yellow-800 mb-1">
|
|
<i class="fas fa-highlighter mr-1"></i>하이라이트 정보
|
|
</div>
|
|
<div class="text-sm text-yellow-900" x-show="result.highlight_info?.selected_text">
|
|
"<span x-text="result.highlight_info?.selected_text"></span>"
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 빈 검색 결과 -->
|
|
<div x-show="!loading && hasSearched && filteredResults.length === 0" class="max-w-4xl mx-auto">
|
|
<div class="empty-state text-center py-16">
|
|
<i class="fas fa-search 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">
|
|
<span x-show="searchQuery">
|
|
"<span x-text="searchQuery"></span>"에 대한 결과를 찾을 수 없습니다.
|
|
</span>
|
|
<span x-show="!searchQuery">검색어를 입력해주세요.</span>
|
|
</p>
|
|
<div class="text-sm text-gray-500">
|
|
<p class="mb-2">검색 팁:</p>
|
|
<ul class="text-left inline-block space-y-1">
|
|
<li>• 다른 키워드로 검색해보세요</li>
|
|
<li>• 검색어를 줄여보세요</li>
|
|
<li>• 필터를 변경해보세요</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 초기 상태 -->
|
|
<div x-show="!loading && !hasSearched" class="max-w-4xl mx-auto">
|
|
<div class="text-center py-16">
|
|
<i class="fas fa-search 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-8">문서, 노트, 메모, 하이라이트를 통합 검색할 수 있습니다</p>
|
|
|
|
<!-- 빠른 검색 예시 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-2xl mx-auto">
|
|
<button @click="searchQuery = '설계'; performSearch()"
|
|
class="p-4 bg-white rounded-lg border hover:border-blue-500 hover:bg-blue-50 transition-colors">
|
|
<i class="fas fa-drafting-compass text-blue-600 text-2xl mb-2"></i>
|
|
<div class="text-sm font-medium">설계</div>
|
|
</button>
|
|
<button @click="searchQuery = '연구'; performSearch()"
|
|
class="p-4 bg-white rounded-lg border hover:border-green-500 hover:bg-green-50 transition-colors">
|
|
<i class="fas fa-flask text-green-600 text-2xl mb-2"></i>
|
|
<div class="text-sm font-medium">연구</div>
|
|
</button>
|
|
<button @click="searchQuery = '프로젝트'; performSearch()"
|
|
class="p-4 bg-white rounded-lg border hover:border-purple-500 hover:bg-purple-50 transition-colors">
|
|
<i class="fas fa-project-diagram text-purple-600 text-2xl mb-2"></i>
|
|
<div class="text-sm font-medium">프로젝트</div>
|
|
</button>
|
|
<button @click="searchQuery = '분석'; performSearch()"
|
|
class="p-4 bg-white rounded-lg border hover:border-orange-500 hover:bg-orange-50 transition-colors">
|
|
<i class="fas fa-chart-line text-orange-600 text-2xl mb-2"></i>
|
|
<div class="text-sm font-medium">분석</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 미리보기 모달 -->
|
|
<div x-show="showPreviewModal"
|
|
@keydown.escape.window="closePreview()"
|
|
@click.self="closePreview()"
|
|
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-4xl w-full max-h-[80vh] overflow-hidden"
|
|
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 p-6 border-b">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<span class="result-type-badge"
|
|
:class="`badge-${previewResult?.type}`"
|
|
x-text="getTypeLabel(previewResult?.type)"></span>
|
|
<span class="text-sm text-gray-500" x-text="formatDate(previewResult?.created_at)"></span>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900" x-text="previewResult?.title"></h3>
|
|
<p class="text-sm text-gray-600" x-text="previewResult?.document_title"></p>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="openResult(previewResult)"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
|
<i class="fas fa-external-link-alt mr-2"></i>열기
|
|
</button>
|
|
<button @click="closePreview()"
|
|
class="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 모달 내용 -->
|
|
<div class="p-6 overflow-y-auto max-h-[60vh]">
|
|
<!-- PDF 미리보기 (데본씽크 스타일) -->
|
|
<div x-show="(previewResult?.type === 'document_content' || previewResult?.type === 'document') && previewResult?.highlight_info?.has_pdf"
|
|
class="mb-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="text-sm font-medium text-gray-800">
|
|
<i class="fas fa-file-pdf mr-2 text-red-600"></i>PDF 미리보기
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="searchInPdf()"
|
|
class="px-3 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700">
|
|
<i class="fas fa-search mr-1"></i>PDF에서 검색
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PDF 뷰어 컨테이너 -->
|
|
<div class="border rounded-lg overflow-hidden bg-gray-100 relative" style="height: 500px;">
|
|
<!-- PDF iframe 뷰어 -->
|
|
<iframe id="pdf-preview-iframe"
|
|
x-show="!pdfError && !pdfLoading"
|
|
class="w-full h-full border-0"
|
|
:src="pdfSrc"
|
|
@load="pdfLoaded = true"
|
|
@error="handlePdfError()">
|
|
</iframe>
|
|
|
|
<!-- PDF 로딩 상태 -->
|
|
<div x-show="pdfLoading" class="flex items-center justify-center h-full">
|
|
<div class="text-center">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-gray-500 mb-2"></i>
|
|
<p class="text-gray-600">PDF를 로드하는 중...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="pdfError" class="flex items-center justify-center h-full text-gray-500">
|
|
<div class="text-center">
|
|
<i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
|
|
<p>PDF를 로드할 수 없습니다</p>
|
|
<button @click="openResult(previewResult)"
|
|
class="mt-2 px-3 py-1 bg-blue-600 text-white rounded text-sm">
|
|
뷰어에서 열기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HTML 문서 미리보기 -->
|
|
<div x-show="(previewResult?.type === 'document' || previewResult?.type === 'document_content') && !previewResult?.highlight_info?.has_pdf"
|
|
class="mb-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="text-sm font-medium text-gray-800">
|
|
<i class="fas fa-code mr-2 text-green-600"></i>HTML 문서 미리보기
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="toggleHtmlRaw()"
|
|
class="px-3 py-1 bg-gray-600 text-white rounded text-xs hover:bg-gray-700">
|
|
<i class="fas fa-code mr-1"></i><span x-text="htmlRawMode ? '렌더링' : '소스'"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded-lg overflow-hidden bg-white relative" style="height: 500px;">
|
|
<!-- HTML 렌더링 뷰 -->
|
|
<iframe id="htmlPreviewFrame"
|
|
x-show="!htmlRawMode && !htmlLoading"
|
|
class="w-full h-full border-0"
|
|
sandbox="allow-same-origin">
|
|
</iframe>
|
|
|
|
<!-- HTML 소스 뷰 -->
|
|
<div x-show="htmlRawMode && !htmlLoading"
|
|
class="w-full h-full overflow-auto p-4 bg-gray-900 text-green-400 font-mono text-sm">
|
|
<pre x-html="htmlSourceCode"></pre>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="htmlLoading" class="flex items-center justify-center h-full">
|
|
<div class="text-center">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-gray-500 mb-2"></i>
|
|
<p class="text-gray-600">HTML을 로드하는 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메모 트리 노드 미리보기 -->
|
|
<div x-show="previewResult?.type === 'memo'"
|
|
class="mb-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="text-sm font-medium text-gray-800">
|
|
<i class="fas fa-tree mr-2 text-purple-600"></i>메모 노드 미리보기
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-xs text-gray-600" x-text="previewResult?.document_title"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded-lg overflow-hidden bg-white" style="height: 400px;">
|
|
<div class="h-full overflow-auto p-6">
|
|
<!-- 메모 제목 -->
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4" x-text="previewResult?.title"></h3>
|
|
|
|
<!-- 메모 내용 -->
|
|
<div class="prose max-w-none">
|
|
<div class="text-gray-700 leading-relaxed whitespace-pre-wrap"
|
|
x-html="highlightText(previewResult?.content || '', searchQuery)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 노트 문서 미리보기 -->
|
|
<div x-show="previewResult?.type === 'note'"
|
|
class="mb-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="text-sm font-medium text-gray-800">
|
|
<i class="fas fa-sticky-note mr-2 text-blue-600"></i>노트 미리보기
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="toggleNoteEdit()"
|
|
class="px-3 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700">
|
|
<i class="fas fa-edit mr-1"></i>편집기에서 열기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded-lg overflow-hidden bg-white" style="height: 450px;">
|
|
<div class="h-full overflow-auto">
|
|
<!-- 노트 헤더 -->
|
|
<div class="p-4 border-b bg-gray-50">
|
|
<h3 class="text-lg font-semibold text-gray-900" x-text="previewResult?.title"></h3>
|
|
<div class="text-sm text-gray-600 mt-1">
|
|
<span x-text="formatDate(previewResult?.created_at)"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 노트 내용 -->
|
|
<div class="p-6">
|
|
<div class="prose max-w-none">
|
|
<div class="text-gray-700 leading-relaxed"
|
|
x-html="highlightText(previewResult?.content || '', searchQuery)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 하이라이트 정보 -->
|
|
<div x-show="previewResult?.type === 'highlight' && previewResult?.highlight_info"
|
|
class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|
<div class="text-sm font-medium text-yellow-800 mb-2">
|
|
<i class="fas fa-highlighter mr-2"></i>하이라이트된 텍스트
|
|
</div>
|
|
<div class="text-yellow-900 font-medium mb-2"
|
|
x-text="previewResult?.highlight_info?.selected_text"></div>
|
|
<div x-show="previewResult?.highlight_info?.note_content" class="text-sm text-yellow-800">
|
|
<strong>메모:</strong> <span x-text="previewResult?.highlight_info?.note_content"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메모 내용 -->
|
|
<div x-show="previewResult?.type === 'highlight_note' && previewResult?.highlight_info"
|
|
class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<div class="text-sm font-medium text-blue-800 mb-2">
|
|
<i class="fas fa-quote-left mr-2"></i>원본 하이라이트
|
|
</div>
|
|
<div class="text-blue-900 mb-2" x-text="previewResult?.highlight_info?.selected_text"></div>
|
|
<div class="text-sm font-medium text-blue-800 mb-1">메모 내용:</div>
|
|
</div>
|
|
|
|
<!-- 본문 검색 결과 정보 -->
|
|
<div x-show="previewResult?.type === 'document_content' && previewResult?.highlight_info"
|
|
class="mb-4 p-4 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-medium text-gray-800">
|
|
<i class="fas fa-search mr-2"></i>본문 검색 결과
|
|
</div>
|
|
<div class="text-xs text-gray-600">
|
|
<span x-text="previewResult?.highlight_info?.file_type"></span>
|
|
• <span x-text="previewResult?.highlight_info?.match_count"></span>개 매치
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 본문 내용 (PDF/HTML이 아닌 경우) -->
|
|
<div x-show="!previewResult?.highlight_info?.has_pdf && !previewResult?.highlight_info?.has_html"
|
|
class="prose max-w-none">
|
|
<div class="text-gray-700 leading-relaxed"
|
|
style="white-space: pre-wrap; word-wrap: break-word; max-height: 400px; overflow-y: auto;"
|
|
x-html="highlightText(previewResult?.content || '', searchQuery)"></div>
|
|
</div>
|
|
|
|
<!-- 기본 텍스트 내용 (fallback) -->
|
|
<div x-show="!previewResult?.highlight_info?.has_pdf && !previewResult?.highlight_info?.has_html && (!previewResult?.content || previewResult?.content.length < 10)"
|
|
class="text-center py-8 text-gray-500">
|
|
<i class="fas fa-file-alt text-3xl mb-3"></i>
|
|
<p>미리보기할 수 있는 내용이 없습니다.</p>
|
|
<button @click="openResult(previewResult)"
|
|
class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
|
원본에서 보기
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 추가 정보 -->
|
|
<div x-show="previewResult?.type === 'memo'" class="mt-4 p-3 bg-purple-50 border border-purple-200 rounded-lg">
|
|
<div class="text-sm font-medium text-purple-800 mb-1">
|
|
<i class="fas fa-tree mr-2"></i>메모 트리 정보
|
|
</div>
|
|
<div class="text-purple-700 text-sm" x-text="previewResult?.document_title"></div>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="previewLoading" class="text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-gray-400 mb-2"></i>
|
|
<p class="text-gray-600">내용을 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
</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/search.js?v=2025012610"></script>
|
|
</body>
|
|
</html>
|