실시간 차트 우측 상단 주가, 등락율 현재가로 반영

frontend/src/App.tsx

@@ -100,6 +100,11 @@ import VerificationBoardPage from './components/VerificationBoardPage';
 import DashboardPage from './components/DashboardPage';
 import { loadPaperSummary, resetPaperAccount, loadActiveLiveStrategySettings, expandLiveStrategySubscriptions } from './utils/backendApi';
 import ChartLegendBar from './components/ChartLegendBar';
+import {
+  formatChartLiveChangePct,
+  formatChartLivePrice,
+  resolveChartLiveQuote,
+} from './utils/chartLiveQuote';
 import RightSidePanel from './components/RightSidePanel';
 import {
   type BacktestSettingsDto,
@@ -1655,12 +1660,12 @@ function App() {
     : (bars.length > 0 ? bars[bars.length - 1] : null);
   /** 크로스헤어 OHLC·지표 범례 */
   const hoverBar = legend ?? lastKnownBar;
-  /** 종목명 옆 시세 — 실시간 현재가만 */
+  /** 종목명 옆·우측 상단 시세 — 실시간 티커/최신 봉 (크로스헤어 무관) */
   const quoteBar = lastKnownBar;
-  const isUp = quoteBar ? quoteBar.close >= quoteBar.open : true;
-  const prevClose = bars.length > 1 ? bars[bars.length - 2].close : quoteBar?.open ?? 0;
-  const dailyChange    = quoteBar ? quoteBar.close - prevClose : 0;
-  const dailyChangePct = prevClose > 0 ? dailyChange / prevClose * 100 : 0;
+  const liveQuote = useMemo(
+    () => resolveChartLiveQuote(chartTicker, quoteBar, bars),
+    [chartTicker, quoteBar, bars],
+  );
 
   const openNotificationsPage = useCallback(() => guardedSetMenuPage('notifications'), [guardedSetMenuPage]);
 
@@ -2074,15 +2079,20 @@ function App() {
           <span className="upbit-market">{getKoreanName(symbol)} <span style={{opacity:0.5, fontSize:'11px'}}>{symbol}</span></span>
           {isLoading && <span className="upbit-loading">데이터 로딩 중...</span>}
           {error && <span className="upbit-error">⚠ {error}</span>}
-          {!isLoading && !error && quoteBar && (
-            <>
-              <span className="upbit-price" style={{ color: isUp ? 'var(--up)' : 'var(--down)' }}>
-                {quoteBar.close.toLocaleString()} KRW
+          {!isLoading && !error && liveQuote.price != null && (
+            <div className="upbit-quote-group">
+              <span
+                className="upbit-price"
+                style={{ color: liveQuote.isUp ? 'var(--up)' : 'var(--down)' }}
+              >
+                {formatChartLivePrice(liveQuote.price)}
               </span>
-              <span className={`upbit-change ${isUp ? 'up' : 'down'}`}>
-                {isUp ? '▲' : '▼'} {Math.abs(dailyChangePct).toFixed(2)}%
-              </span>
-            </>
+              {liveQuote.changePct != null && (
+                <span className={`upbit-change ${liveQuote.isUp ? 'up' : 'down'}`}>
+                  {formatChartLiveChangePct(liveQuote.changePct)}
+                </span>
+              )}
+            </div>
           )}
           <span className="upbit-hint">💡 업비트 마켓: KRW-BTC, KRW-ETH, KRW-XRP ...</span>
         </div>
@@ -2196,6 +2206,7 @@ function App() {
                 chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                 chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                 displayTimezone={displayTimezone}
+                marketTickers={marketTickers}
                 compactMode
                 chartVisible={chartVisible}
               />
@@ -2235,6 +2246,7 @@ function App() {
                     chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                     chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                     displayTimezone={displayTimezone}
+                    marketTickers={marketTickers}
                     compactMode
                     chartVisible={chartVisible}
                   />
@@ -2253,10 +2265,7 @@ function App() {
             wsStatus={wsStatus}
             mode={mode}
             currentBar={hoverBar}
-            quoteBar={quoteBar}
-            isUp={isUp}
-            dailyChange={dailyChange}
-            dailyChangePct={dailyChangePct}
+            liveQuote={liveQuote}
             indicators={indicators}
             legend={legend}
           />
@@ -2626,7 +2635,7 @@ function App() {
       )}
       {showAlert && (
         <AlertManager
-          alerts={alerts} currentPrice={quoteBar?.close ?? 0}
+          alerts={alerts} currentPrice={liveQuote.price ?? quoteBar?.close ?? 0}
           onAdd={(price, label) => { managerRef.current?.addAlert(price, label); setAlerts(prev => [...prev, { price, label }]); }}
           onRemove={price => { managerRef.current?.removeAlert(price); setAlerts(prev => prev.filter(a => Math.abs(a.price - price) > 0.0001)); }}
           onClose={() => setShowAlert(false)}