..

2026-01-19 11:40:55 +09:00
parent 1e20601741
commit c485f411b3
11 changed files with 3250 additions and 499 deletions
--- a/components/ConnectionHelpModal.tsx
+++ b/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;
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -22,7 +22,7 @@ const ftp = require('basic-ftp');
 const SftpClient = require('ssh2-sftp-client');
 // ... imports

-const wss = new WebSocket.Server({ port: 8080 });
+const wss = new WebSocket.Server({ port: 8090 });

 wss.on('connection', (ws) => {
    let ftpClient = new ftp.Client();
@@ -64,7 +64,7 @@ wss.on('connection', (ws) => {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
      <div className="bg-white border border-slate-200 rounded-lg shadow-2xl w-full max-w-2xl flex flex-col max-h-[85vh]">
-        
+
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-200">
          <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
@@ -78,19 +78,17 @@ wss.on('connection', (ws) => {

        {/* Tabs */}
        <div className="flex border-b border-slate-200 px-4">
-          <button 
+          <button
            onClick={() => setActiveTab('arch')}
-            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === 'arch' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'
-            }`}
+            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'arch' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'
+              }`}
          >
            시스템 구조
          </button>
-          <button 
+          <button
            onClick={() => setActiveTab('code')}
-            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === 'code' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'
-            }`}
+            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'code' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'
+              }`}
          >
            백엔드 코드 (Preview)
          </button>
@@ -110,9 +108,9 @@ wss.on('connection', (ws) => {
                </div>

                <div className="flex flex-col items-center gap-1 flex-1">
-                    <span className="text-[10px] text-green-600 bg-green-100 px-2 py-0.5 rounded border border-green-200 font-mono">WebSocket</span>
-                    <ArrowLeftRight className="text-slate-400 w-full animate-pulse" />
-                    <span className="text-xs text-slate-400">JSON Protocol</span>
+                  <span className="text-[10px] text-green-600 bg-green-100 px-2 py-0.5 rounded border border-green-200 font-mono">WebSocket</span>
+                  <ArrowLeftRight className="text-slate-400 w-full animate-pulse" />
+                  <span className="text-xs text-slate-400">JSON Protocol</span>
                </div>

                <div className="flex flex-col items-center gap-2 relative">
@@ -120,20 +118,20 @@ wss.on('connection', (ws) => {
                    <Server size={32} className="text-green-500" />
                  </div>
                  <span className="font-bold text-sm text-slate-700">Node.js Proxy</span>
-                  
+
                  {/* AppData Connection */}
                  <div className="absolute -bottom-16 left-1/2 -translate-x-1/2 flex flex-col items-center">
                    <div className="h-6 w-px border-l border-dashed border-slate-300"></div>
                    <div className="bg-white border border-slate-300 px-2 py-1 rounded text-[10px] flex items-center gap-1 text-yellow-600 shadow-sm">
-                        <HardDrive size={10} />
-                        AppData/Config
+                      <HardDrive size={10} />
+                      AppData/Config
                    </div>
                  </div>
                </div>

                <div className="flex flex-col items-center gap-1 flex-1">
-                    <span className="text-[10px] text-orange-600 bg-orange-100 px-2 py-0.5 rounded border border-orange-200 font-mono">FTP / SFTP</span>
-                    <ArrowLeftRight className="text-slate-400 w-full" />
+                  <span className="text-[10px] text-orange-600 bg-orange-100 px-2 py-0.5 rounded border border-orange-200 font-mono">FTP / SFTP</span>
+                  <ArrowLeftRight className="text-slate-400 w-full" />
                </div>

                <div className="flex flex-col items-center gap-2">
@@ -156,35 +154,35 @@ wss.on('connection', (ws) => {
          ) : (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
-                 <p className="text-sm text-slate-500">
-                   SFTP와 FTP를 모두 지원하는 프록시 서버 코드 미리보기입니다.
-                 </p>
-                 <button 
-                   onClick={handleCopy}
-                   className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded text-xs font-medium transition-colors shadow-sm"
-                 >
-                   {copied ? <Check size={14} /> : <Copy size={14} />}
-                   {copied ? '복사됨' : '코드 복사'}
-                 </button>
+                <p className="text-sm text-slate-500">
+                  SFTP와 FTP를 모두 지원하는 프록시 서버 코드 미리보기입니다.
+                </p>
+                <button
+                  onClick={handleCopy}
+                  className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded text-xs font-medium transition-colors shadow-sm"
+                >
+                  {copied ? <Check size={14} /> : <Copy size={14} />}
+                  {copied ? '복사됨' : '코드 복사'}
+                </button>
              </div>
-              
+
              <div className="relative group">
                <pre className="bg-slate-800 p-4 rounded-lg overflow-x-auto text-xs font-mono text-slate-200 border border-slate-700 leading-relaxed shadow-inner">
                  {backendCodeDisplay}
                </pre>
              </div>
-              
+
              <p className="text-xs text-slate-400 italic text-center">
                전체 코드는 메인 화면의 '백엔드 다운로드' 버튼을 통해 받으실 수 있습니다.
              </p>
            </div>
          )}
        </div>
-        
+
        <div className="p-4 border-t border-slate-200 bg-slate-50 rounded-b-lg flex justify-end">
-            <button onClick={onClose} className="px-4 py-2 bg-white hover:bg-slate-50 border border-slate-300 text-slate-600 rounded text-sm transition-colors shadow-sm">
-                닫기
-            </button>
+          <button onClick={onClose} className="px-4 py-2 bg-white hover:bg-slate-50 border border-slate-300 text-slate-600 rounded text-sm transition-colors shadow-sm">
+            닫기
+          </button>
        </div>
      </div>
    </div>