Initial commit

frontend/src/components/Layout.tsx

@@ -0,0 +1,66 @@
+import { Link, useLocation } from 'react-router-dom'
+import { LayoutDashboard, FileText, History, Cpu } from 'lucide-react'
+
+interface LayoutProps {
+    children: React.ReactNode
+}
+
+const Layout = ({ children }: LayoutProps) => {
+    const location = useLocation()
+
+    const navItems = [
+        { path: '/', icon: LayoutDashboard, 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="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">
+                        {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'
+                                        }`}
+                                >
+                                    <Icon size={20} />
+                                    <span>{item.label}</span>
+                                </Link>
+                            )
+                        })}
+                    </nav>
+                </aside>
+
+                {/* Main Content */}
+                <main className="flex-1 p-6">
+                    {children}
+                </main>
+            </div>
+        </div>
+    )
+}
+
+export default Layout