client/test_modal.py

"""
커스텀 모달 테스트 데모
gradio_modal 패키지 없이 Gradio 6에서 모달 동작 확인용
"""

import gradio as gr
from frontend.components.custom_modal import Modal
from frontend.components.failure_modal import FailureModalComponent


def test_basic_modal():
    """기본 모달 테스트"""
    with gr.Blocks(title="Modal Test") as demo:
        gr.Markdown("# 🧪 커스텀 모달 테스트")
        gr.Markdown("gradio_modal 패키지 없이 순수 Gradio 6 컴포넌트로 구현")

        with gr.Row():
            show_btn = gr.Button("모달 열기", variant="primary")
            show_btn2 = gr.Button("다른 내용으로 열기", variant="secondary")

        # 커스텀 모달
        modal = Modal(
            visible=False,
            allow_user_close=True,
            elem_id="test-modal"
        )
        modal_component = modal.render()

        # 버튼 클릭 이벤트
        show_btn.click(
            fn=lambda: Modal.show("<h2>Hello World!</h2><p>모달이 정상 작동합니다.</p>"),
            outputs=[modal_component]
        )

        show_btn2.click(
            fn=lambda: Modal.show("""
                <h2>🎉 성공!</h2>
                <p>ESC 키, 배경 클릭, X 버튼으로 닫을 수 있습니다.</p>
                <ul>
                    <li>항목 1</li>
                    <li>항목 2</li>
                    <li>항목 3</li>
                </ul>
            """),
            outputs=[modal_component]
        )

    return demo


def test_failure_modal():
    """실패 모달 컴포넌트 테스트"""
    with gr.Blocks(title="Failure Modal Test") as demo:
        gr.Markdown("# 🧪 실패 모달 테스트")

        with gr.Row():
            test_btn = gr.Button("실패 모달 테스트", variant="stop")

        # 실패 모달
        failure_modal = FailureModalComponent()
        modal_component = failure_modal.render()

        # 테스트 버튼 클릭
        def show_failure():
            content = FailureModalComponent.create_modal_content(
                recognized_text="안녕하세여",
                score=65,
                hint="'요' 발음을 더 명확하게 해보세요!"
            )
            return Modal.show(content)

        test_btn.click(
            fn=show_failure,
            outputs=[modal_component]
        )

    return demo


if __name__ == "__main__":
    # 두 테스트 중 하나 선택해서 실행
    demo = test_basic_modal()
    # demo = test_failure_modal()

    import os
    server_host = os.getenv("SERVER_HOST")
    demo.launch(
        server_name=server_host,
        server_port=7861,  # 테스트용 별도 포트
        show_error=True
    )