Update app.py

app.py

@@ -1569,7 +1569,7 @@ HTML = """
     </div>
   </section>
 
-  <script>
+<script>
     let projects=[], fb=null;
     const grid=document.getElementById('grid'), viewer=document.getElementById('viewer');
     pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';
@@ -1584,20 +1584,114 @@ 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();
+        }
+      });
+    }
     
     /* ── 유틸 ── */
     function $id(id){return document.getElementById(id)}
     
-    // 파일 업로드 이벤트 처리
-    document.addEventListener("DOMContentLoaded", function() {
+    // DOM이 로드되면 실행
+    document.addEventListener('DOMContentLoaded', function() {
       console.log("DOM 로드 완료, 이벤트 설정 시작");
       
+      // 오디오 초기화 시도
+      initializeAudio().catch(e => console.warn('오디오 초기화 실패:', e));
+      
       // PDF 업로드 버튼
       const pdfBtn = document.getElementById('pdfUploadBtn');
       const pdfInput = document.getElementById('pdfInput');
@@ -1632,6 +1726,28 @@ HTML = """
       
       // 관리자 버튼 이벤트 설정
       setupAdminFunctions();
+      
+      // 홈 버튼 이벤트 설정
+      const homeButton = document.getElementById('homeButton');
+      if (homeButton) {
+        homeButton.addEventListener('click', function() {
+          if(fb) {
+            fb.destroy();
+            viewer.innerHTML = '';
+            fb = null;
+          }
+          toggle(true);
+          
+          // 로딩 인디케이터 정리
+          if (pageLoadingInterval) {
+            clearInterval(pageLoadingInterval);
+            pageLoadingInterval = null;
+          }
+          $id('loadingPages').style.display = 'none';
+          currentLoadingPdfPath = null;
+          currentPdfId = null;
+        });
+      }
     });
     
     // 서버에 PDF 업로드 함수
