@0610studio/zs-ui 0.0.1

package/src/model/useNotifyProvider.tsx

@@ -0,0 +1,251 @@
+import { useCallback, useRef, useState } from 'react';
+import { Dimensions, Keyboard, TextProps, TouchableOpacityProps } from 'react-native';
+import NotifyContext from './useNotify';
+import { AlertActions, BottomSheetRef, HideOption, NotifyProviderProps, PopOverMenuProps, ShowAlertProps, ShowBottomSheetProps, ShowSnackBarProps, SnackItem } from './types';
+import AlertNotify from '../notify/AlertNotify';
+import SnackbarNotify from '../notify/SnackbarNotify';
+import BottomSheetNotify from '../notify/BottomSheetNotify';
+import LoadingNotify from '../notify/LoadingNotify';
+import PopOverMenu from '../notify/PopOver/PopOverMenu';
+
+const BS_MAX_HEIGHT = Dimensions.get('window').height - 120;
+
+export function NotifyProvider({
+    customSnackbar,
+    loaderComponent,
+    children
+}: NotifyProviderProps) {
+    // Alert
+    const [title, setTitle] = useState<string>('');
+    const [informative, setInformative] = useState<string>('');
+    const [alertVisible, setAlertVisible] = useState<boolean>(false);
+    const [actions, setActions] = useState<AlertActions>();
+    const [isBackgroundTouchClose, setIsBackgroundTouchClose] = useState<boolean>(true);
+    const [titleStyle, setTitleStyle] = useState<TextProps['style']>();
+    const [informativeStyle, setInformativeStyle] = useState<TextProps['style']>();
+    const [secondaryButtonStyle, setSecondaryButtonStyle] = useState<TouchableOpacityProps['style']>();
+    const [primaryButtonStyle, setPrimaryButtonStyle] = useState<TouchableOpacityProps['style']>();
+    const [secondaryButtonTextStyle, setSecondaryButtonTextStyle] = useState<TextProps['style']>();
+    const [primaryButtonTextStyle, setPrimaryButtonTextStyle] = useState<TextProps['style']>();
+    const [singleButtonTextStyle, setSingleButtonTextStyle] = useState<TextProps['style']>();
+
+    // Snackbar
+    const [snackItemStack, setSnackItemStack] = useState<SnackItem[]>([]);
+
+    // BottomSheet
+    const [contentsGestureEnable, setContentsGestureEnable] = useState<boolean>(false);
+    const [bottomSheetVisible, setBottomSheetVisible] = useState<boolean>(false);
+    const [bottomSheetBackgroundColor, setBottomSheetBackgroundColor] = useState<string>();
+    const [bottomSheetComponent, setBottomSheetComponent] = useState<React.ReactNode>(false);
+    const [bottomSheetPadding, setBottomSheetPadding] = useState<number | undefined>(undefined);
+    const [bottomSheetMarginX, setBottomSheetMarginX] = useState<number | undefined>(undefined);
+    const [bottomSheetMaxHeight, setBottomSheetMaxHeight] = useState<number>(BS_MAX_HEIGHT);
+    const [bottomSheetScrollView, setBottomSheetScrollView] = useState<boolean>(true);
+    const [isBottomRadius, setIsBottomRadius] = useState<boolean>(true);
+    const [handleVisible, setHandleVisible] = useState<boolean>(true);
+    const [marginBottomBS, setMarginBottomBs] = useState<number | undefined>(undefined);
+    const bottomSheetRef = useRef<BottomSheetRef | null>(null);
+
+    // Loading
+    const [loaderVisible, setLoaderVisible] = useState<boolean>(false);
+
+    // PopOver
+    const [popOverVisible, setPopOverVisible] = useState<boolean>(false);
+    const [popOverLocation, setPopOverLocation] = useState<{ px: PopOverMenuProps['px'], py: PopOverMenuProps['py'] }>({ px: 0, py: 0 });
+    const [popOverComponent, setPopOverComponent] = useState<React.ReactNode>(false);
+
+    // ---
+    const [fontFamily, setFontFamily] = useState<string | undefined | { title?: string; info?: string; label?: string; }>(undefined);
+
+
+    const showAlert = ({
+        title,
+        informative,
+        actions,
+        isBackgroundTouchClose = true,
+        titleStyle,
+        informativeStyle,
+        secondaryButtonStyle,
+        primaryButtonStyle,
+        secondaryButtonTextStyle,
+        primaryButtonTextStyle,
+        singleButtonTextStyle,
+    }: ShowAlertProps) => {
+        Keyboard.dismiss();
+        setTitle(title);
+        setInformative(informative);
+        setActions(actions || {} as AlertActions);
+        setIsBackgroundTouchClose(isBackgroundTouchClose);
+        setAlertVisible(true);
+
+        setTitleStyle(titleStyle);
+        setInformativeStyle(informativeStyle);
+        setSecondaryButtonStyle(secondaryButtonStyle);
+        setPrimaryButtonStyle(primaryButtonStyle);
+        setSecondaryButtonTextStyle(secondaryButtonTextStyle);
+        setPrimaryButtonTextStyle(primaryButtonTextStyle);
+        setSingleButtonTextStyle(singleButtonTextStyle);
+
+        setFontFamily(fontFamily);
+    };
+
+    const showBottomSheet = ({
+        isHandleVisible = true,
+        component,
+        contentsGestureEnable = true,
+        marginHorizontal,
+        padding,
+        marginBottom,
+        backgroundColor,
+        isBottomRadius = true,
+        maxHeight,
+        isScrollView = true
+    }: ShowBottomSheetProps) => {
+        Keyboard.dismiss();
+        padding && setBottomSheetPadding(padding);
+        marginBottom && setMarginBottomBs(marginBottom);
+        marginHorizontal && setBottomSheetMarginX(marginHorizontal);
+        backgroundColor && setBottomSheetBackgroundColor(backgroundColor);
+        maxHeight && setBottomSheetMaxHeight(maxHeight);
+        setContentsGestureEnable(contentsGestureEnable);
+        setHandleVisible(isHandleVisible);
+        setBottomSheetScrollView(isScrollView);
+        setIsBottomRadius(isBottomRadius);
+        setBottomSheetComponent(component);
+        bottomSheetRef.current?.handleVisible(true);
+    };
+
+    const showLoader = () => {
+        setLoaderVisible(true);
+    };
+
+    const showPopOverMenu = ({
+        px,
+        py,
+        component
+    }: PopOverMenuProps) => {
+        setPopOverLocation({ px, py });
+        setPopOverComponent(component);
+        setPopOverVisible(true);
+    }
+
+    const showSnackBar = ({
+        message,
+        type = 'success',
+        index = Date.now(),
+        snackbarDuration = 3000
+    }: ShowSnackBarProps) => {
+        // TODO: 스택 쌓고싶은데 삭제될 때 참조를 잃어서 삭제가 안되는 문제가 있음.
+        setSnackItemStack((prev) => {
+            if (prev.length === 0) {
+                return [...prev, { message, type, index: index, snackbarDuration: snackbarDuration }];
+            } else {
+                return prev;
+            };
+        });
+    };
+
+    const hideSnackBar = (index: number) => {
+        setSnackItemStack((prev) => prev.filter((item) => item.index !== index));
+    };
+
+    const hideNotify = useCallback((option: HideOption) => {
+        switch (option) {
+            case 'alert':
+                setAlertVisible(false);
+                break;
+            case 'snack':
+                setSnackItemStack([]);
+                break;
+            case 'bottomSheet':
+                bottomSheetRef.current?.handleVisible(false);
+                break;
+            case 'loader':
+                setLoaderVisible(false);
+                break;
+            case 'popOver':
+                setPopOverVisible(false);
+                break;
+            case 'all':
+                setAlertVisible(false);
+                setSnackItemStack([]);
+                setLoaderVisible(false);
+                setPopOverVisible(false);
+                bottomSheetRef.current?.handleVisible(false);
+                break;
+            default:
+                break;
+        };
+    }, []);
+
+
+    return (
+        <NotifyContext.Provider value={{
+            alertVisible,
+            setAlertVisible,
+            // ---
+            snackItemStack,
+            hideSnackBar,
+            // ---
+            bottomSheetVisible,
+            setBottomSheetVisible,
+            // ---
+            loaderVisible,
+            // ---
+            popOverVisible,
+            setPopOverVisible,
+            // ---
+            showAlert,
+            showSnackBar,
+            showBottomSheet,
+            showLoader,
+            showPopOverMenu,
+            // ---
+            hideNotify,
+        }}>
+            {children}
+
+            <BottomSheetNotify
+                ref={bottomSheetRef}
+                bottomSheetComponent={bottomSheetComponent}
+                contentsGestureEnable={contentsGestureEnable}
+                bottomSheetPadding={bottomSheetPadding}
+                marginBottomBS={marginBottomBS}
+                isHandleVisible={handleVisible}
+                bottomSheetMarginX={bottomSheetMarginX}
+                isBottomRadius={isBottomRadius}
+                bottomSheetBackgroundColor={bottomSheetBackgroundColor}
+                maxHeight={bottomSheetMaxHeight}
+                isScrollView={bottomSheetScrollView}
+            />
+
+            <PopOverMenu
+                px={popOverLocation?.px}
+                py={popOverLocation?.py}
+                component={popOverComponent}
+            />
+
+            <SnackbarNotify
+                customSnackbar={customSnackbar}
+            />
+
+            <AlertNotify
+                title={title}
+                informative={informative}
+                actions={actions || {} as AlertActions}
+                isBackgroundTouchClose={isBackgroundTouchClose}
+                titleStyle={titleStyle}
+                informativeStyle={informativeStyle}
+                secondaryButtonStyle={secondaryButtonStyle}
+                primaryButtonStyle={primaryButtonStyle}
+                secondaryButtonTextStyle={secondaryButtonTextStyle}
+                primaryButtonTextStyle={primaryButtonTextStyle}
+                singleButtonTextStyle={singleButtonTextStyle}
+            />
+
+            <LoadingNotify
+                loaderComponent={loaderComponent}
+            />
+        </NotifyContext.Provider>
+    );
+}

