75 lines
3.8 KiB
TypeScript
75 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { ShieldAlert, ExternalLink, X, AlertTriangle } from 'lucide-react';
|
|
|
|
interface ConnectionHelpModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ConnectionHelpModal: React.FC<ConnectionHelpModalProps> = ({ isOpen, onClose }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
|
<div className="bg-white rounded-lg shadow-2xl max-w-lg w-full overflow-hidden border border-red-100">
|
|
|
|
{/* Header */}
|
|
<div className="bg-red-50 p-4 border-b border-red-100 flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-red-700">
|
|
<ShieldAlert size={20} />
|
|
<h2 className="font-bold text-lg">백엔드 연결 실패</h2>
|
|
</div>
|
|
<button onClick={onClose} className="text-red-400 hover:text-red-600 transition-colors">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 space-y-4">
|
|
<p className="text-slate-700 text-sm leading-relaxed">
|
|
현재 <strong>HTTPS(보안)</strong> 사이트에서 <strong>로컬 백엔드(ws://localhost)</strong>로 접속을 시도하고 있습니다.
|
|
브라우저 보안 정책(Mixed Content)으로 인해 연결이 차단되었을 가능성이 높습니다.
|
|
</p>
|
|
|
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 space-y-2">
|
|
<h3 className="font-semibold text-yellow-800 flex items-center gap-2 text-sm">
|
|
<AlertTriangle size={16} />
|
|
해결 방법 (Chrome/Edge)
|
|
</h3>
|
|
<ol className="list-decimal list-inside text-xs text-yellow-800 space-y-1.5 ml-1">
|
|
<li>
|
|
새 탭을 열고 주소창에 아래 주소를 입력하세요:
|
|
<div className="bg-white border border-yellow-300 rounded px-2 py-1 mt-1 font-mono text-slate-600 select-all cursor-pointer hover:bg-slate-50" onClick={(e) => navigator.clipboard.writeText(e.currentTarget.textContent || '')}>
|
|
chrome://flags/#allow-insecure-localhost
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<strong>Allow invalid certificates for resources from localhost</strong> 항목을 <span className="font-bold text-green-600">Enabled</span>로 변경하세요.
|
|
</li>
|
|
<li>
|
|
브라우저 하단의 <strong>Relaunch</strong> 버튼을 눌러 재시작하세요.
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-500 text-center">
|
|
설정을 변경한 후에도 연결이 안 된다면 백엔드 프로그램이 실행 중인지 확인해주세요.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 bg-slate-50 border-t border-slate-200 flex justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 rounded text-sm transition-colors font-medium shadow-sm"
|
|
>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConnectionHelpModal;
|