397c63979d
✨ 주요 기능 추가: - 링크 생성 후 즉시 렌더링 (캐시 무효화 수정) - 하이라이트, 링크, 백링크 겹침 시 선택 팝업 메뉴 - 백링크 오프셋 기반 정확한 렌더링 - 링크 렌더링 디버깅 로직 강화 🔧 기술적 개선: - 캐시 무효화 함수 수정 (invalidateRelatedCache 사용) - 텍스트 오프셋 불일치 시 자동 검색 대체 - 겹치는 요소 감지 및 상호작용 처리 - 상세한 디버깅 로그 추가 🎨 UI/UX 개선: - 겹침 메뉴에서 각 요소별 아이콘과 색상 구분 - 클릭된 요소 시각적 표시 - 툴팁과 메뉴 외부 클릭 처리 🐛 버그 수정: - 신규 링크 생성 후 표시되지 않는 문제 해결 - 백링크 렌더링 오프셋 정확성 개선 - 캐시 관련 JavaScript 오류 수정
139 lines
6.9 KiB
HTML
139 lines
6.9 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>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen" x-data="bookDocumentsApp()">
|
|
<!-- 헤더 -->
|
|
<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-4">
|
|
<button @click="goBack()"
|
|
class="flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
|
|
<i class="fas fa-arrow-left mr-2"></i>목차로 돌아가기
|
|
</button>
|
|
|
|
<button @click="openBookEditor()"
|
|
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-edit mr-2"></i>서적 편집
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center mr-6">
|
|
<i class="fas fa-book text-white text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900" x-text="bookInfo.title || '서적 미분류'"></h1>
|
|
<p class="text-gray-600 mt-1" x-show="bookInfo.author" x-text="bookInfo.author"></p>
|
|
<p class="text-sm text-gray-500 mt-2">
|
|
<span x-text="documents.length"></span>개 문서
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600" x-show="bookInfo.description" x-text="bookInfo.description"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 문서 목록 -->
|
|
<div class="bg-white rounded-lg shadow-sm border">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<h2 class="text-lg font-semibold text-gray-900">문서 목록</h2>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="loading" class="p-8 text-center">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-gray-400 mb-2"></i>
|
|
<p class="text-gray-500">문서를 불러오는 중...</p>
|
|
</div>
|
|
|
|
<!-- 문서 목록 -->
|
|
<div x-show="!loading && documents.length > 0" class="divide-y divide-gray-200">
|
|
<template x-for="doc in documents" :key="doc.id">
|
|
<div class="p-6 hover:bg-gray-50 cursor-pointer transition-colors"
|
|
@click="openDocument(doc.id)">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" x-text="doc.title"></h3>
|
|
<p class="text-gray-600 text-sm mb-3 line-clamp-2" x-text="doc.description || '설명이 없습니다'"></p>
|
|
|
|
<!-- 태그들 -->
|
|
<div class="flex flex-wrap gap-1 mb-3" x-show="doc.tags && doc.tags.length > 0">
|
|
<template x-for="tag in (doc.tags || [])" :key="tag">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full" x-text="tag"></span>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex items-center text-sm text-gray-500 space-x-4">
|
|
<span class="flex items-center">
|
|
<i class="fas fa-calendar mr-1"></i>
|
|
<span x-text="formatDate(doc.created_at)"></span>
|
|
</span>
|
|
<span class="flex items-center">
|
|
<i class="fas fa-user mr-1"></i>
|
|
<span x-text="doc.uploader_name"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2 ml-4">
|
|
<button @click.stop="editDocument(doc)"
|
|
class="p-2 text-gray-400 hover:text-blue-600 transition-colors"
|
|
title="문서 수정">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button x-show="currentUser && currentUser.is_admin"
|
|
@click.stop="deleteDocument(doc.id)"
|
|
class="p-2 text-gray-400 hover:text-red-600 transition-colors"
|
|
title="문서 삭제">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<i class="fas fa-chevron-right text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 빈 상태 -->
|
|
<div x-show="!loading && documents.length === 0" class="p-8 text-center">
|
|
<i class="fas fa-file-alt text-gray-400 text-4xl mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">문서가 없습니다</h3>
|
|
<p class="text-gray-500">이 서적에 등록된 문서가 없습니다</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- JavaScript 파일들 -->
|
|
<script src="/static/js/api.js?v=2025012384"></script>
|
|
<script src="/static/js/auth.js?v=2025012351"></script>
|
|
<script src="/static/js/header-loader.js?v=2025012351"></script>
|
|
<script src="/static/js/book-documents.js?v=2025012401"></script>
|
|
</body>
|
|
</html>
|