package/src/model/useThemeProvider.tsx

@@ -0,0 +1,99 @@
+import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import { useColorScheme } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import palette from '../theme/palette';
+import { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';
+import typography from '../theme/typography';
+
+export interface ThemeProviderProps {
+    themeFonts?: ThemeFonts;
+    children: React.ReactNode;
+}
+
+export interface ThemeProps {
+    palette: Palette;
+    typography: TypographyVariantsProps;
+}
+
+export interface Palette extends Theme {
+    mode: 'light' | 'dark';
+    isUsingSystemColorScheme: boolean;
+    setUseSystemColorScheme: (useSystem: boolean) => void;
+    toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeProps | null>(null);
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ themeFonts, children }) => {
+    const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지
+    const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(true);
+    const [mode, setMode] = useState<'light' | 'dark'>(systemColorScheme === 'dark' ? 'dark' : 'light');
+
+    // AsyncStorage에서 시스템 모드 사용 설정 값 로드
+    useEffect(() => {
+        const loadSettings = async () => {
+            try {
+                const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');
+                if (storedUseSystemColorScheme !== null) {
+                    setUseSystemColorScheme(storedUseSystemColorScheme === 'true');
+                }
+                const storedMode = await AsyncStorage.getItem('themeMode');
+                if (storedMode) {
+                    setMode(storedMode === 'dark' ? 'dark' : 'light');
+                } else {
+                    setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
+                }
+            } catch (error) {
+                console.error('Failed to load theme settings', error);
+            }
+        };
+        loadSettings();
+    }, [systemColorScheme]);
+
+    // 시스템 다크 모드 변경에 따른 효과 적용
+    useEffect(() => {
+        if (isUsingSystemColorScheme) {
+            setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
+        }
+    }, [systemColorScheme, isUsingSystemColorScheme]);
+
+    // 테마 토글 함수
+    const toggleTheme = async () => {
+        setUseSystemColorScheme(false); // 사용자 지정 모드로 전환
+        setMode((prevMode) => {
+            const newMode = prevMode === 'light' ? 'dark' : 'light';
+            AsyncStorage.setItem('themeMode', newMode); // 로컬스토리지에 저장
+            return newMode;
+        });
+    };
+
+    // 시스템 모드 사용 설정 변경 함수
+    const handleSetUseSystemColorScheme = async (useSystem: boolean) => {
+        setUseSystemColorScheme(useSystem);
+        await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());
+    };
+
+    const themeValue = useMemo(() => ({
+        palette: {
+            isUsingSystemColorScheme,
+            setUseSystemColorScheme: handleSetUseSystemColorScheme,
+            toggleTheme,
+            ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용
+        },
+        typography: typography({ themeFonts }),
+    }), [mode, isUsingSystemColorScheme, typography, themeFonts]);
+
+    return (
+        <ThemeContext.Provider value={themeValue}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}

