다운로드 화면 추가 및 full exe 추가

components/DownloadModal.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react';
+import { Download, Server, Package } from 'lucide-react';
+import { formatBytes } from '../utils/formatters';
+
+interface DownloadModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const DownloadModal: React.FC<DownloadModalProps> = ({ isOpen, onClose }) => {
+    if (!isOpen) return null;
+
+    const baseUrl = import.meta.env.BASE_URL;
+    const [fileSizes, setFileSizes] = useState<{ [key: string]: string }>({});
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const fetchSize = async (filename: string) => {
+            try {
+                const response = await fetch(`${baseUrl}${filename}`, { method: 'HEAD' });
+                const size = response.headers.get('Content-Length');
+                if (size) {
+                    setFileSizes(prev => ({ ...prev, [filename]: formatBytes(parseInt(size, 10)) }));
+                }
+            } catch (e) {
+                console.error(`Failed to fetch size for ${filename}`, e);
+            }
+        };
+
+        fetchSize('webftp.exe');
+        fetchSize('webftp-backend.exe');
+    }, [isOpen, baseUrl]);
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/20 backdrop-blur-sm animate-in fade-in duration-200">
+            <div
+                className="fixed inset-0"
+                onClick={onClose}
+            ></div>
+            <div className="bg-white/90 backdrop-blur-md rounded-xl shadow-2xl border border-white/50 w-full max-w-md p-6 relative animate-in zoom-in-95 duration-200">
+
+                <h2 className="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">
+                    <Download className="text-blue-600" />
+                    다운로드 센터
+                </h2>
+                <p className="text-sm text-slate-500 mb-6">
+                    사용 환경에 맞는 실행 파일을 선택하여 다운로드하세요.
+                </p>
+
+                <div className="space-y-4">
+                    <a
+                        href={`${baseUrl}webftp.exe`}
+                        download="webftp.exe"
+                        className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:bg-blue-50 hover:border-blue-300 transition-all group shadow-sm hover:shadow-md"
+                        onClick={onClose}
+                    >
+                        <div className="w-12 h-12 rounded-full bg-blue-100/50 flex items-center justify-center shrink-0 group-hover:bg-blue-200/50 transition-colors">
+                            <Package className="text-blue-600 w-6 h-6" />
+                        </div>
+                        <div className="flex-1">
+                            <div className="font-bold text-slate-800 mb-1 flex items-center justify-between">
+                                WebFTP (권장)
+                                WebFTP (권장)
+                                <span className="flex gap-1">
+                                    {fileSizes['webftp.exe'] && <span className="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded opacity-80">{fileSizes['webftp.exe']}</span>}
+                                    <span className="text-[10px] font-bold bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">ALL-IN-ONE</span>
+                                </span>
+                            </div>
+                            <p className="text-xs text-slate-500 leading-relaxed">
+                                백엔드와 프론트엔드가 포함된 단일 실행 파일입니다. <br />
+                                <span className="font-semibold text-slate-600">다운로드 후 바로 실행하여 사용하세요.</span>
+                            </p>
+                        </div>
+                    </a>
+
+                    <a
+                        href={`${baseUrl}webftp-backend.exe`}
+                        download="webftp-backend.exe"
+                        className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 hover:border-slate-300 transition-all group shadow-sm hover:shadow-md"
+                        onClick={onClose}
+                    >
+                        <div className="w-12 h-12 rounded-full bg-slate-100/50 flex items-center justify-center shrink-0 group-hover:bg-slate-200/50 transition-colors">
+                            <Server className="text-slate-600 w-6 h-6" />
+                        </div>
+                        <div className="flex-1">
+                            <div className="font-bold text-slate-800 mb-1 flex items-center justify-between">
+                                Backend Only
+                                {fileSizes['webftp-backend.exe'] && <span className="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded opacity-80">{fileSizes['webftp-backend.exe']}</span>}
+                            </div>
+                            <p className="text-xs text-slate-500 leading-relaxed">
+                                백엔드 서버 파일만 다운로드합니다. <br />
+                                <span className="font-semibold text-slate-600">백엔드를 실행하시면 현재 사이트에서 백엔드가 자동 연결 됩니다</span>
+                            </p>
+                        </div>
+                    </a>
+                </div>
+
+                <div className="mt-6 flex justify-end">
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 text-sm text-slate-600 hover:text-slate-900 font-medium transition-colors"
+                    >
+                        닫기
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DownloadModal;