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

✨ Feat: 프론트엔드 하이라이트 & 메모 시스템 완성

Browse Source 
- viewer.js: 텍스트 선택 → 하이라이트 생성 기능 구현
- viewer.js: 하이라이트 클릭 시 말풍선 UI로 메모 관리
- viewer.js: 다중 메모 지원, 실시간 메모 추가/삭제
- api.js: 하이라이트, 메모, 책갈피 API 함수 추가
- main.js: 문서 업로드 후 자동 새로고침, 뷰어 페이지 이동
- HTML: 인라인 SVG 파비콘 추가, 색상 버튼 개선

✅ 하이라이트 생성/삭제 기능 완성
✅ 메모 추가/편집 기능 완성
✅ 말풍선 UI 구현 완성
✅ Alpine.js 컴포넌트 간 안전한 통신
This commit is contained in:
Hyungi Ahn
2025-08-22 09:58:38 +09:00
parent edfabdac23
commit c0ea76dc2e
6 changed files with 478 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/viewer.html
View File

@@ -33,18 +33,22 @@
<div class="flex items-center space-x-2">
<!-- 하이라이트 색상 선택 -->
<div class="flex items-center space-x-1 bg-gray-100 rounded-lg p-1">
<button @click="selectedHighlightColor = '#FFFF00'"
<button @click="createHighlightWithColor('#FFFF00')"
:class="selectedHighlightColor === '#FFFF00' ? 'ring-2 ring-blue-500' : ''"
class="w-8 h-8 bg-yellow-300 rounded border-2 border-white"></button>
<button @click="selectedHighlightColor = '#90EE90'"
class="w-8 h-8 bg-yellow-300 rounded border-2 border-white"
title="노란색 하이라이트"></button>
<button @click="createHighlightWithColor('#90EE90')"
:class="selectedHighlightColor === '#90EE90' ? 'ring-2 ring-blue-500' : ''"
class="w-8 h-8 bg-green-300 rounded border-2 border-white"></button>
<button @click="selectedHighlightColor = '#FFB6C1'"
class="w-8 h-8 bg-green-300 rounded border-2 border-white"
title="초록색 하이라이트"></button>
<button @click="createHighlightWithColor('#FFB6C1')"
:class="selectedHighlightColor === '#FFB6C1' ? 'ring-2 ring-blue-500' : ''"
class="w-8 h-8 bg-pink-300 rounded border-2 border-white"></button>
<button @click="selectedHighlightColor = '#87CEEB'"
class="w-8 h-8 bg-pink-300 rounded border-2 border-white"
title="분홍색 하이라이트"></button>
<button @click="createHighlightWithColor('#87CEEB')"
:class="selectedHighlightColor === '#87CEEB' ? 'ring-2 ring-blue-500' : ''"
class="w-8 h-8 bg-blue-300 rounded border-2 border-white"></button>
class="w-8 h-8 bg-blue-300 rounded border-2 border-white"
title="파란색 하이라이트"></button>
</div>
<!-- 메모 패널 토글 -->