Macbook
104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
/**
|
|
* 매매 시그널 알림 — 캔들·지표 미니 차트 카드 (펼쳐보기 / 원래보기)
|
|
*/
|
|
import React from 'react';
|
|
import type { IndicatorConfig } from '../../types';
|
|
import type { Theme, Timeframe } from '../../types';
|
|
import TradeSignalMiniChart from './TradeSignalMiniChart';
|
|
import type { TradeSignalChartMarker } from '../../utils/tradeSignalChartMarkers';
|
|
|
|
const IcExpand = () => (
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
|
<polyline points="5,1 1,1 1,5" />
|
|
<polyline points="9,13 13,13 13,9" />
|
|
<line x1="1" y1="1" x2="6" y2="6" />
|
|
<line x1="13" y1="13" x2="8" y2="8" />
|
|
</svg>
|
|
);
|
|
|
|
const IcRestore = () => (
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
|
<polyline points="5,5 1,5 1,1" />
|
|
<polyline points="9,9 13,9 13,13" />
|
|
<line x1="1" y1="5" x2="5" y2="1" />
|
|
<line x1="13" y1="9" x2="9" y2="13" />
|
|
</svg>
|
|
);
|
|
|
|
export interface TradeSignalChartCardProps {
|
|
label: string;
|
|
meta: string;
|
|
market: string;
|
|
timeframe: Timeframe;
|
|
theme: Theme;
|
|
indicators: IndicatorConfig[];
|
|
enabled: boolean;
|
|
expanded: boolean;
|
|
onExpand: () => void;
|
|
onRestore: () => void;
|
|
onRealtimeActivity?: () => void;
|
|
signalMarker?: TradeSignalChartMarker;
|
|
}
|
|
|
|
const TradeSignalChartCard: React.FC<TradeSignalChartCardProps> = ({
|
|
label,
|
|
meta,
|
|
market,
|
|
timeframe,
|
|
theme,
|
|
indicators,
|
|
enabled,
|
|
expanded,
|
|
onExpand,
|
|
onRestore,
|
|
onRealtimeActivity,
|
|
signalMarker,
|
|
}) => (
|
|
<section
|
|
className={[
|
|
'tnl-chart-card',
|
|
expanded ? 'tnl-chart-card--expanded' : '',
|
|
].filter(Boolean).join(' ')}
|
|
>
|
|
<header className="tnl-chart-card-head">
|
|
<span className="tnl-chart-card-label">{label}</span>
|
|
<span className="tnl-chart-card-meta">{meta}</span>
|
|
</header>
|
|
<div className="tnl-chart-card-body">
|
|
<TradeSignalMiniChart
|
|
market={market}
|
|
timeframe={timeframe}
|
|
theme={theme}
|
|
indicators={indicators}
|
|
enabled={enabled}
|
|
fillHeight={expanded}
|
|
onRealtimeActivity={onRealtimeActivity}
|
|
signalMarker={signalMarker}
|
|
/>
|
|
{expanded ? (
|
|
<button
|
|
type="button"
|
|
className="tnl-chart-view-btn tnl-chart-view-btn--restore"
|
|
title="원래보기"
|
|
aria-label="원래보기"
|
|
onClick={e => { e.stopPropagation(); onRestore(); }}
|
|
>
|
|
<IcRestore />
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="tnl-chart-view-btn tnl-chart-view-btn--expand"
|
|
title="펼쳐보기"
|
|
aria-label="펼쳐보기"
|
|
onClick={e => { e.stopPropagation(); onExpand(); }}
|
|
>
|
|
<IcExpand />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
export default TradeSignalChartCard;
|