Major UI overhaul and upload system improvements

- Removed hierarchy view and integrated functionality into index.html
- Added book-based document grouping with dedicated book-documents.html page
- Implemented comprehensive multi-file upload system with drag-and-drop reordering
- Added HTML-PDF matching functionality with download capability
- Enhanced upload workflow with 3-step process (File Selection, Book Settings, Order & Match)
- Added book conflict resolution (existing book vs new edition)
- Improved document order adjustment with one-click sort options
- Added modular header component system
- Updated API connectivity for Docker environment
- Enhanced viewer.html with PDF download functionality
- Fixed browser caching issues with version management
- Improved mobile responsiveness and modern UI design

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;
         },
         
         // 챕터 편집 (인라인 모달)