SurfaceLayout

core

Surface 루트 레이아웃. flex + 기본 section spacing 적용, loading prop으로 LoadingOverlay 자동 래핑.

100%

프로젝트 개요

SurfaceLayout이 Surface spacing과 LoadingOverlay를 함께 관리합니다.

Surface 내부 카드와 섹션이 기본 간격 규칙에 맞춰 배치됩니다.

로딩이 켜지면 전체 Surface가 한 번에 오버레이 처리됩니다.

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

SurfaceLayout 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	Surface 콘텐츠
`loading`	`boolean`	—	로딩 상태. 설정 시 LoadingOverlay로 자동 래핑
`loadingLabel`	`string`	—	LoadingOverlay 접근성 레이블
`spacing`	`"section" \| "group" \| "element" \| "none"`	`"section"`	Surface 최상위 자식 사이 간격. 데이터 밀도가 높은 Surface는 group/element로 낮출 수 있음
`className`	`string`	—	기본 스타일 오버라이드

tsx

import { SurfaceLayout } from "@reopt-ai/opt-ui";