Update app.py

app.py

@@ -206,7 +206,7 @@ async def cache_pdf(pdf_path: str):
     except Exception as e:
         import traceback
         logger.error(f"PDF 캐싱 오류: {str(e)}\n{traceback.format_exc()}")
-        if pdf_name in pdf_cache:
+        if 'pdf_name' in locals() and pdf_name in pdf_cache:
             pdf_cache[pdf_name]["status"] = "error"
             pdf_cache[pdf_name]["error"] = str(e)
 
@@ -310,7 +310,6 @@ async def get_cached_pdf(path: str, background_tasks: BackgroundTasks):
                 pages = pdf_cache[pdf_name].get("pages", [])
                 total_pages = pdf_cache[pdf_name].get("total_pages", 0)
                 
-                # 일부만 처리된 경우에도 사용 가능한 페이지 제공
                 return {
                     "status": "processing", 
                     "progress": progress,
@@ -417,11 +416,11 @@ HTML = """
 
   body {
     margin: 0;
-    background: var(--bg-color);
+    /* ▼ 고급진 블루 계열 그라디에이션으로 변경 */
+    background-image: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+    background-attachment: fixed;
     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;
   }
 
   /* 헤더 제목 제거 및 Home 버튼 레이어 처리 */
@@ -484,7 +483,7 @@ HTML = """
     opacity: 1;
     transform: translateX(0);
   }
-
+  
   #home, #viewerPage {
     padding-top: 100px;
     max-width: 1200px;
@@ -510,7 +509,7 @@ HTML = """
     background: white;
     margin: 0 10px;
     font-weight: 500;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     box-shadow: var(--shadow-sm);
     transition: var(--transition);
@@ -525,7 +524,7 @@ HTML = """
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
     opacity: 0.08;
     z-index: -1;
   }
@@ -801,30 +800,30 @@ HTML = """
   }
 
   /* 헤더 로고 및 타이틀 */
+  /* ▼ pointer-events: none 제거, 높이와 패딩 조정하여 제목을 더 위로 */
   .library-header {
     position: fixed;
-    top: 20px;
+    top: 10px;  /* 기존 20px -> 10px으로 */
     left: 0;
     right: 0;
     text-align: center;
     z-index: 100;
-    pointer-events: none;
   }
   
   .library-header .title {
     display: inline-block;
-    padding: 12px 30px;
+    /* 높이 줄이기 위한 패딩/폰트 크기 조정 */
+    padding: 8px 20px; /* 기존 12px 30px -> 8px 20px */
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(10px);
     border-radius: 30px;
     box-shadow: var(--shadow-md);
-    font-size: 1.5rem;
+    font-size: 1.2rem; /* 기존 1.5rem -> 1.2rem */
     font-weight: 600;
     background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
-    pointer-events: all;
   }
   
   /* 점진적 로딩 표시 */
@@ -855,8 +854,8 @@ HTML = """
     }
     
     .library-header .title {
-      font-size: 1.25rem;
-      padding: 10px 20px;
+      font-size: 1rem;
+      padding: 6px 16px;
     }
     
     .floating-home {
@@ -884,18 +883,16 @@ HTML = """
 
   <section id="home" class="fade-in">
     <div class="upload-container">
-      <button type="button" id="imageUploadBtn" class="upload">
+      <button class="upload" id="imageUploadBtn">
         <i class="fas fa-images"></i> 이미지 추가
+        <input id="imgInput" type="file" accept="image/*" multiple hidden>
       </button>
-      <button type="button" id="pdfUploadBtn" class="upload">
+      <button class="upload" id="pdfUploadBtn">
         <i class="fas fa-file-pdf"></i> PDF 추가
+        <input id="pdfInput" type="file" accept="application/pdf" hidden>
       </button>
     </div>
     
-    <!-- 파일 입력 요소를 버튼 밖으로 이동하여 별도 배치 -->
-    <input id="imgInput" type="file" accept="image/*" multiple style="display:none">
-    <input id="pdfInput" type="file" accept="application/pdf" style="display:none">
-    
     <div class="section-title">내 프로젝트</div>
     <div class="grid" id="grid">
       <!-- 카드가 여기에 동적으로 추가됩니다 -->
@@ -928,133 +925,104 @@ HTML = """
             .play().then(a=>a.pause()).catch(()=>{});document.removeEventListener(evt,u,{capture:true});},
             {once:true,capture:true});
     });
