버전 관리 시스템 최종 안정화: 안내 배너 가시성 문제 해결 및 데이터 매핑 보완 (v0.4.0)

This commit is contained in:
choibk 2026-01-25 01:08:00 +09:00
parent c60189383d
commit 15c4b35ac9

View File

@ -134,56 +134,53 @@ export function VersionPage() {
</div> </div>
{/* Debug Info (Only for internal check) */} {/* Debug Info (Only for internal check) */}
<div className="mb-4 text-[10px] text-slate-300 font-mono"> <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} [Debug] NeedsUpdate: {String(needsUpdate)}, Remote: {remoteInfo ? 'Loaded' : 'Loading...'}, Current: {currentVersion}, Latest: {remoteInfo?.latest}, LatestInfo: {remoteInfo?.latestInfo ? 'Present' : 'Missing'}
</div> </div>
{/* Update Alert Banner - Based on Frontend Version comparison */} {/* Update Alert Banner - Based on Frontend Version comparison */}
{needsUpdate && !updateResult && ( {needsUpdate && !updateResult && remoteInfo?.latestInfo && (
<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={`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="p-5 flex flex-col md:flex-row md:items-center justify-between gap-4"> <div className="flex items-start gap-4">
<div className="flex items-start gap-3"> <div className={`p-3 rounded-xl ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-500 text-white' : 'bg-indigo-600 text-white'}`}>
<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={24} />
<AlertTriangle size={20} />
</div> </div>
<div> <div className="space-y-1">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2">
<h4 className={`font-black text-lg ${remoteInfo?.latestInfo?.type === 'urgent' ? 'text-red-900' : 'text-amber-900'}`}> <h4 className="text-xl font-black text-slate-900 leading-tight">
{remoteInfo?.latestInfo?.type === 'urgent' ? '🚨 긴급 보안/시스템 업데이트 발견' : '✨ 새로운 업데이트가 가능합니다'} {remoteInfo.latestInfo.type === 'urgent' ? '신속한 시스템 업데이트가 필요합니다' : '새로운 플랫폼 기능이 준비되었습니다'}
</h4> </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'}`}> <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 || 'patch'} {remoteInfo.latestInfo.type}
</span> </span>
</div> </div>
<p className={`text-sm font-medium ${remoteInfo?.latestInfo?.type === 'urgent' ? 'text-red-700' : 'text-amber-700'}`}> <p className="text-slate-600 font-medium text-sm">
버전: v{currentVersion} : <span className="font-black underline underline-offset-4">{remoteInfo?.latest}</span> 현재: v{currentVersion} <span className="mx-2"></span> : <span className="font-black text-indigo-700 underline underline-offset-4">v{remoteInfo.latestInfo.version}</span>
</p> </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'}`}> <div className="mt-4 p-4 bg-white/80 backdrop-blur-sm rounded-xl border border-white shadow-sm">
<p className="font-bold mb-1">[{remoteInfo.latestInfo.title}]</p> <p className="font-bold text-slate-800 text-sm mb-2">{remoteInfo.latestInfo.title}</p>
<ul className="space-y-1 opacity-80"> <ul className="space-y-1.5">
{remoteInfo.latestInfo.changes.slice(0, 3).map((c, i) => ( {remoteInfo.latestInfo.changes.map((c, i) => (
<li key={i} className="flex items-start gap-1.5"> <li key={i} className="flex items-start gap-2 text-xs text-slate-600">
<span className="mt-1 w-1 h-1 rounded-full bg-current opacity-50 shrink-0"></span> <div className="mt-1.5 w-1 h-1 rounded-full bg-slate-400 shrink-0"></div>
<span>{c}</span> <span>{c}</span>
</li> </li>
))} ))}
{remoteInfo.latestInfo.changes.length > 3 && <li>... {remoteInfo.latestInfo.changes.length - 3}</li>}
</ul> </ul>
</div> </div>
)}
</div> </div>
</div> </div>
<button <button
onClick={handleUpdate} onClick={handleUpdate}
disabled={updating} 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'}`} 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={20} className="animate-spin" /> : null} {updating ? <RefreshCw size={22} className="animate-spin" /> : null}
{updating ? '업데이트 중...' : '지금 업데이트'} {updating ? '설치 중...' : '지금 업데이트'}
</button> </button>
</div> </div>
</div>
)} )}
{/* Update Result Message */} {/* Update Result Message */}