@0610studio/zs-ui 0.0.64 → 0.1.0

package/build/assets/SvgCheck.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgCheck.d.ts","sourceRoot":"","sources":["../../src/assets/SvgCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,QAAQ;;;;uBAYpB,CAAC"}
+{"version":3,"file":"SvgCheck.d.ts","sourceRoot":"","sources":["../../src/assets/SvgCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,QAAQ,GAAI;;;;CAAgD,sBAYxE,CAAC"}

package/build/assets/SvgExclamation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgExclamation.d.ts","sourceRoot":"","sources":["../../src/assets/SvgExclamation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,cAAc;;;;uBAkCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SvgExclamation.d.ts","sourceRoot":"","sources":["../../src/assets/SvgExclamation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,cAAc,GAAI;;;;CAIvB,sBA8BA,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/assets/SvgX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgX.d.ts","sourceRoot":"","sources":["../../src/assets/SvgX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,IAAI;;;uBAkBhB,CAAC"}
+{"version":3,"file":"SvgX.d.ts","sourceRoot":"","sources":["../../src/assets/SvgX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,IAAI,GAAI;;;CAAgC,sBAkBpD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,UAAU,MAAM,gBAAgB,MAAM,WAIlF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,OAAO,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAE5G,CAAC;AAEF,eAAO,MAAM,YAAY,UACd,SAAS,CAAC,SAAS,CAAC,aAChB,MAAM,SAAS,KAC3B,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,SAQ/B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,EAAE,cAAc,MAAM,WAIlF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,OAAO,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAE5G,CAAC;AAEF,eAAO,MAAM,YAAY,GACrB,OAAO,SAAS,CAAC,SAAS,CAAC,EAC3B,WAAW,MAAM,SAAS,KAC3B,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,SAQ/B,CAAC"}

package/build/overlay/AlertOverlay/index.js

@@ -40,12 +40,11 @@ function AlertOverlay({ actions, title, informative, isBackgroundTouchClose, tit
           </ViewAtom>)}
       </Animated.View>);
     }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);
-    if (!alertVisible)
-        return null;
-    return (<ModalBackground modalBgColor={modalBgColor} onPress={() => { if (isBackgroundTouchClose)
-        setAlertVisible(false); }}>
-      {content}
-    </ModalBackground>);
+    return (!alertVisible ? null :
+        <ModalBackground key={alertVisible ? 'visibleao' : 'hiddenao'} modalBgColor={modalBgColor} onPress={() => { if (isBackgroundTouchClose)
+            setAlertVisible(false); }}>
+        {content}
+      </ModalBackground>);
 }
 export default AlertOverlay;
 const createStyles = ({ background }) => StyleSheet.create({

package/build/overlay/AlertOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport { ZSText } from '../../ui';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\n\nconst modalWidth = Dimensions.get('window').width - 60;\n\nfunction AlertOverlay({\n  actions,\n  title,\n  informative,\n  isBackgroundTouchClose,\n  titleStyle,\n  informativeStyle,\n  secondaryButtonStyle,\n  primaryButtonStyle,\n  secondaryButtonTextStyle,\n  primaryButtonTextStyle,\n  singleButtonTextStyle,\n}: ShowAlertProps) {\n  const { alertVisible, setAlertVisible } = useAlert();\n  const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();\n  const styles = useMemo(() => createStyles({ background }), [background]);\n\n  const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n    if (onPressFunction) onPressFunction();\n    setAlertVisible(false);\n  }, [setAlertVisible]);\n\n  const content = useMemo(() => {\n    const { primary, secondary } = actions || {} as AlertActions;\n\n    return (\n      <Animated.View\n        entering={FadeInDown.duration(300)}\n        exiting={FadeOutDown.duration(100)}\n        style={[styles.contentContainer, { width: modalWidth }]}\n      >\n        {title && (\n          <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n        )}\n        {informative && (\n          <ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n        )}\n        {actions && (\n          <ViewAtom style={styles.buttonContainer}>\n            {secondary ? (\n              <>\n                <TouchableOpacity\n                  style={[\n                    styles.button,\n                    { backgroundColor: background.neutral, marginRight: 8 },\n                    secondaryButtonStyle\n                  ]}\n                  onPress={handleButtonPress(secondary?.onPress)}\n                >\n                  <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n                </TouchableOpacity>\n\n                <TouchableOpacity\n                  style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                  onPress={handleButtonPress(primary?.onPress)}\n                >\n                  <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n                </TouchableOpacity>\n              </>\n            ) : (\n              <TouchableOpacity\n                style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                onPress={handleButtonPress(primary?.onPress)}\n              >\n                <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n              </TouchableOpacity>\n            )}\n          </ViewAtom>\n        )}\n      </Animated.View>\n    );\n  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n  if (!alertVisible) return null;\n\n  return (\n    <ModalBackground\n      modalBgColor={modalBgColor}\n      onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n    >\n      {content}\n    </ModalBackground>\n  )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\n  StyleSheet.create({\n    title: {\n      marginBottom: 8,\n      width: '100%',\n      paddingHorizontal: 4\n    },\n    informative: {\n      marginTop: 8,\n      width: '100%',\n      paddingHorizontal: 4\n    },\n    buttonContainer: {\n      flexDirection: 'row',\n      width: '100%',\n      marginTop: 24,\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n    },\n    button: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      paddingVertical: 14,\n      borderRadius: 12,\n    },\n    avoidingView: {\n      flex: 1,\n      justifyContent: 'center'\n    },\n    contentContainer: {\n      alignItems: 'center',\n      backgroundColor: background.base,\n      borderRadius: 22,\n      paddingBottom: 18,\n      paddingTop: 24,\n      paddingHorizontal: 20,\n    },\n  });\n\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport { ZSText } from '../../ui';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\n\nconst modalWidth = Dimensions.get('window').width - 60;\n\nfunction AlertOverlay({\n  actions,\n  title,\n  informative,\n  isBackgroundTouchClose,\n  titleStyle,\n  informativeStyle,\n  secondaryButtonStyle,\n  primaryButtonStyle,\n  secondaryButtonTextStyle,\n  primaryButtonTextStyle,\n  singleButtonTextStyle,\n}: ShowAlertProps) {\n  const { alertVisible, setAlertVisible } = useAlert();\n  const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();\n  const styles = useMemo(() => createStyles({ background }), [background]);\n\n  const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n    if (onPressFunction) onPressFunction();\n    setAlertVisible(false);\n  }, [setAlertVisible]);\n\n  const content = useMemo(() => {\n    const { primary, secondary } = actions || {} as AlertActions;\n\n    return (\n      <Animated.View\n        entering={FadeInDown.duration(300)}\n        exiting={FadeOutDown.duration(100)}\n        style={[styles.contentContainer, { width: modalWidth }]}\n      >\n        {title && (\n          <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n        )}\n        {informative && (\n          <ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n        )}\n        {actions && (\n          <ViewAtom style={styles.buttonContainer}>\n            {secondary ? (\n              <>\n                <TouchableOpacity\n                  style={[\n                    styles.button,\n                    { backgroundColor: background.neutral, marginRight: 8 },\n                    secondaryButtonStyle\n                  ]}\n                  onPress={handleButtonPress(secondary?.onPress)}\n                >\n                  <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n                </TouchableOpacity>\n\n                <TouchableOpacity\n                  style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                  onPress={handleButtonPress(primary?.onPress)}\n                >\n                  <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n                </TouchableOpacity>\n              </>\n            ) : (\n              <TouchableOpacity\n                style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                onPress={handleButtonPress(primary?.onPress)}\n              >\n                <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n              </TouchableOpacity>\n            )}\n          </ViewAtom>\n        )}\n      </Animated.View>\n    );\n  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n  return (\n    !alertVisible ? null :\n      <ModalBackground\n        key={alertVisible ? 'visibleao' : 'hiddenao'}\n        modalBgColor={modalBgColor}\n        onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n      >\n        {content}\n      </ModalBackground>\n  )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\n  StyleSheet.create({\n    title: {\n      marginBottom: 8,\n      width: '100%',\n      paddingHorizontal: 4\n    },\n    informative: {\n      marginTop: 8,\n      width: '100%',\n      paddingHorizontal: 4\n    },\n    buttonContainer: {\n      flexDirection: 'row',\n      width: '100%',\n      marginTop: 24,\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n    },\n    button: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      paddingVertical: 14,\n      borderRadius: 12,\n    },\n    avoidingView: {\n      flex: 1,\n      justifyContent: 'center'\n    },\n    contentContainer: {\n      alignItems: 'center',\n      backgroundColor: background.base,\n      borderRadius: 22,\n      paddingBottom: 18,\n      paddingTop: 24,\n      paddingHorizontal: 20,\n    },\n  });\n\n"]}

package/build/overlay/BottomSheetOverlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAIzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BAqJtB;AAyBD,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAIzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BAqJtB;AA0BD,eAAe,kBAAkB,CAAC"}

package/build/overlay/BottomSheetOverlay/index.js

@@ -99,44 +99,44 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
             });
         },
     })).current;
