수정본

frontend/src/components/Layout.tsx

@@ -1,5 +1,8 @@
 import { Link, useLocation } from 'react-router-dom'
-import { LayoutDashboard, FileText, History, Cpu } from 'lucide-react'
+import { LayoutDashboard, FileText, History, Cpu, Activity } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import api from '../lib/api'
+import { useWebSocket } from '../hooks/useWebSocket'
 
 interface LayoutProps {
     children: React.ReactNode
@@ -7,58 +10,78 @@ interface LayoutProps {
 
 const Layout = ({ children }: LayoutProps) => {
     const location = useLocation()
+    const { connected: wsConnected } = useWebSocket('dashboard') // Global WS status
+
+    const { data: mcpStatus } = useQuery({
+        queryKey: ['mcp-status'],
+        queryFn: async () => (await api.get('/mcp/status')).data,
+        refetchInterval: 5000,
+    })
 
     const navItems = [
         { path: '/', icon: LayoutDashboard, label: '대시보드' },
-        { path: '/rules', icon: FileText, label: '전략 룰 설정' },
+        { path: '/rules', icon: FileText, label: '전략 룰' },
         { path: '/trades', icon: History, label: '매매 로그' },
         { path: '/mcp', icon: Cpu, label: 'MCP 상태' },
     ]
 
     return (
-        <div className="min-h-screen bg-slate-900">
-            {/* Header */}
-            <header className="bg-slate-800 border-b border-slate-700">
-                <div className="container mx-auto px-4 py-4">
-                    <h1 className="text-2xl font-bold text-white">
-                        Auto Stock Trading System
-                    </h1>
-                    <p className="text-slate-400 text-sm">
-                        Claude AI & MCP 기반 자동 매매 시스템
-                    </p>
-                </div>
-            </header>
+        <div className="min-h-screen bg-[#0f1115] text-gray-100 font-sans flex flex-col">
+            {/* Top Navigation Bar */}
+            <header className="border-b border-gray-800 bg-[#161b22] h-16 flex items-center justify-between px-6 sticky top-0 z-50 backdrop-blur-md bg-opacity-90">
+                <div className="flex items-center gap-8">
+                    {/* Brand */}
+                    <div className="flex items-center gap-3">
+                        <div className="bg-blue-600 p-2 rounded-lg shadow-lg shadow-blue-500/20">
+                            <Activity className="text-white" size={20} />
+                        </div>
+                        <div>
+                            <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent leading-none">
+                                AutoStock
+                            </h1>
+                            <p className="text-[10px] text-gray-500 font-mono tracking-wider">GEN 3 ALGO</p>
+                        </div>
+                    </div>
 
-            <div className="flex">
-                {/* Sidebar */}
-                <aside className="w-64 bg-slate-800 min-h-[calc(100vh-73px)] border-r border-slate-700">
-                    <nav className="p-4 space-y-2">
+                    {/* Navigation */}
+                    <nav className="flex items-center gap-1">
                         {navItems.map((item) => {
                             const Icon = item.icon
                             const isActive = location.pathname === item.path
-
                             return (
                                 <Link
                                     key={item.path}
                                     to={item.path}
-                                    className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${isActive
-                                            ? 'bg-primary text-white'
-                                            : 'text-slate-400 hover:bg-slate-700 hover:text-white'
+                                    className={`flex items-center gap-2 px-3 py-2 rounded-md transition-all text-sm font-medium ${isActive
+                                        ? 'bg-gray-800 text-blue-400'
+                                        : 'text-gray-400 hover:text-white hover:bg-gray-800/50'
                                         }`}
                                 >
-                                    <Icon size={20} />
+                                    <Icon size={16} />
                                     <span>{item.label}</span>
                                 </Link>
                             )
                         })}
                     </nav>
-                </aside>
+                </div>
 
-                {/* Main Content */}
-                <main className="flex-1 p-6">
-                    {children}
-                </main>
-            </div>
+                {/* Status Indicators */}
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-800/50 rounded-full border border-gray-700/50">
+                        <div className={`w-2 h-2 rounded-full ${wsConnected ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]' : 'bg-red-500'}`} />
+                        <span className="text-xs text-gray-400">{wsConnected ? 'LIVE' : 'OFFLINE'}</span>
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-800/50 rounded-full border border-gray-700/50">
+                        <div className={`w-2 h-2 rounded-full ${mcpStatus?.status === 'connected' ? 'bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]' : 'bg-yellow-500'}`} />
+                        <span className="text-xs text-gray-400">MCP: {mcpStatus?.status || 'Unknown'}</span>
+                    </div>
+                </div>
+            </header>
+
+            {/* Main Content Area */}
+            <main className="flex-1 overflow-x-hidden">
+                {children}
+            </main>
         </div>
     )
 }