From 01acc19401a5d54502612a8277ce1c7adb36a65b Mon Sep 17 00:00:00 2001
From: LGram16 <tindevil82@gmail.com>
Date: Sun, 1 Feb 2026 00:56:54 +0900
Subject: [PATCH] ..

---
 Dockerfile              |   1 -
 components/CommonUI.tsx |  14 +++---
 components/StockRow.tsx |  28 +++++------
 pages/Dashboard.tsx     | 108 +++++++++++++++++++++++++++-------------
 4 files changed, 94 insertions(+), 57 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index bcf0647..985c337 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -16,7 +16,6 @@ COPY package*.json ./
 RUN npm install --omit=dev
 
 # 서버 파일 및 빌드 결과물 복사
-COPY server.js ./
 COPY --from=build /app/dist ./dist
 
 # 환경변수 포트 노출
diff --git a/components/CommonUI.tsx b/components/CommonUI.tsx
index 5197308..6cdf97d 100644
--- a/components/CommonUI.tsx
+++ b/components/CommonUI.tsx
@@ -11,18 +11,18 @@ interface StatCardProps {
 }
 
 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>
-      <p className="text-[11px] font-black text-slate-400 mb-3 uppercase tracking-widest">{title}</p>
-      <h4 className="text-2xl font-black text-slate-900 leading-none">{value}</h4>
+  <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 className="min-w-0 flex-1">
+      <p className="text-[10px] font-black text-slate-400 mb-1 uppercase tracking-widest truncate">{title}</p>
+      <h4 className="text-[18px] font-black text-slate-900 leading-none truncate">{value}</h4>
       {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}
         </p>
       )}
     </div>
-    <div className="bg-slate-50 p-5 rounded-3xl group-hover:bg-blue-50 transition-colors">
-      {icon}
+    <div className="bg-slate-50 p-3 rounded-xl group-hover:bg-blue-50 transition-colors shrink-0 ml-3">
+      {React.cloneElement(icon as React.ReactElement, { size: 18 })}
     </div>
   </div>
 );
diff --git a/components/StockRow.tsx b/components/StockRow.tsx
index ca68f0c..b2d6d51 100644
--- a/components/StockRow.tsx
+++ b/components/StockRow.tsx
@@ -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>
       )}
diff --git a/pages/Dashboard.tsx b/pages/Dashboard.tsx
index 3ec9ff0..1a65059 100644
--- a/pages/Dashboard.tsx
+++ b/pages/Dashboard.tsx
@@ -1,7 +1,7 @@
 
 import React, { useState, useEffect, useMemo } from 'react';
 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';
 import { StockItem, TradeOrder, MarketType, WatchlistGroup, OrderType, AutoTradeConfig, ReservedOrder } from '../types';
 import { DbService, HoldingItem } from '../services/dbService';
@@ -23,6 +23,40 @@ 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
 }) => {
@@ -86,29 +120,33 @@ const Dashboard: React.FC<DashboardProps> = ({
   const selectedGroup = activeMarketGroups.find(g => g.id === activeGroupId) || activeMarketGroups[0];
 
   return (
-    <div className="space-y-12 animate-in fade-in duration-500 pb-20">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-        <StatCard title={`총 자산 (${marketMode === MarketType.DOMESTIC ? '원' : '달러'})`} value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${summary.totalAssets.toLocaleString()}`} change="+4.2%" isUp={true} icon={<Wallet className="text-blue-500" />} />
-        <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" />} />
-        <StatCard title="예수금" value={`${marketMode === MarketType.DOMESTIC ? '₩' : '$'} ${summary.buyingPower.toLocaleString()}`} change="인출 가능" isUp={true} icon={<Activity className="text-purple-500" />} />
+    <div className="space-y-6 animate-in fade-in duration-500 pb-20">
+      {/* 1. 지수 및 환율 바 */}
+      <IndexBar />
+
+      {/* 2. 자산 현황 요약 */}
+      <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 className="grid grid-cols-1 lg:grid-cols-3 gap-10">
-        <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="flex justify-between items-center mb-8">
-            <h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 uppercase tracking-tighter">
-              <PieChart size={28} className="text-blue-600" /> 관심 그룹
+      <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">
+              <PieChart size={20} className="text-blue-600" /> 관심 그룹
             </h3>
           </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 => (
-              <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}
               </button>
             ))}
           </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">
               <tbody className="divide-y divide-slate-50">
                 {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 className="lg:col-span-2 space-y-10">
-           <div className="bg-white p-10 rounded-[3.5rem] shadow-sm border border-slate-100 flex flex-col h-[450px]">
-              <div className="flex justify-between items-center mb-8">
-                <h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 tracking-tighter">
-                  <Database size={28} className="text-emerald-600" /> 보유 포트폴리오
+        <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="flex justify-between items-center mb-5">
+                <h3 className="text-[15px] 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-[11px] font-black text-slate-400 uppercase tracking-[0.25em] border-b">
-                      <th className="pb-5 px-6">종목</th>
-                      <th className="pb-5 px-6 text-right">현재가</th>
-                      <th className="pb-5 px-6 text-right">수익금 (%)</th>
-                      <th className="pb-5 px-6 text-right">주문</th>
+                    <tr className="text-[10px] 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>
+                      <th className="pb-3 px-3 text-right">주문</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50">
@@ -165,19 +203,19 @@ const Dashboard: React.FC<DashboardProps> = ({
               </div>
            </div>
 
-           <div className="bg-white p-10 rounded-[3.5rem] shadow-sm border border-slate-100 flex flex-col h-[350px] overflow-hidden">
-              <h3 className="text-2xl font-black text-slate-800 flex items-center gap-3 mb-8">
-                <Timer size={28} className="text-blue-600" /> 실시간 감시 목록
+           <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">
+                <Timer size={20} className="text-blue-600" /> 실시간 감시 목록
               </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 => (
-                   <div key={order.id} className="bg-slate-50 p-6 rounded-[2.5rem] border border-slate-100 flex justify-between items-center group">
-                      <div className="flex items-center gap-5">
-                         <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><p className="font-black text-lg text-slate-800">{order.stockName}</p></div>
+                   <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>
-                      <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">
-                        <Trash2 size={22} />
+                      <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} />
                       </button>
                    </div>
                  ))}