Auto-deploy from GitHub Actions - 2025-12-12 13:10:39

app/routes.py

@@ -1991,6 +1991,12 @@ def admin_files():
     """파일 목록 관리 페이지"""
     return render_template('admin_files.html')
 
+@main_bp.route('/admin/tags')
+@admin_required
+def admin_tags():
+    """태그 보기 페이지"""
+    return render_template('admin_tags.html')
+
 @main_bp.route('/admin/utils')
 @admin_required
 def admin_utils():
@@ -4943,10 +4949,10 @@ def process_graph(file_id):
     except Exception as e:
         return jsonify({'error': f'Graph Extraction 중 오류가 발생했습니다: {str(e)}', 'step': 'graph'}), 500
 
-@main_bp.route('/api/files/<int:file_id>/process/tags', methods=['POST'])
+@main_bp.route('/api/files/<int:file_id>/process/tags/detailed', methods=['POST'])
 @login_required
-def generate_tags(file_id):
-    """태그 생성 (Parent Chunk, 회차 분석, GraphRAG 활용) - 계층적 구조"""
+def generate_detailed_tags(file_id):
+    """상세 태그 생성 (Parent Chunk, 회차 분석, GraphRAG 활용) - 계층적 구조"""
     try:
         file = UploadedFile.query.get_or_404(file_id)
         
@@ -4973,7 +4979,7 @@ def generate_tags(file_id):
 """
         
         # 2. 회차 분석 (요약)
-        analyses = EpisodeAnalysis.query.filter_by(file_id=file_id).order_by(EpisodeAnalysis.id).limit(20).all()
+        analyses = EpisodeAnalysis.query.filter_by(file_id=file_id).order_by(EpisodeAnalysis.id).limit(50).all()
         analysis_text = ""
         if analyses:
             analysis_text = "[회차별 분석 (요약)]\n"
@@ -4982,40 +4988,107 @@ def generate_tags(file_id):
                 content_preview = analysis.analysis_content[:300] + "..." if len(analysis.analysis_content) > 300 else analysis.analysis_content
                 analysis_text += f"- {analysis.episode_title}: {content_preview}\n"
         
-        # 3. GraphRAG (주요 인물, 관계, 사건)
-        entities = GraphEntity.query.filter_by(file_id=file_id).limit(30).all()
-        relationships = GraphRelationship.query.filter_by(file_id=file_id).limit(30).all()
-        events = GraphEvent.query.filter_by(file_id=file_id).limit(30).all()
-        
-        graph_text = ""
-        if entities or relationships or events:
-            graph_text = "[GraphRAG 데이터]\n"
-            if entities:
-                entity_names = [f"{e.entity_name}({e.entity_type})" for e in entities]
-                graph_text += f"엔티티: {', '.join(entity_names)}\n"
-            if relationships:
-                rel_strs = [f"{r.source}->{r.target}({r.relationship_type})" for r in relationships]
-                graph_text += f"관계: {', '.join(rel_strs)}\n"
-            if events:
-                event_names = [e.event_name for e in events]
-                graph_text += f"사건: {', '.join(event_names)}\n"
-            
+        print(f"[상세 태그 생성] 회차 분석 데이터 길이: {len(analysis_text)} (항목 수: {len(analyses)})")
+        
+        # 3. GraphRAG (전체, 회차별, 인물별 분석을 위한 데이터 수집)
+        all_entities = GraphEntity.query.filter_by(file_id=file_id).all()
+        all_relationships = GraphRelationship.query.filter_by(file_id=file_id).all()
+        all_events = GraphEvent.query.filter_by(file_id=file_id).all()
+        
+        # 3-1. 전체 요약
+        total_graph_summary = ""
+        if all_entities or all_relationships or all_events:
+            total_graph_summary = "[GraphRAG 데이터 (전체)]\n"
+            if all_entities:
+                unique_entities = sorted(list(set([f"{e.entity_name}({e.entity_type})" for e in all_entities])))
+                # 너무 많으면 일부만
+                total_graph_summary += f"주요 엔티티({len(unique_entities)}개): {', '.join(unique_entities[:50])}\n"
+            if all_relationships:
+                unique_rels = sorted(list(set([f"{r.source}->{r.target}({r.relationship_type})" for r in all_relationships])))
+                total_graph_summary += f"주요 관계({len(unique_rels)}개): {', '.join(unique_rels[:50])}\n"
+            if all_events:
+                unique_events = sorted(list(set([e.event_name for e in all_events])))
+                total_graph_summary += f"주요 사건({len(unique_events)}개): {', '.join(unique_events[:30])}\n"
+        
+        # 3-2. 회차별 요약 (앞부분 5개 회차만 샘플링)
+        episode_graph_summary = ""
+        episode_titles = sorted(list(set([e.episode_title for e in all_events] + [e.episode_title for e in all_entities])))
+        if episode_titles:
+            episode_graph_summary = "[GraphRAG 데이터 (회차별 샘플)]\n"
+            for title in episode_titles[:5]:
+                ep_entities = [e.entity_name for e in all_entities if e.episode_title == title]
+                ep_events = [e.event_name for e in all_events if e.episode_title == title]
+                episode_graph_summary += f"- {title}: 주요 엔티티({', '.join(ep_entities[:5])}), 주요 사건({', '.join(ep_events[:3])})\n"
+
+        # 3-3. 인물별 요약 (주요 인물 5명)
+        character_graph_summary = ""
+        from collections import Counter
+        # entity_type이 'character' 또는 '인물'인 것만 카운트
+        char_counts = Counter([e.entity_name for e in all_entities if e.entity_type in ['character', '인물']])
+        top_characters = [char for char, count in char_counts.most_common(5)]
+        
+        if top_characters:
+            character_graph_summary = "[GraphRAG 데이터 (주요 인물별)]\n"
+            for char in top_characters:
+                # 해당 인물이 포함된 관계나 사건
+                char_rels = [f"{r.target}({r.relationship_type})" for r in all_relationships if r.source == char]
+                char_events = [e.event_name for e in all_events if char in (e.participants or "")]
+                character_graph_summary += f"- {char}: 주요 관계({', '.join(char_rels[:5])}), 관련 사건({', '.join(char_events[:3])})\n"
+
+        # 3-4. 상세 관계/사건 요약
+        detail_graph_summary = ""
+        # 인물-인물 관계 (시간순/ID순)
+        # ID가 생성 순서이므로 시간 흐름을 어느 정도 반영함
+        sorted_relationships = sorted(all_relationships, key=lambda r: r.id)
+        if sorted_relationships:
+             detail_graph_summary += "[GraphRAG (인물-인물 관계 시간순 - 전체)]\n"
+             # 모든 관계 포함 (토큰 제한 내에서)
+             for rel in sorted_relationships:
+                 detail_graph_summary += f"- {rel.source} -> {rel.target}: {rel.relationship_type}\n"
+        
+        # 사건-인물들 관계
+        if all_events:
+            detail_graph_summary += "\n[GraphRAG (사건-인물들 관계 - 전체)]\n"
+            # 모든 사건 포함
+            for evt in all_events:
+                participants_str = evt.participants if evt.participants else "정보 없음"
+                # JSON 문자열인 경우 파싱 시도
+                if participants_str.startswith('['):
+                    try:
+                        import json
+                        p_list = json.loads(participants_str)
+                        if isinstance(p_list, list):
+                            participants_str = ", ".join(p_list)
+                    except:
+                        pass
+                detail_graph_summary += f"- 사건 '{evt.event_name}': 참여자 [{participants_str}]\n"
+
         # 데이터가 너무 없으면 태그 생성 불가
-        if not parent_chunk_text and not analysis_text and not graph_text:
+        if not parent_chunk_text and not analysis_text and not total_graph_summary:
             return jsonify({'error': '태그를 생성할 충분한 데이터(Parent Chunk, 회차 분석 등)가 없습니다.'}), 400
             
         # 프롬프트 구성
         prompt = f"""
-다음은 웹소설의 분석 데이터입니다. 이 데이터를 바탕으로 각 섹션별로 핵심 태그를 추출해주세요.
+다음은 웹소설의 분석 데이터입니다. 이 데이터를 바탕으로 각 섹션별로 매우 상세하고 구체적인 태그를 추출해주세요.
 
 {parent_chunk_text}
 
 {analysis_text}
 
-{graph_text}
+{total_graph_summary}
+
+{episode_graph_summary}
+
+{character_graph_summary}
+
+{detail_graph_summary}
 
 [요구사항]
