Update app.py

app.py

@@ -1584,18 +1584,113 @@ HTML = """
     // 현재 열린 PDF의 ID
     let currentPdfId = null;
 
-    /* 🔊 오디오 unlock – 내장 Audio 와 같은 MP3 경로 사용 */
-    ['click','touchstart'].forEach(evt=>{
-      document.addEventListener(evt,function u(){new Audio('static/turnPage2.mp3')
-            .play().then(a=>a.pause()).catch(()=>{});document.removeEventListener(evt,u,{capture:true});},
-            {once:true,capture:true});
-    });
+// 오디오 컨텍스트와 초기화 상태 관리
+let audioInitialized = false;
+let audioContext = null;
+
+// 오디오 초기화 함수
+function initializeAudio() {
+  if (audioInitialized) return Promise.resolve();
+  
+  return new Promise((resolve) => {
+    // 오디오 컨텍스트 생성 (사용자 상호작용이 필요 없는 초기화)
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    
+    // MP3 로드 및 초기화
+    const audio = new Audio('/static/turnPage2.mp3');
+    audio.volume = 0.01; // 최소 볼륨으로 설정
+    
+    // 로드된 오디오 재생 시도 (사용자 상호작용 요구될 수 있음)
+    const playPromise = audio.play();
+    
+    if (playPromise !== undefined) {
+      playPromise
+        .then(() => {
+          // 성공적으로 재생됨 - 즉시 일시정지
+          audio.pause();
+          audioInitialized = true;
+          console.log('오디오 초기화 성공');
+          resolve();
+        })
+        .catch((error) => {
+          console.log('자동 오디오 초기화 실패, 사용자 상호작용 필요:', error);
+          
+          // 사용자 상호작용이 필요한 경우, 이벤트 리스너 추가
+          const initOnUserAction = function() {
+            const tempAudio = new Audio('/static/turnPage2.mp3');
+            tempAudio.volume = 0.01;
+            tempAudio.play()
+              .then(() => {
+                tempAudio.pause();
+                audioInitialized = true;
+                console.log('사용자 상호작용으로 오디오 초기화 성공');
+                resolve();
+                
+                // 이벤트 리스너 제거
+                ['click', 'touchstart', 'keydown'].forEach(event => {
+                  document.removeEventListener(event, initOnUserAction, { capture: true });
+                });
+              })
+              .catch(e => console.error('오디오 초기화 실패:', e));
+          };
+          
+          // 사용자 상호작용 이벤트에 리스너 추가
+          ['click', 'touchstart', 'keydown'].forEach(event => {
+            document.addEventListener(event, initOnUserAction, { once: true, capture: true });
+          });
+          
+          // 페이지 로드 직후 사용자에게 오디오 활성화 요청
+          if (window.location.pathname.startsWith('/view/')) {
+            // 오디오 활성화 안내 메시지 표시 (바로가기 링크로 접속한 경우)
+            setTimeout(() => {
+              const audioPrompt = document.createElement('div');
+              audioPrompt.style.position = 'fixed';
+              audioPrompt.style.bottom = '80px';
+              audioPrompt.style.left = '50%';
+              audioPrompt.style.transform = 'translateX(-50%)';
+              audioPrompt.style.backgroundColor = 'rgba(0,0,0,0.7)';
+              audioPrompt.style.color = 'white';
+              audioPrompt.style.padding = '10px 20px';
+              audioPrompt.style.borderRadius = '20px';
+              audioPrompt.style.zIndex = '10000';
+              audioPrompt.style.cursor = 'pointer';
+              audioPrompt.innerHTML = '페이지 어디든 클릭하여 소리 효과 활성화 <i class="fas fa-volume-up"></i>';
+              audioPrompt.id = 'audioPrompt';
+              
+              // 클릭 시 소리 활성화 및 메시지 제거
+              audioPrompt.addEventListener('click', function() {
+                initOnUserAction();
+                audioPrompt.remove();
+              });
+              
+              document.body.appendChild(audioPrompt);
+              
+              // 10초 후 자동으로 숨김
+              setTimeout(() => {
+                if (document.getElementById('audioPrompt')) {
+                  document.getElementById('audioPrompt').remove();
+                }
+              }, 10000);
+            }, 2000);
+          }
+        });
+    } else {
+      // 브라우저가 Promise 기반 재생을 지원하지 않는 경우
+      audioInitialized = true;
+      resolve();
+    }
+  });
+}
+
+// 페이지 로드 시 오디오 초기화 시도
+document.addEventListener('DOMContentLoaded', initializeAudio);
     
     /* ── 유틸 ── */
     function $id(id){return document.getElementById(id)}
     
     // 파일 업로드 이벤트 처리
-    document.addEventListener("DOMContentLoaded", function() {
+    // 페이지 로드 시 오디오 초기화 시도
+    document.addEventListener('DOMContentLoaded', initializeAudio);
       console.log("DOM 로드 완료, 이벤트 설정 ��작");
       
       // PDF 업로드 버튼
@@ -2175,129 +2270,137 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
       }
     }
 
-    function createFlipBook(pages) {
-      console.log('FlipBook 생성 시작. 페이지 수:', pages.length);
+
+function createFlipBook(pages) {
+  console.log('FlipBook 생성 시작. 페이지 수:', pages.length);
+  
+  try {
+    // 화면 비율 계산
+    const calculateAspectRatio = () => {
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      const aspectRatio = windowWidth / windowHeight;
       
-      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';
-        
-        // 페이지 데이터 정제 (빈 페이지 처리)
-        const validPages = pages.map(page => {
-          // src가 없는 페이지는 로딩 중 이미지로 대체
-          if (!page || !page.src) {
-            return {
-              src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+',
-              thumb: page && page.thumb ? page.thumb : ''
-            };
-          }
-          return page;
-        });
-        
-        fb = new FlipBook(viewer, {
-          pages: validPages,
-          viewMode: 'webgl',
-          autoSize: true,
-          flipDuration: 800,
-          backgroundColor: '#fff',
-          /* 🔊 내장 사운드 */
-          sound: true,
-          assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
-          controlsProps: {
-            enableFullscreen: true,
-            enableToc: true,
-            enableDownload: false,
-            enablePrint: false,
-            enableZoom: true,
-            enableShare: true, // 공유 버튼 활성화
-            enableSearch: true,
-            enableAutoPlay: true,
-            enableAnnotation: false,
-            enableSound: true,
-            enableLightbox: false,
-            layout: 10, // 레이아웃 옵션
-            skin: 'light', // 스킨 스타일
-            autoNavigationTime: 3600, // 자동 넘김 시간(초)
-            hideControls: false, // 컨트롤 숨김 비활성화
-            paddingTop: 10, // 상단 패딩
-            paddingLeft: 10, // 좌측 패딩
-            paddingRight: 10, // 우측 패딩
-            paddingBottom: 10, // 하단 패딩
-            pageTextureSize: 1024, // 페이지 텍스처 크기
-            thumbnails: true, // 섬네일 활성화
-            autoHideControls: false, // 자동 숨김 비활성화
-            controlsTimeout: 8000, // 컨트롤 표시 시간 연장
-            shareHandler: copyPdfShareUrl // 공유 핸들러 설정
-          }
-        });
-        
-        // 화면 크기 변경 시 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 {
-            // 컨트롤바 관련 요소 찾기 및 스타일 적용
-            const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
-            if (menuBars && menuBars.length > 0) {
-              menuBars.forEach(menuBar => {
-                menuBar.style.display = 'block';
-                menuBar.style.opacity = '1';
-                menuBar.style.visibility = 'visible';
-                menuBar.style.zIndex = '9999';
-              });
-            }
-          } catch (e) {
-            console.warn('컨트롤바 스타일 적용 중 오류:', e);
-          }
-        }, 1000);
-        
-        console.log('FlipBook 생성 완료');
-      } catch (error) {
-        console.error('FlipBook 생성 중 오류 발생:', error);
-        showError("FlipBook을 생성하는 중 오류가 발생했습니다.");
+      // 너비 또는 높이 기준으로 최대 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';
+    
+    // 사운드 초기화 여부 확인
+    if (!audioInitialized) {
+      initializeAudio()
+        .then(() => console.log('FlipBook 생성 전 오디오 초기화 완료'))
+        .catch(e => console.warn('FlipBook 생성 시 오디오 초기화 실패:', e));
     }
+    
+    // 페이지 데이터 정제 (빈 페이지 처리)
+    const validPages = pages.map(page => {
+      // src가 없는 페이지는 로딩 중 이미지로 대체
+      if (!page || !page.src) {
+        return {
+          src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+',
+          thumb: page && page.thumb ? page.thumb : ''
+        };
+      }
+      return page;
+    });
+    
+    fb = new FlipBook(viewer, {
+      pages: validPages,
+      viewMode: 'webgl',
+      autoSize: true,
+      flipDuration: 800,
+      backgroundColor: '#fff',
+      /* 🔊 내장 사운드 */
+      sound: true,
+      assets: {flipMp3: '/static/turnPage2.mp3', hardFlipMp3: '/static/turnPage2.mp3'}, // 절대 경로로 수정
+      controlsProps: {
+        enableFullscreen: true,
+        enableToc: true,
+        enableDownload: false,
+        enablePrint: false,
+        enableZoom: true,
+        enableShare: true, // 공유 버튼 활성화
+        enableSearch: true,
+        enableAutoPlay: true,
+        enableAnnotation: false,
+        enableSound: true,
+        enableLightbox: false,
+        layout: 10, // 레이아웃 옵션
+        skin: 'light', // 스킨 스타일
+        autoNavigationTime: 3600, // 자동 넘김 시간(초)
+        hideControls: false, // 컨트롤 숨김 비활성화
+        paddingTop: 10, // 상단 패딩
+        paddingLeft: 10, // 좌측 패딩
+        paddingRight: 10, // 우측 패딩
+        paddingBottom: 10, // 하단 패딩
+        pageTextureSize: 1024, // 페이지 텍스처 크기
+        thumbnails: true, // 섬네일 활성화
+        autoHideControls: false, // 자동 숨김 비활성화
+        controlsTimeout: 8000, // 컨트롤 표시 시간 연장
+        shareHandler: copyPdfShareUrl // 공유 핸들러 설정
+      }
+    });
+    
+    // 화면 크기 변경 시 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 {
+        // 컨트롤바 관련 요소 찾기 및 스타일 적용
+        const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
+        if (menuBars && menuBars.length > 0) {
+          menuBars.forEach(menuBar => {
+            menuBar.style.display = 'block';
+            menuBar.style.opacity = '1';
+            menuBar.style.visibility = 'visible';
+            menuBar.style.zIndex = '9999';
+          });
+        }
+      } catch (e) {
+        console.warn('컨트롤바 스타일 적용 중 오류:', e);
+      }
+    }, 1000);
+    
+    console.log('FlipBook 생성 완료');
+  } catch (error) {
+    console.error('FlipBook 생성 중 오류 발생:', error);
+    showError("FlipBook을 생성하는 중 오류가 발생했습니다.");
+  }
+}
 
     /* ── 네비게이션 ── */
     $id('homeButton').onclick=()=>{
@@ -2393,6 +2496,96 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
         $id('home').style.display = 'block';
       });
     }
+
+/* ── 카드 → FlipBook ── */
+async function open(i) {
+  // 기존 open 함수 내용...
+}
+
+/* ── PDF ID로 PDF 열기 ── */
+async function openPdfById(pdfId, pdfPath, isCached = false) {
+  try {
+    // 오디오 초기화 시도
+    await initializeAudio().catch(e => console.warn('PDF 열기 전 오디오 초기화 실패:', e));
+    
+    // 먼저 홈 화면에서 카드를 찾아서 클릭하는 방법 시도
+    let foundCard = false;
+    const cards = document.querySelectorAll('.card');
+    
+    for (let i = 0; i < cards.length; i++) {
+      if (cards[i].dataset.pdfId === pdfId) {
+        cards[i].click();
+        foundCard = true;
+        break;
+      }
+    }
+    
+    // 카드를 찾지 못한 경우 직접 오픈
+    if (!foundCard) {
+      toggle(false);
+      showLoading("PDF 준비 중...");
+      
+      let pages = [];
+      
+      // 이미 캐시된 경우 캐시된 데이터 사용
+      if (isCached) {
+        try {
+          const response = await fetch(`/api/cached-pdf?path=${encodeURIComponent(pdfPath)}`);
+          const cachedData = await response.json();
+          
+          if (cachedData.status === "completed" && cachedData.pages) {
+            hideLoading();
+            createFlipBook(cachedData.pages);
+            // 현재 열린 PDF의 ID 저장
+            currentPdfId = pdfId;
+            return;
+          }
+        } catch (error) {
+          console.error("캐시 데이터 로드 실패:", error);
+        }
+      }
+      
+      // 썸네일 가져오기
+      try {
+        const thumbResponse = await fetch(`/api/pdf-thumbnail?path=${encodeURIComponent(pdfPath)}`);
+        const thumbData = await thumbResponse.json();
+        
+        if (thumbData.thumbnail) {
+          pages = [{
+            src: thumbData.thumbnail,
+            thumb: thumbData.thumbnail,
+            path: pdfPath,
+            cached: isCached
+          }];
+        }
+      } catch (error) {
+        console.error("썸네일 로드 실패:", error);
+      }
+      
+      // 일단 기본 페이지 추가
+      if (pages.length === 0) {
+        pages = [{
+          path: pdfPath,
+          cached: isCached
+        }];
+      }
+      
+      // 프로젝트에 추가하고 뷰어 실행
+      const projectId = projects.push(pages) - 1;
+      hideLoading();
+      open(projectId);
+      
+      // 현재 열린 PDF의 ID 저장
+      currentPdfId = pdfId;
+    }
+  } catch (error) {
+    console.error("PDF ID로 열기 실패:", error);
+    hideLoading();
+    showError("PDF를 열 수 없습니다. 다시 시도해주세요.");
+  }
+}
+
+
     
     // 관리자 페이지 표시
     async function showAdminPage() {