package/src/model/utils.ts

@@ -0,0 +1,31 @@
+import { StyleProp, TextStyle } from "react-native";
+
+/**
+ * 사각형의 너비와 높이에 따라 비슷한 비율의 테두리 반지름을 계산합니다.
+ * @param width 사각형의 너비입니다.
+ * @param height 사각형의 높이입니다.
+ * @param borderRadius 기본 테두리 반지름입니다.
+ * @returns 계산된 테두리 반지름입니다.
+ */
+export const calculateRadius = (width: number, height: number, borderRadius: number) => {
+    const radiusRatio = Math.max((width / height), (height / width));
+    const calc = borderRadius * (radiusRatio > 1 ? radiusRatio / 2 : radiusRatio);
+    return calc;
+};
+
+export const withPromise = <T extends unknown[]>(fn: (...args: T) => Promise<unknown>): ((...args: T) => void) => {
+    return (...args) => { void fn(...args) };
+};
+
+export const extractStyle = (
+    style: StyleProp<TextStyle>,
+    attribute: keyof TextStyle
+): TextStyle[keyof TextStyle] | undefined => {
+    if (Array.isArray(style)) {
+        const foundStyle = style.find(item => typeof item === 'object' && item !== null && attribute in item);
+        return foundStyle?.[attribute as keyof typeof foundStyle];
+    } else if (typeof style === 'object' && style !== null && attribute in style) {
+        return style[attribute];
+    }
+    return undefined;
+};