-다음 JSON 형식으로 태그를 생성하세요. 각 항목당 5~10개의 핵심 키워드를 추출하세요. 없는 항목은 빈 배열로 두세요.
+다음 JSON 구조에 맞춰 태그를 생성하세요. 
+각 항목당 10~20개의 태그를 생성하며, 단순한 단어보다는 구체적인 내용을 담은 '구' 형태의 태그를 선호합니다.
+(예: "복수" -> "가문 멸망에 대한 처절한 복수", "성장" -> "마법적 재능의 급격한 개화", "갈등" -> "황위 계승권을 둘러싼 형제간의 암투")
+
+특히 'graph_rag_detail' 항목은 입력된 모든 관계와 사건 데이터를 빠짐없이 분석하여, 가능한 한 모든 인물 관계 변화와 사건 속 인물들의 역할을 상세히 묘사하는 태그를 생성하세요. 태그 개수 제한을 두지 말고 풍부하게 생성하세요.
 
 {{
   "parent_chunk": {{
@@ -5025,14 +5098,42 @@ def generate_tags(file_id):
     "others": ["태그1", "태그2"]
   }},
   "episodes": {{
-    "world_view": ["태그1", "태그2"],
+    "story": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"],
     "characters": ["태그1", "태그2"],
-    "items": ["태그1", "태그2"]
+    "relationships_change": ["태그1", "태그2"],
+    "appearance": ["태그1", "태그2"],
+    "clothing": ["태그1", "태그2"],
+    "items": ["태그1", "태그2"],
+    "others": ["태그1", "태그2"]
+  }},
+  "graph_rag_total": {{
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
+  }},
+  "graph_rag_by_episode": {{
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
+  }},
+  "graph_rag_by_character": {{
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
   }},
-  "graph_rag": {{
+  "graph_rag_by_event": {{
     "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
     "relationships": ["태그1", "태그2"],
     "events": ["태그1", "태그2"]
+  }},
+  "graph_rag_detail": {{
+    "person_person_relationships_chronological": ["모든 주요 인물 관계의 시간적 변화를 상세히 묘사"],
+    "event_person_relationships": ["모든 사건별 주요 인물의 역할과 관계를 상세히 묘사"]
   }}
 }}
 
@@ -5040,7 +5141,7 @@ def generate_tags(file_id):
 """
 
         # AI 호출
-        print(f"[태그 생성] '{file.original_filename}' 태그 생성 요청 (모델: {file.model_name})")
+        print(f"[상세 태그 생성] '{file.original_filename}' 상세 태그 생성 요청 (모델: {file.model_name})")
         
         response_text = None
         
@@ -5056,8 +5157,8 @@ def generate_tags(file_id):
                     result = gemini_client.generate_response(
                         prompt=prompt,
                         model_name=gemini_model_name,
-                        temperature=0.5,
-                        max_output_tokens=2048
+                        temperature=0.6,
+                        max_output_tokens=4096
                     )
                     if not result['error'] and result.get('response'):
                         response_text = result['response'].strip()
@@ -5072,23 +5173,40 @@ def generate_tags(file_id):
                 from app.core.config import get_config
                 config = get_config()
                 
+                print(f"[상세 태그 생성] Ollama API 호출 시작: {config.OLLAMA_BASE_URL}, 모델: {file.model_name}")
+                
+                # JSON 형식 지원 여부와 관계없이 먼저 시도 (일부 모델은 JSON 형식을 지원하지 않음)
                 ollama_response = requests.post(
                     f"{config.OLLAMA_BASE_URL}/api/generate",
                     json={
                         'model': file.model_name,
                         'prompt': prompt,
                         'stream': False,
-                        'options': {'temperature': 0.5},
-                        'format': 'json'  # Ollama JSON 모드 활성화
+                        'options': {'temperature': 0.5, 'num_predict': 4096}
+                        # 'format': 'json' 제거 - 모든 모델이 지원하지 않을 수 있음
                     },
-                    timeout=180
+                    timeout=300  # 타임아웃을 5분으로 증가
                 )
                 
+                print(f"[상세 태그 생성] Ollama 응답 상태: {ollama_response.status_code}")
+                
                 if ollama_response.status_code == 200:
                     response_data = ollama_response.json()
                     response_text = response_data.get('response', '').strip()
+                    print(f"[상세 태그 생성] Ollama 응답 수신 완료, 길이: {len(response_text)}")
+                else:
+                    error_text = ollama_response.text[:500] if ollama_response.text else "응답 없음"
+                    print(f"[상세 태그 생성] Ollama API 오류 ({ollama_response.status_code}): {error_text}")
+            except requests.exceptions.Timeout:
+                print(f"[상세 태그 생성] Ollama 요청 타임아웃 (300초 초과)")
+                return jsonify({'error': 'AI 응답 생성 시간이 초과되었습니다. 모델이 너무 느리거나 프롬프트가 너무 큽니다.'}), 500
+            except requests.exceptions.ConnectionError:
+                print(f"[상세 태그 생성] Ollama 서버 연결 실패: {config.OLLAMA_BASE_URL}")
+                return jsonify({'error': f'Ollama 서버에 연결할 수 없습니다. 서버가 실행 중인지 확인하세요. ({config.OLLAMA_BASE_URL})'}), 500
             except Exception as e:
-                print(f"[태그 생성] Ollama 오류: {str(e)}")
+                print(f"[상세 태그 생성] Ollama 오류: {str(e)}")
+                import traceback
+                traceback.print_exc()
 
         if not response_text:
             return jsonify({'error': 'AI 응답을 받지 못했습니다.'}), 500
@@ -5099,32 +5217,365 @@ def generate_tags(file_id):
         
         tags_data = {}
         try:
+            print(f"[상세 태그 생성] AI 응답 길이: {len(response_text)}")
             # JSON 추출 시도
-            json_match = re.search(r'\{.*\}', response_text, re.DOTALL)
+            # Markdown 코드 블록 제거
+            cleaned_text = re.sub(r'```json\s*', '', response_text)
+            cleaned_text = re.sub(r'```\s*', '', cleaned_text)
+            cleaned_text = cleaned_text.strip()
+
+            json_match = re.search(r'\{.*\}', cleaned_text, re.DOTALL)
             if json_match:
                 json_str = json_match.group(0)
-                tags_data = json.loads(json_str)
+                try:
+                    tags_data = json.loads(json_str)
+                except json.JSONDecodeError as je:
+                    print(f"[상세 태그 생성] JSON 파싱 실패: {je}")
+                    print(f"[상세 태그 생성] 파싱 실패한 문자열 일부: {json_str[:200]}...")
+                    # 쉼표 문제 등 간단한 복구 시도
+                    try:
+                        # Trailing comma 제거
+                        json_str_fixed = re.sub(r',\s*([\]}])', r'\1', json_str)
+                        tags_data = json.loads(json_str_fixed)
+                        print("[상세 태그 생성] JSON 복구 성공")
+                    except:
+                        # 복구 실패 시
+                        raise je
+                
+                print(f"[상세 태그 생성] 생성된 태그 구조: {list(tags_data.keys())}")
+                if 'episodes' in tags_data:
+                     print(f"[상세 태그 생성] episodes 태그 샘플: {str(tags_data['episodes'])[:100]}...")
             else:
                 # JSON 파싱 실패 시
-                print(f"[태그 생성] JSON 형식이 아님: {response_text[:100]}...")
-                return jsonify({'error': 'AI 응답이 올바른 JSON 형식이 아닙니다.'}), 500
+                print(f"[상세 태그 생성] JSON 형식이 아님: {response_text[:200]}...")
+                return jsonify({'error': 'AI 응답이 올바른 JSON 형식이 아닙니다. (로그 확인 필요)'}), 500
+        except Exception as e:
+            print(f"[상세 태그 생성] 파싱 오류: {str(e)}")
+            # 최후의 수단: 텍스트 파일로라도 저장할지 고민해봐야 함.
+            return jsonify({'error': f'태그 파싱 중 오류가 발생했습니다: {str(e)}'}), 500
+            
+        # DB 저장 (기존 태그가 있으면 병합, type 필드 추가)
+        import json
+        existing_tags = None
+        if file.tags:
+            try:
+                existing_tags = json.loads(file.tags)
+            except:
+                pass
+        
+        tags_data_with_type = {
+            'type': 'detailed',
+            'tags': tags_data
+        }
+        
+        # 기존 일반 태그가 있으면 병합
+        if existing_tags and existing_tags.get('type') == 'simple':
+            tags_data_with_type['simple_tags'] = existing_tags.get('tags', {})
+        
+        tags_json_str = json.dumps(tags_data_with_type, ensure_ascii=False)
+        file.tags = tags_json_str
+        db.session.commit()
+        
+        # 저장 확인
+        db.session.refresh(file)
+        if file.tags:
+            print(f"[상세 태그 생성] DB 저장 성공 - 파일 ID: {file.id}, 태그 길이: {len(file.tags)}")
+        else:
+            print(f"[상세 태그 생성] 경고: DB 저장 후 태그가 None입니다!")
+        
+        return jsonify({
+            'message': '상세 태그가 생성되었습니다.',
+            'tags': tags_data,
+            'file_id': file.id,
+            'type': 'detailed'
+        }), 200
+        
+    except Exception as e:
+        db.session.rollback()
+        error_msg = str(e)
+        print(f"[상세 태그 생성] 예외 발생: {error_msg}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': f'상세 태그 생성 중 오류가 발생했습니다: {error_msg}'}), 500
+
+@main_bp.route('/api/files/<int:file_id>/process/tags/simple', methods=['POST'])
+@login_required
+def generate_simple_tags(file_id):
+    """일반 태그 생성 (간단한 키워드 형태)"""
+    try:
+        file = UploadedFile.query.get_or_404(file_id)
+        
+        # 권한 확인
+        if not current_user.is_admin and file.uploaded_by != current_user.id:
+            return jsonify({'error': '권한이 없습니다.'}), 403
+            
+        # 모델 확인
+        if not file.model_name:
+            return jsonify({'error': '파일에 연결된 AI 모델이 없습니다.'}), 400
+            
+        # 데이터 수집 (상세 태그와 동일)
+        parent_chunk = ParentChunk.query.filter_by(file_id=file_id).first()
+        analyses = EpisodeAnalysis.query.filter_by(file_id=file_id).order_by(EpisodeAnalysis.id).limit(50).all()
+        all_entities = GraphEntity.query.filter_by(file_id=file_id).all()
+        all_relationships = GraphRelationship.query.filter_by(file_id=file_id).all()
+        all_events = GraphEvent.query.filter_by(file_id=file_id).all()
+        
+        # 데이터가 너무 없으면 태그 생성 불가
+        if not parent_chunk and not analyses and not all_entities:
+            return jsonify({'error': '태그를 생성할 충분한 데이터(Parent Chunk, 회차 분석 등)가 없습니다.'}), 400
+        
+        # 프롬프트 구성 (간단한 키워드 형태)
+        prompt_parts = []
+        
+        if parent_chunk:
+            prompt_parts.append(f"[Parent Chunk]\n세계관: {parent_chunk.world_view or '없음'}\n주요 캐릭터: {parent_chunk.characters or '없음'}\n이야기: {parent_chunk.story or '없음'}\n기타: {parent_chunk.others or '없음'}")
+        
+        if analyses:
+            prompt_parts.append("[회차별 분석]\n" + "\n".join([f"- {a.episode_title}: {a.analysis_content[:200]}..." for a in analyses[:10]]))
+        
+        if all_entities or all_relationships or all_events:
+            graph_parts = []
+            if all_entities:
+                entities_list = sorted(list(set([e.entity_name for e in all_entities])))
+                graph_parts.append(f"인물/장소: {', '.join(entities_list[:30])}")
+            if all_relationships:
+                rels_list = [f"{r.source}-{r.target}({r.relationship_type})" for r in all_relationships[:20]]
+                graph_parts.append(f"관계: {', '.join(rels_list)}")
+            if all_events:
+                events_list = [e.event_name for e in all_events[:20]]
+                graph_parts.append(f"사건: {', '.join(events_list)}")
+            if graph_parts:
+                prompt_parts.append("[GraphRAG]\n" + "\n".join(graph_parts))
+        
+        # GraphRAG 상세 데이터 추가 (일반 태그에도 포함)
+        detail_graph_summary = ""
+        if all_relationships:
+            sorted_relationships = sorted(all_relationships, key=lambda r: r.id)
+            detail_graph_summary += "[GraphRAG (인물-인물 관계 시간순)]\n"
+            for rel in sorted_relationships:
+                detail_graph_summary += f"- {rel.source} -> {rel.target}: {rel.relationship_type}\n"
+        
+        if all_events:
+            detail_graph_summary += "\n[GraphRAG (사건-인물들 관계)]\n"
+            for evt in all_events:
+                participants_str = evt.participants if evt.participants else "정보 없음"
+                if participants_str.startswith('['):
+                    try:
+                        import json
+                        p_list = json.loads(participants_str)
+                        if isinstance(p_list, list):
+                            participants_str = ", ".join(p_list)
+                    except:
+                        pass
+                detail_graph_summary += f"- 사건 '{evt.event_name}': 참여자 [{participants_str}]\n"
+        
+        if detail_graph_summary:
+            prompt_parts.append(detail_graph_summary)
+        
+        prompt = "\n\n".join(prompt_parts) + """
+
+[요구사항]
+위 데이터를 바탕으로 각 섹션별로 간단한 키워드 태그를 생성하세요. 각 항목당 5~10개의 간단한 태그를 생성하며, 단어나 짧은 구 형태로 작성하세요.
+
+특히 'graph_rag_detail' 항목의 관계 태그는 "인물A → 인물B: 관계유형" 형식으로 작성하거나, "인물A와 인물B의 관계유형" 같은 이해하기 쉬운 형식으로 작성하세요.
+
+다음 JSON 구조에 맞춰 태그를 생성하세요:
+
+{
+  "parent_chunk": {
+    "world_view": ["태그1", "태그2"],
+    "characters": ["태그1", "태그2"],
+    "story": ["태그1", "태그2"],
+    "others": ["태그1", "태그2"]
+  },
+  "episodes": {
+    "story": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"],
+    "characters": ["태그1", "태그2"],
+    "relationships_change": ["태그1", "태그2"],
+    "appearance": ["태그1", "태그2"],
+    "clothing": ["태그1", "태그2"],
+    "items": ["태그1", "태그2"],
+    "others": ["태그1", "태그2"]
+  },
+  "graph_rag_total": {
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
+  },
+  "graph_rag_by_episode": {
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
+  },
+  "graph_rag_by_character": {
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
+  },
+  "graph_rag_by_event": {
+    "characters": ["태그1", "태그2"],
+    "locations": ["태그1", "태그2"],
+    "relationships": ["태그1", "태그2"],
+    "events": ["태그1", "태그2"]
+  },
+  "graph_rag_detail": {
+    "person_person_relationships_chronological": ["태그1", "태그2"],
+    "event_person_relationships": ["태그1", "태그2"]
+  }
+}
+
+반드시 JSON 형식으로만 응답하세요. 다른 설명은 포함하지 마세요.
+"""
+        
+        # AI 호출
+        print(f"[일반 태그 생성] '{file.original_filename}' 일반 태그 생성 요청 (모델: {file.model_name})")
+        
+        response_text = None
+        
+        # Gemini 모델인 경우
+        if 'gemini' in file.model_name.lower():
+            try:
+                gemini_model_name = file.model_name
+                if gemini_model_name.lower().startswith('gemini:'):
+                    gemini_model_name = gemini_model_name.split(':', 1)[1].strip()
+                
+                gemini_client = get_gemini_client()
+                if gemini_client.is_configured():
+                    result = gemini_client.generate_response(
+                        prompt=prompt,
+                        model_name=gemini_model_name,
+                        temperature=0.4,
+                        max_output_tokens=2048
+                    )
+                    if not result['error'] and result.get('response'):
+                        response_text = result['response'].strip()
+            except Exception as e:
+                print(f"[일반 태그 생성] Gemini 오류: {str(e)}")
+        
+        # Ollama 모델인 경우 (또는 Gemini 실패 시)
+        if not response_text:
+            try:
+                import requests
+                from app.core.config import get_config
+                config = get_config()
+                
+                print(f"[일반 태그 생성] Ollama API 호출 시작: {config.OLLAMA_BASE_URL}, 모델: {file.model_name}")
+                
+                ollama_response = requests.post(
+                    f"{config.OLLAMA_BASE_URL}/api/generate",
+                    json={
+                        'model': file.model_name,
+                        'prompt': prompt,
+                        'stream': False,
+                        'options': {'temperature': 0.4, 'num_predict': 2048}
+                    },
+                    timeout=180
+                )
+                
+                print(f"[일반 태그 생성] Ollama 응답 상태: {ollama_response.status_code}")
+                
+                if ollama_response.status_code == 200:
+                    response_data = ollama_response.json()
+                    response_text = response_data.get('response', '').strip()
+                    print(f"[일반 태그 생성] Ollama 응답 수신 완료, 길이: {len(response_text)}")
+                else:
+                    error_text = ollama_response.text[:500] if ollama_response.text else "응답 없음"
+                    print(f"[일반 태그 생성] Ollama API 오류 ({ollama_response.status_code}): {error_text}")
+            except requests.exceptions.Timeout:
+                print(f"[일반 태그 생성] Ollama 요청 타임아웃 (180초 초과)")
+                return jsonify({'error': 'AI 응답 생성 시간이 초과되었습니다.'}), 500
+            except requests.exceptions.ConnectionError:
+                print(f"[일반 태그 생성] Ollama 서버 연결 실패: {config.OLLAMA_BASE_URL}")
+                return jsonify({'error': f'Ollama 서버에 연결할 수 없습니다. 서버가 실행 중인지 확인하세요. ({config.OLLAMA_BASE_URL})'}), 500
+            except Exception as e:
+                print(f"[일반 태그 생성] Ollama 오류: {str(e)}")
+                import traceback
+                traceback.print_exc()
+        
+        if not response_text:
+            return jsonify({'error': 'AI 응답을 받지 못했습니다.'}), 500
+            
+        # JSON 파싱
+        import json
+        import re
+        
+        tags_data = {}
+        try:
+            print(f"[일반 태그 생성] AI 응답 길이: {len(response_text)}")
+            cleaned_text = re.sub(r'```json\s*', '', response_text)
+            cleaned_text = re.sub(r'```\s*', '', cleaned_text)
+            cleaned_text = cleaned_text.strip()
+
+            json_match = re.search(r'\{.*\}', cleaned_text, re.DOTALL)
+            if json_match:
+                json_str = json_match.group(0)
+                try:
+                    tags_data = json.loads(json_str)
+                except json.JSONDecodeError as je:
+                    print(f"[일반 태그 생성] JSON 파싱 실패: {je}")
+                    print(f"[일반 태그 생성] 파싱 실패한 문자열 일부: {json_str[:200]}...")
+                    try:
+                        json_str_fixed = re.sub(r',\s*([\]}])', r'\1', json_str)
+                        tags_data = json.loads(json_str_fixed)
+                        print("[일반 태그 생성] JSON 복구 성공")
+                    except:
+                        raise je
+                
+                print(f"[일반 태그 생성] 생성된 태그 구조: {list(tags_data.keys())}")
+            else:
+                print(f"[일반 태그 생성] JSON 형식이 아님: {response_text[:200]}...")
+                return jsonify({'error': 'AI 응답이 올바른 JSON 형식이 아닙니다. (로그 확인 필요)'}), 500
         except Exception as e:
-            print(f"[태그 생성] 파싱 오류: {str(e)}")
+            print(f"[일반 태그 생성] 파싱 오류: {str(e)}")
             return jsonify({'error': f'태그 파싱 중 오류가 발생했습니다: {str(e)}'}), 500
             
-        # DB 저장 (JSON 문자열로 저장)
-        file.tags = json.dumps(tags_data, ensure_ascii=False)
+        # DB 저장 (기존 태그가 있으면 병합, type 필드 추가)
+        import json
+        existing_tags = None
+        if file.tags:
+            try:
+                existing_tags = json.loads(file.tags)
+            except:
+                pass
+        
+        tags_data_with_type = {
+            'type': 'simple',
+            'tags': tags_data
+        }
+        
+        # 기존 상세 태그가 있으면 병합
+        if existing_tags and existing_tags.get('type') == 'detailed':
+            tags_data_with_type['detailed_tags'] = existing_tags.get('tags', {})
+        
+        tags_json_str = json.dumps(tags_data_with_type, ensure_ascii=False)
+        file.tags = tags_json_str
         db.session.commit()
         
+        # 저장 확인
+        db.session.refresh(file)
+        if file.tags:
+            print(f"[일반 태그 생성] DB 저장 성공 - 파일 ID: {file.id}, 태그 길이: {len(file.tags)}")
+        else:
+            print(f"[일반 태그 생성] 경고: DB 저장 후 태그가 None입니다!")
+        
         return jsonify({
-            'message': '태그가 생성되었습니다.',
+            'message': '일반 태그가 생성되었습니다.',
             'tags': tags_data,
-            'file_id': file.id
+            'file_id': file.id,
+            'type': 'simple'
         }), 200
         
     except Exception as e:
         db.session.rollback()
-        return jsonify({'error': f'태그 생성 중 오류가 발생했습니다: {str(e)}'}), 500
+        error_msg = str(e)
+        print(f"[일반 태그 생성] 예외 발생: {error_msg}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': f'일반 태그 생성 중 오류가 발생했습니다: {error_msg}'}), 500
 
 @main_bp.route('/api/files/<int:file_id>/metadata', methods=['POST'])
 @login_required

templates/admin.html

@@ -46,8 +46,103 @@
 
         .header-actions {
             display: flex;
-            gap: 12px;
+            gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
             align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -573,15 +668,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -594,13 +727,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
+                <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>

templates/admin_files.html

@@ -44,10 +44,107 @@
             gap: 12px;
         }
 
-        .header-actions {
+                .header-actions {
             display: flex;
-            gap: 12px;
+            gap: 8px;
             align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -323,6 +420,21 @@
             max-height: 90vh;
             overflow-y: auto;
         }
+        
+        .modal-body {
+            max-height: calc(90vh - 100px);
+            overflow-y: auto;
+        }
+        
+        #tagsContent {
+            max-height: calc(90vh - 120px);
+            overflow-y: auto;
+        }
+        
+        #simpleTagsContent, #detailedTagsContent {
+            max-height: calc(90vh - 180px);
+            overflow-y: auto;
+        }
 
         .modal-header {
             display: flex;
@@ -475,16 +587,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -497,14 +646,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
-                <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>
@@ -674,18 +834,6 @@
         </div>
     </div>
 
-    <!-- 태그 보기 모달 -->
-    <div id="tagsModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <div class="modal-title" id="tagsModalTitle">태그 목록</div>
-                <button class="modal-close" onclick="closeTagsModal()">&times;</button>
-            </div>
-            <div id="tagsContent" class="modal-body">
-                태그를 불러오는 중...
-            </div>
-        </div>
-    </div>
 
     <!-- vis-network 라이브러리 -->
     <script type="text/javascript" src="https://unpkg.com/vis-network@latest/standalone/umd/vis-network.min.js"></script>
@@ -811,7 +959,6 @@
                             <div class="file-actions">
                                 <button class="btn btn-secondary" onclick="viewSummary(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">요약 내용 보기</button>
                                 <button class="btn btn-info" onclick="viewChunks(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">청크 보기</button>
-                                <button class="btn" onclick="viewTags(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px; background: #673ab7; color: white;">태그 보기</button>
                                 <button class="btn btn-primary" onclick="viewGraphRAG(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">GraphRAG 보기</button>
                                 <button class="btn btn-success" onclick="viewGraphRAGVisualization(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px;">그래프 시각화</button>
                             </div>
@@ -1849,112 +1996,6 @@
             }
         });
 
-        async function viewTags(fileId, fileName) {
-            const modal = document.getElementById('tagsModal');
-            const title = document.getElementById('tagsModalTitle');
-            const content = document.getElementById('tagsContent');
-            
-            title.textContent = `태그 목록 - ${fileName}`;
-            content.innerHTML = '<div style="text-align: center; padding: 24px; color: #5f6368;">태그를 불러오는 중...</div>';
-            modal.classList.add('active');
-            
-            try {
-                // 파일 정보 다시 조회 (태그 정보 포함)
-                const response = await fetch('/api/files', { credentials: 'include' });
-                const data = await response.json();
-                const file = data.files.find(f => f.id === fileId);
-                
-                if (file && file.tags) {
-                    try {
-                        const tags = JSON.parse(file.tags);
-                        let html = '';
-                        
-                        // 계층적 구조 렌더링
-                        
-                        // Parent Chunk
-                        if (tags.parent_chunk) {
-                            html += '<div style="margin-bottom: 24px;">';
-                            html += '<h3 style="font-size: 15px; font-weight: 700; color: #1a73e8; margin-bottom: 12px; border-bottom: 2px solid #e8f0fe; padding-bottom: 8px;">Parent Chunk (전체 요약)</h3>';
-                            html += renderTagsGroup(tags.parent_chunk);
-                            html += '</div>';
-                        }
-                        
-                        // Episodes
-                        if (tags.episodes) {
-                            html += '<div style="margin-bottom: 24px;">';
-                            html += '<h3 style="font-size: 15px; font-weight: 700; color: #1a73e8; margin-bottom: 12px; border-bottom: 2px solid #e8f0fe; padding-bottom: 8px;">회차별 분석</h3>';
-                            html += renderTagsGroup(tags.episodes);
-                            html += '</div>';
-                        }
-                        
-                        // GraphRAG
-                        if (tags.graph_rag) {
-                            html += '<div style="margin-bottom: 24px;">';
-                            html += '<h3 style="font-size: 15px; font-weight: 700; color: #1a73e8; margin-bottom: 12px; border-bottom: 2px solid #e8f0fe; padding-bottom: 8px;">GraphRAG (지식 그래프)</h3>';
-                            html += renderTagsGroup(tags.graph_rag);
-                            html += '</div>';
-                        }
-                        
-                        // 구버전 태그 (배열) 호환성 - 계층적 구조가 아닐 경우
-                        if (!tags.parent_chunk && !tags.episodes && !tags.graph_rag && Array.isArray(tags)) {
-                            html += '<div style="display: flex; flex-wrap: wrap; gap: 8px;">';
-                            tags.forEach(tag => {
-                                html += `<span style="background: #e8f0fe; color: #1a73e8; padding: 6px 12px; border-radius: 16px; font-size: 13px; border: 1px solid #d2e3fc;">#${escapeHtml(tag)}</span>`;
-                            });
-                            html += '</div>';
-                        }
-                        
-                        if (!html) {
-                            html = '<div style="text-align: center; padding: 20px; color: #5f6368;">태그 형식이 올바르지 않거나 비어있습니다.</div>';
-                        }
-                        
-                        content.innerHTML = html;
-                    } catch (e) {
-                        console.error('태그 파싱 오류:', e);
-                        content.innerHTML = '<div style="text-align: center; padding: 20px; color: #c5221f;">태그 데이터를 파싱할 수 없습니다.</div>';
-                    }
-                } else {
-                    content.innerHTML = '<div style="text-align: center; padding: 20px; color: #5f6368;">생성된 태그가 없습니다.</div>';
-                }
-            } catch (error) {
-                console.error('태그 로드 오류:', error);
-                content.innerHTML = '<div style="text-align: center; padding: 20px; color: #c5221f;">태그 정보를 불러오는 중 오류가 발생했습니다.</div>';
-            }
-        }
-        
-        function renderTagsGroup(group) {
-            let html = '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">';
-            
-            // 키 이름을 한글로 매핑
-            const keyMap = {
-                'world_view': '세계관',
-                'characters': '인물',
-                'story': '스토리',
-                'others': '기타',
-                'items': '아이템/소재',
-                'relationships': '관계',
-                'events': '사건'
-            };
-
-            for (const [key, values] of Object.entries(group)) {
-                if (values && values.length > 0) {
-                    const label = keyMap[key] || key;
-                    html += `<div style="background: #f8f9fa; padding: 12px; border-radius: 8px; border: 1px solid #e8eaed;">`;
-                    html += `<div style="font-size: 13px; font-weight: 700; color: #5f6368; margin-bottom: 8px;">${escapeHtml(label)}</div>`;
-                    html += `<div style="display: flex; flex-wrap: wrap; gap: 6px;">`;
-                    values.forEach(tag => {
-                        html += `<span style="background: white; border: 1px solid #dadce0; padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #3c4043;">${escapeHtml(tag)}</span>`;
-                    });
-                    html += `</div></div>`;
-                }
-            }
-            html += '</div>';
-            return html;
-        }
-
-        function closeTagsModal() {
-            document.getElementById('tagsModal').classList.remove('active');
-        }
 
         // 페이지 로드 시 초기화
         window.addEventListener('load', () => {

templates/admin_messages.html

@@ -44,10 +44,107 @@
             gap: 12px;
         }
 
-        .header-actions {
+                .header-actions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
             display: flex;
-            gap: 12px;
             align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -476,16 +573,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -498,14 +632,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
-                <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
-                <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
                 <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
+                <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
+                <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>

templates/admin_prompts.html

@@ -46,10 +46,107 @@
             font-weight: 500;
         }
 
-        .header-actions {
+                .header-actions {
             display: flex;
-            align-items: center;
             gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -330,16 +427,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -352,14 +486,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
-                <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>

templates/admin_settings.html

@@ -44,10 +44,107 @@
             gap: 12px;
         }
 
-        .header-actions {
+                .header-actions {
             display: flex;
-            gap: 12px;
+            gap: 8px;
             align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -293,17 +390,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -316,15 +449,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
-                <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>

templates/admin_tags.html

@@ -0,0 +1,820 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <script type="text/javascript">
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "ujskfvh0bu");
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>태그 보기 - SOY NV AI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f8f9fa;
+            color: #202124;
+        }
+
+        .header {
+            background: white;
+            border-bottom: 1px solid #dadce0;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        .header-title {
+            font-size: 20px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+                .header-actions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
+        }
+
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            padding: 8px;
+            color: #202124;
+        }
+
+        .mobile-menu {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+        }
+
+        .mobile-menu.active {
+            display: block;
+        }
+
+        .mobile-menu-content {
+            position: fixed;
+            top: 0;
+            right: -100%;
+            width: 280px;
+            max-width: 80%;
+            height: 100%;
+            background: white;
+            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+            transition: right 0.3s ease;
+            overflow-y: auto;
+            z-index: 1001;
+        }
+
+        .mobile-menu.active .mobile-menu-content {
+            right: 0;
+        }
+
+        .mobile-menu-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid #dadce0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: white;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .mobile-menu-title {
+            font-size: 18px;
+            font-weight: 500;
+        }
+
+        .mobile-menu-close {
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            color: #202124;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .mobile-menu-items {
+            padding: 8px 0;
+        }
+
+        .mobile-menu-item {
+            display: block;
+            padding: 12px 20px;
+            color: #202124;
+            text-decoration: none;
+            border-bottom: 1px solid #f1f3f4;
+            transition: background 0.2s;
+        }
+
+        .mobile-menu-item:hover {
+            background: #f8f9fa;
+        }
+
+        .mobile-menu-user {
+            padding: 16px 20px;
+            border-bottom: 1px solid #dadce0;
+            color: #5f6368;
+            font-size: 14px;
+        }
+
+        .btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.2s;
+        }
+
+        .btn-secondary {
+            background: #f1f3f4;
+            color: #202124;
+        }
+
+        .btn-secondary:hover {
+            background: #e8eaed;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 24px;
+        }
+
+        .file-selector {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 24px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .file-selector label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 12px;
+            color: #202124;
+        }
+
+        .file-selector select {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            font-size: 14px;
+            font-family: inherit;
+        }
+
+        .file-selector select:focus {
+            outline: none;
+            border-color: #1a73e8;
+            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
+        }
+
+        .tags-container {
+            background: white;
+            border-radius: 8px;
+            padding: 24px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            display: flex;
+            gap: 24px;
+            min-height: 400px;
+        }
+
+        .tags-column {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .tags-column-title {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 16px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid;
+        }
+
+        .tags-column-title.simple {
+            color: #4caf50;
+            border-bottom-color: #c8e6c9;
+        }
+
+        .tags-column-title.detailed {
+            color: #673ab7;
+            border-bottom-color: #d1c4e9;
+        }
+
+        .divider {
+            width: 1px;
+            background: #e8eaed;
+            flex-shrink: 0;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 24px;
+            color: #5f6368;
+        }
+
+        .empty {
+            text-align: center;
+            padding: 20px;
+            color: #5f6368;
+        }
+
+        .error {
+            text-align: center;
+            padding: 20px;
+            color: #c5221f;
+        }
+
+        @media (max-width: 768px) {
+            .header-actions {
+                display: none;
+            }
+
+            .menu-toggle {
+                display: block;
+            }
+
+            .tags-container {
+                flex-direction: column;
+            }
+
+            .divider {
+                width: 100%;
+                height: 1px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="header-title">
+            <span>🏷️</span>
+            <span>태그 보기</span>
+        </div>
+        <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
+        <div class="header-actions">
+            <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
+        </div>
+    </div>
+
+    <!-- 모바일 메뉴 -->
+    <div class="mobile-menu" id="mobileMenu" onclick="closeMobileMenuOnBackdrop(event)">
+        <div class="mobile-menu-content" onclick="event.stopPropagation()">
+            <div class="mobile-menu-header">
+                <div class="mobile-menu-title">메뉴</div>
+                <button class="mobile-menu-close" onclick="toggleMobileMenu()" aria-label="메뉴 닫기">&times;</button>
+            </div>
+            <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
+            <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
+                <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
+                <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
+                <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
+                <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
+                <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
+                <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="file-selector">
+            <label for="fileSelect">파일 선택:</label>
+            <select id="fileSelect" onchange="loadTags()">
+                <option value="">파일을 선택하세요...</option>
+            </select>
+        </div>
+
+        <div class="tags-container">
+            <!-- 좌측: 일반 태그 -->
+            <div class="tags-column" id="simpleTagsColumn">
+                <div class="tags-column-title simple">일반 태그</div>
+                <div id="simpleTagsContent" class="loading">파일을 선택하면 태그가 표시됩니다.</div>
+            </div>
+            <!-- 구분선 -->
+            <div class="divider"></div>
+            <!-- 우측: 상세 태그 -->
+            <div class="tags-column" id="detailedTagsColumn">
+                <div class="tags-column-title detailed">상세 태그</div>
+                <div id="detailedTagsContent" class="loading">파일을 선택하면 태그가 표시됩니다.</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function toggleMobileMenu() {
+            const menu = document.getElementById('mobileMenu');
+            menu.classList.toggle('active');
+            document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
+        }
+
+        function closeMobileMenu() {
+            const menu = document.getElementById('mobileMenu');
+            menu.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+
+        function closeMobileMenuOnBackdrop(event) {
+            if (event.target.id === 'mobileMenu') {
+                closeMobileMenu();
+            }
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        async function loadFiles() {
+            const select = document.getElementById('fileSelect');
+            try {
+                const response = await fetch('/api/files', { credentials: 'include' });
+                if (!response.ok) throw new Error('파일 목록을 불러올 수 없습니다.');
+                
+                const data = await response.json();
+                const files = data.files || [];
+                
+                // 기존 옵션 제거 (첫 번째 "파일을 선택하세요..." 제외)
+                while (select.options.length > 1) {
+                    select.remove(1);
+                }
+                
+                files.forEach(file => {
+                    const option = document.createElement('option');
+                    option.value = file.id;
+                    option.textContent = file.original_filename;
+                    select.appendChild(option);
+                });
+            } catch (error) {
+                console.error('파일 목록 로드 오류:', error);
+            }
+        }
+
+        async function loadTags() {
+            const select = document.getElementById('fileSelect');
+            const fileId = select.value;
+            const simpleContent = document.getElementById('simpleTagsContent');
+            const detailedContent = document.getElementById('detailedTagsContent');
+            
+            if (!fileId) {
+                simpleContent.className = 'loading';
+                simpleContent.textContent = '파일을 선택하면 태그가 표시됩니다.';
+                detailedContent.className = 'loading';
+                detailedContent.textContent = '파일을 선택하면 태그가 표시됩니다.';
+                return;
+            }
+            
+            simpleContent.className = 'loading';
+            simpleContent.textContent = '태그를 불러오는 중...';
+            detailedContent.className = 'loading';
+            detailedContent.textContent = '태그를 불러오는 중...';
+            
+            try {
+                const response = await fetch('/api/files', { credentials: 'include' });
+                if (!response.ok) throw new Error('파일 정보를 불러올 수 없습니다.');
+                
+                const data = await response.json();
+                const file = data.files.find(f => f.id == fileId);
+                
+                if (file && file.tags) {
+                    try {
+                        const tagsData = JSON.parse(file.tags);
+                        const tagType = tagsData.type || 'legacy';
+                        
+                        // 일반 태그와 상세 태그 분리
+                        let simpleTags = null;
+                        let detailedTags = null;
+                        
+                        if (tagType === 'simple') {
+                            simpleTags = tagsData.tags || tagsData;
+                            detailedTags = tagsData.detailed_tags || null;
+                        } else if (tagType === 'detailed') {
+                            detailedTags = tagsData.tags || tagsData;
+                            simpleTags = tagsData.simple_tags || null;
+                        } else {
+                            detailedTags = tagsData;
+                            simpleTags = null;
+                        }
+                        
+                        // 일반 태그 렌더링
+                        let simpleHtml = '';
+                        if (simpleTags) {
+                            simpleHtml = renderAllTagSections(simpleTags, 'simple');
+                        } else {
+                            simpleHtml = '<div class="empty">일반 태그가 생성되지 않았습니다.</div>';
+                        }
+                        simpleContent.className = '';
+                        simpleContent.innerHTML = simpleHtml;
+                        
+                        // 상세 태그 렌더링
+                        let detailedHtml = '';
+                        if (detailedTags) {
+                            detailedHtml = renderAllTagSections(detailedTags, 'detailed');
+                        } else {
+                            detailedHtml = '<div class="empty">상세 태그가 생성되지 않았습니다.</div>';
+                        }
+                        detailedContent.className = '';
+                        detailedContent.innerHTML = detailedHtml;
+                        
+                    } catch (e) {
+                        console.error('태그 파싱 오류:', e);
+                        simpleContent.className = 'error';
+                        simpleContent.textContent = '태그 데이터를 파싱할 수 없습니다.';
+                        detailedContent.className = 'error';
+                        detailedContent.textContent = '태그 데이터를 파싱할 수 없습니다.';
+                    }
+                } else {
+                    simpleContent.className = 'empty';
+                    simpleContent.textContent = '생성된 태그가 없습니다.';
+                    detailedContent.className = 'empty';
+                    detailedContent.textContent = '생성된 태그가 없습니다.';
+                }
+            } catch (error) {
+                console.error('태그 로드 오류:', error);
+                simpleContent.className = 'error';
+                simpleContent.textContent = '태그 정보를 불러오는 중 오류가 발생했습니다.';
+                detailedContent.className = 'error';
+                detailedContent.textContent = '태그 정보를 불러오는 중 오류가 발생했습니다.';
+            }
+        }
+
+        // 모든 태그 섹션 렌더링 함수
+        function renderAllTagSections(tags, tagType) {
+            let html = '';
+            const tagColor = tagType === 'simple' ? '#4caf50' : '#673ab7';
+            const tagBgColor = tagType === 'simple' ? '#e8f5e9' : '#ede7f6';
+            const tagBorderColor = tagType === 'simple' ? '#c8e6c9' : '#d1c4e9';
+            
+            // 1. Parent Chunk
+            if (tags.parent_chunk) {
+                html += createTagSection('Parent Chunk', tags.parent_chunk, {
+                    'world_view': '세계관',
+                    'characters': '인물',
+                    'story': '이야기',
+                    'others': '기타'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+            
+            // 2. Episodes (회차별)
+            if (tags.episodes) {
+                html += createTagSection('회차별', tags.episodes, {
+                    'story': '이야기',
+                    'events': '사건',
+                    'characters': '인물',
+                    'relationships_change': '인물간 변화',
+                    'appearance': '외모',
+                    'clothing': '의복',
+                    'items': '아이템/소재',
+                    'others': '기타'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+            
+            // 3. GraphRAG Total
+            if (tags.graph_rag_total) {
+                html += createTagSection('GraphRAG (전체)', tags.graph_rag_total, {
+                    'characters': '인물',
+                    'locations': '장소',
+                    'relationships': '관계',
+                    'events': '사��'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+            
+            // 4. GraphRAG by Episode
+            if (tags.graph_rag_by_episode) {
+                html += createTagSection('GraphRAG (회차별)', tags.graph_rag_by_episode, {
+                    'characters': '인물',
+                    'locations': '장소',
+                    'relationships': '관계',
+                    'events': '사건'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+
+            // 5. GraphRAG by Character
+            if (tags.graph_rag_by_character) {
+                html += createTagSection('GraphRAG (인물별)', tags.graph_rag_by_character, {
+                    'characters': '인물',
+                    'locations': '장소',
+                    'relationships': '관계',
+                    'events': '사건'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+
+            // 6. GraphRAG by Event
+            if (tags.graph_rag_by_event) {
+                html += createTagSection('GraphRAG (사건별)', tags.graph_rag_by_event, {
+                    'characters': '인물',
+                    'locations': '장소',
+                    'relationships': '관계',
+                    'events': '사건'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+
+            // 7. GraphRAG (상세)
+            if (tags.graph_rag_detail) {
+                html += createTagSection('GraphRAG (상세)', tags.graph_rag_detail, {
+                    'person_person_relationships_chronological': '인물-인물 관계 (시간 순으로 나열)',
+                    'event_person_relationships': '사건-인물들 관계'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+
+            // 구버전 태그 호환성
+            if (tags.graph_rag && !tags.graph_rag_total) {
+                html += createTagSection('GraphRAG (구버전)', tags.graph_rag, {
+                    'characters': '인물',
+                    'relationships': '관계',
+                    'events': '사건'
+                }, tagColor, tagBgColor, tagBorderColor);
+            }
+            
+            // 배열 호환성 (완전 구버전)
+            if (Array.isArray(tags)) {
+                html += '<div style="display: flex; flex-wrap: wrap; gap: 8px;">';
+                tags.forEach(tag => {
+                    html += `<span style="background: ${tagBgColor}; color: ${tagColor}; padding: 6px 12px; border-radius: 16px; font-size: 13px; border: 1px solid ${tagBorderColor};">#${escapeHtml(tag)}</span>`;
+                });
+                html += '</div>';
+            }
+            
+            if (!html) {
+                html = '<div class="empty">태그 형식이 올바르지 않거나 비어있습니다.</div>';
+            }
+            
+            return html;
+        }
+        
+        // 태그 섹션 생성 헬퍼 함수
+        function createTagSection(title, groupData, keyMap, titleColor = '#1a73e8', bgColor = '#e8f0fe', borderColor = '#d2e3fc') {
+            // 빈 섹션 체크
+            let hasContent = false;
+            for (const key of Object.keys(groupData)) {
+                if (groupData[key] && groupData[key].length > 0) {
+                    hasContent = true;
+                    break;
+                }
+            }
+            if (!hasContent) return '';
+
+            let html = `<div style="margin-bottom: 32px;">`;
+            html += `<h3 style="font-size: 16px; font-weight: 700; color: ${titleColor}; margin-bottom: 16px; border-bottom: 2px solid ${borderColor}; padding-bottom: 8px; display: flex; align-items: center;">`;
+            html += `<span style="margin-right: 8px;">📌</span> ${escapeHtml(title)}`;
+            html += `</h3>`;
+            
+            html += `<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">`;
+            
+            // 정의된 순서대로 표시하기 위해 keyMap의 키 순서를 따름 (존재하는 경우)
+            // keyMap에 없는 키는 마지막에 추가
+            const orderedKeys = Object.keys(keyMap);
+            const extraKeys = Object.keys(groupData).filter(k => !orderedKeys.includes(k));
+            const allKeys = [...orderedKeys, ...extraKeys];
+
+            for (const key of allKeys) {
+                const values = groupData[key];
+                if (values && values.length > 0) {
+                    const label = keyMap[key] || key;
+                    html += `<div style="background: #f8f9fa; padding: 12px; border-radius: 8px; border: 1px solid #e8eaed;">`;
+                    html += `<div style="font-size: 13px; font-weight: 700; color: #5f6368; margin-bottom: 8px;">${escapeHtml(label)}</div>`;
+                    html += `<div style="display: flex; flex-wrap: wrap; gap: 6px;">`;
+                    values.forEach(tag => {
+                        // 관계 태그인 경우 화살표 형식으로 표시
+                        let displayTag = tag;
+                        const isRelationshipKey = key === 'relationships' || 
+                                                 key === 'person_person_relationships_chronological' || 
+                                                 key === 'event_person_relationships' || 
+                                                 key === 'relationships_change';
+                        
+                        if (isRelationshipKey) {
+                            // "인물A → 인물B: 관계유형" 형식이 이미 포함되어 있으면 그대로 사용
+                            // "인물A-인물B(관계유형)" 형식을 "인물A → 인물B: 관계유형"으로 변환
+                            if (tag.includes('-') && tag.includes('(') && tag.includes(')')) {
+                                const match = tag.match(/^(.+?)-(.+?)\((.+?)\)/);
+                                if (match) {
+                                    displayTag = `${match[1]} → ${match[2]}: ${match[3]}`;
+                                }
+                            }
+                            // 관계 태그는 특별한 스타일 적용
+                            html += `<span style="background: #fff3cd; border: 1px solid #ffc107; padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #856404; font-weight: 500;">${escapeHtml(displayTag)}</span>`;
+                        } else {
+                            html += `<span style="background: white; border: 1px solid #dadce0; padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #3c4043;">${escapeHtml(displayTag)}</span>`;
+                        }
+                    });
+                    html += `</div></div>`;
+                }
+            }
+            html += '</div></div>';
+            return html;
+        }
+
+        // 페이지 로드 시 초기화
+        window.addEventListener('load', () => {
+            loadFiles().then(() => {
+                // URL 파라미터에서 file_id 가져오기
+                const urlParams = new URLSearchParams(window.location.search);
+                const fileId = urlParams.get('file_id');
+                if (fileId) {
+                    const select = document.getElementById('fileSelect');
+                    select.value = fileId;
+                    loadTags();
+                }
+            });
+        });
+    </script>
+</body>
+</html>
+

templates/admin_tokens.html

@@ -35,6 +35,9 @@
             align-items: center;
             justify-content: space-between;
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+            overflow: visible;
+            position: relative;
+            z-index: 100;
         }
 
         .header-title {
@@ -47,8 +50,109 @@
 
         .header-actions {
             display: flex;
-            gap: 12px;
+            gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 101;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+            z-index: 10001;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
             align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10002;
+            padding: 4px 0;
+            pointer-events: none;
+            white-space: nowrap;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -348,16 +452,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -370,14 +511,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>

templates/admin_utils.html

@@ -44,10 +44,107 @@
             gap: 12px;
         }
 
-        .header-actions {
+                .header-actions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
             display: flex;
-            gap: 12px;
             align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10000;
+            padding: 4px 0;
+            pointer-events: none;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -376,16 +473,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -398,14 +532,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>

templates/admin_webnovels.html

@@ -35,7 +35,9 @@
             align-items: center;
             justify-content: space-between;
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-            overflow-x: hidden;
+            overflow: visible;
+            position: relative;
+            z-index: 100;
         }
 
         .header-title {
@@ -48,9 +50,109 @@
 
         .header-actions {
             display: flex;
-            gap: 12px;
+            gap: 8px;
             align-items: center;
             flex-wrap: wrap;
+            position: relative;
+            z-index: 101;
+        }
+
+        /* 드롭다운 메뉴 스타일 */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+            z-index: 10001;
+        }
+
+        /* 버튼과 메뉴 사이 '틈'에서 hover가 끊겨 메뉴가 닫히는 현상 방지 */
+        .dropdown::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            height: 8px;
+        }
+
+        .dropdown-toggle {
+            padding: 8px 16px;
+            background: #f1f3f4;
+            color: #202124;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .dropdown-toggle:hover {
+            background: #e8eaed;
+        }
+
+        .dropdown-toggle::after {
+            content: '▼';
+            font-size: 10px;
+            transition: transform 0.2s;
+        }
+
+        .dropdown:hover .dropdown-toggle::after {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 0;
+            margin-top: 0;
+            background: white;
+            border: 1px solid #dadce0;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            min-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all 0.2s ease;
+            z-index: 10002;
+            padding: 4px 0;
+            pointer-events: none;
+            white-space: nowrap;
+        }
+
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        
+
+        .dropdown-item {
+            display: block;
+            padding: 10px 16px;
+            color: #202124;
+            text-decoration: none;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+        }
+
+        .dropdown-item:first-child {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
         }
 
         .menu-toggle {
@@ -619,16 +721,53 @@
         <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
         <div class="header-actions">
             <span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
-            <a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
-            <a href="{{ url_for('main.admin_files') }}" class="btn btn-secondary">파일 목록</a>
-            <a href="{{ url_for('main.admin_messages') }}" class="btn btn-secondary">메시지 확인</a>
-            <a href="{{ url_for('main.admin_prompts') }}" class="btn btn-secondary">프롬프트 관리</a>
-            <a href="{{ url_for('main.admin_settings') }}" class="btn btn-secondary">AI 설정</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.admin_tokens') }}" class="btn btn-secondary">토큰 통계</a>
-            <a href="{{ url_for('main.admin_utils') }}" class="btn btn-secondary">유틸</a>
-            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
-            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
+            
+            {# 사이트 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">사이트 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin') }}" class="dropdown-item">사용자 관리</a>
+                    <a href="{{ url_for('main.admin_tokens') }}" class="dropdown-item">토큰 통계</a>
+                </div>
+            </div>
+            
+            {# 웹소설 관리 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">웹소설 관리</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_webnovels') }}" class="dropdown-item">웹소설 업로드 및 관리</a>
+                    <a href="{{ url_for('main.admin_messages') }}" class="dropdown-item">메시지 확인</a>
+                </div>
+            </div>
+            
+            {# AI 설정 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">AI 설정</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_settings') }}" class="dropdown-item">AI 설정</a>
+                    <a href="{{ url_for('main.admin_prompts') }}" class="dropdown-item">프롬프트 관리</a>
+                </div>
+            </div>
+            
+            {# 챗봇 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">챗봇</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_tags') }}" class="dropdown-item">태그/프롬프트</a>
+                </div>
+            </div>
+            
+            {# 편의기능 #}
+            <div class="dropdown">
+                <button type="button" class="dropdown-toggle">편의기능</button>
+                <div class="dropdown-menu">
+                    <a href="{{ url_for('main.admin_utils') }}" class="dropdown-item">유틸</a>
+                </div>
+            </div>
+            
+            {# 메인으로 #}
+            <a href="{{ url_for('main.index') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px; margin-right: 4px;">메인으로</a>
+            <a href="{{ url_for('main.logout') }}" class="btn btn-secondary" style="padding: 8px 16px; font-size: 14px;">로그아웃</a>
         </div>
     </div>
 
@@ -641,14 +780,25 @@
             </div>
             <div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
             <div class="mobile-menu-items">
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4;">사이트 관리</div>
                 <a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">사용자 관리</a>
-                <a href="{{ url_for('main.admin_files') }}" class="mobile-menu-item" onclick="closeMobileMenu()">파일 목록</a>
+                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">웹소설 관리</div>
+                <a href="{{ url_for('main.admin_webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">웹소설 업로드 및 관리</a>
                 <a href="{{ url_for('main.admin_messages') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메시지 확인</a>
-                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">AI 설정</div>
                 <a href="{{ url_for('main.admin_settings') }}" class="mobile-menu-item" onclick="closeMobileMenu()">AI 설정</a>
+                <a href="{{ url_for('main.admin_prompts') }}" class="mobile-menu-item" onclick="closeMobileMenu()">프롬프트 관리</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">챗봇</div>
+                <a href="{{ url_for('main.admin_tags') }}" class="mobile-menu-item" onclick="closeMobileMenu()">태그/프롬프트</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">편의기능</div>
                 <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
-                <a href="{{ url_for('main.admin_tokens') }}" class="mobile-menu-item" onclick="closeMobileMenu()">토큰 통계</a>
-                <a href="{{ url_for('main.admin_utils') }}" class="mobile-menu-item" onclick="closeMobileMenu()">유틸</a>
+                
+                <div style="padding: 8px 20px; font-size: 11px; font-weight: 600; color: #5f6368; text-transform: uppercase; border-bottom: 1px solid #f1f3f4; margin-top: 8px;">기타</div>
                 <a href="{{ url_for('main.index') }}" class="mobile-menu-item" onclick="closeMobileMenu()">메인으로</a>
                 <a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
             </div>
@@ -992,44 +1142,87 @@
                         const toggleButtonText = isPublic ? '비공개로' : '공개로';
                         const toggleButtonClass = isPublic ? 'btn-warning' : 'btn-success';
                         
-                        // 태그 표시
+                        // 태그 표시 (일반 태그와 상세 태그 구분)
                         let tagsHtml = '';
                         if (file.tags) {
                             try {
-                                const tags = JSON.parse(file.tags);
-                                let displayTags = [];
+                                const tagsData = JSON.parse(file.tags);
+                                const tagType = tagsData.type || 'legacy'; // legacy는 기존 형식
+                                const tags = tagsData.tags || tagsData; // tags 필드가 있으면 사용, 없으면 전체
                                 
-                                if (Array.isArray(tags)) {
-                                    displayTags = tags;
-                                } else {
-                                    // 계층적 구조인 경우 평탄화하여 일부만 추출
-                                    if (tags.parent_chunk) {
-                                        Object.values(tags.parent_chunk).forEach(arr => {
-                                            if (Array.isArray(arr)) displayTags.push(...arr);
-                                        });
-                                    }
-                                    if (tags.episodes) {
-                                        Object.values(tags.episodes).forEach(arr => {
-                                            if (Array.isArray(arr)) displayTags.push(...arr);
-                                        });
-                                    }
-                                    if (tags.graph_rag) {
-                                        Object.values(tags.graph_rag).forEach(arr => {
-                                            if (Array.isArray(arr)) displayTags.push(...arr);
+                                let simpleTags = [];
+                                let detailedTags = [];
+                                
+                                // 일반 태그 추출
+                                if (tagType === 'simple' || tagsData.simple_tags) {
+                                    const simpleData = tagsData.simple_tags || tags;
+                                    const topLevelKeys = ['parent_chunk', 'episodes', 'graph_rag_total', 'graph_rag_by_episode', 'graph_rag_by_character', 'graph_rag_by_event', 'graph_rag_detail'];
+                                    topLevelKeys.forEach(key => {
+                                        if (simpleData[key]) {
+                                            Object.values(simpleData[key]).forEach(arr => {
+                                                if (Array.isArray(arr)) simpleTags.push(...arr);
+                                            });
+                                        }
+                                    });
+                                }
+                                
+                                // 상세 태그 추출
+                                if (tagType === 'detailed' || tagsData.detailed_tags) {
+                                    const detailedData = tagsData.detailed_tags || (tagType === 'detailed' ? tags : null);
+                                    if (detailedData) {
+                                        const topLevelKeys = ['parent_chunk', 'episodes', 'graph_rag_total', 'graph_rag_by_episode', 'graph_rag_by_character', 'graph_rag_by_event', 'graph_rag_detail'];
+                                        topLevelKeys.forEach(key => {
+                                            if (detailedData[key]) {
+                                                Object.values(detailedData[key]).forEach(arr => {
+                                                    if (Array.isArray(arr)) detailedTags.push(...arr);
+                                                });
+                                            }
                                         });
                                     }
                                 }
                                 
-                                // 최대 5개만 표시하고 나머지는 생략
-                                const visibleTags = displayTags.slice(0, 5);
-                                if (visibleTags.length > 0) {
-                                    tagsHtml = '<div style="margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px;">';
-                                    visibleTags.forEach(tag => {
-                                        tagsHtml += `<span style="background: #e8f0fe; color: #1a73e8; padding: 2px 6px; border-radius: 4px; font-size: 11px; border: 1px solid #d2e3fc;">#${escapeHtml(tag)}</span>`;
+                                // 기존 형식 (legacy) ���리
+                                if (tagType === 'legacy' && !tagsData.tags) {
+                                    const topLevelKeys = ['parent_chunk', 'episodes', 'graph_rag_total', 'graph_rag_by_episode', 'graph_rag_by_character', 'graph_rag_by_event', 'graph_rag_detail'];
+                                    topLevelKeys.forEach(key => {
+                                        if (tags[key]) {
+                                            Object.values(tags[key]).forEach(arr => {
+                                                if (Array.isArray(arr)) detailedTags.push(...arr);
+                                            });
+                                        }
                                     });
-                                    if (displayTags.length > 5) {
-                                        tagsHtml += `<span style="color: #5f6368; font-size: 11px; padding: 2px;">+${displayTags.length - 5}</span>`;
+                                }
+                                
+                                // 태그 표시 HTML 생성
+                                if (simpleTags.length > 0 || detailedTags.length > 0) {
+                                    tagsHtml = '<div style="margin-top: 6px;">';
+                                    
+                                    // 일반 태그 표시
+                                    if (simpleTags.length > 0) {
+                                        const visibleSimple = simpleTags.slice(0, 3);
+                                        tagsHtml += '<div style="margin-bottom: 4px;"><span style="color: #4caf50; font-size: 10px; font-weight: 500; margin-right: 4px;">[일반 태그]</span>';
+                                        visibleSimple.forEach(tag => {
+                                            tagsHtml += `<span style="background: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 4px; font-size: 11px; border: 1px solid #c8e6c9; margin-right: 4px;">#${escapeHtml(tag)}</span>`;
+                                        });
+                                        if (simpleTags.length > 3) {
+                                            tagsHtml += `<span style="color: #5f6368; font-size: 10px;">+${simpleTags.length - 3}</span>`;
+                                        }
+                                        tagsHtml += '</div>';
                                     }
+                                    
+                                    // 상세 태그 표시
+                                    if (detailedTags.length > 0) {
+                                        const visibleDetailed = detailedTags.slice(0, 3);
+                                        tagsHtml += '<div><span style="color: #673ab7; font-size: 10px; font-weight: 500; margin-right: 4px;">[상세 태그]</span>';
+                                        visibleDetailed.forEach(tag => {
+                                            tagsHtml += `<span style="background: #ede7f6; color: #512da8; padding: 2px 6px; border-radius: 4px; font-size: 11px; border: 1px solid #d1c4e9; margin-right: 4px;">#${escapeHtml(tag)}</span>`;
+                                        });
+                                        if (detailedTags.length > 3) {
+                                            tagsHtml += `<span style="color: #5f6368; font-size: 10px;">+${detailedTags.length - 3}</span>`;
+                                        }
+                                        tagsHtml += '</div>';
+                                    }
+                                    
                                     tagsHtml += '</div>';
                                 }
                             } catch (e) {
@@ -1058,7 +1251,8 @@
                                         `<button class="btn btn-secondary" onclick="createParentChunk(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">Parent Chunk 생성</button>`
                                     }
                                     <button class="btn btn-info" onclick="createMetadata(${file.id}, '${escapeHtml(file.original_filename)}')" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">메타데이터 생성</button>
-                                    <button class="btn" style="background: #673ab7; color: white; padding: 4px 8px; font-size: 12px; margin-right: 4px;" onclick="createTags(${file.id}, '${escapeHtml(file.original_filename)}')">태그 생성</button>
+                                    <button class="btn" style="background: #4caf50; color: white; padding: 4px 8px; font-size: 12px; margin-right: 4px;" onclick="createSimpleTags(${file.id}, '${escapeHtml(file.original_filename)}')">일반 태그 생성</button>
+                                    <button class="btn" style="background: #673ab7; color: white; padding: 4px 8px; font-size: 12px; margin-right: 4px;" onclick="createDetailedTags(${file.id}, '${escapeHtml(file.original_filename)}')">상세 태그 생성</button>
                                     <button class="btn btn-primary" onclick="continueUpload(${file.id})" style="padding: 4px 8px; font-size: 12px; margin-right: 4px;">이어서 업로드</button>
                                     <button class="btn btn-secondary" onclick="deleteFile(${file.id})" style="padding: 4px 8px; font-size: 12px;">삭제</button>
                                 </div>
@@ -1945,9 +2139,9 @@
             }
         }
 
-        // 태그 생성
-        async function createTags(fileId, fileName) {
-            if (!confirm(`"${fileName}" 파일의 태그를 생성하시겠습니까?\n\n이 작업은 AI 모델을 사용하여 Parent Chunk와 회차별 분석 데이터를 종합하여 분석합니다.`)) {
+        // 일반 태그 생성
+        async function createSimpleTags(fileId, fileName) {
+            if (!confirm(`"${fileName}" 파일의 일반 태그를 생성하시겠습니까?\n\n간단한 키워드 형태의 태그가 생성됩니다.`)) {
                 return;
             }
 
@@ -1957,25 +2151,58 @@
             button.textContent = '생성 중...';
 
             try {
-                const response = await fetch(`/api/files/${fileId}/process/tags`, {
+                const response = await fetch(`/api/files/${fileId}/process/tags/simple`, {
                     method: 'POST',
                     credentials: 'include'
                 });
                 const data = await response.json();
 
                 if (response.ok) {
-                    let message = '태그 생성이 완료되었습니다.';
-                    if (data.tags && data.tags.length > 0) {
-                        message += `\n생성된 태그: ${data.tags.join(', ')}`;
-                    }
-                    showAlert(message, 'success');
+                    console.log('[일반 태그 생성] 성공 응답:', data);
+                    showAlert('일반 태그 생성이 완료되었습니다.', 'success');
+                    loadFiles(); // 파일 목록 새로고침
+                } else {
+                    console.error('[일반 태그 생성] 실패 응답:', data);
+                    showAlert(`일반 태그 생성 실패: ${data.error || '알 수 없는 오류'}`, 'error');
+                }
+            } catch (error) {
+                showAlert(`일반 태그 생성 중 오류가 발생했습니다: ${error.message}`, 'error');
+                console.error('일반 태그 생성 오류:', error);
+            } finally {
+                button.disabled = false;
+                button.textContent = originalText;
+            }
+        }
+
+        // 상세 태그 생성
+        async function createDetailedTags(fileId, fileName) {
+            if (!confirm(`"${fileName}" 파일의 상세 태그를 생성하시겠습니까?\n\n이 작업은 AI 모델을 사용하여 Parent Chunk와 회차별 분석 데이터를 종합하여 상세한 태그를 생성합니다.\n시간이 오래 걸릴 수 있습니다.`)) {
+                return;
+            }
+
+            const button = event.target;
+            const originalText = button.textContent;
+            button.disabled = true;
+            button.textContent = '생성 중...';
+
+            try {
+                const response = await fetch(`/api/files/${fileId}/process/tags/detailed`, {
+                    method: 'POST',
+                    credentials: 'include'
+                });
+                const data = await response.json();
+
+                if (response.ok) {
+                    console.log('[상세 태그 생성] 성공 응답:', data);
+                    showAlert('상세 태그 생성이 완료되었습니다.', 'success');
                     loadFiles(); // 파일 목록 새로고침
                 } else {
-                    showAlert(`태그 생성 실패: ${data.error || '알 수 없는 오류'}`, 'error');
+                    console.error('[상세 태그 생성] 실패 응답:', data);
+                    showAlert(`상세 태그 생성 실패: ${data.error || '알 수 없는 오류'}`, 'error');
                 }
             } catch (error) {
-                showAlert(`태그 생성 중 오류가 발생했습니다: ${error.message}`, 'error');
-                console.error('태그 생성 오류:', error);
+                showAlert(`상세 태그 생성 중 오류가 발생했습니다: ${error.message}`, 'error');
+                console.error('상세 태그 생성 오류:', error);
             } finally {
                 button.disabled = false;
                 button.textContent = originalText;