Update app.py

app.py

@@ -128,19 +128,67 @@ def html(cards, pg, total):
     .date{margin-top:4px;font-size:.85rem;color:#777;}
     .frame{position:relative;width:100%;padding-top:60%;overflow:hidden;}
     .frame iframe{position:absolute;top:0;left:0;width:142.857%;height:142.857%;
-                  transform:scale(.7);transform-origin:top left;border:0;}
+                  transform:scale(.7);transform-origin:top left;border:0;opacity:0;transition:opacity 0.3s;}
     .foot{padding:14px 24px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);text-align:right;}
     .link{font-size:.85rem;font-weight:600;color:#4a6dd8;text-decoration:none;}
     .cnt{text-align:center;font-size:.85rem;color:#555;margin:10px 0 40px;}
-    </style>"""
+    /* 추가 - iframe 오류 상태 처리 */
+    .frame-error {position:absolute;top:0;left:0;width:100%;height:100%;
+                  display:flex;align-items:center;justify-content:center;
+                  background:#f8f8f8;color:#666;font-size:14px;text-align:center;
+                  padding:20px;box-sizing:border-box;flex-direction:column;}
+    .frame-error-icon {font-size:36px;margin-bottom:12px;color:#999;}
+    </style>
+
+    <script>
+    // iframe 로드 오류 처리 함수
+    function handleIframeError(iframe) {
+      const container = iframe.parentNode;
+      iframe.style.display = 'none';
+      const errorDiv = document.createElement('div');
+      errorDiv.className = 'frame-error';
+      errorDiv.innerHTML = '<div class="frame-error-icon">🔒</div>' + 
+                          '<div>이 콘텐츠는 iframe으로 표시할 수 없습니다.</div>' +
+                          '<div>보안 설정으로 인해 차단되었습니다.</div>' +
+                          '<div style="margin-top:10px;font-size:12px;color:#999;">아래 원본 링크를 클릭하여 새 탭에서 열어보세요.</div>';
+      container.appendChild(errorDiv);
+    }
+
+    // iframe 로드 성공 처리
+    function handleIframeLoad(iframe) {
+      iframe.style.opacity = 1;
+    }
+
+    // iframe 로드 상태 확인
+    document.addEventListener('DOMContentLoaded', function() {
+      // 모든 iframe에 error 핸들러 추가
+      const frames = document.querySelectorAll('iframe');
+      frames.forEach(frame => {
+        frame.addEventListener('error', function() {
+          handleIframeError(this);
+        });
+        
+        // 5초 후에도 로드되지 않으면 오류로 간주
+        setTimeout(function() {
+          if(frame.style.opacity !== '1') {
+            handleIframeError(frame);
+          }
+        }, 5000);
+      });
+    });
+    </script>"""
+    
     h=css+"<div class='grid'>"
     for c in cards:
         date=datetime.datetime.fromtimestamp(int(c["ts"])).strftime("%Y-%m-%d")
         h+=f"""
         <div class='card'>
           <div class='hdr'><p class='ttl'>{c['title']}</p><p class='date'>{date}</p></div>
-          <div class='frame'><iframe src="{c['url']}" loading="lazy"
-               allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe></div>
+          <div class='frame'>
+            <iframe src="{c['url']}" loading="lazy"
+                   allow="accelerometer; camera; encrypted-media; gyroscope;"
+                   onload="handleIframeLoad(this)"></iframe>
+          </div>
           <div class='foot'><a class='link' href="{c['url']}" target="_blank">원본↗</a></div>
         </div>"""
     h+="</div><p class='cnt'>Page "+str(pg)+" / "+str(total)+"</p>"