酉곗뼱 湲곕뒫 異붽?: ?щ윭 硫붿떆吏€ ?좏깮 諛??곗냽 ?쒖떆 湲곕뒫 援ы쁽

- NovelProject 紐⑤뜽??viewer_enabled, viewer_selected_message_ids ?꾨뱶 異붽?
- ?뚰겕?ㅽ럹?댁뒪?먯꽌 酉곗뼱 ?쒖꽦??諛?硫붿떆吏€ ?좏깮 湲곕뒫 異붽?
- ?щ윭 硫붿떆吏€瑜??좏깮?섏뿬 酉곗뼱???쒖꽌?€濡??쒖떆?섎뒗 湲곕뒫 援ы쁽
- 怨듦컻 酉곗뼱 ?섏씠吏€(/creation/viewer/<project_id>) 異붽?
- ?좏깮??硫붿떆吏€?ㅼ쓣 ?섎굹濡??댁뼱???쒖떆?섎룄濡?媛쒖꽑
- 酉곗뼱 ?좏깮 踰꾪듉 湲곕낯 ?④? 泥섎━ (?쒖꽦???쒖뿉留??쒖떆)
- ?좏깮 痍⑥냼 湲곕뒫 異붽?

app.py

@@ -5,11 +5,19 @@ import sys
 import os
 import logging
 from logging.handlers import RotatingFileHandler
+import asyncio
 
 # UTF-8 인코딩 강제 설정
 if sys.platform == 'win32':
     sys.stdout.reconfigure(encoding='utf-8')
     sys.stderr.reconfigure(encoding='utf-8')
+    # Windows에서 asyncio와 httpx/Flask 간의 'Event loop is closed' 에러 방지
+    try:
+        import nest_asyncio
+        nest_asyncio.apply()
+        asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
+    except:
+        pass
 
 from app import create_app
 

app/__init__.py

@@ -305,8 +305,14 @@ def create_app() -> Flask:
             logger.debug(f"404 에러(정적): {request.path} - {request.method}")
         else:
             logger.warning(f"404 에러: {request.path} - {request.method}")
-            
-        if request.path.startswith('/api/'):
+        
+        # API 요청이거나 JSON을 기대하는 요청인 경우 JSON 응답 반환
+        # 경로에 '/api/'가 포함되어 있으면 API 요청으로 간주 (예: /api/, /creation/api/)
+        is_api_request = '/api/' in request.path
+        accepts_json = request.accept_mimetypes.best_match(['application/json', 'text/html']) == 'application/json'
+        is_json_request = request.is_json or request.content_type == 'application/json'
+        
+        if is_api_request or accepts_json or is_json_request:
             return jsonify({'error': gettext('no_resource', lang=session.get('lang', 'vi')), 'path': request.path}), 404
         return 'Not Found', 404
 
@@ -347,7 +353,15 @@ def create_app() -> Flask:
                 body_str = str(body)
                 if len(body_str) > 1000:
                     body_str = body_str[:1000] + "..."
-                logger.info(f"[요청 본문] {body_str}")
+                
+                # Windows 콘솔 인코딩 에러 방지 (Emoji 등 처리할 수 없는 문자를 안전하게 처리)
+                try:
+                    # cp949로 인코딩 불가능한 문자를 '?'로 대체하여 안전하게 처리
+                    safe_body_str = body_str.encode('cp949', errors='replace').decode('cp949', errors='replace')
+                    logger.info(f"[요청 본문] {safe_body_str}")
+                except Exception:
+                    # 로깅 실패가 서비스 중단으로 이어지지 않도록 예외 처리
+                    pass
             except:
                 pass
 
@@ -356,7 +370,13 @@ def create_app() -> Flask:
         """처리되지 않은 모든 예외 로깅"""
         import traceback
         err_trace = traceback.format_exc()
-        logger.error(f"[Unhandled Exception] {str(e)}\n{err_trace}")
+        error_msg = f"[Unhandled Exception] {str(e)}\n{err_trace}"
+        logger.error(error_msg)
+        # 터미널에 직접 출력 (콘솔 확인용)
+        print("\n" + "="*80)
+        print("ERROR 발생!")
+        print(error_msg)
+        print("="*80 + "\n")
         
         # API 요청인 경우 JSON 응답
         if request.path.startswith('/api/'):

app/agent/agent.py

@@ -1,11 +1,43 @@
 import asyncio
 import os
-from typing import Optional, Union
+import logging
+from typing import Optional, Union, List, Dict
+from pydantic import BaseModel, Field
 from pydantic_ai import Agent, RunContext
 from pydantic_ai.models import Model
 from app.agent.deps import NovelWriterDeps
 from app.models.project_config import ProjectMode
 
+logger = logging.getLogger(__name__)
+
+# --- Pydantic 데이터 모델 정의 ---
+
+class CharacterStatus(BaseModel):
+    """게임 시스템 형태의 캐릭터 상태 및 세계관 정보"""
+    current_time: str = Field(description="현재 시간 (예: D+3652 | 2153/07/15 | 22:30)")
+    location: str = Field(description="현재 위치 (예: 하층부 언더쉘, Sector-85)")
+    weather: str = Field(description="현재 날씨 또는 환경 상태 (예: 습하고 퀴퀴함)")
+    name: str = Field(description="캐릭터 이름")
+    affiliation: str = Field(description="소속 그룹 또는 세력")
+    stats: str = Field(description="캐릭터 능력치 및 숙련도 (예: 이능: [미정](F-)[0/100])")
+    hp_status: str = Field(description="체력 및 부상 상태 (예: (양호))")
+    inventory: List[str] = Field(default_factory=list, description="소지품 목록")
+    quest_status: Optional[str] = Field(None, description="진행 중인 퀘스트 또는 목표")
+
+class NovelGenerationResult(BaseModel):
+    """에이전트의 최종 응답 구조"""
+    narrative: str = Field(description="소설 본문 및 묘사 텍스트 (상태창 정보를 포함하지 마세요)")
+    status: CharacterStatus = Field(description="구조화된 캐릭터 상태 정보")
+    hidden_thoughts: Optional[str] = Field(None, description="에이전트의 내부 추론 또는 향후 전개 계획 (사용자에게는 보이지 않음)")
+    image_description: Optional[str] = Field(None, description="현재 캐릭터와 상황을 분석한 이미지 설명 (예: 'cyberpunk style, female character with dark hair, wearing tactical gear, in underground facility, neon lights, action scene')")
+
+class InitialAnalysisResult(BaseModel):
+    """초기 설정 분석 결과 구조"""
+    summary: str = Field(description="작품의 핵심 배경과 로그라인 요약 (3~5문장)")
+    characters: List[str] = Field(description="추출된 주요 캐릭터 설정 리스트 (이름, 역할, 특징 포함)")
+    world_setting: List[str] = Field(description="추출된 핵심 세계관 및 환경 설정 리스트")
+    plot_hooks: List[str] = Field(description="향후 전개를 위한 주요 복선 및 갈등 요소")
+
 def get_model() -> Union[str, Model]:
     """환경 변수에 따라 적절한 모델을 반환합니다."""
     if os.environ.get('OPENAI_API_KEY'):
@@ -21,7 +53,17 @@ def get_model() -> Union[str, Model]:
 novel_agent = Agent(
     get_model(),
     deps_type=NovelWriterDeps,
-    system_prompt="당신은 전문 웹소설 작가 어시스턴트입니다."
+    output_type=NovelGenerationResult,
+    system_prompt=(
+        "당신은 전문 웹소설 작가이자 게임 마스터(GM)입니다. "
+        "당신은 반드시 'NovelGenerationResult' 스키마를 엄격히 준수하여 응답해야 합니다.\n\n"
+        "1. 'narrative' 필드에는 독자가 몰입할 수 있는 소설 본문을 작성하세요. 본문 내에 상태창이나 통계 수치를 포함하지 마세요.\n"
+        "2. 'status' 필드에는 서사 전개에 맞춰 업데이트된 캐릭터의 게임적 상태 정보를 구조화하여 입력하세요.\n"
+        "3. 'hidden_thoughts' 필드에는 다음 전개를 위한 복선이나 에이전트의 의도를 기록하세요.\n"
+        "4. 'image_description' 필드에는 현재 캐릭터의 이름, 외모, 복장, 위치, 상황, 분위기 등을 분석하여 이미지 생성에 적합한 영어 설명을 작성하세요. "
+        "예: 'cyberpunk style, [캐릭터 이름], [외모 특징], wearing [복장], in [위치], [분위기/조명], [액션/상황]'. "
+        "반드시 현재 status의 캐릭터 정보(name, location, affiliation 등)와 narrative 내용을 기반으로 정확하게 작성하세요."
+    )
 )
 
 @novel_agent.system_prompt
@@ -29,26 +71,59 @@ async def dynamic_system_prompt(ctx: RunContext[NovelWriterDeps]) -> str:
     """Fetch facts and context in parallel to build a dynamic system prompt."""
     project = ctx.deps.current_project
     
-    # Zep(Context)과 Mem0(Facts) 데이터를 병렬로 조회
+    # 초기 설정 가져오기 (DB에서 직접 조회)
+    from app.database import NovelProject
+    project_db = NovelProject.query.filter_by(project_id=project.project_id).first()
+    initial_settings = project_db.initial_settings if project_db and project_db.initial_settings else None
+    
+    # Zep(Context - Narrative Flow만)과 Mem0(Facts - 정적 설정) 데이터를 병렬로 조회
     context_task = ctx.deps.zep_client.get_session_context(project.project_id, "default_session")
     facts_task = ctx.deps.mem0_client.get_facts(project.project_id)
     
     context, facts = await asyncio.gather(context_task, facts_task)
     
-    facts_str = "\n- ".join(facts)
+    # Zep summary 잘림 감지 및 경고
+    truncation_markers = ['...', '…', '...\n', '…\n']
+    context_trimmed = context.rstrip()
+    is_truncated = any(context_trimmed.endswith(marker.rstrip()) for marker in truncation_markers)
+    
+    if is_truncated:
+        logger.warning(
+            f"[Zep Memory Truncation Warning] Project {project.project_id}: "
+            f"Zep summary appears to be truncated. "
+            f"Summary length: {len(context)}, "
+            f"Ends with: {repr(context_trimmed[-10:])}. "
+            f"Consider reducing static world lore in Zep and storing it in Mem0/RAG instead."
+        )
+    
+    facts_str = "\n- ".join(facts) if facts else "아직 저장된 정적 설정이 없습니다."
+    
+    # 초기 설정 섹션 구성
+    initial_settings_section = ""
+    if initial_settings:
+        initial_settings_section = f"""
+[초기 설정]
+{initial_settings}
+
+"""
+    else:
+        initial_settings_section = """
+[초기 설정]
+초기 설정이 아직 저장되지 않았습니다.
+
+"""
     
     prompt = f"""
 [현재 프로젝트: {project.title}]
 모드: {project.mode.value}
-
-[기존 설정 및 사실관계 (Mem0)]
+{initial_settings_section}
+[정적 세계 설정 및 사실관계 (Mem0/RAG)]
 - {facts_str}
 
-[스토리 맥락 및 요약 (Zep)]
+[서사적 전개 맥락 (Zep - Narrative Flow)]
 {context}
 
-위 정보를 바탕으로 소설 작성을 도와주세요. 
-일관성 있는 캐릭터와 전개를 유지하는 것이 가장 중요합니다.
+위 정보를 바탕으로 소설 작성을 도와주세요.
 """
     return prompt
 

app/core/logger.py

@@ -43,14 +43,40 @@ def get_logger(name: str, level: int = logging.INFO) -> logging.Logger:
     # 콘솔 핸들러 설정
     stream = sys.stdout
     if sys.platform == 'win32':
-        for s in [sys.stdout, sys.stderr]:
-            if hasattr(s, 'reconfigure'):
-                try:
-                    s.reconfigure(errors='replace')
-                except Exception:
-                    pass
+        # Windows 콘솔에서 유니코드 출력 문제 해결 (cp949 대신 utf-8 또는 에러 대체 설정)
+        try:
+            # sys.stdout/stderr의 에러 처리 방식을 'replace'로 설정
+            if hasattr(sys.stdout, 'reconfigure'):
+                sys.stdout.reconfigure(errors='replace')
+            if hasattr(sys.stderr, 'reconfigure'):
+                sys.stderr.reconfigure(errors='replace')
+        except Exception:
+            pass
             
-    console_handler = logging.StreamHandler(stream)
+    class SafeStreamHandler(logging.StreamHandler):
+        """Windows cp949 인코딩 에러를 방지하는 안전한 스트림 핸들러"""
+        def emit(self, record):
+            try:
+                msg = self.format(record)
+                stream = self.stream
+                # 스트림의 인코딩 정보를 가져오거나 기본값 사용
+                encoding = getattr(stream, 'encoding', None) or 'utf-8'
+                
+                # 인코딩 에러 방지: 처리할 수 없는 문자를 '?'로 대체
+                try:
+                    # 먼저 현재 인코딩으로 시도
+                    stream.write(msg + self.terminator)
+                    self.flush()
+                except UnicodeEncodeError:
+                    # 인코딩 에러 발생 시 안전하게 처리
+                    safe_msg = msg.encode(encoding, errors='replace').decode(encoding, errors='replace')
+                    stream.write(safe_msg + self.terminator)
+                    self.flush()
+            except Exception:
+                # 모든 예외를 무시하여 로깅 실패가 애플리케이션을 중단시키지 않도록 함
+                pass
+
+    console_handler = SafeStreamHandler(stream)
     console_handler.setLevel(level)
     console_formatter = logging.Formatter(LOG_FORMAT, datefmt=DATE_FORMAT)
     console_handler.setFormatter(console_formatter)

app/database.py

@@ -83,6 +83,9 @@ class NovelProject(db.Model):
     mode = db.Column(db.String(20), nullable=False, default='CREATIVE')  # 'CREATIVE', 'REFERENCE'
     reference_source_id = db.Column(db.String(100), nullable=True)
     initial_settings = db.Column(db.Text, nullable=True)  # 초기 세계관/설정 정보
+    custom_system_prompt = db.Column(db.Text, nullable=True)  # 작가 전용 시스템 지침 (커스텀 프롬프트)
+    viewer_enabled = db.Column(db.Boolean, default=False, nullable=False)  # 뷰어 활성화 여부
+    viewer_selected_message_ids = db.Column(db.Text, nullable=True)  # 선택된 메시지 ID 목록 (JSON 배열)
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
     created_at = db.Column(db.DateTime, default=datetime.utcnow, nullable=False)
     updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow, nullable=False)
@@ -99,6 +102,9 @@ class NovelProject(db.Model):
             'mode': self.mode,
             'reference_source_id': self.reference_source_id,
             'initial_settings': self.initial_settings,
+            'custom_system_prompt': self.custom_system_prompt,
+            'viewer_enabled': self.viewer_enabled,
+            'viewer_selected_message_ids': self.viewer_selected_message_ids,
             'user_id': self.user_id,
             'created_at': self.created_at.isoformat() if self.created_at else None,
             'updated_at': self.updated_at.isoformat() if self.updated_at else None

app/migrations.py

@@ -121,7 +121,25 @@ def check_and_migrate_db(app):
                     logger.error(f"webtoon_milestone_manager 마이그레이션 중 오류: {e}")
                     conn.rollback()
 
-                # 5. notion_schedule_cache 테이블 확인 및 생성
+                # 5. chat_session 테이블에 novel_project_id 컬럼 추가
+                cs_columns = []
+                try:
+                    cs_columns = [col['name'] for col in inspector.get_columns('chat_session')]
+                except Exception as e:
+                    logger.warning(f"'chat_session' 테이블 컬럼 조회 실패: {e}")
+
+                if 'chat_session' in table_names or 'ChatSession' in table_names:
+                    if 'novel_project_id' not in cs_columns:
+                        logger.info("chat_session 테이블에 'novel_project_id' 컬럼이 없어 추가합니다.")
+                        try:
+                            conn.execute(text("ALTER TABLE chat_session ADD COLUMN novel_project_id INTEGER REFERENCES novel_project(id)"))
+                            conn.commit()
+                            logger.info("'novel_project_id' 컬럼 추가 완료")
+                        except Exception as e:
+                            logger.error(f"'novel_project_id' 컬럼 추가 실패: {e}")
+                            conn.rollback()
+
+                # 6. notion_schedule_cache 테이블 확인 및 생성
                 if 'notion_schedule_cache' not in table_names:
                     logger.info("notion_schedule_cache 테이블이 없어 생성합니다.")
                     try:
@@ -131,6 +149,19 @@ def check_and_migrate_db(app):
                     except Exception as e:
                         logger.error(f"notion_schedule_cache 테이블 생성 실패: {e}")
 
+                # 7. novel_project 테이블에 custom_system_prompt 컬럼 추가
+                if 'novel_project' in table_names:
+                    np_columns = [col['name'] for col in inspector.get_columns('novel_project')]
+                    if 'custom_system_prompt' not in np_columns:
+                        logger.info("novel_project 테이블에 'custom_system_prompt' 컬럼이 없어 추가합니다.")
+                        try:
+                            conn.execute(text("ALTER TABLE novel_project ADD COLUMN custom_system_prompt TEXT"))
+                            conn.commit()
+                            logger.info("'custom_system_prompt' 컬럼 추가 완료")
+                        except Exception as e:
+                            logger.error(f"'custom_system_prompt' 컬럼 추가 실패: {e}")
+                            conn.rollback()
+
             logger.info("데이터베이스 마이그레이션 완료")
 
         except Exception as e:

app/routers/creation.py

@@ -5,6 +5,7 @@ import uuid
 import os
 import asyncio
 import re
+import json
 from app.database import db, NovelProject, UploadedFile, ParentChunk, DocumentChunk, GraphEntity, GraphRelationship, GraphEvent, NovelProjectFact
 from app.routes import inject_admin_menu as shared_inject_admin_menu
 from app.models.project_config import ProjectConfig, ProjectMode
@@ -217,7 +218,7 @@ def get_chat_history(project_id: str):
             
         messages = ChatMessage.query.filter_by(session_id=session.id).order_by(ChatMessage.created_at.asc()).all()
         return jsonify({
-            "messages": [{"role": m.role, "content": m.content} for m in messages]
+            "messages": [{"id": m.id, "role": m.role, "content": m.content} for m in messages]
         })
     except Exception as e:
         return jsonify({"error": str(e)}), 500
@@ -425,6 +426,27 @@ def save_initial_settings(project_id: str):
         current_app.logger.error(error_trace)
         return jsonify({"error": str(e)}), 500
 
