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 00:56:54 +09:00
parent 83491c08b9
commit 01acc19401
4 changed files with 94 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Dockerfile
View File

@@ -16,7 +16,6 @@ COPY package*.json ./
RUN npm install --omit=dev RUN npm install --omit=dev
# 서버 파일 및 빌드 결과물 복사 # 서버 파일 및 빌드 결과물 복사
COPY server.js ./
COPY --from=build /app/dist ./dist COPY --from=build /app/dist ./dist
# 환경변수 포트 노출 # 환경변수 포트 노출

14
components/CommonUI.tsx
View File

@@ -11,18 +11,18 @@ interface StatCardProps {
} }
export const StatCard: React.FC<StatCardProps> = ({ title, value, change, isUp, icon }) => ( export const StatCard: React.FC<StatCardProps> = ({ title, value, change, isUp, icon }) => (
<div className="bg-white p-8 rounded-[3rem] shadow-sm border border-slate-100 flex items-start justify-between group hover:border-blue-100 transition-all"> <div className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between group hover:border-blue-100 transition-all">
<div> <div className="min-w-0 flex-1">
<p className="text-[11px] font-black text-slate-400 mb-3 uppercase tracking-widest">{title}</p> <p className="text-[10px] font-black text-slate-400 mb-1 uppercase tracking-widest truncate">{title}</p>
<h4 className="text-2xl font-black text-slate-900 leading-none">{value}</h4> <h4 className="text-[18px] font-black text-slate-900 leading-none truncate">{value}</h4>
{change && ( {change && (
<p className={`text-[11px] font-black mt-4 flex items-center gap-2 ${isUp ? 'text-emerald-500' : 'text-rose-500'}`}> <p className={`text-[10px] font-black mt-2 flex items-center gap-1.5 ${isUp ? 'text-emerald-500' : 'text-rose-500'}`}>
{change} {change}
</p> </p>
)} )}
</div> </div>
<div className="bg-slate-50 p-5 rounded-3xl group-hover:bg-blue-50 transition-colors"> <div className="bg-slate-50 p-3 rounded-xl group-hover:bg-blue-50 transition-colors shrink-0 ml-3">
{icon} {React.cloneElement(icon as React.ReactElement, { size: 18 })}
</div> </div>
</div> </div>
); );

28
components/StockRow.tsx
View File

