@0610studio/zs-ui 0.0.1

package/src/notify/BottomSheetNotify/index.tsx

@@ -0,0 +1,177 @@
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import { StyleSheet, Dimensions, ViewProps, Keyboard } from 'react-native';
+import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import useBottomSheetNotify from './model/useBottomSheetNotify';
+import { BottomSheetNotifyRef } from './types';
+import ContentsComponent from './ui/ContentsComponent';
+import { useTheme } from '../../model/useThemeProvider';
+import { ColorPalette, ThemeBackground, ThemeTextType } from '../../theme';
+import ViewAtom from '../../ui/atoms/ViewAtom';
+import { ZSView } from '../../ui';
+
+const DEFAULT_BORDER_RADIUS = 24;
+const BS_MAX_HEIGHT = Dimensions.get('window').height - 120;
+
+interface Props extends ViewProps {
+  marginBottomBS?: number;
+  bottomSheetBackgroundColor?: string;
+  bottomSheetPadding?: number;
+  closeOffset?: number;
+  contentsGestureEnable?: boolean;
+  isHandleVisible?: boolean;
+  bottomSheetMarginX?: number;
+  isBottomRadius?: boolean;
+  maxHeight?: number;
+  isScrollView?: boolean;
+  bottomSheetComponent: React.ReactNode;
+}
+
+function BottomSheetNotify(props: Props, ref: React.Ref<BottomSheetNotifyRef>) {
+  const {
+    marginBottomBS = 15,
+    bottomSheetPadding = 20,
+    bottomSheetBackgroundColor,
+    closeOffset = Dimensions.get('window').height,
+    contentsGestureEnable = true,
+    isHandleVisible = true,
+    bottomSheetMarginX = 10,
+    isBottomRadius = true,
+    isScrollView = true,
+    maxHeight = BS_MAX_HEIGHT,
+    bottomSheetComponent
+  } = props;
+
+  const {
+    HANDLE_HEIGHT,
+    bottomSheetVisible,
+    bsAnimatedStyle,
+    onGestureEvent,
+    handleVisible,
+    onTapEvent,
+    openPosition,
+    screenWidth,
+    screenHeight,
+    panGestureRef,
+    listScrollPosition,
+    bsModalBgStyle,
+    backgroundPressHandler
+  } = useBottomSheetNotify({
+    bottomSheetPadding,
+    closeOffset,
+    contentsGestureEnable,
+    bottomSheetMarginX,
+    isHandleVisible,
+  });
+
+  const { palette: { background, text, primary, modalBgColor } } = useTheme();
+
+  const styles = useMemo(
+    () => createStyles({ background, text, primary, modalBgColor }),
+    [background, text, primary, modalBgColor]
+  );
+
+  useImperativeHandle(ref, () => ({
+    handleVisible,
+  }));
+
+  return bottomSheetVisible && bottomSheetComponent ? (
+    <Animated.View
+      style={[styles.modalBg, bsModalBgStyle]}
+      entering={FadeIn.duration(50)}
+      exiting={FadeOut.duration(50)}
+      onTouchEnd={backgroundPressHandler} // 외부 터치 시 시트 닫기
+    >
+      <GestureHandlerRootView style={styles.rootViewWrapper}>
+        <GestureDetector gesture={onGestureEvent}>
+          <Animated.View
+            onTouchEnd={(e) => {
+              e.stopPropagation();
+              Keyboard.dismiss(); // 키보드 숨김
+            }}
+            style={[
+              styles.sheet,
+              {
+                width: screenWidth,
+                height: screenHeight,
+                paddingHorizontal: bottomSheetPadding,
+                left: bottomSheetMarginX,
+                right: bottomSheetMarginX,
+                borderTopLeftRadius: DEFAULT_BORDER_RADIUS,
+                borderTopRightRadius: DEFAULT_BORDER_RADIUS,
+                borderBottomLeftRadius: isBottomRadius ? DEFAULT_BORDER_RADIUS : 0,
+                borderBottomRightRadius: isBottomRadius ? DEFAULT_BORDER_RADIUS : 0,
+                backgroundColor: bottomSheetBackgroundColor || background.base,
+              },
+              bsAnimatedStyle, // 애니메이션 스타일 적용
+            ]}
+          >
+            {isHandleVisible && (
+              <ZSView style={[styles.handleContainer, { height: HANDLE_HEIGHT }]}>
+                <ViewAtom style={styles.handle} />
+              </ZSView>
+            )}
+
+            <GestureDetector gesture={onTapEvent}>
+              <ContentsComponent
+                HANDLE_HEIGHT={HANDLE_HEIGHT}
+                panGestureRef={panGestureRef}
+                listScrollPosition={listScrollPosition}
+                openPosition={openPosition}
+                marginBottomBS={marginBottomBS}
+                screenHeight={screenHeight}
+                bottomSheetComponent={bottomSheetComponent}
+                bottomSheetPadding={bottomSheetPadding}
+                maxHeight={maxHeight}
+                isScrollView={isScrollView}
+              />
+            </GestureDetector>
+          </Animated.View>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </Animated.View>
+  ) : null;
+}
+
+
+const createStyles = ({
+  background,
+  text,
+  primary,
+  modalBgColor,
+}: {
+  background: ThemeBackground;
+  text: ThemeTextType;
+  primary: ColorPalette;
+  modalBgColor: string;
+}) =>
+  StyleSheet.create({
+    modalBg: {
+      position: 'absolute',
+      width: Dimensions.get('window').width,
+      height: Dimensions.get('window').height,
+      bottom: 0,
+    },
+    sheet: {
+      position: 'absolute',
+      zIndex: 9000,
+      overflow: 'hidden',
+    },
+    handleContainer: {
+      width: '100%',
+      alignItems: 'center',
+      paddingTop: 13,
+    },
+    handle: {
+      backgroundColor: background.layer2,
+      width: 50,
+      height: 4,
+      borderRadius: 2,
+    },
+    rootViewWrapper: {
+      width: '100%',
+      height: '100%',
+    },
+  });
+
+export default forwardRef(BottomSheetNotify);

