feat(poc4): refresh UI for HMM demo

This commit is contained in:
devmrko
2026-07-22 10:27:44 +09:00
parent 8eb8c566c6
commit ba0530cafb
2 changed files with 36 additions and 65 deletions

View File

@@ -0,0 +1,7 @@
# HMM 화면 전환
대상 기업을 HMM으로 전환하면서 PoC4의 로그인·헤더 화면을 해운·물류 업무 에이전트로 재구성한다.
- 공식 페이지의 `Connect Values Navigate Growth` 메시지와 해운·물류·디지털 솔루션 맥락을 반영한다.
- 외부 KB 로고·전용 글꼴 의존성을 제거하고, 애플리케이션 내부 SVG 워드마크와 해양 청색 계열로 표시한다.
- 기존 MCP, VPD, 데이터베이스 스키마 및 도구 계약은 변경하지 않는다.

View File

@@ -71,22 +71,7 @@ ENV_FILE = ROOT / ".env"
MCP_SERVERS_FILE = ROOT / "config" / "mcp_servers.json"
VPD_TOKEN_PRESETS_FILE = ROOT / "config" / "vpd_token_presets.json"
CHAT_DB_FILE = ROOT / "data" / "poc4_mcp_chat.sqlite3"
KB_OFFICIAL_LOGO_URL = "https://www.kbinsure.co.kr/extrnl/image/common/kakao_ci_800.png"
KB_HEADER_LOGO_FILE = ROOT / "assets" / "kbsonbo_logo_horizontal.png"
KB_TITLE_FONT_FILE = ROOT / "assets" / "KBFGTextM.woff2"
KB_TITLE_FONT_BOLD_FILE = ROOT / "assets" / "KBFGTextB.woff2"
KB_TITLE_FONT_URL = (
"data:font/woff2;base64,"
+ base64.b64encode(KB_TITLE_FONT_FILE.read_bytes()).decode("ascii")
if KB_TITLE_FONT_FILE.exists()
else "https://www.kbinsure.co.kr/library/font/KBFGTextM.woff2"
)
KB_TITLE_FONT_BOLD_URL = (
"data:font/woff2;base64,"
+ base64.b64encode(KB_TITLE_FONT_BOLD_FILE.read_bytes()).decode("ascii")
if KB_TITLE_FONT_BOLD_FILE.exists()
else "https://www.kbinsure.co.kr/library/font/KBFGTextB.woff2"
)
HMM_WORDMARK_SVG = """<svg xmlns="http://www.w3.org/2000/svg" width="320" height="96" viewBox="0 0 320 96" role="img" aria-label="HMM"><rect width="320" height="96" rx="12" fill="#003b70"/><path fill="#fff" d="M36 24h18v18h20V24h18v48H74V57H54v15H36zm72 0h18l14 22 14-22h18v48h-18V51l-14 22-14-22v21h-18zm80 0h18l14 22 14-22h18v48h-18V51l-14 22-14-22v21h-18z"/><path fill="#2bb8d2" d="M268 24h16v48h-16z"/></svg>"""
DEFAULT_VPD_USER_ID = "FC00789"
VPD_OPERATIONS_URL = "https://kb.cloud-handson.com/"
PORTAL_AUTHENTICATED_KEY = "poc4_portal_authenticated"
@@ -99,34 +84,18 @@ AUDIT_DB_ENV_FILE = Path(
_OPAQUE_BEARER = re.compile(r"^[\x21-\x7e]{1,4096}$")
KB_THEME_CSS = """
<style>
@font-face {
font-family: "KBFG Title";
src: url("__KB_TITLE_FONT_URL__") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "KBFG Title";
src: url("__KB_TITLE_FONT_BOLD_URL__") format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}
:root {
--kb-yellow: #ffcc00;
--kb-yellow-soft: #ffe16a;
--kb-yellow-pale: #fff8d7;
--kb-ink: #111111;
--kb-muted: #666666;
--kb-line: #d9d9d9;
--kb-yellow: #004b87;
--kb-yellow-soft: #dceef8;
--kb-yellow-pale: #f2f8fc;
--kb-ink: #0c2e4b;
--kb-muted: #526776;
--kb-line: #cbdbe6;
--kb-card: #ffffff;
--kb-bg: #f6f7fb;
--kb-blue: #4473c9;
--kb-green: #3f845b;
--kb-red: #fc4755;
--kb-bg: #f3f7fa;
--kb-blue: #0077b6;
--kb-green: #008a74;
--kb-red: #d73a49;
}
html,
@@ -388,8 +357,8 @@ section[data-testid="stSidebar"] input:disabled {
width: 42px;
height: 42px;
border-radius: 13px;
background: #111111;
color: var(--kb-yellow);
background: var(--kb-yellow);
color: #ffffff;
font-weight: 900;
letter-spacing: 0;
box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.12);
@@ -408,13 +377,13 @@ section[data-testid="stSidebar"] input:disabled {
.kb-hero h1 {
margin: 0;
font-family: "KBFG Title", "Noto Sans KR", "Malgun Gothic", sans-serif;
font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
font-size: 2.35rem;
font-weight: 700;
-webkit-text-stroke: 0.2px currentColor;
line-height: 1.16;
letter-spacing: 0;
color: #111;
color: var(--kb-ink);
word-break: keep-all;
}
@@ -1269,9 +1238,7 @@ h2, h3 {
}
}
</style>
""".replace("__KB_TITLE_FONT_URL__", KB_TITLE_FONT_URL).replace(
"__KB_TITLE_FONT_BOLD_URL__", KB_TITLE_FONT_BOLD_URL
)
"""
@dataclass(frozen=True)
@@ -1761,10 +1728,10 @@ def _render_portal_login() -> None:
st.markdown(
f"""
<section class="kb-login-brand">
<img class="kb-login-logo" src="{logo_url}" alt="KB손해보험 로고" />
<div class="kb-login-kicker">KB INSURANCE AX DEMO</div>
<h1>KB손해보험 AI 업무 에이전트</h1>
<p>사용자 인증 후 AI 질의·보안 관리 기능을 이용할 수 있습니다.</p>
<img class="kb-login-logo" src="{logo_url}" alt="HMM 로고" />
<div class="kb-login-kicker">HMM SHIPPING &amp; LOGISTICS DEMO</div>
<h1>HMM AI 업무 에이전트</h1>
<p>사용자 인증 후 해운·물류 AI 질의보안 관리 기능을 이용할 수 있습니다.</p>
</section>
""",
unsafe_allow_html=True,
@@ -1810,11 +1777,8 @@ def _logout_portal() -> None:
def _header_logo_url() -> str:
try:
encoded = base64.b64encode(KB_HEADER_LOGO_FILE.read_bytes()).decode("ascii")
except OSError:
return KB_OFFICIAL_LOGO_URL
return f"data:image/png;base64,{encoded}"
encoded = base64.b64encode(HMM_WORDMARK_SVG.encode("utf-8")).decode("ascii")
return f"data:image/svg+xml;base64,{encoded}"
def _render_kb_header() -> None:
@@ -1824,20 +1788,20 @@ def _render_kb_header() -> None:
<section class="kb-hero">
<div class="kb-hero-main">
<div class="kb-brand-row">
<div class="kb-mini-mark">KB</div>
<div class="kb-mini-mark">HMM</div>
<div>
<div class="kb-brand-name">KB손해보험 AX Demo</div>
<div class="kb-brand-sub">국민의 평생 희망파트너 · AI 업무 질의</div>
<div class="kb-brand-name">HMM Digital Operations Demo</div>
<div class="kb-brand-sub">Connect Values · Navigate Growth · AI 업무 질의</div>
</div>
</div>
<h1>KB손해보험 AI 업무 에이전트</h1>
<h1>HMM AI 업무 에이전트</h1>
<p>
사용자 권한을 기준으로 AI 질의 응답을 수행하고 관리하는 기능을 확인할 수 있
사용자 권한을 기준으로 해운·물류 업무의 AI 질의 응답과 보안 관리를 수행하
DEMO 화면입니다.
</p>
</div>
<div class="kb-ci-panel" aria-label="KB손해보험 로고">
<img src="{logo_url}" alt="KB손해보험 로고" />
<div class="kb-ci-panel" aria-label="HMM 로고">
<img src="{logo_url}" alt="HMM 로고" />
</div>
</section>
""",