initial commit
This commit is contained in:
backuppc
194
components/SettingsModal.tsx
Normal file
194
components/SettingsModal.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useState } from 'react';
|
||||
import { X, Copy, Check, Server, Globe, ArrowLeftRight, HardDrive } from 'lucide-react';
|
||||
|
||||
interface SettingsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
|
||||
const [activeTab, setActiveTab] = useState<'arch' | 'code'>('arch');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
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: 8080 });
|
||||
|
||||
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]">
|
||||
|
||||
{/* 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>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsModal;
|
||||
Reference in New Issue
Block a user