app-BACKUP-LAST.py

from fastapi import FastAPI, BackgroundTasks
from fastapi.responses import HTMLResponse, JSONResponse, Response
from fastapi.staticfiles import StaticFiles
import pathlib, os, uvicorn, base64, json
from typing import Dict, List, Any
import asyncio
import logging
import threading
import concurrent.futures

# 로깅 설정
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
logger = logging.getLogger(__name__)

BASE = pathlib.Path(__file__).parent
app = FastAPI()
app.mount("/static", StaticFiles(directory=BASE), name="static")

# PDF 디렉토리 설정
PDF_DIR = BASE / "pdf"
if not PDF_DIR.exists():
    PDF_DIR.mkdir(parents=True)

# 캐시 디렉토리 설정
CACHE_DIR = BASE / "cache"
if not CACHE_DIR.exists():
    CACHE_DIR.mkdir(parents=True)

# 전역 캐시 객체
pdf_cache: Dict[str, Dict[str, Any]] = {}
# 캐싱 락
cache_locks = {}

# PDF 파일 목록 가져오기
def get_pdf_files():
    pdf_files = []
    if PDF_DIR.exists():
        pdf_files = [f for f in PDF_DIR.glob("*.pdf")]
    return pdf_files

# PDF 썸네일 생성 및 프로젝트 데이터 준비
def generate_pdf_projects():
    projects_data = []
    pdf_files = get_pdf_files()
    
    for pdf_file in pdf_files:
        projects_data.append({
            "path": str(pdf_file),
            "name": pdf_file.stem,
            "cached": pdf_file.stem in pdf_cache and pdf_cache[pdf_file.stem].get("status") == "completed"
        })
    
    return projects_data

# 캐시 파일 경로 생성
def get_cache_path(pdf_name: str):
    return CACHE_DIR / f"{pdf_name}_cache.json"

# 최적화된 PDF 페이지 캐싱 함수
async def cache_pdf(pdf_path: str):
    try:
        import fitz  # PyMuPDF
        
        pdf_file = pathlib.Path(pdf_path)
        pdf_name = pdf_file.stem
        
        # 락 생성 - 동일한 PDF에 대해 동시 캐싱 방지
        if pdf_name not in cache_locks:
            cache_locks[pdf_name] = threading.Lock()
        
        # 이미 캐싱 중이거나 캐싱 완료된 PDF는 건너뛰기
        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
            logger.info(f"PDF {pdf_name} 이미 캐싱 완료 또는 진행 중")
            return
        
        with cache_locks[pdf_name]:
            # 이중 체크 - 락 획득 후 다시 확인
            if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
                return
            
            # 캐시 상태 업데이트
            pdf_cache[pdf_name] = {"status": "processing", "progress": 0, "pages": []}
            
            # 캐시 파일이 이미 존재하는지 확인
            cache_path = get_cache_path(pdf_name)
            if cache_path.exists():
                try:
                    with open(cache_path, "r") as cache_file:
                        cached_data = json.load(cache_file)
                        if cached_data.get("status") == "completed" and cached_data.get("pages"):
                            pdf_cache[pdf_name] = cached_data
                            pdf_cache[pdf_name]["status"] = "completed"
                            logger.info(f"캐시 파일에서 {pdf_name} 로드 완료")
                            return
                except Exception as e:
                    logger.error(f"캐시 파일 로드 실패: {e}")
            
            # PDF 파일 열기
            doc = fitz.open(pdf_path)
            total_pages = doc.page_count
            
            # 미리 썸네일만 먼저 생성 (빠른 UI 로딩용)
            if total_pages > 0:
                # 첫 페이지 썸네일 생성
                page = doc[0]
                pix_thumb = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
                thumb_data = pix_thumb.tobytes("png")
                b64_thumb = base64.b64encode(thumb_data).decode('utf-8')
                thumb_src = f"data:image/png;base64,{b64_thumb}"
                
                # 썸네일 페이지만 먼저 캐시
                pdf_cache[pdf_name]["pages"] = [{"thumb": thumb_src, "src": ""}]
                pdf_cache[pdf_name]["progress"] = 1
                pdf_cache[pdf_name]["total_pages"] = total_pages
            
            # 이미지 해상도 및 압축 품질 설정 (성능 최적화)
            scale_factor = 1.0  # 기본 해상도 (낮출수록 로딩 빠름)
            jpeg_quality = 80   # JPEG 품질 (낮출수록 용량 작아짐)
            
            # 페이지 처리 작업자 함수 (병렬 처리용)
            def process_page(page_num):
                try:
                    page = doc[page_num]
                    
                    # 이미지로 변환 시 매트릭스 스케일링 적용 (성능 최적화)
                    pix = page.get_pixmap(matrix=fitz.Matrix(scale_factor, scale_factor))
                    
                    # JPEG 형식으로 인코딩 (PNG보다 크기 작음)
                    img_data = pix.tobytes("jpeg", jpeg_quality)
                    b64_img = base64.b64encode(img_data).decode('utf-8')
                    img_src = f"data:image/jpeg;base64,{b64_img}"
                    
                    # 썸네일 (첫 페이지가 아니면 빈 문자열)
                    thumb_src = "" if page_num > 0 else pdf_cache[pdf_name]["pages"][0]["thumb"]
                    
                    return {
                        "page_num": page_num,
                        "src": img_src,
                        "thumb": thumb_src
                    }
                except Exception as e:
                    logger.error(f"페이지 {page_num} 처리 오류: {e}")
                    return {
                        "page_num": page_num,
                        "src": "",
                        "thumb": "",
                        "error": str(e)
                    }
            
            # 병렬 처리로 모든 페이지 처리
            pages = [None] * total_pages
            processed_count = 0
            
            # 페이지 배치 처리 (메모리 관리)
            batch_size = 5  # 한 번에 처리할 페이지 수
            
            for batch_start in range(0, total_pages, batch_size):
                batch_end = min(batch_start + batch_size, total_pages)
                current_batch = list(range(batch_start, batch_end))
                
                # 병렬 처리로 배치 페이지 렌더링
                with concurrent.futures.ThreadPoolExecutor(max_workers=min(5, batch_size)) as executor:
                    batch_results = list(executor.map(process_page, current_batch))
                
                # 결과 저장
                for result in batch_results:
                    page_num = result["page_num"]
                    pages[page_num] = {
                        "src": result["src"],
                        "thumb": result["thumb"]
                    }
                    
                    processed_count += 1
                    progress = round(processed_count / total_pages * 100)
                    pdf_cache[pdf_name]["progress"] = progress
                
                # 중간 저장
                pdf_cache[pdf_name]["pages"] = pages
                try:
                    with open(cache_path, "w") as cache_file:
                        json.dump({
                            "status": "processing", 
                            "progress": pdf_cache[pdf_name]["progress"], 
                            "pages": pdf_cache[pdf_name]["pages"],
                            "total_pages": total_pages
                        }, cache_file)
                except Exception as e:
                    logger.error(f"중간 캐시 저장 실패: {e}")
            
            # 캐싱 완료
            pdf_cache[pdf_name] = {
                "status": "completed",
                "progress": 100,
                "pages": pages,
                "total_pages": total_pages
            }
            
            # 최종 캐시 파일 저장
            try:
                with open(cache_path, "w") as cache_file:
                    json.dump(pdf_cache[pdf_name], cache_file)
                logger.info(f"PDF {pdf_name} 캐싱 완료, {total_pages}페이지")
            except Exception as e:
                logger.error(f"최종 캐시 저장 실패: {e}")
            
    except Exception as e:
        import traceback
        logger.error(f"PDF 캐싱 오류: {str(e)}\n{traceback.format_exc()}")
        if pdf_name in pdf_cache:
            pdf_cache[pdf_name]["status"] = "error"
            pdf_cache[pdf_name]["error"] = str(e)

