@0610studio/zs-ui 0.0.13 → 0.0.14

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +1,2 @@
-#Tue Oct 22 20:15:01 KST 2024
+#Tue Nov 05 10:55:22 KST 2024
 gradle.version=8.9

package/build/index.d.ts

@@ -1,5 +1,6 @@
+import { useTheme, NotifyProvider, ThemeProvider } from './model';
 import { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, types as uiTypes } from './ui';
 import { AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, types as notifyTypes } from './notify';
-export { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, uiTypes, // UI 관련 타입
+export { useTheme, NotifyProvider, ThemeProvider, ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, uiTypes, // UI 관련 타입
 notifyTypes };
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,IAAI,OAAO,EACjB,MAAM,MAAM,CAAC;AAEd,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,IAAI,WAAW,EACrB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EAEd,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EAEX,OAAO,EAAO,WAAW;AACzB,WAAW,EACZ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,IAAI,OAAO,EACjB,MAAM,MAAM,CAAC;AAEd,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,IAAI,WAAW,EACrB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,QAAQ,EACR,cAAc,EACd,aAAa,EAEb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EAEd,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EAEX,OAAO,EAAO,WAAW;AACzB,WAAW,EACZ,CAAC"}

package/build/index.js

@@ -1,6 +1,9 @@
+import { useTheme, NotifyProvider, ThemeProvider, } from './model';
 import { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, types as uiTypes } from './ui';
 import { AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, types as notifyTypes } from './notify';
-export { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, 
+export { useTheme, NotifyProvider, ThemeProvider, 
+// ---
+ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, 
 // ---
 AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, 
 // ---

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,IAAI,OAAO,EACjB,MAAM,MAAM,CAAC;AAEd,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,IAAI,WAAW,EACrB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc;AACd,MAAM;AACN,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW;AACX,MAAM;AACN,OAAO,EAAO,WAAW;AACzB,WAAW,CAAG,eAAe;EAC9B,CAAC","sourcesContent":["import { \n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  types as uiTypes \n} from './ui';\n\nimport { \n  AlertNotify, \n  BottomSheetNotify, \n  SnackbarNotify, \n  useNotifyProvider, \n  useNotify,\n  BSTextInput,\n  PopOverButton,\n  PopOverMenu,\n  types as notifyTypes \n} from './notify';\n\nexport {\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  // ---\n  AlertNotify, \n  BottomSheetNotify, \n  SnackbarNotify, \n  useNotifyProvider, \n  useNotify, \n  BSTextInput,\n  PopOverButton,\n  PopOverMenu,\n  // ---\n  uiTypes,      // UI 관련 타입\n  notifyTypes   // Notify 관련 타입\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,cAAc,EACd,aAAa,GACd,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,IAAI,OAAO,EACjB,MAAM,MAAM,CAAC;AAEd,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,IAAI,WAAW,EACrB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,QAAQ,EACR,cAAc,EACd,aAAa;AACb,MAAM;AACN,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc;AACd,MAAM;AACN,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW;AACX,MAAM;AACN,OAAO,EAAO,WAAW;AACzB,WAAW,CAAG,eAAe;EAC9B,CAAC","sourcesContent":["import {\n  useTheme,\n  NotifyProvider,\n  ThemeProvider,\n} from './model'\n\nimport { \n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  types as uiTypes \n} from './ui';\n\nimport { \n  AlertNotify, \n  BottomSheetNotify, \n  SnackbarNotify, \n  useNotifyProvider, \n  useNotify,\n  BSTextInput,\n  PopOverButton,\n  PopOverMenu,\n  types as notifyTypes \n} from './notify';\n\nexport {\n  useTheme,\n  NotifyProvider,\n  ThemeProvider,\n  // ---\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  // ---\n  AlertNotify, \n  BottomSheetNotify, \n  SnackbarNotify, \n  useNotifyProvider, \n  useNotify, \n  BSTextInput,\n  PopOverButton,\n  PopOverMenu,\n  // ---\n  uiTypes,      // UI 관련 타입\n  notifyTypes   // Notify 관련 타입\n};\n"]}

package/build/model/index.d.ts

@@ -0,0 +1,4 @@
+import { NotifyProvider } from "./useNotifyProvider";
+import { ThemeProvider, useTheme } from "./useThemeProvider";
+export { useTheme, NotifyProvider, ThemeProvider, };
+//# sourceMappingURL=index.d.ts.map

package/build/model/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EACL,QAAQ,EACR,cAAc,EACd,aAAa,GACd,CAAA"}

package/build/model/index.js

@@ -0,0 +1,4 @@
+import { NotifyProvider } from "./useNotifyProvider";
+import { ThemeProvider, useTheme } from "./useThemeProvider";
+export { useTheme, NotifyProvider, ThemeProvider, };
+//# sourceMappingURL=index.js.map

package/build/model/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EACL,QAAQ,EACR,cAAc,EACd,aAAa,GACd,CAAA","sourcesContent":["import { NotifyProvider } from \"./useNotifyProvider\"; \nimport { ThemeProvider, useTheme } from \"./useThemeProvider\";\n\nexport {\n  useTheme,\n  NotifyProvider,\n  ThemeProvider,\n}\n"]}

package/docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/docs/blog/2024-11-12-welcome/index.md

@@ -0,0 +1,29 @@
+---
+slug: welcome
+title: Welcome
+authors: [rightHot]
+tags: [zsUi, barabom]
+---
+
+`ZS-ui`는 `바라봄APP`에서 사용되는 UI 컴포넌트를 분리하기 위해 개발되었습니다.
+
+단순한 구조를 지향하여, Expo를 시작하는 분들에게 영감을 주는 라이브러리가 되었으면 합니다.
+
+<!-- truncate -->
+
+<br />
+
+현재 `바라봄APP`은 React Native CLI에서 Expo로 마이그레이션 작업 중이며, `ZS-ui`와 함께 활발히 개발하고 있습니다.
+
+바라봄 앱에 대한 자세한 정보는 아래에서 확인 가능합니다.
+
+<div style={{ textAlign: 'left' }}>
+    <img src="https://barabom.me/assets/img_orimage.jpg" style={{ width: 500, height: 250 }} />
+</div>
+  
+
+- **홈페이지**: [https://barabom.me](https://barabom.me)
+
+- **구글 플레이**: [다운로드 링크](https://play.google.com/store/apps/details?id=com.rn_drpet)
+
+- **애플 앱스토어**: [다운로드 링크](https://apps.apple.com/kr/app/id1516235091)

package/docs/blog/authors.yml

@@ -0,0 +1,8 @@
+rightHot:
+  name: 김정훈
+  title: Front End Engineer
+  url: https://github.com/KimJeonghun91
+  image_url: https://kimjeonghun91.github.io/assets/img/me.png
+  page: true
+  socials:
+    github: KimJeonghun91

package/docs/blog/tags.yml

@@ -0,0 +1,9 @@
+zsUi:
+  label: ZS-ui
+  permalink: /zsui
+  description: ZS-ui tag description
+
+barabom:
+  label: 바라봄
+  permalink: /barabom
+  description: barabom tag description

package/docs/docs/Theme/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Theme",
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
+}

package/docs/docs/Theme/palette.md

@@ -0,0 +1,107 @@
+---
+sidebar_position: 2
+---
+
+# palette
+
+색상 팔레트를 설정하는 함수로, 라이트 및 다크 모드를 포함하며 사용자 정의 색상 팔레트를 지원합니다.
+
+
+### 기본 사용법
+
+```tsx
+import { useTheme } from '@0610studio/zs-ui/src/model/useThemeProvider';
+
+const {
+  palette: {
+    toggleTheme,
+    mode,
+    background,
+    text,
+    primary,
+    secondary,
+    danger,
+    warning,
+    success,
+    information,
+  },
+} = useTheme();
+```
+
+- 테마 모드 전환: toggleTheme 함수를 통해 라이트와 다크 모드를 전환할 수 있습니다.
+
+- 현재 테마 모드 확인: mode 값을 통해 현재 테마가 'light'인지 'dark'인지 확인할 수 있습니다.
+
+
+```tsx
+<Pressable onPress={toggleTheme}>
+  <Text>현재 모드: {mode}</Text>
+</Pressable>
+```
+
+<br />
+
+### 색상 팔레트
+
+각 테마 색상은 primary, secondary, danger, warning, success, information 과 같이 지정되어 있으며, 팔레트의 각 색상은 라이트와 다크 모드를 지원합니다.
+
+```tsx
+<View style={{ backgroundColor: primary.lighter }}>
+  <Text style={styles.textWhite}>Primary Lighter</Text>
+</View>
+<View style={{ backgroundColor: primary.main }}>
+  <Text style={styles.textWhite}>Primary Main</Text>
+</View>
+<View style={{ backgroundColor: secondary.main }}>
+  <Text style={styles.textWhite}>Secondary Main</Text>
+</View>
+
+<Text style={{ color: text.primary }}>Text Primary Color</Text>
+<Text style={{ color: text.secondary }}>Text Secondary Color</Text>
+<Text style={{ color: text.danger }}>Text Danger Color</Text>
+<Text style={{ color: text.warning }}>Text Warning Color</Text>
+<Text style={{ color: text.success }}>Text Success Color</Text>
+<Text style={{ color: text.information }}>Text Information Color</Text>
+```
+
+**타입**
+
+```tsx title="ColorPalette 타입"
+export type ColorPalette = {
+  0: string;
+  5: string;
+  10: string; // p-lighter
+  20: string; // p-light
+  30: string;
+  40: string;
+  50: string; // p-main
+  60: string; // p-dark
+  70: string; // p-darker
+  80: string;
+  90: string;
+  100: string;
+  main: string;
+};
+
+export type ColorPaletteExtend = ColorPalette & {
+  lighter: string;
+  light: string;
+  dark: string;
+  darker: string;
+};
+```
+
+```json title="텍스트 타입"
+{
+  main: string;
+  primary: string;
+  secondary: string;
+  disabled: string;
+  danger: string;
+  warning: string;
+  success: string;
+  information: string;
+  white: string;
+  black: string;
+}
+```

package/docs/docs/Theme/typography.md

@@ -0,0 +1,20 @@
+---
+sidebar_position: 3
+---
+
+# typography
+
+ZS-ui component가 아닌 style 에서도 적용할 수 있도록 useTheme 에서 typography 를 제공합니다.
+
+
+### 사용법
+
+```tsx
+import { useTheme } from '@0610studio/zs-ui/src/model/useThemeProvider';
+import { Text } from 'react-native';
+
+const { typography } = useTheme();
+
+<Text style={{fontFamily: typography.themeFonts[400]}}></Text>
+```
+

package/docs/docs/Theme/useTheme.md

@@ -0,0 +1,29 @@
+---
+sidebar_position: 1
+---
+
+# useTheme
+
+useTheme는 ThemeContext에서 테마 속성을 가져와 사용하는 훅입니다. 
+
+ThemeProvider 외부에서 호출할 경우 오류가 발생합니다.
+
+각 테마 색상은 `primary`, `secondary`, `danger`, `warning`, `success`, `information`과 같은 다양한 상태에 맞게 정의되어 있으며, 기본 배경과 텍스트 색상도 포함되어있습니다.
+
+<br />
+
+### 시스템 색상 설정 감지
+
+`useColorScheme` 훅을 사용하여 시스템의 다크 모드 설정을 감지합니다.
+
+<br />
+
+### AsyncStorage 사용
+
+themeMode와 useSystemColorScheme 값은 AsyncStorage에 저장되어 있어 사용자가 앱을 다시 열 때 동일한 테마가 적용됩니다.
+
+<br />
+
+### 테마 토글 함수
+
+`toggleTheme` : 사용자가 테마를 라이트와 다크 모드 사이에서 전환할 수 있습니다. 이 함수는 AsyncStorage에 모드를 저장합니다.

package/docs/docs/UiComponent/ZSText.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# ZSText
+
+

package/docs/docs/UiComponent/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "UI 컴포넌트",
+  "position": 4,
+  "link": {
+    "type": "generated-index"
+  }
+}

package/docs/docs/intro.md

@@ -0,0 +1,76 @@
+---
+sidebar_position: 1
+---
+
+# 개요
+
+`ZS-ui`는 JavaScript만으로 구현된 `Expo`용 UI 컴포넌트 라이브러리입니다. 
+
+다크 모드, 테마, 타이포그래피(Typo), Alert와 같은 주요 UI 요소가 포함되어 있으며, 직관적이고 일관된 사용자 인터페이스를 구현할 수 있습니다.
+
+<div style={{
+  display: 'flex',
+  overflowX: 'auto',
+  gap: '20px',
+  padding: '0 10px 0 0'
+}}>
+  <div style={{
+    minWidth: '300px',
+    flexShrink: 0
+  }}>
+    <video controls width="300">
+      <source src="https://github.com/user-attachments/assets/7b66915e-163e-4abe-9fab-fb25e33d7a88" type="video/mp4" />
+    </video>
+    <p>테마</p>
+  </div>
+  <div style={{
+    minWidth: '300px',
+    flexShrink: 0
+  }}>
+    <video controls width="300">
+      <source src="https://github.com/user-attachments/assets/73f59984-fc7b-4004-a516-089a2969ea1d" type="video/mp4" />
+    </video>
+    <p>UI 컴포넌트</p>
+  </div>
+  <div style={{
+    minWidth: '300px',
+    flexShrink: 0
+  }}>
+    <video controls width="300">
+      <source src="https://github.com/user-attachments/assets/24918e91-9afc-4777-b6c7-b914bfb30e60" type="video/mp4" />
+    </video>
+    <p>Notify 컴포넌트</p>
+  </div>
+</div>
+
+<br />
+
+# 설치방법
+
+아래 명령어를 통해 필요한 패키지들을 설치합니다.
+
+```sql
+# 필수 패키지 설치
+npx expo install @react-native-async-storage/async-storage react-native-gesture-handler react-native-reanimated react-native-svg react-native-safe-area-context
+
+# ZS UI 라이브러리 설치
+npx expo install @0610studio/zs-ui
+```
+
+<br />
+
+# 폴더 구조
+
+```sql
+root/
+├── example/             # 예제 폴더 - 라이브러리 사용 예제
+│ 
+├── src/
+│   ├── assets/          # 폰트와 이미지 같은 정적 파일들을 저장
+│   ├── model/           # Provider 및 전역 상태 관리 관련 폴더
+│   ├── notify/          # Alert, 스낵바, 바텀시트 등의 알림 관련 UI 컴포넌트
+│   ├── theme/           # 색상 팔레트와 타이포그래피 등의 테마 설정 파일
+│   └── ui/              # UI 컴포넌트와 atomic 기본 요소들
+└──
+```
+

package/docs/docs/provider.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 2
+---
+
+# Provider 구성
+
+프로젝트에서 `ZS-ui`를 사용할 때 필요한 Provider를 최상위 경로에 추가합니다.
+
+### ThemeProvider
+
+ThemeProvider는 프로젝트 전반에서 사용할 폰트와 테마 관련 설정을 관리합니다.
+
+- `themeFonts` : 폰트 굵기별로 사용할 폰트 이름을 정의합니다.
+
+- `requireFonts` : require 구문을 사용하여 각 폰트 파일을 로드합니다.
+
+
+### NotifyProvider
+
+NotifyProvider는 프로젝트 전역에서 사용할 알림 시스템을 관리합니다. customSnackbar와 loaderComponent를 통해 커스텀 스낵바 및 로더 컴포넌트를 설정할 수 있습니다.
+
+- `customSnackbar` : 알림을 표시할 때 사용할 사용자 정의 스낵바 컴포넌트입니다. 프로젝트에 맞게 커스터마이징한 스낵바를 설정할 수 있습니다.
+
+- `loaderComponent` : 로딩 상태에서 사용할 사용자 정의 로더 컴포넌트입니다.
+
+
+### 예제
+
+```tsx title="app/_layout.tsx"
+const themeFonts = {
+  100: 'Pretendard-Thin',
+  200: 'Pretendard-ExtraLight',
+  300: 'Pretendard-Light',
+  400: 'Pretendard-Regular',
+  500: 'Pretendard-Medium',
+  600: 'Pretendard-SemiBold',
+  700: 'Pretendard-Bold',
+  800: 'Pretendard-ExtraBold',
+  900: 'Pretendard-Black',
+};
+
+const requireFonts = {
+  'Pretendard-Thin': require('../assets/fonts/Pretendard-Thin.otf'),
+  'Pretendard-ExtraLight': require('../assets/fonts/Pretendard-ExtraLight.otf'),
+  'Pretendard-Light': require('../assets/fonts/Pretendard-Light.otf'),
+  'Pretendard-Regular': require('../assets/fonts/Pretendard-Regular.otf'),
+  'Pretendard-Medium': require('../assets/fonts/Pretendard-Medium.otf'),
+  'Pretendard-SemiBold': require('../assets/fonts/Pretendard-SemiBold.otf'),
+  'Pretendard-Bold': require('../assets/fonts/Pretendard-Bold.otf'),
+  'Pretendard-ExtraBold': require('../assets/fonts/Pretendard-ExtraBold.otf'),
+  'Pretendard-Black': require('../assets/fonts/Pretendard-Black.otf'),
+};
+
+const [loaded] = useFonts(requireFonts);
+
+<ThemeProvider themeFonts={themeFonts}>
+  <NotifyProvider
+    customSnackbar={SnackBar} // Optional - 사용자 정의 스낵바 컴포넌트
+    loaderComponent={LoadingLottieComponent}  // Optional - 사용자 정의 로더 컴포넌트
+  >
+
+  </NotifyProvider>
+</ThemeProvider>
+```

package/docs/docusaurus.config.ts

@@ -0,0 +1,114 @@
+import {themes as prismThemes} from 'prism-react-renderer';
+import type {Config} from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const config: Config = {
+  title: 'ZS-ui',
+  tagline: 'Expo용 UI 라이브러리',
+  favicon: 'img/favicon.ico',
+
+  url: 'https://0610studio.github.io',
+  baseUrl: '/zs-ui/',
+
+  organizationName: '0610studio', // Usually your GitHub org/user name.
+  projectName: 'zs-ui', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  i18n: {
+    defaultLocale: 'ko',
+    locales: ['ko'],
+  },
+
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          sidebarPath: './sidebars.ts',
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl: 'https://github.com/0610studio/zs-ui/tree/main/',
+        },
+        blog: {
+          showReadingTime: true,
+          feedOptions: {
+            type: ['rss', 'atom'],
+            xslt: true,
+          },
+          editUrl: 'https://github.com/0610studio/zs-ui/tree/main/',
+          onInlineTags: 'warn',
+          onInlineAuthors: 'warn',
+          onUntruncatedBlogPosts: 'warn',
+        },
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themeConfig: {
+    // Replace with your project's social card
+    image: 'img/docusaurus-social-card.jpg',
+    navbar: {
+      title: 'Expo ZS-ui',
+      logo: {
+        alt: 'Expo ZS-ui Logo',
+        src: 'img/logo.svg',
+      },
+      items: [
+        {
+          type: 'docSidebar',
+          sidebarId: 'tutorialSidebar',
+          position: 'left',
+          label: '문서',
+        },
+        {to: '/blog', label: '블로그', position: 'left'},
+        {
+          href: 'https://github.com/0610studio/zs-ui',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'light',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: '문서',
+              to: '/docs/intro',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'Blog',
+              to: '/blog',
+            },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/0610studio/zs-ui',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} 0610studio, Inc. Built with Docusaurus.`,
+    },
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+    },
+    trailingSlash: true,
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;