File name
Commit message
Commit date
08-14
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>
);
}