initial commit

pages/History.tsx

@@ -0,0 +1,81 @@
+
+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-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" /> 전체 거래 로그
+           </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>
+        </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>
+              </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">
+                    {order.timestamp.toLocaleString()}
+                  </td>
+                  <td className="px-10 py-6">
+                    <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>
+                    </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'}`}>
+                      {order.type === 'BUY' ? '매수' : '매도'}
+                    </span>
+                  </td>
+                  <td className="px-10 py-6 text-base font-black text-slate-700">
+                    {order.quantity} UNIT
+                  </td>
+                  <td className="px-10 py-6 text-base 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>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {orders.length === 0 && (
+                <tr>
+                  <td colSpan={6} className="px-10 py-32 text-center text-slate-400 italic text-base">
+                    현재 기록된 트랜잭션 내역이 존재하지 않습니다.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HistoryPage;