-    if (!localVisible)
-        return null;
-    return (<ModalBackground modalBgColor={palette.modalBgColor} onPress={() => {
-            if (isBackgroundTouchClose)
-                setBottomSheetVisible(false);
-        }}>
-      <Animated.View style={[
-            styles.container,
-            {
-                width: width - marginHorizontal * 2,
-                height: maxHeight,
-                marginHorizontal,
-                bottom: marginBottom + bottom,
-                backgroundColor: palette.background.base,
-            },
-            animatedStyles,
-        ]}>
-        <View style={[
-            styles.pressableView,
-            { paddingHorizontal: padding, paddingBottom: padding },
-        ]}>
-          <View {...panResponder.panHandlers}>
-            <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>
-              <View style={[styles.gestureBar, { backgroundColor: palette.divider }]}/>
+    return (!localVisible ? null :
+        <ModalBackground key={localVisible ? 'visiblebs' : 'hiddenbs'} modalBgColor={palette.modalBgColor} onPress={() => {
+                if (isBackgroundTouchClose)
+                    setBottomSheetVisible(false);
+            }}>
+        <Animated.View style={[
+                styles.container,
+                {
+                    width: width - marginHorizontal * 2,
+                    height: maxHeight,
+                    marginHorizontal,
+                    bottom: marginBottom + bottom,
+                    backgroundColor: palette.background.base,
+                },
+                animatedStyles,
+            ]}>
+          <View style={[
+                styles.pressableView,
+                { paddingHorizontal: padding, paddingBottom: padding },
+            ]}>
+            <View {...panResponder.panHandlers}>
+              <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>
+                <View style={[styles.gestureBar, { backgroundColor: palette.divider }]}/>
+              </View>
+              {headerComponent}
             </View>
-            {headerComponent}
-          </View>
 
-          {component}
-        </View>
-      </Animated.View>
-    </ModalBackground>);
+            {component}
+          </View>
+        </Animated.View>
+      </ModalBackground>);
 }
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
         borderRadius: 26,
         overflow: 'hidden',
