43e7466195
- 메인 컨테이너 padding-top을 pt-4에서 pt-20으로 증가 - 드롭다운 z-index를 z-[60]으로 설정하여 헤더보다 높은 우선순위 부여 - 스토리 선택 드롭다운이 정상적으로 작동하도록 수정 - 디버깅용 코드 정리
322 lines
15 KiB
HTML
322 lines
15 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">
|
|
|
|
<!-- 헤더 로더 -->
|
|
<script src="static/js/header-loader.js"></script>
|
|
<style>
|
|
/* 목차 스타일 */
|
|
.toc-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.toc-item:hover {
|
|
background-color: #f8fafc;
|
|
border-left: 4px solid #3b82f6;
|
|
padding-left: 16px;
|
|
}
|
|
.toc-number {
|
|
min-width: 2rem;
|
|
}
|
|
.story-content {
|
|
line-height: 1.8;
|
|
}
|
|
.chapter-divider {
|
|
background: linear-gradient(90deg, #e5e7eb 0%, #9ca3af 50%, #e5e7eb 100%);
|
|
height: 1px;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* 프린트 스타일 */
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
.story-content { font-size: 12pt; line-height: 1.6; }
|
|
.toc-item { break-inside: avoid; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50" x-data="storyViewApp()" x-init="init()">
|
|
<!-- 공통 헤더 컨테이너 -->
|
|
<div id="header-container"></div>
|
|
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="min-h-screen pt-20" x-show="currentUser">
|
|
<div class="max-w-7xl 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-4">
|
|
<select
|
|
x-model="selectedTreeId"
|
|
@change="loadStory($event.target.value)"
|
|
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer relative z-[60]"
|
|
>
|
|
<option value="">📚 스토리 선택</option>
|
|
<template x-for="tree in userTrees" :key="tree.id">
|
|
<option :value="tree.id" x-text="`📖 ${tree.title}`"></option>
|
|
</template>
|
|
</select>
|
|
|
|
|
|
<div x-show="selectedTree" class="text-sm text-gray-600">
|
|
<span x-text="`총 ${canonicalNodes.length}개 챕터`"></span>
|
|
<span class="mx-2">•</span>
|
|
<span x-text="`${totalWords}단어`"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 액션 버튼들 -->
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
@click="exportStory()"
|
|
class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
|
|
>
|
|
<i class="fas fa-download mr-1"></i> 내보내기
|
|
</button>
|
|
<button
|
|
@click="printStory()"
|
|
class="px-3 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 text-sm"
|
|
>
|
|
<i class="fas fa-print mr-1"></i> 인쇄
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스토리 없음 상태 -->
|
|
<div x-show="!selectedTree" class="bg-white rounded-lg shadow-sm p-12 text-center">
|
|
<i class="fas fa-book-open text-6xl text-gray-300 mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">스토리를 선택하세요</h3>
|
|
<p class="text-gray-500">위에서 트리를 선택하면 목차가 표시됩니다</p>
|
|
</div>
|
|
|
|
<!-- 정사 노드 없음 상태 -->
|
|
<div x-show="selectedTree && canonicalNodes.length === 0" class="bg-white rounded-lg shadow-sm p-12 text-center">
|
|
<i class="fas fa-route text-6xl text-gray-300 mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">스토리 노드가 없습니다</h3>
|
|
<p class="text-gray-500 mb-4">트리 에디터에서 노드들을 정사로 설정해주세요</p>
|
|
<a href="memo-tree.html" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
|
|
<i class="fas fa-sitemap mr-2"></i> 트리 에디터로 가기
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 스토리 컨텐츠 -->
|
|
<div x-show="selectedTree && canonicalNodes.length > 0" class="space-y-6">
|
|
|
|
<!-- 스토리 헤더 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2" x-text="selectedTree?.title"></h1>
|
|
<p class="text-gray-600 mb-4" x-text="selectedTree?.description || '소설 설명이 없습니다'"></p>
|
|
<div class="flex items-center space-x-4 text-sm text-gray-500">
|
|
<span><i class="fas fa-calendar mr-1"></i> <span x-text="formatDate(selectedTree?.created_at)"></span></span>
|
|
<span><i class="fas fa-edit mr-1"></i> <span x-text="formatDate(selectedTree?.updated_at)"></span></span>
|
|
<span><i class="fas fa-list-ol mr-1"></i> <span x-text="`${canonicalNodes.length}개 챕터`"></span></span>
|
|
<span><i class="fas fa-font mr-1"></i> <span x-text="`${totalWords}단어`"></span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 목차 뷰 -->
|
|
<div class="bg-white rounded-lg shadow-sm">
|
|
<div class="p-6 border-b">
|
|
<h2 class="text-xl font-semibold text-gray-900 flex items-center">
|
|
<i class="fas fa-list mr-2"></i> 목차
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-2">
|
|
<template x-for="(node, index) in canonicalNodes" :key="node.id">
|
|
<div
|
|
class="toc-item flex items-center p-3 rounded-lg cursor-pointer"
|
|
@click="openStoryReader(node.id, index)"
|
|
>
|
|
<span class="toc-number text-sm font-medium text-gray-500 mr-3" x-text="`${index + 1}.`"></span>
|
|
<div class="flex-1">
|
|
<h3 class="font-medium text-gray-900" x-text="node.title"></h3>
|
|
<div class="flex items-center space-x-3 text-xs text-gray-500 mt-1">
|
|
<span x-text="getNodeTypeLabel(node.node_type)"></span>
|
|
<span x-show="node.word_count > 0" x-text="`${node.word_count}단어`"></span>
|
|
<span x-text="getStatusLabel(node.status)"></span>
|
|
</div>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-gray-400"></i>
|
|
</div>
|
|
</template>
|
|
</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="editingNode">
|
|
<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="editingNode.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>
|
|
|
|
<!-- 내용 편집 -->
|
|
<div class="flex-1 flex flex-col">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">내용</label>
|
|
<textarea
|
|
x-model="editingNode.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"
|
|
placeholder="챕터 내용을 입력하세요..."
|
|
></textarea>
|
|
</div>
|
|
</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()"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
|
>
|
|
<i class="fas fa-save mr-2"></i> 저장
|
|
</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 초기화됨');
|
|
});
|
|
|
|
// 스크립트 순차 로딩
|
|
(async () => {
|
|
try {
|
|
console.log('🚀 스크립트 로딩 시작...');
|
|
|
|
await loadScript('static/js/api.js?v=2025012627');
|
|
console.log('✅ API 스크립트 로드 완료');
|
|
|
|
await loadScript('static/js/story-view.js?v=2025012627');
|
|
console.log('✅ Story View 스크립트 로드 완료');
|
|
|
|
// Alpine.js 로드 전에 함수 등록 확인
|
|
console.log('🔍 storyViewApp 함수 확인:', typeof window.storyViewApp);
|
|
|
|
// 모든 스크립트 로드 완료 후 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 로드 완료');
|
|
|
|
// Alpine.js 초기화 확인
|
|
setTimeout(() => {
|
|
console.log('🔍 Alpine 객체 확인:', typeof Alpine);
|
|
console.log('🔍 Alpine 초기화 상태:', Alpine ? 'OK' : 'FAILED');
|
|
}, 500);
|
|
|
|
} catch (error) {
|
|
console.error('❌ 스크립트 로드 실패:', error);
|
|
console.error('❌ 에러 상세:', error.message);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|