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 { logout } from '@/app/(protected)/_actions';
import { ThemeToggleButton } from '@/app/(protected)/(basic)/_components/theme-toggle-button';
import { Header } from '@/components/ui/header';
interface AdminHeaderProps {
onOpenSidebar: () => void;
onToggleSidebarCollapse: () => void;
}
/**
* 헤더 배치 — 비주얼 셸(Header)은 design 공용 컴포넌트를 그대로 쓰고, 사이드바 토글 버튼(공용
* 컴포넌트가 제공하지 않는 상호작용)만 `leading` 슬롯에 주입한다. 테마 토글과 로그아웃은
* `children`(우측 슬롯)에 주입한다 — 테마 토글이 로그아웃 왼쪽에 오도록 DOM 순서를 그대로
* 시각 순서로 사용한다(Tab 포커스 순서도 동일하게 따라간다).
*/
export function AdminHeader({
onOpenSidebar,
onToggleSidebarCollapse,
}: AdminHeaderProps) {
return (
<Header
title="에듀페이 관리자"
leading={
<>
{/* 모바일 전용 — 사이드바를 오버레이로 연다 */}
<button
type="button"
aria-label="사이드바 열기"
onClick={onOpenSidebar}
className="border border-foreground/25 px-2 py-1 text-sm text-foreground md:hidden"
>
메뉴
</button>
{/* 데스크톱 전용 — 사이드바를 접거나 펼친다 */}
<button
type="button"
aria-label="사이드바 접기/펼치기"
onClick={onToggleSidebarCollapse}
className="hidden border border-foreground/25 px-2 py-1 text-sm text-foreground md:inline-flex"
>
메뉴
</button>
</>
}
>
<ThemeToggleButton />
<form action={logout}>
<button
type="submit"
className="border border-foreground/25 px-3 py-1.5 text-sm text-foreground"
>
로그아웃
</button>
</form>
</Header>
);
}