레이아웃 · SINCE v0.1.0
Section — 제목·부제·액션을 정렬하는 Section
콘텐츠 구역의 title, subtitle, actions와 본문 간격을 테마 규칙으로 정리하는 React Native Section 컴포넌트입니다.
Section 사용 시점과 역할
Section은 제목과 보조 설명을 왼쪽에, 관련 액션을 오른쪽에 배치하고 좁은 폭에서는 자연스럽게 줄바꿈합니다. gap은 spacing 토큰이나 실측 숫자로 조절할 수 있습니다.
- title, subtitle, actions를 선택적으로 조합
- 액션이 있는 반응형 헤더 행
- spacing 토큰 기반의 본문 gap
설치와 최소 예제
Section: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Section } from '@gj-kit/expo-ui';
<Section title="최근 기록" subtitle="오늘 업데이트" actions={<Button label="추가" />}>{content}</Section>접근성과 플랫폼 동작
Section은 시각적 구역을 제공하지만 landmark나 heading 역할을 강제하지 않습니다. 문서 계층이 필요하면 제목 콘텐츠에 적절한 접근성 역할을 함께 설계합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.