f221a5611c
주요 변경사항: - story-reader.html: pt-4 → pt-20 - pdf-manager.html: py-8 → pt-20 pb-8 - upload.html: py-8 → pt-20 pb-8 - index.html: py-8 → pt-20 pb-8 - search.html: py-8 → pt-20 pb-8 - memo-tree.html: pt-16 → pt-20 - notebooks.html: py-8 → pt-20 pb-8 - notes.html: py-8 → pt-20 pb-8 헤더(h-16, z-50)와의 충돌을 방지하기 위해 모든 페이지의 상단 여백을 pt-20(80px)으로 통일
360 lines
17 KiB
HTML
360 lines
17 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Monaco Editor -->
|
|
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
|
|
|
|
<!-- 헤더 로더 -->
|
|
<script src="static/js/header-loader.js"></script>
|
|
<style>
|
|
.story-content {
|
|
line-height: 1.8;
|
|
font-size: 16px;
|
|
}
|
|
.story-content p {
|
|
margin-bottom: 1.2em;
|
|
}
|
|
.story-content h1, .story-content h2, .story-content h3 {
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* 프린트 스타일 */
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
.story-content { font-size: 12pt; line-height: 1.6; }
|
|
}
|
|
|
|
/* 네비게이션 버튼 스타일 */
|
|
.nav-button {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.nav-button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50" x-data="storyReaderApp()" x-init="init()">
|
|
<!-- 공통 헤더 컨테이너 -->
|
|
<div id="header-container"></div>
|
|
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="min-h-screen pt-20" x-show="currentUser">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- 상단 네비게이션 바 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6 no-print">
|
|
<div class="flex items-center justify-between">
|
|
<!-- 왼쪽: 돌아가기 버튼 -->
|
|
<div class="flex items-center space-x-3">
|
|
<button
|
|
@click="goBackToStoryView()"
|
|
class="nav-button flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700"
|
|
>
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
목차로 돌아가기
|
|
</button>
|
|
|
|
<div class="text-sm text-gray-600" x-show="currentChapter">
|
|
<span x-text="`${currentChapterIndex + 1}/${totalChapters}`"></span>
|
|
<span class="mx-2">•</span>
|
|
<span x-text="currentChapter?.title"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오른쪽: 액션 버튼들 -->
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
@click="editChapter()"
|
|
class="nav-button px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm"
|
|
>
|
|
<i class="fas fa-edit mr-1"></i> 수정
|
|
</button>
|
|
<button
|
|
@click="printChapter()"
|
|
class="nav-button px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm"
|
|
>
|
|
<i class="fas fa-print mr-1"></i> 인쇄
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="loading" class="bg-white rounded-lg shadow-sm p-12 text-center">
|
|
<i class="fas fa-spinner fa-spin text-4xl text-gray-400 mb-4"></i>
|
|
<p class="text-gray-600">스토리를 불러오는 중...</p>
|
|
</div>
|
|
|
|
<!-- 에러 상태 -->
|
|
<div x-show="error" class="bg-white rounded-lg shadow-sm p-12 text-center">
|
|
<i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">오류가 발생했습니다</h3>
|
|
<p class="text-gray-600 mb-4" x-text="error"></p>
|
|
<button
|
|
@click="goBackToStoryView()"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
|
>
|
|
목차로 돌아가기
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 스토리 컨텐츠 -->
|
|
<div x-show="!loading && !error && currentChapter" class="space-y-6">
|
|
|
|
<!-- 챕터 헤더 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="text-center">
|
|
<div class="text-sm text-gray-500 mb-2">
|
|
<span x-text="`${currentChapterIndex + 1}장`"></span>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-4" x-text="currentChapter?.title"></h1>
|
|
<div class="flex items-center justify-center space-x-4 text-sm text-gray-500">
|
|
<span><i class="fas fa-tag mr-1"></i> <span x-text="getNodeTypeLabel(currentChapter?.node_type)"></span></span>
|
|
<span x-show="currentChapter?.word_count > 0"><i class="fas fa-font mr-1"></i> <span x-text="`${currentChapter?.word_count}단어`"></span></span>
|
|
<span><i class="fas fa-flag mr-1"></i> <span x-text="getStatusLabel(currentChapter?.status)"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 챕터 내용 -->
|
|
<div class="bg-white rounded-lg shadow-sm">
|
|
<div class="p-8">
|
|
<div x-show="currentChapter?.content" class="story-content prose max-w-none" x-html="formatContent(currentChapter?.content)"></div>
|
|
<div x-show="!currentChapter?.content" class="text-gray-400 italic text-center py-16">
|
|
<i class="fas fa-file-alt text-4xl mb-4"></i>
|
|
<p>이 챕터는 아직 내용이 없습니다</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 하단 네비게이션 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6 no-print">
|
|
<div class="flex items-center justify-between">
|
|
<!-- 이전 챕터 -->
|
|
<div class="flex-1">
|
|
<button
|
|
x-show="hasPreviousChapter"
|
|
@click="goToPreviousChapter()"
|
|
class="nav-button flex items-center px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all"
|
|
>
|
|
<i class="fas fa-chevron-left mr-2"></i>
|
|
<div class="text-left">
|
|
<div class="text-xs text-gray-500">이전 챕터</div>
|
|
<div class="font-medium" x-text="previousChapter?.title"></div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 중앙: 목차로 돌아가기 -->
|
|
<div class="flex-shrink-0 mx-4">
|
|
<button
|
|
@click="goBackToStoryView()"
|
|
class="nav-button px-4 py-2 text-gray-600 hover:text-gray-800 text-sm"
|
|
>
|
|
<i class="fas fa-list mr-1"></i> 목차
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 다음 챕터 -->
|
|
<div class="flex-1 flex justify-end">
|
|
<button
|
|
x-show="hasNextChapter"
|
|
@click="goToNextChapter()"
|
|
class="nav-button flex items-center px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all"
|
|
>
|
|
<div class="text-right">
|
|
<div class="text-xs text-gray-500">다음 챕터</div>
|
|
<div class="font-medium" x-text="nextChapter?.title"></div>
|
|
</div>
|
|
<i class="fas fa-chevron-right ml-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로그인이 필요한 경우 -->
|
|
<div x-show="!currentUser" class="flex items-center justify-center min-h-screen">
|
|
<div class="text-center">
|
|
<i class="fas fa-lock text-6xl text-gray-300 mb-4"></i>
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">로그인이 필요합니다</h2>
|
|
<p class="text-gray-600 mb-6">스토리를 보려면 먼저 로그인해주세요</p>
|
|
<button @click="openLoginModal()" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
|
로그인하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 편집 모달 -->
|
|
<div x-show="showEditModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg w-full max-w-4xl mx-4 h-5/6 flex flex-col">
|
|
<div class="p-6 border-b">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-bold">챕터 편집</h2>
|
|
<button @click="cancelEdit()" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 p-6 overflow-hidden" x-show="editingChapter">
|
|
<div class="h-full flex flex-col space-y-4">
|
|
<!-- 제목 편집 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">제목</label>
|
|
<input
|
|
type="text"
|
|
x-model="editingChapter.title"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="챕터 제목을 입력하세요"
|
|
>
|
|
</div>
|
|
|
|
<!-- 내용 편집 (Textarea 방식) -->
|
|
<div class="flex-1 flex flex-col">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">내용</label>
|
|
<textarea
|
|
x-model="editingChapter.content"
|
|
class="flex-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-mono text-sm"
|
|
placeholder="챕터 내용을 입력하세요..."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로딩 상태 -->
|
|
<div x-show="!editingChapter" class="flex-1 p-6 flex items-center justify-center">
|
|
<div class="text-center text-gray-500">
|
|
<i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
|
|
<p>편집 준비 중...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 border-t bg-gray-50 flex justify-end space-x-3">
|
|
<button
|
|
@click="cancelEdit()"
|
|
class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
@click="saveEdit()"
|
|
:disabled="saving"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
<span x-show="!saving"><i class="fas fa-save mr-2"></i> 저장</span>
|
|
<span x-show="saving">저장 중...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로그인 모달 -->
|
|
<div x-show="showLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-6 w-96 max-w-md mx-4">
|
|
<h2 class="text-xl font-bold mb-4">로그인</h2>
|
|
<form @submit.prevent="handleLogin()">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
|
|
<input
|
|
type="email"
|
|
x-model="loginForm.email"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
|
|
<input
|
|
type="password"
|
|
x-model="loginForm.password"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
</div>
|
|
<div x-show="loginError" class="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
|
|
<span x-text="loginError"></span>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button
|
|
type="button"
|
|
@click="showLoginModal = false"
|
|
class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="loginLoading"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
<span x-show="!loginLoading">로그인</span>
|
|
<span x-show="loginLoading">로그인 중...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스크립트 로딩 -->
|
|
<script>
|
|
// 순차적 스크립트 로딩
|
|
async function loadScript(src) {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
// Alpine.js 초기화 이벤트 리스너
|
|
document.addEventListener('alpine:init', () => {
|
|
console.log('Alpine.js 초기화됨');
|
|
});
|
|
|
|
// Monaco Editor 초기화
|
|
function initMonaco() {
|
|
return new Promise((resolve) => {
|
|
require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs' } });
|
|
require(['vs/editor/editor.main'], function () {
|
|
console.log('✅ Monaco Editor 로드 완료');
|
|
resolve();
|
|
});
|
|
});
|
|
}
|
|
|
|
// 스크립트 순차 로딩
|
|
(async () => {
|
|
try {
|
|
// Monaco Editor 먼저 로드
|
|
await initMonaco();
|
|
|
|
await loadScript('static/js/api.js?v=2025012380');
|
|
console.log('✅ API 스크립트 로드 완료');
|
|
await loadScript('static/js/story-reader.js?v=2025012369');
|
|
console.log('✅ Story Reader 스크립트 로드 완료');
|
|
|
|
// 모든 스크립트 로드 완료 후 Alpine.js 로드
|
|
console.log('🚀 Alpine.js 로딩...');
|
|
await loadScript('https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js');
|
|
console.log('✅ Alpine.js 로드 완료');
|
|
} catch (error) {
|
|
console.error('❌ 스크립트 로드 실패:', error);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|