Update app.py

app.py

@@ -228,6 +228,17 @@ function open(i){
   if(fb){fb.destroy();viewer.innerHTML='';}
   
   if(pages[0].path) {
+    // 로딩 표시
+    viewer.innerHTML = '<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;"><div style="border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:50px;height:50px;margin:0 auto;animation:spin 2s linear infinite;"></div><p style="margin-top:20px;font-size:16px;">PDF 로딩 중...</p></div>';
+    
+    // 스타일 추가
+    if (!document.getElementById('loadingStyle')) {
+      const style = document.createElement('style');
+      style.id = 'loadingStyle';
+      style.textContent = '@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}';
+      document.head.appendChild(style);
+    }
+    
     // 서버 PDF 파일 로드
     fetch(`/api/pdf-content?path=${encodeURIComponent(pages[0].path)}`)
       .then(response => {
@@ -246,25 +257,42 @@ function open(i){
         console.log('PDF 문서 로드 완료. 페이지 수:', pdf.numPages);
         
         const pdfPages = [];
+        const progressElement = viewer.querySelector('p');
+        
         for(let p = 1; p <= pdf.numPages; p++) {
-          console.log('페이지 렌더링 중:', 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;
+          if (progressElement) {
+            progressElement.textContent = `PDF 페이지 로딩 중... (${p}/${pdf.numPages})`;
+          }
           
-          await pg.render({canvasContext: c.getContext('2d'), viewport: vp}).promise;
-          pdfPages.push({src: c.toDataURL(), thumb: c.toDataURL()});
+          try {
+            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()});
+          } catch (pageError) {
+            console.error(`페이지 ${p} 렌더링 오류:`, pageError);
+          }
         }
         
         console.log('모든 페이지 렌더링 완료:', pdfPages.length);
-        createFlipBook(pdfPages);
+        
+        if (pdfPages.length > 0) {
+          createFlipBook(pdfPages);
+        } else {
+          throw new Error('PDF에서 페이지를 추출할 수 없습니다.');
+        }
       })
       .catch(error => {
         console.error('PDF 처리 중 오류 발생:', error);
-        alert('PDF를 로드하는 중 오류가 발생했습니다: ' + error.message);
+        viewer.innerHTML = `<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;"><p style="color:red;font-size:16px;">PDF를 로드하는 중 오류가 발생했습니다:<br>${error.message}</p><button id="backBtn" style="margin-top:20px;padding:10px 20px;background:#0077c2;color:white;border:none;border-radius:4px;cursor:pointer;">홈으로 돌아가기</button></div>`;
+        
+        document.getElementById('backBtn').addEventListener('click', function() {
+          toggle(true);
+        });
       });
   } else {
     // 업로드된 프로젝트 보기
@@ -297,11 +325,38 @@ function createFlipBook(pages) {
 }
 
 /* ── 네비게이션 ── */
-$id('homeBtn').onclick=()=>toggle(true);
+$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';
+  
+  // 추가: 전체 화면 모드에서 homeBtn 위치 조정
+  if(!showHome) {
+    $id('homeBtn').style.position = 'fixed';
+    $id('homeBtn').style.top = '20px';
+    $id('homeBtn').style.left = '20px';
+    $id('homeBtn').style.zIndex = '1001';  // 뷰어보다 높은 z-index
+    $id('homeBtn').style.fontSize = '24px'; // 크기 증가
+    $id('homeBtn').style.width = '48px';
+    $id('homeBtn').style.height = '48px';
+  } else {
+    $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 = '';
+  }
 }
 
 // 페이지 로드 시 서버 PDF 로드
@@ -351,20 +406,28 @@ async def get_pdf_content(path: str):
         with open(path, "rb") as pdf_file:
             content = pdf_file.read()
             
-        # 응답 헤더 설정 - PDF 파일임을 명시
+        # 파일명 처리 - URL 인코딩으로 한글 등 특수 문자 처리
+        import urllib.parse
+        filename = pdf_path.name
+        encoded_filename = urllib.parse.quote(filename)
+        
+        # 응답 헤더 설정 - RFC 6266 표준 사용
         headers = {
             "Content-Type": "application/pdf",
-            "Content-Disposition": f"inline; filename={pdf_path.name}"
+            "Content-Disposition": f"inline; filename=\"{encoded_filename}\"; filename*=UTF-8''{encoded_filename}"
         }
         
-        # 파일 콘텐츠 반환
+        # 파일 콘텐츠 직접 반환 (dict가 아닌 Response 객체)
         from fastapi.responses import Response
-        return Response(content=content, headers=headers)
+        return Response(content=content, media_type="application/pdf")
     except Exception as e:
         import traceback
         error_details = traceback.format_exc()
         print(f"PDF 콘텐츠 로드 오류: {str(e)}\n{error_details}")
-        return {"error": str(e)}, 500
+        
+        # 오류 응답 반환 (JSON 형식)
+        from fastapi.responses import JSONResponse
+        return JSONResponse(content={"error": str(e)}, status_code=500)
 
 @app.get("/", response_class=HTMLResponse)
 async def root():