package/src/notify/BottomSheetNotify/model/useBottomSheetNotify.tsx

@@ -0,0 +1,270 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BackHandler, Dimensions, Keyboard, Platform, useWindowDimensions } from 'react-native';
+import { Gesture, GestureType } from 'react-native-gesture-handler';
+import { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS, useDerivedValue } from 'react-native-reanimated';
+
+const DIMENSIONS_HEIGHT = Dimensions.get('window').height;
+const INPUT_HEIGHT_CORRECTION = 40; // 인풋 높이 보정
+const NATURAL_GESTURE_TOP = -17; // 자연스러운 제스쳐를 위해 상단 여유 공간 추가
+const NATURAL_GESTURE_X = 8;
+const DEFAULT_BG_OPACITY = 40;
+const HANDLE_HEIGHT = 35;
+
+const timingConfig100 = {
+  duration: 100,
+  easing: Easing.inOut(Easing.quad),
+};
+
+const timingConfig200 = {
+  duration: 200,
+  easing: Easing.inOut(Easing.quad),
+};
+
+interface Props {
+  bottomSheetPadding: number;
+  closeOffset: number;
+  contentsGestureEnable: boolean;
+  isHandleVisible: boolean;
+  bottomSheetMarginX: number;
+}
+
+function useBottomSheetNotify({
+  bottomSheetPadding,
+  closeOffset,
+  contentsGestureEnable,
+  bottomSheetMarginX,
+  isHandleVisible,
+}: Props) {
+  const handleHeight = isHandleVisible ? HANDLE_HEIGHT : 0;
+  const { width: windowWidth } = useWindowDimensions();
+  const panGestureRef = useRef<GestureType>(Gesture.Pan());
+  const listScrollPosition = useSharedValue(0);
+  const gestureComponent = useSharedValue('');
+  const tabAbsoluteY = useSharedValue(0);
+  const screenWidth = useSharedValue(Dimensions.get('window').width);
+  const screenHeight = useSharedValue(1);
+  const openPosition = useSharedValue(0);
+  const bsScale = useSharedValue(1);
+  const bgOpacity = useSharedValue(DEFAULT_BG_OPACITY);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(closeOffset);
+  const fullScreen = useSharedValue(false);
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
+
+  // ** 바텀시트 백그라운드 애니메이션 스타일 정의
+  const bsModalBgStyle = useAnimatedStyle(() => ({
+    backgroundColor: `#1E1E1E${bgOpacity.value}`,
+  }));
+
+  // ** 바텀시트 애니메이션 스타일 정의
+  const bsAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { scale: bsScale.value },
+    ],
+  }));
+
+  // ** 화면 너비 설정
+  useEffect(() => {
+    screenWidth.value = windowWidth - (bottomSheetMarginX ? bottomSheetMarginX * 2 : 0);
+  }, [windowWidth, bottomSheetMarginX]);
+
+  // ** 바텀시트 초기화
+  const initBottomSheet = useCallback(() => {
+    screenHeight.value = 1;
+    openPosition.value = 0;
+  }, [screenHeight, openPosition]);
+
+  // ** 백버튼 핸들러 정의 (안드로이드 전용)
+  const backPressHandler = useCallback(() => {
+    if (bottomSheetVisible) {
+      setBottomSheetVisible(false);
+      return true;
+    }
+    return false;
+  }, [bottomSheetVisible]);
+
+  // ** 백버튼 이벤트 리스너 설정
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backPressHandler);
+
+    return () => backHandler.remove();
+  }, [backPressHandler]);
+
+  // ** 바텀시트 보이기 상태 감지 후 초기화
+  useEffect(() => {
+    if (!bottomSheetVisible) initBottomSheet();
+  }, [bottomSheetVisible, initBottomSheet]);
+
+  // ** 백그라운드 클릭시 키보드나 바텀시트 닫기
+  const backgroundPressHandler = useCallback(() => {
+    if (isKeyboardVisible) {
+      Keyboard.dismiss();
+    } else {
+      handleVisible(false);
+    }
+  }, [isKeyboardVisible]);
+
+  // ** 키보드 닫기
+  const dismissKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  // ** 애니메이션을 사용한 바텀시트 초기 크기 설정
+  const initSize = useCallback(() => {
+    bsScale.value = withTiming(1, timingConfig100);
+    translateX.value = withTiming(0, timingConfig100);
+    bgOpacity.value = DEFAULT_BG_OPACITY;
+  }, [bsScale, translateX, bgOpacity]);
+
+  // ** 소프트 키보드 핸들링 (보이기, 숨기기)
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+      (event) => {
+        setIsKeyboardVisible(true);
+        if (!fullScreen.value) return;
+        const tabAbsoluteYValue = tabAbsoluteY.value;
+        const screenTopToTarget = tabAbsoluteYValue - openPosition.value; // 모달 상단에서 인풋까지 거리
+        const keyboardHeight = event.endCoordinates.height; // 키보드 높이
+        const keyboardLine = DIMENSIONS_HEIGHT - keyboardHeight;
+
+        translateY.value = withTiming(keyboardLine - screenTopToTarget - INPUT_HEIGHT_CORRECTION, timingConfig200);
+      }
+    );
+
+    const keyboardDidHideListener = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+      () => {
+        setIsKeyboardVisible(false);
+
+        // 키보드가 사라질 때 화면의 높이를 원래대로 돌립니다.
+        if (!fullScreen.value) return;
+        handleVisible(true);
+      }
+    );
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, [fullScreen, openPosition, tabAbsoluteY, translateY]);
+
+  // ** 바텀시트 열기 함수
+  const openBottomSheet = useCallback(() => {
+    setTimeout(() => {
+      if (screenHeight.value === 1) return openBottomSheet();
+      translateY.value = withTiming(openPosition.value, timingConfig200);
+      fullScreen.value = true;
+    }, 200);
+  }, [screenHeight, openPosition, translateY]);
+
+  // ** 바텀시트 위치 변경
+  const onOpenPositionChange = useCallback(
+    (value: number) => {
+      if (fullScreen.value && screenHeight.value !== 1) {
+        translateY.value = withTiming(value, timingConfig200);
+      }
+    },
+    [fullScreen, screenHeight, translateY]
+  );
+
+  // ** 애니메이션 값이 변경될 때 처리
+  useDerivedValue(() => {
+    runOnJS(onOpenPositionChange)(openPosition.value);
+    return openPosition.value;
+  }, [openPosition]);
+
+  // ** 바텀시트 상태 관리 (열기/닫기)
+  const handleVisible = useCallback(
+    (isOpen: boolean) => {
+      if (isOpen) {
+        setBottomSheetVisible(true);
+        openBottomSheet();
+      } else {
+        translateY.value = withTiming(closeOffset, timingConfig200);
+        fullScreen.value = false;
+        setTimeout(() => {
+          setBottomSheetVisible(false);
+        }, 200);
+      }
+    },
+    [closeOffset, fullScreen, openBottomSheet, translateY]
+  );
+
+  // ** 탭 제스처 설정
+  const onTapEvent = Gesture.Tap().onStart((event) => {
+    tabAbsoluteY.value = event.absoluteY;
+  });
+
+  // ** 팬 제스처 설정
+  const onGestureEvent = Gesture.Pan()
+    .onStart((event) => {
+      'worklet';
+      runOnJS(dismissKeyboard)();
+
+      // 제스쳐 영역 판단
+      if (openPosition.value + handleHeight > event.absoluteY) {
+        gestureComponent.value = 'Handler';
+        bsScale.value = withTiming(0.98, timingConfig100);
+      } else {
+        gestureComponent.value = 'Contents';
+        if (contentsGestureEnable) bsScale.value = withTiming(0.98, timingConfig100);
+      }
+    })
+    .onUpdate((event) => {
+      'worklet';
+      // 제스처 제어 로직
+      if (!contentsGestureEnable && gestureComponent.value === 'Contents') return;
+
+      const translateXValue = event.translationX;
+      const translateYValue = event.translationY;
+      const calcBg = Math.round(DEFAULT_BG_OPACITY + translateYValue * -1);
+
+      // 백그라운드 컬러 업데이트
+      if (calcBg < 70 && calcBg > DEFAULT_BG_OPACITY) {
+        bgOpacity.value = calcBg;
+      }
+
+      // 자연스러운 X축 움직임
+      if (NATURAL_GESTURE_X > translateXValue && translateXValue > -NATURAL_GESTURE_X && bsScale.value !== 1) {
+        translateX.value = translateXValue;
+      }
+
+      // 상단 제스처 제한
+      if (fullScreen.value && translateYValue < NATURAL_GESTURE_TOP) return;
+      if (!fullScreen.value && translateYValue > 0 && translateY.value === closeOffset) return;
+
+      const result = translateYValue + (fullScreen.value ? openPosition.value : 30);
+      translateY.value = result;
+    })
+    .onEnd(() => {
+      'worklet';
+      runOnJS(initSize)();
+      const shouldOpen = translateY.value < openPosition.value + screenHeight.value / 2;
+      runOnJS(handleVisible)(shouldOpen);
+    })
+    .withRef(panGestureRef);
+
+  return {
+    HANDLE_HEIGHT,
+    bottomSheetVisible,
+    bsAnimatedStyle,
+    onGestureEvent,
+    handleVisible,
+    screenWidth,
+    screenHeight,
+    handleHeight,
+    openPosition,
+    bottomSheetPadding,
+    onTapEvent,
+    panGestureRef,
+    listScrollPosition,
+    bsModalBgStyle,
+    backgroundPressHandler,
+  };
+}
+
+export default useBottomSheetNotify;

