aidev
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
/**
|
|
* 설정 화면 — 매매 알림 팝업 배치 미리보기
|
|
*/
|
|
import React from 'react';
|
|
import {
|
|
type TradeAlertPopupLayout,
|
|
type TradeAlertPopupPosition,
|
|
tradeAlertPopupClassNames,
|
|
} from '../utils/tradeAlertPopupLayout';
|
|
|
|
interface Props {
|
|
position: TradeAlertPopupPosition;
|
|
layout: TradeAlertPopupLayout;
|
|
gridCols: number;
|
|
enabled?: boolean;
|
|
}
|
|
|
|
const MOCK_ITEMS = [
|
|
{ id: '1', side: 'BUY' as const, title: 'KRW-BTC 매수', price: '98,500,000' },
|
|
{ id: '2', side: 'SELL' as const, title: 'KRW-ETH 매도', price: '4,620,000' },
|
|
{ id: '3', side: 'BUY' as const, title: 'KRW-SOL 매수', price: '245,000' },
|
|
{ id: '4', side: 'SELL' as const, title: 'KRW-XRP 매도', price: '890' },
|
|
];
|
|
|
|
const PreviewCard: React.FC<{ side: 'BUY' | 'SELL'; title: string; price: string; compact?: boolean }> = ({
|
|
side, title, price, compact,
|
|
}) => (
|
|
<div className={`tsn-card tsn-card--preview ${side === 'BUY' ? 'tsn-card--buy' : 'tsn-card--sell'}${compact ? ' tsn-card--compact' : ''}`}>
|
|
<div className="tsn-card-header tsn-card-header--preview">
|
|
<span className={`tsn-badge ${side === 'BUY' ? 'tsn-badge--buy' : 'tsn-badge--sell'}`}>{side}</span>
|
|
<span className="tsn-card-title">{title}</span>
|
|
</div>
|
|
{!compact && (
|
|
<div className="tsn-preview-body">
|
|
<span>₩{price}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
export const TradeAlertPopupPreview: React.FC<Props> = ({
|
|
position,
|
|
layout,
|
|
gridCols,
|
|
enabled = true,
|
|
}) => {
|
|
const { stack, cards } = tradeAlertPopupClassNames(position, layout);
|
|
const visible = layout === 'single' ? MOCK_ITEMS.slice(0, 1) : MOCK_ITEMS.slice(0, layout === 'grid' ? gridCols * 2 : 3);
|
|
const compact = layout === 'grid' || layout === 'strip';
|
|
|
|
return (
|
|
<div className={`stg-alert-preview${enabled ? '' : ' stg-alert-preview--off'}`}>
|
|
<div className="stg-alert-preview-frame">
|
|
<div className="stg-alert-preview-screen">
|
|
<span className="stg-alert-preview-label">화면</span>
|
|
<div
|
|
className={`${stack} tsn-stack--preview`}
|
|
style={layout === 'grid' ? { ['--tsn-grid-cols' as string]: gridCols } : undefined}
|
|
>
|
|
<div
|
|
className={cards}
|
|
style={layout === 'grid' ? { ['--tsn-grid-cols' as string]: gridCols } : undefined}
|
|
>
|
|
{visible.map(item => (
|
|
<PreviewCard
|
|
key={item.id}
|
|
side={item.side}
|
|
title={item.title}
|
|
price={item.price}
|
|
compact={compact}
|
|
/>
|
|
))}
|
|
</div>
|
|
{layout === 'single' && MOCK_ITEMS.length > 1 && (
|
|
<span className="tsn-single-more">+{MOCK_ITEMS.length - 1}건</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TradeAlertPopupPreview;
|