Update app.css

app.css

@@ -62,7 +62,6 @@ body {
   color: var(--text-primary);
 }
 
-/* 우측 패널 크기 조절 */
 .right_panel {
   position: relative;
   height: 600px;
@@ -73,24 +72,29 @@ body {
   margin: 20px;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  display: flex;
+  flex-direction: column;
 }
 
-/* iframe이 우측 패널을 꽉 채우도록 수정 */
+/* 수정된 HTML 콘텐츠 영역 */
 .html_content {
-  height: calc(100% - 30px);
-  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   background: var(--surface);
   overflow: hidden;
 }
 
+/* 수정된 iframe 스타일 */
 .html_content iframe {
+  flex: 1;
   width: 100%;
-  height: 100%;
   border: none;
   display: block;
 }
 
-/* 렌더링된 콘텐츠가 iframe 내에서 전체 영역을 사용하도록 */
+
+/* iframe 내부 스타일을 위한 추가 */
 .html_content iframe html,
 .html_content iframe body {
   margin: 0;
@@ -100,7 +104,7 @@ body {
   overflow: auto;
 }
 
-/* 렌더링 헤더 */
+/* 수정된 렌더링 헤더 */
 .render_header {
   height: 30px;
   background: var(--neutral-100);
@@ -109,9 +113,7 @@ body {
   align-items: center;
   padding: 0 12px;
   gap: 6px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
+  flex-shrink: 0;
 }
 
 .header_btn {
@@ -140,25 +142,41 @@ body {
   align-items: center;
   background: var(--surface);
 }
-
-/* 탭 컨텐츠가 전체 높이를 사용하도록 */
+/* 수정된 탭 콘텐츠 스타일 */
 .ant-tabs-content {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .ant-tabs-tabpane {
-  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 수정된 우측 콘텐츠 스타일 */
+.right_content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: var(--surface);
 }
 
-/* 로딩 상태와 빈 상태의 컨테이너 */
+/* Empty와 Spin 컨테이너 수정 */
 .ant-empty,
 .ant-spin-container {
-  height: 100%;
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+
+
+
 .history_chatbot button {
   background: none;
   border: none;
@@ -378,26 +396,53 @@ function adjustIframeContent() {
   iframes.forEach(iframe => {
     try {
       iframe.onload = function() {
+        // iframe 내부 document 접근
         const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+        
+        // 스타일 요소 생성
         const style = iframeDoc.createElement('style');
         style.textContent = `
           html, body {
             margin: 0;
             padding: 0;
-            height: 100%;
+            height: 100vh;
             width: 100%;
             overflow: auto;
           }
+          body {
+            display: flex;
+            flex-direction: column;
+          }
           body > * {
-            max-width: 100%;
+            width: 100%;
           }
         `;
-        iframeDoc.head.appendChild(style);
         
-        const resizeObserver = new ResizeObserver(() => {
-          iframe.style.height = '100%';
+        // 스타일 적용
+        if (iframeDoc.head) {
+          iframeDoc.head.appendChild(style);
+        }
+        
+        // iframe 크기 조정
+        function updateIframeSize() {
+          const content = iframeDoc.body;
+          if (content) {
+            iframe.style.height = '100%';
+            content.style.minHeight = '100%';
+          }
+        }
+        
+        // 초기 크기 설정
+        updateIframeSize();
+        
+        // ResizeObserver로 크기 변화 감지
+        const resizeObserver = new ResizeObserver(updateIframeSize);
+        resizeObserver.observe(iframeDoc.body);
+        
+        // iframe 내부 스크롤 이벤트 처리
+        iframeDoc.addEventListener('scroll', function(e) {
+          e.stopPropagation();
         });
-        resizeObserver.observe(iframe);
       };
     } catch (e) {
       console.error('iframe 조정 중 오류:', e);
@@ -405,49 +450,29 @@ function adjustIframeContent() {
   });
 }
 
-// 리사이즈 기능
+// 페이지 로드 시 실행
 document.addEventListener('DOMContentLoaded', function() {
-  const panel = document.querySelector('.right_panel');
-  let isResizing = false;
-  let startY;
-  let startHeight;
-
-  panel.addEventListener('mousedown', function(e) {
-    if (e.offsetY > panel.offsetHeight - 6) {
-      isResizing = true;
-      startY = e.pageY;
-      startHeight = panel.offsetHeight;
-      document.body.style.cursor = 'ns-resize';
-    }
-  });
-
-  document.addEventListener('mousemove', function(e) {
-    if (!isResizing) return;
-    
-    const diff = e.pageY - startY;
-    const newHeight = Math.max(400, Math.min(800, startHeight + diff));
-    panel.style.height = `${newHeight}px`;
-  });
-
-  document.addEventListener('mouseup', function() {
-    isResizing = false;
-    document.body.style.cursor = '';
-  });
-
-  // 더블클릭으로 크기 토글
-  panel.addEventListener('dblclick', function(e) {
-    if (e.offsetY > panel.offsetHeight - 6) {
-      if (panel.offsetHeight === 600) {
-        panel.style.height = '800px';
-      } else {
-        panel.style.height = '600px';
+  adjustIframeContent();
+  
+  // DOM 변화 감지하여 새로운 iframe에도 적용
+  const observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.addedNodes.length) {
+        adjustIframeContent();
       }
-    }
+    });
+  });
+  
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
   });
 });
 
-// 페이지 로드 및 동적 콘텐츠 변경 시 실행
-document.addEventListener('DOMContentLoaded', adjustIframeContent);
-const observer = new MutationObserver(adjustIframeContent);
-observer.observe(document.body, { childList: true, subtree: true });
+// send_to_sandbox 함수 수정
+function send_to_sandbox(code) {
+  const encoded_html = btoa(unescape(encodeURIComponent(code)));
+  const data_uri = `data:text/html;base64,${encoded_html}`;
+  return `<div class="render_content"><iframe src="${data_uri}" style="width:100%;height:100%;border:none;"></iframe></div>`;
+}
 </script>