01
Capability 01
오버레이 컴포넌트
useOverlay로 Alert, Snackbar, BottomSheet, Loader 등을 한 방식으로 제어합니다.
OverlayProvider 하나로 화면별 오버레이 상태를 따로 만들지 않아도 됩니다.
APIshow* / hideOverlay
Coverage6 overlay types
ProviderGlobal state
- 함수 호출 중심 제어
- 상태 중복 감소
- 일관된 피드백 흐름
ZS-ui
Overview
@0610studioZS-UI
UI toolkit for Expo.
Documentation
문서 바로가기02
Capability 02
타이포그래피 스케일
heading부터 caption까지 6×6 타이포그래피 체계를 제공합니다.
ZSText와 useTheme.typography가 같은 기준을 사용합니다.
Scale6 groups × 6 levels
AccessuseTheme.typography
BridgeZSText + Text
- 일관된 텍스트 계층
- 같은 기준으로 재사용
- 읽기 흐름 유지
03
Capability 03
폴더블 대응
Android 폴더블의 접힘과 펼침 상태를 감지할 수 있습니다.
ZSContainer로 펼침 상태의 양면 레이아웃을 구성할 수 있습니다.
PlatformAndroid foldables
HookuseFoldingState
LayoutrightComponent
- 폴딩 상태 감지
- 양면 레이아웃 지원
- 넓은 화면에 자연스럽게 대응
04
Capability 04
일관된 Theme
ThemeProvider로 팔레트, 다크 모드, 타이포그래피 기준을 앱 전체에 적용합니다.
useTheme로 현재 mode와 palette를 읽고, ZSView 같은 컴포넌트에서는 color prop으로 layer와 primary 계열 배경을 바로 사용할 수 있습니다.
ProviderThemeProvider
ModeLight / Dark
Viewcolor prop
- 앱 전체에 같은 팔레트 적용
- 다크 모드와 시스템 모드 대응
- ZSView 색상 prop으로 빠른 배경 지정
05
Capability 05
공통 화면 구조
ZSContainer가 SafeArea, 스크롤, 상태바, 키보드 대응을 함께 제공합니다.
입력 화면과 일반 화면을 같은 패턴으로 구성할 수 있습니다.
RootZSContainer
KeyboardAuto scroll
LayoutHeader / Footer / Foldable
- 공통 화면 패턴
- 키보드 대응 내장
- 레이아웃 반복 감소