381 lines
20 KiB
TypeScript
381 lines
20 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Card } from '../../shared/ui/Card';
|
|
import { apiClient } from '../../shared/api/client';
|
|
import { Info, Cpu, Database, Server, Hash, Calendar, RefreshCw, AlertTriangle, CheckCircle2 } from 'lucide-react';
|
|
|
|
interface VersionInfo {
|
|
status: string;
|
|
version: string;
|
|
node_version: string;
|
|
platform: string;
|
|
arch: string;
|
|
timestamp: string;
|
|
}
|
|
|
|
interface RemoteVersion {
|
|
current: string;
|
|
latest: string | null;
|
|
needsUpdate: boolean;
|
|
error?: string;
|
|
}
|
|
|
|
export function VersionPage() {
|
|
const [healthIcon, setHealthInfo] = useState<VersionInfo | null>(null);
|
|
const [remoteInfo, setRemoteInfo] = useState<RemoteVersion | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [checkingRemote, setCheckingRemote] = useState(false);
|
|
const [updating, setUpdating] = useState(false);
|
|
const [updateResult, setUpdateResult] = useState<{ success: boolean; message: string } | null>(null);
|
|
|
|
const fetchVersion = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// Add timestamp to prevent caching
|
|
const res = await apiClient.get(`/health?t=${Date.now()}`);
|
|
setHealthInfo(res.data);
|
|
} catch (err) {
|
|
console.error('Failed to fetch version info', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchRemoteVersion = async () => {
|
|
setCheckingRemote(true);
|
|
try {
|
|
const res = await apiClient.get('/system/version/remote');
|
|
setRemoteInfo(res.data);
|
|
} catch (err) {
|
|
console.error('Failed to fetch remote version info', err);
|
|
} finally {
|
|
setCheckingRemote(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchVersion();
|
|
fetchRemoteVersion();
|
|
}, []);
|
|
|
|
const handleUpdate = async () => {
|
|
if (!remoteInfo?.latest) return;
|
|
|
|
if (!confirm(`시스템을 ${remoteInfo.latest} 버전으로 업데이트하시겠습니까?\n업데이트 중에는 시스템이 일시적으로 중단될 수 있습니다.`)) {
|
|
return;
|
|
}
|
|
|
|
setUpdating(true);
|
|
setUpdateResult(null);
|
|
|
|
try {
|
|
const res = await apiClient.post('/system/version/update', { targetTag: remoteInfo.latest });
|
|
setUpdateResult({ success: true, message: res.data.message });
|
|
|
|
// Success: Wait a bit for server to settle, then refresh
|
|
let countdown = 5;
|
|
const timer = setInterval(() => {
|
|
countdown -= 1;
|
|
if (countdown <= 0) {
|
|
clearInterval(timer);
|
|
window.location.reload();
|
|
} else {
|
|
setUpdateResult({
|
|
success: true,
|
|
message: `${res.data.message} (${countdown}초 후 페이지가 새로고침됩니다.)`
|
|
});
|
|
}
|
|
}, 1000);
|
|
|
|
} catch (err: any) {
|
|
console.error('Update failed', err);
|
|
setUpdateResult({
|
|
success: false,
|
|
message: err.response?.data?.error || '업데이트 요청 중 오류가 발생했습니다.'
|
|
});
|
|
setUpdating(false);
|
|
}
|
|
};
|
|
|
|
// Client/Frontend version fixed at build time
|
|
const frontendVersion = '0.3.1';
|
|
const buildDate = '2026-01-24';
|
|
|
|
// Check if update is needed based on frontend version vs remote tag
|
|
const needsUpdate = remoteInfo?.latest ?
|
|
(remoteInfo.latest.replace(/^v/, '') !== frontendVersion) : false;
|
|
|
|
return (
|
|
<div className="page-container p-6 max-w-4xl mx-auto">
|
|
<div className="flex justify-between items-start mb-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">시스템 관리 - 버전 정보</h1>
|
|
<p className="text-slate-500 mt-1">플랫폼 및 서버의 현재 릴리즈 버전을 확인하고 업데이트를 관리합니다.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => { fetchVersion(); fetchRemoteVersion(); }}
|
|
disabled={loading || checkingRemote}
|
|
className="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors disabled:opacity-50"
|
|
title="새로고침"
|
|
>
|
|
<RefreshCw size={20} className={loading || checkingRemote ? 'animate-spin' : ''} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Update Alert Banner - Based on Frontend Version comparison */}
|
|
{needsUpdate && !updateResult && (
|
|
<div className="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-xl flex items-center justify-between animate-in fade-in slide-in-from-top-4 duration-500">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-amber-100 text-amber-600 rounded-lg">
|
|
<AlertTriangle size={20} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-amber-900">새로운 시스템 업데이트가 가능합니다!</h4>
|
|
<p className="text-sm text-amber-700">현재 플랫폼 버전: v{frontendVersion} → 최신 배포 버전: <span className="font-bold">{remoteInfo?.latest}</span></p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleUpdate}
|
|
disabled={updating}
|
|
className="px-4 py-2 bg-amber-600 text-white rounded-lg font-bold text-sm hover:bg-amber-700 transition-colors shadow-sm disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
{updating ? <RefreshCw size={16} className="animate-spin" /> : null}
|
|
{updating ? '업데이트 중...' : '지금 업데이트'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Update Result Message */}
|
|
{updateResult && (
|
|
<div className={`mb-8 p-4 rounded-xl flex items-center gap-3 border ${updateResult.success ? 'bg-emerald-50 border-emerald-200 text-emerald-900' : 'bg-red-50 border-red-200 text-red-900'}`}>
|
|
{updateResult.success ? <CheckCircle2 size={20} className="text-emerald-500" /> : <AlertTriangle size={20} className="text-red-500" />}
|
|
<p className="font-medium">{updateResult.message}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Frontend Platform Version */}
|
|
<Card className="p-6 border-slate-200 shadow-sm relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Cpu size={120} />
|
|
</div>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-3 bg-indigo-50 text-indigo-600 rounded-xl">
|
|
<Hash size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-sm font-bold text-slate-500 uppercase tracking-wider">Frontend Platform</h3>
|
|
<p className="text-xl font-black text-slate-900">Smart IMS 클라이언트</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center py-2 border-b border-slate-50">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><Info size={14} /> 현재 버전</span>
|
|
<span className="font-bold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full text-xs">v{frontendVersion}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center py-2 border-b border-slate-50">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><Calendar size={14} /> 빌드 일자</span>
|
|
<span className="font-medium text-slate-700 text-sm">{buildDate}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><Database size={14} /> 아키텍처</span>
|
|
<span className="font-medium text-slate-700 text-sm">React Agentic Architecture</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Backend Server Version */}
|
|
<Card className="p-6 border-slate-200 shadow-sm relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Server size={120} />
|
|
</div>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-3 bg-emerald-50 text-emerald-600 rounded-xl">
|
|
<Database size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-sm font-bold text-slate-500 uppercase tracking-wider">Backend Core</h3>
|
|
<p className="text-xl font-black text-slate-900">IMS 서비스 엔진</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center py-2 border-b border-slate-50">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><Cpu size={14} /> 런타임 환경</span>
|
|
<span className="font-medium text-slate-700 text-sm">
|
|
{loading ? 'Checking...' : healthIcon?.node_version ? `Node.js ${healthIcon.node_version}` : 'N/A'}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center py-2 border-b border-slate-50">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><Server size={14} /> 운영 체제</span>
|
|
<span className="font-medium text-slate-700 text-sm uppercase">
|
|
{loading ? '...' : healthIcon?.platform ? `${healthIcon.platform} (${healthIcon.arch})` : 'Unknown'}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center py-2 border-b border-slate-50">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><Calendar size={14} /> 서버 타임스탬프</span>
|
|
<span className="font-medium text-slate-700 text-sm">
|
|
{loading ? '...' : healthIcon?.timestamp || 'Unknown'}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-slate-500 text-sm flex items-center gap-2"><RefreshCw size={14} /> 엔진 상태</span>
|
|
<span className={`font-bold text-xs uppercase ${healthIcon?.status === 'ok' ? 'text-emerald-500' : 'text-red-500'}`}>
|
|
{loading ? '...' : healthIcon?.status === 'ok' ? 'Running' : 'Offline'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Remote Info Status (Debug/Info) */}
|
|
{remoteInfo && (
|
|
<div className="mt-4 text-[11px] text-slate-400 flex items-center gap-3 px-2">
|
|
<div className="flex items-center gap-1">
|
|
<div className={`w-1.5 h-1.5 rounded-full ${remoteInfo.error ? 'bg-red-400' : 'bg-emerald-400'}`}></div>
|
|
<span>원격 저장소 상태: {remoteInfo.error ? `오류 (${remoteInfo.error})` : '정상'}</span>
|
|
</div>
|
|
{!remoteInfo.error && (
|
|
<span>최신 배포 태그: <span className="font-bold text-slate-500">{remoteInfo.latest || '없음'}</span></span>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* Release History Section */}
|
|
<div className="mt-12 space-y-6">
|
|
<h2 className="text-xl font-bold text-slate-900 flex items-center gap-2 mb-4">
|
|
<Calendar size={22} className="text-indigo-600" />
|
|
업데이트 히스토리
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
version: '0.3.1',
|
|
date: '2026-01-24',
|
|
title: '업데이트 가용성 및 캐시 정책 강화',
|
|
changes: [
|
|
'서버 사이드 No-Cache 헤더 적용으로 업데이트 후 강제 새로고침 현상 해결',
|
|
'Vite 빌드 아티팩트 서빙 안정화 패치'
|
|
],
|
|
type: 'fix'
|
|
},
|
|
{
|
|
version: '0.3.0',
|
|
date: '2026-01-24',
|
|
title: '시스템 업데이트 엔진 호환성 및 UI 개선',
|
|
changes: [
|
|
'Windows 환경(CMD)에서도 자동 업데이트가 작동하도록 쉘 호환성 패치',
|
|
'업데이트 성공 시 5초 카운트다운 후 자동 페이지 새로고침 기능 추가',
|
|
'Gitea 설정 시 브라우저 계정 자동 완성(Auto-fill) 방지 로직 적용'
|
|
],
|
|
type: 'fix'
|
|
},
|
|
{
|
|
version: '0.2.8',
|
|
date: '2026-01-24',
|
|
title: 'CCTV 모듈 관리 권한 강화',
|
|
changes: [
|
|
'Supervisor 계정도 CCTV 추가, 설정, 삭제가 가능하도록 권한 확장',
|
|
'카메라 드래그 앤 드롭 순서 변경 권한 보완'
|
|
],
|
|
type: 'fix'
|
|
},
|
|
{
|
|
version: '0.2.7',
|
|
date: '2026-01-24',
|
|
title: '시스템 환경 정보 시각화 및 캐싱 보정',
|
|
changes: [
|
|
'백엔드 서비스 엔진 카드에 실제 런타임(Node.js) 및 OS 정보 표시',
|
|
'버전 정보 조회 시 브라우저 API 캐싱 보정 로직 적용',
|
|
'플랫폼 업데이트 판단 기준을 프론트엔드 빌드 버전으로 일원화'
|
|
],
|
|
type: 'feature'
|
|
},
|
|
{
|
|
version: '0.2.6',
|
|
date: '2026-01-24',
|
|
title: '시스템 자동 업데이트 엔진 도입 (Hotfix)',
|
|
changes: [
|
|
'Git Tag 기반 시스템 자동 업데이트 관리 모듈 신규 도입',
|
|
'최고관리자 전용 업데이트 실행 UI 구축'
|
|
],
|
|
type: 'fix'
|
|
},
|
|
{
|
|
version: '0.2.1',
|
|
date: '2026-01-22',
|
|
title: 'IMS 서비스 코어 성능 최적화',
|
|
changes: [
|
|
'API 서버 헬스체크 및 실시간 상태 모니터링 연동',
|
|
'보안 세션 타임아웃 유동적 처리 미들웨어 도입',
|
|
'자산 관리 모듈 초기 베타 릴리즈'
|
|
],
|
|
type: 'fix'
|
|
}
|
|
].map((entry, idx) => (
|
|
<Card key={entry.version} className={`p-6 border-slate-200 shadow-sm transition-all hover:border-indigo-200 ${idx === 0 ? 'bg-indigo-50/20 border-indigo-100 ring-2 ring-indigo-50/50' : ''}`}>
|
|
<div className="flex flex-col md:flex-row md:items-center gap-4 mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${entry.type === 'feature' ? 'bg-indigo-600 text-white' : 'bg-slate-200 text-slate-700'}`}>
|
|
{entry.type}
|
|
</span>
|
|
<span className="font-bold text-slate-900 font-mono text-base">v{entry.version}</span>
|
|
</div>
|
|
<div className="hidden md:block w-px h-4 bg-slate-200 mx-2"></div>
|
|
<div className="flex-1">
|
|
<h4 className="text-sm font-bold text-slate-800">{entry.title}</h4>
|
|
</div>
|
|
<div className="text-xs text-slate-400 font-medium px-2 py-1 bg-slate-50 rounded italic">{entry.date}</div>
|
|
</div>
|
|
<ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2">
|
|
{entry.changes.map((change, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-[13px] text-slate-600 leading-relaxed">
|
|
<div className="mt-1.5 w-1.5 h-1.5 rounded-full bg-indigo-500/50 flex-shrink-0 animate-pulse"></div>
|
|
<span>{change}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Integrity Banner */}
|
|
<Card className="mt-12 p-6 bg-slate-900 text-white border-none shadow-xl overflow-hidden relative">
|
|
<div className="relative z-10">
|
|
<h3 className="text-lg font-bold mb-2 flex items-center gap-2">
|
|
<ShieldCheck size={20} className="text-amber-400" /> Platform Integrity
|
|
</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed max-w-2xl">
|
|
Smart IMS 플랫폼은 데이터 보안과 시스템 안정성을 최우선으로 설계되었습니다.
|
|
모든 모듈은 Sokuree 아키텍처 표준을 준수하며, 암호화 키 관리 시스템(L2 Protection)에 의해 보호되고 있습니다.
|
|
</p>
|
|
</div>
|
|
<div className="absolute -bottom-4 -right-4 opacity-10">
|
|
<Box size={160} />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Internal Local Components if not available in shared/ui
|
|
function ShieldCheck({ size, className }: { size?: number, className?: string }) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size || 24} height={size || 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function Box({ size, className }: { size?: number, className?: string }) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size || 24} height={size || 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
|
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
|
|
<path d="m3.3 7 8.7 5 8.7-5" />
|
|
<path d="M12 22V12" />
|
|
</svg>
|
|
);
|
|
}
|