@designbasekorea/ui-native

Designbase React Native UI 컴포넌트 라이브러리 — 앱 개발에 최적화된 네이티브 컴포넌트

📦 설치

npm install @designbasekorea/ui-native

Peer Dependencies

npm install react react-native

🚀 시작하기

앱 루트에 ThemeProvider를 감싸주세요:

import { ThemeProvider } from '@designbasekorea/ui-native';

export default function App() {
    return (
        <ThemeProvider theme="auto">
            <MyApp />
        </ThemeProvider>
    );
}

📋 사용 가능한 컴포넌트

🎨 테마 시스템

| Export | 설명 | |--------|------| | ThemeProvider | Context 기반 테마 (light/dark/auto) | | useTheme() | 현재 테마 토큰 접근 훅 | | lightTheme / darkTheme | 기본 테마 토큰 |

🧩 컴포넌트 (10개)

| 컴포넌트 | 설명 | 주요 Props | |----------|------|-----------| | Button | 버튼 | variant, size, loading, icon | | Input | 텍스트 입력 | label, error, helperText, icon | | Card | 카드 | variant, image, title, footer | | Badge | 배지 | variant, type(dot/number/text) | | Avatar | 아바타 | src, initials, status | | Chip | 칩/태그 | deletable, selected, variant | | Divider | 구분선 | orientation, thickness | | Spinner | 로딩 | size, color, label | | Toggle | 스위치 | isSelected, size | | Alert | 알림 | variant, closable, action |

💡 사용 예시

import {
    Button,
    Input,
    Card,
    Badge,
    Avatar,
    Toggle,
    Alert,
    useTheme,
} from '@designbasekorea/ui-native';
import { CheckIcon } from '@designbasekorea/icons';

function ProfileScreen() {
    const { theme, isDark, toggleTheme } = useTheme();

    return (
        <View style={{ flex: 1, padding: theme.spacing.m, backgroundColor: theme.colors.bg.primary }}>
            <Avatar src="https://..." size="xl" status="online" />

            <Input
                label="이름"
                placeholder="이름을 입력하세요"
                size="m"
            />

            <Card
                title="프로필 설정"
                subtitle="개인 정보를 관리하세요"
                variant="outlined"
            >
                <Toggle size="m" onChange={toggleTheme}>
                    다크모드
                </Toggle>
            </Card>

            <Button
                variant="primary"
                size="m"
                startIcon={<CheckIcon size={16} color="#fff" />}
                onPress={() => {}}
            >
                저장
            </Button>

            <Alert
                variant="success"
                message="프로필이 저장되었습니다."
                closable
            />
        </View>
    );
}

🎨 테마 커스텀

<ThemeProvider
    theme="light"
    lightThemeOverride={{
        colors: {
            brand: {
                primary: '#FF6B6B',  // 커스텀 브랜드 컬러
            },
        },
    }}
>
    <App />
</ThemeProvider>

📁 구조

packages/ui-native/
├── src/
│   ├── theme/
│   │   ├── tokens.ts         ← 디자인 토큰 (Light/Dark)
│   │   ├── ThemeProvider.tsx  ← Context 기반 테마
│   │   └── useTheme.ts       ← 테마 접근 훅
│   ├── components/
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Card/
│   │   ├── Badge/
│   │   ├── Avatar/
│   │   ├── Chip/
│   │   ├── Divider/
│   │   ├── Spinner/
│   │   ├── Toggle/
│   │   └── Alert/
│   └── index.ts              ← 메인 엔트리 포인트
├── package.json
└── tsconfig.json