File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import { usePathname } from 'next/navigation';
import { Sidebar } from '@/components/ui/sidebar';
import { SidebarLink } from '@/components/ui/sidebar-link';
interface SidebarNavItem {
label: string;
href: string;
}
// 현재 정의된 화면은 홈뿐이다 — 신규 화면이 추가될 때마다 이 목록에 항목을 늘린다.
const SIDEBAR_NAV_ITEMS: SidebarNavItem[] = [{ label: '홈', href: '/' }];
interface AdminSidebarProps {
isMobileOpen: boolean;
isDesktopCollapsed: boolean;
onCloseMobile: () => void;
}
/**
* 사이드바 배치 — 비주얼 셸(Sidebar)과 내비 항목(SidebarLink)은 design 공용 컴포넌트를 그대로
* 쓰고, 데스크톱 push/접힘과 모바일 오버레이+백드롭 등 반응형 배치(공용 컴포넌트가 제공하지 않음)만
* className 패스스루로 처리한다. 전부 Tailwind 반응형 클래스(CSS-first) — JS로 브레이크포인트를
* 판별하지 않는다.
*
* 주의(공용 컴포넌트 부족분): SidebarLink는 아이콘 전용(라벨 숨김) variant를 제공하지 않는다.
* 현재 유일한 내비 항목("홈")은 라벨이 1글자라 접힘 폭(w-16)에서도 시각적으로 문제없지만,
* 라벨이 긴 항목이 추가되면 SidebarLink에 collapsed/아이콘 전용 variant 추가가 필요하다.
*/
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>
</>
);
}