File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ReactNode } from "react";
interface SidebarProps {
header?: ReactNode;
children: ReactNode;
footer?: ReactNode;
/** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */
className?: string;
}
/** 사이드바 셸(컨테이너). 내비게이션 항목 구성·활성 상태 판단은 호출부(feature) 책임. */
export function Sidebar({ header, children, footer, className }: SidebarProps) {
return (
<aside
// h-full(퍼센트 높이)을 쓰지 않는다 — 부모가 flex-grow로 산출한 높이는 CSS 퍼센트
// 해석의 기준(containing block)이 되지 못해 h-full이 auto로 무너질 수 있다. 대신
// 명시적 높이를 지정하지 않아(auto) 부모 flex 컨테이너의 기본 align-items:stretch가
// 그대로 적용되게 한다 — 이 방식은 부모 높이가 퍼센트든 flex-grow든 항상 안정적으로
// 동작한다.
className={`flex w-64 flex-col border-r border-border bg-surface ${className ?? ""}`}
>
{header && <div className="border-b border-border p-4">{header}</div>}
<nav className="flex-1 overflow-y-auto p-2">{children}</nav>
{footer && <div className="border-t border-border p-4">{footer}</div>}
</aside>
);
}