레이아웃 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
Card — 관련 콘텐츠를 정적인 표면으로 묶는 Card
outlined·elevated·filled 표면과 외부·내부 레이아웃 분리, 토큰 패딩·라운드를 제공하는 정적 Expo·React Native Card입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
Card 사용 시점과 역할
Card는 관련 콘텐츠를 하나의 정적인 View 표면으로 묶습니다. style은 바깥 크기와 배치, contentStyle은 자식 방향·정렬·간격을 담당하며 모든 variant가 같은 내부 content View를 사용합니다. 카드 전체 클릭 동작을 가장하지 않고 children이 제목, 본문, 버튼과 링크의 실제 의미를 소유하게 해 중첩 인터랙션과 모호한 접근성 구조를 피합니다.
- outlined·elevated·filled 변형과 테마 기반 elevation
- 바깥 style과 내부 contentStyle 분리, spacing padding과 radius 토큰
- onPress를 소유하지 않는 정적 View 계약으로 내부 콘텐츠 의미론 보존
설치와 최소 예제
Card: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Card } from '@gj-kit/expo-ui';
<Card variant="elevated" padding="xl" contentStyle={{ gap: 12 }}>{content}</Card>접근성과 플랫폼 동작
Card 자체는 의미 없는 View로 렌더링해 불필요한 접근성 노드를 만들지 않습니다. 제목, 설명, 버튼과 링크의 역할·이름·상태는 children이 담당하므로 카드 안에 여러 독립 액션을 안전하게 조합할 수 있습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.