레이아웃 · SINCE v0.1.0
ContentFrame — 문서와 앱 화면의 읽기 폭을 제한하는 ContentFrame
최대 콘텐츠 폭과 반응형 여백을 한곳에서 관리하는 Expo·React Native 레이아웃 프레임입니다.
ContentFrame 사용 시점과 역할
ContentFrame은 기본 최대 폭 1040 안에서 가로 여백과 위·아래 여백을 제어합니다. 내비게이션이나 safe area를 소유하지 않아 앱 셸 안에서 재사용하기 쉽습니다.
- 기본 1040의 maxWidth와 전체 너비 프레임
- 공통 padding 또는 개별 topPadding·bottomPadding
- center 옵션으로 넓은 화면에서 프레임 중앙 정렬
설치와 최소 예제
ContentFrame: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { ContentFrame } from '@gj-kit/expo-ui';
<ContentFrame maxWidth={1040} padding="xl" center>{children}</ContentFrame>접근성과 플랫폼 동작
레이아웃 전용 View이며 문서 구조를 임의로 추가하지 않습니다. 내부 heading과 landmark는 화면의 콘텐츠 구조에 맞춰 별도로 제공합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.