refactor(poc4): modularize HMM interface

2026-07-22 11:01:59 +09:00
parent 8e44a59d0a
commit 8b86d58d95
4 changed files with 173 additions and 36 deletions
--- a/poc4_active_source_20260714/src/poc4/hmm_ui.py
+++ b/poc4_active_source_20260714/src/poc4/hmm_ui.py
@@ -0,0 +1,76 @@
+"""Small, self-contained HMM presentation layer for the PoC4 Streamlit app."""
+
+HMM_CLEAN_THEME_CSS = """
+<style>
+:root { --hmm-navy:#003b70; --hmm-ink:#172b3a; --hmm-muted:#667785; --hmm-line:#dfe7ed; }
+html, body, [data-testid="stAppViewContainer"], .stApp {
+  background:#fff !important; color:var(--hmm-ink) !important;
+  font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
+}
+#MainMenu, header [data-testid="stToolbar"] { display:none !important; }
+.block-container { max-width:1180px; padding:2rem 3rem 4rem; }
+section[data-testid="stSidebar"], section[data-testid="stSidebar"] > div {
+  background:#fff !important;
+}
+section[data-testid="stSidebar"] { border-right:1px solid var(--hmm-line); }
+input, textarea, [data-baseweb="select"] > div {
+  border-radius:4px !important; border-color:#cfdbe4 !important; box-shadow:none !important;
+}
+div[data-testid="stButton"] > button, div[data-testid="stFormSubmitButton"] > button {
+  border-radius:4px !important; box-shadow:none !important;
+}
+div[data-testid="stButton"] > button[kind="primary"],
+div[data-testid="stFormSubmitButton"] > button[data-testid="stBaseButton-primaryFormSubmit"] {
+  background:var(--hmm-navy) !important; border-color:var(--hmm-navy) !important; color:#fff !important;
+}
+.hmm-app-header { margin:0 0 28px; padding:0 0 22px; border-bottom:1px solid var(--hmm-line); }
+.hmm-app-wordmark, .hmm-login-wordmark { color:var(--hmm-navy); font-size:1.35rem; font-weight:800; letter-spacing:.08em; }
+.hmm-app-header h1 { margin:10px 0 8px; color:var(--hmm-ink); font-size:1.7rem; }
+.hmm-app-header p { margin:0; color:var(--hmm-muted); font-size:.92rem; }
+.st-key-kb_login_container { max-width:440px; margin:12vh auto 0; }
+.kb-login-brand { text-align:left; }
+.kb-login-kicker { margin-top:12px; color:var(--hmm-muted); font-size:.76rem; font-weight:700; }
+.kb-login-brand h1 { margin:12px 0 8px; color:var(--hmm-ink); font-size:1.7rem; }
+.kb-login-brand p { margin:0 0 22px; color:var(--hmm-muted); }
+.st-key-kb_login_container [data-testid="stForm"] { padding:0; border:0; background:transparent; box-shadow:none; }
+.st-key-kb_login_container [data-testid="stFormSubmitButton"] button {
+  min-height:44px; background:var(--hmm-navy); border-color:var(--hmm-navy); color:#fff; box-shadow:none;
+}
+.kb-login-note { color:var(--hmm-muted); }
+@media (max-width:760px) {
+  .block-container { padding:1.25rem 1.25rem 3rem; }
+  .st-key-kb_login_container { margin-top:8vh; }
+}
+</style>
+"""
+
+
+def apply_hmm_theme(st: object) -> None:
+    st.markdown(HMM_CLEAN_THEME_CSS, unsafe_allow_html=True)
+
+
+def render_hmm_login_brand(st: object) -> None:
+    st.markdown(
+        """
+        <section class="kb-login-brand">
+          <div class="hmm-login-wordmark" aria-label="HMM">HMM</div>
+          <div class="kb-login-kicker">HMM SHIPPING &amp; LOGISTICS DEMO</div>
+          <h1>HMM AI 업무 에이전트</h1>
+          <p>사용자 인증 후 해운·물류 AI 질의와 보안 관리 기능을 이용할 수 있습니다.</p>
+        </section>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def render_hmm_header(st: object) -> None:
+    st.markdown(
+        """
+        <section class="hmm-app-header">
+          <div class="hmm-app-wordmark">HMM</div>
+          <h1>AI 업무 에이전트</h1>
+          <p>사용자 권한에 맞는 업무 질의와 보안 관리 기능을 제공합니다.</p>
+        </section>
+        """,
+        unsafe_allow_html=True,
+    )