import React, { useState, useEffect } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { TrendingUp, Database, BarChart3, Settings, AlertTriangle, Activity, Search, DollarSign } from 'lucide-react'; interface LayoutProps { children: React.ReactNode; title?: string; } const ClientLayout: React.FC = ({ children, title = 'Stock Oracle' }) => { const router = useRouter(); const [currentTime, setCurrentTime] = useState(''); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); setCurrentTime(new Date().toLocaleString('ko-KR')); const timer = setInterval(() => { setCurrentTime(new Date().toLocaleString('ko-KR')); }, 1000); return () => clearInterval(timer); }, []); const navigation = [ { name: '대시보드', href: '/', icon: TrendingUp, current: router.pathname === '/', }, { name: '종목 조회', href: '/stock', icon: Search, current: router.pathname === '/stock', }, { name: '데이터 조회', href: '/query', icon: BarChart3, current: router.pathname === '/query', }, { name: 'FRED 경제데이터', href: '/fred', icon: DollarSign, current: router.pathname === '/fred', }, { name: 'DB 상태', href: '/database', icon: Database, current: router.pathname === '/database', }, { name: '시스템 로그', href: '/logs', icon: Activity, current: router.pathname === '/logs', }, { name: '설정', href: '/settings', icon: Settings, current: router.pathname === '/settings', }, ]; return ( <> {title} {/* Favicon and Icons */} {/* Web App Manifest */} {/* Theme Colors */} {/* Open Graph */} {/* Twitter Card */}

{/* 사이드바 */}

Stock Oracle

{/* 하단 정보 */}

Stock Oracle v1.0.0

Real-time Financial Data

{/* 메인 콘텐츠 */}

{/* 헤더 */}

{navigation.find(item => item.current)?.name || 'Stock Oracle'}

{/* API 상태 표시 */}

API 연결됨

{/* 현재 시간 */}

{mounted ? currentTime : '--:--:--'}

{/* 페이지 콘텐츠 */}

{children}

); }; export default ClientLayout;