Update app.py

app.py

@@ -601,11 +601,15 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     session_history = gr.HTML(elem_classes="session-history")
                     close_btn = antd.Button("닫기", type="default", elem_classes="close-btn")
 
+            # 높이 일관성을 위한 변수 정의
+            panel_height = "900px"
+            content_height = "870px"  # 헤더(30px)를 제외한 높이
+
             with antd.Row(gutter=[32, 12], align="top", elem_classes="equal-height-container") as layout:
 
                 # 좌측 미리보기
                 with antd.Col(span=24, md=16, elem_classes="equal-height-col"):
-                    with ms.Div(elem_classes="right_panel panel"):
+                    with ms.Div(elem_classes="right_panel panel", style=f"height: {panel_height};"):
                         gr.HTML(r"""
 <div class="render_header">
     <span class="header_btn"></span>
@@ -615,13 +619,13 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
 """)
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
-                                empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content")
+                                empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content", style=f"height: {content_height};")
                             with antd.Tabs.Item(key="loading"):
                                 loading = antd.Spin(
-                                    True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content"
+                                    True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content", style=f"height: {content_height};"
                                 )
                             with antd.Tabs.Item(key="render"):
-                                sandbox = gr.HTML(elem_classes="html_content")
+                                sandbox = gr.HTML(elem_classes="html_content", style=f"height: {content_height};")
 
                 # 우측 입력/버튼/배포
                 with antd.Col(span=24, md=8, elem_classes="equal-height-col"):
@@ -638,17 +642,20 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                             deploy_btn = antd.Button("배포", type="default", size="large", elem_classes="deploy-btn")
                             clear_btn = antd.Button("클리어", type="default", size="large", elem_classes="clear-btn")
 
-                    with antd.Flex(vertical=True, gap="middle", wrap=True, elem_classes="input-panel"):
+                    # 우측 입력 패널에 고정된 높이 지정
+                    with antd.Flex(vertical=True, gap="middle", wrap=True, elem_classes="input-panel", style=f"height: {content_height}; max-height: {content_height}; overflow: hidden;"):
+                        # 입력창의 높이를 조정하여 배포 결과 영역을 고려
                         input_text = antd.InputTextarea(
                             size="large",
                             allow_clear=True,
                             placeholder=random.choice(DEMO_LIST)['description'],
-                            max_length=100000
+                            max_length=100000,
+                            style="height: 750px; max-height: 750px;"  # 높이 조정
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')
 
                         # 가장 기본적인 방식의 배포 결과 표시
-                        deploy_result = gr.Markdown("", label="배포 결과")
+                        deploy_result = gr.Markdown("", label="배포 결과", elem_classes="deploy-result")
 
                         # 더 이상 자바스크립트 삽입 없음
                         js_trigger = gr.HTML(elem_id="js-trigger", visible=False)
@@ -784,6 +791,7 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                 inputs=[code_output],
                 outputs=[deploy_result]
             )
+            
 # ------------------------
 # 8) 실제 실행
 # ------------------------