Update app.css

app.css

@@ -34,10 +34,38 @@ body {
   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: 600px; /* 기본 높이 축소 */
+  height: 600px;
   min-height: 400px;
   max-height: 800px;
   resize: vertical;
@@ -47,29 +75,29 @@ body {
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
-/* 리사이즈 핸들 */
-.right_panel::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 6px;
-  background: var(--neutral-200);
-  cursor: ns-resize;
-}
-
-/* 렌더링 영역 */
+/* iframe이 우측 패널을 꽉 채우도록 수정 */
 .html_content {
   height: calc(100% - 30px);
   width: 100%;
   background: var(--surface);
+  overflow: hidden;
 }
 
 .html_content iframe {
   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;
 }
 
 /* 렌더링 헤더 */
@@ -81,6 +109,9 @@ body {
   align-items: center;
   padding: 0 12px;
   gap: 6px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
 .header_btn {
@@ -89,16 +120,143 @@ body {
   border-radius: 50%;
 }
 
-/* 리사이즈 컨트롤 */
-.resize-handle {
-  position: absolute;
-  bottom: 0;
+.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 {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--surface);
+}
+
+/* 탭 컨텐츠가 전체 높이를 사용하도록 */
+.ant-tabs-content {
+  height: 100%;
+}
+
+.ant-tabs-tabpane {
+  height: 100%;
+}
+
+/* 로딩 상태와 빈 상태의 컨테이너 */
+.ant-empty,
+.ant-spin-container {
+  height: 100%;
+  display: flex;
+  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;
+}
+
+#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;
-  width: 20px;
-  height: 20px;
-  cursor: se-resize;
-  background: var(--neutral-200);
-  border-radius: 0 0 4px 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);
 }
 
 /* 반응형 조정 */
@@ -107,36 +265,153 @@ body {
     height: 400px;
     margin: 10px;
   }
+  
+  .setting-buttons {
+    flex-wrap: wrap;
+  }
+
+  .ant-btn {
+    min-width: 60px;
+    font-size: 0.9rem;
+  }
 }
 
-/* 기존 스타일 유지 */
-.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);
+/* 리사이즈 핸들 */
+.right_panel::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: var(--neutral-200);
+  cursor: ns-resize;
+}
+
+/* Drawer customization */
+.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);
-  text-align: center;
-  margin-bottom: 2rem;
 }
 
-/* 나머지 기존 스타일들... */
+.prompt-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.card-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 12px;
+  margin-bottom: 1rem;
+}
+
+.card-name {
+  font-weight: 600;
+  margin-bottom: 0.8rem;
+  font-size: 1.1rem;
+  color: var(--text-primary);
+}
 
+.card-prompt {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  background: var(--neutral-100);
+  padding: 0.8rem;
+  border-radius: 8px;
+  line-height: 1.5;
+}
 </style>
 
 <script>
+// iframe 내부 콘텐츠 크기 조정을 위한 스크립트
+function adjustIframeContent() {
+  const iframes = document.querySelectorAll('.html_content iframe');
+  iframes.forEach(iframe => {
+    try {
+      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 > * {
+            max-width: 100%;
+          }
+        `;
+        iframeDoc.head.appendChild(style);
+        
+        const resizeObserver = new ResizeObserver(() => {
+          iframe.style.height = '100%';
+        });
+        resizeObserver.observe(iframe);
+      };
+    } catch (e) {
+      console.error('iframe 조정 중 오류:', e);
+    }
+  });
+}
+
+// 리사이즈 기능
 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;
@@ -170,4 +445,9 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 });
+
+// 페이지 로드 및 동적 콘텐츠 변경 시 실행
+document.addEventListener('DOMContentLoaded', adjustIframeContent);
+const observer = new MutationObserver(adjustIframeContent);
+observer.observe(document.body, { childList: true, subtree: true });
 </script>