Update app.css

app.css

@@ -64,36 +64,26 @@ body {
 
 .right_panel {
   position: relative;
-  height: 600px;
-  min-height: 400px;
-  max-height: 800px;
-  resize: vertical;
-  overflow: hidden;
-  margin: 20px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  height: 100%; /* 전체 화면을 차지하도록 변경 */
   display: flex;
   flex-direction: column;
 }
 
-/* 수정된 HTML 콘텐츠 영역 */
 .html_content {
-  flex: 1;
+  flex: 1; /* 부모 안에서 남은 공간을 모두 차지 */
   display: flex;
   flex-direction: column;
-  background: var(--surface);
-  overflow: hidden;
+  height: 100%; /* 높이를 100%로 */
 }
 
-/* 수정된 iframe 스타일 */
 .html_content iframe {
-  flex: 1;
+  flex: 1; /* 남은 공간을 모두 사용 */
   width: 100%;
+  height: 100%; /* 높이 설정 */
   border: none;
   display: block;
 }
 
-
 /* iframe 내부 스타일을 위한 추가 */
 .html_content iframe html,
 .html_content iframe body {
@@ -104,7 +94,6 @@ body {
   overflow: auto;
 }
 
-/* 수정된 렌더링 헤더 */
 .render_header {
   height: 30px;
   background: var(--neutral-100);
@@ -134,15 +123,14 @@ body {
   background-color: var(--success);
 }
 
-/* 스핀너와 빈 상태 표시를 중앙에 배치 */
 .right_content {
-  height: 100%;
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--surface);
 }
-/* 수정된 탭 콘텐츠 스타일 */
+
 .ant-tabs-content {
   height: 100%;
   display: flex;
@@ -155,27 +143,348 @@ body {
   flex-direction: column;
 }
 
-/* 수정된 우측 콘텐츠 스타일 */
-.right_content {
+.ant-empty,
+.ant-spin-container {
   flex: 1;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
+}
+
+.history_chatbot button {
+  background: none;
+  border: none;
+}
+
+footer, .footer, div[class*="footer"], #footer {
+  display: none !important;
+}
+
+#component-0 textarea,
+.gradio-container textarea,
+.ant-input-textarea-large textarea {
+  height: 300px !important;
+  min-height: 300px !important;
+  resize: vertical !important;
+  border: 2px solid var(--neutral-200);
+  border-radius: 12px;
+  transition: all 0.3s;
   background: var(--surface);
+  color: var(--text-primary);
+  padding: 1rem;
 }
 
-/* Empty와 Spin 컨테이너 수정 */
-.ant-empty,
-.ant-spin-container {
+#component-0 textarea:focus,
+.gradio-container textarea:focus,
+.ant-input-textarea-large textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
+}
+
+.setting-buttons {
+  position: sticky;
+  top: 1rem;
+  right: 0;
+  z-index: 1000;
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(8px);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--neutral-200);
+}
+
+.ant-btn {
+  flex: 1;
+  min-width: 80px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ant-btn-primary {
+  background: linear-gradient(to right, var(--primary), var(--secondary));
+  border: none;
+  color: white;
+}
+
+.ant-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
+}
+
+.ant-btn-default {
+  background: var(--surface);
+  border: 1px solid var(--primary);
+  color: var(--primary);
+}
+
+.ant-btn-default:hover {
+  color: var(--secondary);
+  border-color: var(--secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--neutral-100);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--neutral-300);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--neutral-400);
+}
+
+@media (max-width: 768px) {
+  .right_panel {
+    height: 400px;
+    margin: 10px;
+  }
+  
+  .setting-buttons {
+    flex-wrap: wrap;
+  }
+
+  .ant-btn {
+    min-width: 60px;
+    font-size: 0.9rem;
+  }
+}
+
+.right_panel::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: var(--neutral-200);
+  cursor: ns-resize;
+}
+
+.ant-drawer-content-wrapper {
+  border-radius: 16px 0 0 16px;
+}
+
+.ant-drawer-header {
+  background: var(--primary);
+  color: white;
+  border-radius: 16px 0 0 0;
+}
+
+.ant-drawer-title {
+  color: white;
+  font-weight: 500;
+}
+
+.ant-drawer-close {
+  color: white;
+}
+
+.ant-drawer-body {
+  background: var(--surface);
+}
+
+.session-drawer .chatbot {
+  height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.session-history {
+  height: 700px;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.prompt-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.prompt-card {
+  background: var(--surface);
+  border-radius: 16px;
+  padding: 1.25rem;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--neutral-200);
+}
+
+.prompt-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 
+
+
+ <style>
+/* Modern color scheme */
+:root {
+  /* 주요 브랜드 컬러 */
+  --primary: #0066cc;      /* 메인 브랜드 컬러 */
+  --secondary: #3385ff;    /* 밝은 액센트 */
+  --accent: #66a3ff;       /* 부드러운 포인트 컬러 */
+
+  /* 배경 컬러 */
+  --background: #f7f9fc;   /* 메인 배경 */
+  --surface: #ffffff;      /* 카드 배경 */
+  
+  /* 텍스트 컬러 */
+  --text-primary: #2c3e50; /* 주요 텍스트 */
+  --text-secondary: #546e7a; /* 부가 텍스트 */
+  --text-tertiary: #78909c; /* 덜 중요한 텍스트 */
+  
+  /* 기능성 컬러 */
+  --success: #34c759;      /* 성공/확인 */
+  --warning: #ff9500;      /* 경고/주의 */
+  --error: #ff3b30;        /* 오류/삭제 */
+  
+  /* 중립 컬러 */
+  --neutral-100: #f8f9fa;
+  --neutral-200: #e9ecef;
+  --neutral-300: #dee2e6;
+  --neutral-400: #ced4da;
+}
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--background);
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.left_header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, var(--surface), var(--neutral-100));
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--neutral-200);
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.left_header img {
+  width: 180px;
+  margin-bottom: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.left_header h1 {
+  margin: 0.5rem 0;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.right_panel {
+  position: relative;
+  height: 100%; /* 전체 화면을 차지하도록 변경 */
+  display: flex;
+  flex-direction: column;
+}
+
+.html_content {
+  flex: 1; /* 부모 안에서 남은 공간을 모두 차지 */
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* 높이를 100%로 */
+}
+
+.html_content iframe {
+  flex: 1; /* 남은 공간을 모두 사용 */
+  width: 100%;
+  height: 100%; /* 높이 설정 */
+  border: none;
+  display: block;
+}
+
+/* iframe 내부 스타일을 위한 추가 */
+.html_content iframe html,
+.html_content iframe body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.render_header {
+  height: 30px;
+  background: var(--neutral-100);
+  border-radius: 8px 8px 0 0;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.header_btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.render_header > .header_btn:nth-child(1) {
+  background-color: var(--error);
+}
+
+.render_header > .header_btn:nth-child(2) {
+  background-color: var(--warning);
+}
+
+.render_header > .header_btn:nth-child(3) {
+  background-color: var(--success);
+}
+
+.right_content {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
+  background: var(--surface);
 }
 
+.ant-tabs-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
+.ant-tabs-tabpane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 
+.ant-empty,
+.ant-spin-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .history_chatbot button {
   background: none;
@@ -258,7 +567,6 @@ footer, .footer, div[class*="footer"], #footer {
   box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
 }
 
-/* 스크롤바 스타일링 */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -277,7 +585,6 @@ footer, .footer, div[class*="footer"], #footer {
   background: var(--neutral-400);
 }
 
-/* 반응형 조정 */
 @media (max-width: 768px) {
   .right_panel {
     height: 400px;
@@ -294,7 +601,6 @@ footer, .footer, div[class*="footer"], #footer {
   }
 }
 
-/* 리사이즈 핸들 */
 .right_panel::after {
   content: '';
   position: absolute;
@@ -306,7 +612,6 @@ footer, .footer, div[class*="footer"], #footer {
   cursor: ns-resize;
 }
 
-/* Drawer customization */
 .ant-drawer-content-wrapper {
   border-radius: 16px 0 0 16px;
 }
@@ -330,7 +635,6 @@ footer, .footer, div[class*="footer"], #footer {
   background: var(--surface);
 }
 
-/* 템플릿 관련 스타일 */
 .session-drawer .chatbot {
   height: calc(100vh - 200px);
   overflow-y: auto;
@@ -394,59 +698,35 @@ footer, .footer, div[class*="footer"], #footer {
 function adjustIframeContent() {
   const iframes = document.querySelectorAll('.html_content iframe');
   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: 100vh;
-            width: 100%;
-            overflow: auto;
-          }
-          body {
-            display: flex;
-            flex-direction: column;
-          }
-          body > * {
-            width: 100%;
-          }
-        `;
-        
-        // 스타일 적용
-        if (iframeDoc.head) {
-          iframeDoc.head.appendChild(style);
+    iframe.onload = function() {
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+      // 스타일 요소 생성
+      const style = iframeDoc.createElement('style');
+      style.textContent = `
+        html, body {
+          margin: 0;
+          padding: 0;
+          height: 100%;
+          width: 100%;
+          overflow: auto;
+        }
+        body {
+          display: flex;
+          flex-direction: column;
         }
-        
-        // iframe 크기 조정
-        function updateIframeSize() {
-          const content = iframeDoc.body;
-          if (content) {
-            iframe.style.height = '100%';
-            content.style.minHeight = '100%';
-          }
+        body > * {
+          width: 100%;
         }
-        
-        // 초기 크기 설정
-        updateIframeSize();
-        
-        // ResizeObserver로 크기 변화 감지
-        const resizeObserver = new ResizeObserver(updateIframeSize);
-        resizeObserver.observe(iframeDoc.body);
-        
-        // iframe 내부 스크롤 이벤트 처리
-        iframeDoc.addEventListener('scroll', function(e) {
-          e.stopPropagation();
-        });
-      };
-    } catch (e) {
-      console.error('iframe 조정 중 오류:', e);
-    }
+      `;
+
+      if (iframeDoc.head) {
+        iframeDoc.head.appendChild(style);
+      }
+
+      // iframe 크기 설정
+      iframe.style.height = '100%';
+    };
   });
 }
 
@@ -462,7 +742,7 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     });
   });
-  
+
   observer.observe(document.body, {
     childList: true,
     subtree: true
@@ -475,4 +755,5 @@ function send_to_sandbox(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>
+</script>
+