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

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"
>
{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}
</td>
)}
<td className="px-4 py-3">
<td className="px-3 py-2">
<div className="flex items-center gap-3">
{onToggleWatchlist && (
<button
@@ -43,34 +43,34 @@ export const StockRow: React.FC<StockRowProps> = ({
{stock.name[0]}
</div>
<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>
</div>
</div>
</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}
</td>
<td className="px-4 py-3 text-right">
<td className="px-3 py-2 text-right">
{showPL ? (
<div className={showPL.pl >= 0 ? 'text-rose-500' : 'text-blue-600'}>
<p className="font-black text-[13px]">{showPL.pl.toLocaleString()}</p>
<p className="text-[10px] font-bold">({showPL.percent.toFixed(2)}%)</p>
<p className="font-black text-[12.5px] leading-tight">{showPL.pl.toLocaleString()}</p>
<p className="text-[9px] font-bold opacity-80 mt-0.5">({showPL.percent.toFixed(2)}%)</p>
</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}%
</span>
)}
</td>
{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="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-blue-400" style={{ width: `${stock.sellRatio || 50}%` }} />
</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-blue-500">{stock.sellRatio || 50}</span>
</div>
@@ -78,10 +78,10 @@ export const StockRow: React.FC<StockRowProps> = ({
</td>
)}
{showActions && onTrade && (
<td className="px-4 py-3 text-right">
<div className="flex gap-1.5 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.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>
<td className="px-3 py-2 text-right">
<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 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 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>
</td>
)}