대시보드 화면 레이아웃 수정

frontend/src/components/DashboardPage.tsx

@@ -1,5 +1,6 @@
 /**
- * GoldenChart 대시보드 — 투자분석 레포트형 카드 UI
+ * GoldenChart Command Center — Standard + System/Tech
+ * (기존 테마·내용 유지, 카드 레이아웃·정렬만 정돈)
  */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Theme } from '../types';
@@ -8,24 +9,13 @@ import {
   type DashboardSummaryDto,
   type ProcessMonitorDto,
   type SystemMonitorDto,
-  type TradeSignalDto,
 } from '../utils/backendApi';
+import DashboardGauge from './dashboard/DashboardGauge';
+import DashboardSegmentBar from './dashboard/DashboardSegmentBar';
 import DashboardSparkChart from './dashboard/DashboardSparkChart';
-import {
+import DashboardIndicatorBar from './dashboard/DashboardIndicatorBar';
-  pct,
+import '../styles/strategyEditorTheme.css';
-  pctAbs,
+import '../styles/dashboardCommand.css';
-  num,
-  wonFmt,
-  fmtKrwShort,
-  colorCls,
-  SectionTitle,
-  KpiCard,
-  MetricRow,
-  WinRateCircle,
-  CompareBar,
-  ResourceBar,
-} from './shared/analysisDashboardUi';
-import '../styles/dashboardReport.css';
 
 interface Props {
   theme: Theme;
@@ -39,6 +29,11 @@ const STATUS_LABEL: Record<string, string> = {
   disabled: '비활성',
 };
 
+const fmtKrw = (n: number) =>
+  n >= 1e8 ? `${(n / 1e8).toFixed(2)}억` : n >= 1e4 ? `${(n / 1e4).toFixed(0)}만` : n.toLocaleString('ko-KR');
+
+const fmtPct = (v: number) => `${v >= 0 ? '+' : ''}${(v * 100).toFixed(1)}%`;
+
 function formatAgo(ms: number): string {
   if (!ms) return '—';
   const sec = Math.floor((Date.now() - ms) / 1000);
@@ -47,6 +42,13 @@ function formatAgo(ms: number): string {
   return `${Math.floor(sec / 3600)}시간 전`;
 }
 
+function statusClass(s: string): string {
+  if (s === 'healthy') return 'gc-proc--ok';
+  if (s === 'degraded') return 'gc-proc--warn';
+  if (s === 'down') return 'gc-proc--down';
+  return 'gc-proc--off';
+}
+
 function healthLevel(mon: SystemMonitorDto): 'green' | 'yellow' | 'red' {
   if (!mon.pipelineEnabled) return 'red';
   if (mon.jvm.heapPct > 85 || mon.queue.dropped > 0 || mon.staleMarkets.length > 5) return 'yellow';
@@ -55,31 +57,24 @@ function healthLevel(mon: SystemMonitorDto): 'green' | 'yellow' | 'red' {
   return 'green';
 }
 
-function healthScore(level: 'green' | 'yellow' | 'red'): number {
+const ProcessCard: React.FC<{ proc: ProcessMonitorDto }> = ({ proc }) => (
-  if (level === 'green') return 1;
+  <article className={`gc-proc ${statusClass(proc.status)}`}>
-  if (level === 'yellow') return 0.55;
+    <header className="gc-proc-head">
-  return 0.2;
+      <span className="gc-proc-layer">{proc.layer}</span>
-}
+      <span className={`gc-proc-badge ${statusClass(proc.status)}`}>{STATUS_LABEL[proc.status] ?? proc.status}</span>
-
+    </header>
-function procMiniClass(status: string): string {
+    <h3 className="gc-proc-name">{proc.name}</h3>
-  if (status === 'healthy') return 'gc-dash-proc-mini--ok';
+    <ul className="gc-proc-metrics">
-  if (status === 'degraded') return 'gc-dash-proc-mini--warn';
+      {Object.entries(proc.metrics).slice(0, 4).map(([k, v]) => (
-  if (status === 'down') return 'gc-dash-proc-mini--down';
+        <li key={k}><span>{k}</span><strong>{String(v ?? '—')}</strong></li>
-  return 'gc-dash-proc-mini--off';
+      ))}
-}
+    </ul>
-
-const SIG_LABEL: Record<string, string> = { BUY: '매수', SELL: '매도' };
-
-const ProcessMini: React.FC<{ proc: ProcessMonitorDto }> = ({ proc }) => (
-  <article className={`gc-dash-proc-mini ${procMiniClass(proc.status)}`}>
-    <p className="gc-dash-proc-mini-name">{proc.name}</p>
-    <span className="gc-dash-proc-mini-badge">{STATUS_LABEL[proc.status] ?? proc.status}</span>
   </article>
 );
 
 const HISTORY_LEN = 48;
 
-const DashboardPage: React.FC<Props> = ({ onGoChart }) => {
+const DashboardPage: React.FC<Props> = ({ theme, onGoChart }) => {
   const [data, setData] = useState<DashboardSummaryDto | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -116,7 +111,6 @@ const DashboardPage: React.FC<Props> = ({ onGoChart }) => {
   const mon = data?.systemMonitor;
   const app = data?.app as Record<string, unknown> | undefined;
   const health = mon ? healthLevel(mon) : 'yellow';
-  const healthPct = healthScore(health);
 
   const latencyMs = useMemo(() => {
     if (!mon) return 0;
@@ -124,371 +118,238 @@ const DashboardPage: React.FC<Props> = ({ onGoChart }) => {
     return tps > 0 ? Math.max(12, Math.round(1000 / Math.max(tps, 1))) : 45;
   }, [mon]);
 
+  const stompConnections = data?.monitoredMarkets ?? 0;
+
   const ta4jPct = mon && mon.memory.maxBarsPerSeries > 0
     ? Math.min(100, (mon.memory.totalBars / (mon.memory.series * mon.memory.maxBarsPerSeries || 1)) * 100)
     : 0;
 
-  const queuePct = (mon?.queue.fillRatio ?? 0) * 100;
-  const heapPct = mon?.jvm.heapPct ?? 0;
-
-  const buySignals = useMemo(
-    () => (data?.recentSignals ?? []).filter(s => s.signalType === 'BUY').length,
-    [data?.recentSignals],
-  );
-  const sellSignals = (data?.recentSignals?.length ?? 0) - buySignals;
-
-  const printedAt = new Date().toLocaleString('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-
-  const tradingMode = String(app?.tradingMode ?? '—');
-
   return (
-    <div className="gc-dash-report-page">
+    <div className={`gc-dash-page se-page se-page--${theme}`}>
-      {error && <p className="gc-dash-report-error">{error}</p>}
+      <header className="gc-dash-header">
-      {loading && !data && <p className="gc-dash-report-loading">대시보드 불러오는 중…</p>}
+        <div className="gc-dash-header-left">
+          <span className="gc-dash-badge">[01] Standard Dashboard</span>
+          <h1 className="gc-dash-title">GoldenChart Command Center</h1>
+          <p className="gc-dash-sub">실시간 투자 분석 · 파이프라인 모니터링 · 시스템 헬스체크</p>
+        </div>
+        <div className="gc-dash-header-right">
+          <span className="gc-dash-stat">Global Latency: <strong>{latencyMs}ms</strong></span>
+          <span className="gc-dash-stat">Active Markets: <strong>{stompConnections}</strong></span>
+          {mon && (
+            <span className="gc-dash-stat">
+              Pipeline <strong className={mon.pipelineEnabled ? 'up' : 'down'}>{mon.pipelineEnabled ? 'ON' : 'OFF'}</strong>
+              {mon.sampledAtMs ? ` · ${formatAgo(mon.sampledAtMs)}` : ''}
+            </span>
+          )}
+          <button type="button" className="gc-dash-btn" onClick={refresh} disabled={loading}>
+            {loading ? '갱신…' : '새로고침'}
+          </button>
+        </div>
+      </header>
+
+      {error && <p className="gc-dash-error">{error}</p>}
 
       {data && mon && (
-        <div className="gc-dash-report-sheet">
+        <div className="gc-dash-body">
-          <header className="gc-dash-report-header">
+          {/* ── LEFT ── */}
-            <div className="gc-dash-report-brand">
+          <aside className="gc-dash-col gc-dash-col--left">
-              <h1>GoldenChart 대시보드</h1>
+            <section className="gc-dash-card gc-dash-card--glow">
-              <p className="gc-dash-report-meta">
+              <h2 className="gc-dash-card-title">포트폴리오</h2>
-                출력일시 {printedAt}
+              <div className="gc-dash-card-inner">
-                {mon.sampledAtMs ? ` · 시스템 갱신 ${formatAgo(mon.sampledAtMs)}` : ''}
+                <div className="gc-dash-kpi-hero">
-              </p>
+                  <div className="gc-dash-kpi-block">
-            </div>
+                    <span className="gc-dash-kpi-label">모의 총자산</span>
-            <div className="gc-dash-report-actions">
+                    <strong className="gc-dash-kpi-val">{fmtKrw(data.paper.totalAsset)}</strong>
-              <button
+                    <span className={`gc-dash-kpi-sub ${data.paper.totalReturnPct >= 0 ? 'up' : 'down'}`}>
-                type="button"
+                      {fmtPct(data.paper.totalReturnPct)}
-                className="gc-dash-report-refresh"
-                onClick={refresh}
-                disabled={loading}
-              >
-                {loading ? '갱신…' : '새로고침'}
-              </button>
-            </div>
-          </header>
-
-          <div className="brd-dashboard brd-dashboard--report">
-            {/* 요약 헤더 */}
-            <div className="brd-dash-header">
-              <div className="brd-dash-header-left">
-                <div className="brd-dash-strategy">투자·시스템 현황 요약</div>
-                <div className="brd-dash-meta">
-                  <span className="brd-dash-badge">{tradingMode}</span>
-                  <span className="brd-dash-badge">
-                    Pipeline {mon.pipelineEnabled ? 'ON' : 'OFF'}
-                  </span>
-                  <span className="brd-dash-badge">관심 {data.watchlistCount}</span>
-                  <span className="brd-dash-badge">감시 {data.monitoredMarkets}</span>
-                  <span className="brd-dash-badge brd-dash-badge--time">
-                    Latency {latencyMs}ms
-                  </span>
-                </div>
-              </div>
-              <div className="brd-dash-header-kpi brd-dash-header-kpi--report">
-                <div className="brd-dash-big-kpi brd-dash-big-kpi--report">
-                  <div className={`brd-dash-big-val ${colorCls(data.paper.totalReturnPct)}`}>
-                    {pct(data.paper.totalReturnPct)}
-                  </div>
-                  <div className="brd-dash-big-label">모의 총 수익률</div>
-                </div>
-                <div className="brd-dash-big-kpi brd-dash-big-kpi--report">
-                  <div className={`brd-dash-big-val ${colorCls(data.paper.totalReturnPct)}`}>
-                    {fmtKrwShort(data.paper.totalAsset)}
-                  </div>
-                  <div className="brd-dash-big-label">모의 총 자산</div>
-                </div>
-              </div>
-            </div>
-
-            {/* KPI 6 */}
-            <div className="brd-row">
-              <div className="brd-kpi-grid">
-                <KpiCard
-                  icon="💼"
-                  label="모의 현금"
-                  value={fmtKrwShort(data.paper.cashBalance)}
-                  sub={`보유 ${data.paper.positions?.length ?? 0}종목`}
-                  accent="blue"
-                />
-                <KpiCard
-                  icon="🏦"
-                  label="실거래 KRW"
-                  value={fmtKrwShort(data.live.krwBalance)}
-                  sub={data.live.configured ? '연동됨' : '미설정'}
-                  accent="teal"
-                />
-                <KpiCard
-                  icon="📉"
-                  label="JVM Heap"
-                  value={`${heapPct.toFixed(0)}%`}
-                  sub={`${mon.jvm.heapUsedMb} / ${mon.jvm.heapMaxMb} MB`}
-                  valueColor={heapPct > 85 ? 'brd-neg' : heapPct > 70 ? 'brd-warn' : 'brd-pos'}
-                  accent="red"
-                />
-                <KpiCard
-                  icon="📬"
-                  label="이벤트 큐"
-                  value={`${queuePct.toFixed(0)}%`}
-                  sub={`${mon.queue.pending} / ${mon.queue.capacity?.toLocaleString() ?? '—'}`}
-                  valueColor={queuePct > 70 ? 'brd-neg' : ''}
-                  accent="yellow"
-                />
-                <KpiCard
-                  icon="⚡"
-                  label="Tick 처리"
-                  value={String(mon.traffic.ticksProcessedPerSec ?? 0)}
-                  sub="ticks / sec"
-                  accent="purple"
-                />
-                <KpiCard
-                  icon="📡"
-                  label="WebSocket"
-                  value={String(mon.traffic.wsMessagesPerSec ?? 0)}
-                  sub="msg / sec"
-                  accent="green"
-                />
-              </div>
-            </div>
-
-            {/* 3열 상세 */}
-            <div className="brd-row brd-row--3col">
-              <div className="brd-card">
-                <SectionTitle icon="📊" title="포트폴리오" />
-                <div className="brd-card-body">
-                  <MetricRow label="모의 총자산" value={fmtKrwShort(data.paper.totalAsset)} />
-                  <MetricRow
-                    label="총 수익률"
-                    value={pct(data.paper.totalReturnPct)}
-                    cls={colorCls(data.paper.totalReturnPct)}
-                  />
-                  <MetricRow
-                    label="평가 손익"
-                    value={wonFmt(data.paper.unrealizedPnl)}
-                    cls={colorCls(data.paper.unrealizedPnl)}
-                  />
-                  <MetricRow
-                    label="실현 손익"
-                    value={wonFmt(data.paper.realizedPnl)}
-                    cls={colorCls(data.paper.realizedPnl)}
-                  />
-                  <MetricRow label="모의 현금" value={fmtKrwShort(data.paper.cashBalance)} />
-                  <MetricRow label="주식 평가" value={fmtKrwShort(data.paper.stockEvalAmount)} />
-                  <MetricRow label="초기 자본" value={fmtKrwShort(data.paper.initialCapital)} />
-                </div>
-              </div>
-
-              <div className="brd-card">
-                <SectionTitle icon="🛡" title="시스템·리스크" />
-                <div className="brd-card-body">
-                  <MetricRow
-                    label="시스템 상태"
-                    value={health === 'green' ? '정상' : health === 'yellow' ? '주의' : '점검'}
-                    cls={health === 'green' ? 'brd-pos' : health === 'yellow' ? 'brd-warn' : 'brd-neg'}
-                  />
-                  <MetricRow label="JVM Heap" value={`${heapPct.toFixed(1)}%`} cls={heapPct > 85 ? 'brd-neg' : ''} note="≥85% 주의" />
-                  <MetricRow label="큐 적재" value={`${queuePct.toFixed(1)}%`} note="fill ratio" />
-                  <MetricRow label="큐 드롭" value={String(mon.queue.dropped)} cls={mon.queue.dropped > 0 ? 'brd-neg' : ''} />
-                  <MetricRow label="Ta4j 캐시" value={`${ta4jPct.toFixed(0)}%`} note={`${mon.memory.totalBars.toLocaleString()}봉`} />
-                  <MetricRow label="틱 정체" value={`${mon.staleMarkets.length}종목`} cls={mon.staleMarkets.length > 0 ? 'brd-warn' : ''} />
-                  <MetricRow label="주문 실패" value={String(mon.orders.failed)} cls={mon.orders.failed > 0 ? 'brd-neg' : ''} />
-                </div>
-              </div>
-
-              <div className="brd-card">
-                <SectionTitle icon="🔢" title="운영 통계" />
-                <div className="brd-card-body brd-card-body--center">
-                  <WinRateCircle
-                    winRate={healthPct}
-                    winning={mon.processes.filter(p => p.status === 'healthy').length}
-                    total={Math.max(mon.processes.length, 1)}
-                    centerLabel="헬스"
-                  />
-                  <div className="brd-trade-stats">
-                    <MetricRow label="관심종목" value={`${data.watchlistCount}개`} />
-                    <MetricRow label="전략 감시" value={`${data.monitoredMarkets}개`} />
-                    <MetricRow label="실거래 자동" value={app?.liveAutoTradeEnabled ? 'ON' : 'OFF'} />
-                    <MetricRow label="모의 자동" value={app?.paperAutoTradeEnabled ? 'ON' : 'OFF'} />
-                    <MetricRow label="FCM 푸시" value={data.fcm.pushEnabled ? (data.fcm.available ? '활성' : '미연결') : 'OFF'} />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* 2열: 수익 비교 + 리소스 */}
-            <div className="brd-row brd-row--2col">
-              <div className="brd-card">
-                <SectionTitle icon="📐" title="자산·수익 비교" />
-                <div className="brd-card-body">
-                  <CompareBar
-                    labelA="모의 수익률"
-                    valA={data.paper.totalReturnPct}
-                    labelB="실현 손익률"
-                    valB={data.paper.initialCapital > 0
-                      ? data.paper.realizedPnl / data.paper.initialCapital
-                      : 0}
-                    colorA={data.paper.totalReturnPct >= 0 ? 'var(--brd-pos)' : 'var(--brd-neg)'}
-                    colorB="var(--text3)"
-                  />
-                  <div className="brd-bench-summary">
-                    <div className="brd-bench-item">
-                      <span className="brd-bench-label">모의 자산</span>
-                      <span className="brd-bench-val">{fmtKrwShort(data.paper.totalAsset)}</span>
-                    </div>
-                    <div className="brd-bench-divider" />
-                    <div className="brd-bench-item">
-                      <span className="brd-bench-label">실거래 KRW</span>
-                      <span className="brd-bench-val">{fmtKrwShort(data.live.krwBalance)}</span>
-                    </div>
-                    <div className="brd-bench-divider" />
-                    <div className="brd-bench-item">
-                      <span className="brd-bench-label">평가 손익</span>
-                      <span className={`brd-bench-val ${colorCls(data.paper.unrealizedPnl)}`}>
-                        {wonFmt(data.paper.unrealizedPnl)}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="brd-card">
-                <SectionTitle icon="💻" title="리소스 사용" />
-                <div className="brd-card-body">
-                  <div className="brd-pnl-bar-section">
-                    <ResourceBar label="Heap" pctFill={heapPct} cls={heapPct > 85 ? 'brd-neg' : 'brd-pos'} />
-                    <ResourceBar label="Queue" pctFill={queuePct} cls={queuePct > 70 ? 'brd-neg' : 'brd-pos'} />
-                    <ResourceBar label="Ta4j" pctFill={ta4jPct} cls={ta4jPct > 90 ? 'brd-neg' : 'brd-pos'} />
-                    <ResourceBar
-                      label="WS부하"
-                      pctFill={Math.min(100, (mon.traffic.wsMessagesPerSec ?? 0) * 3)}
-                      cls="brd-pos"
-                    />
-                  </div>
-                  <div className="brd-pnl-net">
-                    <span className="brd-pnl-net-label">주문 처리</span>
-                    <span className="brd-pnl-net-val">
-                      {mon.orders.executed}건 · 실패 {mon.orders.failed}
                     </span>
                   </div>
-                  <MetricRow label="Tick Worker" value={mon.workers.active ? '가동' : '대기'} cls={mon.workers.active ? 'brd-pos' : 'brd-warn'} />
+                  <div className="gc-dash-kpi-block">
-                  <MetricRow label="처리 건수" value={mon.workers.processed.toLocaleString()} />
+                    <span className="gc-dash-kpi-label">실거래 KRW</span>
-                </div>
+                    <strong className="gc-dash-kpi-val">{fmtKrw(data.live.krwBalance)}</strong>
-              </div>
+                    <span className="gc-dash-kpi-sub">{data.live.configured ? '연동됨' : '미설정'}</span>
-            </div>
-
-            {/* 실시간 차트 */}
-            <div className="brd-row">
-              <div className="brd-card brd-card--full">
-                <SectionTitle icon="📈" title="실시간 트래픽" />
-                <div className="gc-dash-spark-row">
-                  <div className="gc-dash-spark-box">
-                    <DashboardSparkChart series={tickHistory.current} label="Tick 처리량" height={120} />
-                  </div>
-                  <div className="gc-dash-spark-box">
-                    <DashboardSparkChart series={wsHistory.current} label="WebSocket 수신" height={120} />
                   </div>
                 </div>
+                <ul className="gc-dash-kv">
+                  <li><span>모의 현금</span><strong>{fmtKrw(data.paper.cashBalance)}</strong></li>
+                  <li><span>보유 종목</span><strong>{data.paper.positions?.length ?? 0}</strong></li>
+                  <li><span>관심종목</span><strong>{data.watchlistCount}</strong></li>
+                  <li><span>전략 감시</span><strong>{data.monitoredMarkets}</strong></li>
+                </ul>
               </div>
-            </div>
+            </section>
 
-            {/* 프로세스 */}
+            <section className="gc-dash-card">
-            <div className="brd-row">
+              <h2 className="gc-dash-card-title">시스템 상태</h2>
-              <div className="brd-card brd-card--full">
+              <div className="gc-dash-card-inner gc-dash-card-inner--center">
-                <SectionTitle
+                <div className={`gc-traffic-light gc-traffic-light--${health}`} aria-label="시스템 상태">
-                  icon="⚙️"
+                  <span className="gc-traffic-bulb gc-traffic-bulb--r" />
-                  title="멀티스레드 프로세스"
+                  <span className="gc-traffic-bulb gc-traffic-bulb--y" />
-                  right={<span className="brd-section-count">{mon.processes.length}개</span>}
+                  <span className="gc-traffic-bulb gc-traffic-bulb--g" />
-                />
+                </div>
-                <div className="gc-dash-proc-mini-grid">
+                <p className="gc-traffic-caption">
-                  {mon.processes.map(p => <ProcessMini key={p.id} proc={p} />)}
+                  {health === 'green' ? '정상 운영' : health === 'yellow' ? '주의 필요' : '점검 필요'}
+                </p>
+              </div>
+            </section>
+
+            <section className="gc-dash-card">
+              <h2 className="gc-dash-card-title">리소스 인디케이터</h2>
+              <div className="gc-dash-card-inner">
+                <div className="gc-ind-grid">
+                  <DashboardIndicatorBar label="JVM Heap" pct={mon.jvm.heapPct} />
+                  <DashboardIndicatorBar label="Event Queue" pct={(mon.queue.fillRatio ?? 0) * 100} />
+                  <DashboardIndicatorBar label="Ta4j Cache" pct={ta4jPct} />
+                  <DashboardIndicatorBar label="WS Load" pct={Math.min(100, (mon.traffic.wsMessagesPerSec ?? 0) * 2)} />
                 </div>
               </div>
-            </div>
+            </section>
+
+            <section className="gc-dash-card gc-dash-card--compact">
+              <h2 className="gc-dash-card-title">매매 모드</h2>
+              <div className="gc-dash-card-inner">
+                <ul className="gc-dash-kv">
+                  <li><span>운영 모드</span><strong>{String(app?.tradingMode ?? '—')}</strong></li>
+                  <li><span>실거래 자동</span><strong>{app?.liveAutoTradeEnabled ? 'ON' : 'OFF'}</strong></li>
+                  <li><span>모의 자동</span><strong>{app?.paperAutoTradeEnabled ? 'ON' : 'OFF'}</strong></li>
+                  <li><span>FCM</span><strong>{data.fcm.pushEnabled ? (data.fcm.available ? '활성' : '미연결') : 'OFF'}</strong></li>
+                </ul>
+              </div>
+            </section>
+          </aside>
+
+          {/* ── CENTER ── */}
+          <main className="gc-dash-col gc-dash-col--center">
+            <section className="gc-dash-card gc-dash-card--wide">
+              <h2 className="gc-dash-card-title">[04] 데이터 파이프라인 · Ta4j 엔진</h2>
+              <div className="gc-dash-card-inner">
+                <div className="gc-infra-grid">
+                  <DashboardSegmentBar
+                    label="Ta4jStorage"
+                    valueLabel={`${mon.memory.markets}종목 · ${mon.memory.totalBars.toLocaleString()}봉`}
+                    pct={ta4jPct}
+                    tone="green"
+                  />
+                  <DashboardSegmentBar
+                    label="Event Queue"
+                    valueLabel={`${mon.queue.pending} / ${mon.queue.capacity?.toLocaleString() ?? '—'}`}
+                    pct={(mon.queue.fillRatio ?? 0) * 100}
+                    tone={mon.queue.fillRatio > 0.7 ? 'amber' : 'cyan'}
+                  />
+                  <DashboardSegmentBar
+                    label="Order Worker"
+                    valueLabel={`${mon.orders.executed} executed · ${mon.orders.failed} fail`}
+                    pct={Math.min(100, mon.orders.ratePerSecond * 10)}
+                    tone="cyan"
+                  />
+                  <DashboardSegmentBar
+                    label="Tick Worker"
+                    valueLabel={`${mon.workers.processed.toLocaleString()} processed`}
+                    pct={mon.workers.active ? 85 : 20}
+                    tone={mon.workers.active ? 'green' : 'red'}
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section className="gc-dash-card gc-dash-card--chart">
+              <div className="gc-dash-card-inner">
+                <DashboardSparkChart series={tickHistory.current} label="Tick 처리량 (실시간)" height={160} />
+              </div>
+            </section>
+
+            <section className="gc-dash-card gc-dash-card--wide">
+              <h2 className="gc-dash-card-title">멀티스레드 프로세스</h2>
+              <div className="gc-dash-card-inner">
+                <div className="gc-proc-grid">
+                  {mon.processes.map(p => <ProcessCard key={p.id} proc={p} />)}
+                </div>
+              </div>
+            </section>
 
             {mon.staleMarkets.length > 0 && (
-              <div className="brd-row">
+              <section className="gc-dash-card gc-dash-card--warn">
-                <div className="brd-card brd-card--full">
+                <h2 className="gc-dash-card-title">틱 정체 종목 ({mon.staleMarkets.length})</h2>
-                  <SectionTitle icon="⚠️" title={`틱 정체 종목 (${mon.staleMarkets.length})`} />
+                <div className="gc-dash-card-inner">
-                  <div className="gc-dash-stale-chips">
+                  <div className="gc-stale-chips">
-                    {mon.staleMarkets.slice(0, 12).map(s => (
+                    {mon.staleMarkets.slice(0, 8).map(s => (
-                      <button
+                      <button key={s.market} type="button" className="gc-stale-chip" onClick={() => onGoChart?.(s.market)}>
-                        key={s.market}
-                        type="button"
-                        className="gc-dash-stale-chip"
-                        onClick={() => onGoChart?.(s.market)}
-                      >
                         {s.market.replace('KRW-', '')} · {s.lastTickAgeSec}s
                       </button>
                     ))}
                   </div>
                 </div>
-              </div>
+              </section>
             )}
+          </main>
 
-            {/* 최근 시그널 */}
+          {/* ── RIGHT ── */}
-            <div className="brd-row">
+          <aside className="gc-dash-col gc-dash-col--right">
-              <div className="brd-card brd-card--full">
+            <section className="gc-dash-card gc-dash-card--glow">
-                <SectionTitle
+              <h2 className="gc-dash-card-title">성과 · 리스크</h2>
-                  icon="📋"
+              <div className="gc-dash-card-inner">
-                  title="최근 매매 시그널"
+                <div className="gc-gauge-grid">
-                  right={<span className="brd-section-count">{data.recentSignals.length}건</span>}
+                  <DashboardGauge
-                />
+                    label="JVM Heap"
+                    value={`${mon.jvm.heapPct}%`}
+                    pct={mon.jvm.heapPct}
+                    tone={mon.jvm.heapPct > 85 ? 'red' : 'green'}
+                  />
+                  <DashboardGauge
+                    label="Queue Fill"
+                    value={`${Math.round((mon.queue.fillRatio ?? 0) * 100)}%`}
+                    pct={(mon.queue.fillRatio ?? 0) * 100}
+                    tone={(mon.queue.fillRatio ?? 0) > 0.7 ? 'amber' : 'cyan'}
+                  />
+                  <DashboardGauge
+                    label="모의 수익률"
+                    value={fmtPct(data.paper.totalReturnPct)}
+                    pct={Math.min(100, Math.abs(data.paper.totalReturnPct) * 200)}
+                    max={100}
+                    tone={data.paper.totalReturnPct >= 0 ? 'green' : 'red'}
+                  />
+                  <DashboardGauge
+                    label="WS msg/s"
+                    value={String(mon.traffic.wsMessagesPerSec ?? 0)}
+                    pct={Math.min(100, (mon.traffic.wsMessagesPerSec ?? 0) * 3)}
+                    tone="cyan"
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section className="gc-dash-card gc-dash-card--chart-sm">
+              <div className="gc-dash-card-inner">
+                <DashboardSparkChart series={wsHistory.current} label="WebSocket 수신" height={80} />
+              </div>
+            </section>
+
+            <section className="gc-dash-card gc-dash-card--flex">
+              <h2 className="gc-dash-card-title">최근 시그널 · 체결</h2>
+              <div className="gc-dash-card-inner gc-dash-card-inner--flex">
                 {data.recentSignals.length === 0 ? (
-                  <div className="brd-empty-msg">최근 시그널이 없습니다.</div>
+                  <p className="gc-dash-muted">최근 시그널 없음</p>
                 ) : (
-                  <div className="brd-sig-scroll">
+                  <ul className="gc-signal-list">
-                    <table className="brd-sig-table">
+                    {data.recentSignals.slice(0, 12).map(s => {
-                      <thead>
+                      const buy = s.signalType === 'BUY';
-                        <tr>
+                      return (
-                          <th style={{ width: 36 }}>#</th>
+                        <li key={s.id} className={`gc-signal-item gc-signal-item--${buy ? 'buy' : 'sell'}`}>
-                          <th>시간</th>
+                          <span className="gc-signal-arrow">{buy ? '▲' : '▼'}</span>
-                          <th>종목</th>
+                          <button type="button" className="gc-signal-main" onClick={() => onGoChart?.(s.market)}>
-                          <th>구분</th>
+                            <strong>{buy ? 'BUY' : 'SELL'}</strong>
-                          <th style={{ textAlign: 'right' }}>가격</th>
+                            <span>{s.market.replace('KRW-', '')}</span>
-                        </tr>
+                            <span className="gc-signal-price">@ {s.price?.toLocaleString('ko-KR')}</span>
-                      </thead>
+                          </button>
-                      <tbody>
+                          <span className="gc-signal-time">{s.createdAt?.slice(11, 16) ?? ''}</span>
-                        {data.recentSignals.slice(0, 20).map((s: TradeSignalDto, i: number) => {
+                        </li>
-                          const buy = s.signalType === 'BUY';
+                      );
-                          return (
+                    })}
-                            <tr key={s.id} className={i % 2 === 0 ? 'brd-sig-even' : ''}>
+                  </ul>
-                              <td style={{ textAlign: 'center', color: 'var(--text3)' }}>{i + 1}</td>
-                              <td style={{ fontVariantNumeric: 'tabular-nums' }}>
-                                {s.createdAt?.slice(0, 16).replace('T', ' ') ?? '—'}
-                              </td>
-                              <td>
-                                <button
-                                  type="button"
-                                  className="brd-sig-market-btn"
-                                  onClick={() => onGoChart?.(s.market)}
-                                >
-                                  {s.market.replace('KRW-', '')}
-                                </button>
-                              </td>
-                              <td>
-                                <span className={`brd-sig-badge ${buy ? 'brd-sig-buy' : 'brd-sig-sell'}`}>
-                                  {SIG_LABEL[s.signalType] ?? s.signalType}
-                                </span>
-                              </td>
-                              <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>
-                                {Math.round(s.price).toLocaleString()}
-                              </td>
-                            </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
                 )}
               </div>
-            </div>
+            </section>
-          </div>
+          </aside>
         </div>
       )}
     </div>

frontend/src/styles/dashboardCommand.css

@@ -105,9 +105,10 @@
   min-height: 0;
   display: grid;
   grid-template-columns: minmax(220px, 24%) minmax(0, 1fr) minmax(240px, 26%);
-  gap: 10px;
+  gap: 12px;
-  padding: 10px 12px 12px;
+  padding: 12px 14px 14px;
   overflow: hidden;
+  align-items: stretch;
 }
 
 .gc-dash-col {
@@ -121,11 +122,15 @@
 
 .gc-dash-card {
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
   border: 1px solid color-mix(in srgb, #22d3ee 18%, var(--se-border));
-  border-radius: 12px;
+  border-radius: 10px;
   background: color-mix(in srgb, var(--se-bg-elevated) 92%, #0a1628);
-  padding: 12px;
+  padding: 0;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 color-mix(in srgb, #22d3ee 6%, transparent);
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 color-mix(in srgb, #22d3ee 6%, transparent);
 }
 
 .gc-dash-card--glow {
@@ -139,11 +144,11 @@
 
 .gc-dash-card--wide { /* grid child */ }
 
-.gc-dash-card--chart { padding: 8px 10px 4px; }
+.gc-dash-card--chart .gc-dash-card-inner { padding: 8px 12px 6px; }
 
-.gc-dash-card--chart-sm { padding: 6px 8px 2px; }
+.gc-dash-card--chart-sm .gc-dash-card-inner { padding: 6px 12px 4px; }
 
-.gc-dash-card--compact { padding: 10px; }
+.gc-dash-card--compact .gc-dash-card-inner { padding: 10px 12px; }
 
 .gc-dash-card--flex {
   flex: 1;
@@ -153,12 +158,38 @@
 }
 
 .gc-dash-card-title {
-  margin: 0 0 10px;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 9px 12px 8px;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--se-gold, #e6c200);
   text-transform: uppercase;
+  border-bottom: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
+  background: color-mix(in srgb, var(--se-bg) 40%, transparent);
+}
+
+/* 카드 본문 — 패딩·정렬 통일 */
+.gc-dash-card-inner {
+  flex: 1;
+  min-height: 0;
+  padding: 10px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.gc-dash-card-inner--center {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.gc-dash-card-inner--flex {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* ── Portfolio KPI ── */
@@ -167,11 +198,16 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .gc-dash-kpi-block {
-  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-height: 72px;
+  padding: 10px 10px 8px;
   border-radius: 8px;
   border: 1px solid var(--se-border);
   background: color-mix(in srgb, var(--se-bg) 60%, transparent);
@@ -181,7 +217,8 @@
   display: block;
   font-size: 0.62rem;
   color: var(--se-text-muted);
-  margin-bottom: 4px;
+  margin-bottom: 6px;
+  line-height: 1.2;
 }
 
 .gc-dash-kpi-val {
@@ -189,13 +226,17 @@
   font-size: 1rem;
   font-weight: 800;
   color: var(--se-text);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
 }
 
 .gc-dash-kpi-sub {
   display: block;
   font-size: 0.68rem;
-  margin-top: 2px;
+  margin-top: auto;
+  padding-top: 4px;
   color: var(--se-text-muted);
+  line-height: 1.2;
 }
 
 .gc-dash-kpi-sub.up { color: #34d399; }
@@ -208,19 +249,30 @@
 }
 
 .gc-dash-kv li {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: 1fr auto;
-  align-items: baseline;
+  align-items: center;
-  padding: 5px 0;
+  gap: 12px;
+  padding: 6px 0;
   font-size: 0.72rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--se-border) 60%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--se-border) 50%, transparent);
+  min-height: 28px;
 }
 
 .gc-dash-kv li:last-child { border-bottom: none; }
 
-.gc-dash-kv span { color: var(--se-text-muted); }
+.gc-dash-kv span {
+  color: var(--se-text-muted);
+  text-align: left;
+}
 
-.gc-dash-kv strong { color: var(--se-text); font-weight: 600; }
+.gc-dash-kv strong {
+  color: var(--se-text);
+  font-weight: 600;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
 
 /* ── Traffic light ── */
 
@@ -325,9 +377,10 @@
 }
 
 .gc-seg-bar-head {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: baseline;
+  gap: 8px;
   margin-bottom: 6px;
 }
 
@@ -340,6 +393,9 @@
 .gc-seg-bar-val {
   font-size: 0.62rem;
   color: var(--se-text-muted);
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
 
 .gc-seg-bar-track {
@@ -383,7 +439,8 @@
 .gc-gauge-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 10px 8px;
+  align-items: start;
 }
 
 .gc-gauge {
@@ -420,14 +477,18 @@
 
 .gc-proc-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
   gap: 8px;
+  align-items: stretch;
 }
 
 .gc-proc {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
   border: 1px solid var(--se-border);
   border-radius: 8px;
-  padding: 10px;
+  padding: 10px 10px 8px;
   background: color-mix(in srgb, var(--se-bg) 70%, transparent);
 }
 
@@ -475,13 +536,30 @@
 }
 
 .gc-proc-metrics li {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: minmax(0, 1fr) auto;
-  padding: 2px 0;
+  gap: 8px;
+  align-items: baseline;
+  padding: 3px 0;
   color: var(--se-text-muted);
+  border-bottom: 1px solid color-mix(in srgb, var(--se-border) 35%, transparent);
 }
 
-.gc-proc-metrics strong { color: var(--se-text); font-weight: 500; }
+.gc-proc-metrics li:last-child { border-bottom: none; }
+
+.gc-proc-metrics span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gc-proc-metrics strong {
+  color: var(--se-text);
+  font-weight: 500;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
 
 /* ── Signal list ── */
 
@@ -496,28 +574,33 @@
 
 .gc-signal-item {
   display: grid;
-  grid-template-columns: 20px 1fr auto;
+  grid-template-columns: 22px minmax(0, 1fr) 42px;
-  gap: 6px;
+  gap: 8px;
   align-items: center;
-  padding: 7px 6px;
+  padding: 8px 4px;
   border-bottom: 1px solid color-mix(in srgb, var(--se-border) 50%, transparent);
   font-size: 0.68rem;
 }
 
+.gc-signal-item:nth-child(even) {
+  background: color-mix(in srgb, var(--se-bg) 35%, transparent);
+}
+
 .gc-signal-item--buy .gc-signal-arrow { color: var(--gc-trade-buy); }
 .gc-signal-item--sell .gc-signal-arrow { color: var(--gc-trade-sell); }
 
 .gc-signal-main {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 4px 8px;
+  gap: 6px 8px;
-  align-items: baseline;
+  align-items: center;
   background: none;
   border: none;
   padding: 0;
   color: var(--se-text);
   cursor: pointer;
   text-align: left;
+  min-width: 0;
 }
 
 .gc-signal-main strong {
@@ -533,6 +616,9 @@
 .gc-signal-time {
   font-size: 0.58rem;
   color: var(--se-text-dim);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .gc-dash-muted {

frontend/src/styles/dashboardReport.css

@@ -234,3 +234,60 @@
 .gc-dash-stale-chip:hover {
   background: #fef3c7;
 }
+
+/* 레포트형 헤더 KPI (라벨·수치 한 줄) */
+.gc-dash-report-sheet .brd-dash-header-kpi--report {
+  align-items: center !important;
+}
+
+.gc-dash-report-sheet .brd-dash-big-kpi--report {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  align-items: baseline !important;
+  gap: 5px !important;
+  white-space: nowrap !important;
+  min-width: 4.8rem;
+}
+
+.gc-dash-report-sheet .brd-dash-big-kpi--report:last-child {
+  min-width: 7.5rem;
+}
+
+.gc-dash-report-sheet .brd-dash-big-kpi--report .brd-dash-big-label {
+  order: -1;
+  margin-top: 0 !important;
+  font-size: 0.62rem !important;
+  color: #6b7280;
+}
+
+.gc-dash-report-sheet .brd-dash-big-val {
+  font-size: 1.05rem !important;
+  font-weight: 800 !important;
+}
+
+.gc-dash-report-sheet .brd-sig-market-btn {
+  border: none;
+  background: none;
+  padding: 0;
+  font-size: inherit;
+  font-weight: 600;
+  color: #1d4ed8;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.gc-dash-report-sheet .brd-sig-market-btn:hover {
+  color: #1e40af;
+}
+
+.gc-dash-report-sheet .gc-spark-chart-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.68rem;
+  color: #6b7280;
+  margin-bottom: 4px;
+}
+.gc-dash-report-sheet .gc-spark-chart-head strong {
+  color: #111827;
+  font-weight: 700;
+}