매매 시그널 디테일 팝업 기능 적용

frontend/src/components/analysisReport/LiveTradeTimelineViews.tsx

@@ -10,6 +10,7 @@ import {
 import { formatSignalPrice } from '../../utils/tradeSignalDisplay';
 import { resolveVirtualTargetNames } from '../../utils/virtualTargetNames';
 import TimelineBarTimeBox, { eventToBarTimeSec } from './TimelineBarTimeBox';
+import TimelineSignalCardShell from './TimelineSignalCardShell';
 import type { Timeframe } from '../../types';
 
 export type LiveTimelineViewMode = 'list' | 'split' | 'axis';
@@ -70,9 +71,10 @@ export const TimelineEventBody: React.FC<EventBodyProps> = ({ ev, compact = fals
 interface ListViewProps {
   events: LiveTimelineEvent[];
   timeframe: Timeframe;
+  onSignalDetail?: (ev: LiveTimelineEvent) => void;
 }
 
-export const TimelineListView: React.FC<ListViewProps> = ({ events, timeframe }) => (
+export const TimelineListView: React.FC<ListViewProps> = ({ events, timeframe, onSignalDetail }) => (
   <div className="btd-timeline arp-timeline-scroll arp-timeline-scroll--list" aria-label="거래 이력 타임라인">
     <div className="btd-timeline-line" aria-hidden />
     {events.map(ev => {
@@ -97,9 +99,13 @@ export const TimelineListView: React.FC<ListViewProps> = ({ events, timeframe })
             variant="compact"
             className="arp-timeline-bar-time--list-node"
           />
-          <div className="btd-timeline-card">
+          <TimelineSignalCardShell
+            ev={ev}
+            className="btd-timeline-card"
+            onSignalDetail={onSignalDetail}
+          >
             <TimelineEventBody ev={ev} />
-          </div>
+          </TimelineSignalCardShell>
         </article>
       );
     })}
@@ -109,12 +115,14 @@ export const TimelineListView: React.FC<ListViewProps> = ({ events, timeframe })
 interface SplitViewProps {
   events: LiveTimelineEvent[];
   timeframe: Timeframe;
+  onSignalDetail?: (ev: LiveTimelineEvent) => void;
 }
 
-export const TimelineSplitView: React.FC<SplitViewProps> = ({ events, timeframe }) => (
+export const TimelineSplitView: React.FC<SplitViewProps> = ({ events, timeframe, onSignalDetail }) => (
   <div className="arp-timeline-split-scroll" aria-label="좌우 분할 거래 이력 타임라인">
-    <div className="arp-timeline-split-axis" aria-hidden />
-    {events.map(ev => {
+    <div className="arp-timeline-split-track">
+      <div className="arp-timeline-split-axis" aria-hidden />
+      {events.map(ev => {
       const isBuy = ev.side === 'BUY';
       const kCls = kindClass(ev.kind);
       const sCls = sideClass(ev.side);
@@ -127,9 +135,13 @@ export const TimelineSplitView: React.FC<SplitViewProps> = ({ events, timeframe
       ].join(' ');
 
       const card = (
-        <article className={cardCls}>
+        <TimelineSignalCardShell
+          ev={ev}
+          className={cardCls}
+          onSignalDetail={onSignalDetail}
+        >
           <TimelineEventBody ev={ev} compact />
-        </article>
+        </TimelineSignalCardShell>
       );
 
       return (
@@ -171,5 +183,6 @@ export const TimelineSplitView: React.FC<SplitViewProps> = ({ events, timeframe
         </div>
       );
     })}
+    </div>
   </div>
-);
+);