@0610studio/zs-ui 0.0.1

package/src/theme/types.ts

@@ -0,0 +1,150 @@
+import { TextProps } from "react-native";
+
+export type ColorPalette = {
+  [key: string]: string;
+};
+
+export interface ThemeTextType {
+  primary: string;
+  secondary: string;
+  disabled: string;
+  danger: string;
+  warning: string;
+  success: string;
+  information: string;
+  white: string;
+  black: string;
+}
+
+export interface ThemeBorderType {
+  box: string;
+  active: string;
+  base: string;
+  danger: string;
+  warning: string;
+  success: string;
+  information: string;
+}
+
+export interface ThemeBackground {
+  layer1: string;
+  layer2: string;
+  neutral: string;
+  base: string;
+  danger: string;
+  warning: string;
+  success: string;
+  information: string;
+}
+
+export interface MainColors {
+  primary: string;
+  secondary: string;
+  danger: string;
+  warning: string;
+  success: string;
+  information: string;
+  grey: string;
+}
+
+export interface Theme {
+  mode: 'light' | 'dark';
+  primary: ColorPalette;
+  secondary: ColorPalette;
+  danger: ColorPalette;
+  warning: ColorPalette;
+  success: ColorPalette;
+  information: ColorPalette;
+  grey: ColorPalette;
+  text: ThemeTextType;
+  border: ThemeBorderType;
+  background: ThemeBackground;
+  action: {
+    hover: string;
+    pressed: string;
+    disable: string;
+  };
+  divider: string;
+  elevationShadow: string[];
+  modalBgColor: string;
+  mainColor: MainColors;
+}
+
+export interface TypographyVariants {
+  themeFonts?: ThemeFonts;
+  heading: TypoNumber;
+  label: TypoNumber;
+  title: TypoNumber;
+  subTitle: TypoNumber;
+  body: TypoNumber;
+  caption: TypoNumber;
+};
+
+export interface ThemeFonts {
+  100?: string;
+  200?: string;
+  300?: string;
+  400: string;
+  500?: string;
+  600?: string;
+  700: string;
+  800?: string;
+  900?: string;
+};
+
+export interface TypoNumber {
+  '1': TextProps['style'];
+  '2': TextProps['style'];
+  '3': TextProps['style'];
+  '4': TextProps['style'];
+  '5': TextProps['style'];
+  '6': TextProps['style'];
+}
+
+export interface TypographyVariantsProps extends TypographyVariants {
+  themeFonts?: ThemeFonts;
+};
+
+export type TypoStyle = 'heading' | 'title' | 'subTitle' | 'label' | 'body' | 'caption';
+
+export type TypoOptions =
+  'heading.1' |
+  'heading.2' |
+  'heading.3' |
+  'heading.4' |
+  'heading.5' |
+  'heading.6' |
+  'title.1' |
+  'title.2' |
+  'title.3' |
+  'title.4' |
+  'title.5' |
+  'title.6' |
+  'subTitle.1' |
+  'subTitle.2' |
+  'subTitle.3' |
+  'subTitle.4' |
+  'subTitle.5' |
+  'subTitle.6' |
+  'body.1' |
+  'body.2' |
+  'body.3' |
+  'body.4' |
+  'body.5' |
+  'body.6' |
+  'label.1' |
+  'label.2' |
+  'label.3' |
+  'label.4' |
+  'label.5' |
+  'label.6' |
+  'caption.1' |
+  'caption.2' |
+  'caption.3' |
+  'caption.4' |
+  'caption.5' |
+  'caption.6';
+
+export type TypoSubStyle = '1' | '2' | '3' | '4' | '5' | '6';
+
+export type TextColorOptions = 'primary' | 'secondary' | 'disabled' | 'danger' | 'warning' | 'success' | 'information' | 'white' | 'black';

package/src/theme/typography.ts

