app.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

# 로깅 설정
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]] = {}

# 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
        })
    
    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 in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
            logger.info(f"PDF {pdf_name} 이미 캐싱 완료 또는 진행 중")
            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)
                    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
        
        # 각 페이지를 이미지로 변환하고 캐싱
        pages = []
        for page_num in range(total_pages):
            # 진행 상태 업데이트
            progress = round((page_num + 1) / total_pages * 100)
            pdf_cache[pdf_name]["progress"] = progress
            
            # 페이지 렌더링
            page = doc[page_num]
            pix = page.get_pixmap()  # 기본 해상도로 렌더링
            img_data = pix.tobytes("png")
            
            # Base64 인코딩
            b64_img = base64.b64encode(img_data).decode('utf-8')
            img_src = f"data:image/png;base64,{b64_img}"
            
            # 썸네일용 작은 이미지 (첫 페이지만)
            if page_num == 0:
                pix_thumb = page.get_pixmap(matrix=fitz.Matrix(0.3, 0.3))  # 더 작은 썸네일
                thumb_data = pix_thumb.tobytes("png")
                b64_thumb = base64.b64encode(thumb_data).decode('utf-8')
                thumb_src = f"data:image/png;base64,{b64_thumb}"
            else:
                thumb_src = ""  # 첫 페이지 외에는 썸네일 생략
            
            # 페이지 정보 저장
            pages.append({
                "src": img_src,
                "thumb": thumb_src if page_num == 0 else ""
            })
            
            # 메모리 관리를 위해 중간 저장 (20페이지마다)
            if (page_num + 1) % 20 == 0 or page_num == total_pages - 1:
                pdf_cache[pdf_name]["pages"] = pages
                # 캐시 파일 저장 (진행 중)
                try:
                    with open(cache_path, "w") as cache_file:
                        json.dump({
                            "status": "processing", 
                            "progress": progress, 
                            "pages": 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:
                pdf_cache[pdf_name] = json.load(f)
                pdf_cache[pdf_name]["status"] = "completed"
                logger.info(f"기존 캐시 로드: {pdf_name}")
        except Exception as e:
            logger.error(f"캐시 파일 로드 오류: {str(e)}")
    
    # 캐싱되지 않은 PDF 파일 처리
    for pdf_file in pdf_files:
        pdf_name = pdf_file.stem
        if pdf_name not in pdf_cache or pdf_cache[pdf_name].get("status") != "completed":
            try:
                await cache_pdf(str(pdf_file))
            except Exception as e:
                logger.error(f"PDF {pdf_name} 캐싱 오류: {str(e)}")

# 백그라운드 작업 시작 함수
@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("status") == "completed":
            if pdf_cache[pdf_name]["pages"] and 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.5, 0.5))
            img_data = pix.tobytes("png")
            b64_img = base64.b64encode(img_data).decode('utf-8')
            
            # 백그라운드에서 캐싱 시작
            asyncio.create_task(cache_pdf(path))
            
            return {"thumbnail": f"data:image/png;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 and pdf_cache[pdf_name].get("status") == "completed":
            return pdf_cache[pdf_name]
        
        # 캐시가 진행중인 경우
        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") == "processing":
            return {"status": "processing", "progress": pdf_cache[pdf_name].get("progress", 0)}
        
        # 캐시가 없는 경우 백그라운드에서 캐싱 시작
        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":
            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 문자열 (이전에 업데이트한 HTML 내용)
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(120deg, var(--tertiary-color) 0%, var(--bg-color) 100%);
    background-attachment: fixed;
  }

  header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
  }

  #homeBtn {
    display: none;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--primary-color);
    color: white;
    font-size: 22px;
    margin-right: 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
  }

  #homeBtn:hover {
    background: #8bc5f8;
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }

  h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    background: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.5px;
  }

  #home, #viewerPage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 30px 60px;
    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;
  }

  /* 반응형 디자인 */
  @media (max-width: 768px) {
    .grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 16px;
    }
    
    .card {
      height: 240px;
    }
    
    header {
      padding: 20px;
    }
    
    h2 {
      font-size: 1.5rem;
    }
  }
  </style>
