82 lines
3.8 KiB
TypeScript
82 lines
3.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { History, CheckCircle, Clock, XCircle, FileText } from 'lucide-react';
|
|
import { TradeOrder } from '../types';
|
|
|
|
interface HistoryPageProps {
|
|
orders: TradeOrder[];
|
|
}
|
|
|
|
const HistoryPage: React.FC<HistoryPageProps> = ({ orders }) => {
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in duration-500">
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div className="p-5 border-b border-slate-50 flex justify-between items-center bg-slate-50/10">
|
|
<h3 className="text-[16px] font-black text-slate-800 flex items-center gap-2 uppercase tracking-tight">
|
|
<History size={20} className="text-blue-600" /> 전체 거래 로그
|
|
</h3>
|
|
<button className="text-[10px] font-black text-slate-400 hover:text-slate-600 flex items-center gap-1.5 uppercase tracking-widest transition-colors">
|
|
<FileText size={16} /> 데이터 내보내기 (CSV)
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50/30">
|
|
<tr className="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest border-b">
|
|
<th className="px-6 py-3">체결 시퀀스 타임</th>
|
|
<th className="px-6 py-3">자산명</th>
|
|
<th className="px-6 py-3">오퍼레이션</th>
|
|
<th className="px-6 py-3">체결 수량</th>
|
|
<th className="px-6 py-3">체결 단가</th>
|
|
<th className="px-6 py-3">트랜잭션 상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-50">
|
|
{orders.map(order => (
|
|
<tr key={order.id} className="hover:bg-slate-50/50 transition-colors">
|
|
<td className="px-6 py-4 text-[12px] font-mono text-slate-500">
|
|
{order.timestamp.toLocaleString()}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex flex-col">
|
|
<span className="font-black text-slate-800 text-[14px]">{order.stockName}</span>
|
|
<span className="text-[10px] font-mono text-slate-400 uppercase tracking-widest">{order.stockCode}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className={`px-2 py-1 rounded-lg text-[10px] font-black tracking-widest ${order.type === 'BUY' ? 'bg-rose-50 text-rose-600' : 'bg-blue-50 text-blue-600'}`}>
|
|
{order.type === 'BUY' ? '매수' : '매도'}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-[14px] font-black text-slate-700">
|
|
{order.quantity} UNIT
|
|
</td>
|
|
<td className="px-6 py-4 text-[14px] font-mono font-bold text-slate-600">
|
|
{order.price.toLocaleString()}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle size={14} className="text-emerald-500" />
|
|
<span className="text-[12px] font-black text-slate-800 uppercase tracking-tight">체결 완료</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{orders.length === 0 && (
|
|
<tr>
|
|
<td colSpan={6} className="px-6 py-16 text-center text-slate-400 italic text-[14px]">
|
|
현재 기록된 트랜잭션 내역이 존재하지 않습니다.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HistoryPage;
|