# 시작 시 모든 PDF 파일 캐싱
async def init_cache_all_pdfs():
    logger.info("PDF 캐싱 작업 시작")
    pdf_files = get_pdf_files()
    
    # 이미 캐시된 PDF 파일 로드 (빠른 시작을 위해 먼저 수행)
    for cache_file in CACHE_DIR.glob("*_cache.json"):
        try:
            pdf_name = cache_file.stem.replace("_cache", "")
            with open(cache_file, "r") as f:
                cached_data = json.load(f)
                if cached_data.get("status") == "completed" and cached_data.get("pages"):
                    pdf_cache[pdf_name] = cached_data
                    pdf_cache[pdf_name]["status"] = "completed"
                    logger.info(f"기존 캐시 로드: {pdf_name}")
        except Exception as e:
            logger.error(f"캐시 파일 로드 오류: {str(e)}")
    
    # 캐싱되지 않은 PDF 파일 병렬 처리
    await asyncio.gather(*[asyncio.create_task(cache_pdf(str(pdf_file))) 
                          for pdf_file in pdf_files 
                          if pdf_file.stem not in pdf_cache 
                          or pdf_cache[pdf_file.stem].get("status") != "completed"])

# 백그라운드 작업 시작 함수
@app.on_event("startup")
async def startup_event():
    # 백그라운드 태스크로 캐싱 실행
    asyncio.create_task(init_cache_all_pdfs())

# API 엔드포인트: PDF 프로젝트 목록
@app.get("/api/pdf-projects")
async def get_pdf_projects_api():
    return generate_pdf_projects()

# API 엔드포인트: PDF 썸네일 제공 (최적화)
@app.get("/api/pdf-thumbnail")
async def get_pdf_thumbnail(path: str):
    try:
        pdf_file = pathlib.Path(path)
        pdf_name = pdf_file.stem
        
        # 캐시에서 썸네일 가져오기
        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("pages"):
            if pdf_cache[pdf_name]["pages"][0].get("thumb"):
                return {"thumbnail": pdf_cache[pdf_name]["pages"][0]["thumb"]}
            
        # 캐시에 없으면 생성 (더 작고 빠른 썸네일)
        import fitz
        doc = fitz.open(path)
        if doc.page_count > 0:
            page = doc[0]
            pix = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
            img_data = pix.tobytes("jpeg", 70)  # JPEG 압축 사용
            b64_img = base64.b64encode(img_data).decode('utf-8')
            
            # 백그라운드에서 캐싱 시작
            asyncio.create_task(cache_pdf(path))
            
            return {"thumbnail": f"data:image/jpeg;base64,{b64_img}"}
        
        return {"thumbnail": None}
    except Exception as e:
        logger.error(f"썸네일 생성 오류: {str(e)}")
        return {"error": str(e), "thumbnail": None}

# API 엔드포인트: 캐시 상태 확인
@app.get("/api/cache-status")
async def get_cache_status(path: str = None):
    if path:
        pdf_file = pathlib.Path(path)
        pdf_name = pdf_file.stem
        if pdf_name in pdf_cache:
            return pdf_cache[pdf_name]
        return {"status": "not_cached"}
    else:
        return {name: {"status": info["status"], "progress": info.get("progress", 0)} 
                for name, info in pdf_cache.items()}