+        zIndex: 8100,
     },
     pressableView: {
         width: '100%',

package/build/overlay/BottomSheetOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { Dimensions, StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\n\nconst { width, height: windowHeight } = Dimensions.get('window');\n\nfunction BottomSheetOverlay({\n  headerComponent,\n  component,\n  options = {},\n}: ShowBottomSheetProps) {\n  const {\n    isBackgroundTouchClose = true,\n    marginHorizontal = 10,\n    marginBottom = 10,\n    padding = 14,\n  } = options;\n  const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n  // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n  const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n  const translateY = useSharedValue(maxHeight);\n  const translateX = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const { palette } = useTheme();\n  const { bottom } = useSafeAreaInsets();\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const [localVisible, setLocalVisible] = useState(false);\n\n  // ** 소프트 키보드 핸들링\n  useEffect(() => {\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n      translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n    });\n\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n      translateY.value = withTiming(0, { duration: 200 });\n    });\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (bottomSheetVisible) {\n      Keyboard.dismiss();\n      setLocalVisible(true);\n      translateY.value = withSpring(0, {\n        damping: 50,\n        stiffness: 300,\n        mass: 0.7,\n        velocity: 100,\n        restDisplacementThreshold: 0.2,\n      });\n    } else {\n      translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 200);\n    }\n  }, [bottomSheetVisible]);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: translateY.value },\n        { translateX: translateX.value },\n        { scale: scale.value }\n      ],\n    };\n  });\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: () => {\n        Keyboard.dismiss();\n        startX.current = translateX.value;\n        startY.current = translateY.value;\n        scale.value = withTiming(0.985, { duration: 200 });\n\n      },\n      onPanResponderMove: (_, gestureState) => {\n        const newTranslateX = (startX.current + gestureState.dx) / 18;\n        translateX.value = newTranslateX;\n\n        const newTranslateY = startY.current + gestureState.dy;\n        if (newTranslateY < 0) {\n          translateY.value = newTranslateY / 18;\n        } else {\n          translateY.value = newTranslateY / 1.5;\n        }\n      },\n      onPanResponderRelease: (_, gestureState) => {\n        translateX.value = withTiming(0, { duration: 100 });\n\n        // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n        if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n          translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n          setBottomSheetVisible(false);\n        } else {\n          translateY.value = withTiming(0, { duration: 150 });\n        }\n\n        // 사이즈 원래대로 복귀\n        scale.value = withSpring(1, {\n          damping: 15,\n          stiffness: 300\n        });\n      },\n    })\n  ).current;\n\n  if (!localVisible) return null;\n\n  return (\n    <ModalBackground\n      modalBgColor={palette.modalBgColor}\n      onPress={() => {\n        if (isBackgroundTouchClose) setBottomSheetVisible(false);\n      }}\n    >\n      <Animated.View\n        style={[\n          styles.container,\n          {\n            width: width - marginHorizontal * 2,\n            height: maxHeight,\n            marginHorizontal,\n            bottom: marginBottom + bottom,\n            backgroundColor: palette.background.base,\n          },\n          animatedStyles,\n        ]}\n      >\n        <View\n          style={[\n            styles.pressableView,\n            { paddingHorizontal: padding, paddingBottom: padding },\n          ]}\n        >\n          <View {...panResponder.panHandlers}>\n            <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n              <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n            </View>\n            {headerComponent}\n          </View>\n\n          {component}\n        </View>\n      </Animated.View>\n    </ModalBackground>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    borderRadius: 26,\n    overflow: 'hidden',\n  },\n  pressableView: {\n    width: '100%',\n    height: '100%',\n  },\n  gestureBarContainer: {\n    width: '100%',\n    paddingTop: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureBar: {\n    width: 45,\n    height: 3,\n    borderRadius: 2,\n  },\n});\n\nexport default BottomSheetOverlay;"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { Dimensions, StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\n\nconst { width, height: windowHeight } = Dimensions.get('window');\n\nfunction BottomSheetOverlay({\n  headerComponent,\n  component,\n  options = {},\n}: ShowBottomSheetProps) {\n  const {\n    isBackgroundTouchClose = true,\n    marginHorizontal = 10,\n    marginBottom = 10,\n    padding = 14,\n  } = options;\n  const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n  // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n  const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n  const translateY = useSharedValue(maxHeight);\n  const translateX = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const { palette } = useTheme();\n  const { bottom } = useSafeAreaInsets();\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const [localVisible, setLocalVisible] = useState(false);\n\n  // ** 소프트 키보드 핸들링\n  useEffect(() => {\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n      translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n    });\n\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n      translateY.value = withTiming(0, { duration: 200 });\n    });\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (bottomSheetVisible) {\n      Keyboard.dismiss();\n      setLocalVisible(true);\n      translateY.value = withSpring(0, {\n        damping: 50,\n        stiffness: 300,\n        mass: 0.7,\n        velocity: 100,\n        restDisplacementThreshold: 0.2,\n      });\n    } else {\n      translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 200);\n    }\n  }, [bottomSheetVisible]);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: translateY.value },\n        { translateX: translateX.value },\n        { scale: scale.value }\n      ],\n    };\n  });\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: () => {\n        Keyboard.dismiss();\n        startX.current = translateX.value;\n        startY.current = translateY.value;\n        scale.value = withTiming(0.985, { duration: 200 });\n\n      },\n      onPanResponderMove: (_, gestureState) => {\n        const newTranslateX = (startX.current + gestureState.dx) / 18;\n        translateX.value = newTranslateX;\n\n        const newTranslateY = startY.current + gestureState.dy;\n        if (newTranslateY < 0) {\n          translateY.value = newTranslateY / 18;\n        } else {\n          translateY.value = newTranslateY / 1.5;\n        }\n      },\n      onPanResponderRelease: (_, gestureState) => {\n        translateX.value = withTiming(0, { duration: 100 });\n\n        // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n        if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n          translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n          setBottomSheetVisible(false);\n        } else {\n          translateY.value = withTiming(0, { duration: 150 });\n        }\n\n        // 사이즈 원래대로 복귀\n        scale.value = withSpring(1, {\n          damping: 15,\n          stiffness: 300\n        });\n      },\n    })\n  ).current;\n\n  return (\n    !localVisible ? null :\n      <ModalBackground\n        key={localVisible ? 'visiblebs' : 'hiddenbs'}\n        modalBgColor={palette.modalBgColor}\n        onPress={() => {\n          if (isBackgroundTouchClose) setBottomSheetVisible(false);\n        }}\n      >\n        <Animated.View\n          style={[\n            styles.container,\n            {\n              width: width - marginHorizontal * 2,\n              height: maxHeight,\n              marginHorizontal,\n              bottom: marginBottom + bottom,\n              backgroundColor: palette.background.base,\n            },\n            animatedStyles,\n          ]}\n        >\n          <View\n            style={[\n              styles.pressableView,\n              { paddingHorizontal: padding, paddingBottom: padding },\n            ]}\n          >\n            <View {...panResponder.panHandlers}>\n              <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n                <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n              </View>\n              {headerComponent}\n            </View>\n\n            {component}\n          </View>\n        </Animated.View>\n      </ModalBackground>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    borderRadius: 26,\n    overflow: 'hidden',\n    zIndex: 8100,\n  },\n  pressableView: {\n    width: '100%',\n    height: '100%',\n  },\n  gestureBarContainer: {\n    width: '100%',\n    paddingTop: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureBar: {\n    width: 45,\n    height: 3,\n    borderRadius: 2,\n  },\n});\n\nexport default BottomSheetOverlay;"]}

package/build/overlay/LoadingNotify/index.js

@@ -11,7 +11,7 @@ function LoadingNotify({ loaderComponent, }) {
     }, [loaderComponent]);
     if (!loaderVisible)
         return null;
-    return (<ModalBackground modalBgColor={palette.modalBgColor}>
+    return (<ModalBackground key={loaderVisible ? 'visibleln' : 'hiddenln'} modalBgColor={palette.modalBgColor}>
       {renderLoader()}
     </ModalBackground>);
 }

package/build/overlay/LoadingNotify/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,SAAS,aAAa,CAAC,EACrB,eAAe,GAGhB;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,eAAe,EAAE,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAG,CAChD,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACL,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAClD;MAAA,CAAC,YAAY,EAAE,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import { ActivityIndicator } from \"react-native\";\nimport React, { ReactNode, useCallback } from \"react\";\nimport { useLoader } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { useTheme } from \"../../model\";\n\nfunction LoadingNotify({\n  loaderComponent,\n}: {\n  loaderComponent?: () => ReactNode;\n}) {\n  const { loaderVisible } = useLoader();\n  const { palette } = useTheme();\n\n  const renderLoader = useCallback(() => {\n    return loaderComponent ? (\n      loaderComponent()\n    ) : (\n      <ActivityIndicator size=\"large\" color=\"#fff\" />\n    );\n  }, [loaderComponent]);\n\n  if (!loaderVisible) return null;\n\n  return (\n    <ModalBackground modalBgColor={palette.modalBgColor}>\n      {renderLoader()}\n    </ModalBackground>\n  )\n}\n\nexport default LoadingNotify;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,SAAS,aAAa,CAAC,EACrB,eAAe,GAGhB;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,eAAe,EAAE,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAG,CAChD,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACL,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CACjG;MAAA,CAAC,YAAY,EAAE,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import { ActivityIndicator } from \"react-native\";\nimport React, { ReactNode, useCallback } from \"react\";\nimport { useLoader } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { useTheme } from \"../../model\";\n\nfunction LoadingNotify({\n  loaderComponent,\n}: {\n  loaderComponent?: () => ReactNode;\n}) {\n  const { loaderVisible } = useLoader();\n  const { palette } = useTheme();\n\n  const renderLoader = useCallback(() => {\n    return loaderComponent ? (\n      loaderComponent()\n    ) : (\n      <ActivityIndicator size=\"large\" color=\"#fff\" />\n    );\n  }, [loaderComponent]);\n\n  if (!loaderVisible) return null;\n\n  return (\n    <ModalBackground key={loaderVisible ? 'visibleln' : 'hiddenln'} modalBgColor={palette.modalBgColor}>\n      {renderLoader()}\n    </ModalBackground>\n  )\n}\n\nexport default LoadingNotify;\n"]}

package/build/overlay/Modality/index.js

@@ -67,46 +67,45 @@ function Modality({ modalityComponent, }) {
             opacity: backgroundOpacity.value
         };
     });
-    if (!localVisible)
-        return null;
-    return (<Animated.View style={[
-            styles.animatedBackground,
-            { backgroundColor: palette.background.neutral },
-            backgroundAnimatedStyle
-        ]}>
-      <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base}/>
+    return (!localVisible ? null :
+        <Animated.View key={localVisible ? 'visiblemd' : 'hiddenmd'} style={[
+                styles.animatedBackground,
+                { backgroundColor: palette.background.neutral },
+                backgroundAnimatedStyle
+            ]}>
+        <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base}/>
 
-      <Animated.View exiting={FadeOut.duration(300)} style={[
-            styles.backScreen,
-            { backgroundColor: palette.background.layer2 },
-            backScreenAnimatedStyle
-        ]}/>
+        <Animated.View exiting={FadeOut.duration(300)} style={[
+                styles.backScreen,
+                { backgroundColor: palette.background.layer2 },
+                backScreenAnimatedStyle
+            ]}/>
 
