From 15c4b35ac9a6ac175f85c97d508af6e16795e711 Mon Sep 17 00:00:00 2001
From: choibk <choibk350@gmail.com>
Date: Sun, 25 Jan 2026 01:08:00 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=EC=A0=84=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=B5=9C=EC=A2=85=20=EC=95=88?=
 =?UTF-8?q?=EC=A0=95=ED=99=94:=20=EC=95=88=EB=82=B4=20=EB=B0=B0=EB=84=88?=
 =?UTF-8?q?=20=EA=B0=80=EC=8B=9C=EC=84=B1=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0=20=EB=B0=8F=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=A7=A4?=
 =?UTF-8?q?=ED=95=91=20=EB=B3=B4=EC=99=84=20(v0.4.0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/platform/pages/VersionPage.tsx | 81 ++++++++++++++----------------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/src/platform/pages/VersionPage.tsx b/src/platform/pages/VersionPage.tsx
index ecdc8d6..b861994 100644
--- a/src/platform/pages/VersionPage.tsx
+++ b/src/platform/pages/VersionPage.tsx
@@ -134,55 +134,52 @@ export function VersionPage() {
             </div>
 
             {/* Debug Info (Only for internal check) */}
-            <div className="mb-4 text-[10px] text-slate-300 font-mono">
-                [Debug] NeedsUpdate: {String(needsUpdate)}, Remote: {remoteInfo ? 'Loaded' : 'Loading...'}, Current: {currentVersion}, Latest: {remoteInfo?.latest}
+            <div className="mb-4 p-2 bg-slate-100 rounded text-[10px] text-slate-500 font-mono">
+                [Debug] NeedsUpdate: {String(needsUpdate)}, Remote: {remoteInfo ? 'Loaded' : 'Loading...'}, Current: {currentVersion}, Latest: {remoteInfo?.latest}, LatestInfo: {remoteInfo?.latestInfo ? 'Present' : 'Missing'}
             </div>
 
             {/* Update Alert Banner - Based on Frontend Version comparison */}
-            {needsUpdate && !updateResult && (
-                <div className={`mb-8 p-0 border rounded-xl overflow-hidden animate-in fade-in slide-in-from-top-4 duration-500 shadow-lg ${remoteInfo?.latestInfo?.type === 'urgent' ? 'border-red-200 bg-red-50' : 'border-amber-200 bg-amber-50'}`}>
-                    <div className="p-5 flex flex-col md:flex-row md:items-center justify-between gap-4">
-                        <div className="flex items-start gap-3">
-                            <div className={`p-2 rounded-lg mt-0.5 ${remoteInfo?.latestInfo?.type === 'urgent' ? 'bg-red-100 text-red-600' : 'bg-amber-100 text-amber-600'}`}>
-                                <AlertTriangle size={20} />
+            {needsUpdate && !updateResult && remoteInfo?.latestInfo && (
+                <div className={`mb-8 p-6 border-2 rounded-2xl shadow-xl flex flex-col md:flex-row items-center justify-between gap-6 ${remoteInfo.latestInfo.type === 'urgent' ? 'border-red-400 bg-red-50' : 'border-indigo-400 bg-indigo-50'}`}>
+                    <div className="flex items-start gap-4">
+                        <div className={`p-3 rounded-xl ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-500 text-white' : 'bg-indigo-600 text-white'}`}>
+                            <AlertTriangle size={24} />
+                        </div>
+                        <div className="space-y-1">
+                            <div className="flex items-center gap-2">
+                                <h4 className="text-xl font-black text-slate-900 leading-tight">
+                                    {remoteInfo.latestInfo.type === 'urgent' ? '신속한 시스템 업데이트가 필요합니다' : '새로운 플랫폼 기능이 준비되었습니다'}
+                                </h4>
+                                <span className={`px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-600 text-white' : 'bg-indigo-600 text-white'}`}>
+                                    {remoteInfo.latestInfo.type}
+                                </span>
                             </div>
-                            <div>
-                                <div className="flex items-center gap-2 mb-1">
-                                    <h4 className={`font-black text-lg ${remoteInfo?.latestInfo?.type === 'urgent' ? 'text-red-900' : 'text-amber-900'}`}>
-                                        {remoteInfo?.latestInfo?.type === 'urgent' ? '🚨 긴급 보안/시스템 업데이트 발견' : '✨ 새로운 업데이트가 가능합니다'}
-                                    </h4>
-                                    <span className={`px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${remoteInfo?.latestInfo?.type === 'urgent' ? 'bg-red-600 text-white' : 'bg-amber-600 text-white'}`}>
-                                        {remoteInfo?.latestInfo?.type || 'patch'}
-                                    </span>
-                                </div>
-                                <p className={`text-sm font-medium ${remoteInfo?.latestInfo?.type === 'urgent' ? 'text-red-700' : 'text-amber-700'}`}>
-                                    현재 버전: v{currentVersion} → 최신 버전: <span className="font-black underline underline-offset-4">{remoteInfo?.latest}</span>
-                                </p>
-                                {remoteInfo?.latestInfo && (
-                                    <div className={`mt-3 p-3 rounded-lg border text-xs leading-relaxed ${remoteInfo?.latestInfo?.type === 'urgent' ? 'bg-white/50 border-red-100 text-red-800' : 'bg-white/50 border-amber-100 text-amber-800'}`}>
-                                        <p className="font-bold mb-1">[{remoteInfo.latestInfo.title}]</p>
-                                        <ul className="space-y-1 opacity-80">
-                                            {remoteInfo.latestInfo.changes.slice(0, 3).map((c, i) => (
-                                                <li key={i} className="flex items-start gap-1.5">
-                                                    <span className="mt-1 w-1 h-1 rounded-full bg-current opacity-50 shrink-0"></span>
-                                                    <span>{c}</span>
-                                                </li>
-                                            ))}
-                                            {remoteInfo.latestInfo.changes.length > 3 && <li>...외 {remoteInfo.latestInfo.changes.length - 3}건</li>}
-                                        </ul>
-                                    </div>
-                                )}
+                            <p className="text-slate-600 font-medium text-sm">
+                                현재: v{currentVersion} <span className="mx-2">→</span> 차기: <span className="font-black text-indigo-700 underline underline-offset-4">v{remoteInfo.latestInfo.version}</span>
+                            </p>
+
+                            <div className="mt-4 p-4 bg-white/80 backdrop-blur-sm rounded-xl border border-white shadow-sm">
+                                <p className="font-bold text-slate-800 text-sm mb-2">{remoteInfo.latestInfo.title}</p>
+                                <ul className="space-y-1.5">
+                                    {remoteInfo.latestInfo.changes.map((c, i) => (
+                                        <li key={i} className="flex items-start gap-2 text-xs text-slate-600">
+                                            <div className="mt-1.5 w-1 h-1 rounded-full bg-slate-400 shrink-0"></div>
+                                            <span>{c}</span>
+                                        </li>
+                                    ))}
+                                </ul>
                             </div>
                         </div>
-                        <button
-                            onClick={handleUpdate}
-                            disabled={updating}
-                            className={`px-6 py-3 rounded-xl font-black text-base transition-all shadow-md active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap min-w-[160px] ${remoteInfo?.latestInfo?.type === 'urgent' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-amber-600 text-white hover:bg-amber-700'}`}
-                        >
-                            {updating ? <RefreshCw size={20} className="animate-spin" /> : null}
-                            {updating ? '업데이트 중...' : '지금 업데이트'}
-                        </button>
                     </div>
+
+                    <button
+                        onClick={handleUpdate}
+                        disabled={updating}
+                        className={`px-8 py-4 rounded-xl font-black text-lg transition-all shadow-lg hover:scale-105 active:scale-95 disabled:opacity-50 flex items-center gap-2 whitespace-nowrap min-w-[180px] shadow-indigo-200 ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-indigo-600 text-white hover:bg-slate-900'}`}
+                    >
+                        {updating ? <RefreshCw size={22} className="animate-spin" /> : null}
+                        {updating ? '설치 중...' : '지금 업데이트'}
+                    </button>
                 </div>
             )}