레이아웃 · SINCE v0.1.0
Surface — 패딩·라운드·그림자를 토큰으로 조합하는 Surface
카드와 패널의 배경, 테두리, 여백, 라운드와 elevation을 테마 토큰으로 구성하는 React Native Surface입니다.
Surface 사용 시점과 역할
Surface는 앱의 콘텐츠를 일관된 표면으로 묶는 레이아웃 프리미티브입니다. padding은 토큰 키 또는 실측 숫자를 받고 radius와 elevation은 닫힌 테마 키로 제한됩니다.
- spacing 기반 padding과 radius 토큰 선택
- none·sm·md·lg elevation을 Android와 iOS 그림자로 해석
- bordered로 기본 테두리를 켜거나 제거
설치와 최소 예제
Surface: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Surface } from '@gj-kit/expo-ui';
<Surface padding="xl" radius="md" elevation="sm">{children}</Surface>접근성과 플랫폼 동작
Surface 자체는 의미 없는 View로 렌더링해 불필요한 접근성 노드를 만들지 않습니다. 제목, 버튼, 목록 등 실제 의미는 children 컴포넌트가 담당합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.