Update app.py

app.py

@@ -100,19 +100,24 @@ h2{margin:0;font-size:1.5rem;font-weight:600}
 }
 button.upload{all:unset;cursor:pointer;border:1px solid #bbb;padding:8px 14px;border-radius:6px;background:#fff;margin:0 8px}
 #viewer{
-  width:88%;
-  height:88vh; /* 전체 화면 높이의 88%로 조정 (기존 80%에서 10% 증가) */
-  max-width:88%; /* 최대 너비 88%로 제한 (기존 80%에서 10% 증가) */
+  width:90%;
+  height:90vh;
+  max-width:90%;
   margin:0; 
   background:#fff;
   border:1px solid #ddd;
   border-radius:8px;
-  position:fixed; /* 고정 위치 */
+  position:fixed;
   top:50%;
   left:50%;
-  transform:translate(-50%, -50%); /* 중앙 정렬 */
-  z-index:1000; /* 최상위 표시 */
+  transform:translate(-50%, -50%);
+  z-index:1000;
   box-shadow:0 4px 20px rgba(0,0,0,0.15);
+  /* 화면 비율에 맞게 조정 */
+  max-height: calc(90vh - 40px); /* 여백 고려 */
+  aspect-ratio: auto; /* 비율 자동 조정 */
+  object-fit: contain; /* 내용물 비율 유지 */
+  overflow: hidden; /* 내용 넘침 방지 */
 }
 
 /* FlipBook 컨트롤바 관련 스타일 오버라이드 */
@@ -339,6 +344,42 @@ 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) { // 가로 화면
+        height = Math.min(windowHeight * 0.9, windowHeight - 40);
+        width = height * aspectRatio * 0.8; // 가로 화면에서는 약간 줄임
+        if (width > windowWidth * 0.9) {
+          width = windowWidth * 0.9;
+          height = width / (aspectRatio * 0.8);
+        }
+      } else { // 세로 화면
+        width = Math.min(windowWidth * 0.9, windowWidth - 40);
+        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';
+    
     fb = new FlipBook(viewer, {
       pages: pages,
       viewMode: 'webgl',
@@ -375,6 +416,16 @@ function createFlipBook(pages) {
       }
     });
     
+    // 화면 크기 변경 시 FlipBook 크기 조정
+    window.addEventListener('resize', () => {
+      if (fb) {
+        const newSize = calculateAspectRatio();
+        viewer.style.width = newSize.width + 'px';
+        viewer.style.height = newSize.height + 'px';
+        fb.resize();
+      }
+    });
+    
     // FlipBook 생성 후 컨트롤바 강제 표시
     setTimeout(() => {
       try {