import { usePathname } from 'next/navigation'; import { Sidebar } from '@/components/ui/sidebar'; import { SidebarLink } from '@/components/ui/sidebar-link'; interface SidebarNavItem { label: string; href: string; } // 신규 화면이 추가될 때마다 이 목록에 항목을 늘린다. 「학생 회원」은 기획상 「회원정보관리」 // 그룹에 속하지만(Figma ADM_MEM_101 기준 — 「학생회원관리」가 아니다), 사이드바가 아직 flat // 구조(그룹 헤딩 없음)라 지금은 평탄한 항목으로만 추가한다 — 그룹 헤딩 컴포넌트 신설은 공용 // 컴포넌트 영역이라 design 레인 소관(§4.2)이다. const SIDEBAR_NAV_ITEMS: SidebarNavItem[] = [ { label: '홈', href: '/' }, { label: '학생 회원', href: '/students' }, ]; interface AdminSidebarProps { isMobileOpen: boolean; isDesktopCollapsed: boolean; onCloseMobile: () => void; } /** * 사이드바 배치 — 비주얼 셸(Sidebar)과 내비 항목(SidebarLink)은 design 공용 컴포넌트를 그대로 * 쓰고, 데스크톱 push/접힘과 모바일 오버레이+백드롭 등 반응형 배치(공용 컴포넌트가 제공하지 않음)만 * className 패스스루로 처리한다. 전부 Tailwind 반응형 클래스(CSS-first) — JS로 브레이크포인트를 * 판별하지 않는다. * * 주의(공용 컴포넌트 부족분 — 실증됨): SidebarLink는 아이콘 전용(라벨 숨김) variant를 제공하지 * 않는다. "홈"은 1글자라 접힘 폭(md:w-16=4rem)에서도 문제없었지만, "학생 회원"(4글자)을 추가한 * 뒤 접힘 상태를 실제로 확인한 결과 라벨이 글자 단위로 세로 줄바꿈되어("학\n생\n회\n원") 링크 * pill이 4줄로 늘어나는 것을 확인했다(라이트/다크 동일하게 재현 — 테마 무관, 순수 레이아웃 * 이슈). SidebarLink에 collapsed/아이콘 전용 variant(예: 접힘 시 라벨을 툴팁으로 옮기고 아이콘만 * 표시) 추가가 필요하다 — design 레인 소관(§4.2 공용 컴포넌트 신설)이라 이번 범위에서는 * 수정하지 않고 보고만 한다. */ export function AdminSidebar({ isMobileOpen, isDesktopCollapsed, onCloseMobile, }: AdminSidebarProps) { const pathname = usePathname(); return ( <> {isMobileOpen && ( <button type="button" aria-label="사이드바 닫기" onClick={onCloseMobile} className="fixed inset-0 z-30 bg-scrim md:hidden" /> )} <Sidebar className={`fixed inset-y-0 left-0 z-40 overflow-hidden transition-all duration-200 md:relative md:z-auto md:translate-x-0 ${ isMobileOpen ? 'translate-x-0' : '-translate-x-full' } ${isDesktopCollapsed ? 'md:w-16' : 'md:w-64'}`} > {SIDEBAR_NAV_ITEMS.map((item) => ( <SidebarLink key={item.href} href={item.href} label={item.label} isActive={pathname === item.href} /> ))} </Sidebar> </> ); }