</head>
<body>
  <header>
    <button id="homeBtn" title="홈으로"><i class="fas fa-home"></i></button>
    <h2>My FlipBook Library</h2>
  </header>

  <section id="home" class="fade-in">
    <div class="upload-container">
      <button class="upload">
        <i class="fas fa-images"></i> 이미지 추가
        <input id="imgInput" type="file" accept="image/*" multiple hidden>
      </button>
      <button class="upload">
        <i class="fas fa-file-pdf"></i> PDF 추가
        <input id="pdfInput" type="file" accept="application/pdf" hidden>
      </button>
    </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>
  </section>

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

    // 서버에서 미리 로드된 PDF 프로젝트
    let serverProjects = [];

    /* 🔊 오디오 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)}
    
    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}">
          <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
        </div>
      `;
      grid.appendChild(d);
      
      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
      $id('noProjects').style.display = 'none';
    }

    /* ── 이미지 업로드 ── */
    $id('imgInput').onchange=e=>{
      const files=[...e.target.files]; if(!files.length) return;
      
      // 로딩 표시 추가
      showLoading("이미지 로딩 중...");
      
      const pages=[],tot=files.length;let done=0;
      files.forEach((f,i)=>{const r=new FileReader();r.onload=x=>{pages[i]={src:x.target.result,thumb:x.target.result};
          if(++done===tot) {
            save(pages, '이미지 컬렉션');
            hideLoading();
          }
        };r.readAsDataURL(f);});
    };

    /* ── PDF 업로드 ── */
    $id('pdfInput').onchange=e=>{
      const file=e.target.files[0]; if(!file) return;
      
      // 로딩 표시 추가
      showLoading("PDF 로딩 중...");
      
      const fr=new FileReader();
      fr.onload=v=>{
        pdfjsLib.getDocument({data:v.target.result}).promise.then(async pdf=>{
          const pages=[];
          
          for(let p=1;p<=pdf.numPages;p++){
            // 로딩 상태 업데이트
            updateLoading(`PDF 페이지 로딩 중... (${p}/${pdf.numPages})`);
            
            const pg=await pdf.getPage(p), 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;
            pages.push({src:c.toDataURL(),thumb:c.toDataURL()});
          }
          
          hideLoading();
          save(pages, file.name.replace('.pdf', ''));
        }).catch(error => {
          console.error("PDF 로딩 오류:", error);
          hideLoading();
          showError("PDF 로딩 중 오류가 발생했습니다.");
        });
      };fr.readAsArrayBuffer(file);
    };

    /* ── 프로젝트 저장 ── */
    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 로드 및 썸네일 생성
        for(let i = 0; i < serverProjects.length; i++) {
          updateLoading(`PDF 프로젝트 로딩 중... (${i+1}/${serverProjects.length})`);
          
          const project = serverProjects[i];
          const pdfName = project.name;
          const isCached = cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed";
          
          // 썸네일 가져오기
          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
            }];
            
            save(pages, project.name, 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);
              }
              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)';
            }
          }
        }
        
      } 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;
        
        // 캐시 여부 확인
        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);
              return;
            }
          } catch(error) {
            console.error("캐시 데이터 로드 오류:", error);
            // 캐시 로딩 실패 시 원본 PDF로 대체
          }
        }
        
        // 캐시가 없거나 로딩 실패 시 서버 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);
              return;
            } else if(cachedData.status === "processing") {
              // 캐싱 진행 중인 경우 진행률 표시
              updateLoading(`PDF 캐싱 중: ${cachedData.progress}%`, cachedData.progress);
              
              // 캐싱 완료 확인을 위한 폴링
              await waitForCaching(pdfPath);
              return;
            }
          }
          
          // 원본 PDF 로드 (ArrayBuffer 형태)
          const pdfResponse = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
          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);
          
        } catch(error) {
          console.error('PDF 처리 중 오류 발생:', error);
          hideLoading();
          showError("PDF를 로드하는 중 오류가 발생했습니다.");
        }
      } else {
        // 로컬 업로드된 프로젝트 실행
        createFlipBook(pages);
      }
    }

    /* ── 캐싱 완료 대기 함수 ── */
    async function waitForCaching(pdfPath) {
      let retries = 0;
      const maxRetries = 100; // 최대 확인 횟수
      
      const checkInterval = setInterval(async () => {
        try {
          const response = await fetch(`/api/cache-status?path=${encodeURIComponent(pdfPath)}`);
          const status = await response.json();
          
          if(status.status === "completed") {
            // 캐싱 완료
            clearInterval(checkInterval);
            hideLoading();
            
            // 캐시된 데이터로 FlipBook 생성
            const cachedRes = await fetch(`/api/cached-pdf?path=${encodeURIComponent(pdfPath)}`);
            const cachedData = await cachedRes.json();
            createFlipBook(cachedData.pages);
            
          } else if(status.status === "processing") {
            // 진행 상태 업데이트
            updateLoading(`PDF 캐싱 중: ${status.progress}%`, status.progress);
          } else if(status.status === "error" || retries >= maxRetries) {
            // 오류 또는 시간 초과
            clearInterval(checkInterval);
            hideLoading();
            showError("PDF 캐싱 중 오류가 발생했습니다. 다시 시도해주세요.");
          }
          
          retries++;
        } catch(e) {
          console.error("캐시 상태 확인 오류:", e);
          retries++;
          
          if(retries >= maxRetries) {
            clearInterval(checkInterval);
            hideLoading();
            showError("PDF 캐싱 상태를 확인할 수 없습니다.");
          }
        }
      }, 1000); // 1초마다 확인
    }

    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';
        
        fb = new FlipBook(viewer, {
          pages: pages,
          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('homeBtn').onclick=()=>{
      if(fb) {
        fb.destroy();
        viewer.innerHTML = '';
        fb = null;
      }
      toggle(true);
    };

    function toggle(showHome){
      $id('home').style.display=showHome?'block':'none';
      $id('viewerPage').style.display=showHome?'none':'block';
      $id('homeBtn').style.display=showHome?'none':'inline-block';
      
      // 뷰어 모드일 때 스타일 변경
      if(!showHome) {
        document.body.classList.add('viewer-mode');
        $id('homeBtn').style.position = 'fixed';
        $id('homeBtn').style.top = '20px';
        $id('homeBtn').style.left = '20px';
        $id('homeBtn').style.zIndex = '9999';
        $id('homeBtn').style.fontSize = '';
        $id('homeBtn').style.width = '52px';
        $id('homeBtn').style.height = '52px';
        $id('homeBtn').style.boxShadow = '0 4px 15px rgba(0,0,0,0.15)';
      } else {
        document.body.classList.remove('viewer-mode');
        $id('homeBtn').style.position = '';
        $id('homeBtn').style.top = '';
        $id('homeBtn').style.left = '';
        $id('homeBtn').style.zIndex = '';
        $id('homeBtn').style.fontSize = '';
        $id('homeBtn').style.width = '';
        $id('homeBtn').style.height = '';
        $id('homeBtn').style.boxShadow = '';
      }
    }

    /* -- 로딩 및 오류 표시 -- */
    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);
    }

    // 페이지 로드 시 서버 PDF 로드
    window.addEventListener('DOMContentLoaded', () => {
      loadServerPDFs();
      
      // 캐시 상태를 주기적으로 확인 (5초마다)
      setInterval(checkCacheStatus, 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)))