# API 엔드포인트: 캐시된 PDF 콘텐츠 제공 (점진적 로딩 지원)
@app.get("/api/cached-pdf")
async def get_cached_pdf(path: str, background_tasks: BackgroundTasks):
    try:
        pdf_file = pathlib.Path(path)
        pdf_name = pdf_file.stem
        
        # 캐시 확인
        if pdf_name in pdf_cache:
            status = pdf_cache[pdf_name].get("status", "")
            
            # 완료된 경우 전체 데이터 반환
            if status == "completed":
                return pdf_cache[pdf_name]
            
            # 처리 중인 경우 현재까지의 페이지 데이터 포함 (점진적 로딩)
            elif status == "processing":
                progress = pdf_cache[pdf_name].get("progress", 0)
                pages = pdf_cache[pdf_name].get("pages", [])
                total_pages = pdf_cache[pdf_name].get("total_pages", 0)
                
                # 일부만 처리된 경우에도 사용 가능한 페이지 제공
                return {
                    "status": "processing", 
                    "progress": progress,
                    "pages": pages,
                    "total_pages": total_pages,
                    "available_pages": len([p for p in pages if p and p.get("src")])
                }
        
        # 캐시가 없는 경우 백그라운드에서 캐싱 시작
        background_tasks.add_task(cache_pdf, path)
        return {"status": "started", "progress": 0}
        
    except Exception as e:
        logger.error(f"캐시된 PDF 제공 오류: {str(e)}")
        return {"error": str(e), "status": "error"}

# API 엔드포인트: PDF 원본 콘텐츠 제공(캐시가 없는 경우)
@app.get("/api/pdf-content")
async def get_pdf_content(path: str, background_tasks: BackgroundTasks):
    try:
        # 캐싱 상태 확인
        pdf_file = pathlib.Path(path)
        if not pdf_file.exists():
            return JSONResponse(content={"error": f"파일을 찾을 수 없습니다: {path}"}, status_code=404)
        
        pdf_name = pdf_file.stem
        
        # 캐시된 경우 리다이렉트
        if pdf_name in pdf_cache and (pdf_cache[pdf_name].get("status") == "completed" 
                                     or (pdf_cache[pdf_name].get("status") == "processing" 
                                         and pdf_cache[pdf_name].get("progress", 0) > 10)):
            return JSONResponse(content={"redirect": f"/api/cached-pdf?path={path}"})
        
        # 파일 읽기
        with open(path, "rb") as pdf_file:
            content = pdf_file.read()
            
        # 파일명 처리
        import urllib.parse
        filename = pdf_file.name
        encoded_filename = urllib.parse.quote(filename)
        
        # 백그라운드에서 캐싱 시작
        background_tasks.add_task(cache_pdf, path)
        
        # 응답 헤더 설정
        headers = {
            "Content-Type": "application/pdf",
            "Content-Disposition": f"inline; filename=\"{encoded_filename}\"; filename*=UTF-8''{encoded_filename}"
        }
        
        return Response(content=content, media_type="application/pdf", headers=headers)
    except Exception as e:
        import traceback
        error_details = traceback.format_exc()
        logger.error(f"PDF 콘텐츠 로드 오류: {str(e)}\n{error_details}")
        return JSONResponse(content={"error": str(e)}, status_code=500)

# HTML 파일 읽기 함수
def get_html_content():
    html_path = BASE / "flipbook_template.html"
    if html_path.exists():
        with open(html_path, "r", encoding="utf-8") as f:
            return f.read()
    return HTML  # 기본 HTML 사용

