a42d193508
- 백엔드 API 완전 구현 (FastAPI + SQLAlchemy + PostgreSQL) - 사용자 인증 (JWT 토큰 기반) - 문서 CRUD (업로드, 조회, 목록, 삭제) - 하이라이트, 메모, 책갈피 관리 - 태그 시스템 및 검색 기능 - Pydantic v2 호환성 수정 - 프론트엔드 완전 구현 (Alpine.js + Tailwind CSS) - 로그인/로그아웃 기능 - 문서 업로드 모달 (드래그앤드롭, 파일 검증) - 문서 목록 및 필터링 - 뷰어 페이지 (하이라이트, 메모, 책갈피 UI) - 실시간 목록 새로고침 - 시스템 안정성 개선 - Alpine.js 컴포넌트 간 안전한 통신 (이벤트 기반) - API 오류 처리 및 사용자 피드백 - 파비콘 추가로 404 오류 해결 - 포트 구성: Frontend(24100), Backend(24102), DB(24101), Redis(24103)
74 lines
3.7 KiB
HTML
74 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>테스트 문서</title>
|
|
</head>
|
|
<body>
|
|
<h1>Document Server 테스트 문서</h1>
|
|
|
|
<h2>1. 소개</h2>
|
|
<p>이 문서는 Document Server의 하이라이트 및 메모 기능을 테스트하기 위한 샘플 문서입니다.
|
|
텍스트를 선택하면 하이라이트를 추가할 수 있고, 하이라이트에 메모를 연결할 수 있습니다.</p>
|
|
|
|
<h2>2. 주요 기능</h2>
|
|
<ul>
|
|
<li><strong>스마트 하이라이트</strong>: 텍스트를 선택하면 하이라이트 버튼이 나타납니다</li>
|
|
<li><strong>연결된 메모</strong>: 하이라이트에 직접 메모를 추가할 수 있습니다</li>
|
|
<li><strong>메모 관리</strong>: 사이드 패널에서 모든 메모를 확인하고 관리할 수 있습니다</li>
|
|
<li><strong>책갈피</strong>: 중요한 위치에 책갈피를 추가하여 빠르게 이동할 수 있습니다</li>
|
|
<li><strong>통합 검색</strong>: 문서 내용과 메모를 함께 검색할 수 있습니다</li>
|
|
</ul>
|
|
|
|
<h2>3. 사용 방법</h2>
|
|
<h3>3.1 하이라이트 추가</h3>
|
|
<p>원하는 텍스트를 마우스로 드래그하여 선택하세요. 선택된 텍스트 아래에 "하이라이트" 버튼이 나타납니다.
|
|
버튼을 클릭하면 해당 텍스트가 하이라이트됩니다.</p>
|
|
|
|
<h3>3.2 메모 추가</h3>
|
|
<p>하이라이트를 생성할 때 메모를 함께 추가할 수 있습니다. 또는 기존 하이라이트를 클릭하여
|
|
메모를 추가하거나 편집할 수 있습니다.</p>
|
|
|
|
<h3>3.3 책갈피 사용</h3>
|
|
<p>상단 도구 모음의 "책갈피" 버튼을 클릭하여 책갈피 패널을 열고,
|
|
"현재 위치에 책갈피 추가" 버튼을 클릭하여 책갈피를 생성하세요.</p>
|
|
|
|
<h2>4. 고급 기능</h2>
|
|
<blockquote>
|
|
<p>이 부분은 인용문입니다. 중요한 내용을 강조할 때 사용됩니다.
|
|
이런 텍스트도 하이라이트하고 메모를 추가할 수 있습니다.</p>
|
|
</blockquote>
|
|
|
|
<h3>4.1 검색 기능</h3>
|
|
<p>상단의 검색창을 사용하여 문서 내용을 검색할 수 있습니다.
|
|
검색 결과는 노란색으로 하이라이트됩니다.</p>
|
|
|
|
<h3>4.2 태그 시스템</h3>
|
|
<p>메모에 태그를 추가하여 분류할 수 있습니다. 태그는 쉼표로 구분하여 입력하세요.
|
|
예: "중요, 질문, 아이디어"</p>
|
|
|
|
<h2>5. 결론</h2>
|
|
<p>Document Server는 HTML 문서를 효율적으로 관리하고 주석을 달 수 있는 강력한 도구입니다.
|
|
하이라이트, 메모, 책갈피 기능을 활용하여 문서를 더욱 효과적으로 활용해보세요.</p>
|
|
|
|
<hr>
|
|
|
|
<h2>6. 추가 테스트 내용</h2>
|
|
<p>이 섹션은 추가적인 테스트를 위한 내용입니다. 다양한 길이의 텍스트를 선택하여
|
|
하이라이트 기능이 올바르게 작동하는지 확인해보세요.</p>
|
|
|
|
<p><em>기울임체 텍스트</em>와 <strong>굵은 텍스트</strong>, 그리고
|
|
<code>코드 텍스트</code>도 모두 하이라이트할 수 있습니다.</p>
|
|
|
|
<ol>
|
|
<li>첫 번째 항목 - 이것도 하이라이트 가능</li>
|
|
<li>두 번째 항목 - 메모를 추가해보세요</li>
|
|
<li>세 번째 항목 - 책갈피를 만들어보세요</li>
|
|
</ol>
|
|
|
|
<p>마지막으로, 이 문서의 다양한 부분에 하이라이트와 메모를 추가한 후
|
|
메모 패널에서 어떻게 표시되는지 확인해보세요. 검색 기능도 테스트해보시기 바랍니다.</p>
|
|
</body>
|
|
</html>
|