YOUR FIRST SCREEN

좋은 시작을 위한
작은 준비.

하나의 패키지, 익숙한 React API. 지금 첫 번째 화면을 만들어 보세요.

설치하기

React 18 이상을 사용하는 프로젝트에서 설치하세요. React Native에서는 네이티브 구현이 자동으로 선택됩니다.

npm install woosign-system

# 또는
pnpm add woosign-system

테마 연결하기

ThemeProvider로 앱을 감싸면 컴포넌트에 일관된 테마가 적용됩니다. 알림을 사용할 때는 ToastProvider를 추가하세요.

import {ThemeProvider, ToastProvider, Button} from 'woosign-system';

export default function App() {
  return (
    <ThemeProvider defaultColorScheme="light">
      <ToastProvider>
        <Button onPress={() => console.log('Hello!')}>시작하기</Button>
      </ToastProvider>
    </ThemeProvider>
  );
}

Web과 Native에서 사용하기

플랫폼에 맞는 레이아웃을 사용하면서 Button, Card, Input 등에는 같은 API를 전달합니다.

React / Web

import {Button, Text} from 'woosign-system';

export function Welcome() {
  return (
    <main style={{padding: 24}}>
      <Text variant="h2">Hello, Paper & Ink.</Text>
      <Button onPress={() => console.log('Web')}>시작하기</Button>
    </main>
  );
}

React Native

import {View} from 'react-native';
import {Button, Text} from 'woosign-system';

export function Welcome() {
  return (
    <View style={{padding: 24}}>
      <Text variant="h2">Hello, Paper & Ink.</Text>
      <Button onPress={() => console.log('Native')}>시작하기</Button>
    </View>
  );
}

네이티브 폰트 등록과 환경별 설정은 저장소 README의 가이드를 확인하세요.

전체 설치 가이드 ↗

나만의 화면 만들기

컴포넌트의 상태를 바꾸고, 사용 코드를 복사하고, 제품의 이야기를 담아보세요.

컴포넌트 둘러보기 ↗

좋은 시작을 위한작은 준비.