투자관리 수정

frontend/src/components/paper/PaperAssetTrendChart.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { loadPaperDailySnapshots, type PaperDailySnapshotDto } from '../../utils/backendApi';
 import { fmtKrw } from '../TradeOrderPanel';
 
+const EMPTY_HINT = '일별 스냅샷이 쌓이면 자산 추이가 표시됩니다.';
+
 interface Props {
   refreshKey?: number;
 }
@@ -34,27 +36,32 @@ const PaperAssetTrendChart: React.FC<Props> = ({ refreshKey = 0 }) => {
     return { path: `M ${pts.join(' L ')}`, min: mn, max: mx, last: vals[vals.length - 1] };
   }, [snapshots]);
 
-  if (snapshots.length < 2) {
-    return (
-      <div className="ptd-asset-trend ptd-asset-trend--empty">
-        <span className="ptd-muted">일별 스냅샷이 쌓이면 자산 추이가 표시됩니다.</span>
-      </div>
-    );
-  }
+  const hasChart = snapshots.length >= 2;
 
   return (
     <div className="ptd-asset-trend">
-      <div className="ptd-asset-trend-head">
-        <span>자산 추이</span>
-        <span className="ptd-asset-trend-last">{fmtKrw(last)}</span>
-      </div>
-      <svg viewBox="0 0 280 48" className="ptd-asset-trend-svg" preserveAspectRatio="none">
-        <path d={path} fill="none" stroke="var(--gc-trade-buy, #ef5350)" strokeWidth="1.5" />
-      </svg>
-      <div className="ptd-asset-trend-range">
-        <span>{fmtKrw(min)}</span>
-        <span>{fmtKrw(max)}</span>
+      <div className="ptd-asset-trend-titlebar">
+        <div className="ptd-asset-trend-titlegroup">
+          <span className="ptd-asset-trend-title">자산추이</span>
+          {!hasChart && (
+            <span className="ptd-asset-trend-hint">{EMPTY_HINT}</span>
+          )}
+        </div>
+        {hasChart && (
+          <span className="ptd-asset-trend-last">{fmtKrw(last)}</span>
+        )}
       </div>
+      {hasChart && (
+        <div className="ptd-asset-trend-body">
+          <svg viewBox="0 0 280 48" className="ptd-asset-trend-svg" preserveAspectRatio="none">
+            <path d={path} fill="none" stroke="var(--gc-trade-buy, #ef5350)" strokeWidth="1.5" />
+          </svg>
+          <div className="ptd-asset-trend-range">
+            <span>{fmtKrw(min)}</span>
+            <span>{fmtKrw(max)}</span>
+          </div>
+        </div>
+      )}
     </div>
   );
 };