package/src/notify/BottomSheetNotify/types/index.ts

@@ -0,0 +1,3 @@
+export interface BottomSheetNotifyRef {
+    handleVisible: (isOpen: boolean) => void;
+}

package/src/notify/BottomSheetNotify/ui/BSTextInput/index.tsx

@@ -0,0 +1,28 @@
+import { useRef } from "react";
+import { Platform, Pressable } from "react-native";
+import { TextInput } from "react-native-gesture-handler";
+
+type Props = {
+};
+
+const BSTextInput = ({ ...props }: Props) => {
+    const textInputRef = useRef<TextInput>(null);
+
+    return (
+        Platform.OS === 'ios' ?
+            <Pressable onPress={() => { textInputRef?.current?.focus(); }}>
+                <TextInput
+                    ref={textInputRef}
+                    pointerEvents='none'
+                    {...props}
+                />
+            </Pressable>
+            :
+            <TextInput
+                ref={textInputRef}
+                {...props}
+            />
+    );
+};
+
+export default BSTextInput;

package/src/notify/BottomSheetNotify/ui/ContentsComponent/index.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react';
+import { Dimensions, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { GestureType, ScrollView } from 'react-native-gesture-handler';
+import { SharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ZSView } from '../../../../ui';
+
+// const ANDROID_STATUS_BAR_HEIGHT = Platform.OS === 'android' ? 25 : 0;
+const ANDROID_STATUS_BAR_HEIGHT = 0;
+
+interface Props {
+    HANDLE_HEIGHT: number;
+    panGestureRef: React.MutableRefObject<GestureType>;
+    listScrollPosition: SharedValue<number>;
+    openPosition: SharedValue<number>;
+    marginBottomBS: number;
+    screenHeight: SharedValue<number>;
+    bottomSheetComponent: React.ReactNode;
+    bottomSheetPadding: number;
+    maxHeight: number;
+    isScrollView: boolean;
+}
+
+// 화살표 함수 대신 일반 함수 사용
+function ContentsComponent({
+    HANDLE_HEIGHT,
+    panGestureRef,
+    listScrollPosition,
+    openPosition,
+    marginBottomBS,
+    screenHeight,
+    bottomSheetComponent,
+    bottomSheetPadding,
+    maxHeight,
+    isScrollView
+}: Props) {
+    const { bottom } = useSafeAreaInsets();
+
+    // onLayout 함수를 useCallback으로 최적화
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        const contentMaxHeight = maxHeight + HANDLE_HEIGHT;
+        const resultHeight = Math.min(height, contentMaxHeight); // 더 간결하게 변경
+        // 성능 문제 방지를 위해 runOnUI 사용
+        screenHeight.value = resultHeight + HANDLE_HEIGHT;
+        openPosition.value = Dimensions.get('window').height - resultHeight - marginBottomBS - bottom - ANDROID_STATUS_BAR_HEIGHT - HANDLE_HEIGHT;
+    }, [maxHeight, HANDLE_HEIGHT, screenHeight, openPosition, marginBottomBS, bottom]);
+
+    // 현재 스크롤 위치를 관리하는 함수
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        listScrollPosition.value = event.nativeEvent.contentOffset.y;
+    }, [listScrollPosition]);
+
+    return isScrollView ? (
+        <ScrollView
+            simultaneousHandlers={[panGestureRef]}
+            onScroll={handleScroll}
+            style={{ maxHeight }}
+            keyboardShouldPersistTaps="handled"
+            bounces={false}
+            bouncesZoom={false}
+            showsVerticalScrollIndicator={false}
+            scrollEventThrottle={16}
+        >
+            <ZSView style={{ width: '100%', minHeight: 1, paddingBottom: bottomSheetPadding }} onLayout={onLayout}>
+                {bottomSheetComponent}
+            </ZSView>
+        </ScrollView>
+    ) : (
+        <ZSView style={{ width: '100%', minHeight: 1, paddingBottom: bottomSheetPadding, maxHeight }} onLayout={onLayout}>
+            {bottomSheetComponent}
+        </ZSView>
+    );
+}
+
+export default React.memo(ContentsComponent); // React.memo로 성능 최적화

