@0610studio/zs-ui 0.0.13 → 0.0.15

package/src/notify/BottomSheetNotify/index.tsx

@@ -1,177 +0,0 @@
-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 { ThemeBackground } 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;
-  showsVerticalScrollIndicator: boolean;
-  headerComponent?: 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,
-    showsVerticalScrollIndicator,
-    headerComponent
-  } = 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 } } = useTheme();
-
-  const styles = useMemo(
-    () => createStyles({ background }),
-    [background]
-  );
-
-  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}
-                showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-                headerComponent={headerComponent}
-              />
-            </GestureDetector>
-          </Animated.View>
-        </GestureDetector>
-      </GestureHandlerRootView>
-    </Animated.View>
-  ) : null;
-}
-
-
-const createStyles = ({
-  background,
-}: {
-  background: ThemeBackground;
-}) =>
-  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

@@ -1,270 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,86 +0,0 @@
-import React, { useCallback } from 'react';
-import { Dimensions, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, Text, View } 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;
-    showsVerticalScrollIndicator: boolean;
-    headerComponent?: React.ReactNode;
-}
-
-// 화살표 함수 대신 일반 함수 사용
-function ContentsComponent({
-    HANDLE_HEIGHT,
-    panGestureRef,
-    listScrollPosition,
-    openPosition,
-    marginBottomBS,
-    screenHeight,
-    bottomSheetComponent,
-    bottomSheetPadding,
-    maxHeight,
-    isScrollView,
-    showsVerticalScrollIndicator,
-    headerComponent
-}: 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}
-            overScrollMode="never" 
-            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            scrollEventThrottle={16}
-            stickyHeaderIndices={headerComponent ? [0] : undefined}
-        >
-            {headerComponent && headerComponent}
-
-            <ZSView style={{ width: '100%', minHeight: 1, paddingBottom: bottomSheetPadding }} onLayout={onLayout}>
-                {bottomSheetComponent}
-            </ZSView>
-        </ScrollView>
-    ) : (
-        <ZSView style={{ width: '100%', minHeight: 1, paddingBottom: bottomSheetPadding, maxHeight }} onLayout={onLayout}>
-            {headerComponent && headerComponent}
-
-            {bottomSheetComponent}
-        </ZSView>
-    );
-}
-
-export default React.memo(ContentsComponent); // React.memo로 성능 최적화

package/src/notify/LoadingNotify/index.tsx

@@ -1,46 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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;