From b31b3c6d31440e690e992f9a6255d647b816af29 Mon Sep 17 00:00:00 2001
From: backuppc <backuppc@mail.com>
Date: Wed, 21 Jan 2026 15:11:57 +0900
Subject: [PATCH]  Enhance download center with file size preview and dual
 options

---
 App.tsx                      |  19 ++++--
 components/DownloadModal.tsx | 119 +++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+), 6 deletions(-)
 create mode 100644 components/DownloadModal.tsx

diff --git a/App.tsx b/App.tsx
index a71ef65..ea74bac 100644
--- a/App.tsx
+++ b/App.tsx
@@ -9,6 +9,7 @@ import SiteManagerModal from './components/SiteManagerModal';
 import HelpModal from './components/HelpModal';
 import { CreateFolderModal, RenameModal, DeleteModal } from './components/FileActionModals';
 import ConflictModal from './components/ConflictModal';
+import DownloadModal from './components/DownloadModal';
 import { formatBytes } from './utils/formatters';
 
 const AdSenseBanner: React.FC = () => {
@@ -58,6 +59,7 @@ const App: React.FC = () => {
   const [showConnectionHelp, setShowConnectionHelp] = useState(false);
   const [showSiteManager, setShowSiteManager] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
+  const [showDownloadModal, setShowDownloadModal] = useState(false);
   const [helpInitialTab, setHelpInitialTab] = useState<'sites' | 'connection' | 'files' | 'backend'>('sites');
   const [savedSites, setSavedSites] = useState<SiteConfig[]>([]);
 
@@ -976,14 +978,13 @@ const App: React.FC = () => {
               </button>
 
               {!(window as any).__IS_STANDALONE__ && (
-                <a
-                  href={`${import.meta.env.BASE_URL}webftp-backend.exe`}
-                  download="webftp-backend.exe"
+                <button
+                  onClick={() => setShowDownloadModal(true)}
                   className={`h-[30px] flex items-center justify-center px-3 rounded bg-emerald-600 hover:bg-emerald-500 text-white border border-emerald-500 shadow-md shadow-emerald-500/20 transition-all ${!connection.connected ? 'animate-pulse ring-2 ring-emerald-400/50' : ''}`}
-                  title="백엔드 다운로드"
+                  title="다운로드 센터"
                 >
-                  <Download size={14} className="mr-1.5" /> 백엔드
-                </a>
+                  <Download size={14} className="mr-1.5" /> 다운로드
+                </button>
               )}
 
               <button
@@ -1089,6 +1090,12 @@ const App: React.FC = () => {
         />
       </div>
 
+      {/* Download Modal - Standalone Only */}
+      <DownloadModal
+        isOpen={showDownloadModal}
+        onClose={() => setShowDownloadModal(false)}
+      />
+
       {/* Footer */}
       <footer className="bg-white border-t border-slate-200 px-3 py-1 text-[10px] text-slate-500 flex justify-between shadow-[0_-2px_10px_rgba(0,0,0,0.02)]">
         <span>WebZilla v1.3.0 <span className="mx-2 text-slate-300">|</span> © SIMP</span>
diff --git a/components/DownloadModal.tsx b/components/DownloadModal.tsx
new file mode 100644
index 0000000..f1146dc
--- /dev/null
+++ b/components/DownloadModal.tsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { Download, Package, Server, X } from 'lucide-react';
+import { formatBytes } from '../utils/formatters';
+
+interface DownloadModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const DownloadModal: React.FC<DownloadModalProps> = ({ isOpen, onClose }) => {
+    const [sizes, setSizes] = useState({ full: 0, backend: 0 });
+
+    useEffect(() => {
+        if (isOpen) {
+            // Fetch sizes
+            const fetchSize = async (url: string, key: 'full' | 'backend') => {
+                try {
+                    const res = await fetch(url, { method: 'HEAD' });
+                    const len = res.headers.get('content-length');
+                    if (len) setSizes(prev => ({ ...prev, [key]: parseInt(len, 10) }));
+                } catch (e) {
+                    console.error("Failed to fetch size", e);
+                }
+            };
+
+            fetchSize(`${import.meta.env.BASE_URL}webftp.exe`, 'full');
+            fetchSize(`${import.meta.env.BASE_URL}webftp-backend.exe`, 'backend');
+        }
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+            <div className="bg-white rounded-lg shadow-xl w-[500px] max-w-full m-4 overflow-hidden animate-in fade-in zoom-in duration-200">
+
+                {/* Header */}
+                <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-slate-50">
+                    <h3 className="font-bold text-slate-800 flex items-center gap-2">
+                        <Download size={20} className="text-blue-600" />
+                        WebZilla 다운로드 센터
+                    </h3>
+                    <button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
+                        <X size={20} />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6 space-y-4">
+                    <p className="text-sm text-slate-500 mb-4">
+                        사용 환경에 맞는 실행 파일을 선택하여 다운로드하세요.
+                    </p>
+
+                    <div className="grid gap-4">
+                        {/* Option 1: Full Version */}
+                        <a
+                            href={`${import.meta.env.BASE_URL}webftp.exe`}
+                            download="webftp.exe"
+                            className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 hover:border-blue-400 hover:bg-blue-50 transition-all group relative"
+                        >
+                            <div className="p-3 bg-blue-100 text-blue-600 rounded-lg group-hover:bg-blue-200 transition-colors">
+                                <Package size={24} />
+                            </div>
+                            <div className="flex-1">
+                                <div className="flex items-center justify-between">
+                                    <h4 className="font-bold text-slate-800">단일 실행 파일 (All-in-One)</h4>
+                                    <span className="text-xs font-mono bg-slate-100 px-2 py-0.5 rounded text-slate-500">
+                                        {sizes.full > 0 ? formatBytes(sizes.full) : 'Loading...'}
+                                    </span>
+                                </div>
+                                <p className="text-xs text-slate-500 mt-1">
+                                    설치가 필요 없으며, 프론트엔드와 백엔드가 하나로 통합되어 있습니다.
+                                    <span className="block text-blue-600 mt-1 font-semibold">가장 추천하는 방식입니다.</span>
+                                </p>
+                            </div>
+                            <Download size={16} className="absolute top-4 right-4 text-slate-300 group-hover:text-blue-500" />
+                        </a>
+
+                        {/* Option 2: Backend Only */}
+                        <a
+                            href={`${import.meta.env.BASE_URL}webftp-backend.exe`}
+                            download="webftp-backend.exe"
+                            className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 hover:border-emerald-400 hover:bg-emerald-50 transition-all group relative"
+                        >
+                            <div className="p-3 bg-emerald-100 text-emerald-600 rounded-lg group-hover:bg-emerald-200 transition-colors">
+                                <Server size={24} />
+                            </div>
+                            <div className="flex-1">
+                                <div className="flex items-center justify-between">
+                                    <h4 className="font-bold text-slate-800">백엔드 전용 (Backend Only)</h4>
+                                    <span className="text-xs font-mono bg-slate-100 px-2 py-0.5 rounded text-slate-500">
+                                        {sizes.backend > 0 ? formatBytes(sizes.backend) : 'Loading...'}
+                                    </span>
+                                </div>
+                                <p className="text-xs text-slate-500 mt-1">
+                                    정적 파일 호스팅을 별도로 하거나, 서버 리소스를 최소화해야 할 때 사용하세요.
+                                    (프론트엔드 파일 미포함)
+                                </p>
+                            </div>
+                            <Download size={16} className="absolute top-4 right-4 text-slate-300 group-hover:text-emerald-500" />
+                        </a>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="px-4 py-3 bg-slate-50 border-t border-slate-100 text-right">
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 bg-white border border-slate-300 text-slate-700 rounded hover:bg-slate-50 text-sm font-medium shadow-sm"
+                    >
+                        닫기
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DownloadModal;