diff --git a/frontend/book-documents.html b/frontend/book-documents.html
new file mode 100644
index 0000000..8127b82
--- /dev/null
+++ b/frontend/book-documents.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>서적 문서 목록 - Document Server</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <style>
+        .line-clamp-2 {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .line-clamp-3 {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen" x-data="bookDocumentsApp()">
+    <!-- 헤더 -->
+    <div id="header-container"></div>
+
+    <!-- 메인 컨텐츠 -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- 뒤로가기 및 서적 정보 -->
+        <div class="mb-8">
+            <div class="flex items-center space-x-4 mb-4">
+                <button @click="goBack()" 
+                        class="flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
+                    <i class="fas fa-arrow-left mr-2"></i>목차로 돌아가기
+                </button>
+            </div>
+            
+            <div class="bg-white rounded-lg shadow-sm border p-6">
+                <div class="flex items-center mb-4">
+                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center mr-6">
+                        <i class="fas fa-book text-white text-2xl"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-2xl font-bold text-gray-900" x-text="bookInfo.title || '서적 미분류'"></h1>
+                        <p class="text-gray-600 mt-1" x-show="bookInfo.author" x-text="bookInfo.author"></p>
+                        <p class="text-sm text-gray-500 mt-2">
+                            <span x-text="documents.length"></span>개 문서
+                        </p>
+                    </div>
+                </div>
+                <p class="text-gray-600" x-show="bookInfo.description" x-text="bookInfo.description"></p>
+            </div>
+        </div>
+
+        <!-- 문서 목록 -->
+        <div class="bg-white rounded-lg shadow-sm border">
+            <div class="p-6 border-b border-gray-200">
+                <h2 class="text-lg font-semibold text-gray-900">문서 목록</h2>
+            </div>
+            
+            <!-- 로딩 상태 -->
+            <div x-show="loading" class="p-8 text-center">
+                <i class="fas fa-spinner fa-spin text-2xl text-gray-400 mb-2"></i>
+                <p class="text-gray-500">문서를 불러오는 중...</p>
+            </div>
+            
+            <!-- 문서 목록 -->
+            <div x-show="!loading && documents.length > 0" class="divide-y divide-gray-200">
+                <template x-for="doc in documents" :key="doc.id">
+                    <div class="p-6 hover:bg-gray-50 cursor-pointer transition-colors"
+                         @click="openDocument(doc.id)">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <h3 class="text-lg font-semibold text-gray-900 mb-2" x-text="doc.title"></h3>
+                                <p class="text-gray-600 text-sm mb-3 line-clamp-2" x-text="doc.description || '설명이 없습니다'"></p>
+                                
+                                <!-- 태그들 -->
+                                <div class="flex flex-wrap gap-1 mb-3" x-show="doc.tags && doc.tags.length > 0">
+                                    <template x-for="tag in (doc.tags || [])" :key="tag">
+                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full" x-text="tag"></span>
+                                    </template>
+                                </div>
+                                
+                                <div class="flex items-center text-sm text-gray-500 space-x-4">
+                                    <span class="flex items-center">
+                                        <i class="fas fa-calendar mr-1"></i>
+                                        <span x-text="formatDate(doc.created_at)"></span>
+                                    </span>
+                                    <span class="flex items-center">
+                                        <i class="fas fa-user mr-1"></i>
+                                        <span x-text="doc.uploader_name"></span>
+                                    </span>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center space-x-2 ml-4">
+                                <button @click.stop="editDocument(doc)" 
+                                        class="p-2 text-gray-400 hover:text-blue-600 transition-colors"
+                                        title="문서 수정">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button x-show="currentUser && currentUser.is_admin" 
+                                        @click.stop="deleteDocument(doc.id)" 
+                                        class="p-2 text-gray-400 hover:text-red-600 transition-colors"
+                                        title="문서 삭제">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                                <i class="fas fa-chevron-right text-gray-400"></i>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            
+            <!-- 빈 상태 -->
+            <div x-show="!loading && documents.length === 0" class="p-8 text-center">
+                <i class="fas fa-file-alt text-gray-400 text-4xl mb-4"></i>
+                <h3 class="text-lg font-medium text-gray-900 mb-2">문서가 없습니다</h3>
+                <p class="text-gray-500">이 서적에 등록된 문서가 없습니다</p>
+            </div>
+        </div>
+    </main>
+
+    <!-- JavaScript 파일들 -->
+    <script src="/static/js/api.js?v=2025012380"></script>
+    <script src="/static/js/auth.js?v=2025012351"></script>
+    <script src="/static/js/header-loader.js?v=2025012351"></script>
+    <script src="/static/js/book-documents.js?v=2025012371"></script>
+</body>
+</html>
diff --git a/frontend/cache-buster.html b/frontend/cache-buster.html
new file mode 100644
index 0000000..4fe5834
--- /dev/null
+++ b/frontend/cache-buster.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>캐시 무효화 - Document Server</title>
+    <script>
+        // 강제 캐시 무효화
+        const timestamp = new Date().getTime();
+        console.log('🔧 캐시 무효화 타임스탬프:', timestamp);
+        
+        // localStorage 캐시 정리
+        localStorage.removeItem('api_cache');
+        sessionStorage.clear();
+        
+        // 3초 후 업로드 페이지로 리다이렉트
+        setTimeout(() => {
+            window.location.href = `upload.html?t=${timestamp}`;
+        }, 3000);
+    </script>
+</head>
+<body style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif;">
+    <div style="text-align: center;">
+        <h1>🔧 캐시 무효화 중...</h1>
+        <p>잠시만 기다려주세요. 3초 후 업로드 페이지로 이동합니다.</p>
+        <div style="margin-top: 20px;">
+            <div style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto;"></div>
+        </div>
+    </div>
+    
+    <style>
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</body>
+</html>
diff --git a/frontend/components/header.html b/frontend/components/header.html
new file mode 100644
index 0000000..ff3b7fc
--- /dev/null
+++ b/frontend/components/header.html
@@ -0,0 +1,211 @@
+<!-- 공통 헤더 컴포넌트 -->
+<header class="header-modern fade-in">
+    <div class="max-w-full 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-2">
+                <i class="fas fa-book text-blue-600 text-xl"></i>
+                <h1 class="text-xl font-bold text-gray-900">Document Server</h1>
+            </div>
+            
+            <!-- 메인 네비게이션 - 2가지 기능만 -->
+            <nav class="flex space-x-8">
+                <!-- 문서 관리 시스템 -->
+                <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
+                    <a href="index.html" class="nav-link" id="doc-nav-link">
+                        <i class="fas fa-folder-open"></i>
+                        <span>문서 관리</span>
+                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                    </a>
+                    <div x-show="open" x-transition class="nav-dropdown">
+                        <a href="index.html" class="nav-dropdown-item" id="index-nav-item">
+                            <i class="fas fa-th-large mr-2 text-blue-500"></i>문서 관리
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- 메모장 시스템 -->
+                <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
+                    <a href="memo-tree.html" class="nav-link" id="memo-nav-link">
+                        <i class="fas fa-sitemap"></i>
+                        <span>메모장</span>
+                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                    </a>
+                    <div x-show="open" x-transition class="nav-dropdown">
+                        <a href="memo-tree.html" class="nav-dropdown-item" id="memo-tree-nav-item">
+                            <i class="fas fa-sitemap mr-2 text-purple-500"></i>트리 뷰
+                        </a>
+                        <a href="story-view.html" class="nav-dropdown-item" id="story-view-nav-item">
+                            <i class="fas fa-book-open mr-2 text-orange-500"></i>스토리 뷰
+                        </a>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- 사용자 메뉴 -->
+            <div class="flex items-center space-x-4">
+                <!-- 로그인/로그아웃 -->
+                <div class="flex items-center space-x-3" id="user-menu">
+                    <!-- 로그인된 사용자 -->
+                    <div class="hidden" id="logged-in-menu">
+                        <span class="text-sm text-gray-600" id="user-name">User</span>
+                        <button onclick="handleLogout()" class="btn-improved btn-secondary-improved text-sm">
+                            <i class="fas fa-sign-out-alt"></i> 로그아웃
+                        </button>
+                    </div>
+                    <!-- 로그인 버튼 -->
+                    <div class="hidden" id="login-button">
+                        <button onclick="handleLogin()" class="btn-improved btn-primary-improved">
+                            <i class="fas fa-sign-in-alt"></i> 로그인
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+
+<!-- 헤더 관련 스타일 -->
+<style>
+    /* 네비게이션 링크 스타일 */
+    .nav-link {
+        @apply text-gray-600 hover:text-blue-600 flex items-center space-x-1 py-2 px-3 rounded-lg transition-all duration-200;
+    }
+    
+    .nav-link.active {
+        @apply text-blue-600 bg-blue-50 font-medium;
+    }
+    
+    .nav-link:hover {
+        @apply bg-gray-50;
+    }
+    
+    /* 드롭다운 메뉴 스타일 */
+    .nav-dropdown {
+        @apply absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg py-2 min-w-44 z-50;
+    }
+    
+    .nav-dropdown-item {
+        @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-150;
+    }
+    
+    .nav-dropdown-item.active {
+        @apply text-blue-600 bg-blue-50 font-medium;
+    }
+    
+    /* 헤더 모던 스타일 */
+    .header-modern {
+        @apply bg-white border-b border-gray-200 shadow-sm;
+    }
+</style>
+
+<!-- 헤더 관련 JavaScript 함수들 -->
+<script>
+    // 헤더 관련 유틸리티 함수들
+    window.headerUtils = {
+        getCurrentPage() {
+            const path = window.location.pathname;
+            const filename = path.split('/').pop().replace('.html', '');
+            return filename || 'index';
+        },
+        
+        isDocumentPage() {
+            const page = this.getCurrentPage();
+            return ['index', 'hierarchy'].includes(page);
+        },
+        
+        isMemoPage() {
+            const page = this.getCurrentPage();
+            return ['memo-tree', 'story-view'].includes(page);
+        }
+    };
+    
+    // Alpine.js 전역 함수로 등록 - 즉시 실행
+    if (typeof Alpine !== 'undefined') {
+        // Alpine이 이미 로드된 경우
+        Alpine.store('header', {
+            getCurrentPage: () => headerUtils.getCurrentPage(),
+            isDocumentPage: () => headerUtils.isDocumentPage(),
+            isMemoPage: () => headerUtils.isMemoPage(),
+        });
+    } else {
+        // Alpine 로드 대기
+        document.addEventListener('alpine:init', () => {
+            Alpine.store('header', {
+                getCurrentPage: () => headerUtils.getCurrentPage(),
+                isDocumentPage: () => headerUtils.isDocumentPage(),
+                isMemoPage: () => headerUtils.isMemoPage(),
+            });
+        });
+    }
+    
+    // 전역 함수로도 등록 (Alpine 외부에서도 사용 가능)
+    window.getCurrentPage = () => headerUtils.getCurrentPage();
+    window.isDocumentPage = () => headerUtils.isDocumentPage();
+    window.isMemoPage = () => headerUtils.isMemoPage();
+    
+    // 로그인 관련 함수들
+    window.handleLogin = () => {
+        console.log('🔐 handleLogin 호출됨');
+        
+        // Alpine.js 컨텍스트에서 함수 찾기
+        const bodyElement = document.querySelector('body');
+        if (bodyElement && bodyElement._x_dataStack) {
+            const alpineData = bodyElement._x_dataStack[0];
+            if (alpineData && typeof alpineData.openLoginModal === 'function') {
+                console.log('✅ Alpine 컨텍스트에서 openLoginModal 호출');
+                alpineData.openLoginModal();
+                return;
+            }
+            if (alpineData && alpineData.showLoginModal !== undefined) {
+                console.log('✅ Alpine 컨텍스트에서 showLoginModal 설정');
+                alpineData.showLoginModal = true;
+                return;
+            }
+        }
+        
+        // 전역 함수로 시도
+        if (typeof window.openLoginModal === 'function') {
+            console.log('✅ 전역 openLoginModal 호출');
+            window.openLoginModal();
+            return;
+        }
+        
+        // 직접 이벤트 발생
+        console.log('🔄 커스텀 이벤트로 로그인 모달 열기');
+        document.dispatchEvent(new CustomEvent('open-login-modal'));
+    };
+    
+    window.handleLogout = () => {
+        // 각 페이지의 로그아웃 함수 호출
+        if (typeof logout === 'function') {
+            logout();
+        } else {
+            console.log('로그아웃 함수를 찾을 수 없습니다.');
+        }
+    };
+    
+    // 사용자 상태 업데이트 함수
+    window.updateUserMenu = (user) => {
+        const loggedInMenu = document.getElementById('logged-in-menu');
+        const loginButton = document.getElementById('login-button');
+        const userName = document.getElementById('user-name');
+        
+        if (user) {
+            // 로그인된 상태
+            if (loggedInMenu) loggedInMenu.classList.remove('hidden');
+            if (loginButton) loginButton.classList.add('hidden');
+            if (userName) userName.textContent = user.username || user.full_name || user.email || 'User';
+        } else {
+            // 로그아웃된 상태
+            if (loggedInMenu) loggedInMenu.classList.add('hidden');
+            if (loginButton) loginButton.classList.remove('hidden');
+        }
+    };
+    
+    // 언어 토글 함수 (전역)
+    window.toggleLanguage = () => {
+        console.log('🌐 언어 토글 기능 (미구현)');
+        // 향후 다국어 지원 시 구현
+    };
+</script>
diff --git a/frontend/hierarchy.html b/frontend/hierarchy.html
deleted file mode 100644
index 97c9f00..0000000
--- a/frontend/hierarchy.html
+++ /dev/null
@@ -1,844 +0,0 @@
-<!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>
-    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-    <style>
-        /* 드래그 앤 드롭 스타일 */
-        .draggable {
-            cursor: move;
-            transition: all 0.2s ease;
-        }
-        .draggable:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-        .drag-over {
-            border: 2px dashed #3b82f6;
-            background-color: #eff6ff;
-        }
-        .tree-item {
-            position: relative;
-        }
-        .tree-item::before {
-            content: '';
-            position: absolute;
-            left: -12px;
-            top: 0;
-            bottom: 0;
-            width: 1px;
-            background: #e5e7eb;
-        }
-        .tree-item:last-child::before {
-            height: 20px;
-        }
-        .tree-item::after {
-            content: '';
-            position: absolute;
-            left: -12px;
-            top: 20px;
-            width: 12px;
-            height: 1px;
-            background: #e5e7eb;
-        }
-        .sidebar-scroll {
-            scrollbar-width: thin;
-            scrollbar-color: #cbd5e1 #f1f5f9;
-        }
-        .sidebar-scroll::-webkit-scrollbar {
-            width: 6px;
-        }
-        .sidebar-scroll::-webkit-scrollbar-track {
-            background: #f1f5f9;
-        }
-        .sidebar-scroll::-webkit-scrollbar-thumb {
-            background: #cbd5e1;
-            border-radius: 3px;
-        }
-        
-        /* 하이라이트 스타일 */
-        .highlight {
-            border-radius: 2px;
-            padding: 1px 2px;
-            margin: 0 1px;
-            transition: all 0.2s ease;
-        }
-        .highlight:hover {
-            opacity: 0.8;
-            transform: scale(1.02);
-        }
-        
-        /* 텍스트 선택 시 하이라이트 메뉴 */
-        .highlight-menu {
-            animation: fadeInUp 0.2s ease-out;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
-            border: 3px solid #3b82f6 !important;
-            background: white !important;
-            z-index: 99999 !important;
-        }
-        
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        /* 문서 콘텐츠 영역 */
-        .prose {
-            user-select: text;
-            -webkit-user-select: text;
-            -moz-user-select: text;
-            -ms-user-select: text;
-        }
-    </style>
-</head>
-<body class="bg-gray-50" x-data="hierarchyApp()" x-init="init()">
-    <!-- 헤더 -->
-    <header class="bg-white shadow-sm border-b">
-        <div class="px-6 py-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-4">
-                    <h1 class="text-2xl font-bold text-gray-900">📚 문서 관리 시스템</h1>
-                    <div class="flex space-x-2">
-                        <a href="index.html" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">📖 그리드 뷰</a>
-                        <span class="px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">📚 계층구조 뷰</span>
-                        <a href="memo-tree.html" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">🌳 트리 메모장</a>
-                    </div>
-                </div>
-                
-                <div class="flex items-center space-x-4">
-                    <!-- 검색 -->
-                    <div class="relative" x-show="currentUser">
-                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
-                        <input 
-                            type="text" 
-                            x-model="searchQuery" 
-                            @input="searchDocuments"
-                            placeholder="문서, 메모 검색..." 
-                            class="w-80 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        >
-                    </div>
-                    
-                    <!-- 사용자 메뉴 -->
-                    <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-red-600 hover:text-red-800">로그아웃</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="flex h-screen pt-16">
-        <!-- 왼쪽 사이드바 (항상 표시) -->
-        <aside class="w-80 bg-white shadow-lg border-r flex flex-col">
-            <!-- 사이드바 헤더 -->
-            <div class="p-4 border-b bg-gray-50">
-                <div class="flex items-center justify-between">
-                    <h2 class="font-semibold text-gray-900">📖 문서 구조</h2>
-                    <div class="flex space-x-2">
-                        <button 
-                            @click="showUploadModal = true"
-                            x-show="currentUser"
-                            class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"
-                            title="문서 업로드"
-                        >
-                            <i class="fas fa-plus"></i>
-                        </button>
-                        <button 
-                            @click="refreshHierarchy()"
-                            class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg"
-                            title="새로고침"
-                        >
-                            <i class="fas fa-sync-alt"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 트리 구조 -->
-            <div class="flex-1 overflow-y-auto sidebar-scroll p-4">
-                <div x-show="loading" class="text-center py-8">
-                    <i class="fas fa-spinner fa-spin text-gray-400"></i>
-                    <p class="text-gray-500 mt-2">로딩 중...</p>
-                </div>
-                
-                <div x-show="!loading">
-                    <!-- 서적들 -->
-                    <template x-for="(book, bookId) in hierarchy.books" :key="bookId">
-                        <div class="mb-4">
-                            <!-- 서적 헤더 -->
-                            <div 
-                                class="flex items-center p-3 bg-blue-50 border border-blue-200 rounded-lg cursor-pointer hover:bg-blue-100"
-                                @click="toggleBook(bookId)"
-                            >
-                                <i class="fas fa-book text-blue-600 mr-3"></i>
-                                <div class="flex-1">
-                                    <h3 class="font-medium text-blue-900" x-text="book.title"></h3>
-                                    <p class="text-sm text-blue-700" x-text="book.author || '저자 미상'"></p>
-                                </div>
-                                <i 
-                                    class="fas fa-chevron-down transition-transform duration-200"
-                                    :class="expandedBooks.includes(bookId) ? 'rotate-180' : ''"
-                                ></i>
-                            </div>
-                            
-                            <!-- 서적 내용 -->
-                            <div x-show="expandedBooks.includes(bookId)" class="mt-2 ml-4 space-y-2">
-                                <!-- 소분류들 -->
-                                <template x-for="(category, categoryId) in book.categories" :key="categoryId">
-                                    <div class="tree-item">
-                                        <!-- 소분류 헤더 -->
-                                        <div 
-                                            class="flex items-center p-2 bg-green-50 border border-green-200 rounded cursor-pointer hover:bg-green-100"
-                                            @click="toggleCategory(categoryId)"
-                                        >
-                                            <i class="fas fa-folder text-green-600 mr-2"></i>
-                                            <span class="flex-1 font-medium text-green-900" x-text="category.name"></span>
-                                            <span class="text-xs text-green-700" x-text="`${category.documents.length}개`"></span>
-                                            <i 
-                                                class="fas fa-chevron-down ml-2 transition-transform duration-200"
-                                                :class="expandedCategories.includes(categoryId) ? 'rotate-180' : ''"
-                                            ></i>
-                                        </div>
-                                        
-                                        <!-- 소분류 문서들 -->
-                                        <div x-show="expandedCategories.includes(categoryId)" class="mt-1 ml-4 space-y-1">
-                                            <template x-for="doc in category.documents" :key="doc.id">
-                                                <div 
-                                                    class="flex items-center p-2 bg-white border rounded cursor-pointer hover:bg-gray-50 draggable"
-                                                    @click="openDocument(doc.id)"
-                                                    draggable="true"
-                                                    @dragstart="handleDragStart($event, doc)"
-                                                    @dragover.prevent
-                                                    @drop="handleDrop($event, categoryId)"
-                                                >
-                                                    <i class="fas fa-file-alt text-gray-500 mr-2"></i>
-                                                    <span class="flex-1 text-sm" x-text="doc.title"></span>
-                                                    <div class="flex space-x-1">
-                                                        <button 
-                                                            @click.stop="editDocument(doc)"
-                                                            class="p-1 text-gray-400 hover:text-blue-600"
-                                                            title="편집"
-                                                        >
-                                                            <i class="fas fa-edit text-xs"></i>
-                                                        </button>
-                                                        <button 
-                                                            x-show="currentUser && currentUser.is_admin"
-                                                            @click.stop="deleteDocument(doc.id)"
-                                                            class="p-1 text-gray-400 hover:text-red-600"
-                                                            title="삭제"
-                                                        >
-                                                            <i class="fas fa-trash text-xs"></i>
-                                                        </button>
-                                                    </div>
-                                                </div>
-                                            </template>
-                                        </div>
-                                    </div>
-                                </template>
-                                
-                                <!-- 서적 내 미분류 문서들 -->
-                                <div x-show="book.uncategorized_documents.length > 0" class="tree-item">
-                                    <div 
-                                        class="flex items-center p-2 bg-yellow-50 border border-yellow-200 rounded cursor-pointer hover:bg-yellow-100"
-                                        @click="toggleUncategorizedInBook(bookId)"
-                                    >
-                                        <i class="fas fa-folder-open text-yellow-600 mr-2"></i>
-                                        <span class="flex-1 font-medium text-yellow-900">미분류</span>
-                                        <span class="text-xs text-yellow-700" x-text="`${book.uncategorized_documents.length}개`"></span>
-                                        <i 
-                                            class="fas fa-chevron-down ml-2 transition-transform duration-200"
-                                            :class="expandedUncategorizedInBooks.includes(bookId) ? 'rotate-180' : ''"
-                                        ></i>
-                                    </div>
-                                    
-                                    <div x-show="expandedUncategorizedInBooks.includes(bookId)" class="mt-1 ml-4 space-y-1">
-                                        <template x-for="doc in book.uncategorized_documents" :key="doc.id">
-                                            <div 
-                                                class="flex items-center p-2 bg-white border rounded cursor-pointer hover:bg-gray-50 draggable"
-                                                @click="openDocument(doc.id)"
-                                                draggable="true"
-                                                @dragstart="handleDragStart($event, doc)"
-                                            >
-                                                <i class="fas fa-file-alt text-gray-500 mr-2"></i>
-                                                <span class="flex-1 text-sm" x-text="doc.title"></span>
-                                                <div class="flex space-x-1">
-                                                    <button 
-                                                        @click.stop="editDocument(doc)"
-                                                        class="p-1 text-gray-400 hover:text-blue-600"
-                                                        title="편집"
-                                                    >
-                                                        <i class="fas fa-edit text-xs"></i>
-                                                    </button>
-                                                    <button 
-                                                        x-show="currentUser && currentUser.is_admin"
-                                                        @click.stop="deleteDocument(doc.id)"
-                                                        class="p-1 text-gray-400 hover:text-red-600"
-                                                        title="삭제"
-                                                    >
-                                                        <i class="fas fa-trash text-xs"></i>
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        </template>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                    
-                    <!-- 전체 미분류 문서들 -->
-                    <div x-show="hierarchy.uncategorized.length > 0" class="mb-4">
-                        <div 
-                            class="flex items-center p-3 bg-gray-100 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-200"
-                            @click="toggleUncategorized()"
-                        >
-                            <i class="fas fa-folder-open text-gray-600 mr-3"></i>
-                            <div class="flex-1">
-                                <h3 class="font-medium text-gray-900">📄 미분류 문서</h3>
-                                <p class="text-sm text-gray-600" x-text="`${hierarchy.uncategorized.length}개 문서`"></p>
-                            </div>
-                            <i 
-                                class="fas fa-chevron-down transition-transform duration-200"
-                                :class="showUncategorized ? 'rotate-180' : ''"
-                            ></i>
-                        </div>
-                        
-                        <div x-show="showUncategorized" class="mt-2 ml-4 space-y-1">
-                            <template x-for="doc in hierarchy.uncategorized" :key="doc.id">
-                                <div 
-                                    class="flex items-center p-2 bg-white border rounded cursor-pointer hover:bg-gray-50 draggable"
-                                    @click="openDocument(doc.id)"
-                                    draggable="true"
-                                    @dragstart="handleDragStart($event, doc)"
-                                >
-                                    <i class="fas fa-file-alt text-gray-500 mr-2"></i>
-                                    <span class="flex-1 text-sm" x-text="doc.title"></span>
-                                    <div class="flex space-x-1">
-                                        <button 
-                                            @click.stop="editDocument(doc)"
-                                            class="p-1 text-gray-400 hover:text-blue-600"
-                                            title="편집"
-                                        >
-                                            <i class="fas fa-edit text-xs"></i>
-                                        </button>
-                                        <button 
-                                            x-show="currentUser && currentUser.is_admin"
-                                            @click.stop="deleteDocument(doc.id)"
-                                            class="p-1 text-gray-400 hover:text-red-600"
-                                            title="삭제"
-                                        >
-                                            <i class="fas fa-trash text-xs"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    
-                    <!-- 빈 상태 -->
-                    <div x-show="Object.keys(hierarchy.books).length === 0 && hierarchy.uncategorized.length === 0" class="text-center py-8">
-                        <i class="fas fa-folder-open text-gray-300 text-4xl mb-4"></i>
-                        <p class="text-gray-500">아직 문서가 없습니다.</p>
-                        <button 
-                            x-show="currentUser"
-                            @click="showUploadModal = true"
-                            class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-                        >
-                            첫 문서 업로드하기
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </aside>
-        
-        <!-- 메인 콘텐츠 영역 -->
-        <main class="flex-1 flex flex-col">
-                <!-- 콘텐츠 헤더 -->
-                <div class="bg-white border-b p-4">
-                <div class="flex items-center justify-between">
-                    <div>
-                        <h2 class="text-lg font-semibold text-gray-900" x-text="selectedDocument ? selectedDocument.title : '문서를 선택하세요'"></h2>
-                        <p class="text-sm text-gray-500" x-text="selectedDocument ? `${selectedDocument.book_title || '미분류'} ${selectedDocument.category_name ? '> ' + selectedDocument.category_name : ''}` : '사이드바에서 문서를 클릭하여 내용을 확인하세요'"></p>
-                    </div>
-                    
-                    <div x-show="selectedDocument" class="flex space-x-2">
-                        <!-- 플로팅 메모창 토글 -->
-                        <button 
-                            @click="console.log('🪟 메모창 토글:', showFloatingMemo, '→', !showFloatingMemo); showFloatingMemo = !showFloatingMemo"
-                            class="px-3 py-2 rounded transition-colors"
-                            :class="showFloatingMemo ? 'bg-blue-500 text-white' : 'text-blue-600 border border-blue-600 hover:bg-blue-50'"
-                            title="메모 & 하이라이트 창"
-                        >
-                            <i class="fas fa-window-restore mr-1"></i>
-                            메모창 (<span x-text="notes.length + highlights.length"></span>)
-                        </button>
-                        
-                        <button 
-                            @click="toggleHighlightMode()"
-                            class="px-3 py-2 rounded transition-colors"
-                            :class="highlightMode ? 'bg-yellow-500 text-white' : 'text-yellow-600 border border-yellow-600 hover:bg-yellow-50'"
-                        >
-                            <i class="fas fa-highlighter mr-1"></i> 
-                            <span x-text="highlightMode ? '하이라이트 ON' : '하이라이트 OFF'"></span>
-                        </button>
-                        <button 
-                            @click="editDocument(selectedDocument)"
-                            class="px-3 py-2 text-blue-600 border border-blue-600 rounded hover:bg-blue-50"
-                        >
-                            <i class="fas fa-edit mr-1"></i> 편집
-                        </button>
-                        <button 
-                            x-show="currentUser && currentUser.is_admin"
-                            @click="deleteDocument(selectedDocument.id)"
-                            class="px-3 py-2 text-red-600 border border-red-600 rounded hover:bg-red-50"
-                        >
-                            <i class="fas fa-trash mr-1"></i> 삭제
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 문서 뷰어 -->
-            <div class="flex-1 overflow-auto">
-                <div x-show="!selectedDocument" class="flex items-center justify-center h-full">
-                    <div class="text-center">
-                        <i class="fas fa-file-alt text-gray-300 text-6xl mb-4"></i>
-                        <h3 class="text-xl font-medium text-gray-600 mb-2">문서를 선택하세요</h3>
-                        <p class="text-gray-500">왼쪽 사이드바에서 문서를 클릭하면 내용이 표시됩니다.</p>
-                    </div>
-                </div>
-                
-                <div x-show="selectedDocument && documentContent" class="p-6">
-                    <div x-html="documentContent" class="prose max-w-none"></div>
-                </div>
-                
-                <div x-show="selectedDocument && !documentContent && loadingDocument" class="flex items-center justify-center h-full">
-                    <div class="text-center">
-                        <i class="fas fa-spinner fa-spin text-gray-400 text-3xl mb-4"></i>
-                        <p class="text-gray-500">문서를 불러오는 중...</p>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 하이라이트 메뉴 (직접 DOM 조작) -->
-            <div 
-                id="highlight-menu"
-                class="fixed top-20 left-1/2 transform -translate-x-1/2 z-50 bg-white border border-gray-300 rounded-lg shadow-lg p-3"
-                style="display: none;"
-            >
-                <div class="text-center mb-2">
-                    <h4 class="font-semibold text-sm">하이라이트 색상</h4>
-                </div>
-                <div class="flex space-x-2">
-                    <button onclick="window.hierarchyInstance.createHighlight('yellow')" class="w-8 h-8 bg-yellow-300 rounded hover:bg-yellow-400" title="노랑"></button>
-                    <button onclick="window.hierarchyInstance.createHighlight('blue')" class="w-8 h-8 bg-blue-300 rounded hover:bg-blue-400" title="파랑"></button>
-                    <button onclick="window.hierarchyInstance.createHighlight('green')" class="w-8 h-8 bg-green-300 rounded hover:bg-green-400" title="초록"></button>
-                    <button onclick="window.hierarchyInstance.createHighlight('red')" class="w-8 h-8 bg-red-300 rounded hover:bg-red-400" title="빨강"></button>
-                </div>
-            </div>
-            </div>
-            
-
-        </main>
-    </div>
-
-    <!-- 플로팅 메모창 -->
-    <div 
-        x-show="showFloatingMemo && selectedDocument"
-        x-init="console.log('🪟 플로팅 메모창 초기화:', { showFloatingMemo, selectedDocument: !!selectedDocument })"
-        class="fixed bg-white rounded-lg shadow-2xl border z-40 flex flex-col"
-        :style="`left: ${floatingMemoPosition.x}px; top: ${floatingMemoPosition.y}px; width: ${floatingMemoSize.width}px; height: ${floatingMemoSize.height}px;`"
-        x-transition:enter="transition ease-out duration-200"
-        x-transition:enter-start="opacity-0 scale-95"
-        x-transition:enter-end="opacity-100 scale-100"
-        x-transition:leave="transition ease-in duration-150"
-        x-transition:leave-start="opacity-100 scale-100"
-        x-transition:leave-end="opacity-0 scale-95"
-    >
-        <!-- 플로팅 창 헤더 (드래그 가능) -->
-        <div 
-            class="flex items-center justify-between p-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg cursor-move"
-            @mousedown="startDragging($event)"
-        >
-            <div class="flex items-center space-x-2">
-                <i class="fas fa-window-restore"></i>
-                <h3 class="font-semibold">📝 메모 & 하이라이트</h3>
-                <div class="flex space-x-1">
-                    <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded-full" x-text="`${notes.length}개 메모`"></span>
-                    <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded-full" x-text="`${highlights.length}개 하이라이트`"></span>
-                </div>
-            </div>
-            <div class="flex items-center space-x-2">
-                <!-- 크기 조절 버튼들 -->
-                <button 
-                    @click="toggleFloatingMemoSize()"
-                    class="text-white hover:bg-white hover:bg-opacity-20 p-1 rounded"
-                    title="크기 조절"
-                >
-                    <i class="fas fa-expand-arrows-alt text-sm"></i>
-                </button>
-                <!-- 닫기 버튼 -->
-                <button 
-                    @click="showFloatingMemo = false"
-                    class="text-white hover:bg-white hover:bg-opacity-20 p-1 rounded"
-                    title="닫기"
-                >
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-        </div>
-        
-        <!-- 메모 검색 -->
-        <div class="p-3 border-b bg-gray-50">
-            <div class="relative">
-                <input 
-                    type="text" 
-                    x-model="memoSearchQuery"
-                    @input="filterMemos()"
-                    placeholder="메모 검색..." 
-                    class="w-full pl-8 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                >
-                <i class="fas fa-search absolute left-2.5 top-2.5 text-gray-400 text-sm"></i>
-            </div>
-        </div>
-        
-        <!-- 메모 목록 -->
-        <div class="flex-1 overflow-y-auto p-3">
-            <div x-show="(filteredNotes.length === 0 && highlights.length === 0)" class="text-center text-gray-500 py-8">
-                <i class="fas fa-sticky-note text-3xl text-gray-300 mb-2"></i>
-                <p class="text-sm">아직 메모나 하이라이트가 없습니다.</p>
-                <p class="text-xs text-gray-400 mt-1">문서에서 텍스트를 선택하여 하이라이트를 만들어보세요.</p>
-            </div>
-            
-            <!-- 하이라이트 섹션 -->
-            <div x-show="highlights.length > 0" class="mb-4">
-                <h4 class="font-medium text-gray-700 mb-3 flex items-center">
-                    <i class="fas fa-highlighter text-yellow-500 mr-2"></i>
-                    하이라이트 (<span x-text="highlights.length"></span>)
-                </h4>
-                <template x-for="highlight in highlights" :key="highlight.id">
-                    <div class="mb-3 p-3 bg-gray-50 rounded-lg border-l-4" :class="{
-                        'border-yellow-400': highlight.highlight_color === 'yellow',
-                        'border-blue-400': highlight.highlight_color === 'blue',
-                        'border-green-400': highlight.highlight_color === 'green',
-                        'border-red-400': highlight.highlight_color === 'red'
-                    }">
-                        <div class="text-sm text-gray-600 mb-1" x-text="highlight.selected_text"></div>
-                        <div x-show="highlight.notes && highlight.notes.content" class="text-xs text-gray-500 mt-2 p-2 bg-white rounded border">
-                            <i class="fas fa-comment mr-1"></i>
-                            <span x-text="highlight.notes?.content || ''"></span>
-                        </div>
-                        <div class="flex items-center justify-between mt-2">
-                            <span class="text-xs text-gray-400" x-text="new Date(highlight.created_at).toLocaleDateString()"></span>
-                            <div class="flex space-x-1">
-                                <button 
-                                    @click="scrollToHighlight(highlight.id)"
-                                    class="text-xs text-blue-600 hover:text-blue-800 p-1"
-                                    title="하이라이트로 이동"
-                                >
-                                    <i class="fas fa-arrow-right"></i>
-                                </button>
-                                <button 
-                                    @click="deleteHighlight(highlight.id)"
-                                    class="text-xs text-red-600 hover:text-red-800 p-1"
-                                    title="삭제"
-                                >
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </div>
-            
-            <!-- 독립 메모 섹션 -->
-            <div x-show="filteredNotes.length > 0">
-                <h4 class="font-medium text-gray-700 mb-3 flex items-center">
-                    <i class="fas fa-sticky-note text-blue-500 mr-2"></i>
-                    독립 메모 (<span x-text="filteredNotes.length"></span>)
-                </h4>
-                <template x-for="note in filteredNotes" :key="note.id">
-                    <div class="mb-3 p-3 bg-blue-50 rounded-lg border-l-4 border-blue-400">
-                        <div class="text-sm text-gray-700" x-text="note.content"></div>
-                        <div class="flex items-center justify-between mt-2">
-                            <span class="text-xs text-gray-400" x-text="new Date(note.created_at).toLocaleDateString()"></span>
-                            <button 
-                                @click="deleteNote(note.id)"
-                                class="text-xs text-red-600 hover:text-red-800 p-1"
-                                title="삭제"
-                            >
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-        
-        <!-- 크기 조절 핸들 -->
-        <div 
-            class="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize bg-gray-300 hover:bg-gray-400"
-            @mousedown="startResizing($event)"
-            title="크기 조절"
-        >
-            <i class="fas fa-grip-lines text-xs text-gray-600 absolute bottom-0.5 right-0.5"></i>
-        </div>
-    </div>
-
-    <!-- 로그인 모달 -->
-    <div x-data="authModal()" 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="login()">
-                <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-6">
-                    <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="loggingIn" 
-                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
-                    >
-                        <span x-show="!loggingIn">로그인</span>
-                        <span x-show="loggingIn">로그인 중...</span>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <!-- 업로드 모달 -->
-    <div x-data="uploadModal()" x-show="showUploadModal" 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-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
-            <h2 class="text-xl font-bold mb-4">문서 업로드</h2>
-            <form @submit.prevent="upload()">
-                <!-- 파일 선택 -->
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">HTML 파일 *</label>
-                    <input 
-                        type="file" 
-                        accept=".html,.htm" 
-                        @change="handleFileSelect($event, 'html_file')"
-                        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">PDF 파일 (선택사항)</label>
-                    <input 
-                        type="file" 
-                        accept=".pdf" 
-                        @change="handleFileSelect($event, 'pdf_file')"
-                        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>
-                    <div class="space-y-2">
-                        <label class="flex items-center">
-                            <input type="radio" x-model="bookSelectionMode" value="existing" class="mr-2 text-blue-600" name="bookSelectionMode">
-                            기존 서적 선택
-                        </label>
-                        <label class="flex items-center">
-                            <input type="radio" x-model="bookSelectionMode" value="new" class="mr-2 text-blue-600" name="bookSelectionMode">
-                            새 서적 생성
-                        </label>
-                        <label class="flex items-center">
-                            <input type="radio" x-model="bookSelectionMode" value="none" class="mr-2 text-blue-600" name="bookSelectionMode">
-                            서적 없이 업로드
-                        </label>
-                    </div>
-                </div>
-
-                <!-- 기존 서적 선택 -->
-                <div x-show="bookSelectionMode === 'existing'" class="mb-4 space-y-3">
-                    <input 
-                        type="text" 
-                        x-model="bookSearchQuery" 
-                        @input="searchBooks" 
-                        placeholder="서적 제목으로 검색..." 
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    >
-                    <div x-show="searchedBooks.length > 0" class="max-h-40 overflow-y-auto border border-gray-200 rounded-md">
-                        <template x-for="book in searchedBooks" :key="book.id">
-                            <div 
-                                @click="selectBook(book)" 
-                                class="p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
-                            >
-                                <div class="font-medium" x-text="book.title"></div>
-                                <div class="text-sm text-gray-600" x-text="book.author || '저자 미상'"></div>
-                            </div>
-                        </template>
-                    </div>
-                    <div x-show="selectedBook" class="p-3 bg-blue-50 border border-blue-200 rounded-md">
-                        <div class="font-medium text-blue-900" x-text="selectedBook?.title"></div>
-                        <div class="text-sm text-blue-700" x-text="selectedBook?.author || '저자 미상'"></div>
-                    </div>
-                </div>
-
-                <!-- 새 서적 생성 -->
-                <div x-show="bookSelectionMode === 'new'" class="mb-4 space-y-3">
-                    <input 
-                        type="text" 
-                        x-model="newBook.title" 
-                        @input="getSuggestions" 
-                        placeholder="서적 제목 *" 
-                        :required="bookSelectionMode === 'new'"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    >
-                    <input 
-                        type="text" 
-                        x-model="newBook.author" 
-                        placeholder="저자" 
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    >
-                    <div x-show="suggestions.length > 0" class="p-3 bg-yellow-50 border border-yellow-200 rounded-md">
-                        <p class="text-sm text-yellow-800 mb-2">비슷한 서적이 있습니다:</p>
-                        <template x-for="suggestion in suggestions" :key="suggestion.id">
-                            <div 
-                                @click="selectExistingFromSuggestion(suggestion)" 
-                                class="p-2 hover:bg-yellow-100 cursor-pointer rounded text-sm"
-                            >
-                                <span class="font-medium" x-text="suggestion.title"></span>
-                                <span class="text-yellow-700" x-text="suggestion.author ? ` - ${suggestion.author}` : ''"></span>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-
-                <!-- 문서 정보 -->
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">문서 제목 *</label>
-                    <input 
-                        type="text" 
-                        x-model="uploadForm.title" 
-                        required 
-                        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="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">문서 날짜</label>
-                    <input 
-                        type="date" 
-                        x-model="uploadForm.document_date" 
-                        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>
-                    <textarea 
-                        x-model="uploadForm.description" 
-                        rows="3" 
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
-                        placeholder="문서에 대한 간단한 설명"
-                    ></textarea>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">태그</label>
-                    <input 
-                        type="text" 
-                        x-model="uploadForm.tags" 
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
-                        placeholder="태그를 쉼표로 구분하여 입력 (예: 중요, 회의록, 2024)"
-                    >
-                </div>
-
-                <div class="mb-6">
-                    <label class="flex items-center">
-                        <input type="checkbox" x-model="uploadForm.is_public" class="mr-2">
-                        <span class="text-sm text-gray-700">공개 문서로 설정</span>
-                    </label>
-                </div>
-
-                <div x-show="uploadError" class="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-                    <span x-text="uploadError"></span>
-                </div>
-
-                <div class="flex justify-end space-x-3">
-                    <button 
-                        type="button" 
-                        @click="closeUploadModal()" 
-                        class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
-                    >
-                        취소
-                    </button>
-                    <button 
-                        type="submit" 
-                        :disabled="uploading || !uploadForm.html_file || !uploadForm.title" 
-                        class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                        <span x-show="!uploading">업로드</span>
-                        <span x-show="uploading">
-                            <i class="fas fa-spinner fa-spin mr-2"></i>
-                            업로드 중...
-                        </span>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <!-- JavaScript -->
-    <script src="static/js/api.js?v=2025012227"></script>
-    <script src="static/js/auth.js?v=2025012227"></script>
-    <script src="static/js/hierarchy.js?v=2025012227"></script>
-    
-    <!-- 디버깅 스크립트 -->
-    <script>
-        console.log('🔍 디버깅: hierarchyApp 함수 존재 여부:', typeof window.hierarchyApp);
-        if (typeof window.hierarchyApp === 'function') {
-            const testInstance = window.hierarchyApp();
-            console.log('🔍 디버깅: showFloatingMemo 변수 존재 여부:', 'showFloatingMemo' in testInstance);
-        }
-    </script>
-</body>
-</html>
diff --git a/frontend/index.html b/frontend/index.html
index d344f68..989655a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,6 +9,9 @@
     <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="/static/css/main.css">
+    
+    <!-- 헤더 로더 -->
+    <script src="static/js/header-loader.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- 메인 앱 -->
@@ -48,87 +51,8 @@
                 </form>
             </div>
         </div>
-        <!-- 헤더 -->
-        <header class="bg-white shadow-sm border-b">
-            <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">
-                        <h1 class="text-xl font-bold text-gray-900">
-                            <i class="fas fa-file-alt mr-2"></i>
-                            Document Server
-                        </h1>
-                        <div class="flex space-x-2">
-                            <span class="px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">📖 그리드 뷰</span>
-                            <a href="hierarchy.html" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">📚 계층구조 뷰</a>
-                            <a href="memo-tree.html" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">🌳 트리 메모장</a>
-                        </div>
-                    </div>
-
-                    <!-- 검색바 -->
-                    <div class="flex-1 max-w-lg mx-8" x-show="isAuthenticated">
-                        <div class="relative">
-                            <input type="text" x-model="searchQuery" @input="searchDocuments" 
-                                   placeholder="문서, 메모 검색..." 
-                                   class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
-                        </div>
-                    </div>
-
-                    <!-- 사용자 메뉴 -->
-                    <div class="flex items-center space-x-4">
-                        <template x-if="!isAuthenticated">
-                            <button @click="showLoginModal = true" 
-                                    class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
-                                로그인
-                            </button>
-                        </template>
-
-                        <template x-if="isAuthenticated">
-                            <div class="flex items-center space-x-4">
-                                <!-- 업로드 버튼 -->
-                                <button @click="showUploadModal = true" 
-                                        class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">
-                                    <i class="fas fa-upload mr-2"></i>
-                                    업로드
-                                </button>
-
-                                <!-- 사용자 드롭다운 -->
-                                <div class="relative" x-data="{ open: false }">
-                                    <button @click="open = !open" class="flex items-center text-gray-700 hover:text-gray-900">
-                                        <i class="fas fa-user-circle text-2xl"></i>
-                                        <span x-text="user?.full_name || user?.email" class="ml-2"></span>
-                                        <i class="fas fa-chevron-down ml-1"></i>
-                                    </button>
-
-                                    <div x-show="open" @click.away="open = false" x-cloak
-                                         class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
-                                        <a href="#" @click="showProfile = true" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                            <i class="fas fa-user mr-2"></i>프로필
-                                        </a>
-                                        <a href="#" @click="showMyNotes = true" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                            <i class="fas fa-sticky-note mr-2"></i>내 메모
-                                        </a>
-                                        <a href="#" @click="showBookmarks = true" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                            <i class="fas fa-bookmark mr-2"></i>책갈피
-                                        </a>
-                                        <template x-if="user?.is_admin">
-                                            <a href="#" @click="showAdmin = true" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                                <i class="fas fa-cog mr-2"></i>관리자
-                                            </a>
-                                        </template>
-                                        <hr class="my-1">
-                                        <a href="#" @click="logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                            <i class="fas fa-sign-out-alt mr-2"></i>로그아웃
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-            </div>
-        </header>
+        <!-- 공통 헤더 컨테이너 -->
+        <div id="header-container"></div>
 
         <!-- 메인 컨텐츠 -->
         <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -149,35 +73,69 @@
             <template x-if="isAuthenticated">
                 <div>
                     <!-- 필터 및 정렬 -->
-                    <div class="flex justify-between items-center mb-6">
-                        <div class="flex items-center space-x-4">
+                    <div class="mb-6">
+                        <!-- 첫 번째 줄: 제목과 뷰 모드 -->
+                        <div class="flex justify-between items-center mb-4">
                             <h2 class="text-2xl font-bold text-gray-900">문서 목록</h2>
-                            <select x-model="selectedTag" @change="loadDocuments" 
-                                    class="px-3 py-2 border border-gray-300 rounded-md">
+                            <div class="flex items-center space-x-2">
+                                <button @click="viewMode = 'grid'" 
+                                        :class="viewMode === 'grid' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
+                                        class="px-3 py-2 rounded-md">
+                                    <i class="fas fa-th-large mr-2"></i>그리드
+                                </button>
+                                <button @click="viewMode = 'books'" 
+                                        :class="viewMode === 'books' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
+                                        class="px-3 py-2 rounded-md">
+                                    <i class="fas fa-list mr-2"></i>목차
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <!-- 두 번째 줄: 검색과 필터 -->
+                        <div class="flex items-center space-x-4">
+                            <!-- 검색 입력창 -->
+                            <div class="flex-1 relative">
+                                <input type="text" 
+                                       x-model="searchQuery" 
+                                       @input="filterDocuments"
+                                       placeholder="문서 제목, 내용, 태그로 검색..." 
+                                       class="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm transition-all duration-200">
+                                <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
+                                <!-- 검색 결과 개수 표시 -->
+                                <span x-show="searchQuery && filteredDocuments.length !== documents.length" 
+                                      class="absolute right-3 top-3 text-sm text-gray-500">
+                                    <span x-text="filteredDocuments.length"></span>개 결과
+                                </span>
+                            </div>
+                            
+                            <!-- 태그 필터 -->
+                            <select x-model="selectedTag" @change="filterDocuments" 
+                                    class="px-4 py-2.5 border border-gray-200 rounded-xl bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[140px]">
                                 <option value="">모든 태그</option>
                                 <template x-for="tag in tags" :key="tag.id">
                                     <option :value="tag.name" x-text="tag.name"></option>
                                 </template>
                             </select>
-                        </div>
-
-                        <div class="flex items-center space-x-2">
-                            <button @click="viewMode = 'grid'" 
-                                    :class="viewMode === 'grid' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
-                                    class="px-3 py-2 rounded-md">
-                                <i class="fas fa-th-large"></i>
+                            
+                            <!-- 업로드 버튼 -->
+                            <button @click="openUploadPage()" 
+                                    class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all duration-200 shadow-md hover:shadow-lg flex items-center space-x-2">
+                                <i class="fas fa-upload"></i>
+                                <span>업로드</span>
                             </button>
-                            <button @click="viewMode = 'list'" 
-                                    :class="viewMode === 'list' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
-                                    class="px-3 py-2 rounded-md">
-                                <i class="fas fa-list"></i>
+                            
+                            <!-- 검색 초기화 버튼 -->
+                            <button x-show="searchQuery || selectedTag" 
+                                    @click="clearFilters"
+                                    class="px-4 py-2.5 bg-gray-100 text-gray-600 rounded-xl hover:bg-gray-200 transition-all duration-200">
+                                <i class="fas fa-times mr-2"></i>초기화
                             </button>
                         </div>
                     </div>
 
-                    <!-- 문서 그리드/리스트 -->
+                    <!-- 기존 그리드 뷰 (모든 문서 평면적으로) -->
                     <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        <template x-for="doc in documents" :key="doc.id">
+                        <template x-for="doc in filteredDocuments" :key="doc.id">
                             <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer"
                                  @click="openDocument(doc.id)">
                                 <div class="p-6">
@@ -229,17 +187,66 @@
                         </template>
                     </div>
 
+                    <!-- 서적별 그룹화 뷰 (목차) -->
+                    <div x-show="viewMode === 'books'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        <!-- 서적 카드들 -->
+                        <template x-for="bookGroup in groupedDocuments" :key="bookGroup.book?.id || 'no-book'">
+                            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer border border-gray-200"
+                                 @click="openBookDocuments(bookGroup.book)">
+                                <div class="p-6">
+                                    <div class="flex items-center mb-4">
+                                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center mr-4">
+                                            <i class="fas fa-book text-white text-lg"></i>
+                                        </div>
+                                        <div class="flex-1">
+                                            <h3 class="text-lg font-bold text-gray-900 line-clamp-2" x-text="bookGroup.book?.title || '서적 미분류'"></h3>
+                                            <p class="text-sm text-gray-600 mt-1" x-show="bookGroup.book?.author" x-text="bookGroup.book.author"></p>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="flex items-center justify-between text-sm text-gray-500 mb-3">
+                                        <span class="flex items-center">
+                                            <i class="fas fa-file-alt mr-2"></i>
+                                            <span x-text="bookGroup.documents.length"></span>개 문서
+                                        </span>
+                                        <i class="fas fa-chevron-right text-gray-400"></i>
+                                    </div>
+                                    
+                                    <p class="text-gray-600 text-sm line-clamp-2" x-text="bookGroup.book?.description || '서적 설명이 없습니다'"></p>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+
                     <!-- 빈 상태 -->
-                    <template x-if="documents.length === 0 && !loading">
+                    <template x-if="filteredDocuments.length === 0 && !loading">
                         <div class="text-center py-16">
-                            <i class="fas fa-folder-open text-6xl text-gray-400 mb-4"></i>
-                            <h3 class="text-xl font-semibold text-gray-900 mb-2">문서가 없습니다</h3>
-                            <p class="text-gray-600 mb-6">첫 번째 문서를 업로드해보세요</p>
-                            <button @click="showUploadModal = true" 
-                                    class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
-                                <i class="fas fa-upload mr-2"></i>
-                                문서 업로드
-                            </button>
+                            <template x-if="searchQuery || selectedTag">
+                                <!-- 검색 결과 없음 -->
+                                <div>
+                                    <i class="fas fa-search text-6xl text-gray-400 mb-4"></i>
+                                    <h3 class="text-xl font-semibold text-gray-900 mb-2">검색 결과가 없습니다</h3>
+                                    <p class="text-gray-600 mb-6">다른 검색어나 필터를 시도해보세요</p>
+                                    <button @click="clearFilters" 
+                                            class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700">
+                                        <i class="fas fa-times mr-2"></i>
+                                        필터 초기화
+                                    </button>
+                                </div>
+                            </template>
+                            <template x-if="!searchQuery && !selectedTag">
+                                <!-- 문서 없음 -->
+                                <div>
+                                    <i class="fas fa-folder-open text-6xl text-gray-400 mb-4"></i>
+                                    <h3 class="text-xl font-semibold text-gray-900 mb-2">문서가 없습니다</h3>
+                                    <p class="text-gray-600 mb-6">첫 번째 문서를 업로드해보세요</p>
+                                    <button @click="showUploadModal = true" 
+                                            class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
+                                        <i class="fas fa-upload mr-2"></i>
+                                        문서 업로드
+                                    </button>
+                                </div>
+                            </template>
                         </div>
                     </template>
                 </div>
@@ -478,8 +485,8 @@
     </style>
 
     <!-- JavaScript 파일들 -->
-    <script src="/static/js/api.js?v=2025012225"></script>
-    <script src="/static/js/auth.js?v=2025012225"></script>
-    <script src="/static/js/main.js?v=2025012225"></script>
+    <script src="/static/js/api.js?v=2025012380"></script>
+    <script src="/static/js/auth.js?v=2025012351"></script>
+    <script src="/static/js/main.js?v=2025012374"></script>
 </body>
 </html>
diff --git a/frontend/memo-tree.html b/frontend/memo-tree.html
index b289f8c..1b0db82 100644
--- a/frontend/memo-tree.html
+++ b/frontend/memo-tree.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>트리 메모장 - Document Server</title>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
     
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -22,10 +25,432 @@
     <!-- Monaco Editor (VS Code 에디터) -->
     <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>
         [x-cloak] { display: none !important; }
+
+        /* 모던 UI 스타일 */
+        :root {
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --shadow-soft: 0 8px 32px rgba(31, 38, 135, 0.37);
+            --shadow-hover: 0 15px 35px rgba(31, 38, 135, 0.5);
+        }
+
+        /* 기존 깔끔한 디자인 유지 */
+        body {
+            background-color: #f8fafc;
+            margin: 0;
+            padding: 0;
+        }
+
+        /* 개선된 커스텀 드롭다운 스타일 */
+        .custom-dropdown {
+            position: relative;
+            display: inline-block;
+            min-width: 120px;
+            width: 100%;
+        }
+
+        .dropdown-button {
+            width: 100%;
+            padding: 10px 14px;
+            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+            border: 1.5px solid #e2e8f0;
+            border-radius: 10px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+            position: relative;
+            overflow: hidden;
+            min-height: 38px;
+        }
+
+        .dropdown-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent);
+            transition: left 0.4s ease;
+        }
+
+        .dropdown-button:hover::before {
+            left: 100%;
+        }
+
+        .dropdown-button:hover {
+            border-color: #3b82f6;
+            box-shadow: 0 3px 12px rgba(59, 130, 246, 0.12);
+            transform: translateY(-0.5px);
+        }
+
+        .dropdown-button.active {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08), 0 3px 12px rgba(59, 130, 246, 0.15);
+            background: linear-gradient(145deg, #f0f7ff 0%, #e6f3ff 100%);
+        }
+
+        /* 작은 드롭다운 버튼 스타일 */
+        .dropdown-button.text-sm {
+            padding: 8px 12px;
+            font-size: 13px;
+            min-height: 34px;
+            border-radius: 8px;
+        }
+
+        .dropdown-content {
+            position: absolute;
+            top: calc(100% + 8px);
+            left: 0;
+            right: 0;
+            background: white;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            max-height: 320px;
+            overflow-y: auto;
+            backdrop-filter: blur(10px);
+        }
+
+        .dropdown-item {
+            padding: 14px 18px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid #f1f5f9;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .dropdown-item::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 100%;
+            background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
+            transition: width 0.3s ease;
+        }
+
+        .dropdown-item:hover::before {
+            width: 100%;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom: none;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+        }
+
+        .dropdown-item:hover {
+            background-color: #f8fafc;
+            transform: translateX(4px);
+            padding-left: 22px;
+        }
+
+        .dropdown-item.selected {
+            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+            color: #1d4ed8;
+            border-left: 4px solid #3b82f6;
+            font-weight: 600;
+        }
+
+        .dropdown-item-icon {
+            margin-right: 12px;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: transform 0.2s ease;
+        }
+
+        .dropdown-item:hover .dropdown-item-icon {
+            transform: scale(1.1);
+        }
+
+        /* 개선된 버튼 스타일 */
+        .btn-improved {
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .btn-primary-improved {
+            background-color: #3b82f6;
+            color: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-primary-improved:hover {
+            background-color: #2563eb;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-success-improved {
+            background-color: #10b981;
+            color: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-success-improved:hover {
+            background-color: #059669;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary-improved {
+            background-color: #6b7280;
+            color: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-secondary-improved:hover {
+            background-color: #4b5563;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+            transform: translateY(-1px);
+        }
+
+        /* 글래스모피즘 효과 강화 */
+        .glass {
+            background: rgba(255, 255, 255, 0.25);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+        }
+
+        .glass-hover:hover {
+            background: rgba(255, 255, 255, 0.35);
+            box-shadow: 0 15px 35px rgba(31, 38, 135, 0.5);
+            transform: translateY(-2px);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* 헤더 글래스 효과 */
+        .header-glass {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
         
-        /* 트리 스타일 */
+        /* 모던 버튼 스타일 */
+        .btn-modern {
+            background: var(--primary-gradient);
+            border: none;
+            border-radius: 12px;
+            padding: 12px 24px;
+            color: white;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-modern:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
+        }
+
+        .btn-success {
+            background: var(--success-gradient);
+            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
+        }
+
+        .btn-success:hover {
+            box-shadow: 0 8px 25px rgba(79, 172, 254, 0.6);
+        }
+
+        .btn-warning {
+            background: var(--warning-gradient);
+            box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
+        }
+
+        .btn-warning:hover {
+            box-shadow: 0 8px 25px rgba(67, 233, 123, 0.6);
+        }
+
+        /* 모던 카드 스타일 */
+        .card-modern {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .card-modern:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(31, 38, 135, 0.5);
+        }
+
+        /* 트리 노드 모던 스타일 */
+        .tree-node-modern {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+            position: relative;
+        }
+
+        .tree-node-modern::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--primary-gradient);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .tree-node-modern:hover::before {
+            opacity: 1;
+        }
+
+        .tree-node-modern:hover {
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: 0 15px 40px rgba(31, 38, 135, 0.4);
+            background: rgba(255, 255, 255, 0.95);
+        }
+
+        /* 정사 노드 특별 스타일 */
+        .tree-node-canonical {
+            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
+            border: 2px solid rgba(255, 193, 7, 0.5);
+            box-shadow: 0 8px 32px rgba(255, 193, 7, 0.3);
+        }
+
+        .tree-node-canonical::before {
+            background: linear-gradient(90deg, #ffd700, #ffb347);
+            opacity: 1;
+        }
+
+        /* 정사 배지 모던 스타일 */
+        .canonical-badge {
+            background: linear-gradient(135deg, #ffd700, #ffb347);
+            color: #8b4513;
+            font-weight: 700;
+            font-size: 11px;
+            padding: 4px 8px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
+            animation: pulse-gold 2s infinite;
+        }
+
+        @keyframes pulse-gold {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        /* 헤더 모던 스타일 */
+        .header-modern {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        /* 입력 필드 모던 스타일 */
+        .input-modern {
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 12px;
+            padding: 12px 16px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .input-modern:focus {
+            outline: none;
+            border-color: rgba(102, 126, 234, 0.5);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            background: rgba(255, 255, 255, 0.95);
+        }
+
+        /* 애니메이션 */
+        .fade-in {
+            animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .slide-up {
+            animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes slideUp {
+            from { transform: translateY(30px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
+        /* 스크롤바 스타일링 */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        /* 기존 트리 스타일 유지 (호환성) */
         .tree-node {
             transition: all 0.2s ease;
             position: relative;
@@ -175,88 +600,86 @@
     </style>
 </head>
 
-<body class="bg-gray-50" x-data="memoTreeApp()" x-init="init()" x-cloak>
-    <!-- 헤더 -->
-    <header class="bg-white shadow-sm border-b">
-        <div class="max-w-full 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">
-                    <div class="flex items-center space-x-2">
-                        <i class="fas fa-sitemap text-blue-600 text-xl"></i>
-                        <h1 class="text-xl font-bold text-gray-900">트리 메모장</h1>
-                    </div>
-                    
-                    <!-- 네비게이션 링크 -->
-                    <div class="hidden md:flex space-x-4">
-                        <a href="index.html" class="text-gray-600 hover:text-gray-900">📖 문서 관리</a>
-                        <a href="hierarchy.html" class="text-gray-600 hover:text-gray-900">📚 계층구조</a>
-                        <span class="text-blue-600 font-medium">🌳 트리 메모장</span>
-                        <a href="story-view.html" class="text-gray-600 hover:text-gray-900">📖 스토리 뷰</a>
-                    </div>
-                </div>
+<body x-data="memoTreeApp()" x-init="init()" x-cloak>
+    <!-- 공통 헤더 컨테이너 -->
+    <div id="header-container"></div>
 
-                <!-- 사용자 메뉴 -->
-                <div class="flex items-center space-x-4">
-                    <!-- 트리 관리 버튼들 -->
-                    <div x-show="currentUser" class="flex space-x-2">
-                        <button 
-                            @click="showNewTreeModal = true"
-                            class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-                            title="새 트리 생성"
-                        >
-                            <i class="fas fa-plus mr-1"></i> 새 트리
-                        </button>
-                        
-                        <button 
-                            @click="showTreeSettings = !showTreeSettings"
-                            x-show="selectedTree"
-                            class="px-3 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
-                            title="트리 설정"
-                        >
-                            <i class="fas fa-cog"></i>
-                        </button>
-                    </div>
-                    
-                    <!-- 사용자 정보 -->
-                    <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-red-600 hover:text-red-800">로그아웃</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 x-data="authModal()" x-show="showLoginModal" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-gray-900">로그인</h2>
+                <button @click="showLoginModal = false" class="text-gray-400 hover:text-gray-600">
+                    <i class="fas fa-times"></i>
+                </button>
             </div>
+            
+            <form @submit.prevent="login">
+                <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-6">
+                    <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>
+                
+                <button type="submit" :disabled="loginLoading" 
+                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50">
+                    <span x-show="!loginLoading">로그인</span>
+                    <span x-show="loginLoading">로그인 중...</span>
+                </button>
+            </form>
         </div>
-    </header>
+    </div>
 
     <!-- 메인 컨테이너 -->
     <div class="h-screen pt-16" x-show="currentUser">
         <!-- 상단 툴바 -->
-        <div class="bg-white border-b shadow-sm p-3">
+        <div class="bg-white border-b shadow-sm p-4">
             <div class="flex items-center justify-between">
                 <!-- 트리 선택 -->
                 <div class="flex items-center space-x-3">
-                    <select 
-                        x-model="selectedTreeId"
-                        @change="loadTree(selectedTreeId)"
-                        class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                    >
-                        <option value="">📂 트리 선택</option>
-                        <template x-for="tree in userTrees" :key="tree.id">
-                            <option :value="tree.id" x-text="`${getTreeIcon(tree.tree_type)} ${tree.title}`"></option>
-                        </template>
-                    </select>
+                    <div class="custom-dropdown" x-data="{ open: false }" @click.away="open = false">
+                        <button 
+                            class="dropdown-button"
+                            :class="{ 'active': open }"
+                            @click="open = !open"
+                        >
+                            <span class="flex items-center">
+                                <span class="dropdown-item-icon" x-text="selectedTree ? getTreeIcon(selectedTree.tree_type) : '📁'"></span>
+                                <span x-text="selectedTree ? selectedTree.title : '트리 선택'"></span>
+                            </span>
+                            <i class="fas fa-chevron-down transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+                        </button>
+                        
+                        <div x-show="open" x-transition class="dropdown-content">
+                            <template x-for="tree in userTrees" :key="tree.id">
+                                <div 
+                                    class="dropdown-item"
+                                    :class="{ 'selected': selectedTreeId === tree.id }"
+                                    @click="selectedTreeId = tree.id; loadTree(tree.id); open = false"
+                                >
+                                    <span class="dropdown-item-icon" x-text="getTreeIcon(tree.tree_type)"></span>
+                                    <span x-text="tree.title"></span>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
                     
                     <button 
                         @click="showNewTreeModal = true"
-                        class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
-                        title="새 트리"
+                        class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors duration-200 flex items-center whitespace-nowrap"
+                        title="새 트리 생성"
                     >
-                        <i class="fas fa-plus mr-1"></i> 새 트리
+                        <i class="fas fa-plus mr-2"></i>새 트리
                     </button>
                 </div>
                 
@@ -264,27 +687,27 @@
                 <div x-show="selectedTree" class="flex items-center space-x-2">
                     <button 
                         @click="createRootNode()"
-                        class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
+                        class="btn-improved btn-success-improved"
                     >
-                        <i class="fas fa-plus mr-1"></i> 노드 추가
+                        <i class="fas fa-plus"></i> 노드 추가
                     </button>
                     <button 
                         @click="centerTree()"
-                        class="px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm"
+                        class="btn-improved btn-secondary-improved"
                         title="트리 중앙 정렬"
                     >
-                        <i class="fas fa-crosshairs"></i>
+                        <i class="fas fa-crosshairs"></i> 중앙정렬
                     </button>
                     <button 
                         @click="zoomIn()"
-                        class="px-2 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm"
+                        class="btn-improved btn-secondary-improved"
                         title="확대"
                     >
                         <i class="fas fa-search-plus"></i>
                     </button>
                     <button 
                         @click="zoomOut()"
-                        class="px-2 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm"
+                        class="btn-improved btn-secondary-improved"
                         title="축소"
                     >
                         <i class="fas fa-search-minus"></i>
@@ -294,7 +717,7 @@
         </div>
         
         <!-- 메인 트리 다이어그램 영역 -->
-        <div class="flex h-full">
+        <div class="flex h-full overflow-hidden">
             <!-- 트리 다이어그램 (중앙) -->
             <div class="flex-1 relative overflow-hidden bg-gray-50">
                 <!-- 트리 없음 상태 -->
@@ -328,7 +751,6 @@
                         id="tree-container"
                         :style="`transform: scale(${treeZoom}) translate(${treePanX}px, ${treePanY}px); transform-origin: center center;`"
                         @mousedown="startPan($event)"
-                        @wheel="handleWheel($event)"
                     >
                         <!-- SVG 연결선 레이어 -->
                         <svg class="absolute inset-0 w-full h-full pointer-events-none z-10" id="tree-connections">
@@ -345,22 +767,16 @@
                                 @mousedown="startDragNode($event, node)"
                             >
                                 <div 
-                                    class="bg-white rounded-lg shadow-md border-2 p-3 cursor-pointer min-w-32 max-w-48 relative"
+                                    class="tree-node-modern p-4 cursor-pointer min-w-40 max-w-56 relative"
                                     :class="{
-                                        'border-blue-500 shadow-lg': selectedNode && selectedNode.id === node.id,
-                                        'border-gray-200': !selectedNode || selectedNode.id !== node.id,
-                                        'border-gray-400': node.status === 'draft',
-                                        'border-yellow-400': node.status === 'writing',
-                                        'border-blue-400': node.status === 'review',
-                                        'border-green-400': node.status === 'complete',
-                                        'bg-gradient-to-br from-yellow-50 to-amber-50 border-amber-400': node.is_canonical,
-                                        'shadow-amber-200': node.is_canonical
+                                        'tree-node-canonical': node.is_canonical,
+                                        'ring-2 ring-blue-400': selectedNode && selectedNode.id === node.id
                                     }"
                                     @click="selectNode(node)"
                                     @dblclick="editNodeInline(node)"
                                 >
                                     <!-- 정사 경로 배지 -->
-                                    <div x-show="node.is_canonical" class="absolute -top-2 -right-2 bg-amber-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-md">
+                                    <div x-show="node.is_canonical" class="absolute -top-3 -right-3 canonical-badge">
                                         <i class="fas fa-star mr-1"></i><span x-text="node.canonical_order || '?'"></span>
                                     </div>
                                     
@@ -413,10 +829,10 @@
             </div>
             
             <!-- 오른쪽: 속성 패널 -->
-            <div class="w-80 bg-white border-l shadow-lg flex flex-col">
+            <div class="w-80 xl:w-96 bg-white border-l shadow-lg flex flex-col min-w-0">
             <!-- 에디터 헤더 -->
             <template x-if="selectedNode">
-                <div class="p-4 border-b bg-white">
+                <div class="p-3 border-b bg-white">
                     <div class="flex items-center justify-between">
                         <div class="flex-1">
                             <input 
@@ -426,53 +842,122 @@
                                 class="text-lg font-semibold bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-2 py-1 w-full"
                                 placeholder="노드 제목을 입력하세요"
                             >
-                        <div class="flex items-center space-x-4 mt-2 text-sm text-gray-600">
-                            <div class="flex items-center space-x-2">
-                                <span>타입:</span>
-                                <select 
-                                    x-model="selectedNode.node_type"
-                                    @change="saveNodeType()"
-                                    class="border border-gray-300 rounded px-2 py-1 text-xs"
-                                >
-                                    <option value="memo">📝 메모</option>
-                                    <option value="folder">📁 폴더</option>
-                                    <option value="chapter">📖 챕터</option>
-                                    <option value="character">👤 캐릭터</option>
-                                    <option value="plot">📋 플롯</option>
-                                </select>
+                        <div class="mt-3">
+                            <!-- 타입/상태와 저장/삭제를 좌우로 배치 -->
+                            <div class="flex items-start gap-4">
+                                <!-- 왼쪽: 타입과 상태 -->
+                                <div class="flex-1 space-y-4">
+                                    <!-- 타입 선택 -->
+                                    <div>
+                                        <label class="block text-xs font-medium text-gray-500 mb-1">타입</label>
+                                        <div class="custom-dropdown" x-data="{ open: false }" @click.away="open = false">
+                                            <button 
+                                                class="dropdown-button text-sm"
+                                                :class="{ 'active': open }"
+                                                @click="open = !open"
+                                            >
+                                                <span class="flex items-center">
+                                                    <span class="dropdown-item-icon" x-text="getNodeIcon(selectedNode.node_type)"></span>
+                                                    <span x-text="getNodeTypeLabel(selectedNode.node_type)"></span>
+                                                </span>
+                                                <i class="fas fa-chevron-down transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+                                            </button>
+                                            
+                                            <div x-show="open" x-transition class="dropdown-content">
+                                                <div class="dropdown-item" @click="selectedNode.node_type = 'memo'; saveNodeType(); open = false">
+                                                    <span class="dropdown-item-icon">📝</span>
+                                                    <span>메모</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.node_type = 'folder'; saveNodeType(); open = false">
+                                                    <span class="dropdown-item-icon">📁</span>
+                                                    <span>폴더</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.node_type = 'chapter'; saveNodeType(); open = false">
+                                                    <span class="dropdown-item-icon">📖</span>
+                                                    <span>챕터</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.node_type = 'character'; saveNodeType(); open = false">
+                                                    <span class="dropdown-item-icon">👤</span>
+                                                    <span>캐릭터</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.node_type = 'plot'; saveNodeType(); open = false">
+                                                    <span class="dropdown-item-icon">📋</span>
+                                                    <span>플롯</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- 상태 선택 -->
+                                    <div>
+                                        <label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
+                                        <div class="custom-dropdown" x-data="{ open: false }" @click.away="open = false">
+                                            <button 
+                                                class="dropdown-button text-sm"
+                                                :class="{ 'active': open }"
+                                                @click="open = !open"
+                                            >
+                                                <span class="flex items-center">
+                                                    <span class="dropdown-item-icon" x-text="getStatusIcon(selectedNode.status)"></span>
+                                                    <span x-text="getStatusLabel(selectedNode.status)"></span>
+                                                </span>
+                                                <i class="fas fa-chevron-down transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+                                            </button>
+                                            
+                                            <div x-show="open" x-transition class="dropdown-content">
+                                                <div class="dropdown-item" @click="selectedNode.status = 'draft'; saveNodeStatus(); open = false">
+                                                    <span class="dropdown-item-icon">📝</span>
+                                                    <span>초안</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.status = 'writing'; saveNodeStatus(); open = false">
+                                                    <span class="dropdown-item-icon">✍️</span>
+                                                    <span>작성중</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.status = 'review'; saveNodeStatus(); open = false">
+                                                    <span class="dropdown-item-icon">👀</span>
+                                                    <span>검토중</span>
+                                                </div>
+                                                <div class="dropdown-item" @click="selectedNode.status = 'complete'; saveNodeStatus(); open = false">
+                                                    <span class="dropdown-item-icon">✅</span>
+                                                    <span>완료</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- 오른쪽: 저장과 삭제 -->
+                                <div class="flex flex-col space-y-4">
+                                    <!-- 저장 버튼 (타입과 같은 높이) -->
+                                    <div class="flex flex-col">
+                                        <div class="h-4 mb-1"></div> <!-- 라벨 높이만큼 여백 -->
+                                        <button 
+                                            @click="saveNode()"
+                                            class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center whitespace-nowrap min-h-[34px]"
+                                        >
+                                            <i class="fas fa-save mr-2"></i>저장
+                                        </button>
+                                    </div>
+                                    
+                                    <!-- 삭제 버튼 (상태와 같은 높이) -->
+                                    <div class="flex flex-col">
+                                        <div class="h-4 mb-1"></div> <!-- 라벨 높이만큼 여백 -->
+                                        <button 
+                                            @click="deleteNode(selectedNode.id)"
+                                            class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors duration-200 flex items-center justify-center whitespace-nowrap min-h-[34px]"
+                                        >
+                                            <i class="fas fa-trash mr-2"></i>삭제
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="flex items-center space-x-2">
-                                <span>상태:</span>
-                                <select 
-                                    x-model="selectedNode.status"
-                                    @change="saveNodeStatus()"
-                                    class="border border-gray-300 rounded px-2 py-1 text-xs"
-                                >
-                                    <option value="draft">📝 초안</option>
-                                    <option value="writing">✍️ 작성중</option>
-                                    <option value="review">👀 검토중</option>
-                                    <option value="complete">✅ 완료</option>
-                                </select>
-                            </div>
-                            <div x-show="selectedNode?.word_count > 0" class="text-xs">
+                            
+                            <!-- 단어 수 표시 -->
+                            <div x-show="selectedNode?.word_count > 0" class="text-xs text-gray-500 mt-3">
                                 <span x-text="`${selectedNode?.word_count || 0} 단어`"></span>
                             </div>
                         </div>
                     </div>
-                    <div class="flex space-x-2">
-                        <button 
-                            @click="saveNode()"
-                            class="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700"
-                        >
-                            <i class="fas fa-save mr-1"></i> 저장
-                        </button>
-                        <button 
-                            @click="deleteNode(selectedNode.id)"
-                            class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
-                        >
-                            <i class="fas fa-trash mr-1"></i> 삭제
-                        </button>
-                    </div>
                 </div>
             </template>
             
@@ -561,50 +1046,151 @@
         </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 x-show="showMobileEditModal && selectedNode" 
+         class="lg:hidden fixed inset-0 bg-black bg-opacity-50 flex items-end justify-center z-50"
+         @click.self="showMobileEditModal = false">
+        <div class="bg-white rounded-t-xl w-full max-h-[80vh] overflow-y-auto">
+            <!-- 모달 헤더 -->
+            <div class="flex items-center justify-between p-4 border-b sticky top-0 bg-white">
+                <h3 class="text-lg font-semibold">노드 편집</h3>
+                <button @click="showMobileEditModal = false" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            
+            <!-- 모달 내용 (데스크톱 편집 패널과 동일) -->
+            <div class="p-4" x-show="selectedNode">
+                <!-- 노드 제목 -->
                 <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"
+                        type="text"
+                        x-model="selectedNode.title"
+                        @blur="saveNodeTitle()"
+                        class="text-lg font-semibold bg-transparent border-b-2 border-gray-200 focus:outline-none focus:border-blue-500 w-full pb-2"
+                        placeholder="노드 제목을 입력하세요"
                     >
                 </div>
-                <div class="mb-6">
-                    <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 class="flex items-start gap-4 mb-4">
+                    <!-- 왼쪽: 타입과 상태 -->
+                    <div class="flex-1 space-y-4">
+                        <!-- 타입 선택 -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">타입</label>
+                            <div class="custom-dropdown" x-data="{ open: false }" @click.away="open = false">
+                                <button 
+                                    class="dropdown-button text-sm"
+                                    :class="{ 'active': open }"
+                                    @click="open = !open"
+                                >
+                                    <span class="flex items-center">
+                                        <span class="dropdown-item-icon" x-text="getNodeIcon(selectedNode.node_type)"></span>
+                                        <span x-text="getNodeTypeLabel(selectedNode.node_type)"></span>
+                                    </span>
+                                    <i class="fas fa-chevron-down transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+                                </button>
+                                
+                                <div x-show="open" x-transition class="dropdown-content">
+                                    <div class="dropdown-item" @click="selectedNode.node_type = 'memo'; saveNodeType(); open = false">
+                                        <span class="dropdown-item-icon">📝</span>
+                                        <span>메모</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.node_type = 'folder'; saveNodeType(); open = false">
+                                        <span class="dropdown-item-icon">📁</span>
+                                        <span>폴더</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.node_type = 'chapter'; saveNodeType(); open = false">
+                                        <span class="dropdown-item-icon">📖</span>
+                                        <span>챕터</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.node_type = 'character'; saveNodeType(); open = false">
+                                        <span class="dropdown-item-icon">👤</span>
+                                        <span>캐릭터</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.node_type = 'plot'; saveNodeType(); open = false">
+                                        <span class="dropdown-item-icon">📋</span>
+                                        <span>플롯</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- 상태 선택 -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
+                            <div class="custom-dropdown" x-data="{ open: false }" @click.away="open = false">
+                                <button 
+                                    class="dropdown-button text-sm"
+                                    :class="{ 'active': open }"
+                                    @click="open = !open"
+                                >
+                                    <span class="flex items-center">
+                                        <span class="dropdown-item-icon" x-text="getStatusIcon(selectedNode.status)"></span>
+                                        <span x-text="getStatusLabel(selectedNode.status)"></span>
+                                    </span>
+                                    <i class="fas fa-chevron-down transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+                                </button>
+                                
+                                <div x-show="open" x-transition class="dropdown-content">
+                                    <div class="dropdown-item" @click="selectedNode.status = 'draft'; saveNodeStatus(); open = false">
+                                        <span class="dropdown-item-icon">📝</span>
+                                        <span>초안</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.status = 'writing'; saveNodeStatus(); open = false">
+                                        <span class="dropdown-item-icon">✍️</span>
+                                        <span>작성중</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.status = 'review'; saveNodeStatus(); open = false">
+                                        <span class="dropdown-item-icon">👀</span>
+                                        <span>검토중</span>
+                                    </div>
+                                    <div class="dropdown-item" @click="selectedNode.status = 'complete'; saveNodeStatus(); open = false">
+                                        <span class="dropdown-item-icon">✅</span>
+                                        <span>완료</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 오른쪽: 저장과 삭제 -->
+                    <div class="flex flex-col space-y-4">
+                        <!-- 저장 버튼 -->
+                        <div class="flex flex-col">
+                            <div class="h-4 mb-1"></div>
+                            <button 
+                                @click="saveNode(); showMobileEditModal = false"
+                                class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center whitespace-nowrap min-h-[34px]"
+                            >
+                                <i class="fas fa-save mr-2"></i>저장
+                            </button>
+                        </div>
+                        
+                        <!-- 삭제 버튼 -->
+                        <div class="flex flex-col">
+                            <div class="h-4 mb-1"></div>
+                            <button 
+                                @click="deleteNode(selectedNode.id); showMobileEditModal = false"
+                                class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors duration-200 flex items-center justify-center whitespace-nowrap min-h-[34px]"
+                            >
+                                <i class="fas fa-trash mr-2"></i>삭제
+                            </button>
+                        </div>
+                    </div>
                 </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 class="border rounded-lg overflow-hidden">
+                    <div class="h-64" id="mobile-editor-container"></div>
                 </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 x-show="selectedNode?.word_count > 0" class="text-xs text-gray-500 mt-3 text-center">
+                    <span x-text="`${selectedNode?.word_count || 0} 단어`"></span>
                 </div>
-            </form>
+            </div>
         </div>
     </div>
 
@@ -624,11 +1210,11 @@
         // 스크립트들을 순차적으로 로드
         async function loadScripts() {
             try {
-                await loadScript('static/js/api.js?v=2025012290');
+                await loadScript('static/js/api.js?v=2025012380');
                 console.log('✅ API 스크립트 로드 완료');
-                await loadScript('static/js/auth.js?v=2025012240');
+                await loadScript('static/js/auth.js?v=2025012351');
                 console.log('✅ Auth 스크립트 로드 완료');
-                await loadScript('static/js/memo-tree.js?v=2025012280');
+                await loadScript('static/js/memo-tree.js?v=2025012359');
                 console.log('✅ Memo Tree 스크립트 로드 완료');
                 
                 // 모든 스크립트 로드 완료 후 Alpine.js 로드
diff --git a/frontend/static/js/api.js b/frontend/static/js/api.js
index 8228d22..e62b24a 100644
--- a/frontend/static/js/api.js
+++ b/frontend/static/js/api.js
@@ -3,8 +3,12 @@
  */
 class DocumentServerAPI {
     constructor() {
-        this.baseURL = '/api';  // Nginx 프록시를 통해 접근
+        // 도커 백엔드 API (24102 포트)
+        this.baseURL = 'http://localhost:24102/api';
         this.token = localStorage.getItem('access_token');
+        
+        console.log('🐳 API Base URL (DOCKER BACKEND):', this.baseURL);
+        console.log('🔧 도커 환경 설정 완료 - 버전 2025012380');
     }
 
     // 토큰 설정
@@ -184,6 +188,10 @@ class DocumentServerAPI {
         return await this.uploadFile('/documents/', formData);
     }
 
+    async updateDocument(documentId, updateData) {
+        return await this.put(`/documents/${documentId}`, updateData);
+    }
+
     async deleteDocument(documentId) {
         return await this.delete(`/documents/${documentId}`);
     }
diff --git a/frontend/static/js/auth.js b/frontend/static/js/auth.js
index 9c9ec22..0bdae79 100644
--- a/frontend/static/js/auth.js
+++ b/frontend/static/js/auth.js
@@ -17,26 +17,40 @@ window.authModal = () => ({
         this.loginError = '';
 
         try {
-            // 실제 API 호출
-            const response = await window.api.login(this.loginForm.email, this.loginForm.password);
+            console.log('🔐 로그인 시도:', this.loginForm.email);
             
-            // 토큰 저장
-            window.api.setToken(response.access_token);
-            localStorage.setItem('refresh_token', response.refresh_token);
+            // API 클래스의 login 메서드 사용 (이미 토큰 설정과 사용자 정보 가져오기 포함)
+            const result = await window.api.login(this.loginForm.email, this.loginForm.password);
             
-            // 사용자 정보 가져오기
-            const userResponse = await window.api.getCurrentUser();
+            console.log('✅ 로그인 결과:', result);
             
-            // 전역 상태 업데이트
-            window.dispatchEvent(new CustomEvent('auth-changed', { 
-                detail: { isAuthenticated: true, user: userResponse } 
-            }));
-            
-            // 모달 닫기 (부모 컴포넌트의 상태 변경)
-            window.dispatchEvent(new CustomEvent('close-login-modal'));
-            this.loginForm = { email: '', password: '' };
+            if (result.success) {
+                // refresh_token 저장 (access_token은 API 클래스에서 이미 처리됨)
+                const loginResponse = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(this.loginForm)
+                });
+                const tokenData = await loginResponse.json();
+                localStorage.setItem('refresh_token', tokenData.refresh_token);
+                
+                console.log('💾 토큰 저장 완료');
+                
+                // 전역 상태 업데이트
+                window.dispatchEvent(new CustomEvent('auth-changed', { 
+                    detail: { isAuthenticated: true, user: result.user } 
+                }));
+                
+                // 모달 닫기
+                window.dispatchEvent(new CustomEvent('close-login-modal'));
+                this.loginForm = { email: '', password: '' };
+                
+            } else {
+                this.loginError = result.message || '로그인에 실패했습니다';
+            }
             
         } catch (error) {
+            console.error('❌ 로그인 오류:', error);
             this.loginError = error.message || '로그인에 실패했습니다';
         } finally {
             this.loginLoading = false;
diff --git a/frontend/static/js/book-documents.js b/frontend/static/js/book-documents.js
new file mode 100644
index 0000000..c236cda
--- /dev/null
+++ b/frontend/static/js/book-documents.js
@@ -0,0 +1,180 @@
+// 서적 문서 목록 애플리케이션 컴포넌트
+window.bookDocumentsApp = () => ({
+    // 상태 관리
+    documents: [],
+    bookInfo: {},
+    loading: false,
+    error: '',
+    
+    // 인증 상태
+    isAuthenticated: false,
+    currentUser: null,
+    
+    // URL 파라미터
+    bookId: null,
+    
+    // 초기화
+    async init() {
+        console.log('🚀 Book Documents App 초기화 시작');
+        
+        // URL 파라미터 파싱
+        this.parseUrlParams();
+        
+        // 인증 상태 확인
+        await this.checkAuthStatus();
+        
+        if (this.isAuthenticated) {
+            await this.loadBookDocuments();
+        }
+        
+        // 헤더 로드
+        await this.loadHeader();
+    },
+    
+    // URL 파라미터 파싱
+    parseUrlParams() {
+        const urlParams = new URLSearchParams(window.location.search);
+        this.bookId = urlParams.get('bookId');
+        console.log('📖 서적 ID:', this.bookId);
+    },
+    
+    // 인증 상태 확인
+    async checkAuthStatus() {
+        try {
+            const user = await window.api.getCurrentUser();
+            this.isAuthenticated = true;
+            this.currentUser = user;
+            console.log('✅ 인증됨:', user.username);
+        } catch (error) {
+            console.log('❌ 인증되지 않음');
+            this.isAuthenticated = false;
+            this.currentUser = null;
+            // 로그인 페이지로 리다이렉트하거나 로그인 모달 표시
+            window.location.href = '/login.html';
+        }
+    },
+    
+    // 헤더 로드
+    async loadHeader() {
+        try {
+            await window.headerLoader.loadHeader();
+        } catch (error) {
+            console.error('헤더 로드 실패:', error);
+        }
+    },
+    
+    // 서적 문서 목록 로드
+    async loadBookDocuments() {
+        this.loading = true;
+        this.error = '';
+        
+        try {
+            // 모든 문서 가져오기
+            const allDocuments = await window.api.getDocuments();
+            
+            if (this.bookId === 'none') {
+                // 서적 미분류 문서들
+                this.documents = allDocuments.filter(doc => !doc.book_id);
+                this.bookInfo = {
+                    title: '서적 미분류',
+                    description: '서적에 속하지 않은 문서들입니다.'
+                };
+            } else {
+                // 특정 서적의 문서들
+                this.documents = allDocuments.filter(doc => doc.book_id === this.bookId);
+                
+                if (this.documents.length > 0) {
+                    // 첫 번째 문서에서 서적 정보 추출
+                    const firstDoc = this.documents[0];
+                    this.bookInfo = {
+                        id: firstDoc.book_id,
+                        title: firstDoc.book_title,
+                        author: firstDoc.book_author,
+                        description: firstDoc.book_description || '서적 설명이 없습니다.'
+                    };
+                } else {
+                    // 서적 정보만 가져오기 (문서가 없는 경우)
+                    try {
+                        this.bookInfo = await window.api.getBook(this.bookId);
+                    } catch (error) {
+                        console.error('서적 정보 로드 실패:', error);
+                        this.bookInfo = {
+                            title: '알 수 없는 서적',
+                            description: '서적 정보를 불러올 수 없습니다.'
+                        };
+                    }
+                }
+            }
+            
+            console.log('📚 서적 문서 로드 완료:', this.documents.length, '개');
+        } catch (error) {
+            console.error('서적 문서 로드 실패:', error);
+            this.error = '문서를 불러오는데 실패했습니다: ' + error.message;
+            this.documents = [];
+        } finally {
+            this.loading = false;
+        }
+    },
+    
+    // 문서 열기
+    openDocument(documentId) {
+        // 현재 페이지 정보를 세션 스토리지에 저장
+        sessionStorage.setItem('previousPage', 'book-documents.html');
+        
+        // 뷰어로 이동
+        window.open(`/viewer.html?id=${documentId}&from=book`, '_blank');
+    },
+    
+    // 문서 수정
+    editDocument(doc) {
+        // TODO: 문서 수정 모달 또는 페이지로 이동
+        console.log('문서 수정:', doc.title);
+        alert('문서 수정 기능은 준비 중입니다.');
+    },
+    
+    // 문서 삭제
+    async deleteDocument(documentId) {
+        if (!confirm('이 문서를 삭제하시겠습니까?')) {
+            return;
+        }
+        
+        try {
+            await window.api.deleteDocument(documentId);
+            await this.loadBookDocuments(); // 목록 새로고침
+            this.showNotification('문서가 삭제되었습니다', 'success');
+        } catch (error) {
+            console.error('문서 삭제 실패:', error);
+            this.showNotification('문서 삭제에 실패했습니다: ' + error.message, 'error');
+        }
+    },
+    
+    // 뒤로가기
+    goBack() {
+        window.location.href = 'index.html';
+    },
+    
+    // 날짜 포맷팅
+    formatDate(dateString) {
+        if (!dateString) return '';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('ko-KR', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    },
+    
+    // 알림 표시
+    showNotification(message, type = 'info') {
+        // TODO: 알림 시스템 구현
+        console.log(`${type.toUpperCase()}: ${message}`);
+        if (type === 'error') {
+            alert(message);
+        }
+    }
+});
+
+// 페이지 로드 시 초기화
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('📄 Book Documents 페이지 로드됨');
+});
diff --git a/frontend/static/js/header-loader.js b/frontend/static/js/header-loader.js
new file mode 100644
index 0000000..a316ec5
--- /dev/null
+++ b/frontend/static/js/header-loader.js
@@ -0,0 +1,159 @@
+/**
+ * 공통 헤더 로더
+ * 모든 페이지에서 동일한 헤더를 로드하기 위한 유틸리티
+ */
+
+class HeaderLoader {
+    constructor() {
+        this.headerLoaded = false;
+    }
+
+    /**
+     * 헤더 HTML을 로드하고 삽입
+     */
+    async loadHeader(targetSelector = '#header-container') {
+        if (this.headerLoaded) {
+            console.log('✅ 헤더가 이미 로드됨');
+            return;
+        }
+
+        try {
+            console.log('🔄 헤더 로딩 중...');
+            
+            const response = await fetch('components/header.html?v=2025012352');
+            if (!response.ok) {
+                throw new Error(`헤더 로드 실패: ${response.status}`);
+            }
+            
+            const headerHtml = await response.text();
+            
+            // 헤더 컨테이너 찾기
+            const container = document.querySelector(targetSelector);
+            if (!container) {
+                throw new Error(`헤더 컨테이너를 찾을 수 없음: ${targetSelector}`);
+            }
+            
+            // 헤더 HTML 삽입
+            container.innerHTML = headerHtml;
+            
+            this.headerLoaded = true;
+            console.log('✅ 헤더 로드 완료');
+            
+            // 헤더 로드 완료 이벤트 발생
+            document.dispatchEvent(new CustomEvent('headerLoaded'));
+            
+        } catch (error) {
+            console.error('❌ 헤더 로드 오류:', error);
+            this.showFallbackHeader(targetSelector);
+        }
+    }
+
+    /**
+     * 헤더 로드 실패 시 폴백 헤더 표시
+     */
+    showFallbackHeader(targetSelector) {
+        const container = document.querySelector(targetSelector);
+        if (container) {
+            container.innerHTML = `
+                <header class="bg-white border-b border-gray-200 shadow-sm">
+                    <div class="max-w-full 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-2">
+                                <i class="fas fa-book text-blue-600 text-xl"></i>
+                                <h1 class="text-xl font-bold text-gray-900">Document Server</h1>
+                            </div>
+                            <nav class="flex space-x-6">
+                                <a href="index.html" class="text-gray-600 hover:text-blue-600">📁 문서 관리</a>
+                                <a href="memo-tree.html" class="text-gray-600 hover:text-blue-600">🌳 메모장</a>
+                            </nav>
+                        </div>
+                    </div>
+                </header>
+            `;
+        }
+    }
+
+    /**
+     * 현재 페이지 정보 가져오기
+     */
+    getCurrentPageInfo() {
+        const path = window.location.pathname;
+        const filename = path.split('/').pop().replace('.html', '') || 'index';
+        
+        const pageInfo = {
+            filename,
+            isDocumentPage: ['index', 'hierarchy'].includes(filename),
+            isMemoPage: ['memo-tree', 'story-view'].includes(filename)
+        };
+        
+        return pageInfo;
+    }
+
+    /**
+     * 페이지별 활성 상태 업데이트
+     */
+    updateActiveStates() {
+        const pageInfo = this.getCurrentPageInfo();
+        
+        // 모든 활성 클래스 제거
+        document.querySelectorAll('.nav-link, .nav-dropdown-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        
+        // 현재 페이지에 따라 활성 상태 설정
+        console.log('현재 페이지:', pageInfo.filename);
+        
+        if (pageInfo.isDocumentPage) {
+            const docLink = document.getElementById('doc-nav-link');
+            if (docLink) {
+                docLink.classList.add('active');
+                console.log('문서 관리 메뉴 활성화');
+            }
+        }
+        
+        if (pageInfo.isMemoPage) {
+            const memoLink = document.getElementById('memo-nav-link');
+            if (memoLink) {
+                memoLink.classList.add('active');
+                console.log('메모장 메뉴 활성화');
+            }
+        }
+        
+        // 특정 페이지 드롭다운 아이템 활성화
+        const pageItemMap = {
+            'index': 'index-nav-item',
+            'hierarchy': 'hierarchy-nav-item',
+            'memo-tree': 'memo-tree-nav-item',
+            'story-view': 'story-view-nav-item'
+        };
+        
+        const itemId = pageItemMap[pageInfo.filename];
+        if (itemId) {
+            const item = document.getElementById(itemId);
+            if (item) {
+                item.classList.add('active');
+                console.log(`${pageInfo.filename} 페이지 아이템 활성화`);
+            }
+        }
+    }
+}
+
+// 전역 인스턴스 생성
+window.headerLoader = new HeaderLoader();
+
+// DOM 로드 완료 시 자동 초기화
+document.addEventListener('DOMContentLoaded', () => {
+    window.headerLoader.loadHeader();
+});
+
+// 헤더 로드 완료 후 활성 상태 업데이트
+document.addEventListener('headerLoaded', () => {
+    setTimeout(() => {
+        window.headerLoader.updateActiveStates();
+        
+        // 사용자 메뉴 초기 상태 설정 (로그아웃 상태로 시작)
+        if (typeof window.updateUserMenu === 'function') {
+            window.updateUserMenu(null);
+        }
+    }, 100);
+});
diff --git a/frontend/static/js/hierarchy.js b/frontend/static/js/hierarchy.js
deleted file mode 100644
index b0e550c..0000000
--- a/frontend/static/js/hierarchy.js
+++ /dev/null
@@ -1,1250 +0,0 @@
-// 계층구조 뷰 전용 JavaScript
-
-// 메인 계층구조 앱
-window.hierarchyApp = function() {
-    return {
-        // 상태 관리
-        currentUser: null,
-        hierarchy: { books: {}, uncategorized: [] },
-        loading: false,
-        searchQuery: '',
-        
-        // UI 상태
-        expandedBooks: [],
-        expandedCategories: [],
-        expandedUncategorizedInBooks: [],
-        showUncategorized: false,
-        showUploadModal: false,
-        showLoginModal: false,
-        
-        // 선택된 문서
-        selectedDocument: null,
-        documentContent: null,
-        loadingDocument: false,
-        
-        // 하이라이트 & 메모
-        highlights: [],
-        notes: [],
-        selectedText: '',
-        showHighlightMenu: false,
-        highlightMenuPosition: { x: 0, y: 0 },
-        highlightMode: false, // 하이라이트 모드 토글
-        
-        // 메모 사이드바
-        memoSearchQuery: '',
-        filteredNotes: [],
-        
-        // 플로팅 메모창
-        showFloatingMemo: false,
-        floatingMemoPosition: { x: 100, y: 100 },
-        floatingMemoSize: { width: 400, height: 500 },
-        isDragging: false,
-        isResizing: false,
-        dragOffset: { x: 0, y: 0 },
-        
-        // 드래그 앤 드롭
-        draggedDocument: null,
-        
-        // 초기화
-        async init() {
-            console.log('🚀 계층구조 앱 초기화 중...');
-            // 전역 인스턴스 등록
-            window.hierarchyInstance = this;
-            await this.checkAuthStatus();
-            if (this.currentUser) {
-                await this.loadHierarchy();
-            }
-            this.setupEventListeners();
-        },
-        
-        // 이벤트 리스너 설정
-        setupEventListeners() {
-            // 인증 상태 변경 이벤트
-            window.addEventListener('auth-changed', (event) => {
-                this.currentUser = event.detail.user;
-                if (this.currentUser) {
-                    this.loadHierarchy();
-                }
-            });
-            
-            // 업로드 완료 이벤트
-            window.addEventListener('upload-complete', () => {
-                this.loadHierarchy();
-            });
-        },
-        
-        // 인증 상태 확인
-        async checkAuthStatus() {
-            try {
-                const user = await window.api.getCurrentUser();
-                this.currentUser = user;
-                console.log('✅ 사용자 인증됨:', user.email);
-            } catch (error) {
-                console.log('❌ 인증되지 않음');
-                this.currentUser = null;
-            }
-        },
-        
-        // 계층구조 데이터 로드
-        async loadHierarchy() {
-            if (!this.currentUser) return;
-            
-            this.loading = true;
-            try {
-                console.log('📊 계층구조 데이터 로딩...');
-                const data = await window.api.getDocumentsHierarchy();
-                this.hierarchy = data;
-                console.log('✅ 계층구조 로드 완료:', data);
-                
-                // 첫 번째 서적과 미분류를 기본으로 펼치기
-                if (Object.keys(data.books).length > 0) {
-                    const firstBookId = Object.keys(data.books)[0];
-                    this.expandedBooks = [firstBookId];
-                }
-                if (data.uncategorized.length > 0) {
-                    this.showUncategorized = true;
-                }
-            } catch (error) {
-                console.error('❌ 계층구조 로드 실패:', error);
-            } finally {
-                this.loading = false;
-            }
-        },
-        
-        // 계층구조 새로고침
-        async refreshHierarchy() {
-            await this.loadHierarchy();
-        },
-        
-        // 서적 토글
-        toggleBook(bookId) {
-            const index = this.expandedBooks.indexOf(bookId);
-            if (index > -1) {
-                this.expandedBooks.splice(index, 1);
-            } else {
-                this.expandedBooks.push(bookId);
-            }
-        },
-        
-        // 소분류 토글
-        toggleCategory(categoryId) {
-            const index = this.expandedCategories.indexOf(categoryId);
-            if (index > -1) {
-                this.expandedCategories.splice(index, 1);
-            } else {
-                this.expandedCategories.push(categoryId);
-            }
-        },
-        
-        // 서적 내 미분류 토글
-        toggleUncategorizedInBook(bookId) {
-            const index = this.expandedUncategorizedInBooks.indexOf(bookId);
-            if (index > -1) {
-                this.expandedUncategorizedInBooks.splice(index, 1);
-            } else {
-                this.expandedUncategorizedInBooks.push(bookId);
-            }
-        },
-        
-        // 전체 미분류 토글
-        toggleUncategorized() {
-            this.showUncategorized = !this.showUncategorized;
-        },
-        
-        // 문서 열기
-        async openDocument(documentId) {
-            console.log('📄 문서 열기:', documentId);
-            this.loadingDocument = true;
-            this.documentContent = null;
-            this.highlights = [];
-            this.notes = [];
-            
-            try {
-                // 문서 정보 가져오기
-                const docInfo = await window.api.getDocument(documentId);
-                this.selectedDocument = docInfo;
-                
-                // HTML 콘텐츠 가져오기 (인증된 API 사용)
-                const content = await window.api.getDocumentContent(documentId);
-                this.documentContent = content;
-                
-                // 하이라이트 및 메모 로드
-                await this.loadHighlightsAndNotes(documentId);
-                
-                // 문서 로드 후 하이라이트 적용 (DOM이 준비될 때까지 대기)
-                setTimeout(async () => {
-                    console.log(`🎨 하이라이트 적용 시도: ${this.highlights.length}개`);
-                    this.applyHighlights();
-                    this.setupTextSelection();
-                }, 200);
-                
-                console.log('✅ 문서 로드 완료');
-            } catch (error) {
-                console.error('❌ 문서 로드 실패:', error);
-                alert('문서를 불러오는 중 오류가 발생했습니다.');
-            } finally {
-                this.loadingDocument = false;
-            }
-        },
-        
-        // 하이라이트 및 메모 로드
-        async loadHighlightsAndNotes(documentId) {
-            const self = this; // this 컨텍스트 저장
-            try {
-                console.log(`📊 하이라이트/메모 로드 시작: ${documentId}`);
-                
-                // 하이라이트 로드
-                console.log('🔍 하이라이트 API 호출 중...');
-                const highlights = await window.api.getDocumentHighlights(documentId);
-                console.log('📥 하이라이트 API 응답:', highlights);
-                
-                // 메모 로드
-                console.log('🔍 메모 API 호출 중...');
-                const notes = await window.api.getDocumentNotes(documentId);
-                console.log('📥 메모 API 응답:', notes);
-                
-                self.highlights = highlights || [];
-                self.notes = notes || [];
-                
-                // 메모 사이드바용 필터링된 노트 초기화
-                if (typeof self.filterMemos === 'function') {
-                    self.filterMemos();
-                } else {
-                    console.error('❌ filterMemos 함수를 찾을 수 없습니다');
-                    // 수동으로 필터링
-                    self.filteredNotes = self.notes.filter(note => !note.highlight_id);
-                }
-                
-                console.log(`📝 최종 저장: 하이라이트 ${self.highlights.length}개, 메모 ${self.notes.length}개`);
-                
-                if (self.highlights.length > 0) {
-                    console.log('📝 하이라이트 상세:', self.highlights.map(h => ({
-                        id: h.id,
-                        text: h.selected_text,
-                        color: h.color || h.highlight_color
-                    })));
-                }
-                
-            } catch (error) {
-                console.error('❌ 하이라이트/메모 로드 실패:', error);
-                console.error('❌ 오류 상세:', error.message, error.stack);
-                this.highlights = [];
-                this.notes = [];
-            }
-        },
-        
-        // 하이라이트 적용 (viewer.js와 동일한 로직)
-        applyHighlights() {
-            if (!this.selectedDocument || !this.highlights.length) {
-                console.log('📝 하이라이트 적용 건너뜀: 문서 없음 또는 하이라이트 없음');
-                return;
-            }
-            
-            const contentElement = document.querySelector('.prose');
-            if (!contentElement) {
-                console.log('📝 하이라이트 적용 건너뜀: .prose 요소 없음');
-                return;
-            }
-            
-            console.log(`📝 하이라이트 적용 시작: ${this.highlights.length}개`);
-            
-            // 기존 하이라이트 제거
-            contentElement.querySelectorAll('.highlight').forEach(el => {
-                const parent = el.parentNode;
-                parent.replaceChild(document.createTextNode(el.textContent), el);
-                parent.normalize();
-            });
-            
-            // 새 하이라이트 적용
-            this.highlights.forEach(highlight => {
-                this.applyHighlight(highlight);
-            });
-        },
-        
-        // 개별 하이라이트 적용 (viewer.js와 동일한 로직)
-        applyHighlight(highlight) {
-            const content = document.querySelector('.prose');
-            if (!content) return;
-            
-            const walker = document.createTreeWalker(
-                content,
-                NodeFilter.SHOW_TEXT,
-                null,
-                false
-            );
-            
-            let currentOffset = 0;
-            let node;
-            
-            while (node = walker.nextNode()) {
-                const nodeLength = node.textContent.length;
-                
-                if (currentOffset + nodeLength > highlight.start_offset) {
-                    const startInNode = Math.max(0, highlight.start_offset - currentOffset);
-                    const endInNode = Math.min(nodeLength, highlight.end_offset - currentOffset);
-                    
-                    if (startInNode < endInNode) {
-                        try {
-                            const range = document.createRange();
-                            range.setStart(node, startInNode);
-                            range.setEnd(node, endInNode);
-                            
-                            const span = document.createElement('span');
-                            span.className = `highlight cursor-pointer`;
-                            span.style.backgroundColor = highlight.color || '#FFFF00';
-                            span.dataset.highlightId = highlight.id;
-                            span.title = highlight.note || '하이라이트';
-                            
-                            // 하이라이트 클릭 이벤트
-                            span.addEventListener('click', (e) => {
-                                e.stopPropagation();
-                                this.showHighlightDetails(highlight, e.target);
-                            });
-                            
-                            range.surroundContents(span);
-                            console.log(`✅ 하이라이트 적용됨: ${highlight.selected_text}`);
-                            break;
-                        } catch (error) {
-                            console.warn('하이라이트 적용 실패:', error);
-                        }
-                    }
-                }
-                
-                currentOffset += nodeLength;
-                
-                if (currentOffset >= highlight.end_offset) {
-                    break;
-                }
-            }
-        },
-        
-        // 텍스트 선택 설정
-        setupTextSelection() {
-            console.log('🎯 텍스트 선택 이벤트 설정 중...');
-            const contentElement = document.querySelector('.prose');
-            if (!contentElement) {
-                console.warn('❌ .prose 요소를 찾을 수 없습니다');
-                return;
-            }
-            
-            contentElement.addEventListener('mouseup', (e) => {
-                console.log('🖱️ 마우스업 이벤트 발생');
-                const selection = window.getSelection();
-                if (selection.rangeCount > 0 && !selection.isCollapsed) {
-                    const range = selection.getRangeAt(0);
-                    const text = selection.toString().trim();
-                    
-                    console.log('📝 선택된 텍스트:', text);
-                    
-                    if (text.length > 0 && this.highlightMode) {
-                        this.selectedText = text;
-                        // 직접 DOM 조작으로 메뉴 표시
-                        const menu = document.getElementById('highlight-menu');
-                        if (menu) {
-                            menu.style.display = 'block';
-                            console.log('✅ 하이라이트 메뉴 표시됨');
-                        } else {
-                            console.error('❌ 하이라이트 메뉴 DOM 요소를 찾을 수 없음');
-                        }
-                    }
-                }
-            });
-            
-            // 다른 곳 클릭 시 메뉴 숨기기 (메뉴 자체 클릭은 제외)
-            document.addEventListener('click', (e) => {
-                if (!e.target.closest('#highlight-menu') && !e.target.closest('.prose')) {
-                    const menu = document.getElementById('highlight-menu');
-                    if (menu) {
-                        menu.style.display = 'none';
-                    }
-                }
-            });
-        },
-        
-        // 하이라이트 생성 (viewer.js와 동일한 로직)
-        async createHighlight(color = 'yellow') {
-            if (!this.selectedText || !this.selectedDocument) return;
-            
-            const selection = window.getSelection();
-            if (selection.rangeCount === 0) return;
-            
-            try {
-                const range = selection.getRangeAt(0);
-                const content = document.querySelector('.prose');
-                
-                // 텍스트 오프셋 계산
-                const offsets = this.calculateTextOffsets(range, content);
-                
-                // 색상 매핑
-                const colorMap = {
-                    'yellow': '#FFFF00',
-                    'blue': '#87CEEB', 
-                    'green': '#90EE90',
-                    'red': '#FFB6C1'
-                };
-                
-                const highlightData = {
-                    document_id: this.selectedDocument.id,
-                    start_offset: offsets.start,
-                    end_offset: offsets.end,
-                    selected_text: this.selectedText,
-                    color: colorMap[color] || '#FFFF00',
-                    note: null
-                };
-                
-                console.log('📝 하이라이트 생성 데이터:', highlightData);
-                
-                const newHighlight = await window.api.createHighlight(highlightData);
-                this.highlights.push(newHighlight);
-                
-                // 하이라이트 다시 렌더링
-                this.applyHighlights();
-                
-                // 선택 해제
-                selection.removeAllRanges();
-                const menu = document.getElementById('highlight-menu');
-                if (menu) {
-                    menu.style.display = 'none';
-                }
-                this.selectedText = '';
-                
-                console.log('✅ 하이라이트 생성 완료');
-                
-                // 성공 메시지
-                alert(`하이라이트가 생성되었습니다: "${this.selectedText}"`);
-                
-                // 메모 추가는 하이라이트 클릭으로만 가능하도록 변경
-                
-            } catch (error) {
-                console.error('❌ 하이라이트 생성 실패:', error);
-                alert('하이라이트 생성 중 오류가 발생했습니다.');
-            }
-        },
-        
-        // 텍스트 오프셋 계산 (viewer.js와 동일한 로직)
-        calculateTextOffsets(range, container) {
-            const walker = document.createTreeWalker(
-                container,
-                NodeFilter.SHOW_TEXT,
-                null,
-                false
-            );
-            
-            let currentOffset = 0;
-            let startOffset = -1;
-            let endOffset = -1;
-            let node;
-            
-            while (node = walker.nextNode()) {
-                const nodeLength = node.textContent.length;
-                
-                if (startOffset === -1 && node === range.startContainer) {
-                    startOffset = currentOffset + range.startOffset;
-                }
-                
-                if (endOffset === -1 && node === range.endContainer) {
-                    endOffset = currentOffset + range.endOffset;
-                    break;
-                }
-                
-                currentOffset += nodeLength;
-            }
-            
-            return {
-                start: startOffset,
-                end: endOffset
-            };
-        },
-        
-        // 텍스트 오프셋 계산 (간단한 버전)
-        getTextOffset(container, offset) {
-            const contentElement = document.querySelector('.prose');
-            if (!contentElement) return 0;
-            
-            const walker = document.createTreeWalker(
-                contentElement,
-                NodeFilter.SHOW_TEXT,
-                null,
-                false
-            );
-            
-            let textOffset = 0;
-            let node;
-            
-            while (node = walker.nextNode()) {
-                if (node === container) {
-                    return textOffset + offset;
-                }
-                textOffset += node.textContent.length;
-            }
-            
-            return textOffset;
-        },
-        
-        // 하이라이트에서 Range 생성 (간단한 버전)
-        createRangeFromHighlight(highlight) {
-            const contentElement = document.querySelector('.prose');
-            if (!contentElement) return null;
-            
-            const walker = document.createTreeWalker(
-                contentElement,
-                NodeFilter.SHOW_TEXT,
-                null,
-                false
-            );
-            
-            let currentOffset = 0;
-            let startNode = null, startOffset = 0;
-            let endNode = null, endOffset = 0;
-            let node;
-            
-            while (node = walker.nextNode()) {
-                const nodeLength = node.textContent.length;
-                
-                if (!startNode && currentOffset + nodeLength > highlight.start_offset) {
-                    startNode = node;
-                    startOffset = highlight.start_offset - currentOffset;
-                }
-                
-                if (!endNode && currentOffset + nodeLength >= highlight.end_offset) {
-                    endNode = node;
-                    endOffset = highlight.end_offset - currentOffset;
-                    break;
-                }
-                
-                currentOffset += nodeLength;
-            }
-            
-            if (startNode && endNode) {
-                const range = document.createRange();
-                range.setStart(startNode, startOffset);
-                range.setEnd(endNode, endOffset);
-                return range;
-            }
-            
-            return null;
-        },
-        
-        // 하이라이트 상세 정보 표시 (viewer.js와 동일한 툴팁 방식)
-        showHighlightDetails(highlight, element) {
-            // 기존 툴팁 제거
-            this.hideTooltip();
-            
-            const tooltip = document.createElement('div');
-            tooltip.id = 'highlight-tooltip';
-            tooltip.className = 'absolute bg-white border border-gray-300 rounded-lg shadow-lg p-4 z-50 max-w-sm';
-            tooltip.style.minWidth = '300px';
-            
-            // 하이라이트 정보와 메모 표시
-            const highlightNotes = this.notes.filter(note => note.highlight_id === highlight.id);
-            
-            tooltip.innerHTML = `
-                <div class="mb-3">
-                    <div class="text-sm text-gray-600 mb-1">선택된 텍스트</div>
-                    <div class="font-medium text-gray-900 bg-yellow-100 px-2 py-1 rounded">
-                        "${highlight.selected_text}"
-                    </div>
-                </div>
-                
-                <div class="mb-3">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-sm font-medium text-gray-700">메모 (${highlightNotes.length})</span>
-                        <button onclick="window.hierarchyInstance.showAddNoteForm('${highlight.id}')" 
-                                class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600">
-                            + 메모 추가
-                        </button>
-                    </div>
-                    
-                    <div id="notes-list" class="space-y-2 max-h-40 overflow-y-auto">
-                        ${highlightNotes.length > 0 ? 
-                            highlightNotes.map(note => `
-                                <div class="bg-gray-50 p-2 rounded text-sm">
-                                    <div class="text-gray-800">${note.content}</div>
-                                    <div class="flex justify-between items-center mt-1">
-                                        <span class="text-xs text-gray-500">${new Date(note.created_at).toLocaleDateString()}</span>
-                                        <div class="space-x-1">
-                                            <button onclick="window.hierarchyInstance.editNote('${note.id}', '${note.content.replace(/'/g, "\\'")}')" 
-                                                    class="text-xs text-blue-600 hover:text-blue-800">수정</button>
-                                            <button onclick="window.hierarchyInstance.deleteNote('${note.id}')" 
-                                                    class="text-xs text-red-600 hover:text-red-800">삭제</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            `).join('') 
-                            : '<div class="text-gray-500 text-sm text-center py-2">메모가 없습니다</div>'
-                        }
-                    </div>
-                </div>
-                
-                <div class="flex justify-between pt-2 border-t">
-                    <button onclick="window.hierarchyInstance.deleteHighlight('${highlight.id}')" 
-                            class="text-xs bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
-                        하이라이트 삭제
-                    </button>
-                    <button onclick="window.hierarchyInstance.hideTooltip()" 
-                            class="text-xs bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600">
-                        닫기
-                    </button>
-                </div>
-            `;
-            
-            document.body.appendChild(tooltip);
-            
-            // 위치 계산
-            const rect = element.getBoundingClientRect();
-            const tooltipRect = tooltip.getBoundingClientRect();
-            
-            let top = rect.bottom + window.scrollY + 10;
-            let left = rect.left + window.scrollX;
-            
-            // 화면 경계 체크
-            if (left + tooltipRect.width > window.innerWidth) {
-                left = window.innerWidth - tooltipRect.width - 10;
-            }
-            if (top + tooltipRect.height > window.innerHeight + window.scrollY) {
-                top = rect.top + window.scrollY - tooltipRect.height - 10;
-            }
-            
-            tooltip.style.top = top + 'px';
-            tooltip.style.left = left + 'px';
-            
-            // 외부 클릭 시 닫기
-            setTimeout(() => {
-                document.addEventListener('click', this.handleTooltipOutsideClick.bind(this));
-            }, 100);
-        },
-        
-        // 툴팁 숨기기
-        hideTooltip() {
-            const tooltip = document.getElementById('highlight-tooltip');
-            if (tooltip) {
-                tooltip.remove();
-            }
-            document.removeEventListener('click', this.handleTooltipOutsideClick.bind(this));
-        },
-        
-        // 툴팁 외부 클릭 처리
-        handleTooltipOutsideClick(e) {
-            if (!e.target.closest('#highlight-tooltip')) {
-                this.hideTooltip();
-            }
-        },
-        
-        // 메모 추가 폼 표시
-        showAddNoteForm(highlightId) {
-            const tooltip = document.getElementById('highlight-tooltip');
-            if (!tooltip) return;
-            
-            const notesList = tooltip.querySelector('#notes-list');
-            notesList.innerHTML = `
-                <div class="bg-blue-50 p-3 rounded">
-                    <div class="mb-2">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">새 메모</label>
-                        <textarea id="new-note-content" 
-                                  class="w-full px-2 py-1 border border-gray-300 rounded text-sm" 
-                                  rows="3" 
-                                  placeholder="메모를 입력하세요..."></textarea>
-                    </div>
-                    <div class="flex justify-end space-x-2">
-                        <button onclick="window.hierarchyInstance.cancelAddNote('${highlightId}')" 
-                                class="text-xs bg-gray-500 text-white px-2 py-1 rounded hover:bg-gray-600">
-                            취소
-                        </button>
-                        <button onclick="window.hierarchyInstance.saveNewNote('${highlightId}')" 
-                                class="text-xs bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600">
-                            저장
-                        </button>
-                    </div>
-                </div>
-            `;
-        },
-        
-        // 새 메모 저장
-        async saveNewNote(highlightId) {
-            const content = document.getElementById('new-note-content').value.trim();
-            if (!content) {
-                alert('메모 내용을 입력해주세요');
-                return;
-            }
-            
-            try {
-                const noteData = {
-                    highlight_id: highlightId,
-                    content: content,
-                    is_private: false,
-                    tags: []
-                };
-                
-                const newNote = await window.api.createNote(noteData);
-                
-                // 로컬 데이터 업데이트
-                this.notes.push(newNote);
-                
-                // 툴팁 새로고침
-                const highlight = this.highlights.find(h => h.id === highlightId);
-                if (highlight) {
-                    const element = document.querySelector(`[data-highlight-id="${highlightId}"]`);
-                    if (element) {
-                        this.showHighlightDetails(highlight, element);
-                    }
-                }
-                
-            } catch (error) {
-                console.error('Failed to save note:', error);
-                alert('메모 저장에 실패했습니다');
-            }
-        },
-        
-        // 메모 추가 취소
-        cancelAddNote(highlightId) {
-            const highlight = this.highlights.find(h => h.id === highlightId);
-            if (highlight) {
-                const element = document.querySelector(`[data-highlight-id="${highlightId}"]`);
-                if (element) {
-                    this.showHighlightDetails(highlight, element);
-                }
-            }
-        },
-        
-        // 메모 수정
-        editNote(noteId, currentContent) {
-            const newContent = prompt('메모를 수정하세요:', currentContent);
-            if (newContent !== null && newContent.trim() !== currentContent) {
-                this.updateNote(noteId, newContent.trim());
-            }
-        },
-        
-        // 메모 업데이트
-        async updateNote(noteId, content) {
-            try {
-                await window.api.updateNote(noteId, { content });
-                
-                // 로컬 데이터 업데이트
-                const note = this.notes.find(n => n.id === noteId);
-                if (note) {
-                    note.content = content;
-                }
-                
-                // 툴팁 새로고침
-                const highlight = this.highlights.find(h => 
-                    this.notes.some(n => n.id === noteId && n.highlight_id === h.id)
-                );
-                if (highlight) {
-                    const element = document.querySelector(`[data-highlight-id="${highlight.id}"]`);
-                    if (element) {
-                        this.showHighlightDetails(highlight, element);
-                    }
-                }
-                
-            } catch (error) {
-                console.error('Failed to update note:', error);
-                alert('메모 수정에 실패했습니다');
-            }
-        },
-        
-        // 메모 삭제
-        async deleteNote(noteId) {
-            if (!confirm('이 메모를 삭제하시겠습니까?')) {
-                return;
-            }
-            
-            try {
-                await window.api.deleteNote(noteId);
-                
-                // 로컬 데이터에서 제거
-                this.notes = this.notes.filter(n => n.id !== noteId);
-                
-                // 툴팁 새로고침
-                const highlight = this.highlights.find(h => 
-                    this.notes.some(n => n.highlight_id === h.id) || 
-                    document.querySelector(`[data-highlight-id="${h.id}"]`)
-                );
-                if (highlight) {
-                    const element = document.querySelector(`[data-highlight-id="${highlight.id}"]`);
-                    if (element) {
-                        this.showHighlightDetails(highlight, element);
-                    }
-                }
-                
-            } catch (error) {
-                console.error('Failed to delete note:', error);
-                alert('메모 삭제에 실패했습니다');
-            }
-        },
-        
-        // 하이라이트 삭제
-        async deleteHighlight(highlightId) {
-            if (!confirm('이 하이라이트를 삭제하시겠습니까? 연결된 메모도 함께 삭제됩니다.')) {
-                return;
-            }
-            
-            try {
-                await window.api.deleteHighlight(highlightId);
-                
-                // 로컬 데이터에서 제거
-                this.highlights = this.highlights.filter(h => h.id !== highlightId);
-                this.notes = this.notes.filter(n => n.highlight_id !== highlightId);
-                
-                // UI 업데이트
-                this.hideTooltip();
-                this.applyHighlights();
-                
-            } catch (error) {
-                console.error('Failed to delete highlight:', error);
-                alert('하이라이트 삭제에 실패했습니다');
-            }
-        },
-        
-        // 하이라이트 메모 업데이트
-        async updateHighlightNote(highlightId, note) {
-            try {
-                await window.api.updateHighlight(highlightId, { note });
-                const highlight = this.highlights.find(h => h.id === highlightId);
-                if (highlight) {
-                    highlight.note = note;
-                }
-                console.log('✅ 하이라이트 메모 업데이트 완료');
-            } catch (error) {
-                console.error('❌ 하이라이트 메모 업데이트 실패:', error);
-            }
-        },
-        
-        // 하이라이트 모드 토글
-        toggleHighlightMode() {
-            this.highlightMode = !this.highlightMode;
-            if (!this.highlightMode) {
-                this.showHighlightMenu = false;
-            }
-            console.log('🎨 하이라이트 모드:', this.highlightMode ? '활성화' : '비활성화');
-        },
-        
-        // 문서 편집
-        editDocument(document) {
-            console.log('✏️ 문서 편집:', document.title);
-            // TODO: 편집 모달 구현
-            alert('문서 편집 기능은 곧 구현될 예정입니다.');
-        },
-        
-        // 문서 삭제
-        async deleteDocument(documentId) {
-            if (!confirm('정말로 이 문서를 삭제하시겠습니까?')) {
-                return;
-            }
-            
-            try {
-                await window.api.deleteDocument(documentId);
-                console.log('✅ 문서 삭제 완료');
-                
-                // 선택된 문서가 삭제된 경우 선택 해제
-                if (this.selectedDocument && this.selectedDocument.id === documentId) {
-                    this.selectedDocument = null;
-                    this.documentContent = null;
-                }
-                
-                // 계층구조 새로고침
-                await this.loadHierarchy();
-            } catch (error) {
-                console.error('❌ 문서 삭제 실패:', error);
-                alert('문서 삭제 중 오류가 발생했습니다.');
-            }
-        },
-        
-        // 검색
-        async searchDocuments() {
-            // TODO: 검색 기능 구현
-            console.log('🔍 검색:', this.searchQuery);
-        },
-        
-        // 드래그 앤 드롭 처리
-        handleDragStart(event, document) {
-            this.draggedDocument = document;
-            event.dataTransfer.effectAllowed = 'move';
-            event.dataTransfer.setData('text/html', document.id);
-            
-            // 드래그 중인 요소 스타일
-            event.target.style.opacity = '0.5';
-        },
-        
-        handleDrop(event, targetCategoryId) {
-            event.preventDefault();
-            
-            if (!this.draggedDocument) return;
-            
-            console.log('📦 드롭:', this.draggedDocument.title, '→', targetCategoryId);
-            
-            // TODO: 문서 순서 변경 API 호출
-            // await window.api.updateDocumentOrder({
-            //     document_id: this.draggedDocument.id,
-            //     category_id: targetCategoryId,
-            //     new_order: targetOrder
-            // });
-            
-            // 드래그 상태 초기화
-            this.draggedDocument = null;
-            
-            // UI 새로고침
-            this.loadHierarchy();
-        },
-        
-        // 로그인 모달 열기
-        openLoginModal() {
-            this.showLoginModal = true;
-        },
-        
-        // 로그아웃
-        async logout() {
-            try {
-                await window.api.logout();
-                this.currentUser = null;
-                this.hierarchy = { books: {}, uncategorized: [] };
-                this.selectedDocument = null;
-                this.documentContent = null;
-                console.log('✅ 로그아웃 완료');
-            } catch (error) {
-                console.error('❌ 로그아웃 실패:', error);
-            }
-        }
-    };
-};
-
-// 업로드 모달 (기존 로직 재사용)
-window.uploadModal = function() {
-    return {
-        // 폼 데이터
-        uploadForm: {
-            html_file: null,
-            pdf_file: null,
-            title: '',
-            description: '',
-            document_date: '',
-            tags: '',
-            is_public: false
-        },
-        
-        // 서적 관련
-        bookSelectionMode: 'none',
-        bookSearchQuery: '',
-        searchedBooks: [],
-        selectedBook: null,
-        newBook: {
-            title: '',
-            author: ''
-        },
-        suggestions: [],
-        searchTimeout: null,
-        
-        // 상태
-        uploading: false,
-        uploadError: null,
-        
-        // 파일 선택 처리
-        handleFileSelect(event, fileType) {
-            const file = event.target.files[0];
-            if (file) {
-                this.uploadForm[fileType] = file;
-                console.log(`📎 ${fileType} 선택:`, file.name);
-            }
-        },
-        
-        // 서적 검색
-        async searchBooks() {
-            if (!this.bookSearchQuery.trim()) {
-                this.searchedBooks = [];
-                return;
-            }
-            
-            try {
-                const books = await window.api.searchBooks(this.bookSearchQuery);
-                this.searchedBooks = books;
-            } catch (error) {
-                console.error('❌ 서적 검색 실패:', error);
-            }
-        },
-        
-        // 서적 선택
-        selectBook(book) {
-            this.selectedBook = book;
-            this.searchedBooks = [];
-            this.bookSearchQuery = book.title;
-        },
-        
-        // 추천 서적 가져오기
-        async getSuggestions() {
-            if (!this.newBook.title.trim()) {
-                this.suggestions = [];
-                return;
-            }
-            
-            // 디바운스
-            if (this.searchTimeout) {
-                clearTimeout(this.searchTimeout);
-            }
-            
-            this.searchTimeout = setTimeout(async () => {
-                try {
-                    const suggestions = await window.api.getBookSuggestions(this.newBook.title);
-                    this.suggestions = suggestions;
-                } catch (error) {
-                    console.error('❌ 추천 가져오기 실패:', error);
-                }
-            }, 300);
-        },
-        
-        // 추천에서 기존 서적 선택
-        selectExistingFromSuggestion(suggestion) {
-            this.bookSelectionMode = 'existing';
-            this.selectedBook = suggestion;
-            this.suggestions = [];
-            this.newBook = { title: '', author: '' };
-        },
-        
-        // 업로드 실행
-        async upload() {
-            this.uploading = true;
-            this.uploadError = null;
-            
-            try {
-                const formData = new FormData();
-                
-                // 파일 추가
-                formData.append('html_file', this.uploadForm.html_file);
-                if (this.uploadForm.pdf_file) {
-                    formData.append('pdf_file', this.uploadForm.pdf_file);
-                }
-                
-                // 문서 정보 추가
-                formData.append('title', this.uploadForm.title);
-                formData.append('description', this.uploadForm.description || '');
-                formData.append('document_date', this.uploadForm.document_date || '');
-                formData.append('tags', this.uploadForm.tags || '');
-                formData.append('is_public', this.uploadForm.is_public);
-                
-                // 서적 정보 처리
-                let bookId = null;
-                
-                if (this.bookSelectionMode === 'existing' && this.selectedBook) {
-                    bookId = this.selectedBook.id;
-                } else if (this.bookSelectionMode === 'new' && this.newBook.title) {
-                    // 새 서적 생성
-                    const newBook = await window.api.createBook({
-                        title: this.newBook.title,
-                        author: this.newBook.author || null
-                    });
-                    bookId = newBook.id;
-                }
-                
-                if (bookId) {
-                    formData.append('book_id', bookId);
-                }
-                
-                // 업로드 실행
-                await window.api.uploadDocument(formData);
-                
-                console.log('✅ 문서 업로드 완료');
-                
-                // 성공 후 처리
-                this.closeUploadModal();
-                window.dispatchEvent(new CustomEvent('upload-complete'));
-                
-            } catch (error) {
-                console.error('❌ 업로드 실패:', error);
-                this.uploadError = error.message || '업로드 중 오류가 발생했습니다.';
-            } finally {
-                this.uploading = false;
-            }
-        },
-        
-        // 모달 닫기
-        closeUploadModal() {
-            this.showUploadModal = false;
-            this.resetForm();
-        },
-        
-        // 폼 초기화
-        resetForm() {
-            this.uploadForm = {
-                html_file: null,
-                pdf_file: null,
-                title: '',
-                description: '',
-                document_date: '',
-                tags: '',
-                is_public: false
-            };
-            this.bookSelectionMode = 'none';
-            this.bookSearchQuery = '';
-            this.searchedBooks = [];
-            this.selectedBook = null;
-            this.newBook = { title: '', author: '' };
-            this.suggestions = [];
-            this.uploadError = null;
-        }
-    };
-};
-
-// 로그인 모달 (기존 로직 재사용)
-window.authModal = function() {
-    return {
-        loginForm: {
-            email: '',
-            password: ''
-        },
-        loggingIn: false,
-        loginError: null,
-        
-        async login() {
-            this.loggingIn = true;
-            this.loginError = null;
-            
-            try {
-                const response = await window.api.login(this.loginForm.email, this.loginForm.password);
-                
-                // 토큰 저장
-                localStorage.setItem('access_token', response.access_token);
-                if (response.refresh_token) {
-                    localStorage.setItem('refresh_token', response.refresh_token);
-                }
-                
-                // 사용자 정보 가져오기
-                const user = await window.api.getCurrentUser();
-                
-                console.log('✅ 로그인 성공:', user.email);
-                
-                // 전역 이벤트 발생
-                window.dispatchEvent(new CustomEvent('auth-changed', {
-                    detail: { user }
-                }));
-                
-                // 모달 닫기
-                this.showLoginModal = false;
-                this.resetLoginForm();
-                
-            } catch (error) {
-                console.error('❌ 로그인 실패:', error);
-                this.loginError = error.message || '로그인에 실패했습니다.';
-            } finally {
-                this.loggingIn = false;
-            }
-        },
-        
-        resetLoginForm() {
-            this.loginForm = { email: '', password: '' };
-            this.loginError = null;
-        },
-        
-        // 메모 필터링
-        filterMemos() {
-            console.log('🔍 메모 필터링 시작:', {
-                totalNotes: this.notes.length,
-                searchQuery: this.memoSearchQuery,
-                notes: this.notes
-            });
-            
-            if (!this.memoSearchQuery.trim()) {
-                this.filteredNotes = this.notes.filter(note => !note.highlight_id);
-                console.log('📝 독립 메모 필터링 결과:', this.filteredNotes.length, this.filteredNotes);
-                return;
-            }
-            
-            const query = this.memoSearchQuery.toLowerCase();
-            this.filteredNotes = this.notes
-                .filter(note => !note.highlight_id) // 독립 메모만
-                .filter(note => note.content.toLowerCase().includes(query));
-            console.log('🔍 검색 결과:', this.filteredNotes.length, this.filteredNotes);
-        },
-        
-        // 하이라이트로 스크롤
-        scrollToHighlight(highlightId) {
-            const highlightElement = document.querySelector(`[data-highlight-id="${highlightId}"]`);
-            if (highlightElement) {
-                highlightElement.scrollIntoView({ 
-                    behavior: 'smooth', 
-                    block: 'center' 
-                });
-                
-                // 잠시 강조 효과
-                highlightElement.style.boxShadow = '0 0 10px rgba(59, 130, 246, 0.5)';
-                setTimeout(() => {
-                    highlightElement.style.boxShadow = '';
-                }, 2000);
-            }
-        },
-        
-        // 플로팅 윈도우 드래그 시작
-        startDragging(event) {
-            this.isDragging = true;
-            this.dragOffset.x = event.clientX - this.floatingMemoPosition.x;
-            this.dragOffset.y = event.clientY - this.floatingMemoPosition.y;
-            
-            document.addEventListener('mousemove', this.handleDragging.bind(this));
-            document.addEventListener('mouseup', this.stopDragging.bind(this));
-            event.preventDefault();
-        },
-        
-        // 드래그 중
-        handleDragging(event) {
-            if (!this.isDragging) return;
-            
-            const newX = event.clientX - this.dragOffset.x;
-            const newY = event.clientY - this.dragOffset.y;
-            
-            // 화면 경계 제한
-            const maxX = window.innerWidth - this.floatingMemoSize.width;
-            const maxY = window.innerHeight - this.floatingMemoSize.height;
-            
-            this.floatingMemoPosition.x = Math.max(0, Math.min(newX, maxX));
-            this.floatingMemoPosition.y = Math.max(0, Math.min(newY, maxY));
-        },
-        
-        // 드래그 종료
-        stopDragging() {
-            this.isDragging = false;
-            document.removeEventListener('mousemove', this.handleDragging.bind(this));
-            document.removeEventListener('mouseup', this.stopDragging.bind(this));
-        },
-        
-        // 리사이즈 시작
-        startResizing(event) {
-            this.isResizing = true;
-            document.addEventListener('mousemove', this.handleResizing.bind(this));
-            document.addEventListener('mouseup', this.stopResizing.bind(this));
-            event.preventDefault();
-            event.stopPropagation();
-        },
-        
-        // 리사이즈 중
-        handleResizing(event) {
-            if (!this.isResizing) return;
-            
-            const rect = event.target.closest('.fixed').getBoundingClientRect();
-            const newWidth = event.clientX - rect.left;
-            const newHeight = event.clientY - rect.top;
-            
-            // 최소/최대 크기 제한
-            this.floatingMemoSize.width = Math.max(300, Math.min(newWidth, 800));
-            this.floatingMemoSize.height = Math.max(200, Math.min(newHeight, 600));
-        },
-        
-        // 리사이즈 종료
-        stopResizing() {
-            this.isResizing = false;
-            document.removeEventListener('mousemove', this.handleResizing.bind(this));
-            document.removeEventListener('mouseup', this.stopResizing.bind(this));
-        },
-        
-        // 플로팅 메모창 크기 토글
-        toggleFloatingMemoSize() {
-            if (this.floatingMemoSize.width === 400) {
-                // 큰 크기로
-                this.floatingMemoSize.width = 600;
-                this.floatingMemoSize.height = 700;
-            } else {
-                // 기본 크기로
-                this.floatingMemoSize.width = 400;
-                this.floatingMemoSize.height = 500;
-            }
-        }
-    };
-};
-
-console.log('📚 계층구조 JavaScript 로드 완료');
diff --git a/frontend/static/js/main.js b/frontend/static/js/main.js
index 714e45c..c9d9103 100644
--- a/frontend/static/js/main.js
+++ b/frontend/static/js/main.js
@@ -3,6 +3,8 @@ window.documentApp = () => ({
     // 상태 관리
     documents: [],
     filteredDocuments: [],
+    groupedDocuments: [],
+    expandedBooks: [],
     loading: false,
     error: '',
     
@@ -17,20 +19,34 @@ window.documentApp = () => ({
     availableTags: [],
     
     // UI 상태
-    viewMode: 'grid', // 'grid' 또는 'list'
+    viewMode: 'grid', // 'grid' 또는 'books'
     user: null, // currentUser의 별칭
     tags: [], // availableTags의 별칭
     
     // 모달 상태
     showUploadModal: false,
     
+    // 로그인 관련 함수들
+    openLoginModal() {
+        this.showLoginModal = true;
+    },
+
     // 초기화
     async init() {
         await this.checkAuthStatus();
         if (this.isAuthenticated) {
             await this.loadDocuments();
+        } else {
+            // 로그인하지 않은 경우에도 빈 배열로 초기화
+            this.groupedDocuments = [];
         }
         this.setupEventListeners();
+        
+        // 커스텀 이벤트 리스너 등록
+        document.addEventListener('open-login-modal', () => {
+            console.log('📨 open-login-modal 이벤트 수신 (index.html)');
+            this.openLoginModal();
+        });
     },
 
     // 인증 상태 확인
@@ -162,6 +178,7 @@ window.documentApp = () => ({
         }
 
         this.filteredDocuments = filtered;
+        this.groupDocumentsByBook();
     },
 
     // 검색어 변경 시
@@ -169,6 +186,59 @@ window.documentApp = () => ({
         this.filterDocuments();
     },
 
+    // 필터 초기화
+    clearFilters() {
+        this.searchQuery = '';
+        this.selectedTag = '';
+        this.filterDocuments();
+    },
+
+    // 서적별 그룹화
+    groupDocumentsByBook() {
+        if (!this.filteredDocuments || this.filteredDocuments.length === 0) {
+            this.groupedDocuments = [];
+            return;
+        }
+        
+        const grouped = {};
+        
+        this.filteredDocuments.forEach(doc => {
+            const bookKey = doc.book_id || 'no-book';
+            if (!grouped[bookKey]) {
+                grouped[bookKey] = {
+                    book: doc.book_id ? {
+                        id: doc.book_id,
+                        title: doc.book_title,
+                        author: doc.book_author
+                    } : null,
+                    documents: []
+                };
+            }
+            grouped[bookKey].documents.push(doc);
+        });
+
+        // 배열로 변환하고 정렬 (서적 있는 것 먼저, 그 다음 서적명 순)
+        this.groupedDocuments = Object.values(grouped).sort((a, b) => {
+            if (!a.book && b.book) return 1;
+            if (a.book && !b.book) return -1;
+            if (!a.book && !b.book) return 0;
+            return a.book.title.localeCompare(b.book.title);
+        });
+
+        // 기본적으로 모든 서적을 펼친 상태로 설정
+        this.expandedBooks = this.groupedDocuments.map(group => group.book?.id || 'no-book');
+    },
+
+    // 서적 펼침/접힘 토글
+    toggleBookExpansion(bookId) {
+        const index = this.expandedBooks.indexOf(bookId);
+        if (index > -1) {
+            this.expandedBooks.splice(index, 1);
+        } else {
+            this.expandedBooks.push(bookId);
+        }
+    },
+
     // 문서 검색 (HTML에서 사용)
     searchDocuments() {
         this.filterDocuments();
@@ -204,7 +274,29 @@ window.documentApp = () => ({
 
     // 문서 보기
     viewDocument(documentId) {
-        window.open(`/viewer.html?id=${documentId}`, '_blank');
+        // 현재 페이지 정보를 세션 스토리지에 저장
+        const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+        sessionStorage.setItem('previousPage', currentPage);
+        
+        // from 파라미터 추가
+        const fromParam = currentPage === 'hierarchy.html' ? 'hierarchy' : 'index';
+        window.open(`/viewer.html?id=${documentId}&from=${fromParam}`, '_blank');
+    },
+
+    // 서적의 문서들 보기
+    openBookDocuments(book) {
+        if (book && book.id) {
+            // 서적 ID를 URL 파라미터로 전달하여 해당 서적의 문서들만 표시
+            window.location.href = `book-documents.html?bookId=${book.id}`;
+        } else {
+            // 서적 미분류 문서들 보기
+            window.location.href = `book-documents.html?bookId=none`;
+        }
+    },
+
+    // 업로드 페이지 열기
+    openUploadPage() {
+        window.location.href = 'upload.html';
     },
 
     // 문서 열기 (HTML에서 사용)
diff --git a/frontend/static/js/memo-tree.js b/frontend/static/js/memo-tree.js
index 21ee8ec..a35e8b2 100644
--- a/frontend/static/js/memo-tree.js
+++ b/frontend/static/js/memo-tree.js
@@ -21,6 +21,7 @@ window.memoTreeApp = function() {
         showNewNodeModal: false,
         showTreeSettings: false,
         showLoginModal: false,
+        showMobileEditModal: false,
         
         // 로그인 폼 상태
         loginForm: {
@@ -59,10 +60,86 @@ window.memoTreeApp = function() {
         dragNode: null,
         dragOffset: { x: 0, y: 0 },
         
+        // 로그인 관련 함수들
+        openLoginModal() {
+            this.showLoginModal = true;
+        },
+
+        async login() {
+            this.loginLoading = true;
+            this.loginError = '';
+
+            try {
+                // 실제 API 호출
+                const response = await window.api.login(this.loginForm.email, this.loginForm.password);
+                
+                // 토큰 저장
+                window.api.setToken(response.access_token);
+                localStorage.setItem('refresh_token', response.refresh_token);
+                
+                // 사용자 정보 가져오기
+                const userResponse = await window.api.getCurrentUser();
+                this.currentUser = userResponse;
+                
+                // 헤더 사용자 메뉴 업데이트
+                if (typeof window.updateUserMenu === 'function') {
+                    window.updateUserMenu(userResponse);
+                }
+                
+                // 사용자 트리 목록 로드
+                await this.loadUserTrees();
+                
+                // 모달 닫기
+                this.showLoginModal = false;
+                this.loginForm = { email: '', password: '' };
+                
+                console.log('✅ 로그인 성공');
+                
+            } catch (error) {
+                this.loginError = error.message || '로그인에 실패했습니다';
+                console.error('❌ 로그인 오류:', error);
+            } finally {
+                this.loginLoading = false;
+            }
+        },
+
+        async logout() {
+            try {
+                await window.api.logout();
+            } catch (error) {
+                console.error('Logout error:', error);
+            } finally {
+                // 로컬 스토리지 정리
+                localStorage.removeItem('refresh_token');
+                window.api.setToken(null);
+                
+                // 상태 초기화
+                this.currentUser = null;
+                this.userTrees = [];
+                this.selectedTreeId = '';
+                this.selectedTree = null;
+                this.treeNodes = [];
+                this.selectedNode = null;
+                
+                // 헤더 사용자 메뉴 업데이트
+                if (typeof window.updateUserMenu === 'function') {
+                    window.updateUserMenu(null);
+                }
+                
+                console.log('✅ 로그아웃 완료');
+            }
+        },
+
         // 초기화
         async init() {
             console.log('🌳 트리 메모장 초기화 중...');
             
+            // 커스텀 이벤트 리스너 등록
+            document.addEventListener('open-login-modal', () => {
+                console.log('📨 open-login-modal 이벤트 수신');
+                this.openLoginModal();
+            });
+            
             // API 객체가 로드될 때까지 대기 (더 긴 시간)
             let retries = 0;
             while ((!window.api || typeof window.api.getUserMemoTrees !== 'function') && retries < 50) {
@@ -149,10 +226,14 @@ window.memoTreeApp = function() {
                     this.selectNode(this.treeNodes[0]);
                 }
                 
-                // 트리 다이어그램 위치 계산
+                // 트리 다이어그램 위치 계산 및 중앙 정렬
                 this.$nextTick(() => {
                     setTimeout(() => {
                         this.calculateNodePositions();
+                        // 위치 계산 완료 후 중앙 정렬
+                        setTimeout(() => {
+                            this.centerTree();
+                        }, 50);
                     }, 100);
                 });
                 
@@ -220,23 +301,74 @@ window.memoTreeApp = function() {
             
             this.selectedNode = node;
             
-            // 에디터에 내용 로드
-            if (monacoEditor && node.content) {
+            // 에디터에 내용 로드 (빈 내용도 포함)
+            if (monacoEditor) {
                 monacoEditor.setValue(node.content || '');
                 this.isEditorDirty = false;
             }
             
+            // 모바일에서만 편집 모달 열기 (기존 동작에 추가)
+            if (window.innerWidth < 1024) { // lg 브레이크포인트
+                this.showMobileEditModal = true;
+                // 모바일 에디터 초기화 (약간의 지연 후)
+                setTimeout(() => {
+                    this.initMobileEditor();
+                }, 100);
+            }
+            
             console.log('📝 노드 선택:', node.title);
         },
         
+        // 모바일 에디터 초기화
+        initMobileEditor() {
+            if (!window.mobileMonacoEditor && this.selectedNode) {
+                const container = document.getElementById('mobile-editor-container');
+                if (container) {
+                    window.mobileMonacoEditor = monaco.editor.create(container, {
+                        value: this.selectedNode.content || '',
+                        language: 'markdown',
+                        theme: 'vs',
+                        automaticLayout: true,
+                        wordWrap: 'on',
+                        minimap: { enabled: false },
+                        scrollBeyondLastLine: false,
+                        fontSize: 14,
+                        lineNumbers: 'off',
+                        folding: false,
+                        lineDecorationsWidth: 0,
+                        lineNumbersMinChars: 0,
+                        glyphMargin: false
+                    });
+                    
+                    // 모바일 에디터 변경 감지
+                    window.mobileMonacoEditor.onDidChangeModelContent(() => {
+                        if (this.selectedNode) {
+                            this.selectedNode.content = window.mobileMonacoEditor.getValue();
+                            this.isEditorDirty = true;
+                        }
+                    });
+                    
+                    console.log('📱 모바일 에디터 초기화 완료');
+                }
+            } else if (window.mobileMonacoEditor && this.selectedNode) {
+                // 기존 에디터가 있으면 내용만 업데이트
+                window.mobileMonacoEditor.setValue(this.selectedNode.content || '');
+            }
+        },
+
         // 노드 저장
         async saveNode() {
             if (!this.selectedNode) return;
             
             try {
-                // 에디터 내용 가져오기
+                // 에디터 내용 가져오기 (데스크톱 또는 모바일)
                 if (monacoEditor) {
                     this.selectedNode.content = monacoEditor.getValue();
+                } else if (window.mobileMonacoEditor) {
+                    this.selectedNode.content = window.mobileMonacoEditor.getValue();
+                }
+                
+                if (this.selectedNode.content !== undefined) {
                     
                     // 단어 수 계산 (간단한 방식)
                     const wordCount = this.selectedNode.content
@@ -327,6 +459,37 @@ window.memoTreeApp = function() {
             };
             return icons[nodeType] || '📝';
         },
+
+        getNodeTypeLabel(nodeType) {
+            const labels = {
+                'memo': '메모',
+                'folder': '폴더',
+                'chapter': '챕터',
+                'character': '캐릭터',
+                'plot': '플롯'
+            };
+            return labels[nodeType] || '메모';
+        },
+
+        getStatusIcon(status) {
+            const icons = {
+                'draft': '📝',
+                'writing': '✍️',
+                'review': '👀',
+                'complete': '✅'
+            };
+            return icons[status] || '📝';
+        },
+
+        getStatusLabel(status) {
+            const labels = {
+                'draft': '초안',
+                'writing': '작성중',
+                'review': '검토중',
+                'complete': '완료'
+            };
+            return labels[status] || '초안';
+        },
         
         // 상태별 색상 클래스 가져오기
         getStatusColor(status) {
@@ -486,6 +649,7 @@ window.memoTreeApp = function() {
             const nodeHeight = 80;
             const levelHeight = 150; // 레벨 간 간격
             const nodeSpacing = 50; // 노드 간 간격
+            const margin = 100; // 여백
             
             // 레벨별 노드 그룹화
             const levels = new Map();
@@ -493,6 +657,8 @@ window.memoTreeApp = function() {
             // 루트 노드들 찾기
             const rootNodes = this.treeNodes.filter(node => !node.parent_id);
             
+            if (rootNodes.length === 0) return;
+            
             // BFS로 레벨별 노드 배치
             const queue = [];
             rootNodes.forEach(node => {
@@ -514,11 +680,22 @@ window.memoTreeApp = function() {
                 });
             }
             
+            // 트리 전체 크기 계산
+            const maxLevel = Math.max(...levels.keys());
+            const maxNodesInLevel = Math.max(...Array.from(levels.values()).map(nodes => nodes.length));
+            
+            const treeWidth = maxNodesInLevel * nodeWidth + (maxNodesInLevel - 1) * nodeSpacing;
+            const treeHeight = (maxLevel + 1) * levelHeight;
+            
+            // 캔버스 중앙에 트리 배치하기 위한 오프셋 계산
+            const offsetX = Math.max(margin, (canvasWidth - treeWidth) / 2);
+            const offsetY = Math.max(margin, (canvasHeight - treeHeight) / 2);
+            
             // 각 레벨의 노드들 위치 계산
             levels.forEach((nodes, level) => {
-                const y = 100 + level * levelHeight; // 상단 여백 + 레벨 * 높이
-                const totalWidth = nodes.length * nodeWidth + (nodes.length - 1) * nodeSpacing;
-                const startX = (canvasWidth - totalWidth) / 2;
+                const y = offsetY + level * levelHeight;
+                const levelWidth = nodes.length * nodeWidth + (nodes.length - 1) * nodeSpacing;
+                const startX = offsetX + (treeWidth - levelWidth) / 2;
                 
                 nodes.forEach((node, index) => {
                     const x = startX + index * (nodeWidth + nodeSpacing);
@@ -526,6 +703,14 @@ window.memoTreeApp = function() {
                 });
             });
             
+            // 트리 크기 저장 (centerTree에서 사용)
+            this.treeBounds = {
+                width: treeWidth + 2 * margin,
+                height: treeHeight + 2 * margin,
+                offsetX: offsetX - margin,
+                offsetY: offsetY - margin
+            };
+            
             // 연결선 다시 그리기
             this.drawConnections();
         },
@@ -598,9 +783,38 @@ window.memoTreeApp = function() {
         
         // 트리 중앙 정렬
         centerTree() {
-            this.treePanX = 0;
-            this.treePanY = 0;
-            this.treeZoom = 1;
+            const canvas = document.getElementById('tree-canvas');
+            if (!canvas || !this.treeBounds) {
+                this.treePanX = 0;
+                this.treePanY = 0;
+                this.treeZoom = 1;
+                return;
+            }
+            
+            const canvasWidth = canvas.clientWidth;
+            const canvasHeight = canvas.clientHeight;
+            
+            // 트리가 캔버스보다 큰 경우 적절한 줌 레벨 계산
+            const scaleX = canvasWidth / this.treeBounds.width;
+            const scaleY = canvasHeight / this.treeBounds.height;
+            const optimalZoom = Math.min(scaleX, scaleY, 1) * 0.9; // 90%로 여유 공간 확보
+            
+            // 줌 적용
+            this.treeZoom = Math.max(0.1, Math.min(optimalZoom, 2));
+            
+            // 중앙 정렬을 위한 팬 값 계산
+            const scaledTreeWidth = this.treeBounds.width * this.treeZoom;
+            const scaledTreeHeight = this.treeBounds.height * this.treeZoom;
+            
+            this.treePanX = (canvasWidth - scaledTreeWidth) / 2 - this.treeBounds.offsetX * this.treeZoom;
+            this.treePanY = (canvasHeight - scaledTreeHeight) / 2 - this.treeBounds.offsetY * this.treeZoom;
+            
+            console.log('🎯 트리 중앙 정렬:', {
+                zoom: this.treeZoom,
+                panX: this.treePanX,
+                panY: this.treePanY,
+                treeBounds: this.treeBounds
+            });
         },
         
         // 확대
@@ -613,16 +827,6 @@ window.memoTreeApp = function() {
             this.treeZoom = Math.max(this.treeZoom / 1.2, 0.3);
         },
         
-        // 휠 이벤트 처리 (확대/축소)
-        handleWheel(event) {
-            event.preventDefault();
-            if (event.deltaY < 0) {
-                this.zoomIn();
-            } else {
-                this.zoomOut();
-            }
-        },
-        
         // 패닝 시작
         startPan(event) {
             if (event.target.closest('.tree-diagram-node')) return; // 노드 클릭 시 패닝 방지
diff --git a/frontend/static/js/story-reader.js b/frontend/static/js/story-reader.js
new file mode 100644
index 0000000..264d7f0
--- /dev/null
+++ b/frontend/static/js/story-reader.js
@@ -0,0 +1,333 @@
+// 스토리 읽기 애플리케이션
+function storyReaderApp() {
+    return {
+        // 상태 변수들
+        currentUser: null,
+        loading: true,
+        error: null,
+        
+        // 스토리 데이터
+        selectedTree: null,
+        canonicalNodes: [],
+        currentChapter: null,
+        currentChapterIndex: 0,
+        
+        // URL 파라미터
+        treeId: null,
+        nodeId: null,
+        chapterIndex: null,
+        
+        // 편집 관련
+        showEditModal: false,
+        editingChapter: null,
+        editEditor: null,
+        saving: false,
+        
+        // 로그인 관련
+        showLoginModal: false,
+        loginForm: {
+            email: '',
+            password: ''
+        },
+        loginError: '',
+        loginLoading: false,
+        
+        // 초기화
+        async init() {
+            console.log('🚀 스토리 리더 초기화 시작');
+            
+            // URL 파라미터 파싱
+            this.parseUrlParams();
+            
+            // 사용자 인증 확인
+            await this.checkAuth();
+            
+            if (this.currentUser) {
+                await this.loadStoryData();
+            }
+        },
+        
+        // URL 파라미터 파싱
+        parseUrlParams() {
+            const urlParams = new URLSearchParams(window.location.search);
+            this.treeId = urlParams.get('treeId');
+            this.nodeId = urlParams.get('nodeId');
+            this.chapterIndex = parseInt(urlParams.get('index')) || 0;
+            
+            console.log('📖 URL 파라미터:', {
+                treeId: this.treeId,
+                nodeId: this.nodeId,
+                chapterIndex: this.chapterIndex
+            });
+        },
+        
+        // 인증 확인
+        async checkAuth() {
+            try {
+                this.currentUser = await window.api.getCurrentUser();
+                console.log('✅ 사용자 인증됨:', this.currentUser?.email);
+            } catch (error) {
+                console.log('❌ 인증 실패:', error);
+                this.currentUser = null;
+            }
+        },
+        
+        // 스토리 데이터 로드
+        async loadStoryData() {
+            if (!this.treeId) {
+                this.error = '트리 ID가 필요합니다';
+                this.loading = false;
+                return;
+            }
+            
+            try {
+                this.loading = true;
+                this.error = null;
+                
+                // 트리 정보 로드
+                this.selectedTree = await window.api.getMemoTree(this.treeId);
+                console.log('📚 트리 로드됨:', this.selectedTree.title);
+                
+                // 트리의 모든 노드 로드
+                const allNodes = await window.api.getMemoTreeNodes(this.treeId);
+                
+                // 정사 노드만 필터링하고 순서대로 정렬
+                this.canonicalNodes = allNodes
+                    .filter(node => node.is_canonical)
+                    .sort((a, b) => (a.canonical_order || 0) - (b.canonical_order || 0));
+                
+                console.log('📝 정사 노드 수:', this.canonicalNodes.length);
+                
+                if (this.canonicalNodes.length === 0) {
+                    this.error = '정사로 설정된 노드가 없습니다';
+                    this.loading = false;
+                    return;
+                }
+                
+                // 현재 챕터 설정
+                this.setCurrentChapter();
+                
+                this.loading = false;
+            } catch (error) {
+                console.error('❌ 스토리 로드 실패:', error);
+                this.error = '스토리를 불러오는데 실패했습니다';
+                this.loading = false;
+            }
+        },
+        
+        // 현재 챕터 설정
+        setCurrentChapter() {
+            if (this.nodeId) {
+                // 특정 노드 ID로 찾기
+                const index = this.canonicalNodes.findIndex(node => node.id === this.nodeId);
+                if (index !== -1) {
+                    this.currentChapterIndex = index;
+                }
+            } else if (this.chapterIndex >= 0 && this.chapterIndex < this.canonicalNodes.length) {
+                // 인덱스로 설정
+                this.currentChapterIndex = this.chapterIndex;
+            } else {
+                // 기본값: 첫 번째 챕터
+                this.currentChapterIndex = 0;
+            }
+            
+            this.currentChapter = this.canonicalNodes[this.currentChapterIndex];
+            console.log('📖 현재 챕터:', this.currentChapter?.title, `(${this.currentChapterIndex + 1}/${this.canonicalNodes.length})`);
+        },
+        
+        // 계산된 속성들
+        get totalChapters() {
+            return this.canonicalNodes.length;
+        },
+        
+        get hasPreviousChapter() {
+            return this.currentChapterIndex > 0;
+        },
+        
+        get hasNextChapter() {
+            return this.currentChapterIndex < this.canonicalNodes.length - 1;
+        },
+        
+        get previousChapter() {
+            return this.hasPreviousChapter ? this.canonicalNodes[this.currentChapterIndex - 1] : null;
+        },
+        
+        get nextChapter() {
+            return this.hasNextChapter ? this.canonicalNodes[this.currentChapterIndex + 1] : null;
+        },
+        
+        // 네비게이션 함수들
+        goToPreviousChapter() {
+            if (this.hasPreviousChapter) {
+                this.currentChapterIndex--;
+                this.currentChapter = this.canonicalNodes[this.currentChapterIndex];
+                this.updateUrl();
+                this.scrollToTop();
+            }
+        },
+        
+        goToNextChapter() {
+            if (this.hasNextChapter) {
+                this.currentChapterIndex++;
+                this.currentChapter = this.canonicalNodes[this.currentChapterIndex];
+                this.updateUrl();
+                this.scrollToTop();
+            }
+        },
+        
+        goBackToStoryView() {
+            window.location.href = `story-view.html?treeId=${this.treeId}`;
+        },
+        
+        editChapter() {
+            if (this.currentChapter) {
+                this.editingChapter = { ...this.currentChapter }; // 복사본 생성
+                this.showEditModal = true;
+                console.log('✅ 편집 모달 열림 (Textarea 방식)');
+            }
+        },
+        
+        // 편집 취소
+        cancelEdit() {
+            this.showEditModal = false;
+            this.editingChapter = null;
+            console.log('✅ 편집 취소됨 (Textarea 방식)');
+        },
+        
+        // 편집 저장
+        async saveEdit() {
+            if (!this.editingChapter) {
+                console.warn('⚠️ 편집 중인 챕터가 없습니다');
+                return;
+            }
+            
+            try {
+                this.saving = true;
+                
+                // 단어 수 계산
+                const content = this.editingChapter.content || '';
+                let wordCount = 0;
+                if (content && content.trim()) {
+                    const words = content.trim().split(/\s+/);
+                    wordCount = words.filter(word => word.length > 0).length;
+                }
+                this.editingChapter.word_count = wordCount;
+                
+                // API로 저장
+                const updateData = {
+                    title: this.editingChapter.title,
+                    content: this.editingChapter.content,
+                    word_count: this.editingChapter.word_count
+                };
+                
+                await window.api.updateMemoNode(this.editingChapter.id, updateData);
+                
+                // 현재 챕터 업데이트
+                this.currentChapter.title = this.editingChapter.title;
+                this.currentChapter.content = this.editingChapter.content;
+                this.currentChapter.word_count = this.editingChapter.word_count;
+                
+                // 정사 노드 목록에서도 업데이트
+                const nodeIndex = this.canonicalNodes.findIndex(node => node.id === this.editingChapter.id);
+                if (nodeIndex !== -1) {
+                    this.canonicalNodes[nodeIndex].title = this.editingChapter.title;
+                    this.canonicalNodes[nodeIndex].content = this.editingChapter.content;
+                    this.canonicalNodes[nodeIndex].word_count = this.editingChapter.word_count;
+                }
+                
+                console.log('✅ 챕터 저장 완료');
+                this.cancelEdit();
+                
+            } catch (error) {
+                console.error('❌ 저장 실패:', error);
+                alert('저장 중 오류가 발생했습니다: ' + error.message);
+            } finally {
+                this.saving = false;
+            }
+        },
+        
+        // URL 업데이트
+        updateUrl() {
+            const url = new URL(window.location);
+            url.searchParams.set('nodeId', this.currentChapter.id);
+            url.searchParams.set('index', this.currentChapterIndex.toString());
+            window.history.replaceState({}, '', url);
+        },
+        
+        // 페이지 상단으로 스크롤
+        scrollToTop() {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        },
+        
+        // 인쇄
+        printChapter() {
+            window.print();
+        },
+        
+        // 콘텐츠 포맷팅
+        formatContent(content) {
+            if (!content) return '';
+            
+            // 마크다운 스타일 간단 변환
+            return content
+                .replace(/\n\n/g, '</p><p>')
+                .replace(/\n/g, '<br>')
+                .replace(/^/, '<p>')
+                .replace(/$/, '</p>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>');
+        },
+        
+        // 노드 타입 라벨
+        getNodeTypeLabel(nodeType) {
+            const labels = {
+                'memo': '메모',
+                'folder': '폴더', 
+                'chapter': '챕터',
+                'character': '캐릭터',
+                'plot': '플롯'
+            };
+            return labels[nodeType] || nodeType;
+        },
+        
+        // 상태 라벨
+        getStatusLabel(status) {
+            const labels = {
+                'draft': '초안',
+                'writing': '작성중',
+                'review': '검토중',
+                'complete': '완료'
+            };
+            return labels[status] || status;
+        },
+        
+        // 로그인 관련
+        openLoginModal() {
+            this.showLoginModal = true;
+            this.loginError = '';
+        },
+        
+        async handleLogin() {
+            try {
+                this.loginLoading = true;
+                this.loginError = '';
+                
+                const result = await window.api.login(this.loginForm.email, this.loginForm.password);
+                
+                if (result.access_token) {
+                    this.currentUser = result.user;
+                    this.showLoginModal = false;
+                    this.loginForm = { email: '', password: '' };
+                    
+                    // 로그인 후 스토리 데이터 로드
+                    await this.loadStoryData();
+                }
+            } catch (error) {
+                console.error('❌ 로그인 실패:', error);
+                this.loginError = '로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.';
+            } finally {
+                this.loginLoading = false;
+            }
+        }
+    };
+}
diff --git a/frontend/static/js/story-view.js b/frontend/static/js/story-view.js
index dbb2a30..fa8f494 100644
--- a/frontend/static/js/story-view.js
+++ b/frontend/static/js/story-view.js
@@ -15,7 +15,6 @@ window.storyViewApp = function() {
         canonicalNodes: [], // 정사 경로 노드들만
         
         // UI 상태
-        viewMode: 'toc', // 'toc' | 'full'
         showLoginModal: false,
         showEditModal: false,
         editingNode: null,
@@ -55,6 +54,9 @@ window.storyViewApp = function() {
             // 인증된 경우 트리 목록 로드
             if (this.currentUser) {
                 await this.loadUserTrees();
+                
+                // URL 파라미터에서 treeId 확인하고 자동 선택
+                this.checkUrlParams();
             }
         },
         
@@ -91,6 +93,8 @@ window.storyViewApp = function() {
             if (!treeId) {
                 this.selectedTree = null;
                 this.canonicalNodes = [];
+                // URL에서 treeId 파라미터 제거
+                this.updateUrl(null);
                 return;
             }
             
@@ -108,6 +112,9 @@ window.storyViewApp = function() {
                     .filter(node => node.is_canonical)
                     .sort((a, b) => (a.canonical_order || 0) - (b.canonical_order || 0));
                 
+                // URL 업데이트
+                this.updateUrl(treeId);
+                
                 console.log(`✅ 스토리 로드 완료: ${this.canonicalNodes.length}개 정사 노드`);
             } catch (error) {
                 console.error('❌ 스토리 로드 실패:', error);
@@ -115,28 +122,33 @@ window.storyViewApp = function() {
             }
         },
         
-        // 뷰 모드 토글
-        toggleView() {
-            this.viewMode = this.viewMode === 'toc' ? 'full' : 'toc';
+        // URL 파라미터 확인 및 처리
+        checkUrlParams() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const treeId = urlParams.get('treeId');
+            
+            if (treeId && this.userTrees.some(tree => tree.id === treeId)) {
+                console.log('📖 URL에서 트리 ID 감지:', treeId);
+                this.selectedTreeId = treeId;
+                this.loadStory(treeId);
+            }
         },
         
-        // 챕터로 스크롤
-        scrollToChapter(nodeId) {
-            if (this.viewMode === 'toc') {
-                this.viewMode = 'full';
-                // DOM 업데이트 대기 후 스크롤
-                this.$nextTick(() => {
-                    const element = document.getElementById(`chapter-${nodeId}`);
-                    if (element) {
-                        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                    }
-                });
+        // URL 업데이트
+        updateUrl(treeId) {
+            const url = new URL(window.location);
+            if (treeId) {
+                url.searchParams.set('treeId', treeId);
             } else {
-                const element = document.getElementById(`chapter-${nodeId}`);
-                if (element) {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                }
+                url.searchParams.delete('treeId');
             }
+            window.history.replaceState({}, '', url);
+        },
+        
+        // 스토리 리더로 이동
+        openStoryReader(nodeId, index) {
+            const url = `story-reader.html?treeId=${this.selectedTreeId}&nodeId=${nodeId}&index=${index}`;
+            window.location.href = url;
         },
         
         // 챕터 편집 (인라인 모달)
diff --git a/frontend/static/js/upload.js b/frontend/static/js/upload.js
new file mode 100644
index 0000000..99ff595
--- /dev/null
+++ b/frontend/static/js/upload.js
@@ -0,0 +1,589 @@
+// 업로드 애플리케이션 컴포넌트
+window.uploadApp = () => ({
+    // 상태 관리
+    currentStep: 1,
+    selectedFiles: [],
+    uploadedDocuments: [],
+    pdfFiles: [],
+    
+    // 업로드 상태
+    uploading: false,
+    finalizing: false,
+    
+    // 인증 상태
+    isAuthenticated: false,
+    currentUser: null,
+    
+    // 서적 관련
+    bookSelectionMode: 'none',
+    bookSearchQuery: '',
+    searchedBooks: [],
+    selectedBook: null,
+    newBook: {
+        title: '',
+        author: '',
+        description: ''
+    },
+    
+    // Sortable 인스턴스
+    sortableInstance: null,
+    
+    // 초기화
+    async init() {
+        console.log('🚀 Upload App 초기화 시작');
+        
+        // 인증 상태 확인
+        await this.checkAuthStatus();
+        
+        if (this.isAuthenticated) {
+            // 헤더 로드
+            await this.loadHeader();
+        }
+    },
+    
+    // 인증 상태 확인
+    async checkAuthStatus() {
+        try {
+            const user = await window.api.getCurrentUser();
+            this.isAuthenticated = true;
+            this.currentUser = user;
+            console.log('✅ 인증됨:', user.username);
+        } catch (error) {
+            console.log('❌ 인증되지 않음');
+            this.isAuthenticated = false;
+            this.currentUser = null;
+            window.location.href = '/login.html';
+        }
+    },
+    
+    // 헤더 로드
+    async loadHeader() {
+        try {
+            await window.headerLoader.loadHeader();
+        } catch (error) {
+            console.error('헤더 로드 실패:', error);
+        }
+    },
+    
+    // 드래그 오버 처리
+    handleDragOver(event) {
+        event.dataTransfer.dropEffect = 'copy';
+        event.target.closest('.drag-area').classList.add('drag-over');
+    },
+    
+    // 드래그 리브 처리
+    handleDragLeave(event) {
+        event.target.closest('.drag-area').classList.remove('drag-over');
+    },
+    
+    // 드롭 처리
+    handleDrop(event) {
+        event.target.closest('.drag-area').classList.remove('drag-over');
+        const files = Array.from(event.dataTransfer.files);
+        this.processFiles(files);
+    },
+    
+    // 파일 선택 처리
+    handleFileSelect(event) {
+        const files = Array.from(event.target.files);
+        this.processFiles(files);
+    },
+    
+    // 파일 처리
+    processFiles(files) {
+        const validFiles = files.filter(file => {
+            const isValid = file.type === 'text/html' || 
+                           file.type === 'application/pdf' || 
+                           file.name.toLowerCase().endsWith('.html') || 
+                           file.name.toLowerCase().endsWith('.htm') || 
+                           file.name.toLowerCase().endsWith('.pdf');
+            
+            if (!isValid) {
+                console.warn('지원하지 않는 파일 형식:', file.name);
+            }
+            return isValid;
+        });
+        
+        // 기존 파일과 중복 체크
+        validFiles.forEach(file => {
+            const isDuplicate = this.selectedFiles.some(existing => 
+                existing.name === file.name && existing.size === file.size
+            );
+            
+            if (!isDuplicate) {
+                this.selectedFiles.push(file);
+            }
+        });
+        
+        console.log('📁 선택된 파일:', this.selectedFiles.length, '개');
+    },
+    
+    // 파일 제거
+    removeFile(index) {
+        this.selectedFiles.splice(index, 1);
+    },
+    
+    // 파일 크기 포맷팅
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    
+    // 다음 단계
+    nextStep() {
+        if (this.selectedFiles.length === 0) {
+            alert('업로드할 파일을 선택해주세요.');
+            return;
+        }
+        this.currentStep = 2;
+    },
+    
+    // 이전 단계
+    prevStep() {
+        this.currentStep = Math.max(1, this.currentStep - 1);
+    },
+    
+    // 서적 검색
+    async searchBooks() {
+        if (!this.bookSearchQuery.trim()) {
+            this.searchedBooks = [];
+            return;
+        }
+        
+        try {
+            const books = await window.api.searchBooks(this.bookSearchQuery, 10);
+            this.searchedBooks = books;
+        } catch (error) {
+            console.error('서적 검색 실패:', error);
+            this.searchedBooks = [];
+        }
+    },
+    
+    // 서적 선택
+    selectBook(book) {
+        this.selectedBook = book;
+        this.bookSearchQuery = book.title;
+        this.searchedBooks = [];
+    },
+    
+    // 파일 업로드
+    async uploadFiles() {
+        if (this.selectedFiles.length === 0) {
+            alert('업로드할 파일이 없습니다.');
+            return;
+        }
+        
+        // 서적 설정 검증
+        if (this.bookSelectionMode === 'new' && !this.newBook.title.trim()) {
+            alert('새 서적을 생성하려면 제목을 입력해주세요.');
+            return;
+        }
+        
+        if (this.bookSelectionMode === 'existing' && !this.selectedBook) {
+            alert('기존 서적을 선택해주세요.');
+            return;
+        }
+        
+        this.uploading = true;
+        
+        try {
+            let bookId = null;
+            
+            // 서적 처리
+            if (this.bookSelectionMode === 'new' && this.newBook.title.trim()) {
+                try {
+                    const newBook = await window.api.createBook({
+                        title: this.newBook.title,
+                        author: this.newBook.author,
+                        description: this.newBook.description
+                    });
+                    bookId = newBook.id;
+                    console.log('📚 새 서적 생성됨:', newBook.title);
+                } catch (error) {
+                    if (error.message.includes('already exists')) {
+                        // 동일한 서적이 이미 존재하는 경우 - 선택 모달 표시
+                        const choice = await this.showBookConflictModal();
+                        
+                        if (choice === 'existing') {
+                            // 기존 서적 검색해서 사용
+                            const existingBooks = await window.api.searchBooks(this.newBook.title, 10);
+                            const matchingBook = existingBooks.find(book => 
+                                book.title === this.newBook.title && 
+                                book.author === this.newBook.author
+                            );
+                            
+                            if (matchingBook) {
+                                bookId = matchingBook.id;
+                                console.log('📚 기존 서적 사용:', matchingBook.title);
+                            } else {
+                                throw new Error('기존 서적을 찾을 수 없습니다.');
+                            }
+                        } else if (choice === 'edition') {
+                            // 에디션 정보 입력받아서 새 서적 생성
+                            const edition = await this.getEditionInfo();
+                            if (edition) {
+                                const newBookWithEdition = await window.api.createBook({
+                                    title: `${this.newBook.title} (${edition})`,
+                                    author: this.newBook.author,
+                                    description: this.newBook.description
+                                });
+                                bookId = newBookWithEdition.id;
+                                console.log('📚 에디션 서적 생성됨:', newBookWithEdition.title);
+                            } else {
+                                throw new Error('에디션 정보가 입력되지 않았습니다.');
+                            }
+                        } else {
+                            throw new Error('사용자가 업로드를 취소했습니다.');
+                        }
+                    } else {
+                        throw error;
+                    }
+                }
+            } else if (this.bookSelectionMode === 'existing' && this.selectedBook) {
+                bookId = this.selectedBook.id;
+            }
+            
+            // HTML과 PDF 파일 분리
+            const htmlFiles = this.selectedFiles.filter(file => 
+                file.type === 'text/html' || 
+                file.name.toLowerCase().endsWith('.html') || 
+                file.name.toLowerCase().endsWith('.htm')
+            );
+            
+            const pdfFiles = this.selectedFiles.filter(file => 
+                file.type === 'application/pdf' || 
+                file.name.toLowerCase().endsWith('.pdf')
+            );
+            
+            console.log('📄 HTML 파일:', htmlFiles.length, '개');
+            console.log('📕 PDF 파일:', pdfFiles.length, '개');
+            
+            // HTML 파일 업로드 (백엔드 API에 맞게)
+            const uploadPromises = htmlFiles.map(async (file, index) => {
+                const formData = new FormData();
+                formData.append('html_file', file); // 백엔드가 요구하는 필드명
+                formData.append('title', file.name.replace(/\.[^/.]+$/, "")); // 확장자 제거
+                formData.append('description', `업로드된 파일: ${file.name}`);
+                formData.append('language', 'ko');
+                formData.append('is_public', 'false');
+                
+                if (bookId) {
+                    formData.append('book_id', bookId);
+                }
+                
+                try {
+                    const response = await window.api.uploadDocument(formData);
+                    console.log('✅ HTML 파일 업로드 완료:', file.name);
+                    return response;
+                } catch (error) {
+                    console.error('❌ HTML 파일 업로드 실패:', file.name, error);
+                    throw error;
+                }
+            });
+            
+            // PDF 파일은 별도로 처리 (나중에 HTML과 매칭)
+            const pdfUploadPromises = pdfFiles.map(async (file, index) => {
+                // PDF 전용 업로드 로직 (임시로 HTML 파일로 처리하지 않음)
+                console.log('📕 PDF 파일 대기 중:', file.name);
+                return {
+                    id: `pdf-${Date.now()}-${index}`,
+                    title: file.name.replace(/\.[^/.]+$/, ""),
+                    original_filename: file.name,
+                    file_type: 'pdf',
+                    file: file // 실제 파일 객체 보관
+                };
+            });
+            
+            // HTML 파일 업로드 완료 대기
+            const uploadedHtmlDocs = await Promise.all(uploadPromises);
+            
+            // PDF 파일 처리 (실제 업로드는 하지 않고 매칭용으로만 보관)
+            const pdfDocs = await Promise.all(pdfUploadPromises);
+            
+            // 업로드된 HTML 문서 정리
+            this.uploadedDocuments = uploadedHtmlDocs.map((doc, index) => ({
+                ...doc,
+                display_order: index + 1,
+                matched_pdf_id: null,
+                file_type: 'html'
+            }));
+            
+            // PDF 파일 목록 (매칭용)
+            this.pdfFiles = pdfDocs;
+            
+            console.log('🎉 모든 파일 업로드 완료!');
+            console.log('📄 HTML 문서:', this.uploadedDocuments.filter(doc => doc.file_type === 'html').length, '개');
+            console.log('📕 PDF 문서:', this.pdfFiles.length, '개');
+            
+            // 3단계로 이동
+            this.currentStep = 3;
+            
+            // 다음 틱에서 Sortable 초기화
+            this.$nextTick(() => {
+                this.initSortable();
+            });
+            
+        } catch (error) {
+            console.error('업로드 실패:', error);
+            alert('업로드 중 오류가 발생했습니다: ' + error.message);
+        } finally {
+            this.uploading = false;
+        }
+    },
+    
+    // Sortable 초기화
+    initSortable() {
+        const sortableList = document.getElementById('sortable-list');
+        if (sortableList && !this.sortableInstance) {
+            this.sortableInstance = Sortable.create(sortableList, {
+                animation: 150,
+                ghostClass: 'sortable-ghost',
+                chosenClass: 'sortable-chosen',
+                handle: '.cursor-move',
+                onEnd: (evt) => {
+                    // 배열 순서 업데이트
+                    const item = this.uploadedDocuments.splice(evt.oldIndex, 1)[0];
+                    this.uploadedDocuments.splice(evt.newIndex, 0, item);
+                    
+                    // display_order 업데이트
+                    this.updateDisplayOrder();
+                    
+                    console.log('📋 드래그로 순서 변경됨');
+                }
+            });
+        }
+    },
+
+    // display_order 업데이트
+    updateDisplayOrder() {
+        this.uploadedDocuments.forEach((doc, index) => {
+            doc.display_order = index + 1;
+        });
+    },
+
+    // 위로 이동
+    moveUp(index) {
+        if (index > 0) {
+            const item = this.uploadedDocuments.splice(index, 1)[0];
+            this.uploadedDocuments.splice(index - 1, 0, item);
+            this.updateDisplayOrder();
+            console.log('📋 위로 이동:', item.title);
+        }
+    },
+
+    // 아래로 이동
+    moveDown(index) {
+        if (index < this.uploadedDocuments.length - 1) {
+            const item = this.uploadedDocuments.splice(index, 1)[0];
+            this.uploadedDocuments.splice(index + 1, 0, item);
+            this.updateDisplayOrder();
+            console.log('📋 아래로 이동:', item.title);
+        }
+    },
+
+    // 이름순 정렬
+    autoSortByName() {
+        this.uploadedDocuments.sort((a, b) => {
+            return a.title.localeCompare(b.title, 'ko', { numeric: true });
+        });
+        this.updateDisplayOrder();
+        console.log('📋 이름순 정렬 완료');
+    },
+
+    // 순서 뒤집기
+    reverseOrder() {
+        this.uploadedDocuments.reverse();
+        this.updateDisplayOrder();
+        console.log('📋 순서 뒤집기 완료');
+    },
+
+    // 섞기
+    shuffleDocuments() {
+        for (let i = this.uploadedDocuments.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [this.uploadedDocuments[i], this.uploadedDocuments[j]] = [this.uploadedDocuments[j], this.uploadedDocuments[i]];
+        }
+        this.updateDisplayOrder();
+        console.log('📋 문서 섞기 완료');
+    },
+    
+    // 최종 완료 처리
+    async finalizeUpload() {
+        this.finalizing = true;
+        
+        try {
+            // 문서 순서 및 PDF 매칭 정보 업데이트
+            const updatePromises = this.uploadedDocuments.map(async (doc) => {
+                const updateData = {
+                    display_order: doc.display_order
+                };
+                
+                // PDF 매칭 정보 추가 (필요시 백엔드 API 확장)
+                if (doc.matched_pdf_id) {
+                    updateData.matched_pdf_id = doc.matched_pdf_id;
+                }
+                
+                return await window.api.updateDocument(doc.id, updateData);
+            });
+            
+            await Promise.all(updatePromises);
+            
+            console.log('🎉 업로드 완료 처리됨!');
+            alert('업로드가 완료되었습니다!');
+            
+            // 메인 페이지로 이동
+            window.location.href = 'index.html';
+            
+        } catch (error) {
+            console.error('완료 처리 실패:', error);
+            alert('완료 처리 중 오류가 발생했습니다: ' + error.message);
+        } finally {
+            this.finalizing = false;
+        }
+    },
+    
+    // 업로드 재시작
+    resetUpload() {
+        if (confirm('업로드를 다시 시작하시겠습니까? 현재 진행 상황이 초기화됩니다.')) {
+            this.currentStep = 1;
+            this.selectedFiles = [];
+            this.uploadedDocuments = [];
+            this.pdfFiles = [];
+            this.bookSelectionMode = 'none';
+            this.selectedBook = null;
+            this.newBook = { title: '', author: '', description: '' };
+            
+            if (this.sortableInstance) {
+                this.sortableInstance.destroy();
+                this.sortableInstance = null;
+            }
+        }
+    },
+    
+    // 뒤로가기
+    goBack() {
+        if (this.currentStep > 1) {
+            if (confirm('진행 중인 업로드를 취소하고 돌아가시겠습니까?')) {
+                window.location.href = 'index.html';
+            }
+        } else {
+            window.location.href = 'index.html';
+        }
+    },
+
+    // 서적 중복 시 선택 모달
+    showBookConflictModal() {
+        return new Promise((resolve) => {
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+            modal.innerHTML = `
+                <div class="bg-white rounded-lg p-6 max-w-md mx-4">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">📚 서적 중복 발견</h3>
+                    <p class="text-gray-600 mb-6">
+                        "<strong>${this.newBook.title}</strong>"${this.newBook.author ? ` (${this.newBook.author})` : ''} 서적이 이미 존재합니다.
+                        <br><br>어떻게 처리하시겠습니까?
+                    </p>
+                    <div class="space-y-3">
+                        <button id="use-existing" class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-left">
+                            <div class="font-medium">🔄 기존 서적에 추가</div>
+                            <div class="text-sm text-blue-100">기존 서적에 새 문서들을 추가합니다</div>
+                        </button>
+                        <button id="add-edition" class="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-left">
+                            <div class="font-medium">📖 에디션으로 구분</div>
+                            <div class="text-sm text-green-100">에디션 정보를 입력해서 별도 서적으로 생성합니다</div>
+                        </button>
+                        <button id="cancel-upload" class="w-full px-4 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-center">
+                            ❌ 업로드 취소
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            document.body.appendChild(modal);
+            
+            // 이벤트 리스너
+            modal.querySelector('#use-existing').onclick = () => {
+                document.body.removeChild(modal);
+                resolve('existing');
+            };
+            
+            modal.querySelector('#add-edition').onclick = () => {
+                document.body.removeChild(modal);
+                resolve('edition');
+            };
+            
+            modal.querySelector('#cancel-upload').onclick = () => {
+                document.body.removeChild(modal);
+                resolve('cancel');
+            };
+        });
+    },
+
+    // 에디션 정보 입력
+    getEditionInfo() {
+        return new Promise((resolve) => {
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+            modal.innerHTML = `
+                <div class="bg-white rounded-lg p-6 max-w-md mx-4">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">📖 에디션 정보 입력</h3>
+                    <p class="text-gray-600 mb-4">
+                        서적을 구분할 에디션 정보를 입력해주세요.
+                    </p>
+                    <div class="mb-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">에디션 정보</label>
+                        <input type="text" id="edition-input" 
+                               placeholder="예: 2nd Edition, 2024년판, Ver 2.0"
+                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <p class="text-xs text-gray-500 mt-1">
+                            💡 예시: "2nd Edition", "2024년판", "개정판", "Ver 2.0"
+                        </p>
+                    </div>
+                    <div class="flex space-x-3">
+                        <button id="confirm-edition" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                            확인
+                        </button>
+                        <button id="cancel-edition" class="flex-1 px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
+                            취소
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            document.body.appendChild(modal);
+            
+            const input = modal.querySelector('#edition-input');
+            input.focus();
+            
+            // 이벤트 리스너
+            const confirm = () => {
+                const edition = input.value.trim();
+                document.body.removeChild(modal);
+                resolve(edition || null);
+            };
+            
+            const cancel = () => {
+                document.body.removeChild(modal);
+                resolve(null);
+            };
+            
+            modal.querySelector('#confirm-edition').onclick = confirm;
+            modal.querySelector('#cancel-edition').onclick = cancel;
+            
+            // Enter 키 처리
+            input.onkeypress = (e) => {
+                if (e.key === 'Enter') {
+                    confirm();
+                }
+            };
+        });
+    }
+});
+
+// 페이지 로드 시 초기화
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('📄 Upload 페이지 로드됨');
+});
diff --git a/frontend/static/js/viewer.js b/frontend/static/js/viewer.js
index 2460312..dff9651 100644
--- a/frontend/static/js/viewer.js
+++ b/frontend/static/js/viewer.js
@@ -28,6 +28,9 @@ window.documentViewer = () => ({
     noteSearchQuery: '',
     filteredNotes: [],
     
+    // 언어 전환
+    isKorean: false,
+    
     // 모달
     showNoteModal: false,
     showBookmarkModal: false,
@@ -783,9 +786,31 @@ window.documentViewer = () => ({
         });
     },
 
-    // 뒤로가기
+    // 뒤로가기 - 문서 관리 페이지로 이동
     goBack() {
-        window.history.back();
+        // 1. URL 파라미터에서 from 확인
+        const urlParams = new URLSearchParams(window.location.search);
+        const fromPage = urlParams.get('from');
+        
+        // 2. 세션 스토리지에서 이전 페이지 확인
+        const previousPage = sessionStorage.getItem('previousPage');
+        
+        // 3. referrer 확인
+        const referrer = document.referrer;
+        
+        let targetPage = 'index.html'; // 기본값: 그리드 뷰
+        
+        // 우선순위: URL 파라미터 > 세션 스토리지 > referrer
+        if (fromPage === 'hierarchy') {
+            targetPage = 'hierarchy.html';
+        } else if (previousPage === 'hierarchy.html') {
+            targetPage = 'hierarchy.html';
+        } else if (referrer && referrer.includes('hierarchy.html')) {
+            targetPage = 'hierarchy.html';
+        }
+        
+        console.log(`🔙 뒤로가기: ${targetPage}로 이동`);
+        window.location.href = targetPage;
     },
 
     // 날짜 포맷팅
@@ -1025,5 +1050,79 @@ window.documentViewer = () => ({
             console.error('Failed to delete highlight:', error);
             alert('하이라이트 삭제에 실패했습니다');
         }
+    },
+
+    // 언어 전환 함수
+    toggleLanguage() {
+        this.isKorean = !this.isKorean;
+        
+        // 문서 내 언어별 요소 토글 (더 범용적으로)
+        const primaryLangElements = document.querySelectorAll('[lang="ko"], .korean, .kr, .primary-lang');
+        const secondaryLangElements = document.querySelectorAll('[lang="en"], .english, .en, [lang="ja"], .japanese, .jp, [lang="zh"], .chinese, .cn, .secondary-lang');
+        
+        primaryLangElements.forEach(el => {
+            el.style.display = this.isKorean ? 'block' : 'none';
+        });
+        
+        secondaryLangElements.forEach(el => {
+            el.style.display = this.isKorean ? 'none' : 'block';
+        });
+        
+        console.log(`🌐 언어 전환됨 (Primary: ${this.isKorean ? '표시' : '숨김'})`);
+    },
+
+    // 매칭된 PDF 다운로드
+    async downloadMatchedPDF() {
+        if (!this.document.matched_pdf_id) {
+            console.warn('매칭된 PDF가 없습니다');
+            return;
+        }
+        
+        try {
+            console.log('📕 PDF 다운로드 시작:', this.document.matched_pdf_id);
+            
+            // PDF 문서 정보 가져오기
+            const pdfDocument = await window.api.getDocument(this.document.matched_pdf_id);
+            
+            if (!pdfDocument) {
+                throw new Error('PDF 문서를 찾을 수 없습니다');
+            }
+            
+            // PDF 파일 다운로드 URL 생성
+            const downloadUrl = `/api/documents/${this.document.matched_pdf_id}/download`;
+            
+            // 인증 헤더 추가를 위해 fetch 사용
+            const response = await fetch(downloadUrl, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${localStorage.getItem('token')}`
+                }
+            });
+            
+            if (!response.ok) {
+                throw new Error('PDF 다운로드에 실패했습니다');
+            }
+            
+            // Blob으로 변환하여 다운로드
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            
+            // 다운로드 링크 생성 및 클릭
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = pdfDocument.original_filename || `${pdfDocument.title}.pdf`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            
+            // URL 정리
+            window.URL.revokeObjectURL(url);
+            
+            console.log('✅ PDF 다운로드 완료');
+            
+        } catch (error) {
+            console.error('❌ PDF 다운로드 실패:', error);
+            alert('PDF 다운로드에 실패했습니다: ' + error.message);
+        }
     }
 });
diff --git a/frontend/story-reader.html b/frontend/story-reader.html
new file mode 100644
index 0000000..f16a2e2
--- /dev/null
+++ b/frontend/story-reader.html
@@ -0,0 +1,359 @@
+<!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-4" 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>
diff --git a/frontend/story-view.html b/frontend/story-view.html
index 723b07d..d212bce 100644
--- a/frontend/story-view.html
+++ b/frontend/story-view.html
@@ -3,9 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>스토리 뷰 - 정사 경로</title>
+    <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 {
@@ -37,40 +40,8 @@
     </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 id="header-container"></div>
 
     <!-- 메인 컨테이너 -->
     <div class="min-h-screen pt-4" x-show="currentUser">
@@ -101,13 +72,6 @@
                     
                     <!-- 액션 버튼들 -->
                     <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"
@@ -128,13 +92,13 @@
             <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>
+                <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>
+                <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> 트리 에디터로 가기
@@ -157,10 +121,10 @@
                 </div>
                 
                 <!-- 목차 뷰 -->
-                <div x-show="viewMode === 'toc'" class="bg-white rounded-lg shadow-sm">
+                <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> 목차 (정사 경로)
+                            <i class="fas fa-list mr-2"></i> 목차
                         </h2>
                     </div>
                     <div class="p-6">
@@ -168,7 +132,7 @@
                             <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)"
+                                    @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">
@@ -185,54 +149,7 @@
                         </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>
@@ -371,9 +288,9 @@
         // 스크립트 순차 로딩
         (async () => {
             try {
-                await loadScript('static/js/api.js?v=2025012290');
+                await loadScript('static/js/api.js?v=2025012380');
                 console.log('✅ API 스크립트 로드 완료');
-                await loadScript('static/js/story-view.js?v=2025012295');
+                await loadScript('static/js/story-view.js?v=2025012364');
                 console.log('✅ Story View 스크립트 로드 완료');
                 
                 // 모든 스크립트 로드 완료 후 Alpine.js 로드
diff --git a/frontend/upload.html b/frontend/upload.html
new file mode 100644
index 0000000..cb90ff2
--- /dev/null
+++ b/frontend/upload.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>문서 업로드 - Document Server</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+    
+    <style>
+        .drag-area {
+            border: 2px dashed #cbd5e1;
+            transition: all 0.3s ease;
+        }
+        .drag-area.drag-over {
+            border-color: #3b82f6;
+            background-color: #eff6ff;
+        }
+        .file-item {
+            transition: all 0.3s ease;
+        }
+        .file-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        .sortable-ghost {
+            opacity: 0.4;
+        }
+        .sortable-chosen {
+            transform: rotate(5deg);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen" x-data="uploadApp()">
+    <!-- 헤더 -->
+    <div id="header-container"></div>
+
+    <!-- 메인 컨텐츠 -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- 페이지 헤더 -->
+        <div class="mb-8">
+            <div class="flex items-center space-x-4 mb-4">
+                <button @click="goBack()" 
+                        class="flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
+                    <i class="fas fa-arrow-left mr-2"></i>돌아가기
+                </button>
+            </div>
+            
+            <div class="text-center">
+                <h1 class="text-3xl font-bold text-gray-900 mb-2">문서 업로드</h1>
+                <p class="text-gray-600">HTML 및 PDF 파일을 업로드하고 정리해보세요</p>
+            </div>
+        </div>
+
+        <!-- 업로드 단계 표시 -->
+        <div class="mb-8">
+            <div class="flex items-center justify-center space-x-4">
+                <div class="flex items-center">
+                    <div :class="currentStep >= 1 ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-600'" 
+                         class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium">1</div>
+                    <span class="ml-2 text-sm font-medium" :class="currentStep >= 1 ? 'text-blue-600' : 'text-gray-500'">파일 선택</span>
+                </div>
+                <div class="w-16 h-0.5" :class="currentStep >= 2 ? 'bg-blue-600' : 'bg-gray-300'"></div>
+                <div class="flex items-center">
+                    <div :class="currentStep >= 2 ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-600'" 
+                         class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium">2</div>
+                    <span class="ml-2 text-sm font-medium" :class="currentStep >= 2 ? 'text-blue-600' : 'text-gray-500'">서적 설정</span>
+                </div>
+                <div class="w-16 h-0.5" :class="currentStep >= 3 ? 'bg-blue-600' : 'bg-gray-300'"></div>
+                <div class="flex items-center">
+                    <div :class="currentStep >= 3 ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-600'" 
+                         class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium">3</div>
+                    <span class="ml-2 text-sm font-medium" :class="currentStep >= 3 ? 'text-blue-600' : 'text-gray-500'">순서 정리</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 1단계: 파일 선택 -->
+        <div x-show="currentStep === 1" class="space-y-6">
+            <!-- 드래그 앤 드롭 영역 -->
+            <div class="drag-area rounded-lg p-8 text-center" 
+                 @dragover.prevent="handleDragOver"
+                 @dragleave.prevent="handleDragLeave"
+                 @drop.prevent="handleDrop">
+                <div class="mb-4">
+                    <i class="fas fa-cloud-upload-alt text-6xl text-gray-400 mb-4"></i>
+                    <h3 class="text-xl font-semibold text-gray-700 mb-2">파일을 드래그하여 업로드</h3>
+                    <p class="text-gray-500 mb-4">또는 클릭하여 파일을 선택하세요</p>
+                </div>
+                
+                <input type="file" 
+                       multiple 
+                       accept=".html,.htm,.pdf"
+                       @change="handleFileSelect"
+                       class="hidden" 
+                       x-ref="fileInput">
+                
+                <button @click="$refs.fileInput.click()" 
+                        class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                    <i class="fas fa-folder-open mr-2"></i>파일 선택
+                </button>
+                
+                <p class="text-sm text-gray-400 mt-4">HTML, PDF 파일만 업로드 가능합니다</p>
+            </div>
+
+            <!-- 선택된 파일 목록 -->
+            <div x-show="selectedFiles.length > 0" class="bg-white rounded-lg shadow-sm border p-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                    선택된 파일 (<span x-text="selectedFiles.length"></span>개)
+                </h3>
+                
+                <div class="space-y-2 max-h-60 overflow-y-auto">
+                    <template x-for="(file, index) in selectedFiles" :key="index">
+                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                            <div class="flex items-center space-x-3">
+                                <i :class="file.type.includes('pdf') ? 'fas fa-file-pdf text-red-500' : 'fas fa-file-code text-blue-500'"></i>
+                                <div>
+                                    <p class="font-medium text-gray-900" x-text="file.name"></p>
+                                    <p class="text-sm text-gray-500" x-text="formatFileSize(file.size)"></p>
+                                </div>
+                            </div>
+                            <button @click="removeFile(index)" 
+                                    class="p-1 text-gray-400 hover:text-red-600 transition-colors">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </template>
+                </div>
+                
+                <div class="mt-4 flex justify-end">
+                    <button @click="nextStep()" 
+                            class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                        다음 단계
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 2단계: 서적 설정 -->
+        <div x-show="currentStep === 2" class="bg-white rounded-lg shadow-sm border p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-6">서적 설정</h3>
+            
+            <!-- 서적 선택 방식 -->
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-700 mb-3">서적 설정 방식</label>
+                <div class="flex space-x-4">
+                    <label class="flex items-center">
+                        <input type="radio" x-model="bookSelectionMode" value="existing" class="mr-2 text-blue-600">
+                        <span class="text-sm">기존 서적에 추가</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="radio" x-model="bookSelectionMode" value="new" class="mr-2 text-blue-600">
+                        <span class="text-sm">새 서적 생성</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="radio" x-model="bookSelectionMode" value="none" class="mr-2 text-blue-600">
+                        <span class="text-sm">서적 없이 업로드</span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- 기존 서적 선택 -->
+            <div x-show="bookSelectionMode === 'existing'" class="mb-6">
+                <label class="block text-sm font-medium text-gray-700 mb-2">기존 서적 선택</label>
+                <input type="text" x-model="bookSearchQuery" @input="searchBooks" 
+                       placeholder="서적 제목으로 검색..."
+                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                
+                <div x-show="searchedBooks.length > 0" class="mt-2 max-h-40 overflow-y-auto border border-gray-200 rounded-md">
+                    <template x-for="book in searchedBooks" :key="book.id">
+                        <div @click="selectBook(book)" 
+                             class="p-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0">
+                            <p class="font-medium text-gray-900" x-text="book.title"></p>
+                            <p class="text-sm text-gray-500" x-text="book.author"></p>
+                        </div>
+                    </template>
+                </div>
+                
+                <div x-show="selectedBook" class="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-md">
+                    <p class="font-medium text-blue-900">선택된 서적: <span x-text="selectedBook?.title"></span></p>
+                </div>
+            </div>
+
+            <!-- 새 서적 생성 -->
+            <div x-show="bookSelectionMode === 'new'" class="mb-6 space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">서적 제목 *</label>
+                    <input type="text" x-model="newBook.title" 
+                           placeholder="서적 제목을 입력하세요"
+                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <p class="text-xs text-gray-500 mt-1">
+                        💡 동일한 제목의 서적이 이미 존재하는 경우, 기존 서적에 추가할지 묻습니다.
+                    </p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">저자</label>
+                    <input type="text" x-model="newBook.author" 
+                           placeholder="저자명을 입력하세요"
+                           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>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">설명</label>
+                    <textarea x-model="newBook.description" 
+                              placeholder="서적에 대한 설명을 입력하세요"
+                              rows="3"
+                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                </div>
+            </div>
+
+            <!-- 네비게이션 버튼 -->
+            <div class="flex justify-between">
+                <button @click="prevStep()" 
+                        class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                    <i class="fas fa-arrow-left mr-2"></i>이전 단계
+                </button>
+                <button @click="uploadFiles()" 
+                        :disabled="uploading"
+                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50">
+                    <template x-if="!uploading">
+                        <span>업로드 시작 <i class="fas fa-upload ml-2"></i></span>
+                    </template>
+                    <template x-if="uploading">
+                        <span><i class="fas fa-spinner fa-spin mr-2"></i>업로드 중...</span>
+                    </template>
+                </button>
+            </div>
+        </div>
+
+        <!-- 3단계: 순서 정리 (업로드 완료 후) -->
+        <div x-show="currentStep === 3" class="space-y-6">
+            <div class="bg-white rounded-lg shadow-sm border p-6">
+                <div class="flex justify-between items-start mb-6">
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-900 mb-2">문서 순서 정리</h3>
+                        <p class="text-gray-600">드래그하거나 버튼으로 순서를 조정하고, PDF 파일을 HTML 문서와 매칭하세요</p>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button @click="autoSortByName()" 
+                                class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors text-sm">
+                            <i class="fas fa-sort-alpha-down mr-1"></i>이름순 정렬
+                        </button>
+                        <button @click="shuffleDocuments()" 
+                                class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors text-sm">
+                            <i class="fas fa-random mr-1"></i>섞기
+                        </button>
+                        <button @click="reverseOrder()" 
+                                class="px-3 py-1 bg-purple-100 text-purple-700 rounded-md hover:bg-purple-200 transition-colors text-sm">
+                            <i class="fas fa-sort mr-1"></i>순서 뒤집기
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 업로드된 파일 목록 (정렬 가능) -->
+                <div id="sortable-list" class="space-y-4">
+                    <template x-for="(doc, index) in uploadedDocuments" :key="doc.id">
+                        <div class="file-item bg-gray-50 rounded-lg p-4 border border-gray-200" :data-id="doc.id">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center space-x-4">
+                                    <!-- 드래그 핸들 -->
+                                    <div class="cursor-move text-gray-400 hover:text-gray-600">
+                                        <i class="fas fa-grip-vertical"></i>
+                                    </div>
+                                    
+                                    <!-- 순서 번호 -->
+                                    <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                                        <span x-text="index + 1"></span>
+                                    </div>
+                                    
+                                    <!-- 파일 정보 -->
+                                    <div class="flex-1">
+                                        <h4 class="font-medium text-gray-900" x-text="doc.title"></h4>
+                                        <p class="text-sm text-gray-500" x-text="doc.original_filename"></p>
+                                    </div>
+                                </div>
+                                
+                                <div class="flex items-center space-x-4">
+                                    <!-- 순서 조정 버튼 -->
+                                    <div class="flex flex-col space-y-1">
+                                        <button @click="moveUp(index)" 
+                                                :disabled="index === 0"
+                                                class="w-6 h-6 bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs flex items-center justify-center transition-colors"
+                                                title="위로 이동">
+                                            <i class="fas fa-chevron-up"></i>
+                                        </button>
+                                        <button @click="moveDown(index)" 
+                                                :disabled="index === uploadedDocuments.length - 1"
+                                                class="w-6 h-6 bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs flex items-center justify-center transition-colors"
+                                                title="아래로 이동">
+                                            <i class="fas fa-chevron-down"></i>
+                                        </button>
+                                    </div>
+                                    
+                                    <!-- PDF 매칭 (HTML 파일인 경우만) -->
+                                    <div x-show="doc.file_type === 'html'" class="flex items-center space-x-2">
+                                        <label class="text-sm text-gray-700">PDF:</label>
+                                        <select x-model="doc.matched_pdf_id" 
+                                                class="px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                            <option value="">선택 안함</option>
+                                            <template x-for="pdf in pdfFiles" :key="pdf.id">
+                                                <option :value="pdf.id" x-text="pdf.title"></option>
+                                            </template>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+                
+                <!-- 완료 버튼 -->
+                <div class="mt-8 flex justify-between">
+                    <button @click="resetUpload()" 
+                            class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                        <i class="fas fa-redo mr-2"></i>다시 업로드
+                    </button>
+                    <button @click="finalizeUpload()" 
+                            :disabled="finalizing"
+                            class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50">
+                        <template x-if="!finalizing">
+                            <span>완료 <i class="fas fa-check ml-2"></i></span>
+                        </template>
+                        <template x-if="finalizing">
+                            <span><i class="fas fa-spinner fa-spin mr-2"></i>처리 중...</span>
+                        </template>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- JavaScript 파일들 -->
+    <script src="/static/js/api.js?v=2025012380"></script>
+    <script src="/static/js/auth.js?v=2025012351"></script>
+    <script src="/static/js/header-loader.js?v=2025012351"></script>
+    <script src="/static/js/upload.js?v=2025012384"></script>
+</body>
+</html>
diff --git a/frontend/viewer.html b/frontend/viewer.html
index 9fd344b..698bdbd 100644
--- a/frontend/viewer.html
+++ b/frontend/viewer.html
@@ -15,66 +15,108 @@
 <body class="bg-gray-50 min-h-screen">
     <div x-data="documentViewer" x-init="init()">
         <!-- 헤더 -->
-        <header class="bg-white shadow-sm border-b sticky top-0 z-40">
+        <header class="bg-white shadow-sm border-b sticky top-0 z-40 backdrop-blur-sm bg-white/95">
             <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 justify-between items-center h-12 border-b border-gray-100">
                     <!-- 뒤로가기 및 문서 정보 -->
                     <div class="flex items-center space-x-4">
-                        <button @click="goBack" class="text-gray-600 hover:text-gray-900">
-                            <i class="fas fa-arrow-left text-xl"></i>
+                        <button @click="goBack" class="w-8 h-8 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center justify-center transition-all duration-200 text-gray-600 hover:text-gray-900">
+                            <i class="fas fa-arrow-left text-sm"></i>
                         </button>
                         <div>
-                            <h1 class="text-lg font-semibold text-gray-900" x-text="document?.title || '로딩 중...'"></h1>
-                            <p class="text-sm text-gray-500" x-show="document" x-text="document?.uploader_name"></p>
+                            <h1 class="text-lg font-bold text-gray-900" x-text="document?.title || '로딩 중...'"></h1>
                         </div>
                     </div>
+                    <!-- 업로더 정보 -->
+                    <div x-show="document">
+                        <p class="text-sm text-gray-500 font-medium" x-text="document?.uploader_name"></p>
+                    </div>
+                </div>
 
-                    <!-- 도구 모음 -->
-                    <div class="flex items-center space-x-2">
+                <!-- 두 번째 줄: 도구 모음 -->
+                <div class="flex justify-between items-center h-14 py-2">
+                    <!-- 왼쪽: 도구들 -->
+                    <div class="flex items-center space-x-3">
                         <!-- 하이라이트 색상 선택 -->
-                        <div class="flex items-center space-x-1 bg-gray-100 rounded-lg p-1">
+                        <div class="flex items-center space-x-1 bg-white rounded-xl shadow-sm border p-2">
+                            <span class="text-xs font-medium text-gray-600 mr-2">하이라이트</span>
                             <button @click="createHighlightWithColor('#FFFF00')" 
-                                    :class="selectedHighlightColor === '#FFFF00' ? 'ring-2 ring-blue-500' : ''"
-                                    class="w-8 h-8 bg-yellow-300 rounded border-2 border-white"
+                                    :class="selectedHighlightColor === '#FFFF00' ? 'ring-2 ring-yellow-400 scale-110' : 'hover:scale-105'"
+                                    class="w-6 h-6 bg-yellow-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
                                     title="노란색 하이라이트"></button>
                             <button @click="createHighlightWithColor('#90EE90')" 
-                                    :class="selectedHighlightColor === '#90EE90' ? 'ring-2 ring-blue-500' : ''"
-                                    class="w-8 h-8 bg-green-300 rounded border-2 border-white"
+                                    :class="selectedHighlightColor === '#90EE90' ? 'ring-2 ring-green-400 scale-110' : 'hover:scale-105'"
+                                    class="w-6 h-6 bg-green-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
                                     title="초록색 하이라이트"></button>
                             <button @click="createHighlightWithColor('#FFB6C1')" 
-                                    :class="selectedHighlightColor === '#FFB6C1' ? 'ring-2 ring-blue-500' : ''"
-                                    class="w-8 h-8 bg-pink-300 rounded border-2 border-white"
+                                    :class="selectedHighlightColor === '#FFB6C1' ? 'ring-2 ring-pink-400 scale-110' : 'hover:scale-105'"
+                                    class="w-6 h-6 bg-pink-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
                                     title="분홍색 하이라이트"></button>
                             <button @click="createHighlightWithColor('#87CEEB')" 
-                                    :class="selectedHighlightColor === '#87CEEB' ? 'ring-2 ring-blue-500' : ''"
-                                    class="w-8 h-8 bg-blue-300 rounded border-2 border-white"
+                                    :class="selectedHighlightColor === '#87CEEB' ? 'ring-2 ring-blue-400 scale-110' : 'hover:scale-105'"
+                                    class="w-6 h-6 bg-blue-300 rounded-full border-2 border-white shadow-sm transition-all duration-200"
                                     title="파란색 하이라이트"></button>
                         </div>
 
-                        <!-- 메모 패널 토글 -->
-                        <button @click="showNotesPanel = !showNotesPanel" 
-                                :class="showNotesPanel ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
-                                class="px-3 py-2 rounded-md hover:bg-blue-700 transition-colors">
-                            <i class="fas fa-sticky-note mr-1"></i>
-                            메모 (<span x-text="notes.length"></span>)
-                        </button>
+                        <!-- 메모 & 책갈피 버튼 그룹 -->
+                        <div class="flex items-center bg-white rounded-xl shadow-sm border overflow-hidden">
+                            <!-- 메모 버튼 -->
+                            <button @click="showNotesPanel = !showNotesPanel" 
+                                    :class="showNotesPanel ? 'bg-blue-50 text-blue-700 border-r border-blue-200' : 'text-gray-600 hover:bg-gray-50 border-r border-gray-200'"
+                                    class="px-3 py-1.5 transition-all duration-200 flex flex-col items-center space-y-0.5 relative min-w-[50px]">
+                                <div class="relative">
+                                    <i class="fas fa-sticky-note text-sm"></i>
+                                    <span x-show="notes.length > 0" 
+                                          class="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-3 h-3 flex items-center justify-center font-medium text-xs"
+                                          x-text="notes.length"></span>
+                                </div>
+                                <span class="font-medium text-xs">메모</span>
+                            </button>
 
-                        <!-- 책갈피 패널 토글 -->
-                        <button @click="showBookmarksPanel = !showBookmarksPanel" 
-                                :class="showBookmarksPanel ? 'bg-green-600 text-white' : 'bg-gray-200 text-gray-700'"
-                                class="px-3 py-2 rounded-md hover:bg-green-700 transition-colors">
-                            <i class="fas fa-bookmark mr-1"></i>
-                            책갈피 (<span x-text="bookmarks.length"></span>)
-                        </button>
+                            <!-- 책갈피 버튼 -->
+                            <button @click="showBookmarksPanel = !showBookmarksPanel" 
+                                    :class="showBookmarksPanel ? 'bg-amber-50 text-amber-700' : 'text-gray-600 hover:bg-gray-50'"
+                                    class="px-3 py-1.5 transition-all duration-200 flex flex-col items-center space-y-0.5 relative min-w-[50px]">
+                                <div class="relative">
+                                    <i class="fas fa-bookmark text-sm"></i>
+                                    <span x-show="bookmarks.length > 0" 
+                                          class="absolute -top-1 -right-1 bg-amber-500 text-white text-xs rounded-full w-3 h-3 flex items-center justify-center font-medium text-xs"
+                                          x-text="bookmarks.length"></span>
+                                </div>
+                                <span class="font-medium text-xs">책갈피</span>
+                            </button>
+                        </div>
+                    </div>
 
-                        <!-- 검색 -->
+                    <!-- 중앙: 검색 -->
+                    <div class="flex-1 flex justify-center">
                         <div class="relative">
                             <input type="text" x-model="searchQuery" @input="searchInDocument" 
                                    placeholder="문서 내 검색..." 
-                                   class="w-64 pl-8 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <i class="fas fa-search absolute left-2 top-3 text-gray-400"></i>
+                                   class="w-64 pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm transition-all duration-200">
+                            <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
                         </div>
                     </div>
+
+                    <!-- 오른쪽: 한영 전환 -->
+                    <div class="flex items-center">
+                        <!-- PDF 다운로드 버튼 (매칭된 PDF가 있는 경우) -->
+                        <button x-show="document.matched_pdf_id" 
+                                @click="downloadMatchedPDF()" 
+                                class="bg-red-600 text-white px-4 py-2 rounded-xl hover:bg-red-700 transition-all duration-200 flex items-center space-x-2 shadow-sm"
+                                title="매칭된 PDF 다운로드">
+                            <i class="fas fa-file-pdf text-sm"></i>
+                            <span class="font-medium text-sm">PDF 원본</span>
+                        </button>
+                        
+                        <button @click="toggleLanguage()" 
+                                class="bg-blue-600 text-white px-4 py-2 rounded-xl hover:bg-blue-700 transition-all duration-200 flex items-center space-x-2 shadow-sm"
+                                id="language-toggle-btn">
+                            <i class="fas fa-globe text-sm"></i>
+                            <span class="font-medium text-sm">언어전환</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </header>
@@ -82,7 +124,8 @@
         <!-- 메인 컨텐츠 -->
         <div class="flex max-w-7xl mx-auto">
             <!-- 문서 뷰어 -->
-            <main class="flex-1 bg-white shadow-sm" :class="(showNotesPanel || showBookmarksPanel) ? 'mr-80' : ''">
+            <main class="flex-1 bg-white shadow-sm" :class="(showNotesPanel || showBookmarksPanel) ? 'mr-70' : ''" 
+                  :style="(showNotesPanel || showBookmarksPanel) ? 'margin-right: 280px;' : ''">
                 <div class="p-8">
                     <!-- 로딩 상태 -->
                     <div x-show="loading" class="text-center py-16">
@@ -112,24 +155,35 @@
 
             <!-- 사이드 패널 -->
             <aside x-show="showNotesPanel || showBookmarksPanel" 
-                   class="fixed right-0 top-16 w-80 h-screen bg-white shadow-lg border-l overflow-hidden flex flex-col">
+                   class="fixed right-0 bg-white shadow-lg border-l overflow-hidden flex flex-col"
+                   style="height: calc(100vh - 7rem); top: 7rem; width: 280px;">
                 
                 <!-- 패널 탭 -->
-                <div class="flex border-b">
+                <div class="flex bg-gray-50 p-1 rounded-t-lg">
                     <button @click="activePanel = 'notes'; showNotesPanel = true; showBookmarksPanel = false" 
-                            :class="activePanel === 'notes' ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'"
-                            class="flex-1 px-4 py-3 text-sm font-medium">
-                        <i class="fas fa-sticky-note mr-2"></i>
-                        메모 (<span x-text="notes.length"></span>)
+                            :class="activePanel === 'notes' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'"
+                            class="flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 flex items-center justify-center space-x-2">
+                        <div class="relative">
+                            <i class="fas fa-sticky-note"></i>
+                            <span x-show="notes.length > 0" 
+                                  class="absolute -top-1.5 -right-1.5 bg-blue-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-medium"
+                                  x-text="notes.length"></span>
+                        </div>
+                        <span>메모</span>
                     </button>
                     <button @click="activePanel = 'bookmarks'; showBookmarksPanel = true; showNotesPanel = false" 
-                            :class="activePanel === 'bookmarks' ? 'bg-green-50 text-green-600 border-b-2 border-green-600' : 'text-gray-600'"
-                            class="flex-1 px-4 py-3 text-sm font-medium">
-                        <i class="fas fa-bookmark mr-2"></i>
-                        책갈피 (<span x-text="bookmarks.length"></span>)
+                            :class="activePanel === 'bookmarks' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'"
+                            class="flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 flex items-center justify-center space-x-2">
+                        <div class="relative">
+                            <i class="fas fa-bookmark"></i>
+                            <span x-show="bookmarks.length > 0" 
+                                  class="absolute -top-1.5 -right-1.5 bg-amber-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-medium"
+                                  x-text="bookmarks.length"></span>
+                        </div>
+                        <span>책갈피</span>
                     </button>
                     <button @click="showNotesPanel = false; showBookmarksPanel = false" 
-                            class="px-3 py-3 text-gray-400 hover:text-gray-600">
+                            class="px-3 py-2.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -144,38 +198,47 @@
                     
                     <div class="flex-1 overflow-y-auto">
                         <template x-if="filteredNotes.length === 0">
-                            <div class="p-4 text-center text-gray-500">
-                                <i class="fas fa-sticky-note text-3xl mb-2"></i>
-                                <p>메모가 없습니다</p>
-                                <p class="text-sm">텍스트를 선택하고 메모를 추가해보세요</p>
+                            <div class="p-8 text-center text-gray-500">
+                                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <i class="fas fa-sticky-note text-2xl text-blue-500"></i>
+                                </div>
+                                <h3 class="font-semibold text-gray-700 mb-2">메모가 없습니다</h3>
+                                <p class="text-sm text-gray-500">텍스트를 선택하고 메모를 추가해보세요</p>
                             </div>
                         </template>
 
                         <div class="space-y-2 p-2">
                             <template x-for="note in filteredNotes" :key="note.id">
-                                <div class="bg-gray-50 rounded-lg p-3 cursor-pointer hover:bg-gray-100"
+                                <div class="bg-white rounded-lg p-3 cursor-pointer hover:shadow-md border border-gray-100 transition-all duration-200 group"
                                      @click="scrollToHighlight(note.highlight.id)">
+                                    <!-- 선택된 텍스트 -->
                                     <div class="flex justify-between items-start mb-2">
-                                        <div class="flex-1">
-                                            <p class="text-sm text-gray-600 line-clamp-2" x-text="note.highlight.selected_text"></p>
+                                        <div class="flex-1 bg-blue-50 rounded-md p-1.5 mr-2">
+                                            <p class="text-xs text-blue-800 line-clamp-2 font-medium" x-text="note.highlight.selected_text"></p>
                                         </div>
-                                        <div class="flex space-x-1 ml-2">
-                                            <button @click.stop="editNote(note)" class="text-blue-500 hover:text-blue-700">
+                                        <div class="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                                            <button @click.stop="editNote(note)" 
+                                                    class="w-6 h-6 bg-blue-100 text-blue-600 rounded-md hover:bg-blue-200 flex items-center justify-center transition-colors duration-200">
                                                 <i class="fas fa-edit text-xs"></i>
                                             </button>
-                                            <button @click.stop="deleteNote(note.id)" class="text-red-500 hover:text-red-700">
+                                            <button @click.stop="deleteNote(note.id)" 
+                                                    class="w-6 h-6 bg-red-100 text-red-600 rounded-md hover:bg-red-200 flex items-center justify-center transition-colors duration-200">
                                                 <i class="fas fa-trash text-xs"></i>
                                             </button>
                                         </div>
                                     </div>
-                                    <p class="text-sm text-gray-800" x-text="note.content"></p>
-                                    <div class="flex justify-between items-center mt-2">
+                                    
+                                    <!-- 메모 내용 -->
+                                    <p class="text-sm text-gray-800 mb-2 leading-relaxed" x-text="note.content"></p>
+                                    
+                                    <!-- 태그와 날짜 -->
+                                    <div class="flex justify-between items-center">
                                         <div class="flex flex-wrap gap-1">
                                             <template x-for="tag in note.tags || []" :key="tag">
-                                                <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full" x-text="tag"></span>
+                                                <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full font-medium" x-text="tag"></span>
                                             </template>
                                         </div>
-                                        <span class="text-xs text-gray-500" x-text="formatDate(note.created_at)"></span>
+                                        <span class="text-xs text-gray-500 font-medium" x-text="formatDate(note.created_at)"></span>
                                     </div>
                                 </div>
                             </template>
@@ -186,7 +249,7 @@
                 <!-- 책갈피 패널 -->
                 <div x-show="activePanel === 'bookmarks'" class="flex-1 overflow-hidden flex flex-col">
                     <div class="p-4 border-b">
-                        <button @click="addBookmark" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700">
+                        <button @click="addBookmark" class="w-full bg-gradient-to-r from-amber-500 to-orange-500 text-white py-3 px-4 rounded-xl hover:from-amber-600 hover:to-orange-600 transition-all duration-200 shadow-sm font-medium">
                             <i class="fas fa-plus mr-2"></i>
                             현재 위치에 책갈피 추가
                         </button>
@@ -194,29 +257,43 @@
                     
                     <div class="flex-1 overflow-y-auto">
                         <template x-if="bookmarks.length === 0">
-                            <div class="p-4 text-center text-gray-500">
-                                <i class="fas fa-bookmark text-3xl mb-2"></i>
-                                <p>책갈피가 없습니다</p>
+                            <div class="p-8 text-center text-gray-500">
+                                <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <i class="fas fa-bookmark text-2xl text-amber-500"></i>
+                                </div>
+                                <h3 class="font-semibold text-gray-700 mb-2">책갈피가 없습니다</h3>
+                                <p class="text-sm text-gray-500">위의 버튼을 눌러 책갈피를 추가해보세요</p>
                             </div>
                         </template>
 
                         <div class="space-y-2 p-2">
                             <template x-for="bookmark in bookmarks" :key="bookmark.id">
-                                <div class="bg-gray-50 rounded-lg p-3 cursor-pointer hover:bg-gray-100"
+                                <div class="bg-white rounded-lg p-3 cursor-pointer hover:shadow-md border border-gray-100 transition-all duration-200 group"
                                      @click="scrollToBookmark(bookmark)">
                                     <div class="flex justify-between items-start mb-2">
-                                        <h4 class="font-medium text-gray-900" x-text="bookmark.title"></h4>
-                                        <div class="flex space-x-1">
-                                            <button @click.stop="editBookmark(bookmark)" class="text-blue-500 hover:text-blue-700">
+                                        <div class="flex items-start space-x-2 flex-1">
+                                            <div class="w-6 h-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-md flex items-center justify-center flex-shrink-0">
+                                                <i class="fas fa-bookmark text-white text-xs"></i>
+                                            </div>
+                                            <div class="flex-1 min-w-0">
+                                                <h4 class="font-semibold text-gray-900 text-sm truncate" x-text="bookmark.title"></h4>
+                                                <p class="text-xs text-gray-600 line-clamp-2" x-text="bookmark.description"></p>
+                                            </div>
+                                        </div>
+                                        <div class="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ml-2">
+                                            <button @click.stop="editBookmark(bookmark)" 
+                                                    class="w-6 h-6 bg-blue-100 text-blue-600 rounded-md hover:bg-blue-200 flex items-center justify-center transition-colors duration-200">
                                                 <i class="fas fa-edit text-xs"></i>
                                             </button>
-                                            <button @click.stop="deleteBookmark(bookmark.id)" class="text-red-500 hover:text-red-700">
+                                            <button @click.stop="deleteBookmark(bookmark.id)" 
+                                                    class="w-6 h-6 bg-red-100 text-red-600 rounded-md hover:bg-red-200 flex items-center justify-center transition-colors duration-200">
                                                 <i class="fas fa-trash text-xs"></i>
                                             </button>
                                         </div>
                                     </div>
-                                    <p class="text-sm text-gray-600" x-text="bookmark.description"></p>
-                                    <span class="text-xs text-gray-500" x-text="formatDate(bookmark.created_at)"></span>
+                                    <div class="flex justify-end">
+                                        <span class="text-xs text-gray-500 font-medium" x-text="formatDate(bookmark.created_at)"></span>
+                                    </div>
                                 </div>
                             </template>
                         </div>
@@ -313,12 +390,20 @@
     </div>
 
     <!-- 스크립트 -->
-    <script src="/static/js/api.js?v=2025012225"></script>
+    <script src="/static/js/api.js?v=2025012380"></script>
     <script src="/static/js/viewer.js?v=2025012225"></script>
 
     <style>
         [x-cloak] { display: none !important; }
         
+        /* 기존 언어 전환 버튼 숨기기 */
+        .language-toggle,
+        button[onclick*="toggleLanguage"],
+        *[class*="language"],
+        *[class*="translate"] {
+            display: none !important;
+        }
+        
         .highlight {
             position: relative;
             cursor: pointer;
