UI 보완: 배너 내 업데이트 상세 내역 표시 기능 복구 및 디버그 정보 제거 (v0.4.0.1)

src/platform/pages/VersionPage.tsx

@@ -136,16 +136,11 @@ export function VersionPage() {
                 </button>
             </div>
 
-            {/* Debug Info (Visible only for investigation) */}
+            {/* Update Alert Banner - Enhanced Visibility with Details */}
-            <div className="mb-4 p-2 bg-slate-100 rounded text-[10px] text-slate-500 font-mono">
-                [Debug] Current: {currentVersion}, Latest: {remoteInfo?.latest}, NeedsUpdate: {String(needsUpdate)}, LatestInfo: {remoteInfo?.latestInfo ? 'Yes' : 'No'}
-            </div>
-
-            {/* Update Alert Banner - Enhanced Visibility */}
             {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="flex items-start gap-4 flex-1">
-                        <div className={`p-3 rounded-xl ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-500 text-white' : 'bg-indigo-600 text-white'}`}>
+                        <div className={`p-3 rounded-xl shrink-0 ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-500 text-white' : 'bg-indigo-600 text-white'}`}>
                             <AlertTriangle size={24} />
                         </div>
                         <div className="space-y-1">
@@ -160,6 +155,19 @@ export function VersionPage() {
                             <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">{remoteInfo.latest}</span>
                             </p>
+
+                            {/* Detailed Changes from Tag Message */}
+                            <div className="mt-4 p-4 bg-white/80 backdrop-blur-sm rounded-xl border border-white/50 shadow-sm overflow-hidden">
+                                <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>
                     </div>