구조 (섹션/Row)
섹션
반응 그룹 단위
Row
가로 배치 줄
스페이서
여백
기본 컴포넌트
T
제목
Title / Heading
버튼
Action Button
입력
Input / Select
🔍
검색
Search Bar
데이터
📊
통계 카드
KPI / Stats
테이블
Data Grid
📈
차트
Line / Bar
Form
컨테이너
Tabs
카드
Card / Paper
카드 폭 600px
NORMAL
/dashboard/orders (카드 슬롯)
⋮⋮
Title
주문 관리 대시보드
Button
+ 신규
Button
↓ 내보내기
⋮⋮
Date
📅 시작일
Date
📅 종료일
Select
▾ 상태
Search
🔍 주문번호 / 고객명 검색…
⋮⋮
Stat
오늘 주문
124
Stat
처리 대기
38
Stat
매출
₩8.4M
Stat
반품
3
⋮⋮
Table
주문 목록
주문번호고객날짜금액
ORD-2938김유진04/19₩128,000
ORD-2937박철수04/19₩84,500
ORD-2936이지은04/18₩256,000
ORD-2935정민호04/18₩49,900
속성
SECTION · HEADER
wide normal narrow tiny
반응 브레이크
WIDE
≥ 900px
가로 4열
NORMAL
560–900px
가로 2열
NARROW
360–560px
세로 스택
TINY
< 360px
핵심만 유지
💡 섹션 기반 구조
절대좌표가 아닌 섹션 → Row → 위젯 구조로 저장됩니다. 대시보드 소환 시 카드 크기에 맞춰 @container 쿼리로 자동 반응합니다.
저장 포맷 미리보기
{
  "sections": [
    {"id": "hdr",
     "policy": "header",
     "rows": [
       {"items": [
         {"type":"title"},
         {"type":"button"},
         {"type":"button"}
       ]}
     ]},
    {"id": "stats",
     "policy": "stats",
     "rows": [...]}
  ]
}