feat: Enhance UX with editable paths, settings refinement, and disconnected state visuals

components/SettingsModal.tsx

@@ -6,177 +6,45 @@ interface SettingsModalProps {
   onClose: () => void;
 }
 
-const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
-  const [activeTab, setActiveTab] = useState<'arch' | 'code'>('arch');
-  const [copied, setCopied] = useState(false);
-
+const SettingsModal: React.FC<SettingsModalProps & { saveConnectionInfo: boolean, onToggleSaveConnectionInfo: (checked: boolean) => void }> = ({
+  isOpen,
+  onClose,
+  saveConnectionInfo,
+  onToggleSaveConnectionInfo
+}) => {
   if (!isOpen) return null;
 
-  const backendCodeDisplay = `/**
- * WebZilla Backend Proxy (Node.js)
- * Supports: FTP (basic-ftp) & SFTP (ssh2-sftp-client)
- * Dependencies: npm install ws basic-ftp ssh2-sftp-client
- */
-const WebSocket = require('ws');
-const ftp = require('basic-ftp');
-const SftpClient = require('ssh2-sftp-client');
-// ... imports
-
-const wss = new WebSocket.Server({ port: 8090 });
-
-wss.on('connection', (ws) => {
-    let ftpClient = new ftp.Client();
-    let sftpClient = new SftpClient();
-    let currentProto = 'ftp';
-    
-    ws.on('message', async (msg) => {
-        const data = JSON.parse(msg);
-        
-        if (data.command === 'CONNECT') {
-            currentProto = data.protocol; // 'ftp' or 'sftp'
-            if (currentProto === 'sftp') {
-                await sftpClient.connect({
-                    host: data.host, 
-                    port: data.port,
-                    username: data.user, 
-                    password: data.pass
-                });
-            } else {
-                await ftpClient.access({
-                   host: data.host, 
-                   user: data.user, 
-                   password: data.pass
-                });
-            }
-            ws.send(JSON.stringify({ status: 'connected' }));
-        }
-        
-        // ... Handling LIST, MKD, DELE for both protocols
-    });
-});`;
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(backendCodeDisplay);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
   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]">
+      <div className="bg-white border border-slate-200 rounded-lg shadow-2xl w-full max-w-md flex flex-col">
 
         {/* 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">
             <Server size={20} className="text-blue-600" />
-            시스템 설정 및 아키텍처
+            앱 설정
           </h2>
           <button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
             <X size={20} />
           </button>
         </div>
 
-        {/* Tabs */}
-        <div className="flex border-b border-slate-200 px-4">
-          <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'
-              }`}
-          >
-            시스템 구조
-          </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'
-              }`}
-          >
-            백엔드 코드 (Preview)
-          </button>
-        </div>
-
         {/* Content */}
-        <div className="p-6 overflow-y-auto flex-1 text-slate-600">
-          {activeTab === 'arch' ? (
-            <div className="space-y-6">
-              <div className="bg-slate-50 p-6 rounded-lg border border-slate-200 flex flex-col md:flex-row items-center justify-between gap-4 text-center">
-                <div className="flex flex-col items-center gap-2">
-                  <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center border border-blue-200">
-                    <Globe size={32} className="text-blue-500" />
-                  </div>
-                  <span className="font-bold text-sm text-slate-700">브라우저</span>
-                  <span className="text-xs text-slate-500">React Client</span>
-                </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>
-                </div>
-
-                <div className="flex flex-col items-center gap-2 relative">
-                  <div className="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center border border-green-200">
-                    <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
-                    </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" />
-                </div>
-
-                <div className="flex flex-col items-center gap-2">
-                  <div className="w-16 h-16 bg-orange-50 rounded-full flex items-center justify-center border border-orange-200">
-                    <Server size={32} className="text-orange-500" />
-                  </div>
-                  <span className="font-bold text-sm text-slate-700">Remote Server</span>
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <h3 className="font-bold text-slate-800">업데이트 내역 (v1.1)</h3>
-                <ul className="list-disc list-inside text-sm text-slate-600 space-y-1 ml-2">
-                  <li><span className="text-green-600 font-semibold">SFTP 지원:</span> SSH2 프로토콜을 사용한 보안 전송 지원 추가.</li>
-                  <li><span className="text-blue-600 font-semibold">패시브 모드:</span> 방화벽 환경을 위한 FTP 패시브 모드 토글 UI 추가.</li>
-                  <li><span className="text-yellow-600 font-semibold">파일 작업:</span> 폴더 생성, 이름 변경, 삭제를 위한 전용 모달 인터페이스 구현.</li>
-                </ul>
-              </div>
+        <div className="p-6">
+          <label className="flex items-center gap-3 p-4 border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors">
+            <div className="relative flex items-center">
+              <input
+                type="checkbox"
+                checked={saveConnectionInfo}
+                onChange={(e) => onToggleSaveConnectionInfo(e.target.checked)}
+                className="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500"
+              />
             </div>
-          ) : (
-            <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>
-              </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 className="flex-1">
+              <span className="font-semibold text-slate-700 block text-sm">빠른 실행 정보 저장</span>
+              <span className="text-xs text-slate-500">호스트, 사용자명, 포트 정보를 로컬에 저장합니다.</span>
             </div>
-          )}
+          </label>
         </div>
 
         <div className="p-4 border-t border-slate-200 bg-slate-50 rounded-b-lg flex justify-end">