@@ -1668,46 +1784,44 @@ HTML = """
       }
     }
 
-function addCard(i, thumb, title, isCached = false, pdfId = null) {
-  const d = document.createElement('div');
-  d.className = 'card fade-in';
-  d.onclick = () => open(i);
-  
-  // PDF ID가 있으면 데이터 속성으로 저장
-  if (pdfId) {
-    d.dataset.pdfId = pdfId;
-  }
-  
-  // 제목 처리
-  const displayTitle = title ? 
-    (title.length > 15 ? title.substring(0, 15) + '...' : title) : 
-    '프로젝트 ' + (i+1);
-  
-  // 캐시 상태 뱃지 추가
-  const cachedBadge = isCached ? 
-    '<div class="cached-status">캐시됨</div>' : '';
-  
-  // 바로가기 링크 추가 (PDF ID가 있는 경우에만)
-  const linkHtml = pdfId ? 
-    `<div style="position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); z-index:5;">
-      <a href="/view/${pdfId}" target="_blank" style="color:#4a6ee0; font-size:11px;">Shaer Link</a>
-    </div>` : '';
-  
-  d.innerHTML = `
-    <div class="card-inner">
-      ${cachedBadge}
-      <img src="${thumb}" alt="${displayTitle}" loading="lazy">
-      ${linkHtml}
-      <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
-    </div>
-  `;
-  grid.appendChild(d);
-  
-  // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
-  $id('noProjects').style.display = 'none';
-}
-
-
+    function addCard(i, thumb, title, isCached = false, pdfId = null) {
+      const d = document.createElement('div');
+      d.className = 'card fade-in';
+      d.onclick = () => open(i);
+      
+      // PDF ID가 있으면 데이터 속성으로 저장
+      if (pdfId) {
+        d.dataset.pdfId = pdfId;
+      }
+      
+      // 제목 처리
+      const displayTitle = title ? 
+        (title.length > 15 ? title.substring(0, 15) + '...' : title) : 
+        '프로젝트 ' + (i+1);
+      
+      // 캐시 상태 뱃지 추가
+      const cachedBadge = isCached ? 
+        '<div class="cached-status">캐시됨</div>' : '';
+      
+      // 바로가기 링크 추가 (PDF ID가 있는 경우에만)
+      const linkHtml = pdfId ? 
+        `<div style="position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); z-index:5;">
+          <a href="/view/${pdfId}" target="_blank" style="color:#4a6ee0; font-size:11px;">Share Link</a>
+        </div>` : '';
+      
+      d.innerHTML = `
+        <div class="card-inner">
+          ${cachedBadge}
+          <img src="${thumb}" alt="${displayTitle}" loading="lazy">
+          ${linkHtml}
+          <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
+        </div>
+      `;
+      grid.appendChild(d);
+      
+      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
+      $id('noProjects').style.display = 'none';
+    }
 
     /* ── 프로젝트 저장 ── */
     function save(pages, title, isCached = false, pdfId = null) {
@@ -1868,6 +1982,9 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
     /* ── 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');
@@ -2215,6 +2332,13 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
         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가 없는 페이지는 로딩 중 이미지로 대체
@@ -2235,7 +2359,7 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
           backgroundColor: '#fff',
           /* 🔊 내장 사운드 */
           sound: true,
-          assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
+          assets: {flipMp3: '/static/turnPage2.mp3', hardFlipMp3: '/static/turnPage2.mp3'}, // 절대 경로로 수정
           controlsProps: {
             enableFullscreen: true,
             enableToc: true,
@@ -2300,24 +2424,6 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
     }
 
     /* ── 네비게이션 ── */
-    $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;
-      currentPdfId = null;
-    };
-
     function toggle(showHome){
       $id('home').style.display=showHome?'block':'none';
       $id('viewerPage').style.display=showHome?'none':'block';
@@ -2335,63 +2441,90 @@ function addCard(i, thumb, title, isCached = false, pdfId = null) {
     /* -- 관리자 기능 -- */
     function setupAdminFunctions() {
       // 관리자 버튼 클릭 - 모달 표시
-      $id('adminButton').addEventListener('click', function() {
-        $id('adminLoginModal').style.display = 'flex';
-        $id('adminPasswordInput').value = '';
-        $id('adminPasswordInput').focus();
-      });
+      const adminButton = document.getElementById('adminButton');
+      const adminLoginModal = document.getElementById('adminLoginModal');
+      const adminLoginClose = document.getElementById('adminLoginClose');
+      const adminLoginButton = document.getElementById('adminLoginButton');
+      const adminPasswordInput = document.getElementById('adminPasswordInput');
+      const adminBackButton = document.getElementById('adminBackButton');
+      
+      if (adminButton) {
+        adminButton.addEventListener('click', function() {
+          if (adminLoginModal) {
+            adminLoginModal.style.display = 'flex';
+            if (adminPasswordInput) {
+              adminPasswordInput.value = '';
+              adminPasswordInput.focus();
+            }
+          }
+        });
+      }
       
       // 모달 닫기 버튼
-      $id('adminLoginClose').addEventListener('click', function() {
-        $id('adminLoginModal').style.display = 'none';
-      });
+      if (adminLoginClose) {
+        adminLoginClose.addEventListener('click', function() {
+          if (adminLoginModal) {
+            adminLoginModal.style.display = 'none';
+          }
+        });
+      }
       
       // 엔터 키로 로그인
-      $id('adminPasswordInput').addEventListener('keyup', function(e) {
-        if (e.key === 'Enter') {
-          $id('adminLoginButton').click();
-        }
-      });
+      if (adminPasswordInput) {
+        adminPasswordInput.addEventListener('keyup', function(e) {
+          if (e.key === 'Enter' && adminLoginButton) {
+            adminLoginButton.click();
+          }
+        });
+      }
       
       // 로그인 버튼
-      $id('adminLoginButton').addEventListener('click', async function() {
-        const password = $id('adminPasswordInput').value;
-        
-        try {
-          showLoading("로그인 중...");
+      if (adminLoginButton) {
+        adminLoginButton.addEventListener('click', async function() {
+          if (!adminPasswordInput) return;
           
-          const formData = new FormData();
-          formData.append('password', password);
+          const password = adminPasswordInput.value;
           
-          const response = await fetch('/api/admin-login', {
-            method: 'POST',
-            body: formData
-          });
-          
-          const data = await response.json();
-          
-          hideLoading();
-          
-          if (data.success) {
-            // 로그인 성공 - 관리자 페이지 표시
-            $id('adminLoginModal').style.display = 'none';
-            showAdminPage();
-          } else {
-            // 로그인 실패
-            showError("관리자 인증 ��패: 비밀번호가 일치하지 않습니다.");
+          try {
+            showLoading("로그인 중...");
+            
+            const formData = new FormData();
+            formData.append('password', password);
+            
+            const response = await fetch('/api/admin-login', {
+              method: 'POST',
+              body: formData
+            });
+            
+            const data = await response.json();
+            
+            hideLoading();
+            
+            if (data.success) {
+              // 로그인 성공 - 관리자 페이지 표시
+              if (adminLoginModal) {
+                adminLoginModal.style.display = 'none';
+              }
+              showAdminPage();
+            } else {
+              // 로그인 실패
+              showError("관리자 인증 실패: 비밀번호가 일치하지 않습니다.");
+            }
+          } catch (error) {
+            console.error("관리자 로그인 오류:", error);
+            hideLoading();
+            showError("로그인 처리 중 오류가 발생했습니다.");
           }
-        } catch (error) {
-          console.error("관리자 로그인 오류:", error);
-          hideLoading();
-          showError("로그인 처리 중 오류가 발생했습니다.");
-        }
-      });
+        });
+      }
       
       // 관리자 페이지 뒤로가기
-      $id('adminBackButton').addEventListener('click', function() {
-        $id('adminPage').style.display = 'none';
-        $id('home').style.display = 'block';
-      });
+      if (adminBackButton) {
+        adminBackButton.addEventListener('click', function() {
+          document.getElementById('adminPage').style.display = 'none';
+          document.getElementById('home').style.display = 'block';
+        });
+      }
     }
     
     // 관리자 페이지 표시