From a2b2bd9110c4e8913f5c34a52029246b44291271 Mon Sep 17 00:00:00 2001
From: zio <admin@zioinfo.co.kr>
Date: Sun, 12 Jul 2026 20:05:01 +0900
Subject: [PATCH] feat(ui): add line shield-check icon to 2FA challenge panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- icons.tsx: new IconShieldCheck (stroke/line, 24 viewBox standard)
- OtpChallengePanel: shield badge above 2차 인증 title (was icon-less/bare)
- login.css: .kx-otp__badge circular primary-tinted badge

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/frontend/src/components/ui/icons.tsx             | 10 ++++++++++
 src/frontend/src/screens/login/OtpChallengePanel.tsx |  4 ++++
 src/frontend/src/screens/login/login.css             | 12 ++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/src/frontend/src/components/ui/icons.tsx b/src/frontend/src/components/ui/icons.tsx
index d17f308..d35ee93 100644
--- a/src/frontend/src/components/ui/icons.tsx
+++ b/src/frontend/src/components/ui/icons.tsx
@@ -489,6 +489,16 @@ export function IconUser(p: IconProps) {
   );
 }
 
+/** 🛡 방패+체크 — 2차 인증·보안 강화. */
+export function IconShieldCheck(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M12 3L19 5.5V11C19 15.4 16.1 18.9 12 21C7.9 18.9 5 15.4 5 11V5.5L12 3Z" {...SRJ} />
+      <path d="M9 11.8L11.2 14L15 9.6" {...SRJ} />
+    </Svg>
+  );
+}
+
 /** ● 오프라인(연결 끊김). */
 export function IconWifiOff(p: IconProps) {
   return (
diff --git a/src/frontend/src/screens/login/OtpChallengePanel.tsx b/src/frontend/src/screens/login/OtpChallengePanel.tsx
index a5b0b94..4a4a482 100644
--- a/src/frontend/src/screens/login/OtpChallengePanel.tsx
+++ b/src/frontend/src/screens/login/OtpChallengePanel.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { authApi } from '../../api/endpoints';
 import { ApiRequestError } from '../../api/client';
 import { Button } from '../../components/ui/Button';
+import { IconShieldCheck } from '../../components/ui/icons';
 import type { LoginResponse, OtpSetupResponse } from '../../api/types';
 
 /**
@@ -64,6 +65,9 @@ export function OtpChallengePanel({ challengeToken, mode, onSuccess, onCancel }:
 
   return (
     <div className="kx-login__card">
+      <div className="kx-otp__badge" aria-hidden="true">
+        <IconShieldCheck size={28} />
+      </div>
       <h2 className="kx-login__title">2차 인증</h2>
       <p className="kx-login__title-sub">
         {mode === 'enroll'
diff --git a/src/frontend/src/screens/login/login.css b/src/frontend/src/screens/login/login.css
index 584c85c..a014fd3 100644
--- a/src/frontend/src/screens/login/login.css
+++ b/src/frontend/src/screens/login/login.css
@@ -511,6 +511,18 @@
   padding: var(--space-4);
   background: var(--color-neutral-050);
 }
+.kx-otp__badge {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: var(--color-primary-600);
+  background: var(--color-primary-050);
+  border: 1px solid var(--color-primary-100);
+}
 .kx-otp__enroll {
   display: flex;
   flex-direction: column;