04ae64fc4d
- 업로드 시 HTML과 PDF를 별도 폴더에 저장 (/documents/, /pdfs/) - 프론트엔드 필터링을 폴더 경로 기준으로 단순화 - PDF 삭제 시 외래키 참조 해제 로직 추가 - book-documents.js, book-editor.js 필터링 통일 - HTML 문서 목록에서 PDF 완전 분리
454 lines
28 KiB
HTML
454 lines
28 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>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📄</text></svg>">
|
|
<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.4.0/css/all.min.css">
|
|
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
|
|
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/css/viewer.css">
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div x-data="documentViewer" x-init="init()">
|
|
<!-- 헤더 -->
|
|
<header class="bg-white shadow-sm border-b sticky top-0 z-40 backdrop-blur-sm bg-white/95">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- 첫 번째 줄: 문서 정보 -->
|
|
<div class="flex justify-between items-center h-12 border-b border-gray-100">
|
|
<!-- 뒤로가기 및 문서 정보 -->
|
|
<div class="flex items-center space-x-4">
|
|
<button @click="goBack" class="w-8 h-8 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center justify-center transition-all duration-200 text-gray-600 hover:text-gray-900">
|
|
<i class="fas fa-arrow-left text-sm"></i>
|
|
</button>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-gray-900" x-text="document?.title || '로딩 중...'"></h1>
|
|
</div>
|
|
</div>
|
|
<!-- 업로더 정보 -->
|
|
<div x-show="document">
|
|
<p class="text-sm text-gray-500 font-medium" x-text="document?.uploader_name"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 두 번째 줄: 도구 모음 -->
|
|
<div class="flex justify-between items-center h-14 py-2">
|
|
<!-- 왼쪽: 도구들 -->
|
|
<div class="flex items-center space-x-3">
|
|
<!-- 하이라이트 색상 선택 -->
|
|
<div class="flex items-center space-x-1 bg-white rounded-xl shadow-sm border p-2">
|
|
<span class="text-xs font-medium text-gray-600 mr-2">하이라이트</span>
|
|
<button @click="createHighlightWithColor('#FFFF00')"
|
|
:class="selectedHighlightColor === '#FFFF00' ? 'ring-2 ring-yellow-400 scale-110' : 'hover:scale-105'"
|
|
class="w-6 h-6 bg-yellow-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
|
|
title="노란색 하이라이트"></button>
|
|
<button @click="createHighlightWithColor('#90EE90')"
|
|
:class="selectedHighlightColor === '#90EE90' ? 'ring-2 ring-green-400 scale-110' : 'hover:scale-105'"
|
|
class="w-6 h-6 bg-green-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
|
|
title="초록색 하이라이트"></button>
|
|
<button @click="createHighlightWithColor('#FFB6C1')"
|
|
:class="selectedHighlightColor === '#FFB6C1' ? 'ring-2 ring-pink-400 scale-110' : 'hover:scale-105'"
|
|
class="w-6 h-6 bg-pink-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
|
|
title="분홍색 하이라이트"></button>
|
|
<button @click="createHighlightWithColor('#87CEEB')"
|
|
:class="selectedHighlightColor === '#87CEEB' ? 'ring-2 ring-blue-400 scale-110' : 'hover:scale-105'"
|
|
class="w-6 h-6 bg-blue-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
|
|
title="파란색 하이라이트"></button>
|
|
</div>
|
|
|
|
<!-- 메모 & 책갈피 버튼 그룹 -->
|
|
<div class="flex items-center bg-white rounded-xl shadow-sm border overflow-hidden">
|
|
<!-- 메모 버튼 -->
|
|
<button @click="showNotesPanel = !showNotesPanel"
|
|
:class="showNotesPanel ? 'bg-blue-50 text-blue-700 border-r border-blue-200' : 'text-gray-600 hover:bg-gray-50 border-r border-gray-200'"
|
|
class="px-3 py-1.5 transition-all duration-200 flex flex-col items-center space-y-0.5 relative min-w-[50px]">
|
|
<div class="relative">
|
|
<i class="fas fa-sticky-note text-sm"></i>
|
|
<span x-show="notes.length > 0"
|
|
class="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-3 h-3 flex items-center justify-center font-medium text-xs"
|
|
x-text="notes.length"></span>
|
|
</div>
|
|
<span class="font-medium text-xs">메모</span>
|
|
</button>
|
|
|
|
<!-- 책갈피 버튼 -->
|
|
<button @click="showBookmarksPanel = !showBookmarksPanel"
|
|
:class="showBookmarksPanel ? 'bg-amber-50 text-amber-700' : 'text-gray-600 hover:bg-gray-50'"
|
|
class="px-3 py-1.5 transition-all duration-200 flex flex-col items-center space-y-0.5 relative min-w-[50px]">
|
|
<div class="relative">
|
|
<i class="fas fa-bookmark text-sm"></i>
|
|
<span x-show="bookmarks.length > 0"
|
|
class="absolute -top-1 -right-1 bg-amber-500 text-white text-xs rounded-full w-3 h-3 flex items-center justify-center font-medium text-xs"
|
|
x-text="bookmarks.length"></span>
|
|
</div>
|
|
<span class="font-medium text-xs">책갈피</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 중앙: 검색 -->
|
|
<div class="flex-1 flex justify-center">
|
|
<div class="relative">
|
|
<input type="text" x-model="searchQuery" @input="searchInDocument"
|
|
placeholder="문서 내 검색..."
|
|
class="w-64 pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm transition-all duration-200">
|
|
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오른쪽: 한영 전환 -->
|
|
<div class="flex items-center">
|
|
<!-- PDF 다운로드 버튼 (매칭된 PDF가 있는 경우) -->
|
|
<!-- 원본 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 다운로드">
|
|
<i class="fas fa-file-pdf text-sm"></i>
|
|
<span class="font-medium text-sm">원본 다운로드</span>
|
|
</button>
|
|
|
|
<button @click="toggleLanguage()"
|
|
class="bg-blue-600 text-white px-4 py-2 rounded-xl hover:bg-blue-700 transition-all duration-200 flex items-center space-x-2 shadow-sm"
|
|
id="language-toggle-btn">
|
|
<i class="fas fa-globe text-sm"></i>
|
|
<span class="font-medium text-sm">언어전환</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<div class="flex max-w-7xl mx-auto">
|
|
<!-- 문서 뷰어 -->
|
|
<main class="flex-1 bg-white shadow-sm" :class="(showNotesPanel || showBookmarksPanel) ? 'mr-70' : ''"
|
|
:style="(showNotesPanel || showBookmarksPanel) ? 'margin-right: 280px;' : ''">
|
|
<div class="p-8">
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="loading" class="text-center py-16">
|
|
<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="text-center py-16">
|
|
<i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
|
|
<p class="text-red-600" x-text="error"></p>
|
|
<button @click="goBack" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
|
|
돌아가기
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 문서 내용 -->
|
|
<div x-show="!loading && !error"
|
|
id="document-content"
|
|
class="prose prose-lg max-w-none"
|
|
@mouseup="handleTextSelection"
|
|
@click="handleDocumentClick">
|
|
<!-- 문서 HTML이 여기에 로드됩니다 -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 사이드 패널 -->
|
|
<aside x-show="showNotesPanel || showBookmarksPanel"
|
|
class="fixed right-0 bg-white shadow-lg border-l overflow-hidden flex flex-col"
|
|
style="height: calc(100vh - 7rem); top: 7rem; width: 280px;">
|
|
|
|
<!-- 패널 탭 -->
|
|
<div class="flex bg-gray-50 p-1 rounded-t-lg">
|
|
<button @click="activePanel = 'notes'; showNotesPanel = true; showBookmarksPanel = false"
|
|
:class="activePanel === 'notes' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'"
|
|
class="flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 flex items-center justify-center space-x-2">
|
|
<div class="relative">
|
|
<i class="fas fa-sticky-note"></i>
|
|
<span x-show="notes.length > 0"
|
|
class="absolute -top-1.5 -right-1.5 bg-blue-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-medium"
|
|
x-text="notes.length"></span>
|
|
</div>
|
|
<span>메모</span>
|
|
</button>
|
|
<button @click="activePanel = 'bookmarks'; showBookmarksPanel = true; showNotesPanel = false"
|
|
:class="activePanel === 'bookmarks' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'"
|
|
class="flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 flex items-center justify-center space-x-2">
|
|
<div class="relative">
|
|
<i class="fas fa-bookmark"></i>
|
|
<span x-show="bookmarks.length > 0"
|
|
class="absolute -top-1.5 -right-1.5 bg-amber-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-medium"
|
|
x-text="bookmarks.length"></span>
|
|
</div>
|
|
<span>책갈피</span>
|
|
</button>
|
|
<button @click="showNotesPanel = false; showBookmarksPanel = false"
|
|
class="px-3 py-2.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 메모 패널 -->
|
|
<div x-show="activePanel === 'notes'" class="flex-1 overflow-hidden flex flex-col">
|
|
<div class="p-4 border-b">
|
|
<input type="text" x-model="noteSearchQuery" @input="filterNotes"
|
|
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>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
<template x-if="filteredNotes.length === 0">
|
|
<div class="p-8 text-center text-gray-500">
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fas fa-sticky-note text-2xl text-blue-500"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-700 mb-2">메모가 없습니다</h3>
|
|
<p class="text-sm text-gray-500">텍스트를 선택하고 메모를 추가해보세요</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-2 p-2">
|
|
<template x-for="note in filteredNotes" :key="note.id">
|
|
<div class="bg-white rounded-lg p-3 cursor-pointer hover:shadow-md border border-gray-100 transition-all duration-200 group"
|
|
@click="scrollToHighlight(note.highlight.id)">
|
|
<!-- 선택된 텍스트 -->
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="flex-1 bg-blue-50 rounded-md p-1.5 mr-2">
|
|
<p class="text-xs text-blue-800 line-clamp-2 font-medium" x-text="note.highlight.selected_text"></p>
|
|
</div>
|
|
<div class="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
<button @click.stop="editNote(note)"
|
|
class="w-6 h-6 bg-blue-100 text-blue-600 rounded-md hover:bg-blue-200 flex items-center justify-center transition-colors duration-200">
|
|
<i class="fas fa-edit text-xs"></i>
|
|
</button>
|
|
<button @click.stop="deleteNote(note.id)"
|
|
class="w-6 h-6 bg-red-100 text-red-600 rounded-md hover:bg-red-200 flex items-center justify-center transition-colors duration-200">
|
|
<i class="fas fa-trash text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메모 내용 -->
|
|
<p class="text-sm text-gray-800 mb-2 leading-relaxed" x-text="note.content"></p>
|
|
|
|
<!-- 태그와 날짜 -->
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex flex-wrap gap-1">
|
|
<template x-for="tag in note.tags || []" :key="tag">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full font-medium" x-text="tag"></span>
|
|
</template>
|
|
</div>
|
|
<span class="text-xs text-gray-500 font-medium" x-text="formatDate(note.created_at)"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 책갈피 패널 -->
|
|
<div x-show="activePanel === 'bookmarks'" class="flex-1 overflow-hidden flex flex-col">
|
|
<div class="p-4 border-b">
|
|
<button @click="addBookmark" class="w-full bg-gradient-to-r from-amber-500 to-orange-500 text-white py-3 px-4 rounded-xl hover:from-amber-600 hover:to-orange-600 transition-all duration-200 shadow-sm font-medium">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
현재 위치에 책갈피 추가
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
<template x-if="bookmarks.length === 0">
|
|
<div class="p-8 text-center text-gray-500">
|
|
<div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fas fa-bookmark text-2xl text-amber-500"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-700 mb-2">책갈피가 없습니다</h3>
|
|
<p class="text-sm text-gray-500">위의 버튼을 눌러 책갈피를 추가해보세요</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-2 p-2">
|
|
<template x-for="bookmark in bookmarks" :key="bookmark.id">
|
|
<div class="bg-white rounded-lg p-3 cursor-pointer hover:shadow-md border border-gray-100 transition-all duration-200 group"
|
|
@click="scrollToBookmark(bookmark)">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="flex items-start space-x-2 flex-1">
|
|
<div class="w-6 h-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-md flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-bookmark text-white text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h4 class="font-semibold text-gray-900 text-sm truncate" x-text="bookmark.title"></h4>
|
|
<p class="text-xs text-gray-600 line-clamp-2" x-text="bookmark.description"></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ml-2">
|
|
<button @click.stop="editBookmark(bookmark)"
|
|
class="w-6 h-6 bg-blue-100 text-blue-600 rounded-md hover:bg-blue-200 flex items-center justify-center transition-colors duration-200">
|
|
<i class="fas fa-edit text-xs"></i>
|
|
</button>
|
|
<button @click.stop="deleteBookmark(bookmark.id)"
|
|
class="w-6 h-6 bg-red-100 text-red-600 rounded-md hover:bg-red-200 flex items-center justify-center transition-colors duration-200">
|
|
<i class="fas fa-trash text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<span class="text-xs text-gray-500 font-medium" x-text="formatDate(bookmark.created_at)"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- 메모 추가/편집 모달 -->
|
|
<div x-show="showNoteModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4 max-h-96 overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold" x-text="editingNote ? '메모 편집' : '메모 추가'"></h3>
|
|
<button @click="closeNoteModal" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 선택된 텍스트 표시 -->
|
|
<div x-show="selectedText" class="mb-4 p-3 bg-yellow-100 rounded-lg">
|
|
<p class="text-sm text-gray-600 mb-1">선택된 텍스트:</p>
|
|
<p class="text-sm font-medium" x-text="selectedText"></p>
|
|
</div>
|
|
|
|
<form @submit.prevent="saveNote">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">메모 내용</label>
|
|
<textarea x-model="noteForm.content" rows="4" 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="메모를 입력하세요..."></textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">태그 (쉼표로 구분)</label>
|
|
<input type="text" x-model="noteForm.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="예: 중요, 질문, 아이디어">
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" @click="closeNoteModal"
|
|
class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300">
|
|
취소
|
|
</button>
|
|
<button type="submit" :disabled="noteLoading"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50">
|
|
<span x-show="!noteLoading" x-text="editingNote ? '수정' : '저장'"></span>
|
|
<span x-show="noteLoading">저장 중...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 책갈피 추가/편집 모달 -->
|
|
<div x-show="showBookmarkModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold" x-text="editingBookmark ? '책갈피 편집' : '책갈피 추가'"></h3>
|
|
<button @click="closeBookmarkModal" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form @submit.prevent="saveBookmark">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">제목</label>
|
|
<input type="text" x-model="bookmarkForm.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>
|
|
<textarea x-model="bookmarkForm.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="flex justify-end space-x-3">
|
|
<button type="button" @click="closeBookmarkModal"
|
|
class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300">
|
|
취소
|
|
</button>
|
|
<button type="submit" :disabled="bookmarkLoading"
|
|
class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50">
|
|
<span x-show="!bookmarkLoading" x-text="editingBookmark ? '수정' : '저장'"></span>
|
|
<span x-show="bookmarkLoading">저장 중...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스크립트 -->
|
|
<script src="/static/js/api.js?v=2025012380"></script>
|
|
<script src="/static/js/viewer.js?v=2025012387"></script>
|
|
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* 기존 언어 전환 버튼 숨기기 */
|
|
.language-toggle,
|
|
button[onclick*="toggleLanguage"],
|
|
*[class*="language"],
|
|
*[class*="translate"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.highlight {
|
|
position: relative;
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.highlight:hover {
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.highlight.selected {
|
|
box-shadow: 0 0 0 2px #3B82F6;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 검색 하이라이트 */
|
|
.search-highlight {
|
|
background-color: #FEF3C7 !important;
|
|
border: 1px solid #F59E0B;
|
|
}
|
|
|
|
/* 스크롤바 스타일링 */
|
|
.overflow-y-auto::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|