P01 앱 셸

상호작용 확인

Sidebar + Header + Content + 선택적 상세 패널. 접기, 모바일 메뉴

구성

Sidebar + Header + Content + 선택적 상세 패널. 접기, 모바일 메뉴

구성 컴포넌트

전체 구역 프리뷰

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다. 아래 컨트롤로 구성을 바꾸면 코드도 바뀝니다.

이슈

본문 영역 · 화면마다 머리말과 내용을 그립니다

즐겨찾기 묶음(sections)바닥 영역(footer)

<AppShell
  name={brand.name}
  mark={brand.shortName[0]}
  navTitle="워크스페이스"
  nav={[{ href: "/issues", label: "이슈", icon: ListTodo, active: true }, …]}
  sections={[{ title: "즐겨찾기", items: [{ label: "디자인 시스템 v1", marker: true }] }]}
  footer={<button className={shellItemClass}>테마 전환</button>}
>
  <header>
    <ShellMenuTrigger />
    …
  </header>
  {children}
</AppShell>

상태 흐름

768px 이상: 사이드바(너비 shell.sidebar-width)가 항상 보인다. 현재 화면의 메뉴 항목은 aria-current="page"와 강조 배경.
768px 미만: 사이드바를 숨기고, 화면 머리말의 메뉴 버튼(ShellMenuTrigger)이 같은 내용을 왼쪽 시트(너비 shell.sidebar-width-mobile)로 연다. 메뉴를 고르면 시트가 닫힌다.
사이드바 접기(아이콘만 남기기)는 아직 없다. 필요하면 Sidebar 컴포넌트의 collapsible을 쓴다.

샘플 데이터

메뉴와 즐겨찾기는 이슈 예제의 샘플(src/components/issues/data.ts의 projects)을 쓴다. 제품 이름은 src/config/brand.ts.

설치 항목

패턴은 아직 Registry 항목이 없습니다. 구성 컴포넌트를 설치한 뒤 아래 파일을 프로젝트에 복사합니다.

npx shadcn@4.23.0 add @adcapsule/sheet @adcapsule/button

파일: src/components/patterns/app-shell.tsx
내보내는 이름: AppShell, ShellMenuTrigger, shellItemClass

이 패턴을 쓰는 템플릿

실제로 쓰는 화면: 이슈 작업 공간

전체 구역 프리뷰

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다. 아래 컨트롤로 구성을 바꾸면 코드도 바뀝니다.

이슈

본문 영역 · 화면마다 머리말과 내용을 그립니다

즐겨찾기 묶음(sections)바닥 영역(footer)

<AppShell
  name={brand.name}
  mark={brand.shortName[0]}
  navTitle="워크스페이스"
  nav={[{ href: "/issues", label: "이슈", icon: ListTodo, active: true }, …]}
  sections={[{ title: "즐겨찾기", items: [{ label: "디자인 시스템 v1", marker: true }] }]}
  footer={<button className={shellItemClass}>테마 전환</button>}
>
  <header>
    <ShellMenuTrigger />
    …
  </header>
  {children}
</AppShell>

상태 흐름

768px 이상: 사이드바(너비 shell.sidebar-width)가 항상 보인다. 현재 화면의 메뉴 항목은 aria-current="page"와 강조 배경.
768px 미만: 사이드바를 숨기고, 화면 머리말의 메뉴 버튼(ShellMenuTrigger)이 같은 내용을 왼쪽 시트(너비 shell.sidebar-width-mobile)로 연다. 메뉴를 고르면 시트가 닫힌다.
사이드바 접기(아이콘만 남기기)는 아직 없다. 필요하면 Sidebar 컴포넌트의 collapsible을 쓴다.