Update app.py

app.py

@@ -707,6 +707,18 @@ def create_interface():
                 max-width: 800px;
                 margin: 0 auto;
             }
+            .main-image {
+                width: 100%;
+                max-width: 100%;
+            }
+        }
+        
+        /* 데스크톱 뷰 (601px 이상) */
+        @media (min-width: 601px) {
+            .main-image {
+                width: 600px;
+                max-width: 600px;
+            }
             .container { padding: 10px !important; }
             .gradio-row { 
                 flex-direction: column !important;
@@ -754,6 +766,19 @@ def create_interface():
                 flex: 1 !important;
                 min-width: 0 !important;
             }
+            .main-image-container {
+                width: 100%;
+                margin: 0 auto 2rem auto;
+                text-align: center;
+            }
+            
+            .main-image {
+                width: 100%;
+                height: auto;
+                max-width: 100%;
+                display: block;
+                margin: 0 auto;
+            }
         }
     
         /* 전반적인 UI 개선 */
@@ -838,6 +863,11 @@ def create_interface():
         with gr.Tabs(selected=0) as tabs:
             # 입장 탭 (축원 포함)
             with gr.TabItem("입장") as tab_entrance:
+                gr.HTML("""
+                    <div class="main-image-container">
+                        <img src="static/main-image.png" alt="디지털 굿판 메인 이미지" class="main-image">
+                    </div>
+                """)
                 # 1단계: 첫 화면
                 welcome_section = gr.Column(visible=True)
                 with welcome_section:
@@ -993,6 +1023,11 @@ def create_interface():
                     wrap=True
                 )
             with gr.TabItem("프로젝트 소개") as tab_intro:
+                gr.HTML("""
+                    <div class="main-image-container">
+                        <img src="static/main-image.png" alt="디지털 굿판 메인 이미지" class="main-image">
+                    </div>
+                """)
                 gr.Markdown("""
                 # 디지털 굿판 프로젝트
                 ‘디지털 굿판’은 부산문화재단의 지원으로 루츠리딤이 제작한 다원예술 프로젝트입니다.