This commit is contained in:
2026-02-01 20:24:04 +09:00
parent 498bddb4fe
commit 3c2f4a0371
10 changed files with 276 additions and 215 deletions

View File

@@ -25,7 +25,7 @@ export const StockRow: React.FC<StockRowProps> = ({
className="group cursor-pointer transition-colors hover:bg-slate-50/70"
>
{showRank && (
<td className="pl-4 py-2 font-mono font-black text-slate-400 group-hover:text-blue-600 transition-colors text-[12px]">
<td className="pl-4 py-2 font-mono font-black text-slate-400 group-hover:text-blue-600 transition-colors text-[13px]">
{rank}
</td>
)}
@@ -39,26 +39,26 @@ export const StockRow: React.FC<StockRowProps> = ({
<Star size={16} fill={isWatchlisted ? "currentColor" : "none"} className={isWatchlisted ? "text-amber-500" : ""} />
</button>
)}
<div className="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center text-white text-[10px] font-black shadow-sm overflow-hidden">
<div className="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center text-white text-[11px] font-black shadow-sm overflow-hidden">
{stock.name[0]}
</div>
<div className="flex flex-col">
<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="font-black text-slate-900 text-[13.5px] tracking-tight group-hover:text-blue-600 leading-tight">{stock.name}</span>
<span className="text-[10px] text-slate-400 font-mono font-bold">{stock.code}</span>
</div>
</div>
</td>
<td className="px-3 py-2 text-right font-mono font-black text-slate-800 text-[12.5px]">
<td className="px-3 py-2 text-right font-mono font-black text-slate-800 text-[13.5px]">
{stock.market === MarketType.DOMESTIC ? stock.price.toLocaleString() + '원' : '$' + stock.price}
</td>
<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-[12.5px] leading-tight">{showPL.pl.toLocaleString()}</p>
<p className="text-[9px] font-bold opacity-80 mt-0.5">({showPL.percent.toFixed(2)}%)</p>
<p className="font-black text-[13.5px] leading-tight">{showPL.pl.toLocaleString()}</p>
<p className="text-[10px] font-bold opacity-80 mt-0.5">({showPL.percent.toFixed(2)}%)</p>
</div>
) : (
<span className={`font-black text-[12.5px] ${stock.changePercent >= 0 ? 'text-rose-500' : 'text-blue-600'}`}>
<span className={`font-black text-[13.5px] ${stock.changePercent >= 0 ? 'text-rose-500' : 'text-blue-600'}`}>
{stock.changePercent >= 0 ? '+' : ''}{stock.changePercent}%
</span>
)}
@@ -70,7 +70,7 @@ export const StockRow: React.FC<StockRowProps> = ({
<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-[7.5px] font-black font-mono opacity-60">
<div className="flex justify-between w-full text-[8.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>