import { Activity, BookOpen, Bot, LayoutDashboard, Menu, Power } from 'lucide-react' import { useEffect, useRef, useState } from 'react' const navItems = [ { id: 'curriculum', label: '커리큘럼', icon: BookOpen }, { id: 'studio', label: '개발 스튜디오', icon: LayoutDashboard }, { id: 'guide', label: 'AI 가이드', icon: Bot } ] as const type NavItemId = (typeof navItems)[number]['id'] export default function Sidebar({ collapsed, onToggle, activeItem = 'curriculum', studioEnabled = false, onNavigate, sessionStatus = 'idle', runningSessions = [], onOpenSession, onDisconnectSession }: { collapsed: boolean onToggle: () => void activeItem?: NavItemId studioEnabled?: boolean onNavigate?: (item: NavItemId) => void sessionStatus?: 'idle' | 'running' | 'ended' sessionPlatform?: string sessionStartedAt?: string | null sessionEndedAt?: string | null sessionEndsAt?: string | null runningSessions?: Array<{ id: string; title: string; startedAt?: string | null; endsAt?: string | null; dotClassName?: string }> canReleaseControl?: boolean onOpenSession?: (sessionId?: string) => void onDisconnectSession?: (sessionId?: string) => void onReleaseControl?: () => void }): React.JSX.Element { const [sessionPopoverOpen, setSessionPopoverOpen] = useState(false) const sessionPopoverRef = useRef(null) const visibleRunningSessions = sessionStatus === 'running' && runningSessions.length ? runningSessions : [] useEffect(() => { if (!sessionPopoverOpen) return const closeOnOutsideClick = (event: MouseEvent): void => { if (!sessionPopoverRef.current?.contains(event.target as Node)) { setSessionPopoverOpen(false) } } document.addEventListener('mousedown', closeOnOutsideClick) return () => document.removeEventListener('mousedown', closeOnOutsideClick) }, [sessionPopoverOpen]) return ( ) }