-      <Animated.View style={[
-            {
-                height: height - mainScreenMargin,
-                paddingBottom: mainScrrenPadding, // 제스쳐 공간
-                backgroundColor: palette.background.base
-            },
-            styles.mainScreen,
-            mainScreenAnimatedStyle
-        ]}>
-        <ZSView style={styles.contents}>
-          {modalityComponent}
-        </ZSView>
-      </Animated.View>
-    </Animated.View>);
+        <Animated.View style={[
+                {
+                    height: height - mainScreenMargin,
+                    paddingBottom: mainScrrenPadding, // 제스쳐 공간
+                    backgroundColor: palette.background.base
+                },
+                styles.mainScreen,
+                mainScreenAnimatedStyle
+            ]}>
+          <ZSView style={styles.contents}>
+            {modalityComponent}
+          </ZSView>
+        </Animated.View>
+      </Animated.View>);
 }
 const styles = StyleSheet.create({
     contents: {
         flex: 1,
         width: width,
         paddingTop: 10,
+        zIndex: 8003,
     },
     animatedBackground: {
-        width,
-        height,
-        position: 'absolute',
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 8000,
     },
     backScreen: {
         position: 'absolute',
@@ -114,7 +113,7 @@ const styles = StyleSheet.create({
         height,
         justifyContent: 'center',
         alignItems: 'center',
-        zIndex: 8000,
+        zIndex: 8001,
     },
     mainScreen: {
         width,

package/build/overlay/Modality/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions, StatusBar, StyleSheet } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { ZSView } from '../../ui';\nimport { useTheme } from '../../model';\n\nconst { width, height } = Dimensions.get('window');\n\nfunction Modality({\n  modalityComponent,\n}: {\n  modalityComponent?: React.ReactNode;\n}) {\n  const { palette } = useTheme();\n  const [localVisible, setLocalVisible] = useState(false);\n  const { modalityVisible } = useModality();\n  const insets = useSafeAreaInsets();\n  const backScale = useSharedValue(1);\n  const backTranslateY = useSharedValue(0);\n  const backBorderRadius = useSharedValue(0);\n  const mainTranslateY = useSharedValue(height);\n  const backgroundOpacity = useSharedValue(1);\n  const overrideMargin = 10;\n  const mainScreenMargin = overrideMargin + (initialWindowMetrics?.insets.top || insets.top);\n  const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n  // 애니메이션 트리거\n  useEffect(() => {\n    if (modalityVisible) {\n      // 모달이 열리는 애니메이션\n      setLocalVisible(true);\n      backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n      backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n      backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n      mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n      backgroundOpacity.value = withTiming(1, { duration: 500 });\n    } else {\n      // 모달이 닫히는 애니메이션 (역순)\n      backScale.value = withTiming(1, { duration: 100 });\n      backTranslateY.value = withTiming(0, { duration: 100 });\n      backBorderRadius.value = withTiming(0, { duration: 100 });\n      mainTranslateY.value = withTiming(height, { duration: 200 });\n      backgroundOpacity.value = withTiming(0, { duration: 300 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 500);\n    }\n  }, [modalityVisible]);\n\n  // 부모 스크린\n  const backScreenAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { scaleX: backScale.value },\n        { translateY: backTranslateY.value }\n      ],\n      borderTopLeftRadius: backBorderRadius.value,\n      borderTopRightRadius: backBorderRadius.value,\n    };\n  });\n\n  // 아래에서 등장하는 Modality 화면\n  const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: mainTranslateY.value }\n      ]\n    };\n  });\n\n  // 배경 불투명도 스타일\n  const backgroundAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: backgroundOpacity.value\n    };\n  });\n\n  if (!localVisible) return null;\n\n  return (\n    <Animated.View\n      style={[\n        styles.animatedBackground,\n        { backgroundColor: palette.background.neutral },\n        backgroundAnimatedStyle\n      ]}\n    >\n      <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n      <Animated.View\n        exiting={FadeOut.duration(300)}\n        style={[\n          styles.backScreen,\n          { backgroundColor: palette.background.layer2 },\n          backScreenAnimatedStyle\n        ]}\n      />\n\n      <Animated.View\n        style={[\n          {\n            height: height - mainScreenMargin,\n            paddingBottom: mainScrrenPadding, // 제스쳐 공간\n            backgroundColor: palette.background.base\n          },\n          styles.mainScreen,\n          mainScreenAnimatedStyle\n        ]}\n      >\n        <ZSView style={styles.contents}>\n          {modalityComponent}\n        </ZSView>\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  contents: {\n    flex: 1,\n    width: width,\n    paddingTop: 10,\n  },\n  animatedBackground: {\n    width,\n    height,\n    position: 'absolute',\n  },\n  backScreen: {\n    position: 'absolute',\n    width,\n    height,\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 8000,\n  },\n  mainScreen: {\n    width,\n    position: 'absolute',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n    zIndex: 8002,\n    overflow: 'hidden',\n  },\n});\n\nexport default Modality;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions, StatusBar, StyleSheet } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { ZSView } from '../../ui';\nimport { useTheme } from '../../model';\n\nconst { width, height } = Dimensions.get('window');\n\nfunction Modality({\n  modalityComponent,\n}: {\n  modalityComponent?: React.ReactNode;\n}) {\n  const { palette } = useTheme();\n  const [localVisible, setLocalVisible] = useState(false);\n  const { modalityVisible } = useModality();\n  const insets = useSafeAreaInsets();\n  const backScale = useSharedValue(1);\n  const backTranslateY = useSharedValue(0);\n  const backBorderRadius = useSharedValue(0);\n  const mainTranslateY = useSharedValue(height);\n  const backgroundOpacity = useSharedValue(1);\n  const overrideMargin = 10;\n  const mainScreenMargin = overrideMargin + (initialWindowMetrics?.insets.top || insets.top);\n  const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n  // 애니메이션 트리거\n  useEffect(() => {\n    if (modalityVisible) {\n      // 모달이 열리는 애니메이션\n      setLocalVisible(true);\n      backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n      backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n      backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n      mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n      backgroundOpacity.value = withTiming(1, { duration: 500 });\n    } else {\n      // 모달이 닫히는 애니메이션 (역순)\n      backScale.value = withTiming(1, { duration: 100 });\n      backTranslateY.value = withTiming(0, { duration: 100 });\n      backBorderRadius.value = withTiming(0, { duration: 100 });\n      mainTranslateY.value = withTiming(height, { duration: 200 });\n      backgroundOpacity.value = withTiming(0, { duration: 300 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 500);\n    }\n  }, [modalityVisible]);\n\n  // 부모 스크린\n  const backScreenAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { scaleX: backScale.value },\n        { translateY: backTranslateY.value }\n      ],\n      borderTopLeftRadius: backBorderRadius.value,\n      borderTopRightRadius: backBorderRadius.value,\n    };\n  });\n\n  // 아래에서 등장하는 Modality 화면\n  const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: mainTranslateY.value }\n      ]\n    };\n  });\n\n  // 배경 불투명도 스타일\n  const backgroundAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: backgroundOpacity.value\n    };\n  });\n\n  return (\n    !localVisible ? null :\n      <Animated.View\n        key={localVisible ? 'visiblemd' : 'hiddenmd'}\n        style={[\n          styles.animatedBackground,\n          { backgroundColor: palette.background.neutral },\n          backgroundAnimatedStyle\n        ]}\n      >\n        <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n        <Animated.View\n          exiting={FadeOut.duration(300)}\n          style={[\n            styles.backScreen,\n            { backgroundColor: palette.background.layer2 },\n            backScreenAnimatedStyle\n          ]}\n        />\n\n        <Animated.View\n          style={[\n            {\n              height: height - mainScreenMargin,\n              paddingBottom: mainScrrenPadding, // 제스쳐 공간\n              backgroundColor: palette.background.base\n            },\n            styles.mainScreen,\n            mainScreenAnimatedStyle\n          ]}\n        >\n          <ZSView style={styles.contents}>\n            {modalityComponent}\n          </ZSView>\n        </Animated.View>\n      </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  contents: {\n    flex: 1,\n    width: width,\n    paddingTop: 10,\n    zIndex: 8003,\n  },\n  animatedBackground: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 8000,\n  },\n  backScreen: {\n    position: 'absolute',\n    width,\n    height,\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 8001,\n  },\n  mainScreen: {\n    width,\n    position: 'absolute',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n    zIndex: 8002,\n    overflow: 'hidden',\n  },\n});\n\nexport default Modality;\n"]}

package/build/overlay/PopOver/PopOverMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOverMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMrD,iBAAS,WAAW,CAAC,EACnB,EAAE,EACF,EAAE,EACF,SAAS,EACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAqFvC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PopOverMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMrD,iBAAS,WAAW,CAAC,EACnB,EAAE,EACF,EAAE,EACF,SAAS,EACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAsFvC;AAED,eAAe,WAAW,CAAC"}

package/build/overlay/PopOver/PopOverMenu.js

@@ -56,7 +56,7 @@ function PopOverMenu({ px, py, component }) {
     if (!popOverVisible)
         return null;
     const { adjustedX, adjustedY } = getAdjustedPosition();
-    return (<ModalBackground modalBgColor={palette.modalBgColor} isCenter={false} onPress={() => setPopOverVisible(false)}>
+    return (<ModalBackground key={popOverVisible ? 'visiblepo' : 'hiddenpo'} modalBgColor={palette.modalBgColor} isCenter={false} onPress={() => setPopOverVisible(false)}>
       {isContentVisible && (<Animated.View entering={FadeInUp} exiting={FadeOutUp}>
           <Pressable style={{
                 position: 'absolute',

package/build/overlay/PopOver/PopOverMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Dimensions, LayoutChangeEvent, Pressable } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { usePopOver } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { PopOverMenuProps } from \"../../model/types\";\nimport { useTheme } from \"../../model\";\n\nconst WINDOW_HEIGHT = Dimensions.get('window').height;\nconst WINDOW_WIDTH = Dimensions.get('window').width;\n\nfunction PopOverMenu({\n  px,\n  py,\n  component\n}: PopOverMenuProps): JSX.Element | null {\n  const [isContentVisible, setIsContentVisible] = useState<boolean>(false);\n  const [contentWidth, setContentWidth] = useState<number>(0);\n  const [contentHeight, setContentHeight] = useState<number>(0);\n  const { popOverVisible, setPopOverVisible } = usePopOver();\n  const timerRef = useRef<number | null>(null);\n  const { palette } = useTheme();\n\n  useEffect(() => {\n    if (popOverVisible) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n\n      timerRef.current = setTimeout(() => {\n        setIsContentVisible(true);\n      }, 200);\n    }\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, [popOverVisible]);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent): void => {\n    setContentWidth(event.nativeEvent.layout.width || 0);\n    setContentHeight(event.nativeEvent.layout.height || 0);\n  }, []);\n\n  // 화면 경계를 벗어나는지 확인하고 위치 조정\n  const getAdjustedPosition = () => {\n    let adjustedX = px;\n    let adjustedY = py;\n\n    // 수평 방향 조정\n    if (px + contentWidth > WINDOW_WIDTH) {\n      adjustedX = WINDOW_WIDTH - contentWidth - 10; // 10px 여백\n    }\n    if (adjustedX < 0) {\n      adjustedX = 10; // 최소 10px 여백\n    }\n\n    // 수직 방향 조정\n    if (py + contentHeight > WINDOW_HEIGHT) {\n      adjustedY = py - contentHeight; // 위쪽으로 표시\n    }\n    if (adjustedY < 0) {\n      adjustedY = 10; // 최소 10px 여백\n    }\n\n    return { adjustedX, adjustedY };\n  };\n\n  if (!popOverVisible) return null;\n\n  const { adjustedX, adjustedY } = getAdjustedPosition();\n\n  return (\n    <ModalBackground\n      modalBgColor={palette.modalBgColor}\n      isCenter={false}\n      onPress={() => setPopOverVisible(false)}\n    >\n      {isContentVisible && (\n        <Animated.View\n          entering={FadeInUp}\n          exiting={FadeOutUp}\n        >\n          <Pressable\n            style={{\n              position: 'absolute',\n              left: adjustedX,\n              top: adjustedY,\n            }}\n            onLayout={handleLayout}\n          >\n            {component}\n          </Pressable>\n        </Animated.View>\n      )}\n    </ModalBackground>\n  );\n}\n\nexport default PopOverMenu;"]}
+{"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Dimensions, LayoutChangeEvent, Pressable } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { usePopOver } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { PopOverMenuProps } from \"../../model/types\";\nimport { useTheme } from \"../../model\";\n\nconst WINDOW_HEIGHT = Dimensions.get('window').height;\nconst WINDOW_WIDTH = Dimensions.get('window').width;\n\nfunction PopOverMenu({\n  px,\n  py,\n  component\n}: PopOverMenuProps): JSX.Element | null {\n  const [isContentVisible, setIsContentVisible] = useState<boolean>(false);\n  const [contentWidth, setContentWidth] = useState<number>(0);\n  const [contentHeight, setContentHeight] = useState<number>(0);\n  const { popOverVisible, setPopOverVisible } = usePopOver();\n  const timerRef = useRef<number | null>(null);\n  const { palette } = useTheme();\n\n  useEffect(() => {\n    if (popOverVisible) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n\n      timerRef.current = setTimeout(() => {\n        setIsContentVisible(true);\n      }, 200);\n    }\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, [popOverVisible]);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent): void => {\n    setContentWidth(event.nativeEvent.layout.width || 0);\n    setContentHeight(event.nativeEvent.layout.height || 0);\n  }, []);\n\n  // 화면 경계를 벗어나는지 확인하고 위치 조정\n  const getAdjustedPosition = () => {\n    let adjustedX = px;\n    let adjustedY = py;\n\n    // 수평 방향 조정\n    if (px + contentWidth > WINDOW_WIDTH) {\n      adjustedX = WINDOW_WIDTH - contentWidth - 10; // 10px 여백\n    }\n    if (adjustedX < 0) {\n      adjustedX = 10; // 최소 10px 여백\n    }\n\n    // 수직 방향 조정\n    if (py + contentHeight > WINDOW_HEIGHT) {\n      adjustedY = py - contentHeight; // 위쪽으로 표시\n    }\n    if (adjustedY < 0) {\n      adjustedY = 10; // 최소 10px 여백\n    }\n\n    return { adjustedX, adjustedY };\n  };\n\n  if (!popOverVisible) return null;\n\n  const { adjustedX, adjustedY } = getAdjustedPosition();\n\n  return (\n    <ModalBackground\n      key={popOverVisible ? 'visiblepo' : 'hiddenpo'}\n      modalBgColor={palette.modalBgColor}\n      isCenter={false}\n      onPress={() => setPopOverVisible(false)}\n    >\n      {isContentVisible && (\n        <Animated.View\n          entering={FadeInUp}\n          exiting={FadeOutUp}\n        >\n          <Pressable\n            style={{\n              position: 'absolute',\n              left: adjustedX,\n              top: adjustedY,\n            }}\n            onLayout={handleLayout}\n          >\n            {component}\n          </Pressable>\n        </Animated.View>\n      )}\n    </ModalBackground>\n  );\n}\n\nexport default PopOverMenu;"]}

package/build/overlay/SnackbarNotify/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/SnackbarNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxD,QAAA,MAAM,cAAc,uBAEjB;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAA;CAC3D,6BAyBA,CAAC;AAWF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/SnackbarNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxD,QAAA,MAAM,cAAc,GAAI,oBAErB;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAA;CAC3D,6BAwBA,CAAC;AAWF,eAAe,cAAc,CAAC"}

package/build/overlay/SnackbarNotify/index.js

@@ -5,10 +5,10 @@ import SnackbarItem from "./ui/SnackbarItem";
 import { useSnackbar } from "../../model/useOverlay";
 const SnackbarNotify = ({ customSnackbar }) => {
     const { snackItemStack, hideSnackBar } = useSnackbar();
+    const { top } = useSafeAreaInsets();
     // ----------------------------------------------------------------
     if (!snackItemStack)
         return null;
-    const { top } = useSafeAreaInsets();
     return (<View style={[styles.container, { paddingTop: top }]}>
       {snackItemStack.map((snackItem, index) => {
             return (<SnackbarItem key={index} customSnackbar={customSnackbar} snackItem={snackItem} hideSnackBar={hideSnackBar}/>);

package/build/overlay/SnackbarNotify/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/SnackbarNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EAGf,EAAE,EAAE;IACH,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,WAAW,EAAE,CAAC;IAEvD,mEAAmE;IAEnE,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,EAAE,GAAG,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEpC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,CACnD;MAAA,CACE,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACtC,OAAO,CACL,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,EAC3B,CACH,CAAC;QACJ,CAAC,CACH,CACF;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import React, { ReactNode } from \"react\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { StyleSheet, View } from \"react-native\";\nimport { CustomSnackbarProps } from \"../../model/types\";\nimport SnackbarItem from \"./ui/SnackbarItem\";\nimport { useSnackbar } from \"../../model/useOverlay\";\n\nconst SnackbarNotify = ({\n  customSnackbar\n}: {\n  customSnackbar?: (props: CustomSnackbarProps) => ReactNode\n}) => {\n  const { snackItemStack, hideSnackBar } = useSnackbar();\n\n  // ----------------------------------------------------------------\n\n  if (!snackItemStack) return null;\n  \n  const { top } = useSafeAreaInsets();\n\n  return (\n    <View style={[styles.container, { paddingTop: top }]}>\n      {\n        snackItemStack.map((snackItem, index) => {\n          return (\n            <SnackbarItem\n              key={index}\n              customSnackbar={customSnackbar}\n              snackItem={snackItem}\n              hideSnackBar={hideSnackBar}\n            />\n          );\n        })\n      }\n    </View>\n  )\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 9997,\n    width: '100%',\n    alignItems: 'center',\n    position: 'absolute',\n  },\n});\n\nexport default SnackbarNotify;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/SnackbarNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EAGf,EAAE,EAAE;IACH,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,WAAW,EAAE,CAAC;IACvD,MAAM,EAAE,GAAG,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEpC,mEAAmE;IAEnE,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,CACnD;MAAA,CACE,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACtC,OAAO,CACL,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,EAC3B,CACH,CAAC;QACJ,CAAC,CACH,CACF;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import React, { ReactNode } from \"react\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { StyleSheet, View } from \"react-native\";\nimport { CustomSnackbarProps } from \"../../model/types\";\nimport SnackbarItem from \"./ui/SnackbarItem\";\nimport { useSnackbar } from \"../../model/useOverlay\";\n\nconst SnackbarNotify = ({\n  customSnackbar\n}: {\n  customSnackbar?: (props: CustomSnackbarProps) => ReactNode\n}) => {\n  const { snackItemStack, hideSnackBar } = useSnackbar();\n  const { top } = useSafeAreaInsets();\n\n  // ----------------------------------------------------------------\n\n  if (!snackItemStack) return null;\n\n  return (\n    <View style={[styles.container, { paddingTop: top }]}>\n      {\n        snackItemStack.map((snackItem, index) => {\n          return (\n            <SnackbarItem\n              key={index}\n              customSnackbar={customSnackbar}\n              snackItem={snackItem}\n              hideSnackBar={hideSnackBar}\n            />\n          );\n        })\n      }\n    </View>\n  )\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 9997,\n    width: '100%',\n    alignItems: 'center',\n    position: 'absolute',\n  },\n});\n\nexport default SnackbarNotify;\n"]}

package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtE,QAAA,MAAM,QAAQ,iDAIX;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,sBAyCA,CAAC;AA0BF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtE,QAAA,MAAM,QAAQ,GAAI,8CAIf;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,sBAyCA,CAAC;AA0BF,eAAe,QAAQ,CAAC"}

package/build/overlay/ui/ModalBackground.js

@@ -12,7 +12,7 @@ function ModalBackground({ modalBgColor, isCenter = true, children, onPress }) {
 }
 const createStyles = (modalBgColor) => StyleSheet.create({
     modalBg: {
-        zIndex: 9997,
+        zIndex: 7999,
         backgroundColor: modalBgColor,
         ...StyleSheet.absoluteFillObject,
     },

package/build/overlay/ui/ModalBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AASpE,SAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAwB;IACjG,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CACxF,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAE9B;MAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAElC;MAAA,EAAE,SAAS,CAEX;;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,kBAAkB;KACjC;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAG,UAAU,CAAC,kBAAkB;KACjC;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\n\ninterface ModalBackgroundProps {\n  modalBgColor: string;\n  isCenter?: boolean;\n  children: React.ReactNode;\n  onPress?: () => void;\n}\n\nfunction ModalBackground({ modalBgColor, isCenter = true, children, onPress }: ModalBackgroundProps) {\n  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n  return (\n    <Animated.View\n      style={[styles.modalBg, isCenter && { justifyContent: 'center', alignItems: 'center' }]}\n      entering={FadeIn.duration(50)}\n      exiting={FadeOut.duration(50)}\n    >\n      <Pressable\n        style={styles.fullScreen}\n        onPress={onPress ?? (() => { })}\n      >\n      </Pressable>\n\n      {children}\n    </Animated.View>\n  );\n}\n\nconst createStyles = (modalBgColor: string) =>\n  StyleSheet.create({\n    modalBg: {\n      zIndex: 9997,\n      backgroundColor: modalBgColor,\n      ...StyleSheet.absoluteFillObject,\n    },\n    fullScreen: {\n      width: '100%',\n      height: '100%',\n      ...StyleSheet.absoluteFillObject,\n    },\n  });\n\nexport default ModalBackground;\n"]}
+{"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AASpE,SAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAwB;IACjG,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CACxF,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAE9B;MAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAElC;MAAA,EAAE,SAAS,CAEX;;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,kBAAkB;KACjC;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAG,UAAU,CAAC,kBAAkB;KACjC;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\n\ninterface ModalBackgroundProps {\n  modalBgColor: string;\n  isCenter?: boolean;\n  children: React.ReactNode;\n  onPress?: () => void;\n}\n\nfunction ModalBackground({ modalBgColor, isCenter = true, children, onPress }: ModalBackgroundProps) {\n  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n  return (\n    <Animated.View\n      style={[styles.modalBg, isCenter && { justifyContent: 'center', alignItems: 'center' }]}\n      entering={FadeIn.duration(50)}\n      exiting={FadeOut.duration(50)}\n    >\n      <Pressable\n        style={styles.fullScreen}\n        onPress={onPress ?? (() => { })}\n      >\n      </Pressable>\n\n      {children}\n    </Animated.View>\n  );\n}\n\nconst createStyles = (modalBgColor: string) =>\n  StyleSheet.create({\n    modalBg: {\n      zIndex: 7999,\n      backgroundColor: modalBgColor,\n      ...StyleSheet.absoluteFillObject,\n    },\n    fullScreen: {\n      width: '100%',\n      height: '100%',\n      ...StyleSheet.absoluteFillObject,\n    },\n  });\n\nexport default ModalBackground;\n"]}

package/build/ui/ZSContainer/index.d.ts

@@ -1,21 +1,20 @@
 import React, { ReactNode } from 'react';
 import { ViewProps, ScrollView } from 'react-native';
-type ZSContainerProps = ViewProps & {
+declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
     backgroundColor?: string;
     isLoader?: boolean;
     statusBarColor?: string;
-    barStyle?: 'light-content' | 'dark-content';
-    edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
+    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;
-    behavior?: "padding" | "height" | "position" | undefined;
+    behavior?: "padding" | "height" | "position";
     automaticallyAdjustKeyboardInsets?: boolean;
-};
-declare function ZSContainer({ backgroundColor, isLoader, statusBarColor, barStyle, edges, isScrollView, scrollViewRef, topComponent, bottomComponent, showsVerticalScrollIndicator, loadingComponent, keyboardVerticalOffset, behavior, automaticallyAdjustKeyboardInsets, ...props }: ZSContainerProps): React.JSX.Element;
+    keyboardScrollExtraOffset?: number;
+} & React.RefAttributes<ScrollView>>;
 export default ZSContainer;
 //# sourceMappingURL=index.d.ts.map

package/build/ui/ZSContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAA8E,UAAU,EAAE,MAAM,cAAc,CAAC;AAMjI,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IACzD,iCAAiC,CAAC,EAAE,OAAO,CAAC;CAC7C,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,eAAe,EACf,QAAgB,EAChB,cAAc,EACd,QAAyB,EACzB,KAAyB,EACzB,YAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,4BAAmC,EACnC,gBAAwC,EACxC,sBAAsB,EACtB,QAAQ,EACR,iCAAwC,EACxC,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAkDlB;AAQD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,SAAS,EAA8E,UAAU,EAAqD,MAAM,cAAc,CAAC;AAuBpL,QAAA,MAAM,WAAW;sBAhBG,MAAM;eACb,OAAO;qBACD,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;mBACnC,OAAO;mBACP,SAAS;sBACN,SAAS;mCACI,OAAO;uBACnB,KAAK,CAAC,SAAS;6BACT,MAAM;eACpB,SAAS,GAAG,QAAQ,GAAG,UAAU;wCACR,OAAO;gCACf,MAAM;oCAwHlC,CAAC;AAYH,eAAe,WAAW,CAAC"}

package/build/ui/ZSContainer/index.js

@@ -1,39 +1,79 @@
-import React, { useState, useEffect } from 'react';
-import { KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator } from 'react-native';
+import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
+import { KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, Keyboard } 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';
-function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle = 'dark-content', edges = ['top', 'bottom'], isScrollView = true, scrollViewRef, topComponent, bottomComponent, showsVerticalScrollIndicator = true, loadingComponent = <ActivityIndicator />, keyboardVerticalOffset, behavior, automaticallyAdjustKeyboardInsets = true, ...props }) {
-    const { palette } = useTheme(); // 테마 사용
+const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle = 'dark-content', edges = ['top', 'bottom'], isScrollView = true, topComponent, bottomComponent, showsVerticalScrollIndicator = true, loadingComponent = <ActivityIndicator />, keyboardVerticalOffset, behavior, automaticallyAdjustKeyboardInsets = true, keyboardScrollExtraOffset, ...props }, forwardedRef) {
+    const { palette } = useTheme();
     const [isDelayed, setIsDelayed] = useState(true);
+    const positionRef = useRef(0);
+    const scrollViewRef = useRef(null);
+    const lastTouchY = useRef(0);
+    useImperativeHandle(forwardedRef, () => scrollViewRef.current, []);
     useEffect(() => {
         const timer = setTimeout(() => {
             setIsDelayed(false);
         }, 200);
         return () => clearTimeout(timer);
     }, []);
-    return (<SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1, styles.fullWidth]} edges={edges}>
-
+    useEffect(() => {
+        const keyboardShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => {
+            if (scrollViewRef.current && keyboardScrollExtraOffset) {
+                const screenHeight = Dimensions.get('window').height;
+                const keyboardHeight = e.endCoordinates.height;
+                const safeAreaBottom = 0;
+                const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;
+                const delta = (lastTouchY?.current || 0) + keyboardScrollExtraOffset - availableScreenHeight;
+                scrollViewRef.current.scrollTo({
+                    y: (positionRef.current ?? 0) + delta,
+                    animated: true,
+                });
+            }
+        });
+        return () => {
+            positionRef.current = null;
+            lastTouchY.current = null;
+            keyboardShowSubscription.remove();
+        };
+    }, [keyboardScrollExtraOffset]);
+    const handleScroll = (event) => {
+        if (keyboardScrollExtraOffset)
+            positionRef.current = event.nativeEvent.contentOffset.y;
+    };
+    const handleTouch = (evt) => {
+        if (keyboardScrollExtraOffset)
+            lastTouchY.current = evt.nativeEvent.pageY;
+    };
+    return (<SafeAreaView style={[
+            { backgroundColor: backgroundColor || palette.background.base },
+            styles.flex1,
+            styles.fullWidth,
+        ]} edges={edges}>
       {!isDelayed && (<KeyboardAvoidingView style={[styles.flex1, styles.fullWidth]} behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset}>
           {topComponent && topComponent}
 
-          {isLoader ? (loadingComponent) : isScrollView ? (<ScrollViewAtom ref={scrollViewRef} style={[styles.flex1, styles.fullWidth]} bounces={false} overScrollMode="never" contentContainerStyle={styles.scrollContainerStyle} showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}>
+          {isLoader ? (loadingComponent) : isScrollView ? (<ScrollViewAtom ref={scrollViewRef} style={[styles.flex1, styles.fullWidth]} bounces={false} overScrollMode="never" contentContainerStyle={styles.scrollContainerStyle} showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets} onScroll={handleScroll} onTouchStart={handleTouch}>
               <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>
                 {props.children}
               </ViewAtom>
-            </ScrollViewAtom>) : (<ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>{props.children}</ViewAtom>)}
+            </ScrollViewAtom>) : (<ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>
+              {props.children}
+            </ViewAtom>)}
 
           {!isLoader && bottomComponent && bottomComponent}
         </KeyboardAvoidingView>)}
-
       <StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base}/>
     </SafeAreaView>);
-}
+});
 const styles = StyleSheet.create({
     flex1: { flex: 1 },
     fullWidth: { width: Dimensions.get('window').width },
-    scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: Dimensions.get('window').width },
+    scrollContainerStyle: {
+        flexGrow: 1,
+        alignItems: 'center',
+        width: Dimensions.get('window').width,
+    },
 });
 export default ZSContainer;
 //# sourceMappingURL=index.js.map

