hyungi/document-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f95f67364a77ef3bc783d7b5b06951fc08ce97a1
document-server/frontend/story-view.html
Hyungi Ahn f95f67364a feat: 소설 분기 시스템 및 트리 메모장 구현 
🌟 주요 기능:
- 트리 구조 메모장 시스템
- 소설 분기 관리 (정사 경로 설정)
- 중앙 배치 트리 다이어그램
- 정사 경로 목차 뷰
- 인라인 편집 기능

📚 백엔드:
- MemoTree, MemoNode 모델 추가
- 정사 경로 자동 순서 관리
- 분기점에서 하나만 선택 가능한 로직
- RESTful API 엔드포인트

🎨 프론트엔드:
- memo-tree.html: 트리 다이어그램 에디터
- story-view.html: 정사 경로 목차 뷰
- SVG 연결선으로 시각적 트리 표현
- Alpine.js 기반 반응형 UI
- Monaco Editor 통합

✨ 특별 기능:
- 정사 경로 황금색 배지 표시
- 확대/축소 및 패닝 지원
- 드래그 앤 드롭 준비
- 내보내기 및 인쇄 기능
- 인라인 편집 모달
2025-08-25 10:25:10 +09:00

390 lines
20 KiB
HTML
Raw Blame History

<!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">
<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()">
<!-- 헤더 -->
<header class="bg-white shadow-sm border-b no-print">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- 왼쪽: 로고 및 네비게이션 -->
<div class="flex items-center space-x-4">
<a href="index.html" class="flex items-center space-x-2">
<i class="fas fa-book text-blue-600 text-xl"></i>
<span class="text-xl font-bold text-gray-900">Document Server</span>
</a>
<span class="text-gray-400">|</span>
<nav class="flex space-x-4">
<a href="memo-tree.html" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
<i class="fas fa-sitemap mr-1"></i> 트리 에디터
</a>
<a href="story-view.html" class="bg-blue-100 text-blue-700 px-3 py-2 rounded-md text-sm font-medium">
<i class="fas fa-book-open mr-1"></i> 스토리 뷰
</a>
</nav>
</div>
<!-- 오른쪽: 사용자 정보 및 액션 -->
<div class="flex items-center space-x-4">
<div x-show="currentUser" class="flex items-center space-x-3">
<span class="text-sm text-gray-600" x-text="currentUser?.full_name || currentUser?.email"></span>
<button @click="logout()" class="text-sm text-gray-500 hover:text-gray-700">로그아웃</button>
</div>
<button x-show="!currentUser" @click="openLoginModal()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
로그인
</button>
</div>
</div>
</div>
</header>
<!-- 메인 컨테이너 -->
<div class="min-h-screen pt-4" 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(selectedTreeId)"
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<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="toggleView()"
class="px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm"
>
<i class="fas fa-eye mr-1"></i>
<span x-text="viewMode === 'toc' ? '전체보기' : '목차보기'"></span>
</button>
<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 x-show="viewMode === 'toc'" 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="scrollToChapter(node.id)"
>
<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 x-show="viewMode === 'full'" 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-book-open mr-2"></i> 전체 스토리
</h2>
</div>
<div class="story-content">
<template x-for="(node, index) in canonicalNodes" :key="node.id">
<div :id="`chapter-${node.id}`" class="chapter-section">
<!-- 챕터 헤더 -->
<div class="p-6 bg-gray-50 border-b">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-900 flex items-center">
<span class="text-blue-600 mr-2" x-text="`${index + 1}.`"></span>
<span x-text="node.title"></span>
</h3>
<div class="flex items-center space-x-3 text-sm 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>
<button
@click="editChapter(node)"
class="no-print px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded"
>
<i class="fas fa-edit mr-1"></i> 편집
</button>
</div>
</div>
<!-- 챕터 내용 -->
<div class="p-6">
<div x-show="node.content" class="prose max-w-none" x-html="formatContent(node.content)"></div>
<div x-show="!node.content" class="text-gray-400 italic text-center py-8">
이 챕터는 아직 내용이 없습니다
</div>
</div>
<!-- 챕터 구분선 -->
<div x-show="index < canonicalNodes.length - 1" class="chapter-divider"></div>
</div>
</template>
</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">
<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 {
await loadScript('static/js/api.js?v=2025012290');
console.log('✅ API 스크립트 로드 완료');
await loadScript('static/js/story-view.js?v=2025012295');
console.log('✅ Story View 스크립트 로드 완료');
// 모든 스크립트 로드 완료 후 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>
Reference in New Issue View Git Blame Copy Permalink