feat(ui): add line shield-check icon to 2FA challenge panel
- 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>
This commit is contained in:
parent
6e95ac6273
commit
a2b2bd9110
@ -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) {
|
export function IconWifiOff(p: IconProps) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
|
|||||||
import { authApi } from '../../api/endpoints';
|
import { authApi } from '../../api/endpoints';
|
||||||
import { ApiRequestError } from '../../api/client';
|
import { ApiRequestError } from '../../api/client';
|
||||||
import { Button } from '../../components/ui/Button';
|
import { Button } from '../../components/ui/Button';
|
||||||
|
import { IconShieldCheck } from '../../components/ui/icons';
|
||||||
import type { LoginResponse, OtpSetupResponse } from '../../api/types';
|
import type { LoginResponse, OtpSetupResponse } from '../../api/types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -64,6 +65,9 @@ export function OtpChallengePanel({ challengeToken, mode, onSuccess, onCancel }:
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="kx-login__card">
|
<div className="kx-login__card">
|
||||||
|
<div className="kx-otp__badge" aria-hidden="true">
|
||||||
|
<IconShieldCheck size={28} />
|
||||||
|
</div>
|
||||||
<h2 className="kx-login__title">2차 인증</h2>
|
<h2 className="kx-login__title">2차 인증</h2>
|
||||||
<p className="kx-login__title-sub">
|
<p className="kx-login__title-sub">
|
||||||
{mode === 'enroll'
|
{mode === 'enroll'
|
||||||
|
|||||||
@ -511,6 +511,18 @@
|
|||||||
padding: var(--space-4);
|
padding: var(--space-4);
|
||||||
background: var(--color-neutral-050);
|
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 {
|
.kx-otp__enroll {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user