@@ -0,0 +1,199 @@
+import { ThemeFonts, TypographyVariantsProps } from "./types";
+
+export default function typography({ themeFonts }: { themeFonts?: ThemeFonts }): TypographyVariantsProps {
+    return {
+        themeFonts: themeFonts,
+        heading: {
+            1: {
+                fontSize: 64,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            2: {
+                fontSize: 48,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            3: {
+                fontSize: 32,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            4: {
+                fontSize: 24,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            5: {
+                fontSize: 20,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            6: {
+                fontSize: 18,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            }
+        },
+        title: {
+            1: {
+                fontSize: 16,
+                fontFamily: themeFonts?.[800],
+                letterSpacing: 1
+            },
+            2: {
+                fontSize: 14,
+                fontFamily: themeFonts?.[800],
+                letterSpacing: 1
+            },
+            3: {
+                fontSize: 12,
+                fontFamily: themeFonts?.[800],
+                letterSpacing: 1
+            },
+            4: {
+                fontSize: 10,
+                fontFamily: themeFonts?.[800],
+                letterSpacing: 1
+            },
+            5: {
+                fontSize: 9,
+                fontFamily: themeFonts?.[800],
+                letterSpacing: 1
+            },
+            6: {
+                fontSize: 8,
+                fontFamily: themeFonts?.[800],
+                letterSpacing: 1
+            }
+        },
+        subTitle: {
+            1: {
+                fontSize: 16,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            2: {
+                fontSize: 14,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            3: {
+                fontSize: 12,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            4: {
+                fontSize: 10,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            5: {
+                fontSize: 9,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            },
+            6: {
+                fontSize: 8,
+                fontFamily: themeFonts?.[700],
+                letterSpacing: 1
+            }
+        },
+        label: {
+            1: {
+                fontSize: 16,
+                fontFamily: themeFonts?.[600],
+                letterSpacing: 1
+            },
+            2: {
+                fontSize: 14,
+                fontFamily: themeFonts?.[600],
+                letterSpacing: 1
+            },
+            3: {
+                fontSize: 13,
+                fontFamily: themeFonts?.[600],
+                letterSpacing: 1
+            },
+            4: {
+                fontSize: 12,
+                fontFamily: themeFonts?.[600],
+                letterSpacing: 1
+            },
+            5: {
+                fontSize: 11,
+                fontFamily: themeFonts?.[600],
+                letterSpacing: 1
+            },
+            6: {
+                fontSize: 10,
+                fontFamily: themeFonts?.[600],
+                letterSpacing: 1
+            }
+        },
+        body: {
+            1: {
+                fontSize: 16,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            2: {
+                fontSize: 14,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            3: {
+                fontSize: 13,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            4: {
+                fontSize: 12,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            5: {
+                fontSize: 11,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            6: {
+                fontSize: 10,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            }
+        },
+        caption: {
+            1: {
+                fontSize: 12,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            2: {
+                fontSize: 11,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            3: {
+                fontSize: 10,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            4: {
+                fontSize: 9,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            5: {
+                fontSize: 8,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            },
+            6: {
+                fontSize: 7,
+                fontFamily: themeFonts?.[400],
+                letterSpacing: 1
+            }
+        },
+    }
+}

package/src/ui/ThrottleButton/index.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
+const DEFAULT_MARGIN_X = 20;
+const DEFAULT_MARGIN_TOP = 0;
+const DEFAULT_MARGIN_BOTTOM = 20;
+const DEFAULT_BORDER_RADIUS = 8;
+
+const TIME_CONSTANTS = {
+    debounce: 300,
+    throttle: 2000,
+} as const;
+
+interface ThrottleButtonProps extends TouchableOpacityProps {
+    loadingComponent?: React.ReactNode;
+    disabled?: boolean;
+    primaryOnPress: () => Promise<void>;
+    primaryLabelComponent: React.ReactNode;
+    primaryButtonStyle?: TouchableOpacityProps['style'];
+    marginHorizontal?: number;
+    marginBottom?: number;
+    onError?: (error: Error) => void;
+}
+
+const useAsyncButton = (
+    onPress: () => Promise<void>,
+    onError?: (error: Error) => void
+) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const lastClickTime = useRef<number>(0);
+    const isMounted = useRef<boolean>(true);
+
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    const handlePress = useCallback(async () => {
+        const now = Date.now();
+
+        if (now - lastClickTime.current < TIME_CONSTANTS.debounce) {
+            return;
+        }
+
+        if (isLoading) {
+            return;
+        }
+
+        lastClickTime.current = now;
+
+        try {
+            setIsLoading(true);
+            await onPress();
+            await new Promise(resolve =>
+                setTimeout(resolve, TIME_CONSTANTS.throttle)
+            );
+        } catch (error: unknown) {
+            if (error instanceof Error && onError) {
+                onError(error);
+            }
+            console.error('ThrottleButton error:', error);
+        } finally {
+            if (isMounted.current) {
+                setIsLoading(false);
+            }
+        }
+    }, [onPress, onError, isLoading]);
+
+    return { isLoading, handlePress };
+};
+
+function ThrottleButton({
+    loadingComponent = <ActivityIndicator />,
+    disabled = false,
+    primaryOnPress,
+    primaryLabelComponent,
+    primaryButtonStyle = {},
+    marginHorizontal,
+    marginBottom = DEFAULT_MARGIN_BOTTOM,
+    onError,
+    ...touchableProps
+}: ThrottleButtonProps) {
+    const { isLoading, handlePress } = useAsyncButton(primaryOnPress, onError);
+
+    return (
+        <View style={[styles.container, { marginHorizontal: marginHorizontal ?? DEFAULT_MARGIN_X, marginBottom }]}>
+            <TouchableOpacity
+                activeOpacity={0.7}
+                style={[primaryButtonStyle, styles.touchContainer, { opacity: isLoading ? 0.4 : 1 }]}
+                onPress={handlePress}
+                disabled={disabled || isLoading}
+                {...touchableProps}
+            >
+                {isLoading ? loadingComponent : primaryLabelComponent}
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    touchContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1
+    },
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: DEFAULT_BORDER_RADIUS,
+        marginTop: DEFAULT_MARGIN_TOP,
+        marginBottom: DEFAULT_MARGIN_BOTTOM,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        flex: 1
+    },
+});
+
+export default ThrottleButton;

package/src/ui/ZSBottomButton/index.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from "react";
+import { ActivityIndicator, Keyboard, Platform, StyleSheet, TouchableOpacity, TouchableOpacityProps } from "react-native";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { withPromise } from "../../model/utils";
+
+const DEFAULT_MARGIN_X = 20;
+const DEFAULT_MARGIN_TOP = 0;
+const DEFAULT_MARGIN_BOTTOM = 20;
+const DEFAULT_BORDER_RADIUS = 14;
+const DURATION = { duration: 250 };
+
+interface Props {
+  loadingComponent?: React.ReactNode;
+  height?: number;
+  disabled?: boolean;
+  primaryOnPress: () => Promise<any>;
+  primaryLabelComponent: React.ReactNode;
+  primaryButtonStyle?: TouchableOpacityProps['style'];
+  secondaryOnPress?: () => void;
+  secondaryLabelComponent?: React.ReactNode;
+  secondaryButtonStyle?: TouchableOpacityProps['style'];
+}
+
+function ZSBottomButton({
+  loadingComponent = <ActivityIndicator />,
+  height = 55,
+  disabled = false,
+  primaryLabelComponent,
+  primaryOnPress,
+  primaryButtonStyle = {},
+  secondaryOnPress,
+  secondaryLabelComponent,
+  secondaryButtonStyle = {}
+}: Props) {
+  const isKeyboardVisible = useSharedValue(0);
+  const keyboardHeight = useSharedValue(0);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlePress = async () => {
+    setIsLoading(true);
+    try {
+      await withPromise(primaryOnPress);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // ** 소프트 키보드 핸들링
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const keyboardDidShowListener = Keyboard.addListener(showEvent, (event) => {
+      requestAnimationFrame(() => {
+        keyboardHeight.value = event.endCoordinates.height; // 키보드 높이 설정
+        isKeyboardVisible.value = 1; // 키보드가 보임
+      });
+    });
+
+    const keyboardDidHideListener = Keyboard.addListener(hideEvent, () => {
+      requestAnimationFrame(() => {
+        isKeyboardVisible.value = 0; // 키보드가 숨김
+      });
+    });
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, [isKeyboardVisible, keyboardHeight]);
+
+  // ** 애니메이션 스타일을 useAnimatedStyle로 최적화
+  const animatedStyle = useAnimatedStyle(() => {
+    const getBottom = interpolate(
+      isKeyboardVisible.value,
+      [0, 1],
+      [DEFAULT_MARGIN_BOTTOM, 0],
+      'clamp',
+    );
+
+    const getMargin = interpolate(
+      isKeyboardVisible.value,
+      [0, 1],
+      [DEFAULT_MARGIN_X, 0],
+      'clamp',
+    );
+
+    const getRadius = interpolate(
+      isKeyboardVisible.value,
+      [0, 1],
+      [DEFAULT_BORDER_RADIUS, 0],
+      'clamp',
+    );
+
+    return {
+      marginBottom: withTiming(getBottom, DURATION),
+      marginLeft: withTiming(getMargin, DURATION),
+      marginRight: withTiming(getMargin, DURATION),
+      borderRadius: withTiming(getRadius, DURATION),
+    };
+  });
+
+  return (
+    <Animated.View style={[styles.container, animatedStyle]}>
+      {secondaryLabelComponent && (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={[secondaryButtonStyle, { height }, styles.touchSecondaryContainer]}
+          onPress={secondaryOnPress}
+        >
+          {secondaryLabelComponent}
+        </TouchableOpacity>
+      )}
+
+      <TouchableOpacity
+        activeOpacity={0.7}
+        style={[primaryButtonStyle, { height }, styles.touchContainer]}
+        onPress={handlePress}
+        disabled={disabled || isLoading}
+      >
+        {isLoading ? loadingComponent : primaryLabelComponent}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  touchContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 2,
+  },
+  touchSecondaryContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: DEFAULT_BORDER_RADIUS,
+    marginTop: DEFAULT_MARGIN_TOP,
+    marginBottom: DEFAULT_MARGIN_BOTTOM,
+    marginLeft: DEFAULT_MARGIN_X,
+    marginRight: DEFAULT_MARGIN_X,
+    overflow: 'hidden',
+    flexDirection: 'row',
+  },
+});
+
+export default ZSBottomButton;

package/src/ui/ZSContainer/index.tsx

@@ -0,0 +1,92 @@
+import React, { ReactNode, useState, useEffect } from 'react';
+import { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, Platform, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import ViewAtom from '../atoms/ViewAtom';
+import ScrollViewAtom from '../atoms/ScrollViewAtom';
+import { useTheme } from '../../model/useThemeProvider';
+
+type ZSContainerProps = ViewProps & {
+  backgroundColor?: string;
+  isLoader?: boolean;
+  statusBarColor?: string;
+  barStyle?: 'light-content' | 'dark-content';
+  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
+  isScrollView?: boolean;
+  scrollViewRef?: React.RefObject<ScrollView>;
+  topComponent?: ReactNode;
+  bottomComponent?: ReactNode;
+  showsVerticalScrollIndicator?: boolean;
+  loadingComponent?: React.ReactNode;
+  keyboardVerticalOffset?: number;
+};
+
+function ZSContainer({
+  backgroundColor,
+  isLoader = false,
+  statusBarColor,
+  barStyle = 'dark-content',
+  edges = ['top', 'bottom'],
+  isScrollView = true,
+  scrollViewRef,
+  topComponent,
+  bottomComponent,
+  showsVerticalScrollIndicator = true,
+  loadingComponent = <ActivityIndicator />,
+  keyboardVerticalOffset,
+  ...props
+}: ZSContainerProps) {
+  const { palette } = useTheme(); // 테마 사용
+  const [isDelayed, setIsDelayed] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsDelayed(false);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]} edges={edges}>
+      <StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} />
+
+      {!isDelayed && (
+        <KeyboardAvoidingView
+          style={styles.flex1}
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          keyboardVerticalOffset={keyboardVerticalOffset}
+          enabled
+        >
+          {topComponent && topComponent}
+
+          {isLoader ? (
+            loadingComponent
+          ) : isScrollView ? (
+            <ScrollViewAtom
+              ref={scrollViewRef} 
+              style={styles.flex1}
+              bounces={false}
+              contentContainerStyle={styles.scrollContainerStyle}
+              showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+              keyboardShouldPersistTaps="handled"
+            >
+              <ViewAtom style={[styles.flex1, props.style]}>
+                {props.children}
+              </ViewAtom>
+            </ScrollViewAtom>
+          ) : (
+            <ViewAtom style={[styles.flex1, props.style]}>{props.children}</ViewAtom>
+          )}
+
+          {!isLoader && bottomComponent && bottomComponent}
+        </KeyboardAvoidingView>
+      )}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex1: { flex: 1, width: Dimensions.get('window').width },
+  scrollContainerStyle: { flexGrow: 1, alignItems: 'center' },
+});
+
+export default ZSContainer;