package/src/notify/LoadingNotify/index.tsx

@@ -0,0 +1,46 @@
+import { ActivityIndicator, BackHandler } from "react-native";
+import React, { ReactNode, useEffect, useCallback } from "react";
+import { useNotify } from "../../model/useNotify";
+import ModalBackground from "../ui/ModalBackground";
+
+// 함수 선언식으로 변경
+function LoadingNotify({
+  loaderComponent,
+}: {
+  loaderComponent?: () => ReactNode;
+}) {
+  const { loaderVisible } = useNotify();
+
+  // BackHandler 이벤트 처리 최적화
+  useEffect(() => {
+    const handleBackPressed = () => {
+      if (loaderVisible) return true; // 로더가 보이는 경우 뒤로가기 방지
+      return false;
+    };
+
+    const handler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      handleBackPressed
+    );
+
+    // cleanup 함수 추가
+    return () => handler.remove();
+  }, [loaderVisible]);
+
+  // loaderComponent를 메모이제이션
+  const renderLoader = useCallback(() => {
+    return loaderComponent ? (
+      loaderComponent()
+    ) : (
+      <ActivityIndicator size="large" color="#fff" />
+    );
+  }, [loaderComponent]);
+
+  return loaderVisible ? (
+    <ModalBackground>
+      {renderLoader()}
+    </ModalBackground>
+  ) : null;
+}
+
+export default LoadingNotify;

