Macbook
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import type { StrategyDto } from '../../utils/backendApi';
|
|
import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
|
|
import { formatUpdatedTime } from '../../utils/virtualSignalMetrics';
|
|
import {
|
|
defaultStrategyOptionLabel,
|
|
parseTargetStrategySelectValue,
|
|
targetStrategySelectValue,
|
|
} from '../../utils/virtualTargetStrategy';
|
|
|
|
interface Props {
|
|
snapshot: VirtualIndicatorSnapshot | undefined;
|
|
strategies: StrategyDto[];
|
|
strategyId: number | null;
|
|
globalStrategyId: number | null;
|
|
onStrategyChange?: (strategyId: number | null) => void;
|
|
/** 변경 불가 시 셀렉트 대신 표시할 전략명 (알림 목록 등) */
|
|
readOnlyStrategyLabel?: string;
|
|
}
|
|
|
|
/** 카드 하단 — 갱신 시각(좌) · 전략 드롭다운(우) */
|
|
const VirtualTargetCardFoot: React.FC<Props> = ({
|
|
snapshot,
|
|
strategies,
|
|
strategyId,
|
|
globalStrategyId,
|
|
onStrategyChange,
|
|
readOnlyStrategyLabel,
|
|
}) => {
|
|
const resolvedName =
|
|
readOnlyStrategyLabel?.trim()
|
|
|| strategies.find(s => s.id === strategyId)?.name
|
|
|| '';
|
|
|
|
return (
|
|
<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">
|
|
{readOnlyStrategyLabel != null && !onStrategyChange ? (
|
|
<span
|
|
className="vtd-card-foot-select vtd-card-foot-select--readonly"
|
|
title={resolvedName}
|
|
>
|
|
{resolvedName || '전략'}
|
|
</span>
|
|
) : (
|
|
<select
|
|
className="vtd-card-foot-select"
|
|
aria-label="투자전략"
|
|
value={targetStrategySelectValue({ strategyId })}
|
|
disabled={!onStrategyChange}
|
|
title={!onStrategyChange ? resolvedName : undefined}
|
|
onChange={e => {
|
|
onStrategyChange?.(parseTargetStrategySelectValue(e.target.value));
|
|
}}
|
|
>
|
|
<option value={targetStrategySelectValue({ strategyId: null })}>
|
|
{defaultStrategyOptionLabel(globalStrategyId, strategies)}
|
|
</option>
|
|
{strategies.map(s => (
|
|
<option key={s.id} value={String(s.id)}>{s.name}</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VirtualTargetCardFoot;
|