Navigation

MainHeader

Dark Mode

메인 페이지 헤더입니다. 좌측 Breadcrumb(뒤로가기 + 제목)과 우측 액션 버튼·프로필 영역으로 구성됩니다. onToggleCollapse를 전달하면 헤더 좌측에 사이드바 접기/펼치기 토글 버튼이 생성됩니다. collapsed 상태는 AppLayout을 사용하는 page가 소유하며 Sidebar와 함께 공유합니다.

import { MainHeader } from "@/shared/ui/widget/navigation"

인터랙티브 데모

디캠프 주식회사스타트업 공간

Options

tsx

<MainHeader
  title="성과 대시보드"
  onBack={() => router.back()}
  actions={
    <>
      <MainHeaderIconButton icon={Settings} label="설정" />
      <MainHeaderIconButton icon={Search} label="검색" />
    </>
  }
  profile={{
    name: "디캠프 주식회사",
    description: "투자사 공간",
    avatarUrl: "https://...",
  }}
/>

사이드바 토글 연동

사이드바 접기/펼치기 버튼은 MainHeader에 위치합니다.

토글 버튼 렌더 조건:onToggleCollapse를 전달할 때만 헤더 좌측에 PanelRight 버튼이 나타납니다. 전달하지 않으면 버튼이 없는 기본 레이아웃입니다.

상태 소유권:collapsed 상태는 AppLayout을 사용하는 page 컴포넌트가 소유합니다. MainHeader는 버튼을 렌더하고 핸들러를 호출할 뿐입니다. Sidebar는 동일한 collapsed 값을 받아 너비를 변경합니다.

AppLayout과 함께 사용: 전체 연동 예시는 AppLayout 문서의 인터랙티브 데모를 참고하세요.

tsx

// collapsed 상태를 page에서 소유하고 Sidebar/MainHeader 양쪽에 주입합니다
const [collapsed, setCollapsed] = useState(false);

<MainHeader
  title="성과 대시보드"
  onBack={() => router.back()}
  collapsed={collapsed}
  onToggleCollapse={() => setCollapsed((v) => !v)}
  actions={
    <>
      <MainHeaderIconButton icon={Settings} label="설정" />
      <MainHeaderIconButton icon={Search} label="검색" />
    </>
  }
  profile={{ name: "디캠프 주식회사", description: "투자사 공간" }}
/>

Variants

프로필, 액션 버튼 유무에 따른 변형입니다.

디캠프 주식회사투자사 공간

MainHeaderIconButton

액션 영역에 사용할 수 있는 28×28 아이콘 버튼 헬퍼입니다.

Props

MainHeaderProps

Prop	Type	Required	Default	설명
`title`	`string`	✓	—	Breadcrumb 제목 텍스트
`backHref`	`string`	—	—	뒤로가기 링크 경로 (Link 컴포넌트 사용)
`onBack`	`() => void`	—	—	뒤로가기 클릭 핸들러 (backHref 없을 때 사용)
`collapsed`	`boolean`	—	false	사이드바의 현재 접힘 상태. 토글 버튼의 aria-label 결정에 사용됩니다. onToggleCollapse와 함께 전달하세요.
`onToggleCollapse`	`() => void`	—	—	전달 시 헤더 좌측에 사이드바 접기/펼치기 버튼(PanelRight)이 생성됩니다. Sidebar의 collapsed 상태를 page에서 소유하고 이 핸들러로 변경합니다.
`actions`	`ReactNode`	—	—	우측 액션 버튼 영역 (자유 배치)
`profile`	`MainHeaderProfile` interface MainHeaderProfile { name: string; description?: string; avatarUrl?: string; }	—	—	프로필 정보 (아바타 + 이름 + 설명)
`className`	`string`	—	—	추가 CSS 클래스

MainHeaderProfile

Prop	Type	Required	Default	설명
`name`	`string`	✓	—	회사/유저 이름
`description`	`string`	—	—	스페이스 설명 (예: 스타트업 공간)
`avatarUrl`	`string`	—	—	아바타 이미지 URL (없으면 회색 원)

MainHeaderIconButtonProps

Prop	Type	Required	Default	설명
`icon`	`ComponentType<{ className?: string }>`	✓	—	아이콘 컴포넌트
`onClick`	`() => void`	—	—	클릭 핸들러
`label`	`string`	—	—	접근성 라벨 (aria-label)