사용법
AppShell은 빌더에서 화면 단위 블록으로 쓰기 좋아요. 상단 바, 공지, 본문, FAB, 하단 탭을 조합해 앱 레이아웃을 만들 수 있어요.
동네 마켓
서울 역삼동
블록 조합
Carousel, FilterBar, Grid를 AppShell 안에서 묶으면 쇼핑·피드 홈을 만들 수 있어요.
오늘의 마켓
역삼동
추천 상품
스타일 커스터마이징
AppShell 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<AppShell
className="shadow-md"
style={{
--gtd-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<AppShell
classNames={{
main: "my-app-shell-main"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-bg | 앱 배경 |
인터페이스
AppShellProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| top | ReactNode | — | 상단 영역 (Top 등) |
| noticeBar | ReactNode | — | 상단 공지 띠 |
| fab | ReactNode | — | 플로팅 액션 버튼 |
| bottomNav | ReactNode | — | 하단 탭 내비게이션 |
| children* | ReactNode | — | 스크롤 가능한 본문 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
AppShell 컴포넌트 Props 표
가져오기
import { AppShell } from "@/components/ui/AppShell";