package/src/notify/PopOver/PopOverButton.tsx

@@ -0,0 +1,56 @@
+import React, { useRef, useCallback } from 'react';
+import { View, Pressable, ViewProps, StyleSheet } from 'react-native';
+import { useNotify } from '../../model/useNotify';
+
+interface PopOverButtonProps extends ViewProps {
+  width: number;
+  height: number;
+  backgroundColor?: string;
+  popOverMenuComponent: React.ReactNode;
+}
+
+const PopOverButton: React.FC<PopOverButtonProps> = ({
+  width,
+  height,
+  backgroundColor = 'transparent',
+  popOverMenuComponent,
+  children,
+  ...props
+}) => {
+  const buttonRef = useRef<View>(null);
+  const { showPopOverMenu } = useNotify();
+
+  const handlePress = useCallback(() => {
+    buttonRef.current?.measure((fx, fy, measuredWidth, measuredHeight, pageX, pageY) => {
+      if (pageX !== undefined && pageY !== undefined) {
+        const rbX = pageX + measuredWidth;
+        const rbY = pageY + measuredHeight;
+
+        showPopOverMenu({ px: rbX, py: rbY, component: popOverMenuComponent });
+      }
+    });
+  }, [showPopOverMenu, popOverMenuComponent]);
+
+  return (
+    <Pressable onPress={handlePress} style={styles.pressable}>
+      <View
+        ref={buttonRef}
+        style={[styles.button, { width, height, backgroundColor }]}
+        {...props}
+      >
+        {children}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignItems: 'flex-start',
+  },
+  button: {
+    justifyContent: 'center',
+  },
+});
+
+export default PopOverButton;