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 ( + + ); +} + /** ● 오프라인(연결 끊김). */ 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 (
{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;