-
-    // 페이지 로드 시 이벤트 설정
-    document.addEventListener('DOMContentLoaded', function() {
-      console.log('DOM Content Loaded - 이벤트 설정 시작');
-      
-      // 이미지 업로드 버튼 이벤트
-      var imageUploadBtn = document.getElementById('imageUploadBtn');
-      var imgInput = document.getElementById('imgInput');
-      
-      if (imageUploadBtn && imgInput) {
-        console.log('이미지 업��드 버튼 발견');
-        imageUploadBtn.addEventListener('click', function() {
-          console.log('이미지 업로드 버튼 클릭됨');
-          imgInput.click();
-        });
-      } else {
-        console.error('이미지 업로드 버튼 또는 입력 요소를 찾을 수 없음');
+    
+    /* ── 유틸 ── */
+    function $id(id){return document.getElementById(id)}
+    
+    // 직접 이벤트 리스너 설정 (업로드 버튼 클릭시 파일 선택창 열기)
+    function setupDirectEvents() {
+      // 이미지 업로드 버튼
+      const imageBtn = $id('imageUploadBtn');
+      const imageInput = $id('imgInput');
+      if (imageBtn && imageInput) {
+        console.log('이미지 업로드 버튼 이벤트 설정');
+        imageBtn.onclick = function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          imageInput.click();
+        };
       }
       
-      // PDF 업로드 버튼 이벤트
-      var pdfUploadBtn = document.getElementById('pdfUploadBtn');
-      var pdfInput = document.getElementById('pdfInput');
-      
-      if (pdfUploadBtn && pdfInput) {
-        console.log('PDF 업로드 버튼 발견');
-        pdfUploadBtn.addEventListener('click', function() {
-          console.log('PDF 업로드 버튼 클릭됨');
+      // PDF 업로드 버튼
+      const pdfBtn = $id('pdfUploadBtn');
+      const pdfInput = $id('pdfInput');
+      if (pdfBtn && pdfInput) {
+        console.log('PDF 업로드 버튼 이벤트 설정');
+        pdfBtn.onclick = function(e) {
+          e.preventDefault();
+          e.stopPropagation();
           pdfInput.click();
-        });
-      } else {
-        console.error('PDF 업로드 버튼 또는 입력 요소를 찾을 수 없음');
-      }
-      
-      console.log('PDF/이미지 입력 필드 이벤트 설정');
-      if (imgInput) {
-        imgInput.addEventListener('change', function(e) {
-          console.log('이미지 입력 변경 감지됨');
-          handleImageUpload(e);
-        });
+        };
       }
+    }
+
+    function addCard(i, thumb, title, isCached = false) {
+      const d = document.createElement('div');
+      d.className = 'card fade-in';
+      d.onclick = () => open(i);
       
-      if (pdfInput) {
-        pdfInput.addEventListener('change', function(e) {
-          console.log('PDF 입력 변경 감지됨');
-          handlePdfUpload(e);
-        });
-      }
+      const displayTitle = title ? 
+        (title.length > 15 ? title.substring(0, 15) + '...' : title) : 
+        '프로젝트 ' + (i+1);
       
-      // 홈 버튼 이벤트 설정
-      var homeButton = document.getElementById('homeButton');
-      if (homeButton) {
-        homeButton.addEventListener('click', function() {
-          console.log('홈 버튼 클릭됨');
-          homeButtonClicked();
-        });
-      }
+      const cachedBadge = isCached ? 
+        '<div class="cached-status">캐시됨</div>' : '';
       
-      // 서버에서 PDF 로드
-      loadServerPDFs();
+      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);
       
-      // 캐시 상태 주기적 확인
-      setInterval(checkCacheStatus, 3000);
-    });
-    
-    // 이미지 업로드 처리 함수
-    function handleImageUpload(e) {
-      const files = Array.from(e.target.files);
-      if (!files.length) return;
+      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
+      $id('noProjects').style.display = 'none';
+    }
+
+    /* ── 이미지 업로드 ── */
+    $id('imgInput').onchange = e => {
+      const files = [...e.target.files];
+      if(!files.length) return;
       
-      // 로딩 표시 추가
       showLoading("이미지 로딩 중...");
       
-      const pages = [];
+      const pages=[], tot = files.length; 
       let done = 0;
-      const total = files.length;
-      
-      files.forEach((file, index) => {
-        const reader = new FileReader();
-        reader.onload = function(event) {
-          pages[index] = {
-            src: event.target.result,
-            thumb: event.target.result
-          };
-          done++;
-          if (done === total) {
+      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();
           }
         };
-        reader.readAsDataURL(file);
+        r.readAsDataURL(f);
       });
-    }
-    
-    // PDF 업로드 처리 함수
-    function handlePdfUpload(e) {
+    };
+
+    /* ── PDF 업로드 ── */
+    $id('pdfInput').onchange = e => {
       const file = e.target.files[0];
-      if (!file) return;
+      if(!file) return;
       
-      // 로딩 표시 추가
       showLoading("PDF 로딩 중...");
       
-      const reader = new FileReader();
-      reader.onload = function(event) {
-        pdfjsLib.getDocument({data: event.target.result}).promise.then(async 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 page = await pdf.getPage(p);
-            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()
-            });
+          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 => {
@@ -1063,56 +1031,9 @@ HTML = """
           showError("PDF 로딩 중 오류가 발생했습니다.");
         });
       };
-      reader.readAsArrayBuffer(file);
-    }
-    
-    // 홈 버튼 클릭 처리 함수
-    function homeButtonClicked() {
-      if (fb) {
-        fb.destroy();
-        viewer.innerHTML = '';
-        fb = null;
-      }
-      toggle(true);
-      
-      // 로딩 인디케이터 정리
-      if (pageLoadingInterval) {
-        clearInterval(pageLoadingInterval);
-        pageLoadingInterval = null;
-      }
-      document.getElementById('loadingPages').style.display = 'none';
-      currentLoadingPdfPath = null;
-    }
-      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';
-    }
+      fr.readAsArrayBuffer(file);
+    };
 
-    /* ── 유틸 ── */
-    function $id(id){return document.getElementById(id)}
-
-    /* ── 프로젝트 저장 ── */
     function save(pages, title, isCached = false){
       const id=projects.push(pages)-1;
       addCard(id, pages[0].thumb, title, isCached);
@@ -1121,7 +1042,6 @@ HTML = """
     /* ── 서버 PDF 로드 및 캐시 상태 확인 ── */
     async function loadServerPDFs() {
       try {
-        // 로딩 표시 추가
         if (document.querySelectorAll('.card').length === 0) {
           showLoading("라이브러리 로딩 중...");
         }
@@ -1140,16 +1060,15 @@ HTML = """
           return;
         }
         
-        // 서버 PDF 로드 및 썸네일 생성 (병렬 처리로 최적화)
         const thumbnailPromises = serverProjects.map(async (project, index) => {
-          updateLoading(`PDF 프로젝트 로딩 중... (${index+1}/${serverProjects.length})`);
+          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 response = await fetch(\`/api/pdf-thumbnail?path=\${encodeURIComponent(project.path)}\`);
             const data = await response.json();
             
             if(data.thumbnail) {
@@ -1159,31 +1078,23 @@ HTML = """
                 path: project.path,
                 cached: isCached
               }];
-              
-              return {
-                pages,
-                name: project.name,
-                isCached
-              };
+              return { pages, name: project.name, isCached };
             }
           } catch (err) {
-            console.error(`썸네일 로드 오류 (${project.name}):`, 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';
         }
@@ -1208,7 +1119,6 @@ HTML = """
             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") {
@@ -1228,7 +1138,7 @@ HTML = """
                 badgeEl.className = 'cached-status';
                 cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
               }
-              badgeEl.textContent = `${cacheStatus[pdfName].progress}%`;
+              badgeEl.textContent = \`\${cacheStatus[pdfName].progress}%\`;
               badgeEl.style.background = 'var(--secondary-color)';
             }
           }
@@ -1237,27 +1147,21 @@ HTML = """
         // 현재 로딩 중인 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}%`;
+              $id('loadingPagesCount').textContent = \`\${progress}%\`;
             }
           }
         }
-        
       } catch(error) {
         console.error('캐시 상태 확인 오류:', error);
       }
@@ -1268,27 +1172,20 @@ HTML = """
       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 response = await fetch(\`/api/cached-pdf?path=\${encodeURIComponent(pdfPath)}\`);
             const cachedData = await response.json();
             
             if(cachedData.status === "completed" && cachedData.pages) {
@@ -1297,29 +1194,22 @@ HTML = """
               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 로드
+        if(!progressiveLoading) {
           showLoading("PDF 준비 중...");
-          
           try {
-            const response = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
+            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();
@@ -1330,20 +1220,15 @@ HTML = """
                 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)}`);
