aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

대시보드 시스템 상태 카드 — 세로 블록바+신호등 2열 레이아웃으로 재설계

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Macbook
2026-06-11 16:45:08 +09:00
parent 75738c424f
commit 50aed38f62
3 changed files with 160 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DashboardPage.tsx
+24 -59
View File
@@ -15,6 +15,7 @@ import DashboardGauge from './dashboard/DashboardGauge';
import DashboardSegmentBar from './dashboard/DashboardSegmentBar';
import DashboardSparkChart from './dashboard/DashboardSparkChart';
import DashboardIndicatorBar from './dashboard/DashboardIndicatorBar';
import DashboardSystemCard from './dashboard/DashboardSystemCard';
import '../styles/strategyEditorTheme.css';
import '../styles/dashboardCommand.css';
@@ -183,66 +184,30 @@ const DashboardPage: React.FC<Props> = ({ theme, onGoChart }) => {
<section className="gc-dash-card">
<h2 className="gc-dash-card-title">시스템 상태</h2>
<div className="gc-dash-card-inner">
<div className="gc-dash-sys-status">
{/* 전체 시스템 */}
<div className="gc-sys-tl-item">
<div className={`gc-traffic-light gc-traffic-light--${health}`} aria-label="시스템 상태">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
</div>
<p className="gc-traffic-caption">
{health === 'green' ? '정상 운영' : health === 'yellow' ? '주의 필요' : '점검 필요'}
</p>
<span className="gc-sys-tl-label">시스템</span>
<div className="gc-dash-sys-status">
{/* 메모리 */}
{(() => {
const pct = mon.system?.osMemPct ?? mon.jvm.heapPct;
const used = mon.system?.osMemUsedMb ?? mon.jvm.heapUsedMb;
const total = mon.system?.osMemTotalMb ?? mon.jvm.heapMaxMb;
const fmt = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(1)}GB` : `${mb}MB`;
return (
<DashboardSystemCard
label="메모리"
pct={pct}
usedLabel={fmt(used)}
totalLabel={fmt(total)}
/>
);
})()}
{/* 디스크 */}
<DashboardSystemCard
label="디스크"
pct={mon.system?.diskPct ?? 0}
usedLabel={`${(mon.system?.diskUsedGb ?? 0).toFixed(1)}GB`}
totalLabel={`${(mon.system?.diskTotalGb ?? 0).toFixed(1)}GB`}
/>
</div>
{/* 메모리 */}
{(() => {
const memPct = mon.system?.osMemPct ?? mon.jvm.heapPct;
const memLevel: 'green' | 'yellow' | 'red' =
memPct >= 90 ? 'red' : memPct >= 70 ? 'yellow' : 'green';
const memUsed = mon.system?.osMemUsedMb ?? mon.jvm.heapUsedMb;
const memTotal = mon.system?.osMemTotalMb ?? mon.jvm.heapMaxMb;
return (
<div className="gc-sys-tl-item">
<div className={`gc-traffic-light gc-traffic-light--${memLevel}`} aria-label="메모리 사용량">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
</div>
<p className="gc-traffic-caption">{memPct.toFixed(0)}%</p>
<p className="gc-traffic-caption gc-traffic-caption--sub">
{memUsed >= 1024 ? `${(memUsed/1024).toFixed(1)}GB` : `${memUsed}MB`}
{' / '}
{memTotal >= 1024 ? `${(memTotal/1024).toFixed(1)}GB` : `${memTotal}MB`}
</p>
<span className="gc-sys-tl-label">메모리</span>
</div>
);
})()}
{/* 디스크 */}
{(() => {
const diskPct = mon.system?.diskPct ?? 0;
const diskLevel: 'green' | 'yellow' | 'red' =
diskPct >= 90 ? 'red' : diskPct >= 70 ? 'yellow' : 'green';
const diskUsed = mon.system?.diskUsedGb ?? 0;
const diskTotal = mon.system?.diskTotalGb ?? 0;
return (
<div className="gc-sys-tl-item">
<div className={`gc-traffic-light gc-traffic-light--${diskLevel}`} aria-label="디스크 사용량">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
</div>
<p className="gc-traffic-caption">{diskPct.toFixed(0)}%</p>
<p className="gc-traffic-caption gc-traffic-caption--sub">
{diskUsed.toFixed(1)}GB / {diskTotal.toFixed(1)}GB
</p>
<span className="gc-sys-tl-label">디스크</span>
</div>
);
})()}
</div>
</div>
</section>