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-01 20:24:04 +09:00
parent 498bddb4fe
commit 3c2f4a0371
10 changed files with 276 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
pages/Dashboard.tsx
View File

@@ -23,40 +23,6 @@ interface DashboardProps {
onRefreshHoldings: () => void;
}
const IndexBar = () => {
const indices = [
{ name: '코스피', value: '2,561.32', change: '+12.45', percent: '0.49%', isUp: true },
{ name: '코스닥', value: '842.11', change: '-3.21', percent: '0.38%', isUp: false },
{ name: '나스닥', value: '15,628.95', change: '+215.12', percent: '1.40%', isUp: true },
{ name: 'S&P 500', value: '4,850.12', change: '+45.23', percent: '0.94%', isUp: true },
{ name: 'USD/KRW', value: '1,324.50', change: '+2.10', percent: '0.16%', isUp: true },
];
return (
<div className="flex gap-4 overflow-x-auto pb-2 scrollbar-hide -mx-2 px-2 items-center">
{indices.map((idx, i) => (
<div key={i} className="flex items-center gap-3 bg-white px-4 py-2 rounded-xl border border-slate-100 shadow-sm shrink-0 hover:border-blue-200 transition-colors cursor-pointer">
<div className="flex flex-col">
<span className="text-[10px] font-black text-slate-400 uppercase tracking-tighter">{idx.name}</span>
<span className="text-[14px] font-black text-slate-900 font-mono tracking-tighter">{idx.value}</span>
</div>
<div className={`flex flex-col items-end ${idx.isUp ? 'text-rose-500' : 'text-blue-600'}`}>
<span className="text-[10px] font-bold flex items-center gap-0.5">
{idx.isUp ? <ArrowUpRight size={10} /> : <ArrowDownRight size={10} />}
{idx.percent}
</span>
<span className="text-[9px] font-bold opacity-70">{idx.change}</span>
</div>
</div>
))}
<button className="flex items-center gap-1 text-slate-400 hover:text-blue-500 transition-colors shrink-0 px-2">
<span className="text-[11px] font-black">더보기</span>
<ChevronRight size={14} />
</button>
</div>
);
};
const Dashboard: React.FC<DashboardProps> = ({
marketMode, watchlistGroups, stocks, reservedOrders, onAddReservedOrder, onDeleteReservedOrder, onRefreshHoldings, orders
}) => {
@@ -121,19 +87,16 @@ const Dashboard: React.FC<DashboardProps> = ({
return (
<div className="space-y-6 animate-in fade-in duration-500 pb-20">
{/* 1. 지수 및 환율 바 */}
<IndexBar />
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[650px] lg:col-span-1">
<div className="flex justify-between items-center mb-5">
<h3 className="text-[15px] font-black text-slate-800 flex items-center gap-2 uppercase tracking-tighter">
<h3 className="text-[16px] font-black text-slate-800 flex items-center gap-2 uppercase tracking-tighter">
<PieChart size={20} className="text-blue-600" /> 관심 그룹
</h3>
</div>
<div className="flex gap-2 mb-6 overflow-x-auto pb-2 scrollbar-hide">
{activeMarketGroups.map(group => (
<button key={group.id} onClick={() => setActiveGroupId(group.id)} className={`relative px-4 py-2 rounded-xl font-black text-[11px] transition-all border-2 whitespace-nowrap ${activeGroupId === group.id ? 'bg-white border-blue-500 text-blue-600 shadow-sm' : 'bg-transparent border-slate-50 text-slate-400 hover:border-slate-200'}`}>
<button key={group.id} onClick={() => setActiveGroupId(group.id)} className={`relative px-4 py-2 rounded-xl font-black text-[12px] transition-all border-2 whitespace-nowrap ${activeGroupId === group.id ? 'bg-white border-blue-500 text-blue-600 shadow-sm' : 'bg-transparent border-slate-50 text-slate-400 hover:border-slate-200'}`}>
{group.name}
</button>
))}
@@ -159,16 +122,16 @@ const Dashboard: React.FC<DashboardProps> = ({
</div>
<div className="lg:col-span-2 space-y-6">
<div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[350px]">
<div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[350px]">
<div className="flex justify-between items-center mb-5">
<h3 className="text-[15px] font-black text-slate-800 flex items-center gap-2 tracking-tighter">
<h3 className="text-[16px] font-black text-slate-800 flex items-center gap-2 tracking-tighter">
<Database size={20} className="text-emerald-600" /> 보유 포트폴리오
</h3>
</div>
<div className="overflow-x-auto flex-1 scrollbar-hide">
<table className="w-full text-left">
<thead>
<tr className="text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
<tr className="text-[11px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
<th className="pb-3 px-3">종목</th>
<th className="pb-3 px-3 text-right">현재가</th>
<th className="pb-3 px-3 text-right">수익금 (%)</th>
@@ -196,7 +159,7 @@ const Dashboard: React.FC<DashboardProps> = ({
</div>
<div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[274px] overflow-hidden">
<h3 className="text-[15px] font-black text-slate-800 flex items-center gap-2 mb-5">
<h3 className="text-[16px] font-black text-slate-800 flex items-center gap-2 mb-5">
<Timer size={20} className="text-blue-600" /> 실시간 감시 목록
</h3>
<div className="flex-1 overflow-y-auto space-y-2 scrollbar-hide">
@@ -204,7 +167,7 @@ const Dashboard: React.FC<DashboardProps> = ({
<div key={order.id} className="bg-slate-50 p-3 rounded-xl border border-slate-100 flex justify-between items-center group">
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${order.type === OrderType.BUY ? 'bg-rose-50 text-rose-500' : 'bg-blue-50 text-blue-600'}`}><Zap size={14} fill="currentColor" /></div>
<div><p className="font-black text-[13px] text-slate-800">{order.stockName}</p></div>
<div><p className="font-black text-[14px] text-slate-800">{order.stockName}</p></div>
</div>
<button onClick={() => onDeleteReservedOrder(order.id)} className="p-2 bg-white hover:bg-rose-50 rounded-lg text-slate-300 hover:text-rose-500 transition-all shadow-sm">
<Trash2 size={16} />
@@ -212,7 +175,7 @@ const Dashboard: React.FC<DashboardProps> = ({
</div>
))}
</div>
</div>
</div>
</div>
</div>