hyungi/document-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: 하이라이트 메모 표시 오류 수정

Browse Source 
- highlight-manager.js에서 showHighlightTooltip 함수 호출 시 배열 대신 단일 객체 전달하도록 수정
- 하이라이트 클릭 시 메모가 0개로 표시되던 문제 해결
- getOverlappingElements 함수에 디버깅 로그 추가
- 하이라이트 매니저 상태 확인 로그 추가
- 브라우저 캐시 무효화를 위한 버전 업데이트 (v=2025012617)
This commit is contained in:
Hyungi Ahn
2025-09-04 07:48:43 +09:00
parent 8f776a5281
commit 0786bdc86d
8 changed files with 1355 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
frontend/static/js/viewer/features/highlight-manager.js
View File

@@ -42,14 +42,20 @@ class HighlightManager {
*/
async loadNotes(documentId, contentType) {
try {
console.log('📝 메모 로드 시작:', { documentId, contentType });
if (contentType === 'note') {
this.notes = await this.api.get(`/note/${documentId}/notes`).catch(() => []);
// 노트 문서의 하이라이트 메모
this.notes = await this.api.get(`/highlight-notes/`, { note_document_id: documentId }).catch(() => []);
} else {
this.notes = await this.cachedApi.get('/notes', { document_id: documentId, content_type: contentType }, { category: 'notes' }).catch(() => []);
// 일반 문서의 하이라이트 메모
this.notes = await this.api.get(`/highlight-notes/`, { document_id: documentId }).catch(() => []);
}
console.log('📝 메모 로드 완료:', this.notes.length, '개');
return this.notes || [];
} catch (error) {
console.error('메모 로드 실패:', error);
console.error('❌ 메모 로드 실패:', error);
return [];
}
}
@@ -235,22 +241,46 @@ class HighlightManager {
span.style.cursor = 'help';
}
// 하이라이트 클릭 이벤트 추가 (겹치는 요소 감지)
// 하이라이트 클릭 이벤트 추가 (통합 툴팁 사용)
span.style.cursor = 'pointer';
span.addEventListener('click', (e) => {
span.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
// 겹치는 링크나 백링크가 있는지 확인
if (window.documentViewerInstance && window.documentViewerInstance.linkManager) {
const overlappingElements = window.documentViewerInstance.linkManager.findOverlappingElements(span);
if (overlappingElements.length > 0) {
window.documentViewerInstance.linkManager.showOverlapMenu(e, span, overlappingElements, 'highlight');
return;
console.log('🎨 하이라이트 클릭됨:', {
text: span.textContent,
highlightId: span.dataset.highlightId,
classList: Array.from(span.classList)
});
// 링크, 백링크, 하이라이트 모두 찾기
const overlappingElements = window.documentViewerInstance.getOverlappingElements(span);
const totalElements = overlappingElements.links.length + overlappingElements.backlinks.length + overlappingElements.highlights.length;
console.log('🎨 하이라이트 클릭 분석:', {
links: overlappingElements.links.length,
backlinks: overlappingElements.backlinks.length,
highlights: overlappingElements.highlights.length,
total: totalElements,
selectedText: overlappingElements.selectedText
});
if (totalElements > 1) {
// 통합 툴팁 표시 (링크 + 백링크 + 하이라이트)
console.log('🎯 통합 툴팁 표시 시작 (하이라이트에서)');
await window.documentViewerInstance.showUnifiedTooltip(overlappingElements, span);
} else {
// 단일 하이라이트 툴팁
console.log('🎨 단일 하이라이트 툴팁 표시');
// 클릭된 하이라이트 찾기
const clickedHighlightId = span.dataset.highlightId;
const clickedHighlight = this.highlights.find(h => h.id === clickedHighlightId);
if (clickedHighlight) {
await this.showHighlightTooltip(clickedHighlight, span);
} else {
console.error('❌ 클릭된 하이라이트를 찾을 수 없음:', clickedHighlightId);
}
}
this.showHighlightModal(highlights);
});
// DOM 교체
@@ -498,6 +528,109 @@ class HighlightManager {
}
}
/**
* 하이라이트 색상 변경
*/
async updateHighlightColor(highlightId, newColor) {
try {
console.log('🎨 하이라이트 색상 업데이트:', highlightId, newColor);
// API 호출 (구현 필요)
await this.api.updateHighlight(highlightId, { highlight_color: newColor });
// 로컬 데이터 업데이트
const highlight = this.highlights.find(h => h.id === highlightId);
if (highlight) {
highlight.highlight_color = newColor;
}
// 하이라이트 다시 렌더링
this.renderHighlights();
this.hideTooltip();
console.log('✅ 하이라이트 색상 변경 완료');
} catch (error) {
console.error('❌ 하이라이트 색상 변경 실패:', error);
throw error;
}
}
/**
* 하이라이트 복사
*/
async duplicateHighlight(highlightId) {
try {
console.log('📋 하이라이트 복사:', highlightId);
const originalHighlight = this.highlights.find(h => h.id === highlightId);
if (!originalHighlight) {
throw new Error('원본 하이라이트를 찾을 수 없습니다.');
}
// 새 하이라이트 데이터 생성 (약간 다른 위치에)
const duplicateData = {
document_id: originalHighlight.document_id,
start_offset: originalHighlight.start_offset,
end_offset: originalHighlight.end_offset,
selected_text: originalHighlight.selected_text,
highlight_color: originalHighlight.highlight_color,
highlight_type: originalHighlight.highlight_type
};
// API 호출
const newHighlight = await this.api.createHighlight(duplicateData);
// 로컬 데이터에 추가
this.highlights.push(newHighlight);
// 하이라이트 다시 렌더링
this.renderHighlights();
this.hideTooltip();
console.log('✅ 하이라이트 복사 완료:', newHighlight);
} catch (error) {
console.error('❌ 하이라이트 복사 실패:', error);
throw error;
}
}
/**
* 메모 업데이트
*/
async updateNote(noteId, newContent) {
try {
console.log('✏️ 메모 업데이트:', noteId, newContent);
// API 호출
const apiToUse = this.cachedApi || this.api;
await apiToUse.updateNote(noteId, { content: newContent });
// 로컬 데이터 업데이트
const note = this.notes.find(n => n.id === noteId);
if (note) {
note.content = newContent;
}
// 툴팁 새로고침 (현재 표시 중인 경우)
const tooltip = document.getElementById('highlight-tooltip');
if (tooltip) {
// 간단히 툴팁을 다시 로드하는 대신 텍스트만 업데이트
const noteElement = document.querySelector(`[data-note-id="${noteId}"] .text-gray-800`);
if (noteElement) {
noteElement.textContent = newContent;
}
}
console.log('✅ 메모 업데이트 완료');
} catch (error) {
console.error('❌ 메모 업데이트 실패:', error);
throw error;
}
}
/**
* 텍스트 오프셋 계산
*/
@@ -729,13 +862,70 @@ class HighlightManager {
return colorNames[color] || '기타';
}
/**
* 날짜 포맷팅 (상세)
*/
formatDate(dateString) {
if (!dateString) return '알 수 없음';
const date = new Date(dateString);
return date.toLocaleDateString('ko-KR', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
/**
* 날짜 포맷팅 (간단)
*/
formatShortDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
const now = new Date();
const diffTime = Math.abs(now - date);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays === 1) {
return '오늘';
} else if (diffDays === 2) {
return '어제';
} else if (diffDays <= 7) {
return `${diffDays - 1}일 전`;
} else {
return date.toLocaleDateString('ko-KR', {
month: 'short',
day: 'numeric'
});
}
}
/**
* 하이라이트 툴팁 표시
*/
showHighlightTooltip(clickedHighlight, element) {
async showHighlightTooltip(clickedHighlight, element) {
// 기존 말풍선 제거
this.hideTooltip();
// 메모 데이터 다시 로드 (최신 상태 보장)
console.log('📝 하이라이트 툴팁용 메모 로드 시작...');
const documentId = window.documentViewerInstance.documentId;
const contentType = window.documentViewerInstance.contentType;
console.log('📝 메모 로드 파라미터:', { documentId, contentType });
console.log('📝 기존 메모 개수:', this.notes ? this.notes.length : 'undefined');
await this.loadNotes(documentId, contentType);
console.log('📝 메모 로드 완료:', this.notes.length, '개');
console.log('📝 로드된 메모 상세:', this.notes.map(n => ({
id: n.id,
highlight_id: n.highlight_id,
content: n.content,
created_at: n.created_at
})));
// 동일한 범위의 모든 하이라이트 찾기
const overlappingHighlights = this.findOverlappingHighlights(clickedHighlight);
const colorGroups = this.groupHighlightsByColor(overlappingHighlights);
@@ -754,9 +944,19 @@ class HighlightManager {
let tooltipHTML = `
<div class="mb-4">
<div class="text-sm text-gray-600 mb-2">선택된 텍스트</div>
<div class="font-medium text-gray-900 bg-gray-100 px-3 py-2 rounded border-l-4 border-blue-500">
"${longestText}"
<div class="flex items-center justify-between mb-3">
<div class="text-lg font-semibold text-blue-800 flex items-center">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
하이라이트 정보
</div>
<div class="text-xs text-gray-500">${overlappingHighlights.length}개 하이라이트</div>
</div>
<div class="font-medium text-gray-900 bg-blue-50 px-4 py-3 rounded-lg border-l-4 border-blue-500">
<div class="text-sm text-blue-700 mb-1">선택된 텍스트</div>
<div class="text-base">"${longestText}"</div>
</div>
</div>
`;
@@ -766,39 +966,84 @@ class HighlightManager {
Object.entries(colorGroups).forEach(([color, highlights]) => {
const colorName = this.getColorName(color);
const allNotes = highlights.flatMap(h =>
this.notes.filter(note => note.highlight_id === h.id)
);
// 각 하이라이트에 대한 메모 찾기 (디버깅 로그 추가)
const allNotes = highlights.flatMap(h => {
const notesForHighlight = this.notes.filter(note => note.highlight_id === h.id);
console.log(`📝 하이라이트 ${h.id}에 대한 메모:`, notesForHighlight.length, '개');
if (notesForHighlight.length > 0) {
console.log('📝 메모 내용:', notesForHighlight.map(n => n.content));
}
return notesForHighlight;
});
console.log(`🎨 ${colorName} 하이라이트의 총 메모:`, allNotes.length, '개');
const createdDate = highlights[0].created_at ? this.formatDate(highlights[0].created_at) : '알 수 없음';
tooltipHTML += `
<div class="border rounded-lg p-3" style="border-left: 4px solid ${color}">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded" style="background-color: ${color}"></div>
<span class="text-sm font-medium text-gray-700">${colorName} 메모 (${allNotes.length})</span>
<div class="border rounded-lg p-4 bg-gradient-to-r from-gray-50 to-gray-100" style="border-left: 4px solid ${color}">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full shadow-sm" style="background-color: ${color}"></div>
<div>
<span class="text-sm font-semibold text-gray-800">${colorName} 하이라이트</span>
<div class="text-xs text-gray-600">${createdDate} 생성</div>
</div>
</div>
<div class="flex items-center space-x-2">
<button onclick="window.documentViewerInstance.highlightManager.changeHighlightColor('${highlights[0].id}')"
class="text-xs bg-gray-500 text-white px-2 py-1 rounded hover:bg-gray-600 transition-colors"
title="색상 변경">
🎨
</button>
<button onclick="window.documentViewerInstance.highlightManager.showAddNoteForm('${highlights[0].id}')"
class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 transition-colors">
📝 메모 추가
</button>
</div>
<button onclick="window.documentViewerInstance.highlightManager.showAddNoteForm('${highlights[0].id}')"
class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600">
+ 추가
</button>
</div>
<div id="notes-list-${highlights[0].id}" class="space-y-2 max-h-32 overflow-y-auto">
${allNotes.length > 0 ?
allNotes.map(note => `
<div class="bg-gray-50 p-2 rounded text-sm">
<div class="text-gray-800">${note.content}</div>
<div class="text-xs text-gray-500 mt-1 flex justify-between items-center">
<span>${this.formatShortDate(note.created_at)} · Administrator</span>
<button onclick="window.documentViewerInstance.highlightManager.deleteNote('${note.id}')"
class="text-red-600 hover:text-red-800">
삭제
</button>
<!-- 메모 목록 -->
<div class="mb-3">
<div class="text-sm font-medium text-gray-700 mb-2 flex items-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 0v1a1 1 0 102 0V3a2 2 0 012 2v6.586A2 2 0 0115.414 13L13 15.586A2 2 0 0111.586 16H6a2 2 0 01-2-2V5zm8 4a1 1 0 10-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path>
</svg>
메모 (${allNotes.length}개)
</div>
<div id="notes-list-${highlights[0].id}" class="space-y-2 max-h-40 overflow-y-auto">
${allNotes.length > 0 ?
allNotes.map(note => `
<div class="bg-white p-3 rounded-lg border shadow-sm group">
<div class="text-gray-800 text-sm leading-relaxed">${note.content}</div>
<div class="text-xs text-gray-500 mt-2 flex justify-between items-center">
<span class="flex items-center">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
</svg>
${this.formatShortDate(note.created_at)}
</span>
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
<button onclick="window.documentViewerInstance.highlightManager.editNote('${note.id}', '${note.content.replace(/'/g, "\\'")}');"
class="text-blue-600 hover:text-blue-800 mr-2 text-xs"
title="메모 편집">
✏️
</button>
<button onclick="window.documentViewerInstance.highlightManager.deleteNote('${note.id}')"
class="text-red-600 hover:text-red-800 text-xs"
title="메모 삭제">
🗑️
</button>
</div>
</div>
</div>
</div>
`).join('') :
'<div class="text-sm text-gray-500 italic">메모가 없습니다</div>'
}
`).join('') :
'<div class="text-sm text-gray-500 italic bg-white p-3 rounded-lg border">메모가 없습니다. 위의 "📝 메모 추가" 버튼을 클릭해보세요!</div>'
}
</div>
</div>
</div>
`;
@@ -806,13 +1051,36 @@ class HighlightManager {
tooltipHTML += '</div>';
// 하이라이트 삭제 버튼
// 하이라이트 관리 버튼들
tooltipHTML += `
<div class="mt-4 pt-3 border-t">
<button onclick="window.documentViewerInstance.highlightManager.deleteHighlight('${clickedHighlight.id}')"
class="text-xs bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
하이라이트 삭제
</button>
<div class="mt-4 pt-4 border-t border-gray-200">
<div class="flex items-center justify-between">
<div class="text-sm font-medium text-gray-700 flex items-center">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
</svg>
하이라이트 관리
</div>
<div class="flex items-center space-x-2">
<button onclick="window.documentViewerInstance.highlightManager.duplicateHighlight('${clickedHighlight.id}')"
class="text-xs bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600 transition-colors flex items-center"
title="하이라이트 복사">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
복사
</button>
<button onclick="window.documentViewerInstance.highlightManager.deleteHighlightWithConfirm('${clickedHighlight.id}')"
class="text-xs bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition-colors flex items-center"
title="하이라이트 삭제">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
삭제
</button>
</div>
</div>
</div>
`;

293
frontend/static/js/viewer/features/link-manager.js
View File

@@ -295,16 +295,36 @@ class LinkManager {
box-sizing: border-box !important;
`;
// 클릭 이벤트 추가 (겹치는 요소 감지)
span.addEventListener('click', (e) => {
// 클릭 이벤트 추가 (통합 툴팁 사용)
span.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
// 겹치는 하이라이트나 백링크가 있는지 확인
const overlappingElements = this.findOverlappingElements(span);
if (overlappingElements.length > 0) {
this.showOverlapMenu(e, span, overlappingElements, 'link');
console.log('🔗 링크 클릭됨:', {
text: span.textContent,
linkId: link.id,
classList: Array.from(span.classList)
});
// 링크, 백링크, 하이라이트 모두 찾기
const overlappingElements = window.documentViewerInstance.getOverlappingElements(span);
const totalElements = overlappingElements.links.length + overlappingElements.backlinks.length + overlappingElements.highlights.length;
console.log('🎯 링크 클릭 분석:', {
links: overlappingElements.links.length,
backlinks: overlappingElements.backlinks.length,
highlights: overlappingElements.highlights.length,
total: totalElements,
selectedText: overlappingElements.selectedText
});
if (totalElements > 1) {
// 통합 툴팁 표시 (링크 + 백링크 + 하이라이트)
console.log('🎨 통합 툴팁 표시 시작 (링크에서)');
await window.documentViewerInstance.showUnifiedTooltip(overlappingElements, span);
} else {
// 단일 링크 툴팁
console.log('🔗 단일 링크 툴팁 표시');
this.showLinkTooltip(link, span);
}
});
@@ -503,16 +523,36 @@ class LinkManager {
box-sizing: border-box !important;
`;
// 클릭 이벤트 추가 (겹치는 요소 감지)
span.addEventListener('click', (e) => {
// 클릭 이벤트 추가 (통합 툴팁 사용)
span.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
// 겹치는 하이라이트나 링크가 있는지 확인
const overlappingElements = this.findOverlappingElements(span);
if (overlappingElements.length > 0) {
this.showOverlapMenu(e, span, overlappingElements, 'backlink');
console.log('🔙 백링크 클릭됨:', {
text: span.textContent,
backlinkId: backlink.id,
classList: Array.from(span.classList)
});
// 링크, 백링크, 하이라이트 모두 찾기
const overlappingElements = window.documentViewerInstance.getOverlappingElements(span);
const totalElements = overlappingElements.links.length + overlappingElements.backlinks.length + overlappingElements.highlights.length;
console.log('🔙 백링크 클릭 분석:', {
links: overlappingElements.links.length,
backlinks: overlappingElements.backlinks.length,
highlights: overlappingElements.highlights.length,
total: totalElements,
selectedText: overlappingElements.selectedText
});
if (totalElements > 1) {
// 통합 툴팁 표시 (링크 + 백링크 + 하이라이트)
console.log('🎯 통합 툴팁 표시 시작 (백링크에서)');
await window.documentViewerInstance.showUnifiedTooltip(overlappingElements, span);
} else {
// 단일 백링크 툴팁
console.log('🔙 단일 백링크 툴팁 표시');
this.showBacklinkTooltip(backlink, span);
}
});
@@ -530,7 +570,160 @@ class LinkManager {
}
/**
* 링크 툴팁 표시
* 겹치는 링크들 찾기
*/
getOverlappingLinks(clickedElement) {
const clickedLinkId = clickedElement.getAttribute('data-link-id');
const clickedText = clickedElement.textContent;
console.log('🔍 겹치는 링크 찾기:', {
clickedLinkId: clickedLinkId,
clickedText: clickedText,
totalLinks: this.documentLinks.length
});
// 동일한 텍스트 범위에 있는 모든 링크 찾기
const overlappingLinks = this.documentLinks.filter(link => {
// 클릭된 링크와 텍스트가 겹치는지 확인
const linkElement = document.querySelector(`[data-link-id="${link.id}"]`);
if (!linkElement) return false;
// 텍스트가 겹치는지 확인 (간단한 방법: 텍스트 내용 비교)
const isOverlapping = linkElement.textContent === clickedText;
if (isOverlapping) {
console.log('✅ 겹치는 링크 발견:', {
id: link.id,
text: linkElement.textContent,
target: link.target_document_title
});
}
return isOverlapping;
});
console.log(`🔍 총 ${overlappingLinks.length}개의 겹치는 링크 발견`);
return overlappingLinks;
}
/**
* 다중 링크 툴팁 표시
*/
showMultiLinkTooltip(links, element, selectedText) {
console.log('🔗 다중 링크 툴팁 표시:', links.length, '개');
// 기존 툴팁 제거
this.hideTooltip();
const tooltip = document.createElement('div');
tooltip.id = 'link-tooltip';
tooltip.className = 'absolute bg-white border border-gray-300 rounded-lg shadow-lg p-4 z-50 max-w-lg';
tooltip.style.minWidth = '400px';
tooltip.style.maxHeight = '80vh';
tooltip.style.overflowY = 'auto';
let tooltipHTML = `
<div class="mb-4">
<div class="text-sm text-gray-600 mb-2">선택된 텍스트</div>
<div class="font-medium text-gray-900 bg-gray-100 px-3 py-2 rounded border-l-4 border-purple-500">
"${selectedText}"
</div>
</div>
`;
if (links.length > 1) {
tooltipHTML += `
<div class="mb-4">
<div class="text-sm font-medium text-gray-700 mb-2 flex items-center">
<svg class="w-4 h-4 mr-2 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
</svg>
연결된 링크 (${links.length}개)
</div>
</div>
`;
}
tooltipHTML += '<div class="space-y-3">';
links.forEach((link, index) => {
const createdDate = link.created_at ? this.formatDate(link.created_at) : '알 수 없음';
const isNote = link.target_content_type === 'note';
const iconClass = isNote ? 'text-green-600' : 'text-purple-600';
const bgClass = isNote ? 'hover:bg-green-50' : 'hover:bg-purple-50';
tooltipHTML += `
<div class="border rounded-lg p-3 ${bgClass} transition-colors duration-200 relative group">
<div class="flex items-start justify-between">
<div class="flex-1 cursor-pointer" onclick="window.documentViewerInstance.navigateToLink(${JSON.stringify(link).replace(/"/g, '&quot;')})">
<div class="flex items-center mb-2">
<svg class="w-4 h-4 mr-2 ${iconClass}" fill="currentColor" viewBox="0 0 20 20">
${isNote ?
'<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 0v1a1 1 0 102 0V3a2 2 0 012 2v6.586A2 2 0 0115.414 13L13 15.586A2 2 0 0111.586 16H6a2 2 0 01-2-2V5zm8 4a1 1 0 10-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path>' :
'<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>'
}
</svg>
<span class="font-medium ${iconClass}">${link.target_document_title}</span>
</div>
<!-- 연결된 텍스트 정보 -->
${link.target_text ? `
<div class="mb-2 p-2 bg-gray-50 rounded border-l-3 ${isNote ? 'border-green-400' : 'border-purple-400'}">
<div class="text-xs ${isNote ? 'text-green-700' : 'text-purple-700'} mb-1">연결된 텍스트</div>
<div class="text-sm text-gray-800 font-medium">"${link.target_text}"</div>
</div>
` : ''}
${link.description ? `
<div class="mb-2 p-2 bg-blue-50 rounded border-l-3 border-blue-400">
<div class="text-xs text-blue-700 mb-1">링크 설명</div>
<div class="text-sm text-blue-800">${link.description}</div>
</div>
` : ''}
<div class="text-xs text-gray-500 flex items-center justify-between">
<span class="flex items-center">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
</svg>
${link.link_type === 'text_fragment' ? '텍스트 조각 링크' : '문서 링크'}
</span>
<span>${createdDate}</span>
</div>
</div>
<!-- 삭제 버튼 -->
<button onclick="event.stopPropagation(); window.documentViewerInstance.deleteLinkWithConfirm('${link.id}', '${link.target_document_title.replace(/'/g, "\\'")}');"
class="ml-3 p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors duration-200 opacity-0 group-hover:opacity-100"
title="링크 삭제">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
</button>
</div>
</div>
`;
});
tooltipHTML += '</div>';
tooltip.innerHTML = tooltipHTML;
// 위치 계산 및 표시
const rect = element.getBoundingClientRect();
tooltip.style.top = (rect.bottom + window.scrollY + 10) + 'px';
tooltip.style.left = Math.max(10, rect.left + window.scrollX - 200) + 'px';
document.body.appendChild(tooltip);
// 외부 클릭 시 툴팁 숨기기
setTimeout(() => {
document.addEventListener('click', this.handleTooltipOutsideClick.bind(this));
}, 100);
}
/**
* 링크 툴팁 표시 (단일 링크용)
*/
showLinkTooltip(link, element) {
this.hideTooltip();
@@ -645,9 +838,28 @@ class LinkManager {
<div class="text-xs text-gray-500">${createdDate}</div>
</div>
<div class="font-medium text-orange-900 bg-orange-50 px-4 py-3 rounded-lg border-l-4 border-orange-500">
<div class="text-sm text-orange-700 mb-1">현재 문서의 텍스트</div>
<div class="text-base">"${backlink.target_text || backlink.selected_text}"</div>
<!-- 백링크 설명 -->
<div class="mb-4 p-3 bg-blue-50 rounded-lg border-l-4 border-blue-400">
<div class="text-sm text-blue-800">
<strong>💡 백링크란?</strong><br>
다른 문서에서 현재 문서의 이 텍스트를 참조하는 연결입니다.<br>
클릭하면 참조하는 문서로 이동할 수 있습니다.
</div>
</div>
<!-- 현재 문서의 참조된 텍스트 (강화된 정보) -->
<div class="mb-4">
<div class="font-medium text-orange-900 bg-orange-50 px-4 py-3 rounded-lg border-l-4 border-orange-500">
<div class="text-sm text-orange-700 mb-1">현재 문서의 참조된 텍스트</div>
<div class="text-base font-semibold">"${backlink.target_text || backlink.selected_text}"</div>
</div>
${backlink.target_text && backlink.target_text !== backlink.selected_text ? `
<div class="mt-2 p-3 bg-gray-50 rounded-lg border-l-4 border-gray-400">
<div class="text-xs text-gray-600 mb-1">원본 링크에서 선택한 텍스트</div>
<div class="text-sm text-gray-800">"${backlink.selected_text}"</div>
</div>
` : ''}
</div>
</div>
@@ -656,28 +868,47 @@ class LinkManager {
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
참조하는 문서
이 텍스트를 참조하는 문서
</div>
<div class="bg-gradient-to-r from-orange-50 to-orange-100 p-4 rounded-lg border">
<div class="font-semibold text-gray-900 mb-2">${backlink.source_document_title}</div>
<div class="bg-white p-3 rounded border-l-3 border-orange-400">
<div class="text-xs text-gray-600 mb-1">원본 텍스트</div>
<div class="text-sm text-gray-800">"${backlink.selected_text}"</div>
</div>
${backlink.description ? `
<div class="mt-3 p-3 bg-orange-50 rounded border-l-3 border-orange-300">
<div class="text-xs text-orange-700 mb-1">설명</div>
<div class="text-sm text-orange-800">${backlink.description}</div>
<div class="cursor-pointer" onclick="window.documentViewerInstance.navigateToBacklink(${JSON.stringify(backlink).replace(/"/g, '&quot;')})">
<div class="font-semibold text-gray-900 mb-3 flex items-center">
<svg class="w-4 h-4 mr-2 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
</svg>
${backlink.source_document_title}
</div>
` : ''}
<!-- 원본 링크 정보 (강화된 표시) -->
<div class="space-y-3">
<div class="bg-white p-3 rounded border-l-3 border-orange-400">
<div class="text-xs text-gray-600 mb-1">원본 문서에서 링크로 설정한 텍스트</div>
<div class="text-sm text-gray-800 font-medium">"${backlink.selected_text}"</div>
</div>
${backlink.target_text ? `
<div class="bg-white p-3 rounded border-l-3 border-blue-400">
<div class="text-xs text-blue-600 mb-1">현재 문서에서 연결된 구체적인 텍스트</div>
<div class="text-sm text-blue-800 font-medium">"${backlink.target_text}"</div>
</div>
` : ''}
${backlink.description ? `
<div class="bg-white p-3 rounded border-l-3 border-green-400">
<div class="text-xs text-green-600 mb-1">링크 설명</div>
<div class="text-sm text-green-800">${backlink.description}</div>
</div>
` : ''}
</div>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-3 mb-4">
<div class="flex justify-center mb-4">
<button onclick="window.documentViewerInstance.linkManager.navigateToSourceDocument('${backlink.source_document_id}', ${JSON.stringify(backlink).replace(/"/g, '&quot;')})"
class="flex-1 bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-6 py-2 rounded-lg hover:from-orange-600 hover:to-orange-700 transition-all duration-200 flex items-center justify-center font-medium shadow-md hover:shadow-lg">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2M7 7l10 10M17 7v4h-4"></path>
</svg>
원본 문서로 이동
</button>