+            const pdfResponse = await fetch(\`/api/pdf-content?path=\${encodeURIComponent(pdfPath)}\`);
             
-            // JSON 응답인 경우 (리다이렉트 등)
             try {
               const jsonData = await pdfResponse.clone().json();
               if (jsonData.redirect) {
@@ -1353,7 +1238,6 @@ HTML = """
                 if(cachedData.pages && cachedData.pages.length > 0) {
                   hideLoading();
                   createFlipBook(cachedData.pages);
-                  
                   if(cachedData.status === "processing") {
                     startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
                   } else {
@@ -1363,78 +1247,63 @@ HTML = """
                 }
               }
             } catch (e) {
-              // JSON 파싱 실패 시 원본 PDF 데이터로 처리
+              // 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})`);
-              
+            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);
+            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}%`;
+      $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 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();  // 완료된 데이터로 새로고침
+            refreshFlipBook();
             currentLoadingPdfPath = null;
           } else if (status.status === "processing") {
-            $id('loadingPagesCount').textContent = `${status.progress}%`;
+            $id('loadingPagesCount').textContent = \`\${status.progress}%\`;
           }
         } catch (e) {
           console.error("캐시 상태 확인 오류:", e);
@@ -1442,20 +1311,15 @@ HTML = """
       }, 1000);
     }
 
-    /* ── 플립북 새로고침 ── */
     async function refreshFlipBook() {
       if (!currentLoadingPdfPath || !fb) return;
-      
       try {
-        const response = await fetch(`/api/cached-pdf?path=${encodeURIComponent(currentLoadingPdfPath)}`);
+        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;
         }
@@ -1466,47 +1330,39 @@ HTML = """
 
     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) { // 가로 화면
+          if (aspectRatio > 1) {
             height = Math.min(windowHeight * 0.9, windowHeight - 40);
-            width = height * aspectRatio * 0.8; // 가로 화면에서는 약간 줄임
+            width = height * aspectRatio * 0.8;
             if (width > windowWidth * 0.9) {
               width = windowWidth * 0.9;
               height = width / (aspectRatio * 0.8);
             }
-          } else { // 세로 화면
+          } else {
             width = Math.min(windowWidth * 0.9, windowWidth - 40);
-            height = width / aspectRatio * 0.9; // 세로 화면에서는 약간 늘림
+            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+',
@@ -1522,7 +1378,6 @@ HTML = """
           autoSize: true,
           flipDuration: 800,
           backgroundColor: '#fff',
-          /* 🔊 내장 사운드 */
           sound: true,
           assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
           controlsProps: {
@@ -1537,22 +1392,21 @@ HTML = """
             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 // 컨트롤 표시 시간 연장
+            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();
@@ -1562,10 +1416,8 @@ HTML = """
           }
         });
         
-        // FlipBook 생성 후 컨트롤바 강제 표시
         setTimeout(() => {
           try {
-            // 컨트롤바 관련 요소 찾기 및 스타일 적용
             const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
             if (menuBars && menuBars.length > 0) {
               menuBars.forEach(menuBar => {
@@ -1587,15 +1439,26 @@ HTML = """
       }
     }
 
-    /* ── 네비게이션 ── */
-          $id('homeButton').onclick=homeButtonClicked;
+    $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';
+      $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 {
@@ -1603,11 +1466,8 @@ HTML = """
       }
     }
 
-    /* -- 로딩 및 오류 표시 -- */
     function showLoading(message, progress = -1) {
-      // 기존 로딩 컨테이너가 있다면 제거
       hideLoading();
-      
       const loadingContainer = document.createElement('div');
       loadingContainer.className = 'loading-container fade-in';
       loadingContainer.id = 'loadingContainer';
@@ -1638,7 +1498,6 @@ HTML = """
       
       if (progress >= 0) {
         let progressBar = $id('progressBar');
-        
         if (!progressBar) {
           const loadingContainer = $id('loadingContainer');
           if (loadingContainer) {
@@ -1649,7 +1508,7 @@ HTML = """
             progressBar = $id('progressBar');
           }
         } else {
-          progressBar.style.width = `${progress}%`;
+          progressBar.style.width = \`\${progress}%\`;
         }
       }
     }
@@ -1662,7 +1521,6 @@ HTML = """
     }
     
     function showError(message) {
-      // 기존 오류 메시지가 있다면 제거
       const existingError = $id('errorContainer');
       if (existingError) {
         existingError.remove();
@@ -1678,12 +1536,10 @@ HTML = """
       
       document.body.appendChild(errorContainer);
       
-      // 확인 버튼 클릭 이벤트
       $id('errorCloseBtn').onclick = () => {
         errorContainer.remove();
       };
       
-      // 5초 후 자동으로 닫기
       setTimeout(() => {
         if ($id('errorContainer')) {
           $id('errorContainer').remove();
@@ -1691,7 +1547,15 @@ HTML = """
       }, 5000);
     }
 
-    function addCard(i, thumb, title, isCached = false) {
+    window.addEventListener('DOMContentLoaded', () => {
+      // 업로드 버튼이 정상 동작하도록 직접 이벤트 설정
+      setupDirectEvents();
+      
+      loadServerPDFs();
+      
+      // 캐시 상태를 주기적으로 확인
+      setInterval(checkCacheStatus, 3000);
+    });
   </script>
 </body>
 </html>
@@ -1702,4 +1566,4 @@ 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)))
+    uvicorn.run("app:app", host="0.0.0.0", port=int(os.getenv("PORT", 7860)))