package/build/ui/ZSContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState, useEffect } from 'react';\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, ScrollView } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\nimport { useTheme } from '../../model/useThemeProvider';\n\ntype ZSContainerProps = ViewProps & {\n  backgroundColor?: string;\n  isLoader?: boolean;\n  statusBarColor?: string;\n  barStyle?: 'light-content' | 'dark-content';\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n  isScrollView?: boolean;\n  scrollViewRef?: React.RefObject<ScrollView>;\n  topComponent?: ReactNode;\n  bottomComponent?: ReactNode;\n  showsVerticalScrollIndicator?: boolean;\n  loadingComponent?: React.ReactNode;\n  keyboardVerticalOffset?: number;\n  behavior?: \"padding\" | \"height\" | \"position\" | undefined;\n  automaticallyAdjustKeyboardInsets?: boolean;\n};\n\nfunction ZSContainer({\n  backgroundColor,\n  isLoader = false,\n  statusBarColor,\n  barStyle = 'dark-content',\n  edges = ['top', 'bottom'],\n  isScrollView = true,\n  scrollViewRef,\n  topComponent,\n  bottomComponent,\n  showsVerticalScrollIndicator = true,\n  loadingComponent = <ActivityIndicator />,\n  keyboardVerticalOffset,\n  behavior,\n  automaticallyAdjustKeyboardInsets = true,\n  ...props\n}: ZSContainerProps) {\n  const { palette } = useTheme(); // 테마 사용\n  const [isDelayed, setIsDelayed] = useState(true);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsDelayed(false);\n    }, 200);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1, styles.fullWidth]} edges={edges}>\n\n      {!isDelayed && (\n        <KeyboardAvoidingView\n          style={[styles.flex1, styles.fullWidth]}\n          behavior={behavior}\n          keyboardVerticalOffset={keyboardVerticalOffset}\n        >\n          {topComponent && topComponent}\n\n          {isLoader ? (\n            loadingComponent\n          ) : isScrollView ? (\n            <ScrollViewAtom\n              ref={scrollViewRef}\n              style={[styles.flex1, styles.fullWidth]}\n              bounces={false}\n              overScrollMode=\"never\"\n              contentContainerStyle={styles.scrollContainerStyle}\n              showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n              keyboardShouldPersistTaps=\"handled\"\n              automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\n            >\n              <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>\n                {props.children}\n              </ViewAtom>\n            </ScrollViewAtom>\n          ) : (\n            <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>{props.children}</ViewAtom>\n          )}\n\n          {!isLoader && bottomComponent && bottomComponent}\n        </KeyboardAvoidingView>\n      )}\n\n      <StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} />\n    </SafeAreaView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  flex1: { flex: 1 },\n  fullWidth: { width: Dimensions.get('window').width },\n  scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: Dimensions.get('window').width },\n});\n\nexport default ZSContainer;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\nimport { useTheme } from '../../model/useThemeProvider';\n\ntype ZSContainerProps = ViewProps & {\n  backgroundColor?: string;\n  isLoader?: boolean;\n  statusBarColor?: string;\n  barStyle?: 'light-content' | 'dark-content';\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n  isScrollView?: boolean;\n  topComponent?: ReactNode;\n  bottomComponent?: ReactNode;\n  showsVerticalScrollIndicator?: boolean;\n  loadingComponent?: React.ReactNode;\n  keyboardVerticalOffset?: number;\n  behavior?: 'padding' | 'height' | 'position';\n  automaticallyAdjustKeyboardInsets?: boolean;\n  keyboardScrollExtraOffset?: number;\n};\n\nconst ZSContainer = forwardRef<ScrollView, ZSContainerProps>(function ZSContainer(\n  {\n    backgroundColor,\n    isLoader = false,\n    statusBarColor,\n    barStyle = 'dark-content',\n    edges = ['top', 'bottom'],\n    isScrollView = true,\n    topComponent,\n    bottomComponent,\n    showsVerticalScrollIndicator = true,\n    loadingComponent = <ActivityIndicator />,\n    keyboardVerticalOffset,\n    behavior,\n    automaticallyAdjustKeyboardInsets = true,\n    keyboardScrollExtraOffset,\n    ...props\n  },\n  forwardedRef\n) {\n  const { palette } = useTheme();\n  const [isDelayed, setIsDelayed] = useState(true);\n  const positionRef = useRef<number | null>(0);\n  const scrollViewRef = useRef<ScrollView>(null);\n  const lastTouchY = useRef<number | null>(0);\n\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsDelayed(false);\n    }, 200);\n    return () => clearTimeout(timer);\n  }, []);\n\n  useEffect(() => {\n    const keyboardShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => {\n      if (scrollViewRef.current && keyboardScrollExtraOffset) {\n        const screenHeight = Dimensions.get('window').height;\n        const keyboardHeight = e.endCoordinates.height;\n        const safeAreaBottom = 0;\n        const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\n        const delta = (lastTouchY?.current || 0) + keyboardScrollExtraOffset - availableScreenHeight;\n\n        scrollViewRef.current.scrollTo({\n          y: (positionRef.current ?? 0) + delta,\n          animated: true,\n        });\n      }\n    });\n\n    return () => {\n      positionRef.current = null;\n      lastTouchY.current = null;\n      keyboardShowSubscription.remove();\n    };\n  }, [keyboardScrollExtraOffset]);\n\n  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n    if (keyboardScrollExtraOffset) positionRef.current = event.nativeEvent.contentOffset.y;\n  };\n\n  const handleTouch = (evt: any) => {\n    if (keyboardScrollExtraOffset) lastTouchY.current = evt.nativeEvent.pageY;\n  };\n\n  return (\n    <SafeAreaView\n      style={[\n        { backgroundColor: backgroundColor || palette.background.base },\n        styles.flex1,\n        styles.fullWidth,\n      ]}\n      edges={edges}\n    >\n      {!isDelayed && (\n        <KeyboardAvoidingView\n          style={[styles.flex1, styles.fullWidth]}\n          behavior={behavior}\n          keyboardVerticalOffset={keyboardVerticalOffset}\n        >\n          {topComponent && topComponent}\n\n          {isLoader ? (\n            loadingComponent\n          ) : isScrollView ? (\n            <ScrollViewAtom\n              ref={scrollViewRef}\n              style={[styles.flex1, styles.fullWidth]}\n              bounces={false}\n              overScrollMode=\"never\"\n              contentContainerStyle={styles.scrollContainerStyle}\n              showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n              keyboardShouldPersistTaps=\"handled\"\n              automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\n              onScroll={handleScroll}\n              onTouchStart={handleTouch}\n            >\n              <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>\n                {props.children}\n              </ViewAtom>\n            </ScrollViewAtom>\n          ) : (\n            <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>\n              {props.children}\n            </ViewAtom>\n          )}\n\n          {!isLoader && bottomComponent && bottomComponent}\n        </KeyboardAvoidingView>\n      )}\n      <StatusBar\n        barStyle={barStyle}\n        backgroundColor={statusBarColor || palette.background.base}\n      />\n    </SafeAreaView>\n  );\n});\n\nconst styles = StyleSheet.create({\n  flex1: { flex: 1 },\n  fullWidth: { width: Dimensions.get('window').width },\n  scrollContainerStyle: {\n    flexGrow: 1,\n    alignItems: 'center',\n    width: Dimensions.get('window').width,\n  },\n});\n\nexport default ZSContainer;\n"]}

