..

components/ConnectionHelpModal.tsx

@@ -0,0 +1,74 @@
+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;