GoogleAIBuilder/WebFTP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Help System, Local File Operations, Site Manager improvements, and UI refinements

Browse Source
This commit is contained in:
backuppc
2026-01-19 13:34:14 +09:00
parent c485f411b3
commit 5fd84a7ff1
7 changed files with 1105 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
components/FileActionModals.tsx
View File

@@ -9,15 +9,31 @@ interface CreateFolderModalProps {
}
export const CreateFolderModal: React.FC<CreateFolderModalProps> = ({ isOpen, onClose, onConfirm }) => {
const [folderName, setFolderName] = useState('새 폴더');
const [folderName, setFolderName] = useState('');
const [error, setError] = useState('');
useEffect(() => {
if (isOpen) {
setFolderName('새 폴더');
// Auto focus hack
setTimeout(() => document.getElementById('new-folder-input')?.focus(), 50);
setFolderName('');
setError('');
// Auto focus hack
setTimeout(() => document.getElementById('new-folder-input')?.focus(), 50);
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}
}, [isOpen]);
}, [isOpen, onClose]);
const handleConfirm = () => {
if (!folderName.trim()) {
setError('폴더 이름을 입력해주세요.');
return;
}
onConfirm(folderName);
};
if (!isOpen) return null;
@@ -33,18 +49,19 @@ export const CreateFolderModal: React.FC<CreateFolderModalProps> = ({ isOpen, on
<div className="p-4 space-y-4">
<div>
<label className="block text-xs text-slate-500 mb-1">새 디렉토리 이름:</label>
<input
<input
id="new-folder-input"
type="text"
type="text"
value={folderName}
onChange={(e) => setFolderName(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && onConfirm(folderName)}
className="w-full bg-white border border-slate-300 rounded px-3 py-2 text-sm text-slate-800 focus:border-blue-500 focus:outline-none"
onChange={(e) => { setFolderName(e.target.value); setError(''); }}
onKeyDown={(e) => e.key === 'Enter' && handleConfirm()}
className={`w-full bg-white border rounded px-3 py-2 text-sm text-slate-800 focus:outline-none ${error ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-blue-500'}`}
/>
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
</div>
<div className="flex justify-end gap-2">
<button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
<button onClick={() => onConfirm(folderName)} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
<button onClick={handleConfirm} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
</div>
</div>
</div>
@@ -62,13 +79,33 @@ interface RenameModalProps {
export const RenameModal: React.FC<RenameModalProps> = ({ isOpen, currentName, onClose, onConfirm }) => {
const [newName, setNewName] = useState('');
const [error, setError] = useState('');
useEffect(() => {
if (isOpen) {
setNewName(currentName);
setTimeout(() => document.getElementById('rename-input')?.focus(), 50);
setNewName(currentName);
setError('');
setTimeout(() => document.getElementById('rename-input')?.focus(), 50);
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}
}, [isOpen, currentName]);
}, [isOpen, currentName, onClose]);
const handleConfirm = () => {
if (!newName.trim()) {
setError('새 이름을 입력해주세요.');
return;
}
if (newName.trim() === currentName) {
setError('변경된 내용이 없습니다.');
return;
}
onConfirm(newName);
};
if (!isOpen) return null;
@@ -85,20 +122,21 @@ export const RenameModal: React.FC<RenameModalProps> = ({ isOpen, currentName, o
<div>
<label className="block text-xs text-slate-500 mb-1">현재 이름:</label>
<div className="text-sm text-slate-600 bg-slate-50 p-2 rounded border border-slate-200 mb-3 select-all">{currentName}</div>
<label className="block text-xs text-slate-500 mb-1">새 이름:</label>
<input
<input
id="rename-input"
type="text"
type="text"
value={newName}
onChange={(e) => setNewName(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && onConfirm(newName)}
className="w-full bg-white border border-slate-300 rounded px-3 py-2 text-sm text-slate-800 focus:border-blue-500 focus:outline-none"
onChange={(e) => { setNewName(e.target.value); setError(''); }}
onKeyDown={(e) => e.key === 'Enter' && handleConfirm()}
className={`w-full bg-white border rounded px-3 py-2 text-sm text-slate-800 focus:outline-none ${error ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-blue-500'}`}
/>
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
</div>
<div className="flex justify-end gap-2">
<button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
<button onClick={() => onConfirm(newName)} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
<button onClick={handleConfirm} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
</div>
</div>
</div>
@@ -116,6 +154,16 @@ interface DeleteModalProps {
}
export const DeleteModal: React.FC<DeleteModalProps> = ({ isOpen, fileCount, fileNames, onClose, onConfirm }) => {
useEffect(() => {
if (isOpen) {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}
}, [isOpen, onClose]);
if (!isOpen) return null;
return (
@@ -129,18 +177,18 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({ isOpen, fileCount, fil
</div>
<div className="p-4 space-y-4">
<div className="flex gap-3">
<div className="bg-red-50 p-2 rounded h-fit shrink-0">
<AlertTriangle size={24} className="text-red-500" />
</div>
<div className="text-sm text-slate-600 min-w-0">
<p className="mb-2">정말로 다음 {fileCount}개 항목을 삭제하시겠습니까?</p>
<ul className="list-disc list-inside text-xs text-slate-500 max-h-32 overflow-y-auto bg-slate-50 p-2 rounded border border-slate-200 mb-2">
{fileNames.map((name, i) => (
<li key={i} className="truncate">{name}</li>
))}
</ul>
<p className="text-xs text-red-500 font-semibold">이 작업은 되돌릴 수 없습니다.</p>
</div>
<div className="bg-red-50 p-2 rounded h-fit shrink-0">
<AlertTriangle size={24} className="text-red-500" />
</div>
<div className="text-sm text-slate-600 min-w-0">
<p className="mb-2">정말로 다음 {fileCount}개 항목을 삭제하시겠습니까?</p>
<ul className="list-disc list-inside text-xs text-slate-500 max-h-32 overflow-y-auto bg-slate-50 p-2 rounded border border-slate-200 mb-2">
{fileNames.map((name, i) => (
<li key={i} className="truncate">{name}</li>
))}
</ul>
<p className="text-xs text-red-500 font-semibold">이 작업은 되돌릴 수 없습니다.</p>
</div>
</div>
<div className="flex justify-end gap-2">
<button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>

228
components/HelpModal.tsx Normal file
View File

@@ -0,0 +1,228 @@
import React, { useState, useEffect } from 'react';
import { X, HelpCircle, Server, Folder, FileText, Settings, Wifi, Terminal } from 'lucide-react';
interface HelpModalProps {
isOpen: boolean;
onClose: () => void;
initialTab?: 'sites' | 'connection' | 'files' | 'backend';
}
const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose, initialTab }) => {
const [activeTab, setActiveTab] = useState<'sites' | 'connection' | 'files' | 'backend'>('sites');
useEffect(() => {
if (isOpen && initialTab) {
setActiveTab(initialTab);
}
}, [isOpen, initialTab]);
// ESC key handler
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (isOpen && (e.key === 'Escape' || e.key === 'Esc')) {
onClose();
}
};
if (isOpen) {
window.addEventListener('keydown', handleKeyDown);
}
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, onClose]);
if (!isOpen) return null;
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 h-[600px] max-h-[90vh]">
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50 rounded-t-lg">
<h2 className="text-base font-bold text-slate-800 flex items-center gap-2">
<HelpCircle 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>
<div className="flex flex-1 min-h-0">
{/* Sidebar */}
<div className="w-48 border-r border-slate-200 bg-slate-50 p-2 flex flex-col gap-1">
<button
onClick={() => setActiveTab('sites')}
className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'sites' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
}`}
>
<Server size={16} /> 사이트 관리
</button>
<button
onClick={() => setActiveTab('connection')}
className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'connection' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
}`}
>
<Wifi size={16} /> 접속 및 설정
</button>
<button
onClick={() => setActiveTab('backend')}
className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'backend' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
}`}
>
<Terminal size={16} /> 백엔드 설치/실행
</button>
<button
onClick={() => setActiveTab('files')}
className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'files' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
}`}
>
<Folder size={16} /> 파일 작업
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-6 bg-white">
{activeTab === 'sites' && (
<div className="space-y-6">
<div>
<h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
<Server size={20} className="text-slate-400" /> 사이트 관리자
</h3>
<p className="text-slate-600 text-sm leading-relaxed mb-4">
자주 방문하는 FTP 서버 정보를 저장하고 관리할 수 있습니다.
</p>
<ul className="list-disc list-inside text-sm text-slate-600 space-y-2 bg-slate-50 p-4 rounded border border-slate-100">
<li><strong>새 사이트:</strong> 새로운 접속 정보를 추가합니다.</li>
<li><strong>시작 디렉토리:</strong> 접속 성공 시 자동으로 이동할 경로를 지정할 수 있습니다. (예: /public_html)</li>
<li><strong>자동 저장:</strong> '연결' 버튼을 누르면 변경된 정보가 자동으로 저장됩니다. (백엔드 재시작 필요)</li>
</ul>
</div>
</div>
)}
{activeTab === 'connection' && (
<div className="space-y-6">
<div>
<h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
<Wifi size={20} className="text-slate-400" /> 퀵 접속 및 설정
</h3>
<p className="text-slate-600 text-sm leading-relaxed mb-4">
상단 입력창을 통해 빠르게 접속하거나 설정을 변경할 수 있습니다.
</p>
<ul className="list-disc list-inside text-sm text-slate-600 space-y-2 bg-slate-50 p-4 rounded border border-slate-100">
<li><strong>자동 완성:</strong> 마지막으로 입력한 호스트, 사용자, 포트 정보가 자동으로 채워집니다.</li>
<li><strong>접속 상태:</strong> 연결 버튼의 색상(초록/파랑)으로 현재 상태를 확인할 수 있습니다.</li>
<li><strong>백엔드 설정:</strong> 우측 상단 톱니바퀴 아이콘을 통해 백엔드 코드를 확인하거나 다운로드할 수 있습니다.</li>
</ul>
</div>
</div>
)}
{activeTab === 'backend' && (
<div className="space-y-6">
<div>
<h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
<Terminal size={20} className="text-slate-400" /> 백엔드 설치 및 실행
</h3>
<p className="text-slate-600 text-sm leading-relaxed mb-4">
WebZilla는 보안상의 이유로 로컬 파일 시스템에 접근하기 위해 별도의 백엔드 프로그램이 필요합니다.
</p>
<div className="space-y-4">
<div className="bg-amber-50 p-4 rounded border border-amber-100">
<h4 className="font-bold text-amber-800 text-sm mb-2 flex items-center gap-2">
<Settings size={16} /> 1. 백엔드 코드 다운로드
</h4>
<p className="text-xs text-amber-700 leading-relaxed">
메인 화면 상단의 <span className="font-bold bg-emerald-600 text-white px-1.5 py-0.5 rounded text-[10px]">백엔드</span> 버튼을 눌러
<code className="mx-1 bg-amber-100 px-1 rounded text-amber-900">backend_proxy.cjs</code> 파일을 다운로드하세요.
</p>
</div>
<div className="bg-slate-50 p-4 rounded border border-slate-200">
<h4 className="font-bold text-slate-800 text-sm mb-2 text- mb-2">2. 실행 방법</h4>
<div className="space-y-3">
<div>
<span className="text-xs font-bold text-slate-600 block mb-1">방법 A: Node.js가 설치된 경우 (추천)</span>
<div className="bg-slate-800 text-slate-200 p-2 rounded text-xs font-mono">
node backend_proxy.cjs
</div>
</div>
<div>
<span className="text-xs font-bold text-slate-600 block mb-1">방법 B: 실행 파일(.exe) 사용</span>
<p className="text-xs text-slate-500">배포된 exe 파일을 더블 클릭하여 실행하세요.</p>
</div>
</div>
</div>
<div className="flex items-start gap-2 text-xs text-blue-600 bg-blue-50 p-3 rounded">
<div className="shrink-0 mt-0.5"><Wifi size={14} /></div>
<p>서버가 실행되면 포트 <strong>8090</strong>에서 대기하며, 이 창의 우측 상단 'Server' 상태가 <span className="font-bold text-green-600">Connected</span>로 변경됩니다.</p>
</div>
</div>
</div>
</div>
)}
{activeTab === 'files' && (
<div className="space-y-6">
<div>
<h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
<Folder size={20} className="text-slate-400" /> 파일 및 폴더 관리
</h3>
<p className="text-slate-600 text-sm leading-relaxed mb-4">
로컬(내 컴퓨터)과 리모트(서버) 간의 파일 전송 및 관리를 수행합니다.
</p>
<div className="space-y-4">
<div className="bg-blue-50 p-3 rounded border border-blue-100">
<h4 className="font-bold text-blue-800 text-sm mb-1">파일 전송</h4>
<p className="text-xs text-blue-600">
파일을 더블 클릭하거나 드래그하여 업로드/다운로드 할 수 있습니다. (드래그 앤 드롭 준비 중)
</p>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="border border-slate-200 p-3 rounded">
<h4 className="font-bold text-slate-700 text-sm mb-1">로컬 (내 컴퓨터)</h4>
<ul className="text-xs text-slate-500 space-y-1">
<li>• 새 폴더 만들기</li>
<li>• 이름 변경</li>
<li>• 파일/폴더 삭제</li>
</ul>
</div>
<div className="border border-slate-200 p-3 rounded">
<h4 className="font-bold text-slate-700 text-sm mb-1">리모트 (서버)</h4>
<ul className="text-xs text-slate-500 space-y-1">
<li>• 새 폴더 만들기 (MKD)</li>
<li>• 이름 변경 (RENAME)</li>
<li>• 파일/폴더 삭제 (DELE)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>
{/* Footer */}
<div className="p-4 border-t border-slate-200 bg-slate-50 flex justify-end rounded-b-lg">
<button
onClick={onClose}
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-sm rounded shadow-sm transition-colors"
>
닫기
</button>
</div>
</div>
</div>
);
};
export default HelpModal;

289
components/SiteManagerModal.tsx
View File

@@ -10,12 +10,12 @@ interface SiteManagerModalProps {
initialSites: SiteConfig[];
}
const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
isOpen,
onClose,
onConnect,
const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
isOpen,
onClose,
onConnect,
onSaveSites,
initialSites
initialSites
}) => {
const [sites, setSites] = useState<SiteConfig[]>([]);
const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -60,11 +60,11 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
const handleDelete = () => {
if (!selectedId) return;
if (!window.confirm('선택한 사이트를 삭제하시겠습니까?')) return;
const newSites = sites.filter(s => s.id !== selectedId);
setSites(newSites);
onSaveSites(newSites); // Auto save on delete
if (newSites.length > 0) {
selectSite(newSites[0]);
} else {
@@ -75,7 +75,7 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
const handleSave = () => {
if (!formData) return;
const newSites = sites.map(s => s.id === formData.id ? formData : s);
setSites(newSites);
onSaveSites(newSites);
@@ -94,19 +94,19 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
const updateForm = (field: keyof SiteConfig, value: any) => {
if (!formData) return;
const updated = { ...formData, [field]: value };
// Auto port update based on protocol
if (field === 'protocol') {
if (value === 'sftp') updated.port = '22';
if (value === 'ftp') updated.port = '21';
if (value === 'sftp') updated.port = '22';
if (value === 'ftp') updated.port = '21';
}
setFormData(updated);
if (field === 'name') {
setSites(sites.map(s => s.id === updated.id ? updated : s));
}
setIsDirty(true);
};
@@ -115,7 +115,7 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
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-3xl flex flex-col h-[600px] max-h-[90vh]">
{/* Header */}
<div className="flex items-center justify-between p-3 border-b border-slate-200 bg-slate-50 rounded-t-lg">
<h2 className="text-sm font-bold text-slate-800 flex items-center gap-2">
@@ -131,13 +131,13 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
{/* Left: Site List */}
<div className="w-1/3 border-r border-slate-200 flex flex-col bg-slate-50">
<div className="p-2 border-b border-slate-200 flex gap-2">
<button
<button
onClick={handleNewSite}
className="flex-1 bg-white hover:bg-slate-50 text-slate-700 text-xs py-1.5 rounded border border-slate-300 flex items-center justify-center gap-1 transition-colors shadow-sm"
>
<FolderPlus size={14} /> 새 사이트
</button>
<button
<button
onClick={handleDelete}
disabled={!selectedId}
className="bg-white hover:bg-red-50 hover:border-red-200 text-slate-500 hover:text-red-500 text-xs px-2 py-1.5 rounded border border-slate-300 transition-colors disabled:opacity-50 shadow-sm"
@@ -145,17 +145,16 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
<Trash2 size={14} />
</button>
</div>
<div className="flex-1 overflow-y-auto p-2 space-y-1">
{sites.map(site => (
<div
<div
key={site.id}
onClick={() => selectSite(site)}
className={`flex items-center gap-2 px-3 py-2 rounded cursor-pointer text-sm select-none transition-colors ${
selectedId === site.id
? 'bg-blue-100 text-blue-900 border border-blue-200'
className={`flex items-center gap-2 px-3 py-2 rounded cursor-pointer text-sm select-none transition-colors ${selectedId === site.id
? 'bg-blue-100 text-blue-900 border border-blue-200'
: 'text-slate-600 hover:bg-slate-200'
}`}
}`}
>
<Server size={14} className={selectedId === site.id ? 'text-blue-600' : 'text-slate-400'} />
<span className="truncate">{site.name}</span>
@@ -175,128 +174,137 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
<>
{/* Tabs */}
<div className="flex border-b border-slate-200 px-4">
<button
onClick={() => setActiveTab('general')}
className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
activeTab === 'general' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500'
}`}
>
일반 (General)
</button>
<button
onClick={() => setActiveTab('transfer')}
className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
activeTab === 'transfer' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500'
}`}
>
전송 설정 (Transfer)
</button>
<button
onClick={() => setActiveTab('general')}
className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${activeTab === 'general' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500'
}`}
>
일반 (General)
</button>
<button
onClick={() => setActiveTab('transfer')}
className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${activeTab === 'transfer' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500'
}`}
>
전송 설정 (Transfer)
</button>
</div>
<div className="p-6 flex-1 overflow-y-auto">
{activeTab === 'general' ? (
<div className="space-y-4">
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">사이트 이름</label>
<input
type="text"
value={formData.name}
onChange={(e) => updateForm('name', e.target.value)}
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
{activeTab === 'general' ? (
<div className="space-y-4">
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">사이트 이름</label>
<input
type="text"
value={formData.name}
onChange={(e) => updateForm('name', e.target.value)}
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
/>
</div>
<hr className="border-slate-200 my-4" />
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">프로토콜</label>
<select
value={formData.protocol}
onChange={(e) => updateForm('protocol', e.target.value as any)}
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
>
<option value="ftp">FTP - 파일 전송 프로토콜</option>
<option value="sftp">SFTP - SSH 파일 전송 프로토콜</option>
</select>
</div>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">호스트</label>
<div className="col-span-3 flex gap-2">
<input
type="text"
value={formData.host}
onChange={(e) => updateForm('host', e.target.value)}
placeholder="ftp.example.com"
className="flex-1 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
/>
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500">포트:</span>
<input
type="text"
value={formData.port}
onChange={(e) => updateForm('port', e.target.value)}
className="w-16 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm text-center focus:border-blue-500 focus:outline-none text-slate-800"
/>
</div>
</div>
</div>
<hr className="border-slate-200 my-4" />
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">사용자 (ID)</label>
<input
type="text"
value={formData.user}
onChange={(e) => updateForm('user', e.target.value)}
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
/>
</div>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">프로토콜</label>
<select
value={formData.protocol}
onChange={(e) => updateForm('protocol', e.target.value as any)}
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
>
<option value="ftp">FTP - 파일 전송 프로토콜</option>
<option value="sftp">SFTP - SSH 파일 전송 프로토콜</option>
</select>
</div>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">비밀번호</label>
<input
type="password"
value={formData.pass || ''}
onChange={(e) => updateForm('pass', e.target.value)}
placeholder="저장하지 않으려면 비워두세요"
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
/>
</div>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">호스트</label>
<div className="col-span-3 flex gap-2">
<input
type="text"
value={formData.host}
onChange={(e) => updateForm('host', e.target.value)}
placeholder="ftp.example.com"
className="flex-1 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">시작 디렉토리</label>
<input
type="text"
value={formData.initialPath || ''}
onChange={(e) => updateForm('initialPath', e.target.value)}
placeholder="/ (기본값)"
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
/>
</div>
</div>
) : (
<div className="space-y-6">
<div className="space-y-3">
<h3 className="text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-4">전송 모드</h3>
<div className="flex items-center gap-3">
<label className="flex items-center gap-2 cursor-pointer group">
<div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${formData.passiveMode !== false ? 'bg-blue-600 border-blue-500' : 'bg-white border-slate-400'}`}>
{formData.passiveMode !== false && <div className="w-2 h-2 bg-white rounded-sm" />}
</div>
<input
type="checkbox"
checked={formData.passiveMode !== false}
onChange={(e) => updateForm('passiveMode', e.target.checked)}
className="hidden"
/>
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500">포트:</span>
<input
type="text"
value={formData.port}
onChange={(e) => updateForm('port', e.target.value)}
className="w-16 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm text-center focus:border-blue-500 focus:outline-none text-slate-800"
/>
</div>
</div>
<div className="text-sm text-slate-700 group-hover:text-blue-600 transition-colors">패시브 모드 (Passive Mode) 사용</div>
</label>
</div>
<p className="text-xs text-slate-500 ml-6">
서버가 방화벽/NAT 뒤에 있는 경우 패시브 모드를 사용하는 것이 좋습니다.
(FTP 프로토콜에만 적용됩니다)
</p>
</div>
<div className="space-y-3">
<h3 className="text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-4">제한 설정</h3>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">사용자 (ID)</label>
<input
type="text"
value={formData.user}
onChange={(e) => updateForm('user', e.target.value)}
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
/>
<label className="text-xs text-slate-500">최대 연결 수:</label>
<input type="number" defaultValue={2} disabled className="bg-slate-100 border border-slate-300 rounded px-2 py-1 text-sm text-slate-500" />
<span className="text-xs text-slate-400 col-span-2">(데모 제한)</span>
</div>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500 text-right">비밀번호</label>
<input
type="password"
value={formData.pass || ''}
onChange={(e) => updateForm('pass', e.target.value)}
placeholder="저장하지 않으려면 비워두세요"
className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
/>
</div>
</div>
) : (
<div className="space-y-6">
<div className="space-y-3">
<h3 className="text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-4">전송 모드</h3>
<div className="flex items-center gap-3">
<label className="flex items-center gap-2 cursor-pointer group">
<div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${formData.passiveMode !== false ? 'bg-blue-600 border-blue-500' : 'bg-white border-slate-400'}`}>
{formData.passiveMode !== false && <div className="w-2 h-2 bg-white rounded-sm" />}
</div>
<input
type="checkbox"
checked={formData.passiveMode !== false}
onChange={(e) => updateForm('passiveMode', e.target.checked)}
className="hidden"
/>
<div className="text-sm text-slate-700 group-hover:text-blue-600 transition-colors">패시브 모드 (Passive Mode) 사용</div>
</label>
</div>
<p className="text-xs text-slate-500 ml-6">
서버가 방화벽/NAT 뒤에 있는 경우 패시브 모드를 사용하는 것이 좋습니다.
(FTP 프로토콜에만 적용됩니다)
</p>
</div>
<div className="space-y-3">
<h3 className="text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-4">제한 설정</h3>
<div className="grid grid-cols-4 gap-4 items-center">
<label className="text-xs text-slate-500">최대 연결 수:</label>
<input type="number" defaultValue={2} disabled className="bg-slate-100 border border-slate-300 rounded px-2 py-1 text-sm text-slate-500" />
<span className="text-xs text-slate-400 col-span-2">(데모 제한)</span>
</div>
</div>
</div>
)}
</div>
</div>
)}
</div>
</>
) : (
@@ -311,26 +319,25 @@ const SiteManagerModal: React.FC<SiteManagerModalProps> = ({
{/* Footer Actions */}
<div className="p-3 border-t border-slate-200 bg-slate-50 flex justify-between items-center rounded-b-lg">
<button
onClick={onClose}
className="px-4 py-2 text-slate-500 hover:text-slate-800 text-sm transition-colors"
<button
onClick={onClose}
className="px-4 py-2 text-slate-500 hover:text-slate-800 text-sm transition-colors"
>
닫기
</button>
<div className="flex gap-2">
<button
<button
onClick={handleSave}
disabled={!formData}
className={`px-4 py-2 text-sm rounded flex items-center gap-2 transition-colors shadow-sm ${
isDirty
? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/20'
className={`px-4 py-2 text-sm rounded flex items-center gap-2 transition-colors shadow-sm ${isDirty
? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/20'
: 'bg-white border border-slate-300 text-slate-500'
}`}
}`}
>
<Save size={16} /> 저장
</button>
<button
<button
onClick={handleConnectClick}
disabled={!formData}
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm flex items-center gap-2 shadow-md shadow-blue-500/20"