AppLayout

Dark Mode

앱 전체 페이지를 감싸는 레이아웃 컴포넌트입니다. Sidebar(좌측 고정) + MainHeader(상단 고정, 내부 렌더) + SubHeader(선택) + Content(스크롤) 구조입니다.

import { AppLayout } from "@/shared/ui/common"

사용 컴포넌트:Sidebar,MainHeader

구조

AppLayout (h-screen, flex)

Rail

56px

OVERVIEW

Panel

240px (가변)

MainHeader (Breadcrumb + Actions, 고정)

subHeader? (TabBar 등, 고정)

main (children, 스크롤) — px-7 py-8

2-depth 사이드바: Rail(56px)은 항상 표시, Panel(240px)은 선택된 메뉴에 sections가 있을 때 표시됩니다.

내부 상태 관리: collapsed 및 서브패널 표시 상태는 Sidebar 내부에서 관리됩니다.

인터랙티브 데모

Actions 표시SubHeader (TabBar) 표시

콘텐츠 블록 A

이 영역만 스크롤됩니다.

콘텐츠 블록 B

tsx

<AppLayout
  sidebar={<Sidebar items={navItems} />}
  breadcrumb={[
    { label: "D·Hub" },
    { label: "대시보드" },
    { label: "요약" },
  ]}
  actions={
    <Button size="medium" leftIcon={UserPlus}>
      인물 추가
    </Button>
  }
>
  <PageContent />
</AppLayout>

SubHeader 슬롯

헤더 아래에 TabBar 등의 서브 네비게이션을 고정 배치할 수 있습니다.

tsx

<AppLayout
  sidebar={<Sidebar items={navItems} />}
  breadcrumb={[
    { label: "D·Hub" },
    { label: "대시보드" },
    { label: "요약" },
  ]}
  subHeader={
    <TabBar
      items={tabItems}
      value={tabValue}
      onChange={setTabValue}
    />
  }
>
  <PageContent />
</AppLayout>

Props

AppLayout

Prop	Type	Required	Default	설명
`sidebar`	`ReactNode`	✓	—	좌측 사이드바 영역. Sidebar 컴포넌트를 전달합니다.
`breadcrumb`	`BreadcrumbItem[]`	✓	—	MainHeader에 전달되는 브레드크럼 경로.
`backHref`	`string`	—	—	뒤로가기 링크 경로.
`onBack`	`() => void`	—	—	뒤로가기 클릭 핸들러 (backHref 없을 때 사용).
`actions`	`ReactNode`	—	—	MainHeader 우측 액션 버튼 영역.
`helpContent`	`ReactNode`	—	—	MainHeader 도움말 모달 내용.
`helpTitle`	`string`	—	—	도움말 모달 제목.
`subHeader`	`ReactNode`	—	—	헤더 바로 아래 고정되는 서브헤더 영역. TabBar 등에 사용합니다.
`children`	`ReactNode`	✓	—	메인 콘텐츠 영역. 이 영역만 스크롤됩니다.
`contentClassName`	`string`	—	—	콘텐츠 래퍼에 적용할 추가 클래스. 기본 패딩(px-7 py-8)을 커스터마이즈할 때 사용합니다.
`headerClassName`	`string`	—	—	MainHeader에 적용할 추가 클래스.
`className`	`string`	—	—	루트 요소에 적용할 추가 클래스.