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

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;