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

2026-05-26 16:42:57 +09:00
parent 7cf43609dc
commit c0d21ac825
25 changed files with 1632 additions and 61 deletions
@@ -0,0 +1,62 @@
+import React from 'react';
+import type { StrategyDto } from '../../utils/backendApi';
+import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
+import { formatUpdatedTime } from '../../utils/virtualSignalMetrics';
+import { STRATEGY_CANDLE_TYPE_OPTIONS } from '../../utils/strategyStartNodes';
+
+interface Props {
+  snapshot: VirtualIndicatorSnapshot | undefined;
+  strategies: StrategyDto[];
+  strategyId: number | null;
+  globalStrategyId: number | null;
+  candleType: string;
+  onStrategyChange?: (strategyId: number | null) => void;
+  onCandleTypeChange?: (candleType: string) => void;
+}
+
+/** 카드 하단 — 갱신 시각(좌) · 전략·시간봉 드롭다운(우) */
+const VirtualTargetCardFoot: React.FC<Props> = ({
+  snapshot,
+  strategies,
+  strategyId,
+  globalStrategyId,
+  candleType,
+  onStrategyChange,
+  onCandleTypeChange,
+}) => (
+  <div className="vtd-card-foot">
+    <span className="vtd-card-updated">갱신 {formatUpdatedTime(snapshot?.updatedAt)}</span>
+    <div className="vtd-card-foot-controls" onClick={e => e.stopPropagation()}>
+      <label className="vtd-card-foot-field">
+        <select
+          className="vtd-card-foot-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>
+      <label className="vtd-card-foot-field">
+        <select
+          className="vtd-card-foot-select vtd-card-foot-select--tf"
+          aria-label="시간봉"
+          value={candleType}
+          onChange={e => onCandleTypeChange?.(e.target.value)}
+        >
+          {STRATEGY_CANDLE_TYPE_OPTIONS.map(o => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </select>
+      </label>
+    </div>
+  </div>
+);
+
+export default VirtualTargetCardFoot;