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)
101 lines
3.6 KiB
HTML
101 lines
3.6 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>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
margin: 40px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
border-bottom: 3px solid #007bff;
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 30px;
|
|
}
|
|
p {
|
|
margin-bottom: 15px;
|
|
text-align: justify;
|
|
}
|
|
.highlight {
|
|
background-color: #fff3cd;
|
|
padding: 15px;
|
|
border-left: 4px solid #ffc107;
|
|
margin: 20px 0;
|
|
}
|
|
.code {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
font-family: 'Courier New', monospace;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Document Server 테스트 문서</h1>
|
|
|
|
<p>이 문서는 Document Server의 업로드 및 뷰어 기능을 테스트하기 위한 샘플 문서입니다.
|
|
하이라이트, 메모, 책갈피 등의 기능을 테스트할 수 있습니다.</p>
|
|
|
|
<h2>주요 기능</h2>
|
|
<p>Document Server는 다음과 같은 기능을 제공합니다:</p>
|
|
<ul>
|
|
<li><strong>문서 업로드</strong>: HTML 및 PDF 파일 업로드</li>
|
|
<li><strong>스마트 하이라이트</strong>: 텍스트 선택 및 하이라이트</li>
|
|
<li><strong>연결된 메모</strong>: 하이라이트에 메모 추가</li>
|
|
<li><strong>책갈피</strong>: 중요한 위치 저장</li>
|
|
<li><strong>통합 검색</strong>: 문서 내용 및 메모 검색</li>
|
|
</ul>
|
|
|
|
<div class="highlight">
|
|
<strong>중요:</strong> 이 부분은 하이라이트 테스트를 위한 중요한 내용입니다.
|
|
사용자는 이 텍스트를 선택하여 하이라이트를 추가하고 메모를 작성할 수 있습니다.
|
|
</div>
|
|
|
|
<h2>기술 스택</h2>
|
|
<p>이 프로젝트는 다음 기술들을 사용하여 구축되었습니다:</p>
|
|
|
|
<div class="code">
|
|
<strong>백엔드:</strong> FastAPI, SQLAlchemy, PostgreSQL<br>
|
|
<strong>프론트엔드:</strong> HTML5, CSS3, JavaScript, Alpine.js<br>
|
|
<strong>인프라:</strong> Docker, Nginx
|
|
</div>
|
|
|
|
<h2>사용 방법</h2>
|
|
<p>문서를 읽으면서 다음과 같은 작업을 수행할 수 있습니다:</p>
|
|
|
|
<ol>
|
|
<li>텍스트를 선택하여 하이라이트 추가</li>
|
|
<li>하이라이트에 메모 작성</li>
|
|
<li>중요한 위치에 책갈피 설정</li>
|
|
<li>검색 기능을 통해 내용 찾기</li>
|
|
</ol>
|
|
|
|
<p>이 문서는 업로드 테스트가 완료되면 뷰어에서 확인할 수 있으며,
|
|
모든 annotation 기능을 테스트해볼 수 있습니다.</p>
|
|
|
|
<div class="highlight">
|
|
<strong>테스트 완료:</strong> 이 문서가 정상적으로 표시되면 업로드 기능이
|
|
올바르게 작동하는 것입니다.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|