package/build/ui/ZSTextField/ui/ButtonClose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonClose.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,gCAGd;IACC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,gCAQA,CAAA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ButtonClose.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,GAAI,6BAGlB;IACC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,gCAQA,CAAA;AAED,eAAe,WAAW,CAAC"}

package/build/ui/ZSTextField/ui/ErrorComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorComponent.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ErrorComponent.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,kCAGjB;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,gCAaA,CAAA;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ErrorComponent.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ErrorComponent.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,GAAI,+BAGrB;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,gCAaA,CAAA;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0610studio/zs-ui",
-  "version": "0.0.64",
+  "version": "0.1.0",
   "private": false,
   "description": "EXPO ZS-UI",
   "type": "module",
@@ -39,12 +39,12 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@types/react": "^18.0.25",
     "expo-module-scripts": "^3.5.2",
-    "expo-modules-core": "~2.1.2",
+    "expo-modules-core": "~2.3.5",
     "react": "18.3.1",
-    "react-native": ">=0.63.0",
-    "react-native-reanimated": "^3.16.0",
+    "react-native": ">=0.76.9",
+    "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": "4.12.0",
-    "expo-navigation-bar": "~4.0.7",
+    "expo-navigation-bar": ">=4.0.7",
     "react-native-svg": "15.8.0"
   },
   "peerDependencies": {