67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
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
|