Update app.py

app.py

@@ -415,14 +415,22 @@ HTML = """
     --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;
-  }
+
+    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 {
@@ -803,7 +811,7 @@ HTML = """
   /* 헤더 로고 및 타이틀 */
   .library-header {
     position: fixed;
-    top: 20px;
+    top: 12px;
     left: 0;
     right: 0;
     text-align: center;
@@ -811,21 +819,21 @@ HTML = """
     pointer-events: none;
   }
   
-  .library-header .title {
-    display: inline-block;
-    padding: 12px 30px;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(10px);
-    border-radius: 30px;
-    box-shadow: var(--shadow-md);
-    font-size: 1.5rem;
-    font-weight: 600;
-    background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    pointer-events: all;
-  }
+.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 {
@@ -884,14 +892,10 @@ HTML = """
 
   <section id="home" class="fade-in">
     <div class="upload-container">
-      <button class="upload" id="imageUploadBtn">
-        <i class="fas fa-images"></i> 이미지 추가
-        <input id="imgInput" type="file" accept="image/*" multiple hidden>
-      </button>
       <button class="upload" id="pdfUploadBtn">
         <i class="fas fa-file-pdf"></i> PDF 추가
-        <input id="pdfInput" type="file" accept="application/pdf" hidden>
       </button>
+      <input id="pdfInput" type="file" accept="application/pdf" style="display:none">
     </div>
     
     <div class="section-title">내 프로젝트</div>
@@ -899,7 +903,7 @@ HTML = """
       <!-- 카드가 여기에 동적으로 추가됩니다 -->
     </div>
     <div id="noProjects" class="no-projects" style="display: none;">
-      프로젝트가 없습니다. 이미지나 PDF를 추가하여 시작하세요.
+      프로젝트가 없습니다. PDF를 추가하여 시작하세요.
     </div>
   </section>
 
@@ -910,7 +914,7 @@ HTML = """
 
   <script>
     let projects=[], fb=null;
-    const grid=$id('grid'), viewer=$id('viewer');
+    const grid=document.getElementById('grid'), viewer=document.getElementById('viewer');
     pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';
 
     // 서버에서 미리 로드된 PDF 프로젝트
@@ -927,51 +931,86 @@ HTML = """
             {once:true,capture:true});
     });
     
-    // 업로드 버튼 이벤트 연결 함수
-    function setupUploadButtons() {
-      // 모든 업로드 버튼에 이벤트 리스너 추가
-      document.querySelectorAll('.upload').forEach(button => {
-        button.addEventListener('click', function(e) {
-          // 버튼 내부의 input 요소 찾기
-          const inputElement = this.querySelector('input[type="file"]');
-          if (inputElement) {
-            // input 요소 클릭 (파일 선택 다이얼로그 열기)
-            inputElement.click();
-            e.preventDefault(); // 버튼 기본 동작 방지
-          }
-        });
-      });
-    }
-
     /* ── 유틸 ── */
     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();
-        };
-      }
+    // 파일 업로드 이��트 처리
+    document.addEventListener("DOMContentLoaded", function() {
+      console.log("DOM 로드 완료, 이벤트 설정 시작");
       
       // PDF 업로드 버튼
-      const pdfBtn = $id('pdfUploadBtn');
-      const pdfInput = $id('pdfInput');
+      const pdfBtn = document.getElementById('pdfUploadBtn');
+      const pdfInput = document.getElementById('pdfInput');
+      
       if (pdfBtn && pdfInput) {
-        console.log('PDF 업로드 버튼 이벤트 설정');
-        pdfBtn.onclick = function(e) {
-          e.preventDefault();
-          e.stopPropagation();
+        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');
@@ -1000,54 +1039,6 @@ HTML = """
       $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;
@@ -1641,17 +1632,6 @@ HTML = """
         }
       }, 5000);
     }
-
-    // 페이지 로드 시 서버 PDF 로드
-    window.addEventListener('DOMContentLoaded', () => {
-      // 직접 이벤트 리스너 설정 (더 확실한 방법)
-      setupDirectEvents();
-      
-      loadServerPDFs();
-      
-      // 캐시 상태를 주기적으로 확인 (3초마다)
-      setInterval(checkCacheStatus, 3000);
-    });
   </script>
 </body>
 </html>