본문으로 건너뛰기

개요

@0610studio/zs-ui는 React Native Expo 환경에서 동작하는 UI 컴포넌트 라이브러리입니다. 다크 모드, 타이포그래피, 오버레이(Alert, BottomSheet, Snackbar), 폴더블 디바이스 지원까지 포함합니다.

한눈에 보기​

현재 저장소 소스로 빌드한 앱 예제 카탈로그입니다. 예제 불러오기를 선택하면 테마, 레이아웃, 입력, 선택, 오버레이와 폴더블 예제를 탐색하고 직접 조작할 수 있습니다.

앱 예제 Playgroundv1.0.3
소스 보기새 창에서 열기
Interactive exampleZS-ui 앱 예제 Playground

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

개발자 경험​

1. Declarative Overlay​

화면마다 모달의 isOpen 상태를 따로 만들고 관리할 필요가 없습니다. 이것이 기본 원칙입니다. useOverlay 훅에서 showAlert, showBottomSheet, showSnackBar를 호출하면 끝입니다. 숨기고 싶을 때는 hideOverlay로 한 번에 처리합니다. 내부 컨텍스트는 OverlayProvider 하나가 모두 담당합니다.

const { showAlert, showSnackBar, hideOverlay } = useOverlay();

showAlert({ title: '확인', informative: '저장되었습니다.' });
showSnackBar({ message: '성공', type: 'success' });
hideOverlay('all');

2. Consistent Container​

ZSContainer가 SafeAreaView, ScrollView, StatusBar를 하나로 묶어 제공합니다. 모든 스크린에 동일한 구조를 적용하면 SafeArea, 키보드, 폴더블 처리가 자동으로 따라옵니다.

<ZSContainer edges={['bottom']} topComponent={<Header />}>
  {/* 스크린 내용 */}
</ZSContainer>

3. Input Scroll Tracking​

키보드가 올라오면 ZSContainer가 현재 포커스된 입력 필드를 자동으로 스크롤해서 보여줍니다. 별도 플래그를 관리하거나 KeyboardAvoidingView를 수동으로 배치할 필요가 없습니다.

어떤 문서부터 볼까요?​

목적다음 문서
앱 루트 설정과 첫 화면 구성시작하기
색상·타이포그래피·공통 토큰 사용설정과 테마
입력, 선택, 피드백 컴포넌트 탐색UI 컴포넌트
Alert, BottomSheet, Snackbar 연결Overlay
저장소 예제를 직접 조작Playground

설치​

npx expo install @0610studio/zs-ui

문서 구조​

추가 리소스​