스토리 뷰 페이지 헤더 z-index 충돌 문제 해결

- 메인 컨테이너 padding-top을 pt-4에서 pt-20으로 증가
- 드롭다운 z-index를 z-[60]으로 설정하여 헤더보다 높은 우선순위 부여
- 스토리 선택 드롭다운이 정상적으로 작동하도록 수정
- 디버깅용 코드 정리

frontend/story-view.html

@@ -44,7 +44,7 @@
     <div id="header-container"></div>
 
     <!-- 메인 컨테이너 -->
-    <div class="min-h-screen pt-4" x-show="currentUser">
+    <div class="min-h-screen pt-20" x-show="currentUser">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             
             <!-- 상단 툴바 -->
@@ -54,8 +54,8 @@
                     <div class="flex items-center space-x-4">
                         <select 
                             x-model="selectedTreeId"
-                            @change="loadStory(selectedTreeId)"
-                            class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            @change="loadStory($event.target.value)"
+                            class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer relative z-[60]"
                         >
                             <option value="">📚 스토리 선택</option>
                             <template x-for="tree in userTrees" :key="tree.id">
@@ -63,6 +63,7 @@
                             </template>
                         </select>
                         
+                        
                         <div x-show="selectedTree" class="text-sm text-gray-600">
                             <span x-text="`총 ${canonicalNodes.length}개 챕터`"></span>
                             <span class="mx-2">•</span>
@@ -178,7 +179,7 @@
                 </div>
             </div>
             
-            <div class="flex-1 p-6 overflow-hidden">
+            <div class="flex-1 p-6 overflow-hidden" x-show="editingNode">
                 <div class="h-full flex flex-col space-y-4">
                     <!-- 제목 편집 -->
                     <div>
@@ -288,17 +289,31 @@
         // 스크립트 순차 로딩
         (async () => {
             try {
-                await loadScript('static/js/api.js?v=2025012380');
+                console.log('🚀 스크립트 로딩 시작...');
+                
+                await loadScript('static/js/api.js?v=2025012627');
                 console.log('✅ API 스크립트 로드 완료');
-                await loadScript('static/js/story-view.js?v=2025012364');
+                
+                await loadScript('static/js/story-view.js?v=2025012627');
                 console.log('✅ Story View 스크립트 로드 완료');
                 
+                // Alpine.js 로드 전에 함수 등록 확인
+                console.log('🔍 storyViewApp 함수 확인:', typeof window.storyViewApp);
+                
                 // 모든 스크립트 로드 완료 후 Alpine.js 로드
                 console.log('🚀 Alpine.js 로딩...');
                 await loadScript('https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js');
                 console.log('✅ Alpine.js 로드 완료');
+                
+                // Alpine.js 초기화 확인
+                setTimeout(() => {
+                    console.log('🔍 Alpine 객체 확인:', typeof Alpine);
+                    console.log('🔍 Alpine 초기화 상태:', Alpine ? 'OK' : 'FAILED');
+                }, 500);
+                
             } catch (error) {
                 console.error('❌ 스크립트 로드 실패:', error);
+                console.error('❌ 에러 상세:', error.message);
             }
         })();
     </script>