Update app.py

app.py

@@ -884,16 +884,18 @@ HTML = """
 
   <section id="home" class="fade-in">
     <div class="upload-container">
-      <button class="upload" id="imageUploadBtn">
+      <button type="button" id="imageUploadBtn" class="upload">
         <i class="fas fa-images"></i> 이미지 추가
-        <input id="imgInput" type="file" accept="image/*" multiple hidden>
       </button>
-      <button class="upload" id="pdfUploadBtn">
+      <button type="button" id="pdfUploadBtn" class="upload">
         <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">
       <!-- 카드가 여기에 동적으로 추가됩니다 -->
@@ -926,54 +928,161 @@ 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('이미지 업로드 버튼 또는 입력 요소를 찾을 수 없음');
+      }
+      
+      // PDF 업로드 버튼 이벤트
+      var pdfUploadBtn = document.getElementById('pdfUploadBtn');
+      var pdfInput = document.getElementById('pdfInput');
+      
+      if (pdfUploadBtn && pdfInput) {
+        console.log('PDF 업로드 버튼 발견');
+        pdfUploadBtn.addEventListener('click', function() {
+          console.log('PDF 업로드 버튼 클릭됨');
+          pdfInput.click();
+        });
+      } else {
+        console.error('PDF 업로드 버튼 또는 입력 요소를 찾을 수 없음');
+      }
+      
+      console.log('PDF/이미지 입력 필드 이벤트 설정');
+      if (imgInput) {
+        imgInput.addEventListener('change', function(e) {
+          console.log('이미지 입력 변경 감지됨');
+          handleImageUpload(e);
+        });
+      }
+      
+      if (pdfInput) {
+        pdfInput.addEventListener('change', function(e) {
+          console.log('PDF 입력 변경 감지됨');
+          handlePdfUpload(e);
+        });
+      }
+      
+      // 홈 버튼 이벤트 설정
+      var homeButton = document.getElementById('homeButton');
+      if (homeButton) {
+        homeButton.addEventListener('click', function() {
+          console.log('홈 버튼 클릭됨');
+          homeButtonClicked();
+        });
+      }
+      
+      // 서버에서 PDF 로드
+      loadServerPDFs();
+      
+      // 캐시 상태 주기적 확인
+      setInterval(checkCacheStatus, 3000);
+    });
     
-    // 업로드 버튼 이벤트 연결 함수
-    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 handleImageUpload(e) {
+      const files = Array.from(e.target.files);
+      if (!files.length) return;
+      
+      // 로딩 표시 추가
+      showLoading("이미지 로딩 중...");
+      
+      const pages = [];
+      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) {
+            save(pages, '이미지 컬렉션');
+            hideLoading();
           }
-        });
+        };
+        reader.readAsDataURL(file);
       });
     }
-
-    /* ── 유틸 ── */
-    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 업로드 처리 함수
+    function handlePdfUpload(e) {
+      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 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()
+            });
+          }
+          
+          hideLoading();
+          save(pages, file.name.replace('.pdf', ''));
+        }).catch(error => {
+          console.error("PDF 로딩 오류:", error);
+          hideLoading();
+          showError("PDF 로딩 중 오류가 발생했습니다.");
+        });
+      };
+      reader.readAsArrayBuffer(file);
+    }
+    
+    // 홈 버튼 클릭 처리 함수
+    function homeButtonClicked() {
+      if (fb) {
+        fb.destroy();
+        viewer.innerHTML = '';
+        fb = null;
       }
+      toggle(true);
       
-      // 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();
-        };
+      // 로딩 인디케이터 정리
+      if (pageLoadingInterval) {
+        clearInterval(pageLoadingInterval);
+        pageLoadingInterval = null;
       }
+      document.getElementById('loadingPages').style.display = 'none';
+      currentLoadingPdfPath = null;
     }
-    
-    function addCard(i, thumb, title, isCached = false) {
       const d = document.createElement('div');
       d.className = 'card fade-in';
       d.onclick = () => open(i);
@@ -1000,53 +1109,8 @@ 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 $id(id){return document.getElementById(id)}
 
     /* ── 프로젝트 저장 ── */
     function save(pages, title, isCached = false){
@@ -1524,22 +1588,7 @@ HTML = """
     }
 
     /* ── 네비게이션 ── */
-    $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;
-    };
+          $id('homeButton').onclick=homeButtonClicked;
 
     function toggle(showHome){
       $id('home').style.display=showHome?'block':'none';
@@ -1642,16 +1691,7 @@ HTML = """
       }, 5000);
     }
 
-    // 페이지 로드 시 서버 PDF 로드
-    window.addEventListener('DOMContentLoaded', () => {
-      // 직접 이벤트 리스너 설정 (더 확실한 방법)
-      setupDirectEvents();
-      
-      loadServerPDFs();
-      
-      // 캐시 상태를 주기적으로 확인 (3초마다)
-      setInterval(checkCacheStatus, 3000);
-    });
+    function addCard(i, thumb, title, isCached = false) {
   </script>
 </body>
 </html>