Update app.py

app.py

@@ -884,16 +884,10 @@ HTML = """
 
   <section id="home" class="fade-in">
     <div class="upload-container">
-
-        <button class="upload" id="imageUploadBtn" onclick="document.getElementById('imgInput').click(); return false;">
-          <i class="fas fa-images"></i> 이미지 추가
-          <input id="imgInput" type="file" accept="image/*" multiple hidden>
-        </button>
-        <button class="upload" id="pdfUploadBtn" onclick="document.getElementById('pdfInput').click(); return false;">
-          <i class="fas fa-file-pdf"></i> PDF 추가
-          <input id="pdfInput" type="file" accept="application/pdf" hidden>
-
+      <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>
@@ -901,7 +895,7 @@ HTML = """
       <!-- 카드가 여기에 동적으로 추가됩니다 -->
     </div>
     <div id="noProjects" class="no-projects" style="display: none;">
-      프로젝트가 없습니다. 이미지나 PDF를 추가하여 시작하세요.
+      프로젝트가 없습니다. PDF를 추가하여 시작하세요.
     </div>
   </section>
 
@@ -912,7 +906,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 프로젝트
@@ -929,135 +923,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() {
-  console.log('이벤트 설정 시작');
-  
-  // 이미지 업로드 버튼
-  const imageBtn = document.getElementById('imageUploadBtn');
-  const imageInput = document.getElementById('imgInput');
-  
-  if (imageBtn && imageInput) {
-    console.log('이미지 버튼 찾음:', imageBtn);
-    // 이벤트 리스너를 명시적으로 제거하고 다시 추가
-    imageBtn.removeEventListener('click', imageClickHandler);
-    imageBtn.addEventListener('click', imageClickHandler);
-    
-    function imageClickHandler(e) {
-      console.log('이미지 버튼 클릭됨');
-      e.preventDefault();
-      e.stopPropagation();
-      imageInput.click();
-    }
-  } else {
-    console.error('이미지 버튼 또는 인풋을 찾을 수 없음');
-  }
-  
-  // PDF 업로드 버튼
-  const pdfBtn = document.getElementById('pdfUploadBtn');
-  const pdfInput = document.getElementById('pdfInput');
-  
-  if (pdfBtn && pdfInput) {
-    console.log('PDF 버튼 찾음:', pdfBtn);
-    // 이벤트 리스너를 명시적으로 제거하고 다시 추가
-    pdfBtn.removeEventListener('click', pdfClickHandler);
-    pdfBtn.addEventListener('click', pdfClickHandler);
-    
-    function pdfClickHandler(e) {
-      console.log('PDF 버튼 클릭됨');
-      e.preventDefault();
-      e.stopPropagation();
-      pdfInput.click();
-    }
-  } else {
-    console.error('PDF 버튼 또는 인풋을 찾을 수 없음');
-  }
-  
-  // 파일 선택 이벤트 재설정
-  if (imageInput) {
-    imageInput.onchange = function(e) {
-      console.log('이미지 파일 선택됨:', e.target.files.length);
-      const files = [...e.target.files]; 
-      if (!files.length) return;
+    // 파일 업로드 이벤트 처리
+    document.addEventListener("DOMContentLoaded", function() {
+      console.log("DOM 로드 완료, 이벤트 설정 시작");
       
-      showLoading("이미지 로딩 중...");
+      // PDF 업로드 버튼
+      const pdfBtn = document.getElementById('pdfUploadBtn');
+      const pdfInput = document.getElementById('pdfInput');
       
-      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);
-      });
-    };
-  }
-  
-  if (pdfInput) {
-    pdfInput.onchange = function(e) {
-      console.log('PDF 파일 선택됨:', e.target.files.length);
-      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 = [];
+      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;
           
-          for (let p = 1; p <= pdf.numPages; p++) {
-            updateLoading(`PDF 페이지 로딩 중... (${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;
-            pages.push({src: c.toDataURL(), thumb: c.toDataURL()});
-          }
+          showLoading("PDF 로딩 중...");
           
-          hideLoading();
-          save(pages, file.name.replace('.pdf', ''));
-        }).catch(error => {
-          console.error("PDF 로딩 오류:", error);
-          hideLoading();
-          showError("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);
         });
-      };
-      fr.readAsArrayBuffer(file);
-    };
-  }
-  
-  console.log('이벤트 설정 완료');
-}
+      } else {
+        console.error("PDF 업로드 요소를 찾을 수 없음");
+      }
+      
+      // 서버 PDF 로드 및 캐시 상태 확인
+      loadServerPDFs();
+      
+      // 캐시 상태를 주기적으로 확인
+      setInterval(checkCacheStatus, 3000);
+    });
     
     function addCard(i, thumb, title, isCached = false) {
       const d = document.createElement('div');
@@ -1086,54 +1031,6 @@ function setupDirectEvents() {
       $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;
@@ -1727,28 +1624,6 @@ function setupDirectEvents() {
         }
       }, 5000);
     }
-
-
-// 페이지 로드 시 서버 PDF 로드
-    window.addEventListener('DOMContentLoaded', () => {
-      console.log('DOM 로드됨');
-  
-  // 직접 이벤트 리스너 설정 (더 확실한 방법)
-      setupDirectEvents();
-  
-  // 약간의 지연 후 다시 한번 이벤트 설정 (DOM 완전 로드 보장)
-      setTimeout(() => {
-        console.log('지연 후 이벤트 재설정');
-        setupDirectEvents();
-      }, 500);
-  
-      loadServerPDFs();
-  
-  // 캐시 상태를 주기적으로 확인 (3초마다)
-      setInterval(checkCacheStatus, 3000);
-    });
-
-
   </script>
 </body>
 </html>