GoogleAIBuilder/KisStock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

디자인업데이트

Browse Source
This commit is contained in:
tindevil
2026-02-02 22:20:08 +09:00
parent 3c2f4a0371
commit 84746d41b8
6 changed files with 334 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
pages/History.tsx
View File

@@ -9,63 +9,63 @@ interface HistoryPageProps {
const HistoryPage: React.FC<HistoryPageProps> = ({ orders }) => {
return (
<div className="space-y-10 animate-in fade-in duration-500">
<div className="bg-white rounded-[3.5rem] shadow-sm border border-slate-100 overflow-hidden">
<div className="p-8 border-b border-slate-50 flex justify-between items-center bg-slate-50/30">
<h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 uppercase tracking-widest">
<History size={24} className="text-blue-600" /> 전체 거래 로그
<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-[11px] font-black text-slate-400 hover:text-slate-600 flex items-center gap-2 uppercase tracking-widest">
<FileText size={18} /> 데이터 내보내기 (CSV)
<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/50">
<tr className="text-left text-[11px] font-black text-slate-400 uppercase tracking-widest border-b">
<th className="px-10 py-6">체결 시퀀스 타임</th>
<th className="px-10 py-6">자산명</th>
<th className="px-10 py-6">오퍼레이션</th>
<th className="px-10 py-6">체결 수량</th>
<th className="px-10 py-6">체결 단가</th>
<th className="px-10 py-6">트랜잭션 상태</th>
<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 transition-colors">
<td className="px-10 py-6 text-sm font-mono text-slate-500">
<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-10 py-6">
<td className="px-6 py-4">
<div className="flex flex-col">
<span className="font-black text-slate-800 text-base">{order.stockName}</span>
<span className="text-[11px] font-mono text-slate-400 uppercase tracking-widest">{order.stockCode}</span>
<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-10 py-6">
<span className={`px-3 py-1.5 rounded-lg text-[11px] font-black tracking-widest ${order.type === 'BUY' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600'}`}>
<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-10 py-6 text-base font-black text-slate-700">
<td className="px-6 py-4 text-[14px] font-black text-slate-700">
{order.quantity} UNIT
</td>
<td className="px-10 py-6 text-base font-mono font-bold text-slate-600">
<td className="px-6 py-4 text-[14px] font-mono font-bold text-slate-600">
{order.price.toLocaleString()}
</td>
<td className="px-10 py-6">
<div className="flex items-center gap-2.5">
<CheckCircle size={18} className="text-emerald-500" />
<span className="text-sm font-black text-slate-800 uppercase tracking-tighter">체결 완료</span>
<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-10 py-32 text-center text-slate-400 italic text-base">
<td colSpan={6} className="px-6 py-16 text-center text-slate-400 italic text-[14px]">
현재 기록된 트랜잭션 내역이 존재하지 않습니다.
</td>
</tr>