@@ -25,11 +25,11 @@ export const StockRow: React.FC<StockRowProps> = ({
className="group cursor-pointer transition-colors hover:bg-slate-50/70" className="group cursor-pointer transition-colors hover:bg-slate-50/70"
> >
{showRank && ( {showRank && (
<td className="pl-6 py-3 font-mono font-black text-slate-400 group-hover:text-blue-600 transition-colors"> <td className="pl-4 py-2 font-mono font-black text-slate-400 group-hover:text-blue-600 transition-colors text-[12px]">
{rank} {rank}
</td> </td>
)} )}
<td className="px-4 py-3"> <td className="px-3 py-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{onToggleWatchlist && ( {onToggleWatchlist && (
<button <button
@@ -43,34 +43,34 @@ export const StockRow: React.FC<StockRowProps> = ({
{stock.name[0]} {stock.name[0]}
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-black text-slate-900 text-[13px] tracking-tight group-hover:text-blue-600">{stock.name}</span> <span className="font-black text-slate-900 text-[12.5px] tracking-tight group-hover:text-blue-600 leading-tight">{stock.name}</span>
<span className="text-[9px] text-slate-400 font-mono font-bold">{stock.code}</span> <span className="text-[9px] text-slate-400 font-mono font-bold">{stock.code}</span>
</div> </div>
</div> </div>
</td> </td>
<td className="px-4 py-3 text-right font-mono font-black text-slate-800 text-[13px]"> <td className="px-3 py-2 text-right font-mono font-black text-slate-800 text-[12.5px]">
{stock.market === MarketType.DOMESTIC ? stock.price.toLocaleString() + '원' : '$' + stock.price} {stock.market === MarketType.DOMESTIC ? stock.price.toLocaleString() + '원' : '$' + stock.price}
</td> </td>
<td className="px-4 py-3 text-right"> <td className="px-3 py-2 text-right">
{showPL ? ( {showPL ? (
<div className={showPL.pl >= 0 ? 'text-rose-500' : 'text-blue-600'}> <div className={showPL.pl >= 0 ? 'text-rose-500' : 'text-blue-600'}>
<p className="font-black text-[13px]">{showPL.pl.toLocaleString()}</p> <p className="font-black text-[12.5px] leading-tight">{showPL.pl.toLocaleString()}</p>
<p className="text-[10px] font-bold">({showPL.percent.toFixed(2)}%)</p> <p className="text-[9px] font-bold opacity-80 mt-0.5">({showPL.percent.toFixed(2)}%)</p>
</div> </div>
) : ( ) : (
<span className={`font-black text-[13px] ${stock.changePercent >= 0 ? 'text-rose-500' : 'text-blue-600'}`}> <span className={`font-black text-[12.5px] ${stock.changePercent >= 0 ? 'text-rose-500' : 'text-blue-600'}`}>
{stock.changePercent >= 0 ? '+' : ''}{stock.changePercent}% {stock.changePercent >= 0 ? '+' : ''}{stock.changePercent}%
</span> </span>
)} )}
</td> </td>
{showRatioBar && ( {showRatioBar && (
<td className="px-4 py-3"> <td className="px-3 py-2">
<div className="flex flex-col items-end gap-0.5"> <div className="flex flex-col items-end gap-0.5">
<div className="w-full h-1 rounded-full bg-slate-100 overflow-hidden flex"> <div className="w-full h-1 rounded-full bg-slate-100 overflow-hidden flex">
<div className="h-full bg-rose-400" style={{ width: `${stock.buyRatio || 50}%` }} /> <div className="h-full bg-rose-400" style={{ width: `${stock.buyRatio || 50}%` }} />
<div className="h-full bg-blue-400" style={{ width: `${stock.sellRatio || 50}%` }} /> <div className="h-full bg-blue-400" style={{ width: `${stock.sellRatio || 50}%` }} />
</div> </div>
<div className="flex justify-between w-full text-[8px] font-black font-mono"> <div className="flex justify-between w-full text-[7.5px] font-black font-mono opacity-60">
<span className="text-rose-500">{stock.buyRatio || 50}</span> <span className="text-rose-500">{stock.buyRatio || 50}</span>
<span className="text-blue-500">{stock.sellRatio || 50}</span> <span className="text-blue-500">{stock.sellRatio || 50}</span>
</div> </div>
@@ -78,10 +78,10 @@ export const StockRow: React.FC<StockRowProps> = ({
</td> </td>
)} )}
{showActions && onTrade && ( {showActions && onTrade && (
<td className="px-4 py-3 text-right"> <td className="px-3 py-2 text-right">
<div className="flex gap-1.5 justify-end opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex gap-1 justify-end opacity-0 group-hover:opacity-100 transition-opacity">
<button onClick={(e) => { e.stopPropagation(); onTrade(OrderType.BUY); }} className="p-1.5 bg-rose-50 text-rose-500 rounded-lg hover:bg-rose-500 hover:text-white transition-all"><Zap size={12} fill="currentColor" /></button> <button onClick={(e) => { e.stopPropagation(); onTrade(OrderType.BUY); }} className="p-1 px-1.5 bg-rose-50 text-rose-500 rounded-md hover:bg-rose-500 hover:text-white transition-all"><Zap size={10} fill="currentColor" /></button>
<button onClick={(e) => { e.stopPropagation(); onTrade(OrderType.SELL); }} className="p-1.5 bg-blue-50 text-blue-500 rounded-lg hover:bg-blue-500 hover:text-white transition-all"><ShoppingCart size={12} /></button> <button onClick={(e) => { e.stopPropagation(); onTrade(OrderType.SELL); }} className="p-1 px-1.5 bg-blue-50 text-blue-500 rounded-md hover:bg-blue-500 hover:text-white transition-all"><ShoppingCart size={10} /></button>
</div> </div>
</td> </td>
)} )}

108
pages/Dashboard.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useMemo } from 'react'; import React, { useState, useEffect, useMemo } from 'react';
import { import {
TrendingUp, Wallet, Activity, Briefcase, PieChart, Database, Zap, Timer, Trash2 TrendingUp, TrendingDown, Wallet, Activity, Briefcase, PieChart, Database, Zap, Timer, Trash2, Globe, ArrowUpRight, ArrowDownRight, ChevronRight
} from 'lucide-react'; } from 'lucide-react';
import { StockItem, TradeOrder, MarketType, WatchlistGroup, OrderType, AutoTradeConfig, ReservedOrder } from '../types'; import { StockItem, TradeOrder, MarketType, WatchlistGroup, OrderType, AutoTradeConfig, ReservedOrder } from '../types';
import { DbService, HoldingItem } from '../services/dbService'; import { DbService, HoldingItem } from '../services/dbService';
@@ -23,6 +23,40 @@ interface DashboardProps {
onRefreshHoldings: () => void; 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> = ({ const Dashboard: React.FC<DashboardProps> = ({
marketMode, watchlistGroups, stocks, reservedOrders, onAddReservedOrder, onDeleteReservedOrder, onRefreshHoldings, orders marketMode, watchlistGroups, stocks, reservedOrders, onAddReservedOrder, onDeleteReservedOrder, onRefreshHoldings, orders
}) => { }) => {
@@ -86,29 +120,33 @@ const Dashboard: React.FC<DashboardProps> = ({
const selectedGroup = activeMarketGroups.find(g => g.id === activeGroupId) || activeMarketGroups[0]; const selectedGroup = activeMarketGroups.find(g => g.id === activeGroupId) || activeMarketGroups[0];
return ( return (
<div className="space-y-12 animate-in fade-in duration-500 pb-20"> <div className="space-y-6 animate-in fade-in duration-500 pb-20">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {/* 1. 지수 및 환율 바 */}
<StatCard title={`총 자산 (${marketMode === MarketType.DOMESTIC ? '원' : '달러'})`} value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${summary.totalAssets.toLocaleString()}`} change="+4.2%" isUp={true} icon={<Wallet className="text-blue-500" />} /> <IndexBar />
<StatCard title="총 평가손익" value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${totalLiquidationSummary.totalPL.toLocaleString()}`} change={`${aggregatePLPercent.toFixed(2)}%`} isUp={totalLiquidationSummary.totalPL >= 0} icon={<TrendingUp className={totalLiquidationSummary.totalPL >= 0 ? "text-emerald-500" : "text-rose-500"} />} />
<StatCard title="보유 종목수" value={`${holdings.length}개`} change="마켓 필터" isUp={true} icon={<Briefcase className="text-orange-500" />} /> {/* 2. 자산 현황 요약 */}
<StatCard title="예수금" value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${summary.buyingPower.toLocaleString()}`} change="인출 가능" isUp={true} icon={<Activity className="text-purple-500" />} /> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<StatCard title={`총 자산 (${marketMode === MarketType.DOMESTIC ? '원' : '달러'})`} value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${summary.totalAssets.toLocaleString()}`} change="+4.2%" isUp={true} icon={<Wallet />} />
<StatCard title="총 평가손익" value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${totalLiquidationSummary.totalPL.toLocaleString()}`} change={`${aggregatePLPercent.toFixed(2)}%`} isUp={totalLiquidationSummary.totalPL >= 0} icon={<TrendingUp />} />
<StatCard title="보유 종목수" value={`${holdings.length}개`} change="마켓 필터" isUp={true} icon={<Briefcase />} />
<StatCard title="예수금" value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${summary.buyingPower.toLocaleString()}`} change="인출 가능" isUp={true} icon={<Activity />} />
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="bg-white p-10 rounded-[3.5rem] shadow-sm border border-slate-100 flex flex-col h-[800px] lg:col-span-1"> <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-8"> <div className="flex justify-between items-center mb-5">
<h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 uppercase tracking-tighter"> <h3 className="text-[15px] font-black text-slate-800 flex items-center gap-2 uppercase tracking-tighter">
<PieChart size={28} className="text-blue-600" /> 관심 그룹 <PieChart size={20} className="text-blue-600" /> 관심 그룹
</h3> </h3>
</div> </div>
<div className="flex gap-3 mb-10 overflow-x-auto pb-4 scrollbar-hide"> <div className="flex gap-2 mb-6 overflow-x-auto pb-2 scrollbar-hide">
{activeMarketGroups.map(group => ( {activeMarketGroups.map(group => (
<button key={group.id} onClick={() => setActiveGroupId(group.id)} className={`relative px-7 py-3 rounded-full font-black text-[12px] transition-all border-2 whitespace-nowrap ${activeGroupId === group.id ? 'bg-white border-blue-500 text-blue-600 shadow-md' : 'bg-transparent border-slate-100 text-slate-400'}`}> <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'}`}>
{group.name} {group.name}
</button> </button>
))} ))}
</div> </div>
<div className="flex-1 overflow-y-auto pr-2 scrollbar-hide"> <div className="flex-1 overflow-y-auto pr-1 scrollbar-hide">
<table className="w-full"> <table className="w-full">
<tbody className="divide-y divide-slate-50"> <tbody className="divide-y divide-slate-50">
{selectedGroup?.codes.map(code => stocks.find(s => s.code === code)).filter(s => s?.market === marketMode).map(stock => { {selectedGroup?.codes.map(code => stocks.find(s => s.code === code)).filter(s => s?.market === marketMode).map(stock => {
@@ -128,21 +166,21 @@ const Dashboard: React.FC<DashboardProps> = ({
</div> </div>
</div> </div>
<div className="lg:col-span-2 space-y-10"> <div className="lg:col-span-2 space-y-6">
<div className="bg-white p-10 rounded-[3.5rem] shadow-sm border border-slate-100 flex flex-col h-[450px]"> <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-8"> <div className="flex justify-between items-center mb-5">
<h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 tracking-tighter"> <h3 className="text-[15px] font-black text-slate-800 flex items-center gap-2 tracking-tighter">
<Database size={28} className="text-emerald-600" /> 보유 포트폴리오 <Database size={20} className="text-emerald-600" /> 보유 포트폴리오
</h3> </h3>
</div> </div>
<div className="overflow-x-auto flex-1 scrollbar-hide"> <div className="overflow-x-auto flex-1 scrollbar-hide">
<table className="w-full text-left"> <table className="w-full text-left">
<thead> <thead>
<tr className="text-[11px] font-black text-slate-400 uppercase tracking-[0.25em] border-b"> <tr className="text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50">
<th className="pb-5 px-6">종목</th> <th className="pb-3 px-3">종목</th>
<th className="pb-5 px-6 text-right">현재가</th> <th className="pb-3 px-3 text-right">현재가</th>
<th className="pb-5 px-6 text-right">수익금 (%)</th> <th className="pb-3 px-3 text-right">수익금 (%)</th>
<th className="pb-5 px-6 text-right">주문</th> <th className="pb-3 px-3 text-right">주문</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-50"> <tbody className="divide-y divide-slate-50">
@@ -165,19 +203,19 @@ const Dashboard: React.FC<DashboardProps> = ({
</div> </div>
</div> </div>
<div className="bg-white p-10 rounded-[3.5rem] shadow-sm border border-slate-100 flex flex-col h-[350px] overflow-hidden"> <div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[274px] overflow-hidden">
<h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 mb-8"> <h3 className="text-[15px] font-black text-slate-800 flex items-center gap-2 mb-5">
<Timer size={28} className="text-blue-600" /> 실시간 감시 목록 <Timer size={20} className="text-blue-600" /> 실시간 감시 목록
</h3> </h3>
<div className="flex-1 overflow-y-auto space-y-4 scrollbar-hide"> <div className="flex-1 overflow-y-auto space-y-2 scrollbar-hide">
{reservedOrders.filter(o => o.market === marketMode).map(order => ( {reservedOrders.filter(o => o.market === marketMode).map(order => (
<div key={order.id} className="bg-slate-50 p-6 rounded-[2.5rem] border border-slate-100 flex justify-between items-center group"> <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-5"> <div className="flex items-center gap-3">
<div className={`p-4 rounded-2xl ${order.type === OrderType.BUY ? 'bg-rose-50 text-rose-500' : 'bg-blue-50 text-blue-600'}`}><Zap size={20} fill="currentColor" /></div> <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-lg text-slate-800">{order.stockName}</p></div> <div><p className="font-black text-[13px] text-slate-800">{order.stockName}</p></div>
</div> </div>
<button onClick={() => onDeleteReservedOrder(order.id)} className="p-3 bg-white hover:bg-rose-50 rounded-2xl text-slate-300 hover:text-rose-500 transition-all shadow-sm"> <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={22} /> <Trash2 size={16} />
</button> </button>
</div> </div>
))} ))}