투자관리 수정

frontend/src/components/PaperTradingPage.tsx

@@ -297,10 +297,10 @@ const PaperTradingPage: React.FC<Props> = ({
           <div className="ptd-invest-metrics">
             <PaperAssetTrendChart refreshKey={dataRefreshKey} />
             <div className="ptd-metrics-grid">
-              <MetricCard icon="📉" title="MDD" value={`${metrics.mddPct.toFixed(2)}%`} sub="최대 낙폭" tone="down" />
-              <MetricCard icon="📊" title="Sharpe Ratio" value={metrics.sharpeRatio.toFixed(2)} sub="위험 대비 수익" tone="up" />
-              <MetricCard icon="🏆" title="Win Rate" value={`${metrics.winRatePct.toFixed(0)}%`} sub="승률" tone="up" />
-              <MetricCard icon="🛡" title="Profit Factor" value={metrics.profitFactor.toFixed(2)} sub="총이익/총손실" tone="up" />
+              <MetricCard label="MDD" value={`${metrics.mddPct.toFixed(2)}%`} tone="down" />
+              <MetricCard label="Sharpe Ratio" value={metrics.sharpeRatio.toFixed(2)} tone="up" />
+              <MetricCard label="Win Rate" value={`${metrics.winRatePct.toFixed(0)}%`} tone="up" />
+              <MetricCard label="Profit Factor" value={metrics.profitFactor.toFixed(2)} tone="up" />
             </div>
           </div>
         </div>
@@ -375,17 +375,13 @@ const PaperTradingPage: React.FC<Props> = ({
   );
 };
 
-function MetricCard({ icon, title, value, sub, tone }: {
-  icon: string; title: string; value: string; sub: string; tone: 'up' | 'down';
+function MetricCard({ label, value, tone }: {
+  label: string; value: string; tone: 'up' | 'down';
 }) {
   return (
     <div className={`ptd-metric ptd-metric--${tone}`}>
-      <span className="ptd-metric-icon">{icon}</span>
-      <div>
-        <div className="ptd-metric-title">{title}</div>
-        <div className="ptd-metric-value">{value}</div>
-        <div className="ptd-metric-sub">{sub}</div>
-      </div>
+      <span className="ptd-metric-label">{label}</span>
+      <span className="ptd-metric-value">{value}</span>
     </div>
   );
 }

frontend/src/components/SplashScreen.tsx

@@ -1,9 +1,9 @@
 /**
- * 서비스 진입 스플래시 — 글래스모피즘 로그인
+ * 서비스 진입 스플래시 — 참조 컨셉 로그인
  */
 import React, { useState } from 'react';
 import { loginUser, type LoginResponse } from '../utils/backendApi';
-import SplashGradientBackdrop from './splash/SplashGradientBackdrop';
+import SplashConceptBackdrop from './splash/SplashConceptBackdrop';
 import '../styles/splashScreen.css';
 
 const DEFAULT_USERNAME = 'admin';
@@ -37,10 +37,10 @@ const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
 
   return (
     <div className="splash">
-      <SplashGradientBackdrop />
+      <SplashConceptBackdrop />
 
       <div className="splash-center">
-        <div className="splash-glass">
+        <div className="splash-card">
           <h1 className="splash-brand">GoldenChart</h1>
 
           <form className="splash-form" onSubmit={submitLogin}>
@@ -51,7 +51,7 @@ const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
               value={username}
               onChange={e => setUsername(e.target.value)}
               disabled={loading}
-              placeholder="ID"
+              aria-label="아이디"
             />
             <input
               className="splash-input"
@@ -60,7 +60,7 @@ const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
               value={password}
               onChange={e => setPassword(e.target.value)}
               disabled={loading}
-              placeholder="••••••••"
+              aria-label="비밀번호"
             />
             {error && <p className="splash-error">{error}</p>}
             <button type="submit" className="splash-login-btn" disabled={loading}>
@@ -69,7 +69,7 @@ const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
           </form>
 
           <p className="splash-version">
-            버전: {APP_VERSION} | Core Engine: Ta4j &amp; Spring Boot
+            ver. {APP_VERSION} | Core Engine: Ta4j &amp; Spring Boot
           </p>
         </div>
 

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>
   );
 };

frontend/src/components/splash/SplashConceptBackdrop.tsx

@@ -0,0 +1,65 @@
+/**
+ * 로그인 스플래시 — 참조 컨셉: 은은한 그라데이션 + 흐릿한 대각선 폰 목업
+ * (이미지 파일 미사용, CSS/SVG만)
+ */
+import React from 'react';
+import SplashPhoneMockup, { type SplashPhoneVariant } from './SplashPhoneMockup';
+
+interface PhonePlacement {
+  variant: SplashPhoneVariant;
+  left: string;
+  top: string;
+  rotateY: number;
+  rotateZ: number;
+  scale: number;
+  opacity: number;
+}
+
+/** 중앙에서 우상단·좌하단으로 퍼지는 목업 배치 */
+const PHONES: PhonePlacement[] = [
+  { variant: 'chart', left: '4%', top: '68%', rotateY: 22, rotateZ: -14, scale: 0.72, opacity: 0.14 },
+  { variant: 'watchlist', left: '11%', top: '54%', rotateY: 18, rotateZ: -10, scale: 0.78, opacity: 0.16 },
+  { variant: 'orderbook', left: '18%', top: '40%', rotateY: 14, rotateZ: -6, scale: 0.84, opacity: 0.18 },
+  { variant: 'trade', left: '52%', top: '38%', rotateY: -8, rotateZ: 4, scale: 0.88, opacity: 0.2 },
+  { variant: 'chart', left: '62%', top: '26%', rotateY: -14, rotateZ: 8, scale: 0.92, opacity: 0.22 },
+  { variant: 'watchlist', left: '72%', top: '14%', rotateY: -18, rotateZ: 12, scale: 0.96, opacity: 0.2 },
+  { variant: 'orderbook', left: '82%', top: '4%', rotateY: -22, rotateZ: 14, scale: 1, opacity: 0.17 },
+  { variant: 'chart', left: '90%', top: '-2%', rotateY: -26, rotateZ: 16, scale: 0.88, opacity: 0.12 },
+];
+
+const SplashConceptBackdrop: React.FC = () => (
+  <div className="splash-backdrop" aria-hidden>
+    <div className="splash-backdrop__base" />
+
+    <div className="splash-backdrop__aurora">
+      <span className="splash-backdrop__aurora--teal" />
+      <span className="splash-backdrop__aurora--gold" />
+    </div>
+
+    <div className="splash-backdrop__mesh" />
+
+    <div className="splash-backdrop__phones">
+      <div className="splash-backdrop__phones-blur">
+        {PHONES.map((p, i) => (
+          <SplashPhoneMockup
+            key={`${p.variant}-${i}`}
+            variant={p.variant}
+            style={{
+              left: p.left,
+              top: p.top,
+              opacity: p.opacity,
+              transform: `perspective(900px) rotateY(${p.rotateY}deg) rotateZ(${p.rotateZ}deg) scale(${p.scale})`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+
+    <div className="splash-backdrop__flow-glow" />
+    <div className="splash-backdrop__grain" />
+    <div className="splash-backdrop__vignette" />
+    <div className="splash-backdrop__spotlight" />
+  </div>
+);
+
+export default SplashConceptBackdrop;

frontend/src/components/splash/SplashPhoneMockup.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+
+export type SplashPhoneVariant = 'chart' | 'orderbook' | 'watchlist' | 'trade';
+
+interface Props {
+  variant: SplashPhoneVariant;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const MiniChart: React.FC = () => (
+  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
+    <rect width="120" height="200" fill="#0a0e14" />
+    {[28, 52, 76, 100, 124, 148, 172].map(y => (
+      <line key={y} x1="0" y1={y} x2="120" y2={y} stroke="rgba(255,255,255,0.04)" />
+    ))}
+    {[
+      { x: 12, h: 90, l: 118, up: true },
+      { x: 22, h: 82, l: 112, up: true },
+      { x: 32, h: 95, l: 125, up: false },
+      { x: 42, h: 78, l: 108, up: true },
+      { x: 52, h: 70, l: 100, up: true },
+      { x: 62, h: 88, l: 118, up: false },
+      { x: 72, h: 65, l: 95, up: true },
+      { x: 82, h: 58, l: 88, up: true },
+      { x: 92, h: 72, l: 102, up: true },
+      { x: 102, h: 48, l: 78, up: true },
+    ].map((c, i) => (
+      <g key={i}>
+        <line x1={c.x} y1={c.h} x2={c.x} y2={c.l} stroke="rgba(255,255,255,0.2)" />
+        <rect
+          x={c.x - 4}
+          y={Math.min(c.h, c.l)}
+          width={8}
+          height={Math.abs(c.l - c.h) || 6}
+          fill={c.up ? 'rgba(34,197,94,0.55)' : 'rgba(239,68,68,0.5)'}
+          rx="1"
+        />
+      </g>
+    ))}
+    <path
+      d="M8,130 Q40,110 70,95 T108,55"
+      fill="none"
+      stroke="rgba(250,204,21,0.35)"
+      strokeWidth="1.2"
+    />
+  </svg>
+);
+
+const MiniOrderbook: React.FC = () => (
+  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
+    <rect width="120" height="200" fill="#0a0e14" />
+    {Array.from({ length: 8 }, (_, i) => {
+      const y = 24 + i * 20;
+      const askW = 18 + (i % 4) * 8;
+      const bidW = 22 + ((i + 2) % 4) * 6;
+      return (
+        <g key={i}>
+          <rect x={60 - askW} y={y} width={askW} height={12} fill="rgba(239,68,68,0.35)" rx="2" />
+          <rect x={60} y={y} width={bidW} height={12} fill="rgba(34,197,94,0.32)" rx="2" />
+        </g>
+      );
+    })}
+    <rect x="20" y="88" width="80" height="22" fill="rgba(212,175,55,0.12)" rx="4" />
+  </svg>
+);
+
+const MiniWatchlist: React.FC = () => (
+  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
+    <rect width="120" height="200" fill="#0a0e14" />
+    {[0, 1, 2, 3, 4, 5].map(i => (
+      <g key={i}>
+        <rect x="10" y={18 + i * 28} width="100" height="22" fill="rgba(255,255,255,0.04)" rx="4" />
+        <text x="16" y={33 + i * 28} fill="rgba(255,255,255,0.2)" fontSize="7" fontFamily="monospace">
+          005930
+        </text>
+        <text
+          x="104"
+          y={33 + i * 28}
+          fill={i % 2 === 0 ? 'rgba(34,197,94,0.45)' : 'rgba(239,68,68,0.4)'}
+          fontSize="7"
+          textAnchor="end"
+          fontFamily="monospace"
+        >
+          {i % 2 === 0 ? '+1.2%' : '-0.4%'}
+        </text>
+      </g>
+    ))}
+  </svg>
+);
+
+const MiniTrade: React.FC = () => (
+  <svg viewBox="0 0 120 200" className="splash-phone__svg" aria-hidden>
+    <rect width="120" height="200" fill="#0a0e14" />
+    <path
+      d="M8,120 Q45,95 75,80 T108,50"
+      fill="none"
+      stroke="rgba(34,197,94,0.3)"
+      strokeWidth="1.2"
+    />
+    {[
+      { x: 20, h: 100, l: 118, up: true },
+      { x: 40, h: 85, l: 105, up: true },
+      { x: 60, h: 92, l: 112, up: false },
+      { x: 80, h: 72, l: 95, up: true },
+    ].map((c, i) => (
+      <rect
+        key={i}
+        x={c.x - 3}
+        y={Math.min(c.h, c.l)}
+        width={6}
+        height={Math.abs(c.l - c.h) || 5}
+        fill={c.up ? 'rgba(34,197,94,0.5)' : 'rgba(239,68,68,0.45)'}
+      />
+    ))}
+    <rect x="10" y="158" width="46" height="28" fill="rgba(34,197,94,0.4)" rx="6" />
+    <rect x="64" y="158" width="46" height="28" fill="rgba(239,68,68,0.35)" rx="6" />
+  </svg>
+);
+
+const SCREENS: Record<SplashPhoneVariant, React.FC> = {
+  chart: MiniChart,
+  orderbook: MiniOrderbook,
+  watchlist: MiniWatchlist,
+  trade: MiniTrade,
+};
+
+const SplashPhoneMockup: React.FC<Props> = ({ variant, style, className = '' }) => {
+  const Screen = SCREENS[variant];
+  return (
+    <div className={`splash-phone ${className}`.trim()} style={style}>
+      <div className="splash-phone__frame">
+        <div className="splash-phone__notch" />
+        <div className="splash-phone__screen">
+          <Screen />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SplashPhoneMockup;