디자인업데이트

pages/Dashboard.tsx

@@ -24,35 +24,16 @@ interface DashboardProps {
 }
 
 const Dashboard: React.FC<DashboardProps> = ({ 
-  marketMode, watchlistGroups, stocks, reservedOrders, onAddReservedOrder, onDeleteReservedOrder, onRefreshHoldings, orders
+  marketMode, stocks, reservedOrders, onAddReservedOrder, onDeleteReservedOrder, onRefreshHoldings, orders
 }) => {
   const [holdings, setHoldings] = useState<HoldingItem[]>([]);
   const [summary, setSummary] = useState({ totalAssets: 0, buyingPower: 0 });
   
-  const [activeGroupId, setActiveGroupId] = useState<string | null>(null);
-  const [detailStock, setDetailStock] = useState<StockItem | null>(null);
-  const [tradeContext, setTradeContext] = useState<{ stock: StockItem, type: OrderType } | null>(null);
-
-  const dbService = useMemo(() => new DbService(), []);
-
+  // Data loading
   useEffect(() => {
     loadData();
   }, [orders, marketMode, reservedOrders]);
 
-  const activeMarketGroups = useMemo(() => {
-    return watchlistGroups.filter(group => group.market === marketMode);
-  }, [watchlistGroups, marketMode]);
-
-  useEffect(() => {
-    if (activeMarketGroups.length > 0) {
-      if (!activeGroupId || !activeMarketGroups.find(g => g.id === activeGroupId)) {
-        setActiveGroupId(activeMarketGroups[0].id);
-      }
-    } else {
-      setActiveGroupId(null);
-    }
-  }, [marketMode, activeMarketGroups, activeGroupId]);
-
   const loadData = async () => {
     const allHoldings = await dbService.getHoldings();
     const filteredHoldings = allHoldings.filter(h => h.market === marketMode);
@@ -83,33 +64,39 @@ const Dashboard: React.FC<DashboardProps> = ({
     ? (totalLiquidationSummary.totalPL / totalLiquidationSummary.totalCost) * 100 
     : 0;
 
-  const selectedGroup = activeMarketGroups.find(g => g.id === activeGroupId) || activeMarketGroups[0];
+  // Remove detailStock and tradeContext initialization if not used elsewhere, but they are used in JSX below.
+  const [detailStock, setDetailStock] = useState<StockItem | null>(null);
+  const [tradeContext, setTradeContext] = useState<{ stock: StockItem, type: OrderType } | null>(null);
+  const dbService = useMemo(() => new DbService(), []);
 
   return (
     <div className="space-y-6 animate-in fade-in duration-500 pb-20">
-      <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="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[650px]">
           <div className="flex justify-between items-center mb-5">
-            <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 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="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-[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>
-            ))}
-          </div>
-          <div className="flex-1 overflow-y-auto pr-1 scrollbar-hide">
-            <table className="w-full">
+          <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-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">
-                {selectedGroup?.codes.map(code => stocks.find(s => s.code === code)).filter(s => s?.market === marketMode).map(stock => {
+                {holdings.map(holding => {
+                  const { pl, plPercent, stock } = calculatePL(holding);
                   if (!stock) return null;
                   return (
                     <StockRow 
-                      key={stock.code} 
-                      stock={stock} 
+                      key={holding.code}
+                      stock={stock}
+                      showPL={{ pl, percent: plPercent }}
                       showActions={true}
                       onTrade={(type) => setTradeContext({ stock, type })}
                       onClick={() => setDetailStock(stock)}
@@ -121,61 +108,23 @@ const Dashboard: React.FC<DashboardProps> = ({
           </div>
         </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="flex justify-between items-center mb-5">
-                <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-[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>
-                      <th className="pb-3 px-3 text-right">주문</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-slate-50">
-                    {holdings.map(holding => {
-                      const { pl, plPercent, stock } = calculatePL(holding);
-                      if (!stock) return null;
-                      return (
-                        <StockRow 
-                          key={holding.code}
-                          stock={stock}
-                          showPL={{ pl, percent: plPercent }}
-                          showActions={true}
-                          onTrade={(type) => setTradeContext({ stock, type })}
-                          onClick={() => setDetailStock(stock)}
-                        />
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-           </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-[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">
-                 {reservedOrders.filter(o => o.market === marketMode).map(order => (
-                   <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-[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} />
-                      </button>
-                   </div>
-                 ))}
-              </div>
-            </div>
+        <div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col h-[650px] overflow-hidden">
+          <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">
+             {reservedOrders.filter(o => o.market === marketMode).map(order => (
+               <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-[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} />
+                  </button>
+               </div>
+             ))}
+          </div>
         </div>
       </div>