가상투자 종목카드박스 레이아웃 수정

frontend/src/components/virtual/VirtualTargetCard.tsx

@@ -5,6 +5,9 @@ import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSn
 import { useLiveReceiveFlash } from '../../hooks/useLiveReceiveFlash';
 import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
 import { buildConditionMetrics, resolveVirtualTradeTiming } from '../../utils/virtualSignalMetrics';
+import { candleTypeToTimeframe } from '../../utils/strategyToChartIndicators';
+import { normalizeStartCandleType } from '../../utils/strategyStartNodes';
+import type { Timeframe } from '../../types';
 import VirtualLiveBadge from './VirtualLiveBadge';
 import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
 import type { VirtualCardViewMode } from '../../utils/virtualTradingStorage';
@@ -13,6 +16,7 @@ import VirtualTargetSignalPanel from './VirtualTargetSignalPanel';
 import type { Theme } from '../../types';
 import type { TickerData } from '../../hooks/useMarketTicker';
 import VirtualTargetQuote from './VirtualTargetQuote';
+import VirtualTargetCardFoot from './VirtualTargetCardFoot';
 
 export type VirtualCardDisplayMode = 'signal' | 'chart';
 
@@ -23,6 +27,8 @@ interface Props {
   strategyId: number | null;
   globalStrategyId: number | null;
   onStrategyChange?: (strategyId: number | null) => void;
+  candleType: string;
+  onCandleTypeChange?: (candleType: string) => void;
   snapshot: VirtualIndicatorSnapshot | undefined;
   running: boolean;
   liveStatus?: VirtualLiveStatus;
@@ -47,6 +53,8 @@ const VirtualTargetCard: React.FC<Props> = ({
   strategyId,
   globalStrategyId,
   onStrategyChange,
+  candleType,
+  onCandleTypeChange,
   snapshot,
   running,
   liveStatus = 'idle',
@@ -65,7 +73,6 @@ const VirtualTargetCard: React.FC<Props> = ({
 }) => {
   const ko = getKoreanName(market);
   const sym = market.replace(/^KRW-/, '');
-  const tf = snapshot?.timeframe ?? '—';
   const rows = snapshot?.rows ?? [];
 
   const metrics = useMemo(() => buildConditionMetrics(rows), [rows]);
@@ -75,6 +82,8 @@ const VirtualTargetCard: React.FC<Props> = ({
 
   const isDetail = viewMode === 'detail';
   const isChart = displayMode === 'chart';
+  const evalCandleType = normalizeStartCandleType(candleType);
+  const chartTimeframe = candleTypeToTimeframe(evalCandleType) as Timeframe;
 
   const receiveSignal = useMemo(() => {
     if (!running) return null;
@@ -113,23 +122,6 @@ const VirtualTargetCard: React.FC<Props> = ({
             <span className="vtd-card-ko">{ko}</span>
             <span className="vtd-card-sym">{sym}</span>
           </div>
-          <label className="vtd-card-strategy-field" onClick={e => e.stopPropagation()}>
-            <select
-              className="vtd-card-strategy-select"
-              aria-label="투자전략"
-              value={strategyId ?? globalStrategyId ?? ''}
-              onChange={e => {
-                const v = e.target.value;
-                onStrategyChange?.(v ? Number(v) : null);
-              }}
-            >
-              <option value="">— 선택 —</option>
-              {strategies.map(s => (
-                <option key={s.id} value={s.id}>{s.name}</option>
-              ))}
-            </select>
-          </label>
-          <span className="vtd-card-tf">시간봉 {tf}</span>
         </div>
         <div className="vtd-card-head-actions">
           {onEnterFocus && (
@@ -185,6 +177,7 @@ const VirtualTargetCard: React.FC<Props> = ({
           running={running}
           chartRealtimeSource={chartRealtimeSource}
           chartSeriesPriceLabels={chartSeriesPriceLabels}
+          chartTimeframe={chartTimeframe}
         />
       ) : (
         <VirtualTargetSignalPanel
@@ -193,6 +186,16 @@ const VirtualTargetCard: React.FC<Props> = ({
           receiving={highlightReceiving}
         />
       )}
+
+      <VirtualTargetCardFoot
+        snapshot={snapshot}
+        strategies={strategies}
+        strategyId={strategyId}
+        globalStrategyId={globalStrategyId}
+        candleType={evalCandleType}
+        onStrategyChange={onStrategyChange}
+        onCandleTypeChange={onCandleTypeChange}
+      />
     </div>
   );
 };