Layout
화면 콘텐츠 배치 기준이에요. App(모바일)과 Admin(웹)은 정보 밀도가 달라 별도 기준을 둬요. 그리드·간격·반응형 규칙과 화면 셸 컴포넌트를 제공해요.
Grid
요소 정렬의 구조적 틀이에요.
App — 4 컬럼
좌우 여백 20px
Admin — 사이드바 272 + 12 컬럼
메인 최대 1168px · 거터 32px
272
Spacing
컨테이너 패딩·요소 간격 기준이에요. 디자인 수치를 그대로 재현해요.
App
| 좌우 여백 | 20px (px-5) |
|---|---|
| 상단 내비 | 48px |
| 하단 내비 | 60px |
| 본문 패딩 | 상 24 · 좌우 20 · 하 32 |
| 섹션 gap | 48px |
| 콘텐츠 gap | 16px |
| Safe Area | iOS 상 44 / 하 34 · AOS 상 36 / 하 48 |
Admin
| 사이드바 | 272px |
|---|---|
| 메인 최대폭 | 1168px |
| 그리드 | 12 컬럼 · 거터 32px |
| 메인 패딩 | 좌우 32 · 상 32 · 하 96 |
| 섹션 gap | 48px |
| 그룹 gap | 24px |
Responsive
Admin 화면이 해상도에 따라 재구성돼요. AdminLayout 은 lg 미만에서 사이드바를 숨겨 모바일형으로 전환돼요.
| Small (< 768) | 상단 내비 + 탭바, 사이드바 없음 — 모바일형 |
|---|---|
| Medium (768) | 사이드바 272 + 메인 496 |
| Large (≥ 1280) | 사이드바 272 + 메인 1168 |
AdminLayout
웹 어드민 셸 — 좌측 사이드바(272, lg+) + 메인(최대 1168, 패딩 32). 순수 레이아웃이라 RSC 호환.
tsx
import { AdminLayout, AdminNav } from '@openiot/ui'
<AdminLayout sidebar={<AdminNav>…</AdminNav>}>
<AdminHeader>…</AdminHeader>
{/* 페이지 콘텐츠 */}
</AdminLayout>AppLayout
모바일 앱 셸 — 상단 바 + 스크롤 콘텐츠 + 하단 내비 + iOS safe-area. 최대 폭 480, 좌우 여백 20.
홈
홈디바이스내 정보
tsx
import { AppLayout, AppBar, BottomNav } from '@openiot/ui'
<AppLayout header={<AppBar title="홈" />} bottomNav={<BottomNav>…</BottomNav>}>
{/* 페이지 콘텐츠 */}
</AppLayout>