ShellPage
harness-workspace레시피 기반 페이지 레이아웃. header, toolbar, aside, footer 슬롯과 density/width 정책을 지원합니다.
ShellPage Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children | ReactNode | — | 페이지 본문 콘텐츠 |
recipe | "list" | "detail" | "editor" | "dashboard" | "landing" | — | 레이아웃 레시피 프리셋 |
header | ReactNode | — | 상단 헤더 영역 |
toolbar | ReactNode | — | 툴바 영역 |
filters | ReactNode | — | 필터 영역 |
content | ReactNode | — | 메인 콘텐츠 (children 대체) |
aside | ReactNode | — | 사이드 패널 |
footer | ReactNode | — | 하단 푸터 |
bottomBar | ReactNode | — | 하단 고정 액션 바 |
width | "narrow" | "normal" | "wide" | "full" | — | 콘텐츠 최대 폭 |
density | "comfortable" | "compact" | — | 간격 밀도 |
resizableAside | boolean | — | aside 드래그 리사이즈 활성화 (기본 false) |
Import
tsx
import { ShellPage } from "@reopt-ai/opt-shell";