Navigation

MainHeader

Dark Mode

페이지 상단 헤더입니다. Breadcrumb 내비게이션과 우측 액션 버튼 영역으로 구성됩니다. Breadcrumb은 N-depth를 지원하며, 각 항목의 링크는 선택적입니다.

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

사용 컴포넌트:Breadcrumb

인터랙티브 데모

Depth

backHref

actions

helpContent

tsx

<MainHeader
  breadcrumb={[
    { label: "검색·DB", href: "/search" },
    { label: "인물 DB" },
  ]}
/>

1~N depth를 지원합니다. 마지막 항목은 현재 페이지(굵은 텍스트), 그 외는 경로 표시입니다.

backHref 또는 onBack으로 좌측 뒤로가기 버튼을 추가합니다.

actions에 액션 버튼, 아이콘 버튼, 검색바 등을 전달합니다. actions 내 컴포넌트는 h-9(36px)로 높이를 통일하는 것을 권장합니다.

helpContent를 전달하면 Breadcrumb 옆에 도움말 아이콘이 표시됩니다. 클릭 시 모달로 도움말을 확인할 수 있습니다.

href가 없는 항목은 클릭 불가 텍스트로 표시됩니다.

Prop	Type	Required	Default	설명
`breadcrumb`	`BreadcrumbItem[]` interface BreadcrumbItem { label: string; href?: string; }	✓	—	Breadcrumb 항목 목록 (1개 이상)
`backHref`	`string`	—	—	뒤로가기 링크 경로
`onBack`	`() => void`	—	—	뒤로가기 클릭 핸들러 (backHref 없을 때 사용)
`actions`	`ReactNode`	—	—	우측 액션 버튼 영역
`helpContent`	`ReactNode`	—	—	도움말 모달 콘텐츠 (전달 시 도움말 아이콘 표시)
`helpTitle`	`string`	—	"도움말"	도움말 모달 제목
`className`	`string`	—	—	추가 CSS 클래스

Prop	Type	Required	Default	설명
`label`	`string`	✓	—	표시 텍스트
`href`	`string`	—	—	클릭 시 이동할 경로 (없으면 텍스트만 표시)