Macbook
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
/**
|
|
* 매매 시그널 알림 상세 본문 — 종목·시간·매수/매도·금액 등
|
|
*/
|
|
import React from 'react';
|
|
import {
|
|
buildSignalDetailRows,
|
|
formatSignalPrice,
|
|
getSignalHeadline,
|
|
getSignalTypeKo,
|
|
type TradeSignalDisplaySource,
|
|
} from '../utils/tradeSignalDisplay';
|
|
import { useTradeAlertTimeFormat } from '../utils/tradeAlertTimeFormat';
|
|
|
|
interface Props {
|
|
item: TradeSignalDisplaySource;
|
|
/** compact: 스택 팝업, full: 목록/모달 요약 */
|
|
variant?: 'compact' | 'full';
|
|
showHeadline?: boolean;
|
|
}
|
|
|
|
export const TradeSignalDetailBody: React.FC<Props> = ({
|
|
item,
|
|
variant = 'compact',
|
|
showHeadline = true,
|
|
}) => {
|
|
useTradeAlertTimeFormat();
|
|
const isBuy = item.signalType === 'BUY';
|
|
const rows = buildSignalDetailRows(item);
|
|
|
|
return (
|
|
<div className={`tsd-body tsd-body--${variant}`}>
|
|
{showHeadline && (
|
|
<div className="tsd-headline">
|
|
<span className={`tsd-direction ${isBuy ? 'tsd-direction--buy' : 'tsd-direction--sell'}`}>
|
|
{isBuy ? '↑' : '↓'} {getSignalTypeKo(item.signalType)}
|
|
</span>
|
|
<span className="tsd-headline-price">{formatSignalPrice(item.price)}</span>
|
|
</div>
|
|
)}
|
|
<p className="tsd-summary">{getSignalHeadline(item)}</p>
|
|
<dl className="tsd-detail-grid">
|
|
{rows.map(row => (
|
|
<React.Fragment key={row.label}>
|
|
<dt className="tsd-dt">{row.label}</dt>
|
|
<dd className={`tsd-dd${row.highlight ? ' tsd-dd--highlight' : ''}`}>{row.value}</dd>
|
|
</React.Fragment>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TradeSignalDetailBody;
|