Macbook
77 lines
2.4 KiB
TypeScript
77 lines
2.4 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;
|
|
/** list: 라벨·값 세로 목록, matrix: n×n 정보 카드 그리드 */
|
|
layout?: 'list' | 'matrix';
|
|
}
|
|
|
|
export const TradeSignalDetailBody: React.FC<Props> = ({
|
|
item,
|
|
variant = 'compact',
|
|
showHeadline = true,
|
|
layout = 'list',
|
|
}) => {
|
|
useTradeAlertTimeFormat();
|
|
const isBuy = item.signalType === 'BUY';
|
|
const rows = buildSignalDetailRows(item);
|
|
|
|
return (
|
|
<div className={`tsd-body tsd-body--${variant}${layout === 'matrix' ? ' tsd-body--matrix' : ''}`}>
|
|
{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>
|
|
)}
|
|
{layout !== 'matrix' && (
|
|
<p className="tsd-summary">{getSignalHeadline(item)}</p>
|
|
)}
|
|
{layout === 'matrix' ? (
|
|
<div className="tsd-detail-matrix" role="list">
|
|
{rows.map(row => (
|
|
<div key={row.label} className="tsd-detail-cell" role="listitem">
|
|
<span className="tsd-detail-cell-label">{row.label}</span>
|
|
<span
|
|
className={[
|
|
'tsd-detail-cell-value',
|
|
row.highlight ? 'tsd-detail-cell-value--highlight' : '',
|
|
].filter(Boolean).join(' ')}
|
|
>
|
|
{row.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<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;
|