'use client'; import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import { useEffect, useState } from 'react'; import { createClient } from '@/lib/supabase/client'; /* ── 3구역 네비게이션 구조 ─────────────────────────────────── */ interface NavItem { href: string; label: string; badge?: string; icon: React.ReactNode; } interface NavGroup { title: string; items: NavItem[]; } const navGroups: NavGroup[] = [ { title: 'AI 상품', items: [ { href: '/services/music', label: 'AI 음악 마스터', badge: 'NEW', icon: ( ), }, { href: '/services/blog', label: '블로그 자동화 팩', icon: ( ), }, ], }, { title: '무료 도구', items: [ { href: '/saju', label: 'AI 사주 분석', badge: '무료', icon: ( ), }, ], }, ]; /* ── 배지 색상 ─────────────────────────────────────────────── */ function badgeStyle(badge: string) { switch (badge) { case 'HOT': return 'bg-rose-500/15 text-rose-400'; case '구독': return 'bg-violet-500/15 text-violet-400'; case '무료': return 'bg-sky-500/15 text-sky-400'; case 'DEMO': return 'bg-amber-500/15 text-amber-400'; default: return 'bg-emerald-500/15 text-emerald-400'; } } /* ── 컴포넌트 ──────────────────────────────────────────────── */ interface SidebarProps { isOpen: boolean; onClose: () => void; } export default function Sidebar({ isOpen, onClose }: SidebarProps) { const pathname = usePathname(); const router = useRouter(); const [userEmail, setUserEmail] = useState(null); const supabase = createClient(); useEffect(() => { supabase.auth.getUser().then(({ data }) => { setUserEmail(data.user?.email ?? null); }); const { data: { subscription } } = supabase.auth.onAuthStateChange((_, session) => { setUserEmail(session?.user?.email ?? null); }); return () => subscription.unsubscribe(); }, []); const handleLogout = async () => { await supabase.auth.signOut(); router.push('/'); router.refresh(); onClose(); }; return ( <> {/* Mobile overlay */} {isOpen && (
)} {/* Sidebar */} ); }