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

components/FilePane.tsx

@@ -15,28 +15,45 @@ interface FilePaneProps {
   onSelectionChange: (ids: Set<string>) => void;
   selectedIds: Set<string>;
   connected?: boolean;
+  refreshKey?: number;
   onCreateFolder?: () => void;
   onDelete?: () => void;
   onRename?: () => void;
 }
 
-const FilePane: React.FC<FilePaneProps> = ({ 
-  title, 
-  icon, 
-  path, 
-  files, 
-  isLoading, 
-  onNavigate, 
-  onNavigateUp, 
-  onSelectionChange, 
+const FilePane: React.FC<FilePaneProps> = ({
+  title,
+  icon,
+  path,
+  files,
+  isLoading,
+  onNavigate,
+  onNavigateUp,
+  onSelectionChange,
   selectedIds,
   connected = true,
+  refreshKey,
   onCreateFolder,
   onDelete,
   onRename
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [lastClickedId, setLastClickedId] = useState<string | null>(null);
+  const [pathInput, setPathInput] = useState(path);
+
+  // Sync path input when prop changes OR refreshKey updates
+  React.useEffect(() => {
+    setPathInput(path);
+  }, [path, refreshKey]);
+
+  const handlePathKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onNavigate(pathInput);
+    } else if (e.key === 'Escape') {
+      setPathInput(path); // Revert
+      (e.target as HTMLInputElement).blur();
+    }
+  };
 
   // Filter files based on search term
   const displayFiles = useMemo(() => {
@@ -46,7 +63,7 @@ const FilePane: React.FC<FilePaneProps> = ({
 
   const handleRowClick = (e: React.MouseEvent, file: FileItem) => {
     e.preventDefault(); // Prevent text selection
-    
+
     let newSelected = new Set(selectedIds);
 
     if (e.ctrlKey || e.metaKey) {
@@ -61,15 +78,15 @@ const FilePane: React.FC<FilePaneProps> = ({
       // Range selection
       const lastIndex = displayFiles.findIndex(f => f.id === lastClickedId);
       const currentIndex = displayFiles.findIndex(f => f.id === file.id);
-      
+
       if (lastIndex !== -1 && currentIndex !== -1) {
         const start = Math.min(lastIndex, currentIndex);
         const end = Math.max(lastIndex, currentIndex);
-        
-        newSelected = new Set(); 
-        
+
+        newSelected = new Set();
+
         for (let i = start; i <= end; i++) {
-            newSelected.add(displayFiles[i].id);
+          newSelected.add(displayFiles[i].id);
         }
       }
     } else {
@@ -82,22 +99,29 @@ const FilePane: React.FC<FilePaneProps> = ({
   };
 
   return (
-    <div className="flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm">
+    <div className={`flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm transition-all duration-300 ${!connected ? 'opacity-60 grayscale-[0.5] pointer-events-none' : ''}`}>
       {/* Header */}
       <div className="bg-slate-50 p-2 border-b border-slate-200 flex items-center justify-between">
-        <div className="flex items-center gap-2 text-slate-700 font-semibold text-sm">
+        <div className="flex items-center gap-2 text-slate-700 font-semibold text-sm shrink-0">
           {icon === 'local' ? <Monitor size={16} /> : <Server size={16} />}
           <span>{title}</span>
         </div>
-        <div className="flex items-center gap-2 bg-white px-2 py-1 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 truncate shadow-sm">
-          <span className="text-slate-400">경로:</span>
-          <span className="font-mono text-slate-700 select-all">{path}</span>
+        <div className="flex items-center gap-2 bg-white px-2 py-0.5 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 shadow-sm focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
+          <span className="text-slate-400 shrink-0">경로:</span>
+          <input
+            type="text"
+            value={pathInput}
+            onChange={(e) => setPathInput(e.target.value)}
+            onKeyDown={handlePathKeyDown}
+            className="font-mono text-slate-700 w-full outline-none text-xs py-1"
+            spellCheck={false}
+          />
         </div>
       </div>
 
       {/* Toolbar */}
       <div className="bg-white p-1 border-b border-slate-200 flex gap-1 items-center">
-        <button 
+        <button
           onClick={onNavigateUp}
           disabled={path === '/'}
           className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -106,7 +130,7 @@ const FilePane: React.FC<FilePaneProps> = ({
           <ArrowUp size={16} />
         </button>
         <div className="w-px h-4 bg-slate-200 mx-1"></div>
-        <button 
+        <button
           onClick={onCreateFolder}
           disabled={!connected || isLoading}
           className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -114,7 +138,7 @@ const FilePane: React.FC<FilePaneProps> = ({
         >
           <FolderPlus size={16} />
         </button>
-        <button 
+        <button
           onClick={onRename}
           disabled={selectedIds.size !== 1 || !connected || isLoading}
           className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -122,7 +146,7 @@ const FilePane: React.FC<FilePaneProps> = ({
         >
           <FilePenLine size={16} />
         </button>
-        <button 
+        <button
           onClick={onDelete}
           disabled={selectedIds.size === 0 || !connected || isLoading}
           className="p-1.5 hover:bg-slate-100 rounded text-slate-600 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -130,27 +154,27 @@ const FilePane: React.FC<FilePaneProps> = ({
         >
           <Trash2 size={16} />
         </button>
-        <button 
-            className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 transition-colors" 
-            title="새로고침"
-            onClick={() => onNavigate(path)} // Simple refresh
-            disabled={!connected || isLoading}
+        <button
+          className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 transition-colors"
+          title="새로고침"
+          onClick={() => onNavigate(path)} // Simple refresh
+          disabled={!connected || isLoading}
         >
           <RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
         </button>
-        
+
         <div className="flex-1"></div>
-        
+
         {/* Search Input */}
         <div className="relative group">
-            <Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500" />
-            <input 
-                type="text" 
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder="검색..."
-                className="w-32 focus:w-48 transition-all bg-slate-50 border border-slate-200 rounded-full py-1 pl-7 pr-3 text-xs text-slate-700 focus:outline-none focus:border-blue-500 focus:bg-white placeholder:text-slate-400"
-            />
+          <Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500" />
+          <input
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="검색..."
+            className="w-32 focus:w-48 transition-all bg-slate-50 border border-slate-200 rounded-full py-1 pl-7 pr-3 text-xs text-slate-700 focus:outline-none focus:border-blue-500 focus:bg-white placeholder:text-slate-400"
+          />
         </div>
       </div>
 
@@ -179,7 +203,7 @@ const FilePane: React.FC<FilePaneProps> = ({
             <tbody>
               {/* Back Button Row */}
               {path !== '/' && !searchTerm && (
-                <tr 
+                <tr
                   className="hover:bg-slate-50 cursor-pointer text-slate-500"
                   onClick={onNavigateUp}
                 >
@@ -193,52 +217,51 @@ const FilePane: React.FC<FilePaneProps> = ({
               {displayFiles.map((file) => {
                 const isSelected = selectedIds.has(file.id);
                 return (
-                    <tr 
+                  <tr
                     key={file.id}
                     onClick={(e) => handleRowClick(e, file)}
                     onDoubleClick={() => {
-                        if (file.type === FileType.FOLDER) {
+                      if (file.type === FileType.FOLDER) {
                         onNavigate(path === '/' ? `/${file.name}` : `${path}/${file.name}`);
                         onSelectionChange(new Set()); // Clear selection on navigate
                         setSearchTerm(''); // Clear search on navigate
-                        }
+                      }
                     }}
-                    className={`cursor-pointer border-b border-slate-50 group select-none ${
-                        isSelected 
-                        ? 'bg-blue-100 text-blue-900 border-blue-200' 
-                        : 'text-slate-700 hover:bg-slate-50'
-                    }`}
-                    >
+                    className={`cursor-pointer border-b border-slate-50 group select-none ${isSelected
+                      ? 'bg-blue-100 text-blue-900 border-blue-200'
+                      : 'text-slate-700 hover:bg-slate-50'
+                      }`}
+                  >
                     <td className="p-2 text-center">
-                        <FileIcon name={file.name} type={file.type} className="w-4 h-4" />
+                      <FileIcon name={file.name} type={file.type} className="w-4 h-4" />
                     </td>
                     <td className="p-2 font-medium group-hover:text-blue-600 truncate max-w-[150px]">
-                        {file.name}
+                      {file.name}
                     </td>
                     <td className="p-2 text-right font-mono text-slate-500">
-                        {file.type === FileType.FILE ? formatBytes(file.size) : ''}
+                      {file.type === FileType.FILE ? formatBytes(file.size) : ''}
                     </td>
                     <td className="p-2 text-right text-slate-400 hidden lg:table-cell">
-                        {file.type === FileType.FOLDER ? '폴더' : file.name.split('.').pop()?.toUpperCase() || '파일'}
+                      {file.type === FileType.FOLDER ? '폴더' : file.name.split('.').pop()?.toUpperCase() || '파일'}
                     </td>
                     <td className="p-2 text-right text-slate-400 hidden md:table-cell whitespace-nowrap">
-                        {formatDate(file.date).split(',')[0]}
+                      {formatDate(file.date).split(',')[0]}
                     </td>
-                    </tr>
+                  </tr>
                 );
               })}
               {displayFiles.length === 0 && (
-                  <tr>
-                      <td colSpan={5} className="p-8 text-center text-slate-400">
-                          {searchTerm ? `"${searchTerm}" 검색 결과 없음` : '항목 없음'}
-                      </td>
-                  </tr>
+                <tr>
+                  <td colSpan={5} className="p-8 text-center text-slate-400">
+                    {searchTerm ? `"${searchTerm}" 검색 결과 없음` : '항목 없음'}
+                  </td>
+                </tr>
               )}
             </tbody>
           </table>
         )}
       </div>
-      
+
       {/* Footer Status */}
       <div className="bg-slate-50 p-1 px-3 text-xs text-slate-500 border-t border-slate-200 flex justify-between">
         <span>{files.length} 개 항목 {selectedIds.size > 0 && `(${selectedIds.size}개 선택됨)`}</span>

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">