# HTML 문자열 (UI 수정 버전)
HTML = """
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>FlipBook Space</title>
  <link rel="stylesheet" href="/static/flipbook.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="/static/three.js"></script>
  <script src="/static/iscroll.js"></script>
  <script src="/static/mark.js"></script>
  <script src="/static/mod3d.js"></script>
  <script src="/static/pdf.js"></script>
  <script src="/static/flipbook.js"></script>
  <script src="/static/flipbook.book3.js"></script>
  <script src="/static/flipbook.scroll.js"></script>
  <script src="/static/flipbook.swipe.js"></script>
  <script src="/static/flipbook.webgl.js"></script>
  <style>
  /* 전체 사이트 파스텔톤 테마 */
  :root {
    --primary-color: #a5d8ff; /* 파스텔 블루 */
    --secondary-color: #ffd6e0; /* 파스텔 핑크 */
    --tertiary-color: #c3fae8; /* 파스텔 민트 */
    --accent-color: #d0bfff; /* 파스텔 퍼플 */
    --bg-color: #f8f9fa; /* 밝은 배경 */
    --text-color: #495057; /* 부드러운 어두운 색 */
    --card-bg: #ffffff; /* 카드 배경색 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
  }


    body {
      margin: 0;
      background: var(--bg-color);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: var(--text-color);
      /* 새로운 퍼플 계통 고급스러운 그라디에이션 배경 */
      background-image: linear-gradient(135deg, #2a0845 0%, #6441a5 50%, #c9a8ff 100%);
      background-attachment: fixed;
    }

    /* 뷰어 모드일 때 배경 변경 */
    .viewer-mode {
      background-image: linear-gradient(135deg, #30154e 0%, #6b47ad 50%, #d5b8ff 100%) !important;
    }


  /* 헤더 제목 제거 및 Home 버튼 레이어 처리 */
  .floating-home {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
  }
  
  .floating-home:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
  }
  
  .floating-home .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 22px;
    color: var(--primary-color);
    transition: var(--transition);
  }
  
  .floating-home:hover .icon {
    color: #8bc5f8;
  }
  
  .floating-home .title {
    position: absolute;
    left: 70px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 20px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
  }
  
  .floating-home:hover .title {
    opacity: 1;
    transform: translateX(0);
  }

  #home, #viewerPage {
    padding-top: 100px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
  }

  /* 업로드 버튼 스타일 */
  .upload-container {
    display: flex;
    margin-bottom: 30px;
    justify-content: center;
  }

  button.upload {
    all: unset;
    cursor: pointer;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    background: white;
    margin: 0 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }

  button.upload::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    opacity: 0.08;
    z-index: -1;
  }

  button.upload:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

  button.upload:hover::before {
    opacity: 0.15;
  }

  button.upload i {
    margin-right: 8px;
    font-size: 20px;
  }

  /* 그리드 및 카드 스타일 */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 36px;
  }

  .card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    width: 100%;
    height: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    opacity: 0.06;
    z-index: 1;
  }

  .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
  }

  .card img {
    width: 65%;
    height: auto;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    z-index: 3;
    transition: var(--transition);
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }

  .card:hover img {
    transform: translate(-50%, -65%) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }

  .card p {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    z-index: 4;
    transition: var(--transition);
  }

  .card:hover p {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  /* 캐시 상태 뱃지 */
  .cached-status {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-color);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    z-index: 5;
    box-shadow: var(--shadow-sm);
  }

  /* 뷰어 스타일 */
  #viewer {
    width: 90%;
    height: 90vh;
    max-width: 90%;
    margin: 0;
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius-lg);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    max-height: calc(90vh - 40px);
    aspect-ratio: auto;
    object-fit: contain;
    overflow: hidden;
  }

  /* FlipBook 컨트롤바 스타일 */
  .flipbook-container .fb3d-menu-bar {
    z-index: 2000 !important;
    opacity: 1 !important;
    bottom: 0 !important;
    background-color: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    padding: 12px 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
  }

  .flipbook-container .fb3d-menu-bar > ul > li > img,
  .flipbook-container .fb3d-menu-bar > ul > li > div {
    opacity: 1 !important;
    transform: scale(1.2) !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)) !important;
  }

  .flipbook-container .fb3d-menu-bar > ul > li {
    margin: 0 12px !important;
  }

  /* 메뉴 툴팁 스타일 */
  .flipbook-container .fb3d-menu-bar > ul > li > span {
    background-color: rgba(0,0,0,0.7) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    bottom: 55px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    letter-spacing: 0.3px !important;
  }

  /* 뷰어 모드일 때 배경 오버레이 */
  .viewer-mode {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
  }

  /* 뷰어 페이지 배경 */
  #viewerPage {
    background: transparent;
  }

  /* 로딩 애니메이션 */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .loading-spinner {
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    animation: spin 1.5s ease-in-out infinite;
  }

  .loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 9999;
  }

  .loading-text {
    margin-top: 20px;
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
  }

  /* 페이지 전환 애니메이션 */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .fade-in {
    animation: fadeIn 0.5s ease-out;
  }

  /* 추가 스타일 */
  .section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 30px 0 15px;
    color: var(--text-color);
  }

  .no-projects {
    text-align: center;
    margin: 40px 0;
    color: var(--text-color);
    font-size: 16px;
  }

  /* 프로그레스 바 */
  .progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 15px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  /* 헤더 로고 및 타이틀 */
  .library-header {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 100;
    pointer-events: none;
  }
  
.library-header .title {
  display: inline-block;
  padding: 8px 24px; /* 패딩 축소 */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 25px; /* 테두리 모서리 축소 */
  box-shadow: var(--shadow-md);
  font-size: 1.25rem; /* 글자 크기 축소 (1.5rem에서 1.25rem으로) */
  font-weight: 600;
  background-image: linear-gradient(120deg, #8e74eb 0%, #9d66ff 100%); /* 제목 색상도 바탕화면과 어울리게 변경 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: all;
}
  
  /* 점진적 로딩 표시 */
  .loading-pages {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    font-size: 14px;
    color: var(--text-color);
    z-index: 9998;
    text-align: center;
  }

  /* 반응형 디자인 */
  @media (max-width: 768px) {
    .grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 16px;
    }
    
    .card {
      height: 240px;
    }
    
    .library-header .title {
      font-size: 1.25rem;
      padding: 10px 20px;
    }
    
    .floating-home {
      width: 50px;
      height: 50px;
    }
    
    .floating-home .icon {
      font-size: 18px;
    }
  }
  </style>
</head>
<body>
  <!-- 제목을 Home 버튼과 함께 레이어로 처리 -->
  <div id="homeButton" class="floating-home" style="display:none;">
    <div class="icon"><i class="fas fa-home"></i></div>
    <div class="title">홈으로 돌아가기</div>
  </div>
  
  <!-- 센터 정렬된 타이틀 -->
  <div class="library-header">
    <div class="title">FlipBook Maker</div>
  </div>

  <section id="home" class="fade-in">
    <div class="upload-container">
      <button class="upload" id="pdfUploadBtn">
        <i class="fas fa-file-pdf"></i> PDF 추가
      </button>
      <input id="pdfInput" type="file" accept="application/pdf" style="display:none">
    </div>
    
    <div class="section-title">내 프로젝트</div>
    <div class="grid" id="grid">
      <!-- 카드가 여기에 동적으로 추가됩니다 -->
    </div>
    <div id="noProjects" class="no-projects" style="display: none;">
      프로젝트가 없습니다. PDF를 추가하여 시작하세요.
    </div>
  </section>

  <section id="viewerPage" style="display:none">
    <div id="viewer"></div>
    <div id="loadingPages" class="loading-pages" style="display:none;">페이지 로딩 중... <span id="loadingPagesCount">0/0</span></div>
  </section>

  <script>
    let projects=[], fb=null;
    const grid=document.getElementById('grid'), viewer=document.getElementById('viewer');
    pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';

    // 서버에서 미리 로드된 PDF 프로젝트
    let serverProjects = [];
    
    // 현재 페이지 로딩 상태
    let currentLoadingPdfPath = null;
    let pageLoadingInterval = null;

    /* 🔊 오디오 unlock – 내장 Audio 와 같은 MP3 경로 사용 */
    ['click','touchstart'].forEach(evt=>{
      document.addEventListener(evt,function u(){new Audio('static/turnPage2.mp3')
            .play().then(a=>a.pause()).catch(()=>{});document.removeEventListener(evt,u,{capture:true});},
            {once:true,capture:true});
    });
    
    /* ── 유틸 ── */
    function $id(id){return document.getElementById(id)}
    
    // 파일 업로드 이벤트 처리
    document.addEventListener("DOMContentLoaded", function() {
      console.log("DOM 로드 완료, 이벤트 설정 시작");
      
      // PDF 업로드 버튼
      const pdfBtn = document.getElementById('pdfUploadBtn');
      const pdfInput = document.getElementById('pdfInput');
      
      if (pdfBtn && pdfInput) {
        console.log("PDF 업로드 버튼 찾음");
        
        // 버튼 클릭 시 파일 입력 트리거
        pdfBtn.addEventListener('click', function() {
          console.log("PDF 버튼 클릭됨");
          pdfInput.click();
        });
        
        // 파일 선택 시 처리
        pdfInput.addEventListener('change', function(e) {
          console.log("PDF 파일 선택됨:", e.target.files.length);
          const file = e.target.files[0];
          if (!file) return;
          
          showLoading("PDF 로딩 중...");
          
          const reader = new FileReader();
          reader.onload = function(event) {
            pdfjsLib.getDocument({data: event.target.result}).promise.then(async function(pdf) {
              const pages = [];
              
              for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                updateLoading(`PDF 페이지 로딩 중... (${pageNum}/${pdf.numPages})`);
                
                const page = await pdf.getPage(pageNum);
                const viewport = page.getViewport({scale: 1});
                const canvas = document.createElement('canvas');
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                
                await page.render({
                  canvasContext: canvas.getContext('2d'),
                  viewport: viewport
                }).promise;
                
                pages.push({
                  src: canvas.toDataURL(),
                  thumb: canvas.toDataURL()
                });
              }
              
              hideLoading();
              save(pages, file.name.replace('.pdf', ''));
            }).catch(function(error) {
              console.error("PDF 로딩 오류:", error);
              hideLoading();
              showError("PDF 로딩 중 오류가 발생했습니다: " + error.message);
            });
          };
          
          reader.onerror = function(error) {
            console.error("파일 읽기 오류:", error);
            hideLoading();
            showError("파일을 읽는 중 오류가 발생했습니다.");
          };
          
          reader.readAsArrayBuffer(file);
        });
      } else {
        console.error("PDF 업로드 요소를 찾을 수 없음");
      }
      
      // 서버 PDF 로드 및 캐시 상태 확인
      loadServerPDFs();
      
      // 캐시 상태를 주기적으로 확인
      setInterval(checkCacheStatus, 3000);
    });
    
    function addCard(i, thumb, title, isCached = false) {
      const d = document.createElement('div');
      d.className = 'card fade-in';
      d.onclick = () => open(i);
      
      // 제목 처리
      const displayTitle = title ? 
        (title.length > 15 ? title.substring(0, 15) + '...' : title) : 
        '프로젝트 ' + (i+1);
      
      // 캐시 상태 뱃지 추가
      const cachedBadge = isCached ? 
        '<div class="cached-status">캐시됨</div>' : '';
      
      d.innerHTML = `
        <div class="card-inner">
          ${cachedBadge}
          <img src="${thumb}" alt="${displayTitle}" loading="lazy">
          <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
        </div>
      `;
      grid.appendChild(d);
      
      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
      $id('noProjects').style.display = 'none';
    }

    /* ── 프로젝트 저장 ── */
    function save(pages, title, isCached = false){
      const id=projects.push(pages)-1;
      addCard(id, pages[0].thumb, title, isCached);
    }

    /* ── 서버 PDF 로드 및 캐시 상태 확인 ── */
    async function loadServerPDFs() {
      try {
        // 로딩 표시 추가
        if (document.querySelectorAll('.card').length === 0) {
          showLoading("라이브러리 로딩 중...");
        }
        
        // 먼저 캐시 상태 확인
        const cacheStatusRes = await fetch('/api/cache-status');
        const cacheStatus = await cacheStatusRes.json();
        
        // PDF 프로젝트 목록 가져오기
        const response = await fetch('/api/pdf-projects');
        serverProjects = await response.json();
        
        if (serverProjects.length === 0) {
          hideLoading();
          $id('noProjects').style.display = 'block';
          return;
        }
        
        // 서버 PDF 로드 및 썸네일 생성 (병렬 처리로 최적화)
        const thumbnailPromises = serverProjects.map(async (project, index) => {
          updateLoading(`PDF 프로젝트 로딩 중... (${index+1}/${serverProjects.length})`);
          
          const pdfName = project.name;
          const isCached = cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed";
          
          try {
            // 썸네일 가져오기
            const response = await fetch(`/api/pdf-thumbnail?path=${encodeURIComponent(project.path)}`);
            const data = await response.json();
            
            if(data.thumbnail) {
              const pages = [{
                src: data.thumbnail,
                thumb: data.thumbnail,
                path: project.path,
                cached: isCached
              }];
              
              return {
                pages,
                name: project.name,
                isCached
              };
            }
          } catch (err) {
            console.error(`썸네일 로드 오류 (${project.name}):`, err);
          }
          
          return null;
        });
        
        // 모든 썸네일 요청 기다리기
        const results = await Promise.all(thumbnailPromises);
        
        // 성공적으로 가져온 결과만 표시
        results.filter(result => result !== null).forEach(result => {
          save(result.pages, result.name, result.isCached);
        });
        
        hideLoading();
        
        // 프로젝트가 없을 경우 메시지 표시
        if (document.querySelectorAll('.card').length === 0) {
          $id('noProjects').style.display = 'block';
        }
      } catch(error) {
        console.error('서버 PDF 로드 실패:', error);
        hideLoading();
        showError("라이브러리 로딩 중 오류가 발생했습니다.");
      }
    }

    /* ── 캐시 상태 정기적으로 확인 ── */
    async function checkCacheStatus() {
      try {
        const response = await fetch('/api/cache-status');
        const cacheStatus = await response.json();
        
        // 현재 카드 상태 업데이트
        const cards = document.querySelectorAll('.card');
        
        for(let i = 0; i < cards.length; i++) {
          if(projects[i] && projects[i][0] && projects[i][0].path) {
            const pdfPath = projects[i][0].path;
            const pdfName = pdfPath.split('/').pop().replace('.pdf', '');
            
            // 캐시 상태 뱃지 업데이트
            let badgeEl = cards[i].querySelector('.cached-status');
            
            if(cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed") {
              if(!badgeEl) {
                badgeEl = document.createElement('div');
                badgeEl.className = 'cached-status';
                badgeEl.textContent = '캐시됨';
                cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
              } else if (badgeEl.textContent !== '캐시됨') {
                badgeEl.textContent = '캐시됨';
                badgeEl.style.background = 'var(--accent-color)';
              }
              projects[i][0].cached = true;
            } else if(cacheStatus[pdfName] && cacheStatus[pdfName].status === "processing") {
              if(!badgeEl) {
                badgeEl = document.createElement('div');
                badgeEl.className = 'cached-status';
                cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
              }
              badgeEl.textContent = `${cacheStatus[pdfName].progress}%`;
              badgeEl.style.background = 'var(--secondary-color)';
            }
          }
        }
        
        // 현재 로딩 중인 PDF가 있으면 상태 확인
        if (currentLoadingPdfPath && pageLoadingInterval) {
          const pdfName = currentLoadingPdfPath.split('/').pop().replace('.pdf', '');
          
          if (cacheStatus[pdfName]) {
            const status = cacheStatus[pdfName].status;
            const progress = cacheStatus[pdfName].progress || 0;
            
            if (status === "completed") {
              // 캐싱 완료 시
              clearInterval(pageLoadingInterval);
              $id('loadingPages').style.display = 'none';
              currentLoadingPdfPath = null;
              
              // 완료된 캐시로 플립북 다시 로드
              refreshFlipBook();
            } else if (status === "processing") {
              // 진행 중일 때 표시 업데이트
              $id('loadingPages').style.display = 'block';
              $id('loadingPagesCount').textContent = `${progress}%`;
            }
          }
        }
        
      } catch(error) {
        console.error('캐시 상태 확인 오류:', error);
      }
    }

    /* ── 카드 → FlipBook ── */
    async function open(i) {
      toggle(false);
      const pages = projects[i];
      
      // 기존 FlipBook 정리
      if(fb) {
        fb.destroy();
        viewer.innerHTML = '';
      }
      
      // 서버 PDF 또는 로컬 프로젝트 처리
      if(pages[0].path) {
        const pdfPath = pages[0].path;
        
        // 점진적 로딩 플래그 초기화
        let progressiveLoading = false;
        currentLoadingPdfPath = pdfPath;
        
        // 캐시 여부 확인
        if(pages[0].cached) {
          // 캐시된 PDF 데이터 가져오기
          showLoading("캐시된 PDF 로딩 중...");
          
          try {
            const response = await fetch(`/api/cached-pdf?path=${encodeURIComponent(pdfPath)}`);
            const cachedData = await response.json();
            
            if(cachedData.status === "completed" && cachedData.pages) {
              hideLoading();
              createFlipBook(cachedData.pages);
              currentLoadingPdfPath = null;
              return;
            } else if(cachedData.status === "processing" && cachedData.pages && cachedData.pages.length > 0) {
              // 일부 페이지가 이미 처리된 경우 점진적 로딩 사용
              hideLoading();
              createFlipBook(cachedData.pages);
              progressiveLoading = true;
              
              // 점진적 로딩 중임을 표시
              startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
            }
          } catch(error) {
            console.error("캐시 데이터 로드 오류:", error);
            // 캐시 로딩 실패 시 원본 PDF로 대체
          }
        }
        
        if (!progressiveLoading) {
          // 캐시가 없거나 로딩 실패 시 서버 PDF 로드
          showLoading("PDF 준비 중...");
          
          try {
            const response = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
            const data = await response.json();
            
            // 캐시로 리다이렉트된 경우
            if(data.redirect) {
              const redirectRes = await fetch(data.redirect);
              const cachedData = await redirectRes.json();
              
              if(cachedData.status === "completed" && cachedData.pages) {
                hideLoading();
                createFlipBook(cachedData.pages);
                currentLoadingPdfPath = null;
                return;
              } else if(cachedData.status === "processing" && cachedData.pages && cachedData.pages.length > 0) {
                // 일부 페이지가 이미 처리된 경우 점진적 로딩 사용
                hideLoading();
                createFlipBook(cachedData.pages);
                
                // 점진적 로딩 중임을 표시
                startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
                return;
              }
            }
            
            // 원본 PDF 로드 (ArrayBuffer 형태)
            const pdfResponse = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
            
            // JSON 응답인 경우 (리다이렉트 등)
            try {
              const jsonData = await pdfResponse.clone().json();
              if (jsonData.redirect) {
                const redirectRes = await fetch(jsonData.redirect);
                const cachedData = await redirectRes.json();
                
                if(cachedData.pages && cachedData.pages.length > 0) {
                  hideLoading();
                  createFlipBook(cachedData.pages);
                  
                  if(cachedData.status === "processing") {
                    startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
                  } else {
                    currentLoadingPdfPath = null;
                  }
                  return;
                }
              }
            } catch (e) {
              // JSON 파싱 실패 시 원본 PDF 데이터로 처리
            }
            
            // ArrayBuffer 형태의 PDF 데이터
            const pdfData = await pdfResponse.arrayBuffer();
            
            // PDF 로드 및 페이지 렌더링
            const pdf = await pdfjsLib.getDocument({data: pdfData}).promise;
            const pdfPages = [];
            
            for(let p = 1; p <= pdf.numPages; p++) {
              updateLoading(`페이지 준비 중... (${p}/${pdf.numPages})`);
              
              const pg = await pdf.getPage(p);
              const vp = pg.getViewport({scale: 1});
              const c = document.createElement('canvas');
              c.width = vp.width;
              c.height = vp.height;
              
              await pg.render({canvasContext: c.getContext('2d'), viewport: vp}).promise;
              pdfPages.push({src: c.toDataURL(), thumb: c.toDataURL()});
            }
            
            hideLoading();
            createFlipBook(pdfPages);
            currentLoadingPdfPath = null;
            
          } catch(error) {
            console.error('PDF 처리 중 오류 발생:', error);
            hideLoading();
            showError("PDF를 로드하는 중 오류가 발생했습니다.");
            currentLoadingPdfPath = null;
          }
        }
      } else {
        // 로컬 업로드된 프로젝트 실행
        createFlipBook(pages);
        currentLoadingPdfPath = null;
      }
    }

    /* ── 점진적 로딩 인디케이터 시작 ── */
    function startProgressiveLoadingIndicator(progress, totalPages) {
      // 진행 상태 표시 활성화
      $id('loadingPages').style.display = 'block';
      $id('loadingPagesCount').textContent = `${progress}%`;
      
      // 기존 인터벌 제거
      if (pageLoadingInterval) {
        clearInterval(pageLoadingInterval);
      }
      
      // 주기적으로 캐시 상태 확인 (2초마다)
      pageLoadingInterval = setInterval(async () => {
        if (!currentLoadingPdfPath) {
          clearInterval(pageLoadingInterval);
          $id('loadingPages').style.display = 'none';
          return;
        }
        
        try {
          const response = await fetch(`/api/cache-status?path=${encodeURIComponent(currentLoadingPdfPath)}`);
          const status = await response.json();
          
          // 상태 업데이트
          if (status.status === "completed") {
            clearInterval(pageLoadingInterval);
            $id('loadingPages').style.display = 'none';
            refreshFlipBook();  // 완료된 데이터로 새로고침
            currentLoadingPdfPath = null;
          } else if (status.status === "processing") {
            $id('loadingPagesCount').textContent = `${status.progress}%`;
          }
        } catch (e) {
          console.error("캐시 상태 확인 오류:", e);
        }
      }, 1000);
    }

    /* ── 플립북 새로고침 ── */
    async function refreshFlipBook() {
      if (!currentLoadingPdfPath || !fb) return;
      
      try {
        const response = await fetch(`/api/cached-pdf?path=${encodeURIComponent(currentLoadingPdfPath)}`);
        const cachedData = await response.json();
        
        if(cachedData.status === "completed" && cachedData.pages) {
          // 기존 플립북 정리
          fb.destroy();
          viewer.innerHTML = '';
          
          // 새 데이터로 재생성
          createFlipBook(cachedData.pages);
          currentLoadingPdfPath = null;
        }
      } catch (e) {
        console.error("플립북 새로고침 오류:", e);
      }
    }

    function createFlipBook(pages) {
      console.log('FlipBook 생성 시작. 페이지 수:', pages.length);
      
      try {
        // 화면 비율 계산
        const calculateAspectRatio = () => {
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const aspectRatio = windowWidth / windowHeight;
          
          // 너비 또는 높이 기준으로 최대 90% 제한
          let width, height;
          if (aspectRatio > 1) { // 가로 화면
            height = Math.min(windowHeight * 0.9, windowHeight - 40);
            width = height * aspectRatio * 0.8; // 가로 화면에서는 약간 줄임
            if (width > windowWidth * 0.9) {
              width = windowWidth * 0.9;
              height = width / (aspectRatio * 0.8);
            }
          } else { // 세로 화면
            width = Math.min(windowWidth * 0.9, windowWidth - 40);
            height = width / aspectRatio * 0.9; // 세로 화면에서는 약간 늘림
            if (height > windowHeight * 0.9) {
              height = windowHeight * 0.9;
              width = height * aspectRatio * 0.9;
            }
          }
          
          // 최적 사이즈 반환
          return {
            width: Math.round(width),
            height: Math.round(height)
          };
        };
        
        // 초기 화면 비율 계산
        const size = calculateAspectRatio();
        viewer.style.width = size.width + 'px';
        viewer.style.height = size.height + 'px';
        
        // 페이지 데이터 정제 (빈 페이지 처리)
        const validPages = pages.map(page => {
          // src가 없는 페이지는 로딩 중 이미지로 대체
          if (!page || !page.src) {
            return {
              src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+',
              thumb: page && page.thumb ? page.thumb : ''
            };
          }
          return page;
        });
        
        fb = new FlipBook(viewer, {
          pages: validPages,
          viewMode: 'webgl',
          autoSize: true,
          flipDuration: 800,
          backgroundColor: '#fff',
          /* 🔊 내장 사운드 */
          sound: true,
          assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
          controlsProps: {
            enableFullscreen: true,
            enableToc: true,
            enableDownload: false,
            enablePrint: false,
            enableZoom: true,
            enableShare: false,
            enableSearch: true,
            enableAutoPlay: true,
            enableAnnotation: false,
            enableSound: true,
            enableLightbox: false,
            layout: 10, // 레이아웃 옵션
            skin: 'light', // 스킨 스타일
            autoNavigationTime: 3600, // 자동 넘김 시간(초)
            hideControls: false, // 컨트롤 숨김 비활성화
            paddingTop: 10, // 상단 패딩
            paddingLeft: 10, // 좌측 패딩
            paddingRight: 10, // 우측 패딩
            paddingBottom: 10, // 하단 패딩
            pageTextureSize: 1024, // 페이지 텍스처 크기
            thumbnails: true, // 섬네일 활성화
            autoHideControls: false, // 자동 숨김 비활성화
            controlsTimeout: 8000 // 컨트롤 표시 시간 연장
          }
        });
        
        // 화면 크기 변경 시 FlipBook 크기 조정
        window.addEventListener('resize', () => {
          if (fb) {
            const newSize = calculateAspectRatio();
            viewer.style.width = newSize.width + 'px';
            viewer.style.height = newSize.height + 'px';
            fb.resize();
          }
        });
        
        // FlipBook 생성 후 컨트롤바 강제 표시
        setTimeout(() => {
          try {
            // 컨트롤바 관련 요소 찾기 및 스타일 적용
            const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
            if (menuBars && menuBars.length > 0) {
              menuBars.forEach(menuBar => {
                menuBar.style.display = 'block';
                menuBar.style.opacity = '1';
                menuBar.style.visibility = 'visible';
                menuBar.style.zIndex = '9999';
              });
            }
          } catch (e) {
            console.warn('컨트롤바 스타일 적용 중 오류:', e);
          }
        }, 1000);
        
        console.log('FlipBook 생성 완료');
      } catch (error) {
        console.error('FlipBook 생성 중 오류 발생:', error);
        showError("FlipBook을 생성하는 중 오류가 발생했습니다.");
      }
    }

    /* ── 네비게이션 ── */
    $id('homeButton').onclick=()=>{
      if(fb) {
        fb.destroy();
        viewer.innerHTML = '';
        fb = null;
      }
      toggle(true);
      
      // 로딩 인디케이터 정리
      if (pageLoadingInterval) {
        clearInterval(pageLoadingInterval);
        pageLoadingInterval = null;
      }
      $id('loadingPages').style.display = 'none';
      currentLoadingPdfPath = null;
    };

    function toggle(showHome){
      $id('home').style.display=showHome?'block':'none';
      $id('viewerPage').style.display=showHome?'none':'block';
      $id('homeButton').style.display=showHome?'none':'block';
      
      // 뷰어 모드일 때 스타일 변경
      if(!showHome) {
        document.body.classList.add('viewer-mode');
      } else {
        document.body.classList.remove('viewer-mode');
      }
    }

    /* -- 로딩 및 오류 표시 -- */
    function showLoading(message, progress = -1) {
      // 기존 로딩 컨테이너가 있다면 제거
      hideLoading();
      
      const loadingContainer = document.createElement('div');
      loadingContainer.className = 'loading-container fade-in';
      loadingContainer.id = 'loadingContainer';
      
      let progressBarHtml = '';
      if (progress >= 0) {
        progressBarHtml = `
          <div class="progress-bar-container">
            <div id="progressBar" class="progress-bar" style="width: ${progress}%;"></div>
          </div>
        `;
      }
      
      loadingContainer.innerHTML = `
        <div class="loading-spinner"></div>
        <p class="loading-text" id="loadingText">${message || '로딩 중...'}</p>
        ${progressBarHtml}
      `;
      
      document.body.appendChild(loadingContainer);
    }
    
    function updateLoading(message, progress = -1) {
      const loadingText = $id('loadingText');
      if (loadingText) {
        loadingText.textContent = message;
      }
      
      if (progress >= 0) {
        let progressBar = $id('progressBar');
        
        if (!progressBar) {
          const loadingContainer = $id('loadingContainer');
          if (loadingContainer) {
            const progressContainer = document.createElement('div');
            progressContainer.className = 'progress-bar-container';
            progressContainer.innerHTML = `<div id="progressBar" class="progress-bar" style="width: ${progress}%;"></div>`;
            loadingContainer.appendChild(progressContainer);
            progressBar = $id('progressBar');
          }
        } else {
          progressBar.style.width = `${progress}%`;
        }
      }
    }
    
    function hideLoading() {
      const loadingContainer = $id('loadingContainer');
      if (loadingContainer) {
        loadingContainer.remove();
      }
    }
    
    function showError(message) {
      // 기존 오류 메시지가 있다면 제거
      const existingError = $id('errorContainer');
      if (existingError) {
        existingError.remove();
      }
      
      const errorContainer = document.createElement('div');
      errorContainer.className = 'loading-container fade-in';
      errorContainer.id = 'errorContainer';
      errorContainer.innerHTML = `
        <p class="loading-text" style="color: #e74c3c;">${message}</p>
        <button id="errorCloseBtn" style="margin-top: 15px; padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">확인</button>
      `;
      
      document.body.appendChild(errorContainer);
      
      // 확인 버튼 클릭 이벤트
      $id('errorCloseBtn').onclick = () => {
        errorContainer.remove();
      };
      
      // 5초 후 자동으로 닫기
      setTimeout(() => {
        if ($id('errorContainer')) {
          $id('errorContainer').remove();
        }
      }, 5000);
    }
  </script>
</body>
</html>
"""

@app.get("/", response_class=HTMLResponse)
async def root():
    return get_html_content()

if __name__ == "__main__":
    uvicorn.run("app:app", host="0.0.0.0", port=int(os.getenv("PORT", 7860)))