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
'use client';
import { useSidebar } from '@/app/(protected)/(basic)/_hooks/use-sidebar';
import { AdminFooter } from './admin-footer';
import { AdminHeader } from './admin-header';
import { AdminSidebar } from './admin-sidebar';
interface AdminShellProps {
children: React.ReactNode;
}
/**
* Basic 레이아웃의 상호작용 경계 — 헤더·사이드바·풋터를 조립하고 사이드바 상태(useSidebar)를
* 소유한다. page 콘텐츠(children)는 상위 Server Component가 렌더한 결과를 props로 그대로
* 통과시켜 RSC를 유지한다 — 이 컴포넌트 자신은 children의 내용을 알거나 가공하지 않는다.
*/
export function AdminShell({ children }: AdminShellProps) {
const sidebar = useSidebar();
return (
<div className="flex min-h-screen flex-col">
<AdminHeader
onOpenSidebar={sidebar.openMobile}
onToggleSidebarCollapse={sidebar.toggleDesktopCollapse}
/>
<div className="flex flex-1">
{/* Sidebar(components/ui/)는 자기 높이를 h-full(퍼센트)로 채우는데, 바로 위 부모(flex-1로
산출된 행)의 높이는 flex-grow 결과값이라 CSS 퍼센트-높이 해석의 기준(containing block)이
되지 못해 h-full이 auto로 무너지고 border-r이 메뉴 항목 높이까지만 그려졌다. 이 wrapper는
자기 높이를 지정하지 않아(auto) align-items:stretch로 부모 높이를 그대로 받고, 그 stretch로
정해진 높이는 정의된 값으로 취급되어 h-full이 정상 해석된다 — Sidebar 자체는 수정하지 않음
(components/ui/ 소관). */}
<div className="flex">
<AdminSidebar
isMobileOpen={sidebar.isMobileOpen}
isDesktopCollapsed={sidebar.isDesktopCollapsed}
onCloseMobile={sidebar.closeMobile}
/>
</div>
<div className="flex flex-1 flex-col">
<main className="flex flex-1 flex-col">{children}</main>
<AdminFooter />
</div>
</div>
</div>
);
}