111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
interface SimulationErrorModalProps {
|
|
message: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const SimulationErrorModal = ({ message, onClose }: SimulationErrorModalProps) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
zIndex: 50,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'rgba(10, 14, 26, 0.75)',
|
|
backdropFilter: 'blur(4px)',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 360,
|
|
background: 'var(--bg1)',
|
|
border: '1px solid rgba(239, 68, 68, 0.35)',
|
|
borderRadius: 'var(--rM)',
|
|
padding: '28px 24px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 16,
|
|
}}
|
|
>
|
|
{/* 아이콘 + 제목 */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|
<div
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: '50%',
|
|
background: 'rgba(239, 68, 68, 0.12)',
|
|
border: '1px solid rgba(239, 68, 68, 0.3)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
<path
|
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
|
|
fill="rgb(239, 68, 68)"
|
|
opacity="0.9"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style={{ color: 'var(--t1)', fontSize: 14, fontWeight: 600 }}>
|
|
확산 예측 실패
|
|
</div>
|
|
<div style={{ color: 'var(--t3)', fontSize: 12, marginTop: 2 }}>
|
|
시뮬레이션 실행 중 오류가 발생했습니다
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 에러 메시지 */}
|
|
<div
|
|
style={{
|
|
background: 'rgba(239, 68, 68, 0.06)',
|
|
border: '1px solid rgba(239, 68, 68, 0.2)',
|
|
borderRadius: 'var(--rS)',
|
|
padding: '10px 14px',
|
|
color: 'rgb(252, 165, 165)',
|
|
fontSize: 13,
|
|
lineHeight: 1.6,
|
|
wordBreak: 'break-word',
|
|
}}
|
|
>
|
|
{message}
|
|
</div>
|
|
|
|
{/* 확인 버튼 */}
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
marginTop: 4,
|
|
padding: '8px 0',
|
|
background: 'rgba(239, 68, 68, 0.15)',
|
|
border: '1px solid rgba(239, 68, 68, 0.35)',
|
|
borderRadius: 'var(--rS)',
|
|
color: 'rgb(252, 165, 165)',
|
|
fontSize: 13,
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
transition: 'background 0.15s',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.background = 'rgba(239, 68, 68, 0.25)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.background = 'rgba(239, 68, 68, 0.15)';
|
|
}}
|
|
>
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SimulationErrorModal;
|