+@creation_bp.route('/api/projects/<project_id>/custom-prompt', methods=['POST'])
+@login_required
+def save_custom_prompt(project_id: str):
+    """프로젝트별 커스텀 시스템 지침(작가 프롬프트)을 저장합니다."""
+    try:
+        data = request.get_json()
+        prompt = data.get('custom_system_prompt')
+        
+        project = NovelProject.query.filter_by(project_id=project_id, user_id=current_user.id).first()
+        if not project:
+            return jsonify({"error": "Project not found"}), 404
+            
+        project.custom_system_prompt = prompt
+        db.session.commit()
+        
+        return jsonify({"message": "Custom system prompt saved successfully"})
+    except Exception as e:
+        db.session.rollback()
+        current_app.logger.error(f"[Save Custom Prompt Error] {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
 @creation_bp.route('/api/projects/<project_id>/system-prompt', methods=['GET'])
 @login_required
 def get_system_prompt(project_id: str):
@@ -495,7 +517,16 @@ def get_system_prompt(project_id: str):
                     current_app.logger.warning(f"[Get System Prompt] Mode conversion error: {e}, using default")
                     mode_str = "CREATIVE"
                 
+                # 커스텀 지침 섹션 추가
+                custom_prompt_section = ""
+                if project.custom_system_prompt:
+                    custom_prompt_section = f"""
+[작가 지정 지침 (Rules)]
+{project.custom_system_prompt}
+"""
+
                 prompt = f"""
+{custom_prompt_section}
 [현재 프로젝트: {project.title}]
 모드: {mode_str}
 {initial_settings_section}
@@ -662,6 +693,7 @@ def chat_with_agent(project_id: str):
             "hidden_thoughts": gen_result.hidden_thoughts,
             "image_description": gen_result.image_description,
             "image_url": image_url,
+            "message_id": ai_msg.id,  # 뷰어 선택을 위한 메시지 ID 추가
             "usage": {
                 "request_tokens": usage.request_tokens or usage.input_tokens,
                 "response_tokens": usage.response_tokens or usage.output_tokens,
@@ -675,3 +707,134 @@ def chat_with_agent(project_id: str):
         error_trace = traceback.format_exc()
         current_app.logger.error(f"[WebNovel Chat Error] {str(e)}\n{error_trace}")
         return jsonify({"error": str(e), "trace": error_trace}), 500
+
+@creation_bp.route('/api/projects/<project_id>/viewer-settings', methods=['GET'])
+@login_required
+def get_viewer_settings(project_id: str):
+    """뷰어 설정을 조회합니다."""
+    try:
+        project = NovelProject.query.filter_by(project_id=project_id, user_id=current_user.id).first()
+        if not project:
+            return jsonify({"error": "Project not found"}), 404
+        
+        # JSON 배열로 저장된 메시지 ID 목록 파싱
+        selected_ids = []
+        if project.viewer_selected_message_ids:
+            try:
+                selected_ids = json.loads(project.viewer_selected_message_ids)
+            except:
+                selected_ids = []
+        
+        return jsonify({
+            "viewer_enabled": project.viewer_enabled or False,
+            "viewer_selected_message_ids": selected_ids
+        })
+    except Exception as e:
+        current_app.logger.error(f"[Get Viewer Settings Error] {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+@creation_bp.route('/api/projects/<project_id>/viewer-settings', methods=['POST'])
+@login_required
+def update_viewer_settings(project_id: str):
+    """뷰어 설정을 업데이트합니다."""
+    try:
+        data = request.get_json()
+        project = NovelProject.query.filter_by(project_id=project_id, user_id=current_user.id).first()
+        if not project:
+            return jsonify({"error": "Project not found"}), 404
+        
+        if 'viewer_enabled' in data:
+            project.viewer_enabled = bool(data['viewer_enabled'])
+        
+        if 'viewer_selected_message_ids' in data:
+            # 여러 메시지 ID 배열 처리
+            message_ids = data['viewer_selected_message_ids']
+            if not isinstance(message_ids, list):
+                return jsonify({"error": "viewer_selected_message_ids must be an array"}), 400
+            
+            from app.database import ChatSession, ChatMessage
+            session = ChatSession.query.filter_by(novel_project_id=project.id, user_id=current_user.id).first()
+            if not session:
+                return jsonify({"error": "No chat session found for this project"}), 404
+            
+            valid_message_ids = []
+            for message_id in message_ids:
+                if not message_id:
+                    continue
+                    
+                # 임시 ID인 경우 무시
+                if isinstance(message_id, str) and message_id.startswith('temp-'):
+                    continue
+                
+                # 메시지가 해당 프로젝트의 세션에 속하는지 확인
+                message = ChatMessage.query.filter_by(id=message_id, session_id=session.id, role='ai').first()
+                if message:
+                    valid_message_ids.append(message.id)
+            
+            # 생성 시간 순서로 정렬
+            if valid_message_ids:
+                messages = ChatMessage.query.filter(
+                    ChatMessage.id.in_(valid_message_ids),
+                    ChatMessage.session_id == session.id
+                ).order_by(ChatMessage.created_at.asc()).all()
+                valid_message_ids = [msg.id for msg in messages]
+                project.viewer_selected_message_ids = json.dumps(valid_message_ids)
+            else:
+                project.viewer_selected_message_ids = None
+        
+        db.session.commit()
+        
+        # JSON 배열로 저장된 메시지 ID 목록 파싱
+        selected_ids = []
+        if project.viewer_selected_message_ids:
+            try:
+                selected_ids = json.loads(project.viewer_selected_message_ids)
+            except:
+                selected_ids = []
+        
+        return jsonify({
+            "viewer_enabled": project.viewer_enabled,
+            "viewer_selected_message_ids": selected_ids
+        })
+    except Exception as e:
+        db.session.rollback()
+        current_app.logger.error(f"[Update Viewer Settings Error] {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+@creation_bp.route('/viewer/<project_id>', methods=['GET'])
+def public_viewer(project_id: str):
+    """공개 뷰어 페이지 (인증 불필요, 활성화 여부 확인)"""
+    try:
+        project = NovelProject.query.filter_by(project_id=project_id).first()
+        if not project:
+            return "프로젝트를 찾을 수 없습니다.", 404
+        
+        if not project.viewer_enabled:
+            return "뷰어가 비활성화되어 있습니다.", 403
+        
+        # 선택된 메시지들 가져오기 (순서대로)
+        selected_messages = []
+        if project.viewer_selected_message_ids:
+            from app.database import ChatSession, ChatMessage
+            try:
+                message_ids = json.loads(project.viewer_selected_message_ids)
+                if message_ids:
+                    # 생성 시간 순서로 정렬하여 가져오기
+                    messages = ChatMessage.query.filter(
+                        ChatMessage.id.in_(message_ids)
+                    ).order_by(ChatMessage.created_at.asc()).all()
+                    # ChatMessage 객체를 딕셔너리로 변환 (JSON 직렬화 가능하도록)
+                    selected_messages = [{"id": msg.id, "content": msg.content, "created_at": msg.created_at.isoformat() if msg.created_at else None} for msg in messages]
+            except Exception as e:
+                current_app.logger.warning(f"[Public Viewer] Failed to parse message IDs: {e}")
+        
+        # 디버깅 정보 로깅
+        current_app.logger.info(f"[Public Viewer] Project: {project_id}, Viewer enabled: {project.viewer_enabled}, Selected messages count: {len(selected_messages)}")
+        
+        return render_template('novel_viewer.html', 
+                             project=project, 
+                             selected_messages=selected_messages)
+    except Exception as e:
+        import traceback
+        current_app.logger.error(f"[Public Viewer Error] {str(e)}\n{traceback.format_exc()}")
+        return f"오류가 발생했습니다: {str(e)}", 500

app/routes.py

@@ -52,14 +52,28 @@ def get_default_admin_menu():
                 ],
             },
             {
-                "label": "사이트 관리",
+                "label": "웹소설 관리",
                 "roles": ["admin"],
                 "items": [
-                    {"label": "설정", "endpoint": "main.admin_settings"},
+                    {"label": "웹소설 관리", "endpoint": "main.admin_webnovels"},
                     {"label": "RAG 관리", "endpoint": "main.webnovels"},
+                    {"label": "태그/프롬프트", "endpoint": "main.admin_tags"},
+                    {"label": "챗봇 프롬프트", "endpoint": "main.admin_chatbot_prompts"},
+                ],
+            },
+            {
+                "label": "사이트 관리",
+                "roles": ["admin"],
+                "items": [
+                    {"label": "AI 설정", "endpoint": "main.admin_settings"},
+                    {"label": "프롬프트 관리", "endpoint": "main.admin_prompts"},
                     {"label": "사용자 관리", "endpoint": "main.admin", "roles": ["admin"]},
                     {"label": "토큰 통계", "endpoint": "main.admin_tokens", "roles": ["admin"]},
                     {"label": "메뉴 관리", "endpoint": "main.admin_menu", "roles": ["admin"]},
+                    {"label": "파일 관리", "endpoint": "main.admin_files"},
+                    {"label": "메시지 확인", "endpoint": "main.admin_messages"},
+                    {"label": "유틸", "endpoint": "main.admin_utils"},
+                    {"label": "사진첩 관리", "endpoint": "main.admin_photo_album"},
                 ],
             },
             {
@@ -111,30 +125,6 @@ def get_default_admin_menu():
                     {"label": "전체 마일스톤 보기", "endpoint": "main.webtoon_milestone_latest_result", "roles": ["admin", "webtoon_pm", "webtoon_admin", "producer"]},
                 ]
             },
-            {
-                "label": "AI 설정",
-                "roles": ["admin"],
-                "items": [
-                    {"label": "AI 설정", "endpoint": "main.admin_settings"},
-                    {"label": "프롬프트 관리", "endpoint": "main.admin_prompts"},
-                ],
-            },
-            {
-                "label": "챗봇",
-                "roles": ["admin"],
-                "items": [
-                    {"label": "태그/프롬프트", "endpoint": "main.admin_tags"},
-                    {"label": "챗봇 프롬프트", "endpoint": "main.admin_chatbot_prompts"},
-                ],
-            },
-            {
-                "label": "편의기능",
-                "roles": ["admin"],
-                "items": [
-                    {"label": "유틸", "endpoint": "main.admin_utils"},
-                    {"label": "사진첩 관리", "endpoint": "main.admin_photo_album"},
-                ],
-            },
             {
                 "label": "에이전트",
                 "roles": ["admin"],
@@ -230,7 +220,7 @@ def get_available_admin_endpoints():
             ep = getattr(rule, "endpoint", None)
             if not ep or not isinstance(ep, str):
                 continue
-            if not ep.startswith("main."):
+            if not ep.startswith("main.") and not ep.startswith("creation."):
                 continue
             # 메뉴용: methods에 GET이 포함된 화면/페이지 위주
             methods = set(getattr(rule, "methods", []) or [])
@@ -307,6 +297,10 @@ def merge_admin_menu_defaults(current_config: dict) -> dict:
         if not isinstance(sections, list):
             return base
 
+        # 특정 섹션(AI 설정, 챗봇, 편의기능) 삭제 및 하위 메뉴 이동 요청 반영
+        sections = [s for s in sections if isinstance(s, dict) and s.get("label") not in ["AI 설정", "챗봇", "편의기능"]]
+        current_config["sections"] = sections
+
         existing_by_label = {s.get("label"): s for s in sections if isinstance(s, dict) and isinstance(s.get("label"), str)}
 
         def _section_endpoints(sec: dict) -> set:
@@ -441,10 +435,10 @@ def inject_admin_menu():
                 
                 # 프로젝트 관리자(webtoon_pm) 혹은 웹툰 관리자(webtoon_admin)/프로듀서(producer)에게는 특정 섹션을 필터링
                 if current_role in ['webtoon_admin', 'producer']:
-                    if sec_label not in ['관리팀', '원작 정보 분석']:
+                    if sec_label not in ['창작', '관리팀', '원작 정보 분석', '웹소설 관리']:
                         continue
                 elif current_role == 'webtoon_pm':
-                    if sec_label not in ['프로젝트 관리', '관리팀', '원작 정보 분석']:
+                    if sec_label not in ['창작', '프로젝트 관리', '관리팀', '원작 정보 분석', '웹소설 관리']:
                         continue
                 
                 # '에이전트' 섹션은 오직 최고 관리자(admin) 권한만 노출
@@ -2081,7 +2075,7 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
         
         # 모델명이 None이거나 빈 문자열인 경우 처리
         if not model_name or not model_name.strip():
-            print(f"[Parent Chunk 생성] ❌ 오류: 모델명이 제공되지 않았습니다.")
+            print(f"[Parent Chunk 생성] 오류: 모델명이 제공되지 않았습니다.")
             return None
         
         # 텍스트가 너무 길면 일부만 사용 (최대 50000자)
@@ -2134,7 +2128,7 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
             
             gemini_client = get_gemini_client()
             if not gemini_client.is_configured():
-                print(f"[Parent Chunk 생성] ❌ 오류: Gemini API 키가 설정되지 않았습니다.")
+                print(f"[Parent Chunk 생성] 오류: Gemini API 키가 설정되지 않았습니다.")
                 print(f"[Parent Chunk 생성] 디버그: Gemini 클라이언트 상태 확인 중...")
                 # API 키 상태 다시 확인
                 from app.gemini_client import get_gemini_api_key
@@ -2154,12 +2148,12 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
             )
             
             if result['error']:
-                print(f"[Parent Chunk 생성] ❌ 오류: Gemini API 호출 실패 - {result['error']}")
+                print(f"[Parent Chunk 생성] 오류: Gemini API 호출 실패 - {result['error']}")
                 print(f"[Parent Chunk 생성] 디버그: result 객체 내용: {result}")
                 return None
             
             if not result.get('response'):
-                print(f"[Parent Chunk 생성] ❌ 오류: Gemini API 응답이 비어있습니다.")
+                print(f"[Parent Chunk 생성] 오류: Gemini API 응답이 비어있습니다.")
                 print(f"[Parent Chunk 생성] 디버그: result 객체 내용: {result}")
                 return None
             
@@ -2205,11 +2199,11 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
                     error_detail = ollama_response.text if ollama_response.text else '상세 정보 없음'
                     if ollama_response.status_code == 404:
                         error_msg = f'Ollama API 오류 404: 모델 "{model_name}"을(를) 찾을 수 없습니다. 모델이 Ollama에 설치되어 있는지 확인하세요.'
-                        print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+                        print(f"[Parent Chunk 생성] 오류: {error_msg}")
                         print(f"[Parent Chunk 생성] 디버그: 만약 Gemini 모델을 사용하려면 모델명이 'gemini:' 또는 'gemini-'로 시작해야 합니다.")
                     else:
                         error_msg = f'Ollama API 오류: {ollama_response.status_code} - {error_detail[:200]}'
-                    print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+                    print(f"[Parent Chunk 생성] 오류: {error_msg}")
                     return None
                 
                 response_data = ollama_response.json()
@@ -2227,15 +2221,15 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
                     task_type='parent_chunk'
                 )
             except requests.exceptions.Timeout:
-                print(f"[Parent Chunk 생성] ❌ Ollama 타임아웃: 요청 시간이 초과되었습니다. (5분)")
+                print(f"[Parent Chunk 생성] Ollama 타임아웃: 요청 시간이 초과되었습니다. (5분)")
                 print(f"[Parent Chunk 생성] 파일이 너무 크거나 모델 응답이 느릴 수 있습니다.")
                 return None
             except requests.exceptions.ConnectionError:
-                print(f"[Parent Chunk 생성] ❌ Ollama 연결 오류: Ollama 서버에 연결할 수 없습니다.")
+                print(f"[Parent Chunk 생성] Ollama 연결 오류: Ollama 서버에 연결할 수 없습니다.")
                 print(f"[Parent Chunk 생성] 디버그: Ollama URL: {OLLAMA_BASE_URL}")
                 return None
             except requests.exceptions.RequestException as e:
-                print(f"[Parent Chunk 생성] ❌ Ollama API 오류: {str(e)}")
+                print(f"[Parent Chunk 생성] Ollama API 오류: {str(e)}")
                 print(f"[Parent Chunk 생성] 디버그: Ollama URL: {OLLAMA_BASE_URL}")
                 return None
         
@@ -2337,7 +2331,7 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
         db.session.add(parent_chunk)
         db.session.commit()
         
-        print(f"[Parent Chunk 생성] ✅ 완료: Parent Chunk가 생성되었습니다.")
+        print(f"[Parent Chunk 생성] 완료: Parent Chunk가 생성되었습니다.")
         print(f"[Parent Chunk 생성] - 세계관: {len(world_view)}자")
         print(f"[Parent Chunk 생성] - 캐릭터: {len(characters)}자")
         print(f"[Parent Chunk 생성] - 스토리: {len(story)}자")
@@ -2348,14 +2342,14 @@ def create_parent_chunk_with_ai(file_id, content, model_name):
         
     except requests.exceptions.RequestException as e:
         error_msg = f'Ollama API 연결 오류: {str(e)}'
-        print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+        print(f"[Parent Chunk 생성] 오류: {error_msg}")
         import traceback
         traceback.print_exc()
         return None
     except Exception as e:
         db.session.rollback()
         error_msg = f'Parent Chunk 생성 중 오류: {str(e)}'
-        print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+        print(f"[Parent Chunk 생성] 오류: {error_msg}")
         import traceback
         traceback.print_exc()
         return None
@@ -12528,7 +12522,7 @@ def create_file_parent_chunk(file_id):
         # 파일 경로 확인
         if not file.file_path or not os.path.exists(file.file_path):
             error_msg = f'파일 경로가 유효하지 않습니다: {file.file_path}'
-            print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+            print(f"[Parent Chunk 생성] 오류: {error_msg}")
             return jsonify({'error': error_msg}), 500
         
         # 파일 내용 읽기
@@ -12542,15 +12536,15 @@ def create_file_parent_chunk(file_id):
                     content = f.read()
         except FileNotFoundError:
             error_msg = f'파일을 찾을 수 없습니다: {file.file_path}'
-            print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+            print(f"[Parent Chunk 생성] 오류: {error_msg}")
             return jsonify({'error': error_msg}), 500
         except PermissionError:
             error_msg = f'파일 읽기 권한이 없습니다: {file.file_path}'
-            print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+            print(f"[Parent Chunk 생성] 오류: {error_msg}")
             return jsonify({'error': error_msg}), 500
         except Exception as e:
             error_msg = f'파일을 읽을 수 없습니다: {str(e)}'
-            print(f"[Parent Chunk 생성] ❌ 오류: {error_msg}")
+            print(f"[Parent Chunk 생성] 오류: {error_msg}")
             import traceback
             traceback.print_exc()
             return jsonify({'error': error_msg}), 500
@@ -12584,7 +12578,7 @@ def create_file_parent_chunk(file_id):
         import traceback
         error_traceback = traceback.format_exc()
         error_msg = str(e)
-        print(f"[Parent Chunk 생성] ❌ 예외 발생: {error_msg}")
+        print(f"[Parent Chunk 생성] 예외 발생: {error_msg}")
         print(f"[Parent Chunk 생성] Traceback:\n{error_traceback}")
         return jsonify({
             'error': f'Parent Chunk 생성 중 오류가 발생했습니다: {error_msg}',

app/services/memory_service.py

@@ -1,32 +1,175 @@
 import asyncio
 from typing import List, Dict, Any, Optional
+import logging
+
+logger = logging.getLogger(__name__)
 
 class ZepService:
-    """Zep (Long-term Memory) integration."""
+    """Zep (Long-term Memory) integration - Narrative Flow only.
+    
+    Zep는 Narrative Flow(서사적 전개)만 저장합니다.
+    정적 세계 설정(Worldview, History, Locations)은 Mem0 또는 RAG를 통해 처리합니다.
+    """
     def __init__(self, api_key: str, api_url: str):
         self.api_key = api_key
         self.api_url = api_url
 
     async def get_session_context(self, project_id: str, session_id: str) -> str:
-        """Fetch session history and summaries from Zep."""
-        zep_session_id = f"{project_id}_{session_id}"
-        # TODO: Implement actual Zep client call
-        await asyncio.sleep(0.1) # Simulate I/O
-        return f"Summary of project {project_id} from Zep..."
+        """Zep에서 세션 컨텍스트(Narrative Flow)를 가져옵니다.
+        
+        정적 세계 설정을 제외하고 Narrative Flow만 반환합니다.
+        예: "주인공이 Sector-95에 들어가서 Mika를 만났다"
+        """
+        from app.database import NovelProject, ChatSession, ChatMessage
+        
+        project = NovelProject.query.filter_by(project_id=project_id).first()
+        if not project:
+            return "프로젝트를 찾을 수 없습니다."
+            
+        session = ChatSession.query.filter_by(novel_project_id=project.id).first()
+        if not session:
+            return "아직 기록된 집필 내역이 없습니다."
+            
+        # 최신 대화 내역에서 Narrative Flow만 추출
+        # 초기 분석 메시지(model_name="initial-analysis")는 제외
+        messages = ChatMessage.query.filter(
+            ChatMessage.session_id == session.id,
+            ChatMessage.role == 'ai',
+            ChatMessage.model_name != 'initial-analysis'
+        ).order_by(ChatMessage.created_at.desc()).limit(10).all()
+        
+        if not messages:
+            return "집필이 시작되면 여기에 실시간 전개 요약이 표시됩니다."
+            
+        # Narrative Flow 요약 생성 (정적 설정 설명 제외)
+        summary_parts = []
+        for msg in reversed(messages):
+            # 본문에서 서사적 전개만 추출 (간단한 휴리스틱)
+            content = msg.content.replace('\n', ' ').strip()
+            # 너무 짧거나 정적 설정처럼 보이는 내용은 제외
+            if len(content) > 30 and not any(keyword in content.lower() for keyword in ['설정', '세계관', '역사', '배경']):
+                summary_parts.append(content[:150])  # 최대 150자
+        
+        if not summary_parts:
+            return "최근 서사적 전개가 기록되지 않았습니다."
+            
+        summary = "최근 서사 전개:\n" + "\n".join(f"- {part}" for part in summary_parts[-5:])  # 최근 5개만
+        
+        # 잘림 감지: summary가 "..."로 끝나면 경고
+        if summary.rstrip().endswith("...") or len(summary) > 2000:
+            logger.warning(
+                f"[Zep Memory Truncation Warning] Project {project_id}: "
+                f"Summary may be truncated. Length: {len(summary)}, "
+                f"Ends with '...': {summary.rstrip().endswith('...')}"
+            )
+            
+        return summary
 
 class Mem0Service:
-    """Mem0 (Entity/Fact Memory) integration."""
+    """Mem0 (Entity/Fact Memory) integration.
+    
+    정적 세계 설정(Worldview, History, Locations)을 저장합니다.
+    Narrative Flow는 Zep에서 처리하므로 여기에는 포함하지 않습니다.
+    """
     def __init__(self, api_key: str):
         self.api_key = api_key
 
     async def get_facts(self, project_id: str) -> List[str]:
-        """Fetch character and setting facts filtered by project_id."""
-        # TODO: Implement actual Mem0 client call with metadata filter
-        await asyncio.sleep(0.1) # Simulate I/O
-        return [f"Character info for project {project_id} from Mem0"]
+        """프로젝트와 관련된 정적 설정 정보를 Mem0/RAG에서 가져옵니다.
+        
+        정적 세계 설정(캐릭터, 장소, 세계관, 역사 등)을 반환합니다.
+        Narrative Flow는 Zep에서 처리하므로 여기에는 포함하지 않습니다.
+        """
+        from app.database import NovelProject, GraphEntity, ParentChunk, UploadedFile, db
+        
+        project = NovelProject.query.filter_by(project_id=project_id).first()
+        if not project:
+            return []
+
+        facts = []
+        
+        # 1. 프로젝트의 Mem0에 저장된 정적 설정 사실 가져오기 (NovelProjectFact 테이블)
+        try:
+            from app.database import NovelProjectFact
+            project_facts = NovelProjectFact.query.filter_by(project_id=project.id).all()
+            for fact in project_facts:
+                facts.append(fact.fact_content)
+        except Exception as e:
+            # 테이블이 아직 생성되지 않은 경우 무시 (마이그레이션 필요)
+            logger.debug(f"[Mem0] NovelProjectFact table not available: {e}")
+        
+        # 2. 참고 자료(RAG)가 있는 경우 해당 파일의 분석 정보 가져오기
+        if project.reference_source_id:
+            file = UploadedFile.query.filter(
+                (UploadedFile.id == project.reference_source_id) | 
+                (UploadedFile.filename.contains(project.reference_source_id))
+            ).first()
+            
+            if file:
+                # ParentChunk에서 세계관 정보 가져오기
+                parent = ParentChunk.query.filter_by(file_id=file.id).first()
+                if parent:
+                    if parent.characters:
+                        facts.append(f"[주요 캐릭터 설정] {parent.characters}")
+                    if parent.world_setting:
+                        facts.append(f"[세계관 설정] {parent.world_setting}")
+                
+                # GraphEntity에서 인물 및 장소 정보 가져오기 (정적 설정)
+                entities = GraphEntity.query.filter_by(file_id=file.id).limit(20).all()
+                for ent in entities:
+                    if ent.entity_type == 'character':
+                        fact_str = f"{ent.entity_name} ({ent.role or '인물'}): {ent.description or ''}"
+                        if ent.role:
+                            fact_str += f" - 역할: {ent.role}"
+                        facts.append(fact_str)
+                    elif ent.entity_type == 'location':
+                        fact_str = f"{ent.entity_name} (장소): {ent.description or ''}"
+                        if ent.category:
+                            fact_str += f" - 유형: {ent.category}"
+                        facts.append(fact_str)
+
+        # 3. facts가 없으면 안내 메시지
+        if not facts:
+            return ["아직 추출된 핵심 설정이 없습니다. 초기 설정을 저장하면 여기에 표시됩니다."]
+            
+        return facts
 
     async def add_fact(self, project_id: str, fact: str):
-        """Store a new fact into Mem0."""
-        # TODO: Implement storage
-        pass
+        """정적 세계 설정 사실을 Mem0에 저장합니다.
+        
+        Narrative Flow가 아닌 정적 설정(캐릭터 설명, 장소 설명, 세계관 등)을 저장합니다.
+        """
+        if not fact or not fact.strip():
+            return
+            
+        from app.database import NovelProject, db
+        
+        project = NovelProject.query.filter_by(project_id=project_id).first()
+        if not project:
+            logger.warning(f"[Mem0] Project {project_id} not found, cannot save fact")
+            return
+        
+        try:
+            from app.database import NovelProjectFact
+            
+            # 중복 확인: 같은 내용의 fact가 이미 있으면 추가하지 않음
+            existing = NovelProjectFact.query.filter_by(
+                project_id=project.id,
+                fact_content=fact.strip()
+            ).first()
+            
+            if existing:
+                return  # 이미 존재하는 fact는 건너뛰기
+            
+            new_fact = NovelProjectFact(
+                project_id=project.id,
+                fact_content=fact.strip()
+            )
+            db.session.add(new_fact)
+            db.session.commit()
+            logger.info(f"[Mem0] Saved fact for project {project_id}: {fact[:50]}...")
+        except Exception as e:
+            db.session.rollback()
+            # 테이블이 아직 생성되지 않은 경우 경고만 출력 (마이그레이션 필요)
+            logger.warning(f"[Mem0] Failed to save fact for project {project_id} (table may not exist): {e}")
 

app/utils/text_utils.py

@@ -194,4 +194,27 @@ def extract_chapter_number(text: str) -> Optional[int]:
     return None
 
 
+def clean_system_comments(text: str) -> str:
+    """
+    Markdown 주석 형태의 시스템 메시지 제거 ([//]: # (...))
+    
+    Args:
+        text: AI 에이전트의 응답 텍스트
+        
+    Returns:
+        주석이 제거된 텍스트
+    """
+    if not text:
+        return ''
+    
+    # [//]: # (...) 형태의 행 제거 (멀티라인 고려)
+    # ^[ \t]*\[\/\/\]: # \(.*?\) 형태 매칭
+    cleaned = re.sub(r'^[ \t]*\[\/\/\]: # \(.*?\)\s*\n?', '', text, flags=re.MULTILINE)
+    
+    # 혹시 남을 수 있는 인라인 주석도 제거
+    cleaned = re.sub(r'\[\/\/\]: # \(.*?\)', '', cleaned).strip()
+    
+    return cleaned
+
+
 

force_update_menu.py

@@ -43,6 +43,15 @@ if __name__ == "__main__":
 
 
 
+
+
+
+
+
+
+
+
+
 
 
 

migrate_add_viewer_fields.py

@@ -0,0 +1,53 @@
+"""
+NovelProject 모델에 뷰어 관련 필드 추가 마이그레이션
+"""
+import sys
+import os
+
+# 프로젝트 루트를 Python 경로에 추가
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+from app import create_app
+from app.database import db
+from sqlalchemy import inspect, text
+
+def migrate_add_viewer_fields():
+    """NovelProject 테이블에 뷰어 관련 필드 추가"""
+    app = create_app()
+    
+    with app.app_context():
+        try:
+            inspector = inspect(db.engine)
+            columns = [c['name'] for c in inspector.get_columns('novel_project')]
+            
+            # viewer_enabled 필드 추가
+            if 'viewer_enabled' not in columns:
+                print("Adding 'viewer_enabled' column to novel_project table...")
+                with db.engine.connect() as conn:
+                    conn.execute(text("ALTER TABLE novel_project ADD COLUMN viewer_enabled BOOLEAN DEFAULT 0 NOT NULL"))
+                    conn.commit()
+                print("✓ 'viewer_enabled' column added successfully")
+            else:
+                print("'viewer_enabled' column already exists")
+            
+            # viewer_selected_message_id 필드 추가
+            if 'viewer_selected_message_id' not in columns:
+                print("Adding 'viewer_selected_message_id' column to novel_project table...")
+                with db.engine.connect() as conn:
+                    conn.execute(text("ALTER TABLE novel_project ADD COLUMN viewer_selected_message_id INTEGER REFERENCES chat_message(id)"))
+                    conn.commit()
+                print("✓ 'viewer_selected_message_id' column added successfully")
+            else:
+                print("'viewer_selected_message_id' column already exists")
+            
+            print("\n마이그레이션이 완료되었습니다!")
+            
+        except Exception as e:
+            print(f"마이그레이션 중 오류 발생: {e}")
+            import traceback
+            traceback.print_exc()
+            raise
+
+if __name__ == '__main__':
+    migrate_add_viewer_fields()
+

migrate_viewer_multiple_messages.py

@@ -0,0 +1,79 @@
+"""
+NovelProject 모델의 viewer_selected_message_id를 viewer_selected_message_ids (JSON 배열)로 변경
+"""
+import sys
+import os
+import json
+
+# 프로젝트 루트를 Python 경로에 추가
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+from app import create_app
+from app.database import db
+from sqlalchemy import inspect, text
+
+def migrate_viewer_multiple_messages():
+    """viewer_selected_message_id를 viewer_selected_message_ids로 변경"""
+    app = create_app()
+    
+    with app.app_context():
+        try:
+            inspector = inspect(db.engine)
+            columns = [c['name'] for c in inspector.get_columns('novel_project')]
+            
+            # 기존 viewer_selected_message_id 값 백업 및 변환
+            if 'viewer_selected_message_id' in columns:
+                print("기존 viewer_selected_message_id 값을 백업하고 변환 중...")
+                with db.engine.connect() as conn:
+                    # 기존 값 가져오기
+                    result = conn.execute(text("SELECT id, viewer_selected_message_id FROM novel_project WHERE viewer_selected_message_id IS NOT NULL"))
+                    rows = result.fetchall()
+                    
+                    # viewer_selected_message_ids 컬럼 추가
+                    if 'viewer_selected_message_ids' not in columns:
+                        print("Adding 'viewer_selected_message_ids' column to novel_project table...")
+                        conn.execute(text("ALTER TABLE novel_project ADD COLUMN viewer_selected_message_ids TEXT"))
+                        conn.commit()
+                        print("✓ 'viewer_selected_message_ids' column added successfully")
+                    
+                    # 기존 단일 값을 JSON 배열로 변환
+                    for row in rows:
+                        project_id = row[0]
+                        old_message_id = row[1]
+                        if old_message_id:
+                            # 단일 값을 배열로 변환
+                            new_ids = json.dumps([old_message_id])
+                            conn.execute(text(
+                                "UPDATE novel_project SET viewer_selected_message_ids = :ids WHERE id = :pid"
+                            ), {"ids": new_ids, "pid": project_id})
+                    
+                    conn.commit()
+                    print(f"✓ Converted {len(rows)} projects' viewer message IDs to array format")
+                    
+                    # 기존 컬럼 삭제 (선택사항 - 필요시 주석 해제)
+                    # print("Removing old 'viewer_selected_message_id' column...")
+                    # conn.execute(text("ALTER TABLE novel_project DROP COLUMN viewer_selected_message_id"))
+                    # conn.commit()
+                    # print("✓ Old column removed")
+                print("\n마이그레이션이 완료되었습니다!")
+            else:
+                # viewer_selected_message_id가 없으면 새 컬럼만 추가
+                if 'viewer_selected_message_ids' not in columns:
+                    print("Adding 'viewer_selected_message_ids' column to novel_project table...")
+                    with db.engine.connect() as conn:
+                        conn.execute(text("ALTER TABLE novel_project ADD COLUMN viewer_selected_message_ids TEXT"))
+                        conn.commit()
+                    print("✓ 'viewer_selected_message_ids' column added successfully")
+                    print("\n마이그레이션이 완료되었습니다!")
+                else:
+                    print("'viewer_selected_message_ids' column already exists")
+            
+        except Exception as e:
+            print(f"마이그레이션 중 오류 발생: {e}")
+            import traceback
+            traceback.print_exc()
+            raise
+
+if __name__ == '__main__':
+    migrate_viewer_multiple_messages()
+

reset_menu_to_default.py

@@ -0,0 +1,15 @@
+from app import create_app
+from app.database import db, SystemConfig
+import json
+from app.routes import get_default_admin_menu
+
+def reset_menu():
+    app = create_app()
+    with app.app_context():
+        default_menu = get_default_admin_menu()
+        SystemConfig.set_config('admin_menu_config_v1', json.dumps(default_menu, ensure_ascii=False, indent=2))
+        print("Menu configuration has been COMPLETELY RESET to defaults.")
+
+if __name__ == "__main__":
+    reset_menu()
+

run.py

@@ -2,11 +2,19 @@ import sys
 import os
 import logging
 from logging.handlers import RotatingFileHandler
+import asyncio
 
 # UTF-8 인코딩 강제 설정 (Windows cp949 오류 방지)
 if sys.platform == 'win32':
     sys.stdout.reconfigure(encoding='utf-8')
     sys.stderr.reconfigure(encoding='utf-8')
+    # Windows에서 asyncio와 httpx/Flask 간의 'Event loop is closed' 에러 방지
+    try:
+        import nest_asyncio
+        nest_asyncio.apply()
+        asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
+    except:
+        pass
 
 from app import create_app
 
@@ -23,22 +31,28 @@ file_handler.setFormatter(logging.Formatter(
 ))
 file_handler.setLevel(logging.INFO)
 
-# 콘솔 핸들러 설정
+# 콘솔 핸들러 설정 (터미널에 출력)
 console_handler = logging.StreamHandler(sys.stdout)
 console_handler.setFormatter(logging.Formatter(
     '%(asctime)s - %(name)s - %(levelname)s - %(message)s'
 ))
-console_handler.setLevel(logging.INFO)
+console_handler.setLevel(logging.DEBUG)  # DEBUG 레벨까지 출력하여 모든 로그 확인
 
 # Flask 앱 로거 설정
-app.logger.setLevel(logging.INFO)
+app.logger.setLevel(logging.DEBUG)
 app.logger.addHandler(file_handler)
 app.logger.addHandler(console_handler)
 
 # 루트 로거 설정 (모든 로거에 적용)
 root_logger = logging.getLogger()
-root_logger.setLevel(logging.INFO)
+root_logger.setLevel(logging.DEBUG)
 root_logger.addHandler(console_handler)
+# 기존 핸들러 제거 후 새로 추가 (중복 방지)
+for handler in root_logger.handlers[:]:
+    if isinstance(handler, logging.StreamHandler) and handler is not console_handler:
+        root_logger.removeHandler(handler)
+if console_handler not in root_logger.handlers:
+    root_logger.addHandler(console_handler)
 
 # Werkzeug 로거 설정 (HTTP 요청 로깅)
 werkzeug_logger = logging.getLogger('werkzeug')

static/lib/js/react.min.js

@@ -0,0 +1,31 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+(function(){'use strict';(function(c,x){"object"===typeof exports&&"undefined"!==typeof module?x(exports):"function"===typeof define&&define.amd?define(["exports"],x):(c=c||self,x(c.React={}))})(this,function(c){function x(a){if(null===a||"object"!==typeof a)return null;a=V&&a[V]||a["@@iterator"];return"function"===typeof a?a:null}function w(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Y(){}function K(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Z(a,b,
+e){var m,d={},c=null,h=null;if(null!=b)for(m in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(c=""+b.key),b)aa.call(b,m)&&!ba.hasOwnProperty(m)&&(d[m]=b[m]);var l=arguments.length-2;if(1===l)d.children=e;else if(1<l){for(var f=Array(l),k=0;k<l;k++)f[k]=arguments[k+2];d.children=f}if(a&&a.defaultProps)for(m in l=a.defaultProps,l)void 0===d[m]&&(d[m]=l[m]);return{$$typeof:y,type:a,key:c,ref:h,props:d,_owner:L.current}}function oa(a,b){return{$$typeof:y,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}
+function M(a){return"object"===typeof a&&null!==a&&a.$$typeof===y}function pa(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}function N(a,b){return"object"===typeof a&&null!==a&&null!=a.key?pa(""+a.key):b.toString(36)}function B(a,b,e,m,d){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var h=!1;if(null===a)h=!0;else switch(c){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case y:case qa:h=!0}}if(h)return h=a,d=d(h),a=""===m?"."+
+N(h,0):m,ca(d)?(e="",null!=a&&(e=a.replace(da,"$&/")+"/"),B(d,b,e,"",function(a){return a})):null!=d&&(M(d)&&(d=oa(d,e+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(da,"$&/")+"/")+a)),b.push(d)),1;h=0;m=""===m?".":m+":";if(ca(a))for(var l=0;l<a.length;l++){c=a[l];var f=m+N(c,l);h+=B(c,b,e,f,d)}else if(f=x(a),"function"===typeof f)for(a=f.call(a),l=0;!(c=a.next()).done;)c=c.value,f=m+N(c,l++),h+=B(c,b,e,f,d);else if("object"===c)throw b=String(a),Error("Objects are not valid as a React child (found: "+
+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}function C(a,b,e){if(null==a)return a;var c=[],d=0;B(a,c,"","",function(a){return b.call(e,a,d++)});return c}function ra(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b});-1===a._status&&(a._status=
+0,a._result=b)}if(1===a._status)return a._result.default;throw a._result;}function O(a,b){var e=a.length;a.push(b);a:for(;0<e;){var c=e-1>>>1,d=a[c];if(0<D(d,b))a[c]=b,a[e]=d,e=c;else break a}}function p(a){return 0===a.length?null:a[0]}function E(a){if(0===a.length)return null;var b=a[0],e=a.pop();if(e!==b){a[0]=e;a:for(var c=0,d=a.length,k=d>>>1;c<k;){var h=2*(c+1)-1,l=a[h],f=h+1,g=a[f];if(0>D(l,e))f<d&&0>D(g,l)?(a[c]=g,a[f]=e,c=f):(a[c]=l,a[h]=e,c=h);else if(f<d&&0>D(g,e))a[c]=g,a[f]=e,c=f;else break a}}return b}
+function D(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}function P(a){for(var b=p(r);null!==b;){if(null===b.callback)E(r);else if(b.startTime<=a)E(r),b.sortIndex=b.expirationTime,O(q,b);else break;b=p(r)}}function Q(a){z=!1;P(a);if(!u)if(null!==p(q))u=!0,R(S);else{var b=p(r);null!==b&&T(Q,b.startTime-a)}}function S(a,b){u=!1;z&&(z=!1,ea(A),A=-1);F=!0;var c=k;try{P(b);for(n=p(q);null!==n&&(!(n.expirationTime>b)||a&&!fa());){var m=n.callback;if("function"===typeof m){n.callback=null;
+k=n.priorityLevel;var d=m(n.expirationTime<=b);b=v();"function"===typeof d?n.callback=d:n===p(q)&&E(q);P(b)}else E(q);n=p(q)}if(null!==n)var g=!0;else{var h=p(r);null!==h&&T(Q,h.startTime-b);g=!1}return g}finally{n=null,k=c,F=!1}}function fa(){return v()-ha<ia?!1:!0}function R(a){G=a;H||(H=!0,I())}function T(a,b){A=ja(function(){a(v())},b)}function ka(a){throw Error("act(...) is not supported in production builds of React.");}var y=Symbol.for("react.element"),qa=Symbol.for("react.portal"),sa=Symbol.for("react.fragment"),
+ta=Symbol.for("react.strict_mode"),ua=Symbol.for("react.profiler"),va=Symbol.for("react.provider"),wa=Symbol.for("react.context"),xa=Symbol.for("react.forward_ref"),ya=Symbol.for("react.suspense"),za=Symbol.for("react.memo"),Aa=Symbol.for("react.lazy"),V=Symbol.iterator,X={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,m){},enqueueSetState:function(a,b,c,m){}},la=Object.assign,W={};w.prototype.isReactComponent={};w.prototype.setState=function(a,
+b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState")};w.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};Y.prototype=w.prototype;var t=K.prototype=new Y;t.constructor=K;la(t,w.prototype);t.isPureReactComponent=!0;var ca=Array.isArray,aa=Object.prototype.hasOwnProperty,L={current:null},
+ba={key:!0,ref:!0,__self:!0,__source:!0},da=/\/+/g,g={current:null},J={transition:null};if("object"===typeof performance&&"function"===typeof performance.now){var Ba=performance;var v=function(){return Ba.now()}}else{var ma=Date,Ca=ma.now();v=function(){return ma.now()-Ca}}var q=[],r=[],Da=1,n=null,k=3,F=!1,u=!1,z=!1,ja="function"===typeof setTimeout?setTimeout:null,ea="function"===typeof clearTimeout?clearTimeout:null,na="undefined"!==typeof setImmediate?setImmediate:null;"undefined"!==typeof navigator&&
+void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var H=!1,G=null,A=-1,ia=5,ha=-1,U=function(){if(null!==G){var a=v();ha=a;var b=!0;try{b=G(!0,a)}finally{b?I():(H=!1,G=null)}}else H=!1};if("function"===typeof na)var I=function(){na(U)};else if("undefined"!==typeof MessageChannel){t=new MessageChannel;var Ea=t.port2;t.port1.onmessage=U;I=function(){Ea.postMessage(null)}}else I=function(){ja(U,0)};t={ReactCurrentDispatcher:g,
+ReactCurrentOwner:L,ReactCurrentBatchConfig:J,Scheduler:{__proto__:null,unstable_ImmediatePriority:1,unstable_UserBlockingPriority:2,unstable_NormalPriority:3,unstable_IdlePriority:5,unstable_LowPriority:4,unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=k;k=a;try{return b()}finally{k=c}},unstable_next:function(a){switch(k){case 1:case 2:case 3:var b=3;break;default:b=k}var c=k;k=b;try{return a()}finally{k=c}},unstable_scheduleCallback:function(a,
+b,c){var e=v();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?e+c:e):c=e;switch(a){case 1:var d=-1;break;case 2:d=250;break;case 5:d=1073741823;break;case 4:d=1E4;break;default:d=5E3}d=c+d;a={id:Da++,callback:b,priorityLevel:a,startTime:c,expirationTime:d,sortIndex:-1};c>e?(a.sortIndex=c,O(r,a),null===p(q)&&a===p(r)&&(z?(ea(A),A=-1):z=!0,T(Q,c-e))):(a.sortIndex=d,O(q,a),u||F||(u=!0,R(S)));return a},unstable_cancelCallback:function(a){a.callback=null},unstable_wrapCallback:function(a){var b=
+k;return function(){var c=k;k=b;try{return a.apply(this,arguments)}finally{k=c}}},unstable_getCurrentPriorityLevel:function(){return k},unstable_shouldYield:fa,unstable_requestPaint:function(){},unstable_continueExecution:function(){u||F||(u=!0,R(S))},unstable_pauseExecution:function(){},unstable_getFirstCallbackNode:function(){return p(q)},get unstable_now(){return v},unstable_forceFrameRate:function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):
+ia=0<a?Math.floor(1E3/a):5},unstable_Profiling:null}};c.Children={map:C,forEach:function(a,b,c){C(a,function(){b.apply(this,arguments)},c)},count:function(a){var b=0;C(a,function(){b++});return b},toArray:function(a){return C(a,function(a){return a})||[]},only:function(a){if(!M(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};c.Component=w;c.Fragment=sa;c.Profiler=ua;c.PureComponent=K;c.StrictMode=ta;c.Suspense=ya;c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=
+t;c.act=ka;c.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var e=la({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=L.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var l=a.type.defaultProps;for(f in b)aa.call(b,f)&&!ba.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==l?l[f]:b[f])}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){l=
+Array(f);for(var g=0;g<f;g++)l[g]=arguments[g+2];e.children=l}return{$$typeof:y,type:a.type,key:d,ref:k,props:e,_owner:h}};c.createContext=function(a){a={$$typeof:wa,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:va,_context:a};return a.Consumer=a};c.createElement=Z;c.createFactory=function(a){var b=Z.bind(null,a);b.type=a;return b};c.createRef=function(){return{current:null}};c.forwardRef=function(a){return{$$typeof:xa,
+render:a}};c.isValidElement=M;c.lazy=function(a){return{$$typeof:Aa,_payload:{_status:-1,_result:a},_init:ra}};c.memo=function(a,b){return{$$typeof:za,type:a,compare:void 0===b?null:b}};c.startTransition=function(a,b){b=J.transition;J.transition={};try{a()}finally{J.transition=b}};c.unstable_act=ka;c.useCallback=function(a,b){return g.current.useCallback(a,b)};c.useContext=function(a){return g.current.useContext(a)};c.useDebugValue=function(a,b){};c.useDeferredValue=function(a){return g.current.useDeferredValue(a)};
+c.useEffect=function(a,b){return g.current.useEffect(a,b)};c.useId=function(){return g.current.useId()};c.useImperativeHandle=function(a,b,c){return g.current.useImperativeHandle(a,b,c)};c.useInsertionEffect=function(a,b){return g.current.useInsertionEffect(a,b)};c.useLayoutEffect=function(a,b){return g.current.useLayoutEffect(a,b)};c.useMemo=function(a,b){return g.current.useMemo(a,b)};c.useReducer=function(a,b,c){return g.current.useReducer(a,b,c)};c.useRef=function(a){return g.current.useRef(a)};
+c.useState=function(a){return g.current.useState(a)};c.useSyncExternalStore=function(a,b,c){return g.current.useSyncExternalStore(a,b,c)};c.useTransition=function(){return g.current.useTransition()};c.version="18.3.1"});
+})();

templates/admin_webtoon_milestone_producer_manager.html

@@ -340,3 +340,12 @@
 </body>
 </html>
 
+
+
+
+
+
+
+
+
+

templates/creation_base.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}웹소설 창작 - SOYMEDIA{% endblock %}</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">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8f9fa;
+            --text-primary: #202124;
+            --text-secondary: #5f6368;
+            --accent: #1a73e8;
+            --border: #dadce0;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            margin: 0;
+            padding: 0;
+        }
+        /* 기존 관리자 페이지 디자인 통일을 위한 추가 스타일 */
+        .admin-nav {
+            position: sticky;
+            top: 0;
+            z-index: 10000; /* 최상단 고정 */
+        }
+        /* Bootstrap 드롭다운과 기존 메뉴 스타일 충돌 해결 */
+        .admin-nav .dropdown-menu {
+            display: block !important;
+            opacity: 0 !important;
+            visibility: hidden !important;
+            transition: all 0.2s ease !important;
+            pointer-events: none !important;
+            margin: 0 !important;
+            border: 1px solid #dadce0 !important;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+            transform: translateY(-8px) !important;
+            position: absolute !important;
+            z-index: 10002 !important;
+            background: white !important;
+        }
+        .admin-nav .dropdown:hover .dropdown-menu {
+            opacity: 1 !important;
+            visibility: visible !important;
+            transform: translateY(0) !important;
+            pointer-events: auto !important;
+        }
+        .admin-nav .dropdown-toggle::after {
+            display: inline-block !important;
+            margin-left: .255em !important;
+            vertical-align: .255em !important;
+            content: "▼" !important; /* Bootstrap 기본 아이콘 제거 및 통일 */
+            border: none !important;
+            font-size: 10px !important;
+        }
+        /* 네비게이션 항목 간격 및 폰트 크기 조정 */
+        .admin-nav .dropdown-toggle, .admin-nav .btn {
+            font-family: inherit;
+            font-size: 14px;
+            font-weight: 500;
+        }
+    </style>
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    {% set admin_nav_title = '창작 플랫폼' %}
+    {% set admin_nav_icon = '✍️' %}
+    {% include '_admin_nav.html' %}
+
+    {% block content %}{% endblock %}
+
+    <!-- Bootstrap Bundle JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>
+

templates/novel_analysis.html

@@ -0,0 +1,626 @@
+{% extends "creation_base.html" %}
+
+{% block title %}{{ project.title }} - 분석 확인 - SOYMEDIA{% endblock %}
+
+{% block extra_css %}
+<style>
+    body {
+        background-color: #f4f7f6;
+    }
+    .analysis-container {
+        max-width: 1200px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+    }
+    .stats-card {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+        padding: 1.5rem;
+        height: 100%;
+        border: 1px solid rgba(0,0,0,0.05);
+    }
+    .section-title {
+        font-weight: 800;
+        color: #2d3748;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 1.5rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 2px solid #edf2f7;
+    }
+    .fact-tag {
+        background: #ebf8ff;
+        color: #2b6cb0;
+        padding: 0.5rem 1rem;
+        border-radius: 10px;
+        font-size: 0.9rem;
+        margin-bottom: 0.75rem;
+        border-left: 4px solid #3182ce;
+    }
+    .context-box {
+        background: #fffaf0;
+        border: 1px solid #feebc8;
+        padding: 1.25rem;
+        border-radius: 12px;
+        color: #744210;
+        line-height: 1.7;
+        font-family: 'Noto Serif KR', serif;
+    }
+    .badge-mode {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+        border-radius: 20px;
+    }
+    .nav-tabs .nav-link {
+        border: none;
+        color: #718096;
+        font-weight: 600;
+        padding: 1rem 1.5rem;
+    }
+    .nav-tabs .nav-link.active {
+        color: #3182ce;
+        border-bottom: 3px solid #3182ce;
+        background: transparent;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="analysis-container">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb mb-1">
+                    <li class="breadcrumb-item"><a href="/creation/webnovel">대시보드</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">분석</li>
+                </ol>
+            </nav>
+            <h2 class="fw-bold mb-0">
+                <i class="fas fa-microscope text-info me-2"></i>{{ project.title }}
+                <span class="badge badge-mode {{ 'bg-success-subtle text-success' if project.mode == 'CREATIVE' else 'bg-info-subtle text-info' }} ms-2">
+                    {{ project.mode }}
+                </span>
+            </h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="d-flex align-items-center gap-2 bg-white px-3 py-2 rounded-pill shadow-sm border">
+                <label for="modelSelect" class="small fw-bold text-muted mb-0"><i class="fas fa-robot me-1"></i>분석 모델:</label>
+                <select id="modelSelect" class="form-select form-select-sm border-0 bg-transparent shadow-none" style="width: 180px; font-size: 0.85rem; font-weight: 600;">
+                    <option value="">모델 로딩 중...</option>
+                </select>
+                <button class="btn btn-sm text-muted p-0 hover-rotate" id="refreshModels" title="모델 새로고침">
+                    <i class="fas fa-sync-alt"></i>
+                </button>
+            </div>
+            <a href="/creation/workspace/{{ project.project_id }}" class="btn btn-primary shadow-sm rounded-pill px-4">
+                <i class="fas fa-pen-nib me-1"></i> 집필 계속하기
+            </a>
+        </div>
+    </div>
+
+    <ul class="nav nav-tabs mb-4" id="analysisTab" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="init-tab" data-bs-toggle="tab" data-bs-target="#init" type="button" role="tab">초기 설정</button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab">전체 요약</button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="facts-tab" data-bs-toggle="tab" data-bs-target="#facts" type="button" role="tab">캐릭터/설정 (Facts)</button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="context-tab" data-bs-toggle="tab" data-bs-target="#context" type="button" role="tab">스토리 문맥 (Zep)</button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="writer-prompt-tab" data-bs-toggle="tab" data-bs-target="#writer-prompt" type="button" role="tab">작가 지침 (Prompt)</button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="prompt-tab" data-bs-toggle="tab" data-bs-target="#prompt" type="button" role="tab">질문 조건 확인</button>
+        </li>
+    </ul>
+
+    <div class="tab-content" id="analysisTabContent">
+        <!-- 초기 ���정 -->
+        <div class="tab-pane fade show active" id="init" role="tabpanel">
+            <div class="stats-card">
+                <div class="mb-3 border-bottom pb-2">
+                    <h5 class="section-title mb-0 border-0 pb-0"><i class="fas fa-cog text-primary"></i> 세계관 및 프로젝트 초기 설정</h5>
+                </div>
+                <p class="text-muted small mb-3">작품의 배경, 핵심 로그라인, 주요 캐릭터의 기본 설정을 입력해주세요. AI가 이를 분석하여 기본 지식으로 활용합니다.</p>
+                <form id="initialSettingsForm">
+                    <textarea id="initialSettings" class="form-control mb-3" rows="12" placeholder="예: 2153년 네오-서울, 지상은 방사능으로 덮였고 인류는 하층부 언더쉘에서 거주한다. 주인공 미카는 기억을 잃은 스크래퍼로... ">{{ project.initial_settings or '' }}</textarea>
+                    
+                    <!-- 분석 단계 표시 -->
+                    <div id="analysisProgress" class="mb-3" style="display: none;">
+                        <div class="p-3 bg-light rounded-3 border">
+                            <h6 class="fw-bold mb-3 small text-uppercase"><i class="fas fa-tasks me-2"></i>분석 진행 상황</h6>
+                            <div class="d-flex flex-column gap-2">
+                                <div id="step-parent" class="d-flex align-items-center gap-2 text-muted small">
+                                    <i class="fas fa-circle-notch fa-spin step-icon" style="display: none;"></i>
+                                    <i class="fas fa-check-circle text-success step-check" style="display: none;"></i>
+                                    <i class="far fa-circle step-pending"></i>
+                                    <span>단계 1: 전체 요약 생성 (Parent Chunk)</span>
+                                </div>
+                                <div id="step-chunks" class="d-flex align-items-center gap-2 text-muted small">
+                                    <i class="fas fa-circle-notch fa-spin step-icon" style="display: none;"></i>
+                                    <i class="fas fa-check-circle text-success step-check" style="display: none;"></i>
+                                    <i class="far fa-circle step-pending"></i>
+                                    <span>단계 2: 지식 베이스 구축 (Chunks)</span>
+                                </div>
+                                <div id="step-graph" class="d-flex align-items-center gap-2 text-muted small">
+                                    <i class="fas fa-circle-notch fa-spin step-icon" style="display: none;"></i>
+                                    <i class="fas fa-check-circle text-success step-check" style="display: none;"></i>
+                                    <i class="far fa-circle step-pending"></i>
+                                    <span>단계 3: 지식 그래프 추출 (GraphRAG)</span>
+                                </div>
+                                <div id="step-final" class="d-flex align-items-center gap-2 text-muted small">
+                                    <i class="fas fa-circle-notch fa-spin step-icon" style="display: none;"></i>
+                                    <i class="fas fa-check-circle text-success step-check" style="display: none;"></i>
+                                    <i class="far fa-circle step-pending"></i>
+                                    <span>단계 4: 캐릭터/설정 사실 추출 (Mem0)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-flex justify-content-end">
+                        <button type="button" class="btn btn-success" id="saveInitialSettings">
+                            <i class="fas fa-save me-1"></i> 저장 및 분석 시작
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- 전체 요약 -->
+        <div class="tab-pane fade" id="summary" role="tabpanel">
+            <div class="row g-4">
+                <div class="col-md-8">
+                    {% if parent_chunk %}
+                    <div class="stats-card mb-4">
+                        <h5 class="section-title"><i class="fas fa-atlas text-primary"></i> Parent Chunk 분석 (세계관/스토리)</h5>
+                        <div class="mb-4">
+                            <h6 class="fw-bold text-primary small"><i class="fas fa-globe-asia me-1"></i> 세계관 및 배경</h6>
+                            <div class="p-3 bg-light rounded-3 border-start border-primary border-4">
+                                {{ parent_chunk.world_view | replace('\n', '<br>') | safe }}
+                            </div>
+                        </div>
+                        <div class="mb-4">
+                            <h6 class="fw-bold text-success small"><i class="fas fa-book-open me-1"></i> 전체 줄거리</h6>
+                            <div class="p-3 bg-light rounded-3 border-start border-success border-4">
+                                {{ parent_chunk.story | replace('\n', '<br>') | safe }}
+                            </div>
+                        </div>
+                        {% if parent_chunk.episodes %}
+                        <div class="mb-0">
+                            <h6 class="fw-bold text-info small"><i class="fas fa-list-ol me-1"></i> 주요 에피소드 구조</h6>
+                            <div class="p-3 bg-light rounded-3 border-start border-info border-4">
+                                {{ parent_chunk.episodes | replace('\n', '<br>') | safe }}
+                            </div>
+                        </div>
+                        {% endif %}
+                    </div>
+                    {% endif %}
+
+                    <div class="stats-card">
+                        <h5 class="section-title"><i class="fas fa-align-left text-primary"></i> 현재 집필 문맥 요약 (Zep)</h5>
+                        <div class="context-box whitespace-pre-wrap">
+                            {{ context | default("아직 충분한 대화가 이루어지지 않아 요약된 정보가 없습니다.") }}
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="stats-card">
+                        <h5 class="section-title"><i class="fas fa-database text-warning"></i> 데이터 통계</h5>
+                        <div class="d-flex flex-column gap-3">
+                            <div class="p-3 bg-light rounded-3">
+                                <div class="small text-muted">수집된 설정(Facts)</div>
+                                <div class="h3 fw-bold mb-0 text-warning">{{ facts|length }}</div>
+                            </div>
+                            <div class="p-3 bg-light rounded-3">
+                                <div class="small text-muted">추출된 엔티티(Graph)</div>
+                                <div class="h3 fw-bold mb-0 text-primary">{{ graph_entities|length }}</div>
+                            </div>
+                            <div class="p-3 bg-light rounded-3">
+                                <div class="small text-muted">파악된 관계(Graph)</div>
+                                <div class="h3 fw-bold mb-0 text-success">{{ graph_relationships|length }}</div>
+                            </div>
+                            <div class="p-3 bg-light rounded-3">
+                                <div class="small text-muted">창작 모드</div>
+                                <div class="fw-bold">{{ project.mode }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 캐릭터/설정 -->
+        <div class="tab-pane fade" id="facts" role="tabpanel">
+            <div class="row g-4">
+                <div class="col-md-7">
+                    <!-- GraphRAG 엔티티 정보 -->
+                    <div class="stats-card mb-4">
+                        <h5 class="section-title"><i class="fas fa-project-diagram text-primary"></i> GraphRAG: 주요 엔티티 및 설정</h5>
+                        {% if graph_entities %}
+                            <div class="d-flex flex-column gap-3">
+                                {% for entity in graph_entities %}
+                                <div class="p-3 bg-white border rounded-3 shadow-sm">
+                                    <div class="d-flex justify-content-between align-items-center mb-2">
+                                        <h6 class="fw-bold mb-0 text-dark">{{ entity.name }}</h6>
+                                        <span class="badge {{ 'bg-primary' if entity.entity_type == 'CHARACTER' else 'bg-success' if entity.entity_type == 'PLACE' else 'bg-info' }} rounded-pill small">
+                                            {{ entity.entity_type }}
+                                        </span>
+                                    </div>
+                                    <p class="small text-muted mb-0">{{ entity.description }}</p>
+                                </div>
+                                {% endfor %}
+                            </div>
+                        {% else %}
+                            <p class="text-center py-4 text-muted small">추출된 엔티티 정보가 없습니다. 분석을 시작해주세요.</p>
+                        {% endif %}
+                    </div>
+
+                    <!-- GraphRAG 관계 정보 -->
+                    {% if graph_relationships %}
+                    <div class="stats-card">
+                        <h5 class="section-title"><i class="fas fa-link text-success"></i> 인물 및 공간 관계도</h5>
+                        <div class="list-group list-group-flush border rounded-3 overflow-hidden">
+                            {% for rel in graph_relationships %}
+                            <div class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
+                                <div class="fw-bold text-primary">{{ rel.source }}</div>
+                                <div class="text-muted small"><i class="fas fa-arrow-right"></i></div>
+                                <div class="px-2 py-1 bg-light rounded small border">{{ rel.relationship_type }}</div>
+                                <div class="text-muted small"><i class="fas fa-arrow-right"></i></div>
+                                <div class="fw-bold text-success">{{ rel.target }}</div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div class="col-md-5">
+                    <!-- Mem0 Facts -->
+                    <div class="stats-card">
+                        <h5 class="section-title"><i class="fas fa-id-card text-warning"></i> Mem0: 개별 사실(Facts) 추출</h5>
+                        <div class="d-flex flex-column gap-2">
+                            {% if facts %}
+                                {% for fact in facts %}
+                                <div class="fact-tag mb-0">
+                                    <i class="fas fa-check-circle me-2 opacity-50"></i>{{ fact }}
+                                </div>
+                                {% endfor %}
+                            {% else %}
+                                <div class="text-center py-5 text-muted">
+                                    <i class="fas fa-comment-slash fa-2x mb-2 opacity-25"></i>
+                                    <p class="small">에이전트와의 대화가 쌓이면 자동으로 추가 설정이 추출됩니다.</p>
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 스토리 문맥 -->
+        <div class="tab-pane fade" id="context" role="tabpanel">
+            <div class="stats-card">
+                <h5 class="section-title"><i class="fas fa-brain text-info"></i> 에이전트 인지 문맥 (Long-term)</h5>
+                <div class="p-4 bg-dark text-success rounded-3 font-monospace" style="min-height: 200px; font-size: 0.9rem;">
+                    <div class="mb-2">// Zep Memory Retrieval Stream...</div>
+                    {{ context }}
+                </div>
+                <div class="mt-3 text-muted small">
+                    <i class="fas fa-info-circle me-1"></i> 이 데이터는 AI 에이전트가 다음 문장을 생성할 때 참고하는 핵심 기억 장치입니다.
+                </div>
+            </div>
+        </div>
+
+        <!-- 작가 지침 (Prompt) -->
+        <div class="tab-pane fade" id="writer-prompt" role="tabpanel">
+            <div class="stats-card">
+                <div class="mb-3 border-bottom pb-2">
+                    <h5 class="section-title mb-0 border-0 pb-0"><i class="fas fa-pen-fancy text-primary"></i> 작가 전용 시스템 지침 (Custom Prompt)</h5>
+                </div>
+                <p class="text-muted small mb-3">
+                    에이전트에게 소설 작성 시 반드시 지켜야 할 **스타일, 문체, 주의사항** 등을 입력하세요. 
+                    이 지침은 다른 설정들보다 우선적으로 고려됩니다.
+                </p>
+                <form id="customPromptForm">
+                    <textarea id="customSystemPrompt" class="form-control mb-3" rows="12" placeholder="예: 
+- 문장은 간결하게 작성하고 대화 위주로 전개해줘.
+- 주인공의 심리 묘사는 1인칭 주인공 시점으로 항상 유지해줘.
+- 고유 명사가 나올 때는 뒤에 괄호로 간단한 설명을 붙여줘.">{{ project.custom_system_prompt or '' }}</textarea>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="text-muted small">
+                            <i class="fas fa-info-circle me-1"></i> 저장 시 즉시 에이전트의 답변 방식에 반영됩니다.
+                        </div>
+                        <button type="button" class="btn btn-primary shadow-sm" id="saveCustomPrompt">
+                            <i class="fas fa-check-circle me-1"></i> 지침 저장하기
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- 질문 조건 확인 -->
+        <div class="tab-pane fade" id="prompt" role="tabpanel">
+            <div class="stats-card">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h5 class="section-title mb-0"><i class="fas fa-code text-primary"></i> 에이전트에게 전달되는 시스템 프롬프트</h5>
+                    <button class="btn btn-sm btn-outline-primary" id="refreshPrompt">
+                        <i class="fas fa-sync-alt me-1"></i> 새로고침
+                    </button>
+                </div>
+                <div class="mb-3">
+                    <p class="text-muted small mb-2">
+                        <i class="fas fa-info-circle me-1"></i> 
+                        이 내용은 workspace에서 질문할 때 AI 에이전트에게 전달되는 모든 조건과 컨텍스트입니다.
+                    </p>
+                </div>
+                <div id="promptContent" class="p-4 bg-light rounded-3 border" style="min-height: 300px; max-height: 600px; overflow-y: auto;">
+                    <div class="text-center text-muted py-5">
+                        <i class="fas fa-spinner fa-spin fa-2x mb-3"></i>
+                        <p>로딩 중...</p>
+                    </div>
+                </div>
+                <div class="mt-3 text-muted small">
+                    <i class="fas fa-lightbulb me-1"></i> 
+                    이 프롬프트는 프로젝트의 초기 설정, Mem0 Facts, Zep Context를 종합하여 자동으로 생성됩니다.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// 모델 목록 로드
+async function loadModels() {
+    const modelSelect = document.getElementById('modelSelect');
+    const refreshBtn = document.getElementById('refreshModels');
+    
+    refreshBtn.disabled = true;
+    const icon = refreshBtn.querySelector('i');
+    icon.classList.add('fa-spin');
+    
+    try {
+        // workspace와 동일하게 ?all=true 사용
+        const response = await fetch('/api/ollama/models?all=true');
+        const data = await response.json();
+        
+        modelSelect.innerHTML = '<option value="">모델 선택...</option>';
+        
+        if (data.models && data.models.length > 0) {
+            // Gemini 모델 그룹
+            const geminiModels = data.models.filter(m => m.type === 'gemini');
+            if (geminiModels.length > 0) {
+                const group = document.createElement('optgroup');
+                group.label = '✨ Gemini 모델';
+                geminiModels.forEach(m => {
+                    const opt = document.createElement('option');
+                    opt.value = m.name;
+                    opt.textContent = m.name.startsWith('gemini:') ? m.name.substring(7) : m.name;
+                    group.appendChild(opt);
+                });
+                modelSelect.appendChild(group);
+            }
+            
+            // Ollama 모델 그룹
+            const ollamaModels = data.models.filter(m => m.type !== 'gemini');
+            if (ollamaModels.length > 0) {
+                const group = document.createElement('optgroup');
+                group.label = '🤖 Ollama 모델';
+                ollamaModels.forEach(m => {
+                    const opt = document.createElement('option');
+                    opt.value = m.name;
+                    opt.textContent = m.name;
+                    group.appendChild(opt);
+                });
+                modelSelect.appendChild(group);
+            }
+            
+            // workspace와 동일한 localStorage 키 'lastWriterModel' 사용
+            const lastModel = localStorage.getItem('lastWriterModel');
+            if (lastModel) {
+                modelSelect.value = lastModel;
+            } else if (data.models.length > 0) {
+                // 기본값 설정 (Gemini 우선)
+                const defaultModel = data.models.find(m => m.name.includes('gemini')) || data.models[0];
+                modelSelect.value = defaultModel.name;
+            }
+        }
+    } catch (error) {
+        console.error('모델 로드 오류:', error);
+        modelSelect.innerHTML = '<option value="">로드 실패</option>';
+    } finally {
+        refreshBtn.disabled = false;
+        icon.classList.remove('fa-spin');
+    }
+}
+
+// 모델 선택 변경 시 저장
+document.getElementById('modelSelect').addEventListener('change', function() {
+    localStorage.setItem('lastWriterModel', this.value);
+});
+
+document.getElementById('refreshModels').addEventListener('click', loadModels);
+
+// 초기화 시 모델 로드
+document.addEventListener('DOMContentLoaded', loadModels);
+
+// 시스템 프롬프트 로드 함수
+async function loadSystemPrompt() {
+    const promptContent = document.getElementById('promptContent');
+    if (!promptContent) return;
+    
+    try {
+        const response = await fetch('/creation/api/projects/{{ project.project_id }}/system-prompt');
+        const data = await response.json();
+        
+        if (response.ok && data.system_prompt) {
+            // 프롬프트를 보기 좋게 포맷팅
+            const formatted = data.system_prompt
+                .replace(/\n/g, '<br>')
+                .replace(/\[([^\]]+)\]/g, '<strong class="text-primary">[$1]</strong>')
+                .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+            
+            promptContent.innerHTML = `
+                <div class="mb-3 p-3 bg-white rounded border-start border-primary border-4">
+                    <div class="small text-muted mb-1">프로젝트 정보</div>
+                    <div class="fw-bold">${data.project_title || '{{ project.title }}'}</div>
+                    <div class="small text-muted mt-1">모드: ${data.project_mode || '{{ project.mode }}'}</div>
+                </div>
+                <div class="font-monospace small" style="line-height: 1.8; white-space: pre-wrap;">${formatted}</div>
+            `;
+        } else {
+            promptContent.innerHTML = `
+                <div class="text-center text-danger py-5">
+                    <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
+                    <p>프롬프트를 불러올 수 없습니다: ${data.error || '알 수 없는 오류'}</p>
+                </div>
+            `;
+        }
+    } catch (error) {
+        console.error('프롬프트 로드 오류:', error);
+        promptContent.innerHTML = `
+            <div class="text-center text-danger py-5">
+                <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
+                <p>서버 통신 실패</p>
+            </div>
+        `;
+    }
+}
+
+// 프롬프트 탭이 활성화될 때 로드
+document.getElementById('prompt-tab')?.addEventListener('shown.bs.tab', function() {
+    loadSystemPrompt();
+});
+
+// 새로고침 버튼
+document.getElementById('refreshPrompt')?.addEventListener('click', function() {
+    const icon = this.querySelector('i');
+    icon.classList.add('fa-spin');
+    loadSystemPrompt().finally(() => {
+        icon.classList.remove('fa-spin');
+    });
+});
+
+// 단계 업데이트 함수
+function updateStep(stepId, status) {
+    const el = document.getElementById('step-' + stepId);
+    if (!el) return;
+    
+    const icon = el.querySelector('.step-icon');
+    const check = el.querySelector('.step-check');
+    const pending = el.querySelector('.step-pending');
+    
+    icon.style.display = 'none';
+    check.style.display = 'none';
+    pending.style.display = 'none';
+    el.classList.remove('text-primary', 'text-success', 'fw-bold');
+    
+    if (status === 'running') {
+        icon.style.display = 'inline-block';
+        el.classList.add('text-primary', 'fw-bold');
+    } else if (status === 'done') {
+        check.style.display = 'inline-block';
+        el.classList.add('text-success');
+    } else {
+        pending.style.display = 'inline-block';
+    }
+}
+
+document.getElementById('saveInitialSettings').addEventListener('click', async function() {
+    const settings = document.getElementById('initialSettings').value;
+    const model = document.getElementById('modelSelect').value;
+    const btn = this;
+    const progressArea = document.getElementById('analysisProgress');
+    
+    if (!settings.trim()) {
+        alert('내용을 입력해주세요.');
+        return;
+    }
+    
+    if (!model) {
+        alert('분석에 사용할 AI 모델을 선택해주세요.');
+        return;
+    }
+    
+    btn.disabled = true;
+    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> 분석 중...';
+    progressArea.style.display = 'block';
+    
+    // 단계 초기화
+    ['parent', 'chunks', 'graph', 'final'].forEach(s => updateStep(s, 'pending'));
+    
+    try {
+        // 1. 설정 저장 및 분석 시작 (Backend에서 모든 단계를 순차적으로 처리하거나, 첫 단계를 시작)
+        updateStep('parent', 'running');
+        const response = await fetch('/creation/api/projects/{{ project.project_id }}/initial-settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings, model })
+        });
+        
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || '저장 및 분석 오류');
+        
+        updateStep('parent', 'done');
+        
+        // 2~4단계는 백엔드에서 단일 요청으로 처리할 수도 있고, 프론트에서 순차적으로 부를 수도 있습니다.
+        // 여기서는 백엔드가 모든 처리를 한 번에 하고 결과를 돌려주는 것으로 가정합니다.
+        // (만약 단계별로 나누고 싶다면 여기서 추가 fetch 호출 가능)
+        
+        updateStep('chunks', 'done');
+        updateStep('graph', 'done');
+        updateStep('final', 'done');
+        
+        alert('초기 설정이 성공적으로 분석되었습니다.');
+        location.reload();
+        
+    } catch (error) {
+        alert('분석 실패: ' + error.message);
+        console.error(error);
+    } finally {
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-save me-1"></i> 저장 및 분석 시작';
+    }
+});
+
+// 커스텀 프롬프트 저장
+document.getElementById('saveCustomPrompt')?.addEventListener('click', async function() {
+    const custom_system_prompt = document.getElementById('customSystemPrompt').value;
+    const btn = this;
+    
+    btn.disabled = true;
+    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> 저장 중...';
+    
+    try {
+        const response = await fetch('/creation/api/projects/{{ project.project_id }}/custom-prompt', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ custom_system_prompt })
+        });
+        
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || '저장 오류');
+        
+        alert('작가 지침이 저장되었습니다.');
+        // 질문 조건 확인 탭의 내용도 갱신될 수 있도록 함 (다음 로드 시)
+    } catch (error) {
+        alert('저장 실패: ' + error.message);
+        console.error(error);
+    } finally {
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-check-circle me-1"></i> 지침 저장하기';
+    }
+});
+</script>
+{% endblock %}
+

templates/novel_dashboard.html

@@ -1,10 +1,25 @@
-{% extends "admin.html" %}
+{% extends "creation_base.html" %}
+
+{% block title %}웹소설 대시보드 - SOYMEDIA{% endblock %}
+
+{% block extra_css %}
+<style>
+    .card {
+        border: none;
+        border-radius: 12px;
+        transition: transform 0.2s;
+    }
+    .card:hover {
+        transform: translateY(-5px);
+    }
+</style>
+{% endblock %}
 
 {% block content %}
-<div class="container-fluid mt-4">
+<div class="container-fluid mt-4 px-4">
     <div class="d-flex justify-content-between align-items-center mb-4">
-        <h2><i class="fas fa-book-open me-2"></i>웹소설 프로젝트 대시보드</h2>
-        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createProjectModal">
+        <h2><i class="fas fa-book-open me-2 text-primary"></i>웹소설 프로젝트 대시보드</h2>
+        <button class="btn btn-primary btn-lg shadow-sm" data-bs-toggle="modal" data-bs-target="#createProjectModal">
             <i class="fas fa-plus me-1"></i> 새 프로젝트 생성
         </button>
     </div>
@@ -22,46 +37,54 @@
 
 <!-- 프로젝트 생성 모달 -->
 <div class="modal fade" id="createProjectModal" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">새 웹소설 프로젝트</h5>
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-0 shadow">
+            <div class="modal-header bg-light">
+                <h5 class="modal-title font-weight-bold">새 웹소설 프로젝트</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body p-4">
                 <form id="createProjectForm">
                     <div class="mb-3">
-                        <label class="form-label">제목</label>
+                        <label class="form-label fw-medium">제목</label>
                         <input type="text" class="form-control" id="projectTitle" required placeholder="소설 제목을 입력하세요">
                     </div>
                     <div class="mb-3">
-                        <label class="form-label">창작 모드</label>
+                        <label class="form-label fw-medium">창작 모드</label>
                         <select class="form-select" id="projectMode">
                             <option value="CREATIVE">순수 창작 (Pure Imagination)</option>
                             <option value="REFERENCE">기존 작품 참고 (RAG Enabled)</option>
                         </select>
+                        <div class="form-text mt-2 small text-muted" id="modeDesc">
+                            순수 창작 모드에서는 AI의 상상력만으로 집필을 진행합니다.
+                        </div>
                     </div>
                     <div class="mb-3 d-none" id="referenceSection">
-                        <label class="form-label">참고 자료 ID (RAG Collection)</label>
+                        <label class="form-label fw-medium">참고 자료 ID (RAG Collection)</label>
                         <input type="text" class="form-control" id="referenceId" placeholder="참고할 벡터 컬렉션 ID">
                     </div>
                 </form>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
-                <button type="button" class="btn btn-primary" onclick="createNewProject()">생성하기</button>
+            <div class="modal-footer border-top-0 p-3">
+                <button type="button" class="btn btn-light" data-bs-dismiss="modal">취소</button>
+                <button type="button" class="btn btn-primary px-4" onclick="createNewProject()">생성하기</button>
             </div>
         </div>
     </div>
 </div>
+{% endblock %}
 
+{% block extra_js %}
 <script>
 document.getElementById('projectMode').addEventListener('change', function() {
     const refSection = document.getElementById('referenceSection');
+    const modeDesc = document.getElementById('modeDesc');
     if (this.value === 'REFERENCE') {
         refSection.classList.remove('d-none');
+        modeDesc.innerText = "기존 작품이나 설정 자료를 AI가 참고하여 집필을 돕습니다.";
     } else {
         refSection.classList.add('d-none');
+        modeDesc.innerText = "순수 창작 모드에서는 AI의 상상력만으로 집필을 진행합니다.";
     }
 });
 
@@ -74,26 +97,33 @@ async function loadProjects() {
         if (projects.length === 0) {
             container.innerHTML = `
                 <div class="col-12 text-center py-5 text-muted">
-                    <i class="fas fa-folder-open fa-3x mb-3"></i>
-                    <p>생성된 프로젝트가 없습니다. 첫 프로젝트를 만들어보세요!</p>
+                    <i class="fas fa-folder-open fa-3x mb-3 opacity-25"></i>
+                    <p class="h5">생성된 프로젝트가 없습니다.</p>
+                    <p>우측 상단의 버튼을 눌러 첫 프로젝트를 만들어보세요!</p>
                 </div>`;
             return;
         }
 
         container.innerHTML = projects.map(p => `
             <div class="col-md-4 mb-4">
-                <div class="card h-100 shadow-sm">
-                    <div class="card-body">
-                        <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h5 class="card-title text-truncate" style="max-width: 80%;">${p.title}</h5>
-                            <span class="badge ${p.mode === 'CREATIVE' ? 'bg-success' : 'bg-info'}">${p.mode}</span>
+                <div class="card h-100 shadow-sm border-0">
+                    <div class="card-body p-4">
+                        <div class="d-flex justify-content-between align-items-start mb-3">
+                            <h5 class="card-title fw-bold text-truncate" style="max-width: 75%;">${p.title}</h5>
+                            <span class="badge ${p.mode === 'CREATIVE' ? 'bg-success-subtle text-success' : 'bg-info-subtle text-info'} px-2 py-1">${p.mode}</span>
                         </div>
-                        <p class="card-text text-muted small">ID: ${p.project_id.substring(0, 8)}...</p>
+                        <p class="card-text text-muted small mb-0">ID: ${p.project_id.substring(0, 8)}...</p>
                     </div>
-                    <div class="card-footer bg-transparent border-top-0 d-grid">
-                        <a href="/creation/workspace/${p.project_id}" class="btn btn-outline-primary">
+                    <div class="card-footer bg-white border-top-0 p-4 pt-0 d-flex gap-2">
+                        <a href="/creation/workspace/${p.project_id}" class="btn btn-outline-primary fw-medium flex-fill">
                             <i class="fas fa-pen-nib me-1"></i> 집필 시작
                         </a>
+                        <a href="/creation/analysis/${p.project_id}" class="btn btn-outline-info fw-medium flex-fill">
+                            <i class="fas fa-chart-line me-1"></i> 분석 확인
+                        </a>
+                        <button class="btn btn-outline-danger px-3" onclick="deleteProject('${p.project_id}', '${p.title.replace(/'/g, "\\'")}')" title="프로젝트 삭제">
+                            <i class="fas fa-trash-alt"></i> 삭제
+                        </button>
                     </div>
                 </div>
             </div>
@@ -118,7 +148,9 @@ async function createNewProject() {
         });
         
         if (response.ok) {
-            bootstrap.Modal.getInstance(document.getElementById('createProjectModal')).hide();
+            const modalElement = document.getElementById('createProjectModal');
+            const modal = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);
+            modal.hide();
             loadProjects();
         }
     } catch (error) {
@@ -126,7 +158,28 @@ async function createNewProject() {
     }
 }
 
+async function deleteProject(projectId, title) {
+    if (!confirm(`'${title}' 프로젝트를 삭제하시겠습니까?\n삭제 후에는 복구할 수 없습니다.`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/creation/api/projects/${projectId}`, {
+            method: 'DELETE'
+        });
+        
+        if (response.ok) {
+            loadProjects();
+        } else {
+            const data = await response.json();
+            alert('삭제 실패: ' + (data.error || '알 수 없는 오류'));
+        }
+    } catch (error) {
+        console.error('Delete error:', error);
+        alert('서버 통신 실패');
+    }
+}
+
 document.addEventListener('DOMContentLoaded', loadProjects);
 </script>
 {% endblock %}
-

templates/novel_viewer.html

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ project.title }} - Viewer - SOYMEDIA</title>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Marked.js for Markdown rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
+        
+        :root {
+            --bg-main: #0f172a;
+            --bg-message-ai: #1e293b;
+            --border-color: #1e293b;
+            --text-main: #f1f5f9;
+            --text-muted: #94a3b8;
+            --accent: #3b82f6;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background-color: var(--bg-main);
+            color: var(--text-main);
+            font-family: 'Inter', 'Noto Sans KR', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .viewer-header {
+            background-color: rgba(15, 23, 42, 0.95);
+            border-bottom: 1px solid var(--border-color);
+            padding: 24px;
+            text-align: center;
+            backdrop-filter: blur(8px);
+        }
+
+        .viewer-header h1 {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            color: var(--text-main);
+        }
+
+        .viewer-header p {
+            font-size: 12px;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+
+        .viewer-content {
+            flex: 1;
+            max-width: 900px;
+            width: 100%;
+            margin: 0 auto;
+            padding: 48px 24px;
+        }
+
+        .viewer-message {
+            background-color: var(--bg-message-ai);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 32px;
+            margin-bottom: 24px;
+        }
+
+        .viewer-message-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .viewer-message-icon {
+            background-color: rgba(59, 130, 246, 0.1);
+            padding: 8px;
+            border-radius: 8px;
+            color: var(--accent);
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .viewer-message-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-main);
+        }
+
+        .viewer-message-content {
+            font-size: 16px;
+            line-height: 1.8;
+            color: var(--text-main);
+            white-space: pre-wrap;
+        }
+
+        .viewer-message-content.markdown-content {
+            white-space: pre-wrap;
+        }
+
+        .viewer-message-content.markdown-content h1,
+        .viewer-message-content.markdown-content h2,
+        .viewer-message-content.markdown-content h3,
+        .viewer-message-content.markdown-content h4,
+        .viewer-message-content.markdown-content h5,
+        .viewer-message-content.markdown-content h6 {
+            margin: 20px 0 12px 0;
+            font-weight: 600;
+            line-height: 1.3;
+            white-space: normal;
+        }
+
+        .viewer-message-content.markdown-content h1 {
+            font-size: 1.8em;
+            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+            padding-bottom: 8px;
+        }
+
+        .viewer-message-content.markdown-content h2 {
+            font-size: 1.5em;
+            border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+            padding-bottom: 6px;
+        }
+
+        .viewer-message-content.markdown-content h3 {
+            font-size: 1.2em;
+        }
+
+        .viewer-message-content.markdown-content p {
+            margin: 12px 0;
+            white-space: pre-wrap;
+        }
+
+        .viewer-message-content.markdown-content ul,
+        .viewer-message-content.markdown-content ol {
+            margin: 12px 0;
+            padding-left: 28px;
+        }
+
+        .viewer-message-content.markdown-content li {
+            margin: 6px 0;
+        }
+
+        .viewer-message-content.markdown-content code {
+            background-color: rgba(30, 41, 59, 0.5);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+        }
+
+        .viewer-message-content.markdown-content pre {
+            background-color: rgba(30, 41, 59, 0.5);
+            padding: 16px;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 16px 0;
+        }
+
+        .viewer-message-content.markdown-content pre code {
+            background: none;
+            padding: 0;
+        }
+
+        .viewer-message-content.markdown-content blockquote {
+            border-left: 4px solid rgba(59, 130, 246, 0.5);
+            padding-left: 16px;
+            margin: 16px 0;
+            color: var(--text-muted);
+            font-style: italic;
+        }
+
+        .viewer-message-content.markdown-content strong {
+            font-weight: 600;
+            color: var(--text-main);
+        }
+
+        .viewer-message-content.markdown-content em {
+            font-style: italic;
+        }
+
+        .viewer-message-content.markdown-content a {
+            color: var(--accent);
+            text-decoration: underline;
+        }
+
+        .viewer-empty {
+            text-align: center;
+            padding: 64px 24px;
+            color: var(--text-muted);
+        }
+
+        .viewer-empty-icon {
+            font-size: 48px;
+            margin-bottom: 16px;
+            opacity: 0.5;
+        }
+
+        .viewer-empty-text {
+            font-size: 16px;
+        }
+
+        @media (max-width: 768px) {
+            .viewer-content {
+                padding: 24px 16px;
+            }
+
+            .viewer-message {
+                padding: 24px;
+            }
+
+            .viewer-header h1 {
+                font-size: 20px;
+            }
+        }
+
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #334155; }
+    </style>
+</head>
+<body>
+    <header class="viewer-header">
+        <h1>{{ project.title }}</h1>
+        <p>Public Viewer</p>
+    </header>
+
+    <main class="viewer-content">
+        {% if selected_messages and selected_messages|length > 0 %}
+            <div class="viewer-message">
+                <div class="viewer-message-header">
+                    <div class="viewer-message-icon">
+                        <i class="fas fa-book-open"></i>
+                    </div>
+                    <div class="viewer-message-title">작품 내용</div>
+                </div>
+                <div class="viewer-message-content markdown-content" id="combined-message-content">
+                    <!-- 모든 메시지 내용이 여기에 연속으로 렌더링됩니다 -->
+                </div>
+            </div>
+            
+            <script type="application/json" id="messages-data">
+            {{ selected_messages|tojson|safe }}
+            </script>
+        {% else %}
+        <div class="viewer-empty">
+            <div class="viewer-empty-icon">
+                <i class="fas fa-inbox"></i>
+            </div>
+            <div class="viewer-empty-text">
+                표시할 메시지가 선택되지 않았습니다.
+            </div>
+        </div>
+        {% endif %}
+    </main>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Markdown 렌더링 함수
+            function renderMarkdown(text) {
+                if (!text) {
+                    console.warn('No content to render');
+                    return '<p style="color: var(--text-muted);">내용이 없습니다.</p>';
+                }
+                try {
+                    if (typeof marked !== 'undefined') {
+                        // 연속된 공백을 보존하기 위해 먼저 변환
+                        const preservedText = text.replace(/ {2,}/g, (match) => {
+                            return '&nbsp;'.repeat(match.length);
+                        });
+                        return marked.parse(preservedText);
+                    } else {
+                        // marked.js가 로드되지 않은 경우 기본 텍스트 반환
+                        return text.replace(/ {2,}/g, (match) => {
+                            return '&nbsp;'.repeat(match.length);
+                        }).replace(/\n/g, '<br>');
+                    }
+                } catch (e) {
+                    console.error('Markdown rendering error:', e);
+                    return text.replace(/ {2,}/g, (match) => {
+                        return '&nbsp;'.repeat(match.length);
+                    }).replace(/\n/g, '<br>');
+                }
+            }
+            
+            // 메시지 데이터 가져오기
+            const messagesDataElement = document.getElementById('messages-data');
+            const combinedContentElement = document.getElementById('combined-message-content');
+            
+            if (messagesDataElement && combinedContentElement) {
+                try {
+                    const messagesData = JSON.parse(messagesDataElement.textContent);
+                    
+                    // 모든 메시지 내용�� 하나로 합치기
+                    let combinedContent = '';
+                    messagesData.forEach((message, index) => {
+                        if (message.content) {
+                            // 각 메시지 사이에 구분선 추가 (첫 번째 메시지가 아닌 경우)
+                            if (index > 0) {
+                                combinedContent += '\n\n---\n\n';
+                            }
+                            combinedContent += message.content;
+                        }
+                    });
+                    
+                    // 합쳐진 내용을 마크다운으로 렌더링
+                    if (combinedContent) {
+                        combinedContentElement.innerHTML = renderMarkdown(combinedContent);
+                    } else {
+                        combinedContentElement.innerHTML = '<p style="color: var(--text-muted);">내용이 없습니다.</p>';
+                    }
+                } catch (e) {
+                    console.error('Failed to parse messages data:', e);
+                    if (combinedContentElement) {
+                        combinedContentElement.innerHTML = '<p style="color: var(--text-muted);">메시지 내용을 불러올 수 없습니다.</p>';
+                    }
+                }
+            } else {
+                console.error('Messages data element or combined content element not found');
+            }
+        });
+    </script>
+</body>
+</html>
+

templates/novel_workspace.html

@@ -1,190 +1,1157 @@
-{% extends "admin.html" %}
+{% extends "creation_base.html" %}
 
-{% block content %}
+{% block title %}{{ project.title }} - Workspace - SOYMEDIA{% endblock %}
+
+{% block extra_css %}
+<!-- Font Awesome -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<!-- Marked.js for Markdown rendering -->
+<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
 <style>
-    .workspace-container {
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
+    
+    :root {
+        --bg-main: #0f172a;
+        --bg-sidebar: #0f172a;
+        --bg-message-ai: #1e293b;
+        --bg-message-user: #3b82f6;
+        --border-color: #1e293b;
+        --text-main: #f1f5f9;
+        --text-muted: #94a3b8;
+        --accent: #3b82f6;
+    }
+
+    body {
+        background-color: var(--bg-main);
+        color: var(--text-main);
+        font-family: 'Inter', 'Noto Sans KR', sans-serif;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
         display: flex;
-        height: calc(100vh - 100px);
-        background: #f8f9fa;
+        flex-direction: column;
         overflow: hidden;
     }
-    .editor-area {
+
+    #app-container {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    /* Main Chat Section */
+    .chat-section {
         flex: 1;
         display: flex;
         flex-direction: column;
-        padding: 20px;
+        min-width: 0;
+        background-color: var(--bg-main);
+    }
+
+    .chat-header {
+        height: 64px;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 24px;
+        background-color: rgba(15, 23, 42, 0.8);
+        backdrop-filter: blur(8px);
+        z-index: 10;
+    }
+
+    .chat-header-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .chat-header-icon {
+        background-color: rgba(59, 130, 246, 0.1);
+        padding: 8px;
+        border-radius: 8px;
+        color: var(--accent);
+    }
+
+    .chat-header-title {
+        font-size: 14px;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    .chat-header-subtitle {
+        font-size: 10px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin: 0;
+    }
+
+    .chat-messages {
+        flex: 1;
         overflow-y: auto;
+        padding: 32px 16px;
     }
-    .memory-sidebar {
-        width: 320px;
-        background: white;
-        border-left: 1px solid #dee2e6;
+
+    .chat-messages-inner {
+        max-width: 800px;
+        margin: 0 auto;
         display: flex;
         flex-direction: column;
-        padding: 15px;
-        overflow-y: auto;
+        gap: 24px;
     }
-    .chat-bubble {
-        max-width: 80%;
-        margin-bottom: 15px;
-        padding: 12px 16px;
-        border-radius: 15px;
-        position: relative;
+
+    .message {
+        display: flex;
+        flex-direction: column;
+        max-width: 85%;
     }
-    .bubble-user {
+
+    .message-user {
         align-self: flex-end;
-        background: #007bff;
-        color: white;
-        border-bottom-right-radius: 2px;
+        align-items: flex-end;
     }
-    .bubble-ai {
+
+    .message-ai {
         align-self: flex-start;
-        background: #e9ecef;
-        color: #212529;
-        border-bottom-left-radius: 2px;
+        align-items: flex-start;
+    }
+
+    .message-bubble {
+        padding: 12px 20px;
+        border-radius: 18px;
+        font-size: 15px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+    }
+
+    .message-bubble.markdown-content {
+        white-space: pre-wrap;
+    }
+
+    .message-bubble.markdown-content h1,
+    .message-bubble.markdown-content h2,
+    .message-bubble.markdown-content h3,
+    .message-bubble.markdown-content h4,
+    .message-bubble.markdown-content h5,
+    .message-bubble.markdown-content h6 {
+        margin: 16px 0 8px 0;
+        font-weight: 600;
+        line-height: 1.3;
+        white-space: normal;
+    }
+
+    .message-bubble.markdown-content h1 {
+        font-size: 1.5em;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+        padding-bottom: 8px;
+    }
+
+    .message-bubble.markdown-content h2 {
+        font-size: 1.3em;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+        padding-bottom: 6px;
+    }
+
+    .message-bubble.markdown-content h3 {
+        font-size: 1.1em;
+    }
+
+    .message-bubble.markdown-content p {
+        margin: 8px 0;
+        white-space: pre-wrap;
+    }
+
+    .message-bubble.markdown-content ul,
+    .message-bubble.markdown-content ol {
+        margin: 8px 0;
+        padding-left: 24px;
+    }
+
+    .message-bubble.markdown-content li {
+        margin: 4px 0;
+    }
+
+    .message-bubble.markdown-content code {
+        background-color: rgba(30, 41, 59, 0.5);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Courier New', monospace;
+        font-size: 0.9em;
+    }
+
+    .message-bubble.markdown-content pre {
+        background-color: rgba(30, 41, 59, 0.5);
+        padding: 12px;
+        border-radius: 8px;
+        overflow-x: auto;
+        margin: 12px 0;
+    }
+
+    .message-bubble.markdown-content pre code {
+        background: none;
+        padding: 0;
     }
-    .input-box {
-        background: white;
-        padding: 15px;
-        border-top: 1px solid #dee2e6;
+
+    .message-bubble.markdown-content blockquote {
+        border-left: 4px solid rgba(59, 130, 246, 0.5);
+        padding-left: 16px;
+        margin: 12px 0;
+        color: var(--text-muted);
+        font-style: italic;
+    }
+
+    .message-bubble.markdown-content strong {
+        font-weight: 600;
+        color: var(--text-main);
+    }
+
+    .message-bubble.markdown-content em {
+        font-style: italic;
+    }
+
+    .message-bubble.markdown-content a {
+        color: var(--accent);
+        text-decoration: underline;
+    }
+
+    .message-bubble.markdown-content a:hover {
+        opacity: 0.8;
+    }
+
+    .select-for-viewer-btn:hover {
+        background-color: rgba(34, 197, 94, 0.25) !important;
+        border-color: rgba(34, 197, 94, 0.6) !important;
+        transform: translateY(-1px);
+    }
+
+    .select-for-viewer-btn:active {
+        transform: translateY(0);
+    }
+
+    .deselect-for-viewer-btn:hover {
+        background-color: rgba(239, 68, 68, 0.25) !important;
+        border-color: rgba(239, 68, 68, 0.6) !important;
+        transform: translateY(-1px);
+    }
+
+    .deselect-for-viewer-btn:active {
+        transform: translateY(0);
+    }
+
+    .message.selected-for-viewer {
+        border-left: 3px solid #22c55e;
+        padding-left: 4px;
+    }
+
+    .message-user .message-bubble {
+        background-color: var(--bg-message-user);
+        color: white;
+    }
+
+    .message-ai .message-bubble {
+        background-color: var(--bg-message-ai);
+        color: var(--text-main);
+        border: 1px solid var(--border-color);
+    }
+
+    .message-thoughts {
+        margin-top: 8px;
+        padding: 8px 16px;
+        background-color: rgba(30, 41, 59, 0.3);
+        border: 1px solid rgba(51, 65, 85, 0.5);
+        border-radius: 12px;
+        font-size: 13px;
+        color: var(--text-muted);
+        font-style: italic;
+    }
+
+    .message-thoughts-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 4px;
+        font-size: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        color: var(--text-muted);
+    }
+
+    .message-image {
+        margin-top: 12px;
+        border-radius: 12px;
+        overflow: hidden;
+        border: 1px solid var(--border-color);
+        max-width: 100%;
+    }
+
+    .message-image img {
+        width: 100%;
+        height: auto;
+        display: block;
+    }
+
+    .chat-footer {
+        padding: 16px 24px;
+        background-color: var(--bg-main);
+    }
+
+    .chat-input-container {
+        max-width: 800px;
+        margin: 0 auto;
+        position: relative;
+    }
+
+    .chat-input-wrapper {
+        background-color: var(--bg-message-ai);
+        border: 1px solid var(--border-color);
+        border-radius: 16px;
+        padding: 8px;
         display: flex;
-        gap: 10px;
+        align-items: flex-end;
+        transition: border-color 0.2s;
     }
-    .memory-section {
-        margin-bottom: 25px;
+
+    .chat-input-wrapper:focus-within {
+        border-color: rgba(59, 130, 246, 0.5);
     }
-    .memory-section h6 {
+
+    .chat-input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: var(--text-main);
+        padding: 12px;
+        font-size: 15px;
+        resize: none;
+        max-height: 200px;
+        font-family: inherit;
+    }
+
+    .chat-send-btn {
+        background-color: var(--bg-message-user);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: opacity 0.2s, transform 0.1s;
+    }
+
+    .chat-send-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .chat-send-btn:active:not(:disabled) {
+        transform: scale(0.95);
+    }
+
+    .chat-input-hint {
+        text-align: center;
+        font-size: 10px;
+        color: var(--text-muted);
+        margin-top: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    }
+
+    /* Sidebar Section */
+    .sidebar {
+        width: 320px;
+        background-color: var(--bg-sidebar);
+        border-left: 1px solid var(--border-color);
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.3s ease, width 0.3s ease;
+        overflow-y: auto;
+    }
+
+    .sidebar.hidden {
+        width: 0;
+        border-left: none;
+        transform: translateX(100%);
+    }
+
+    .sidebar-content {
+        padding: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        min-width: 320px;
+    }
+
+    .sidebar-section-title {
+        font-size: 10px;
         font-weight: 700;
-        color: #495057;
+        color: var(--text-muted);
         text-transform: uppercase;
-        font-size: 0.8rem;
-        margin-bottom: 10px;
+        letter-spacing: 0.2em;
+        margin-bottom: 16px;
+    }
+
+    .status-card {
+        background-color: rgba(30, 41, 59, 0.4);
+        border: 1px solid rgba(51, 65, 85, 0.5);
+        border-radius: 16px;
+        padding: 16px;
+    }
+
+    .user-profile {
         display: flex;
         align-items: center;
-        gap: 5px;
+        gap: 12px;
+        margin-bottom: 16px;
     }
-    .fact-item {
-        background: #fff3cd;
-        padding: 8px 12px;
+
+    .user-avatar {
+        width: 40px;
+        height: 40px;
+        background-color: var(--bg-sidebar);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-muted);
+        border: 1px solid var(--border-color);
+    }
+
+    .user-info-name {
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--text-main);
+    }
+
+    .user-info-role {
+        font-size: 10px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    }
+
+    .status-items {
+        border-top: 1px solid rgba(51, 65, 85, 0.5);
+        padding-top: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .status-item {
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+    }
+
+    .status-item-label {
+        color: var(--text-muted);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .objective-card {
+        background-color: rgba(59, 130, 246, 0.05);
+        border: 1px solid rgba(59, 130, 246, 0.2);
+        border-radius: 12px;
+        padding: 16px;
+        font-size: 12px;
+        color: rgba(191, 219, 254, 0.8);
+        line-height: 1.6;
+        font-style: italic;
+    }
+
+    .model-select {
+        background-color: var(--bg-message-ai);
+        border: 1px solid var(--border-color);
+        color: var(--text-muted);
+        font-size: 12px;
+        padding: 6px 12px;
         border-radius: 8px;
-        font-size: 0.9rem;
-        margin-bottom: 8px;
-        border-left: 4px solid #ffc107;
+        outline: none;
+        cursor: pointer;
     }
-    .summary-text {
-        font-size: 0.9rem;
-        color: #6c757d;
-        line-height: 1.5;
+
+    .toggle-sidebar-btn {
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 8px;
+        transition: background-color 0.2s;
+    }
+
+    .toggle-sidebar-btn:hover {
+        background-color: var(--bg-message-ai);
+    }
+
+    .toggle-sidebar-btn.active {
+        color: var(--accent);
+        background-color: rgba(59, 130, 246, 0.1);
+    }
+
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: #334155; }
+
+    /* Typing Indicator */
+    .typing-indicator {
+        display: flex;
+        gap: 4px;
+        padding: 4px 8px;
+    }
+
+    .dot {
+        width: 6px;
+        height: 6px;
+        background-color: var(--text-muted);
+        border-radius: 50%;
+        animation: typing-dot 1.4s infinite ease-in-out;
+    }
+
+    .dot:nth-child(1) { animation-delay: -0.32s; }
+    .dot:nth-child(2) { animation-delay: -0.16s; }
+
+    @keyframes typing-dot {
+        0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
+        40% { transform: scale(1); opacity: 1; }
+    }
+
+    @media (max-width: 1024px) {
+        .sidebar {
+            position: fixed;
+            right: 0;
+            top: 64px;
+            bottom: 0;
+            z-index: 20;
+            box-shadow: -10px 0 20px rgba(0,0,0,0.5);
+        }
     }
 </style>
+{% endblock %}
 
-<div class="workspace-container">
-    <!-- 집필 구역 (에디터/채팅) -->
-    <div class="editor-area">
-        <div class="d-flex justify-content-between align-items-center mb-4">
-            <h4><i class="fas fa-edit me-2"></i>{{ project.title }} <small class="text-muted">({{ project.mode }})</small></h4>
-            <div id="loadingStatus" class="spinner-border spinner-border-sm text-primary d-none" role="status"></div>
-        </div>
-        
-        <div id="chatWindow" class="d-flex flex-column flex-grow-1" style="min-height: 300px;">
-            <div class="chat-bubble bubble-ai">
-                안녕하세요! 소설 <b>"{{ project.title }}"</b>의 집필을 도와드릴 AI 어시스턴트입니다. 
-                캐릭터 설정이나 다음 전개에 대해 무엇이든 물어보세요.
+{% block content %}
+<div id="app-container">
+    <section class="chat-section">
+        <header class="chat-header">
+            <div class="chat-header-info">
+                <div class="chat-header-icon">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div>
+                    <h1 class="chat-header-title">{{ project.title }}</h1>
+                    <p class="chat-header-subtitle">{{ project.mode }} MODE</p>
+                </div>
             </div>
-        </div>
+            
+            <div style="display: flex; align-items: center; gap: 16px;">
+                <div style="display: flex; align-items: center; gap: 8px; padding: 6px 12px; background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px;">
+                    <label style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); cursor: pointer;">
+                        <input type="checkbox" id="viewer-toggle" style="cursor: pointer;">
+                        <span>뷰어 활성화</span>
+                    </label>
+                </div>
+                <a id="viewer-link" href="#" target="_blank" style="display: none; padding: 6px 12px; background-color: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 8px; color: #22c55e; text-decoration: none; font-size: 11px; font-weight: 600;">
+                    <i class="fas fa-external-link-alt"></i> 뷰어 열기
+                </a>
+                <select id="model-selector" class="model-select">
+                    <!-- Models will be loaded here -->
+                </select>
+                <button id="toggle-sidebar" class="toggle-sidebar-btn active">
+                    <i class="fas fa-columns"></i>
+                </button>
+            </div>
+        </header>
 
-        <div class="input-box mt-auto">
-            <textarea id="userInput" class="form-control" rows="2" placeholder="에이전트에게 지시하거나 질문하세요... (Enter로 전송)"></textarea>
-            <button id="sendBtn" class="btn btn-primary" onclick="sendMessage()">
-                <i class="fas fa-paper-plane"></i>
-            </button>
-        </div>
-    </div>
-
-    <!-- 메모리 사이드바 -->
-    <div class="memory-sidebar">
-        <div class="memory-section">
-            <h6><i class="fas fa-users text-warning"></i> 캐릭터 및 설정 (Mem0)</h6>
-            <div id="factContainer">
-                <div class="text-muted small">설정을 불러오는 중...</div>
+        <main id="chat-messages" class="chat-messages">
+            <div id="chat-messages-inner" class="chat-messages-inner">
+                <!-- Messages will be rendered here -->
             </div>
-        </div>
+        </main>
 
-        <div class="memory-section">
-            <h6><i class="fas fa-history text-info"></i> 스토리 문맥 요약 (Zep)</h6>
-            <div id="summaryContainer" class="summary-text italic">
-                요약을 불러오는 중...
+        <footer class="chat-footer">
+            <div class="chat-input-container">
+                <div class="chat-input-wrapper">
+                    <textarea id="chat-input" class="chat-input" placeholder="어떤 장면을 그려볼까요?" rows="1"></textarea>
+                    <button id="send-btn" class="chat-send-btn" disabled>
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+                <p class="chat-input-hint">
+                    Enter: 전송 / Shift + Enter: 줄바꿈
+                </p>
             </div>
-        </div>
+        </footer>
+    </section>
 
-        <div class="mt-auto">
-            <button class="btn btn-sm btn-outline-secondary w-100" onclick="refreshMemory()">
-                <i class="fas fa-sync-alt me-1"></i> 동기화
-            </button>
+    <aside id="sidebar" class="sidebar">
+        <div class="sidebar-content">
+            <div>
+                <h3 class="sidebar-section-title">Project Status</h3>
+                <div class="status-card">
+                    <div class="user-profile">
+                        <div class="user-avatar">
+                            <i class="fas fa-user-pen"></i>
+                        </div>
+                        <div>
+                            <div class="user-info-name">{{ current_user.username }}</div>
+                            <div class="user-info-role">Author</div>
+                        </div>
+                    </div>
+                    
+                    <div id="status-items" class="status-items" style="display: none;">
+                        <div class="status-item">
+                            <span class="status-item-label"><i class="fas fa-map-marker-alt"></i> Location</span>
+                            <span id="status-location" class="status-item-value">Unknown</span>
+                        </div>
+                        <div class="status-item">
+                            <span class="status-item-label"><i class="fas fa-clock"></i> Time</span>
+                            <span id="status-time" class="status-item-value">D+0000 | 00:00</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="objective-section" style="display: none;">
+                <h3 class="sidebar-section-title">Current Objective</h3>
+                <div id="objective-card" class="objective-card">
+                    <!-- Objective will be loaded here -->
+                </div>
+            </div>
+
+            <div id="inventory-section" style="display: none;">
+                <h3 class="sidebar-section-title">Contextual Items</h3>
+                <div id="inventory-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                    <!-- Items will be loaded here -->
+                </div>
+            </div>
+            
+            <div style="margin-top: auto; padding-top: 24px; border-top: 1px solid var(--border-color);">
+                <div style="background-color: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.1); border-radius: 12px; padding: 16px;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                        <i class="fas fa-lightbulb" style="color: #f59e0b; font-size: 14px;"></i>
+                        <span style="font-size: 10px; font-weight: 700; color: #f59e0b; text-transform: uppercase; letter-spacing: 0.1em;">Writing Tip</span>
+                    </div>
+                    <p style="font-size: 11px; color: rgba(253, 230, 138, 0.6); line-height: 1.6; margin: 0;">
+                        특정 캐릭터의 대사나 심리 묘사를 구체적으로 요청해보세요. 에이전트가 더 풍부한 서사를 제공합니다.
+                    </p>
+                </div>
+            </div>
         </div>
-    </div>
+    </aside>
 </div>
 
 <script>
-const projectId = "{{ project.project_id }}";
+    // Vanilla JavaScript Chat Implementation
+    document.addEventListener('DOMContentLoaded', () => {
+        const chatInput = document.getElementById('chat-input');
+        const sendBtn = document.getElementById('send-btn');
+        const chatMessages = document.getElementById('chat-messages');
+        const chatMessagesInner = document.getElementById('chat-messages-inner');
+        const modelSelector = document.getElementById('model-selector');
+        const toggleSidebarBtn = document.getElementById('toggle-sidebar');
+        const sidebar = document.getElementById('sidebar');
+        
+        const projectId = "{{ project.project_id }}";
+        const projectTitle = "{{ project.title }}";
+        
+        let isTyping = false;
+        
+        // --- Sidebar Management ---
+        toggleSidebarBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('hidden');
+            toggleSidebarBtn.classList.toggle('active');
+        });
 
-async function sendMessage() {
-    const input = document.getElementById('userInput');
-    const message = input.value.trim();
-    if (!message) return;
+        // --- Model Loading ---
+        async function loadModels() {
+            try {
+                const response = await fetch('/api/ollama/models?all=true');
+                const data = await response.json();
+                if (data.models) {
+                    modelSelector.innerHTML = data.models.map(m => 
+                        `<option value="${m.name}">${m.name}</option>`
+                    ).join('');
+                    
+                    const savedModel = localStorage.getItem('lastWriterModel');
+                    if (savedModel) modelSelector.value = savedModel;
+                    else if (data.models.length > 0) {
+                        const defaultModel = data.models.find(m => m.name.includes('gemini')) || data.models[0];
+                        modelSelector.value = defaultModel.name;
+                    }
+                }
+            } catch (e) { console.error('Failed to load models:', e); }
+        }
 
-    appendBubble(message, 'user');
-    input.value = '';
-    
-    document.getElementById('loadingStatus').classList.remove('d-none');
-    
-    try {
-        const response = await fetch(`/creation/api/chat/${projectId}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ message })
+        modelSelector.addEventListener('change', (e) => {
+            localStorage.setItem('lastWriterModel', e.target.value);
+        });
+
+        // --- Markdown Rendering ---
+        function renderMarkdown(text) {
+            if (!text) return '';
+            try {
+                // marked.js가 ��드되었는지 확인
+                if (typeof marked !== 'undefined') {
+                    // 연속된 공백을 보존하기 위해 먼저 변환
+                    // 2개 이상의 연속된 공백을 &nbsp;로 변환 (단, 줄바꿈은 유지)
+                    const preservedText = text.replace(/ {2,}/g, (match) => {
+                        return '&nbsp;'.repeat(match.length);
+                    });
+                    return marked.parse(preservedText);
+                } else {
+                    // marked.js가 로드되지 않은 경우 기본 텍스트 반환
+                    // 연속된 공백 보존
+                    return text.replace(/ {2,}/g, (match) => {
+                        return '&nbsp;'.repeat(match.length);
+                    }).replace(/\n/g, '<br>');
+                }
+            } catch (e) {
+                console.error('Markdown rendering error:', e);
+                // 에러 발생 시에도 공백 보존
+                return text.replace(/ {2,}/g, (match) => {
+                    return '&nbsp;'.repeat(match.length);
+                }).replace(/\n/g, '<br>');
+            }
+        }
+
+        // --- Message Rendering ---
+        function createMessageElement(role, content, extra = {}, messageId = null) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message message-${role}`;
+            if (messageId) {
+                messageDiv.dataset.messageId = messageId;
+            }
+            
+            // 마크다운을 HTML로 변환
+            const renderedContent = renderMarkdown(content);
+            let html = `<div class="message-bubble markdown-content">${renderedContent}</div>`;
+            
+            if (extra.imageUrl) {
+                html += `<div class="message-image"><img src="${extra.imageUrl}" alt="Generated content"></div>`;
+            }
+            
+            if (role === 'ai' && extra.thoughts) {
+                const renderedThoughts = renderMarkdown(extra.thoughts);
+                html += `
+                    <div class="message-thoughts">
+                        <div class="message-thoughts-header"><i class="fas fa-brain"></i> Internal Reflection</div>
+                        <div class="markdown-content">${renderedThoughts}</div>
+                    </div>`;
+            }
+            
+            // AI 메시지에 뷰어 선택 버튼 추가 (뷰어 활성화 시에만 표시)
+            if (role === 'ai') {
+                const btnMessageId = messageId || 'temp-' + Date.now();
+                html += `
+                    <div class="viewer-selection-area" style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.2); display: none; align-items: center; gap: 8px;">
+                        <button class="select-for-viewer-btn" data-message-id="${btnMessageId}" style="background-color: rgba(34, 197, 94, 0.2); border: 2px solid rgba(34, 197, 94, 0.5); color: #22c55e; padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 700; transition: all 0.2s; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);">
+                            <i class="fas fa-eye" style="font-size: 14px;"></i> <span>뷰어에 표시</span>
+                        </button>
+                        <span class="viewer-selected-indicator" data-message-id="${btnMessageId}" style="display: none; color: #22c55e; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px;">
+                            <i class="fas fa-check-circle"></i> <span>뷰어에 선택됨</span>
+                        </span>
+                        <button class="deselect-for-viewer-btn" data-message-id="${btnMessageId}" style="display: none; background-color: rgba(239, 68, 68, 0.2); border: 2px solid rgba(239, 68, 68, 0.5); color: #ef4444; padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 700; transition: all 0.2s; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);">
+                            <i class="fas fa-times" style="font-size: 14px;"></i> <span>선택 취소</span>
+                        </button>
+                    </div>`;
+            }
+            
+            messageDiv.innerHTML = html;
+            
+            // 뷰어 선택/취소 버튼 이벤트 리스너 추가 (모든 AI 메시지에)
+            if (role === 'ai') {
+                const selectBtn = messageDiv.querySelector('.select-for-viewer-btn');
+                const deselectBtn = messageDiv.querySelector('.deselect-for-viewer-btn');
+                
+                if (selectBtn) {
+                    const btnMessageId = selectBtn.dataset.messageId;
+                    selectBtn.addEventListener('click', async () => {
+                        // 메시지 내용 가져오기
+                        const messageBubble = messageDiv.querySelector('.message-bubble');
+                        const messageContent = messageBubble ? messageBubble.textContent.trim() : null;
+                        
+                        // messageId가 실제 ID인지 확인하고, 없으면 메시지 내용으로 찾기
+                        let actualMessageId = btnMessageId;
+                        if (btnMessageId && btnMessageId.startsWith('temp-')) {
+                            // 임시 ID인 경우, 메시지 내용으로 찾기
+                            await selectMessageForViewer(null, messageContent);
+                            return;
+                        }
+                        await selectMessageForViewer(actualMessageId, messageContent);
+                    });
+                }
+                
+                if (deselectBtn) {
+                    const btnMessageId = deselectBtn.dataset.messageId;
+                    deselectBtn.addEventListener('click', async () => {
+                        // 실제 messageId 사용 (나중에 업데이트될 수 있음)
+                        const actualMessageId = messageId || btnMessageId;
+                        await deselectMessageForViewer(actualMessageId);
+                    });
+                }
+            }
+            
+            // messageId가 나중에 업데이트되는 경우를 대비
+            if (messageId && role === 'ai') {
+                const selectBtn = messageDiv.querySelector('.select-for-viewer-btn');
+                if (selectBtn && selectBtn.dataset.messageId.startsWith('temp-')) {
+                    selectBtn.dataset.messageId = messageId;
+                    const indicator = messageDiv.querySelector('.viewer-selected-indicator');
+                    if (indicator) {
+                        indicator.dataset.messageId = messageId;
+                    }
+                }
+            }
+            
+            return messageDiv;
+        }
+
+        function scrollToBottom() {
+            chatMessages.scrollTo({
+                top: chatMessages.scrollHeight,
+                behavior: 'smooth'
+            });
+        }
+
+        function addMessage(role, content, extra = {}, messageId = null) {
+            const el = createMessageElement(role, content, extra, messageId);
+            chatMessagesInner.appendChild(el);
+            scrollToBottom();
+            return el; // 메시지 요소 반환 (나중에 업데이트하기 위해)
+        }
+
+        function showTypingIndicator() {
+            const indicator = document.createElement('div');
+            indicator.id = 'typing-indicator';
+            indicator.className = 'message message-ai';
+            indicator.innerHTML = `
+                <div class="message-bubble">
+                    <div class="typing-indicator">
+                        <div class="dot"></div><div class="dot"></div><div class="dot"></div>
+                    </div>
+                </div>`;
+            chatMessagesInner.appendChild(indicator);
+            scrollToBottom();
+        }
+
+        function hideTypingIndicator() {
+            const indicator = document.getElementById('typing-indicator');
+            if (indicator) indicator.remove();
+        }
+
+        // --- Chat History ---
+        async function loadHistory() {
+            try {
+                const response = await fetch(`/creation/api/chat/${projectId}/history`);
+                const data = await response.json();
+                if (data.messages && data.messages.length > 0) {
+                    data.messages.forEach(m => addMessage(m.role, m.content, {}, m.id));
+                } else {
+                    addMessage('ai', `반갑습니다. 소설 **"${projectTitle}"**의 창작 공간입니다. 어떤 이야기를 시작해볼까요?`);
+                }
+            } catch (e) { console.error('Failed to load history:', e); }
+        }
+
+        // --- Status Update ---
+        function updateStatus(status) {
+            if (!status) return;
+            
+            const statusSection = document.getElementById('status-items');
+            statusSection.style.display = 'flex';
+            
+            document.getElementById('status-location').textContent = status.location || 'Unknown';
+            document.getElementById('status-time').textContent = status.current_time || 'D+0000 | 00:00';
+            
+            const objectiveSection = document.getElementById('objective-section');
+            if (status.quest_status) {
+                objectiveSection.style.display = 'block';
+                document.getElementById('objective-card').textContent = `"${status.quest_status}"`;
+            } else {
+                objectiveSection.style.display = 'none';
+            }
+            
+            const inventorySection = document.getElementById('inventory-section');
+            const inventoryGrid = document.getElementById('inventory-grid');
+            if (status.inventory && status.inventory.length > 0) {
+                inventorySection.style.display = 'block';
+                inventoryGrid.innerHTML = status.inventory.map(item => `
+                    <div style="background-color: rgba(30, 41, 59, 0.4); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px; display: flex; align-items: center; gap: 8px;">
+                        <i class="fas fa-cube" style="font-size: 10px; color: var(--text-muted);"></i>
+                        <span style="font-size: 10px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${item}</span>
+                    </div>
+                `).join('');
+            } else {
+                inventorySection.style.display = 'none';
+            }
+        }
+
+        // --- Event Handlers ---
+        chatInput.addEventListener('input', () => {
+            chatInput.style.height = 'auto';
+            chatInput.style.height = (chatInput.scrollHeight) + 'px';
+            sendBtn.disabled = !chatInput.value.trim();
+        });
+
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
         });
-        const data = await response.json();
-        appendBubble(data.reply, 'ai');
-    } catch (error) {
-        appendBubble("오류가 발생했습니다.", 'ai');
-    } finally {
-        document.getElementById('loadingStatus').classList.add('d-none');
-        refreshMemory();
-    }
-}
-
-function appendBubble(content, role) {
-    const win = document.getElementById('chatWindow');
-    const div = document.createElement('div');
-    div.className = `chat-bubble bubble-${role}`;
-    div.innerHTML = content.replace(/\n/g, '<br>');
-    win.appendChild(div);
-    win.scrollTop = win.scrollHeight;
-}
-
-async function refreshMemory() {
-    // 실제로는 API를 통해 Zep/Mem0 데이터를 실시간 조회해야 함
-    // 여기서는 목업 데이터를 표시하거나 에이전트 응답 시 함께 갱신
-    try {
-        // 임시 목업 데이터
-        document.getElementById('factContainer').innerHTML = `
-            <div class="fact-item">주인공: 김철수 (25세, 검사)</div>
-            <div class="fact-item">배경: 2024년 가상 서울</div>
-        `;
-        document.getElementById('summaryContainer').innerText = "최근 철수는 강남역 근처에서 의문의 포탈을 발견했습니다.";
-    } catch (e) {}
-}
-
-document.getElementById('userInput').addEventListener('keypress', function(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-    }
-});
-
-// 초기 로드
-document.addEventListener('DOMContentLoaded', refreshMemory);
+
+        async function handleSend() {
+            const message = chatInput.value.trim();
+            if (!message || isTyping) return;
+            
+            chatInput.value = '';
+            chatInput.style.height = 'auto';
+            sendBtn.disabled = true;
+            isTyping = true;
+            
+            addMessage('user', message);
+            showTypingIndicator();
+
+            try {
+                const response = await fetch(`/creation/api/chat/${projectId}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message, model: modelSelector.value })
+                });
+                const data = await response.json();
+                
+                hideTypingIndicator();
+                
+                if (response.ok) {
+                    if (data.status) updateStatus(data.status);
+                    // AI 응답의 메시지 ID를 가져와서 저장 (뷰어 선택용)
+                    const aiMessageId = data.message_id || null;
+                    const messageEl = addMessage('ai', data.reply, { 
+                        thoughts: data.hidden_thoughts, 
+                        imageUrl: data.image_url 
+                    }, aiMessageId);
+                    
+                    // messageId가 나중에 업데이트되는 경우를 대비하여 업데이트
+                    if (aiMessageId && messageEl) {
+                        const selectBtn = messageEl.querySelector('.select-for-viewer-btn');
+                        const deselectBtn = messageEl.querySelector('.deselect-for-viewer-btn');
+                        if (selectBtn) {
+                            selectBtn.dataset.messageId = aiMessageId;
+                            // 이벤트 리스너 재설정
+                            selectBtn.replaceWith(selectBtn.cloneNode(true));
+                            const newBtn = messageEl.querySelector('.select-for-viewer-btn');
+                            newBtn.addEventListener('click', () => {
+                                const messageBubble = messageEl.querySelector('.message-bubble');
+                                const messageContent = messageBubble ? messageBubble.textContent.trim() : null;
+                                selectMessageForViewer(aiMessageId, messageContent);
+                            });
+                        }
+                        if (deselectBtn) {
+                            deselectBtn.dataset.messageId = aiMessageId;
+                            deselectBtn.replaceWith(deselectBtn.cloneNode(true));
+                            const newDeselectBtn = messageEl.querySelector('.deselect-for-viewer-btn');
+                            newDeselectBtn.addEventListener('click', () => {
+                                deselectMessageForViewer();
+                            });
+                        }
+                        const indicator = messageEl.querySelector('.viewer-selected-indicator');
+                        if (indicator) {
+                            indicator.dataset.messageId = aiMessageId;
+                        }
+                        
+                        // 뷰어 활성화 상태에 따라 선택 영역 표시
+                        const viewerToggle = document.getElementById('viewer-toggle');
+                        if (viewerToggle && viewerToggle.checked) {
+                            const selectionArea = messageEl.querySelector('.viewer-selection-area');
+                            if (selectionArea) {
+                                selectionArea.style.display = 'flex';
+                            }
+                        }
+                    }
+                } else {
+                    addMessage('ai', "에러가 발생했습니다: " + (data.error || 'Unknown error'));
+                }
+            } catch (e) {
+                hideTypingIndicator();
+                addMessage('ai', "서버와의 통신에 실패했습니다.");
+                console.error('Chat error:', e);
+            } finally {
+                isTyping = false;
+                sendBtn.disabled = !chatInput.value.trim();
+            }
+        }
+
+        sendBtn.addEventListener('click', handleSend);
+
+        // --- Viewer Settings ---
+        async function loadViewerSettings() {
+            try {
+                const response = await fetch(`/creation/api/projects/${projectId}/viewer-settings`);
+                const data = await response.json();
+                if (data.viewer_enabled !== undefined) {
+                    updateViewerUI(data);
+                }
+            } catch (e) {
+                console.error('Failed to load viewer settings:', e);
+            }
+        }
+
+        function updateViewerUI(settings) {
+            const viewerToggle = document.getElementById('viewer-toggle');
+            const viewerLink = document.getElementById('viewer-link');
+            if (viewerToggle) {
+                viewerToggle.checked = settings.viewer_enabled || false;
+            }
+            if (viewerLink) {
+                if (settings.viewer_enabled) {
+                    viewerLink.href = `/creation/viewer/${projectId}`;
+                    viewerLink.style.display = 'block';
+                } else {
+                    viewerLink.style.display = 'none';
+                }
+            }
+            
+            // 뷰어 선택 영역 표시/숨김
+            const viewerSelectionAreas = document.querySelectorAll('.viewer-selection-area');
+            if (settings.viewer_enabled) {
+                viewerSelectionAreas.forEach(area => {
+                    area.style.display = 'flex';
+                });
+            } else {
+                viewerSelectionAreas.forEach(area => {
+                    area.style.display = 'none';
+                });
+            }
+            
+            // 선택된 메시지들 표시 (여러 개 가능)
+            const selectedMessageIds = settings.viewer_selected_message_ids || [];
+            
+            // 모든 메시지에서 선택 표시 제거
+            document.querySelectorAll('.message').forEach(msg => {
+                msg.classList.remove('selected-for-viewer');
+            });
+            document.querySelectorAll('.viewer-selected-indicator').forEach(ind => {
+                ind.style.display = 'none';
+            });
+            document.querySelectorAll('.select-for-viewer-btn').forEach(btn => {
+                btn.style.display = 'flex';
+            });
+            document.querySelectorAll('.deselect-for-viewer-btn').forEach(btn => {
+                btn.style.display = 'none';
+            });
+            
+            // 선택된 메시지들 찾아서 표시
+            selectedMessageIds.forEach(selectedMessageId => {
+                const selectedMessage = document.querySelector(`[data-message-id="${selectedMessageId}"]`) ||
+                                      document.querySelector(`.select-for-viewer-btn[data-message-id="${selectedMessageId}"]`)?.closest('.message');
+                if (selectedMessage) {
+                    selectedMessage.classList.add('selected-for-viewer');
+                    const indicator = selectedMessage.querySelector('.viewer-selected-indicator');
+                    const selectButton = selectedMessage.querySelector('.select-for-viewer-btn');
+                    const deselectButton = selectedMessage.querySelector('.deselect-for-viewer-btn');
+                    if (indicator) {
+                        indicator.style.display = 'flex';
+                        indicator.dataset.messageId = selectedMessageId;
+                    }
+                    if (selectButton) selectButton.style.display = 'none';
+                    if (deselectButton) deselectButton.style.display = 'flex';
+                }
+            });
+        }
+
+        async function toggleViewer(enabled) {
+            try {
+                const response = await fetch(`/creation/api/projects/${projectId}/viewer-settings`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ viewer_enabled: enabled })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    updateViewerUI(data);
+                }
+            } catch (e) {
+                console.error('Failed to update viewer settings:', e);
+            }
+        }
+
+        async function deselectMessageForViewer(messageId) {
+            try {
+                // 현재 선택된 메시지 ID 목록 가져오기
+                const currentSettings = await fetch(`/creation/api/projects/${projectId}/viewer-settings`).then(r => r.json());
+                const currentSelectedIds = currentSettings.viewer_selected_message_ids || [];
+                
+                // 해당 메시지 ID 제거
+                const newSelectedIds = currentSelectedIds.filter(id => id !== messageId);
+                
+                const response = await fetch(`/creation/api/projects/${projectId}/viewer-settings`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ viewer_selected_message_ids: newSelectedIds })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    updateViewerUI(data);
+                } else {
+                    console.error('Failed to deselect message:', data.error);
+                }
+            } catch (e) {
+                console.error('Failed to deselect message:', e);
+            }
+        }
+
+        async function selectMessageForViewer(messageId, messageContent = null) {
+            try {
+                // 현재 선택된 메시지 ID 목록 가져오기
+                const currentSettings = await fetch(`/creation/api/projects/${projectId}/viewer-settings`).then(r => r.json());
+                const currentSelectedIds = currentSettings.viewer_selected_message_ids || [];
+                
+                // 이미 선택된 메시지인지 확인
+                if (currentSelectedIds.includes(messageId)) {
+                    return; // 이미 선택됨
+                }
+                
+                // 새 메시지 ID 추가
+                const newSelectedIds = [...currentSelectedIds, messageId];
+                
+                const response = await fetch(`/creation/api/projects/${projectId}/viewer-settings`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ viewer_selected_message_ids: newSelectedIds })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    updateViewerUI(data);
+                } else {
+                    console.error('Failed to select message:', data.error);
+                }
+            } catch (e) {
+                console.error('Failed to select message:', e);
+            }
+        }
+
+        // 뷰어 토글 이벤트
+        const viewerToggle = document.getElementById('viewer-toggle');
+        if (viewerToggle) {
+            viewerToggle.addEventListener('change', (e) => {
+                toggleViewer(e.target.checked);
+            });
+        }
+
+        // --- Initialize ---
+        loadModels();
+        loadHistory();
+        loadViewerSettings();
+    });
 </script>
 {% endblock %}
-

templates/webnovels.html

@@ -1051,6 +1051,7 @@
                         <button class="webnovel-item-btn" onclick="viewWebnovelSummary(${file.id}, '${escapeHtml(file.original_filename)}')" style="background: #17a2b8; color: white; margin-right: 8px;">📋 요약 보기</button>
                         <button class="webnovel-item-btn" onclick="viewWebnovelContent(${file.id}, '${escapeHtml(file.original_filename)}')" style="margin-right: 8px;">📖 내용 보기</button>
                         <button class="webnovel-item-btn" onclick="viewGraphRAG(${file.id}, '${escapeHtml(file.original_filename)}')" style="background: #9c27b0; color: white; margin-right: 8px;">🔗 회차별 캐릭터 관계 분석</button>
+                        <button class="webnovel-item-btn" onclick="deleteWebnovelFile(${file.id}, '${escapeHtml(file.original_filename)}')" style="background: #dc3545; color: white; margin-right: 8px;">🗑️ 삭제</button>
                         <button class="webnovel-item-btn" onclick="viewGraphRAGByEvent(${file.id}, '${escapeHtml(file.original_filename)}')" style="background: #e91e63; color: white; margin-right: 8px;">📅 사건별 캐릭터 관계 분석</button>
                         <button class="webnovel-item-btn" onclick="viewGraphRAGVisualization(${file.id}, '${escapeHtml(file.original_filename)}')" style="background: #28a745; color: white; margin-right: 8px;">📊 캐릭터 관계도 시각화</button>
                         <button class="webnovel-item-btn" onclick="viewGraphRAGVisualizationByEvent(${file.id}, '${escapeHtml(file.original_filename)}')" style="background: #ff9800; color: white;">📊 캐릭터 관계도 시각화 (사건순)</button>
@@ -1715,6 +1716,30 @@
             });
         }
 
+        async function deleteWebnovelFile(fileId, fileName) {
+            if (!confirm(`'${fileName}' 파일을 삭제하시겠습니까?\n연관된 모든 파일도 함께 삭제되며, 복구할 수 없습니다.`)) {
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/files/${fileId}`, {
+                    method: 'DELETE',
+                    credentials: 'include'
+                });
+
+                if (response.ok) {
+                    alert('파일이 성공적으로 삭제되었습니다.');
+                    loadWebnovels(); // 목록 새로고침
+                } else {
+                    const data = await response.json();
+                    alert('삭제 실패: ' + (data.error || '알 수 없는 오류'));
+                }
+            } catch (error) {
+                console.error('Delete error:', error);
+                alert('서버 통신 실패');
+            }
+        }
+
         async function viewGraphRAG(fileId, fileName) {
             const modal = document.getElementById('graphRAGModal');
             const title = document.getElementById('graphRAGModalTitle');