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

..

Browse Source
This commit is contained in:
backuppc
2026-01-19 11:40:55 +09:00
parent 1e20601741
commit c485f411b3
11 changed files with 3250 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/SettingsModal.tsx
View File

@@ -22,7 +22,7 @@ const ftp = require('basic-ftp');
const SftpClient = require('ssh2-sftp-client');
// ... imports
const wss = new WebSocket.Server({ port: 8080 });
const wss = new WebSocket.Server({ port: 8090 });
wss.on('connection', (ws) => {
let ftpClient = new ftp.Client();
@@ -64,7 +64,7 @@ wss.on('connection', (ws) => {
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">
@@ -78,19 +78,17 @@ wss.on('connection', (ws) => {
{/* Tabs */}
<div className="flex border-b border-slate-200 px-4">
<button
<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'
}`}
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
<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'
}`}
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>
@@ -110,9 +108,9 @@ wss.on('connection', (ws) => {
</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>
<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">
@@ -120,20 +118,20 @@ wss.on('connection', (ws) => {
<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
<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" />
<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">
@@ -156,35 +154,35 @@ wss.on('connection', (ws) => {
) : (
<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>
<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>
<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>