package/src/notify/AlertNotify/index.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Dimensions, KeyboardAvoidingView, Platform, Pressable, StyleSheet, TouchableOpacity, BackHandler } from 'react-native';
+import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
+import { AlertActions, ShowAlertProps } from '../../model/types';
+import { useNotify } from '../../model/useNotify';
+import { useTheme } from '../../model/useThemeProvider';
+import { ThemeBackground } from '../../theme';
+import { ZSText } from '../../ui';
+import ModalBackground from '../ui/ModalBackground';
+import ViewAtom from '../../ui/atoms/ViewAtom';
+
+const modalWidth = Dimensions.get('window').width - 60;
+
+function AlertNotify({
+  actions,
+  title,
+  informative,
+  isBackgroundTouchClose,
+  titleStyle,
+  informativeStyle,
+  secondaryButtonStyle,
+  primaryButtonStyle,
+  secondaryButtonTextStyle,
+  primaryButtonTextStyle,
+  singleButtonTextStyle,
+}: ShowAlertProps) {
+  const { alertVisible, setAlertVisible } = useNotify();
+  const { palette: { background, text, primary: primaryColor } } = useTheme();
+
+  const styles = useMemo(
+    () => createStyles({ background }),
+    [background, text, primaryColor]
+  );
+
+  // 버튼 클릭 핸들러 함수, 콜백 메모이제이션으로 성능 최적화
+  const handleButtonPress = useCallback(
+    (onPressFunction?: () => void) => () => {
+      if (onPressFunction) {
+        onPressFunction();
+      }
+      setAlertVisible(false);
+    },
+    [setAlertVisible]
+  );
+
+  // 뒤로가기 버튼 핸들러 함수
+  const backPressHandler = useCallback(() => {
+    if (alertVisible) {
+      setAlertVisible(false);
+      return true;
+    }
+    return false;
+  }, [alertVisible, setAlertVisible]);
+
+  // 뒤로가기 버튼 리스너 설정
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backPressHandler);
+    return () => backHandler.remove();
+  }, [backPressHandler]);
+
+  // content를 useMemo로 감싸서 불필요한 재렌더링 방지
+  const content = useMemo(() => {
+    const { primary, secondary } = actions || {} as AlertActions;
+
+    return (
+      <Animated.View
+        entering={FadeInDown.duration(300)}
+        exiting={FadeOutDown.duration(100)}
+      >
+        <Pressable style={[styles.contentContainer, { width: modalWidth }]}>
+          {title && (
+            <ZSText typo='title.2' style={[styles.title, titleStyle]}>{title}</ZSText>
+          )}
+          {informative && (
+            <ZSText typo='body.3' style={[styles.informative, informativeStyle]}>{informative}</ZSText>
+          )}
+          {actions && (
+            <ViewAtom style={styles.buttonContainer}>
+              {secondary ? (
+                <>
+                  <TouchableOpacity
+                    style={[
+                      styles.button,
+                      { backgroundColor: background.neutral, marginRight: 8 },
+                      secondaryButtonStyle
+                    ]}
+                    onPress={handleButtonPress(secondary?.onPress)}
+                  >
+                    <ZSText typo='subTitle.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity
+                    style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}
+                    onPress={handleButtonPress(primary?.onPress)}
+                  >
+                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label}</ZSText>
+                  </TouchableOpacity>
+                </>
+              ) : (
+                <TouchableOpacity
+                  onPress={handleButtonPress(primary?.onPress)}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <TouchableOpacity
+                    style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}
+                    onPress={handleButtonPress(primary?.onPress)}
+                  >
+                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              )}
+            </ViewAtom>
+          )}
+        </Pressable>
+      </Animated.View>
+    );
+  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);
+
+  return alertVisible ? (
+    <ModalBackground onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}>
+      <KeyboardAvoidingView
+        style={styles.avoidingView}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        enabled
+      >
+        {content}
+      </KeyboardAvoidingView>
+    </ModalBackground>
+  ) : null;
+}
+
+export default AlertNotify;
+
+const createStyles = ({
+  background,
+}: {
+  background: ThemeBackground;
+}) =>
+  StyleSheet.create({
+    title: {
+      marginBottom: 8,
+      width: '100%',
+      paddingHorizontal: 4
+    },
+    informative: {
+      marginTop: 8,
+      width: '100%',
+      paddingHorizontal: 4
+    },
+    buttonContainer: {
+      flexDirection: 'row',
+      width: '100%',
+      marginTop: 24,
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+    button: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 14,
+      borderRadius: 12,
+    },
+    avoidingView: {
+      flex: 1,
+      justifyContent: 'center'
+    },
+    contentContainer: {
+      alignItems: 'center',
+      backgroundColor: background.base,
+      borderRadius: 22,
+      paddingBottom: 18,
+      paddingTop: 24,
+      paddingHorizontal: 20
+    },
+  });
+