@0610studio/zs-ui 0.7.1 → 0.7.3

package/build/ui/ZSContainer/index.js

@@ -1,75 +1,113 @@
-import React, { useEffect, useImperativeHandle, forwardRef, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { StatusBar, StyleSheet, ScrollView, Keyboard, View, Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../../model/useThemeProvider';
-const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, statusBarColor, barStyle, edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent, showsVerticalScrollIndicator = true, keyboardScrollExtraOffset = 30, translucent, scrollEventThrottle = 16, ...props }, forwardedRef) {
+const IS_IOS = Platform.OS === 'ios';
+const KEYBOARD_ANIMATION_DELAY = 50;
+const keyboardEvents = {
+    showEvent: IS_IOS ? 'keyboardWillShow' : 'keyboardDidShow',
+    hideEvent: IS_IOS ? 'keyboardWillHide' : 'keyboardDidHide',
+};
+const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, statusBarColor, barStyle, edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent, showsVerticalScrollIndicator = true, keyboardScrollExtraOffset = 30, translucent, scrollEventThrottle = 16, scrollToFocusedInput = true, ...props }, forwardedRef) {
     const { palette, dimensions: { height: windowHeight } } = useTheme();
     const positionRef = useRef(0);
     const scrollViewRef = useRef(null);
     const lastTouchY = useRef(0);
     const [keyboardHeight, setKeyboardHeight] = useState(0);
     useImperativeHandle(forwardedRef, () => scrollViewRef.current, []);
+    const handleKeyboardShow = useCallback((e) => {
+        setKeyboardHeight(e.endCoordinates.height);
+        if (scrollViewRef.current && scrollToFocusedInput) {
+            const keyboardHeight = e.endCoordinates.height;
+            const safeAreaBottom = 0;
+            const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;
+            const currentScrollPosition = positionRef.current || 0;
+            const touchPosition = lastTouchY.current || 0;
+            // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
+            const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;
+            setTimeout(() => {
+                scrollViewRef.current?.scrollTo({
+                    y: currentScrollPosition + scrollOffset,
+                    animated: true,
+                });
+            }, KEYBOARD_ANIMATION_DELAY);
+        }
+    }, [windowHeight, keyboardScrollExtraOffset, scrollToFocusedInput]);
+    // 키보드 숨김 핸들러를 메모이제이션하여 성능 최적화
+    const handleKeyboardHide = useCallback(() => {
+        setKeyboardHeight(0);
+    }, []);
     useEffect(() => {
-        const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-        const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-        const keyboardShowSubscription = Keyboard.addListener(showEvent, (e) => {
-            setKeyboardHeight(e.endCoordinates.height);
-            if (scrollViewRef.current) {
-                const screenHeight = windowHeight;
-                const keyboardHeight = e.endCoordinates.height;
-                const safeAreaBottom = 0;
-                const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;
-                const currentScrollPosition = positionRef.current || 0;
-                const touchPosition = lastTouchY.current || 0;
-                // touchPosition이 키보드 높이보다 아래인 경우
-                // const isTouchPositionBelowKeyboard = touchPosition > availableScreenHeight;
-                // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
-                const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;
-                setTimeout(() => {
-                    scrollViewRef.current?.scrollTo({
-                        y: currentScrollPosition + scrollOffset,
-                        animated: true,
-                    });
-                }, 100);
-            }
-        });
-        const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
-            setKeyboardHeight(0);
-        });
+        const keyboardShowSubscription = Keyboard.addListener(keyboardEvents.showEvent, handleKeyboardShow);
+        const keyboardHideSubscription = Keyboard.addListener(keyboardEvents.hideEvent, handleKeyboardHide);
         return () => {
             positionRef.current = null;
             lastTouchY.current = null;
             keyboardShowSubscription.remove();
             keyboardHideSubscription.remove();
         };
-    }, [keyboardScrollExtraOffset]);
-    const handleScroll = (event) => {
+    }, [keyboardEvents.showEvent, keyboardEvents.hideEvent, handleKeyboardShow, handleKeyboardHide]);
+    const handleScroll = useCallback((event) => {
         if (props.onScroll)
             props.onScroll(event);
         positionRef.current = event.nativeEvent.contentOffset.y;
-    };
-    const handleTouch = (evt) => {
+    }, [props.onScroll]);
+    const handleTouch = useCallback((evt) => {
         lastTouchY.current = evt.nativeEvent.pageY;
-    };
-    return (<SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]} edges={edges}>
+    }, []);
+    const safeAreaStyle = useMemo(() => [
+        { backgroundColor: backgroundColor || palette.background.base },
+        styles.flex1
+    ], [backgroundColor, palette.background.base]);
+    const scrollContentStyle = useMemo(() => [
+        styles.scrollContainerStyle,
+        {
+            paddingBottom: keyboardHeight ? (IS_IOS ? keyboardHeight : keyboardScrollExtraOffset) : 0
+        }
+    ], [keyboardHeight, keyboardScrollExtraOffset]);
+    const containerStyle = useMemo(() => [
+        styles.flex1,
+        props.style
+    ], [props.style]);
+    const shouldShowStatusBar = useMemo(() => Boolean(barStyle || statusBarColor || translucent), [barStyle, statusBarColor, translucent]);
+    return (<SafeAreaView style={safeAreaStyle} edges={edges}>
       <View style={styles.flex1}>
-        {topComponent && topComponent}
+        {topComponent}
         {scrollViewDisabled ? (<View style={styles.flex1}>
               {props.children}
-            </View>) : (<ScrollView ref={scrollViewRef} style={styles.flex1} contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: Platform.OS === 'ios' ? keyboardHeight || 0 : 0 }]} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={false} onScroll={handleScroll} onTouchStart={handleTouch} scrollEventThrottle={scrollEventThrottle}>
-              <View style={[styles.flex1, props.style]}>
+            </View>) : (<ScrollView ref={scrollViewRef} style={styles.flex1} contentContainerStyle={scrollContentStyle} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={false} onScroll={handleScroll} onTouchStart={handleTouch} scrollEventThrottle={scrollEventThrottle}>
+              <View style={containerStyle}>
                 {props.children}
               </View>
             </ScrollView>)}
-        {bottomComponent && bottomComponent}
+        {bottomComponent}
       </View>
 
-      {(barStyle || statusBarColor || translucent) && (<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} translucent={translucent}/>)}
+      {shouldShowStatusBar && (<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} translucent={translucent}/>)}
     </SafeAreaView>);
 });
 export const styles = StyleSheet.create({
     flex1: { flex: 1, width: '100%' },
     scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: '100%' },
 });
-export default ZSContainer;
+const arePropsEqual = (prevProps, nextProps) => {
+    return (prevProps.backgroundColor === nextProps.backgroundColor &&
+        prevProps.statusBarColor === nextProps.statusBarColor &&
+        prevProps.barStyle === nextProps.barStyle &&
+        prevProps.scrollViewDisabled === nextProps.scrollViewDisabled &&
+        prevProps.showsVerticalScrollIndicator === nextProps.showsVerticalScrollIndicator &&
+        prevProps.keyboardScrollExtraOffset === nextProps.keyboardScrollExtraOffset &&
+        prevProps.translucent === nextProps.translucent &&
+        prevProps.scrollEventThrottle === nextProps.scrollEventThrottle &&
+        prevProps.scrollToFocusedInput === nextProps.scrollToFocusedInput &&
+        prevProps.onScroll === nextProps.onScroll &&
+        prevProps.style === nextProps.style &&
+        prevProps.children === nextProps.children &&
+        prevProps.topComponent === nextProps.topComponent &&
+        prevProps.bottomComponent === nextProps.bottomComponent &&
+        prevProps.rightComponent === nextProps.rightComponent &&
+        // edges 배열 비교
+        JSON.stringify(prevProps.edges) === JSON.stringify(nextProps.edges));
+};
+export default React.memo(ZSContainer, arePropsEqual);
 //# 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, useEffect, useImperativeHandle, forwardRef, useRef, useState } from 'react';\r\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, View, Platform } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n  backgroundColor?: string;\r\n  statusBarColor?: string;\r\n  barStyle?: 'light-content' | 'dark-content';\r\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\r\n  scrollViewDisabled?: boolean;\r\n  topComponent?: ReactNode;\r\n  bottomComponent?: ReactNode;\r\n  rightComponent?: ReactNode;\r\n  showsVerticalScrollIndicator?: boolean;\r\n  keyboardScrollExtraOffset?: number;\r\n  translucent?: boolean;\r\n  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\r\n  scrollEventThrottle?: number;\r\n};\r\n\r\nexport type ZSContainerRef = ScrollView;\r\n\r\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\r\n  {\r\n    backgroundColor,\r\n    statusBarColor,\r\n    barStyle,\r\n    edges = ['top', 'bottom'],\r\n    scrollViewDisabled = false,\r\n    topComponent,\r\n    bottomComponent,\r\n    rightComponent,\r\n    showsVerticalScrollIndicator = true,\r\n    keyboardScrollExtraOffset = 30,\r\n    translucent,\r\n    scrollEventThrottle = 16,\r\n    ...props\r\n  },\r\n  forwardedRef\r\n) {\r\n  const { palette, dimensions: { height: windowHeight } } = useTheme();\r\n  const positionRef = useRef<number | null>(0);\r\n  const scrollViewRef = useRef<ScrollView>(null);\r\n  const lastTouchY = useRef<number | null>(0);\r\n  const [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\r\n\r\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\r\n\r\n  useEffect(() => {\r\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\r\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\r\n\r\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (e) => {\r\n      setKeyboardHeight(e.endCoordinates.height);\r\n      if (scrollViewRef.current) {\r\n        const screenHeight = windowHeight;\r\n        const keyboardHeight = e.endCoordinates.height;\r\n        const safeAreaBottom = 0;\r\n        const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\r\n        const currentScrollPosition = positionRef.current || 0;\r\n        const touchPosition = lastTouchY.current || 0;\r\n\r\n        // touchPosition이 키보드 높이보다 아래인 경우\r\n        // const isTouchPositionBelowKeyboard = touchPosition > availableScreenHeight;\r\n\r\n        // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\r\n        const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n\r\n        setTimeout(() => {\r\n          scrollViewRef.current?.scrollTo({\r\n            y: currentScrollPosition + scrollOffset,\r\n            animated: true,\r\n          });\r\n        }, 100);\r\n      }\r\n    });\r\n\r\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\r\n      setKeyboardHeight(0);\r\n    });\r\n\r\n    return () => {\r\n      positionRef.current = null;\r\n      lastTouchY.current = null;\r\n      keyboardShowSubscription.remove();\r\n      keyboardHideSubscription.remove();\r\n    };\r\n  }, [keyboardScrollExtraOffset]);\r\n\r\n  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n    if (props.onScroll) props.onScroll(event);\r\n    positionRef.current = event.nativeEvent.contentOffset.y;\r\n  };\r\n\r\n  const handleTouch = (evt: any) => {\r\n    lastTouchY.current = evt.nativeEvent.pageY;\r\n  };\r\n\r\n  return (\r\n    <SafeAreaView\r\n      style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]}\r\n      edges={edges}\r\n    >\r\n      <View style={styles.flex1}>\r\n        {topComponent && topComponent}\r\n        {\r\n          scrollViewDisabled ? (\r\n            <View style={styles.flex1}>\r\n              {props.children}\r\n            </View>\r\n          ) : (\r\n            <ScrollView\r\n              ref={scrollViewRef}\r\n              style={styles.flex1}\r\n              contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: Platform.OS === 'ios' ? keyboardHeight || 0 : 0 }]}\r\n              bounces={false}\r\n              overScrollMode=\"never\"\r\n              showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n              keyboardShouldPersistTaps=\"handled\"\r\n              automaticallyAdjustKeyboardInsets={false}\r\n              onScroll={handleScroll}\r\n              onTouchStart={handleTouch}\r\n              scrollEventThrottle={scrollEventThrottle}\r\n            >\r\n              <View style={[styles.flex1, props.style]}>\r\n                {props.children}\r\n              </View>\r\n            </ScrollView>\r\n          )\r\n        }\r\n        {bottomComponent && bottomComponent}\r\n      </View>\r\n\r\n      {\r\n        (barStyle || statusBarColor || translucent) && (\r\n          <StatusBar\r\n            barStyle={barStyle}\r\n            backgroundColor={statusBarColor || palette.background.base}\r\n            translucent={translucent}\r\n          />\r\n        )\r\n      }\r\n    </SafeAreaView>\r\n  );\r\n});\r\n\r\nexport const styles = StyleSheet.create({\r\n  flex1: { flex: 1, width: '100%' },\r\n  scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: '100%' },\r\n});\r\n\r\nexport default ZSContainer;\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';\r\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, View, Platform } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\n\r\nconst IS_IOS = Platform.OS === 'ios';\r\nconst KEYBOARD_ANIMATION_DELAY = 50;\r\nconst keyboardEvents = {\r\n  showEvent: IS_IOS ? 'keyboardWillShow' as const : 'keyboardDidShow' as const,\r\n  hideEvent: IS_IOS ? 'keyboardWillHide' as const : 'keyboardDidHide' as const,\r\n};\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n  backgroundColor?: string;\r\n  statusBarColor?: string;\r\n  barStyle?: 'light-content' | 'dark-content';\r\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\r\n  scrollViewDisabled?: boolean;\r\n  topComponent?: ReactNode;\r\n  bottomComponent?: ReactNode;\r\n  rightComponent?: ReactNode;\r\n  showsVerticalScrollIndicator?: boolean;\r\n  keyboardScrollExtraOffset?: number;\r\n  translucent?: boolean;\r\n  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\r\n  scrollEventThrottle?: number;\r\n  scrollToFocusedInput?: boolean;\r\n};\r\n\r\nexport type ZSContainerRef = ScrollView;\r\n\r\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\r\n  {\r\n    backgroundColor,\r\n    statusBarColor,\r\n    barStyle,\r\n    edges = ['top', 'bottom'],\r\n    scrollViewDisabled = false,\r\n    topComponent,\r\n    bottomComponent,\r\n    rightComponent,\r\n    showsVerticalScrollIndicator = true,\r\n    keyboardScrollExtraOffset = 30,\r\n    translucent,\r\n    scrollEventThrottle = 16,\r\n    scrollToFocusedInput = true,\r\n    ...props\r\n  },\r\n  forwardedRef\r\n) {\r\n  const { palette, dimensions: { height: windowHeight } } = useTheme();\r\n  const positionRef = useRef<number | null>(0);\r\n  const scrollViewRef = useRef<ScrollView>(null);\r\n  const lastTouchY = useRef<number | null>(0);\r\n  const [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\r\n\r\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\r\n\r\n  const handleKeyboardShow = useCallback((e: any) => {\r\n    setKeyboardHeight(e.endCoordinates.height);\r\n    \r\n    if (scrollViewRef.current && scrollToFocusedInput) {\r\n      const keyboardHeight = e.endCoordinates.height;\r\n      const safeAreaBottom = 0;\r\n      const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;\r\n      const currentScrollPosition = positionRef.current || 0;\r\n      const touchPosition = lastTouchY.current || 0;\r\n\r\n      // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\r\n      const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n\r\n      setTimeout(() => {\r\n        scrollViewRef.current?.scrollTo({\r\n          y: currentScrollPosition + scrollOffset,\r\n          animated: true,\r\n        });\r\n      }, KEYBOARD_ANIMATION_DELAY);\r\n    }\r\n  }, [windowHeight, keyboardScrollExtraOffset, scrollToFocusedInput]);\r\n\r\n  // 키보드 숨김 핸들러를 메모이제이션하여 성능 최적화\r\n  const handleKeyboardHide = useCallback(() => {\r\n    setKeyboardHeight(0);\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    const keyboardShowSubscription = Keyboard.addListener(keyboardEvents.showEvent, handleKeyboardShow);\r\n    const keyboardHideSubscription = Keyboard.addListener(keyboardEvents.hideEvent, handleKeyboardHide);\r\n\r\n    return () => {\r\n      positionRef.current = null;\r\n      lastTouchY.current = null;\r\n      keyboardShowSubscription.remove();\r\n      keyboardHideSubscription.remove();\r\n    };\r\n  }, [keyboardEvents.showEvent, keyboardEvents.hideEvent, handleKeyboardShow, handleKeyboardHide]);\r\n\r\n  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n    if (props.onScroll) props.onScroll(event);\r\n    positionRef.current = event.nativeEvent.contentOffset.y;\r\n  }, [props.onScroll]);\r\n\r\n  const handleTouch = useCallback((evt: any) => {\r\n    lastTouchY.current = evt.nativeEvent.pageY;\r\n  }, []);\r\n\r\n  const safeAreaStyle = useMemo(() => [\r\n    { backgroundColor: backgroundColor || palette.background.base }, \r\n    styles.flex1\r\n  ], [backgroundColor, palette.background.base]);\r\n\r\n  const scrollContentStyle = useMemo(() => [\r\n    styles.scrollContainerStyle, \r\n    { \r\n      paddingBottom: keyboardHeight ? (IS_IOS ? keyboardHeight : keyboardScrollExtraOffset) : 0 \r\n    }\r\n  ], [keyboardHeight, keyboardScrollExtraOffset]);\r\n\r\n  const containerStyle = useMemo(() => [\r\n    styles.flex1, \r\n    props.style\r\n  ], [props.style]);\r\n\r\n  const shouldShowStatusBar = useMemo(() => \r\n    Boolean(barStyle || statusBarColor || translucent), \r\n    [barStyle, statusBarColor, translucent]\r\n  );\r\n\r\n  return (\r\n    <SafeAreaView\r\n      style={safeAreaStyle}\r\n      edges={edges}\r\n    >\r\n      <View style={styles.flex1}>\r\n        {topComponent}\r\n        {\r\n          scrollViewDisabled ? (\r\n            <View style={styles.flex1}>\r\n              {props.children}\r\n            </View>\r\n          ) : (\r\n            <ScrollView\r\n              ref={scrollViewRef}\r\n              style={styles.flex1}\r\n              contentContainerStyle={scrollContentStyle}\r\n              bounces={false}\r\n              overScrollMode=\"never\"\r\n              showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n              keyboardShouldPersistTaps=\"handled\"\r\n              automaticallyAdjustKeyboardInsets={false}\r\n              onScroll={handleScroll}\r\n              onTouchStart={handleTouch}\r\n              scrollEventThrottle={scrollEventThrottle}\r\n            >\r\n              <View style={containerStyle}>\r\n                {props.children}\r\n              </View>\r\n            </ScrollView>\r\n          )\r\n        }\r\n        {bottomComponent}\r\n      </View>\r\n\r\n      {shouldShowStatusBar && (\r\n        <StatusBar\r\n          barStyle={barStyle}\r\n          backgroundColor={statusBarColor || palette.background.base}\r\n          translucent={translucent}\r\n        />\r\n      )}\r\n    </SafeAreaView>\r\n  );\r\n});\r\n\r\nexport const styles = StyleSheet.create({\r\n  flex1: { flex: 1, width: '100%' },\r\n  scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: '100%' },\r\n});\r\n\r\nconst arePropsEqual = (\r\n  prevProps: ZSContainerProps, \r\n  nextProps: ZSContainerProps\r\n): boolean => {\r\n  return (\r\n    prevProps.backgroundColor === nextProps.backgroundColor &&\r\n    prevProps.statusBarColor === nextProps.statusBarColor &&\r\n    prevProps.barStyle === nextProps.barStyle &&\r\n    prevProps.scrollViewDisabled === nextProps.scrollViewDisabled &&\r\n    prevProps.showsVerticalScrollIndicator === nextProps.showsVerticalScrollIndicator &&\r\n    prevProps.keyboardScrollExtraOffset === nextProps.keyboardScrollExtraOffset &&\r\n    prevProps.translucent === nextProps.translucent &&\r\n    prevProps.scrollEventThrottle === nextProps.scrollEventThrottle &&\r\n    prevProps.scrollToFocusedInput === nextProps.scrollToFocusedInput &&\r\n    prevProps.onScroll === nextProps.onScroll &&\r\n    prevProps.style === nextProps.style &&\r\n    prevProps.children === nextProps.children &&\r\n    prevProps.topComponent === nextProps.topComponent &&\r\n    prevProps.bottomComponent === nextProps.bottomComponent &&\r\n    prevProps.rightComponent === nextProps.rightComponent &&\r\n    // edges 배열 비교\r\n    JSON.stringify(prevProps.edges) === JSON.stringify(nextProps.edges)\r\n  );\r\n};\r\n\r\nexport default React.memo(ZSContainer, arePropsEqual);\r\n"]}

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

@@ -13,5 +13,6 @@ interface ZSPressableProps extends ViewProps {
     color?: ViewColorOptions;
 }
 declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius, elevationLevel, fullWidth, color, ...props }: ZSPressableProps): React.JSX.Element;
-export default ZSPressable;
+declare const _default: React.MemoExoticComponent<typeof ZSPressable>;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAgDlB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAkElB;;AAoBD,wBAAsD"}

package/build/ui/ZSPressable/index.js

@@ -1,27 +1,39 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { Pressable, View } from "react-native";
-import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from "react-native-reanimated";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import AnimatedWrapper from "../atoms/AnimatedWrapper";
 const DEFAULT_DURATION = { duration: 100 };
+const SCALE_VALUES = [1, 0.96];
 function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, ...props }) {
-    const isButtonPress = useSharedValue(0);
+    const isButtonPress = useRef(useSharedValue(0)).current;
     const boxAnimation = useAnimatedStyle(() => {
-        const scale = interpolate(isButtonPress.value, [0, 1], [1, 0.96], 'clamp');
+        const scale = interpolate(isButtonPress.value, [0, 1], SCALE_VALUES, 'clamp');
         return {
-            transform: [{ scale: withTiming(scale, DEFAULT_DURATION) }],
+            transform: [{ scale }],
         };
     }, []);
+    const handlePressIn = useCallback(() => {
+        isButtonPress.value = withTiming(1, DEFAULT_DURATION);
+    }, [isButtonPress]);
+    const handlePressOut = useCallback(() => {
+        isButtonPress.value = withTiming(0, DEFAULT_DURATION);
+    }, [isButtonPress]);
+    const pressedStyle = useMemo(() => ({
+        backgroundColor: pressedBackgroundColor,
+        borderRadius: pressedBackgroundBorderRadius,
+    }), [pressedBackgroundColor, pressedBackgroundBorderRadius]);
+    const unpressedStyle = useMemo(() => ({
+        backgroundColor: 'transparent',
+        borderRadius: pressedBackgroundBorderRadius,
+    }), [pressedBackgroundBorderRadius]);
     const handlePressStyle = useCallback((pressed) => {
-        runOnJS(() => {
-            isButtonPress.value = pressed ? 1 : 0;
-        })();
-        return {
-            backgroundColor: pressed ? pressedBackgroundColor : 'transparent',
-            borderRadius: pressedBackgroundBorderRadius,
-        };
-    }, [pressedBackgroundColor, pressedBackgroundBorderRadius, fullWidth]);
-    return (<View style={{ width: fullWidth ? '100%' : undefined }}>
-      <Pressable onPress={onPress} onLongPress={onLongPress} style={({ pressed }) => handlePressStyle(pressed)}>
+        return pressed ? pressedStyle : unpressedStyle;
+    }, [pressedStyle, unpressedStyle]);
+    const containerStyle = useMemo(() => ({
+        width: fullWidth ? '100%' : undefined
+    }), [fullWidth]);
+    return (<View style={containerStyle}>
+      <Pressable onPress={onPress} onLongPress={onLongPress} onPressIn={handlePressIn} onPressOut={handlePressOut} style={({ pressed }) => handlePressStyle(pressed)}>
         <Animated.View style={boxAnimation}>
           <AnimatedWrapper color={color} isAnimation={isAnimation} elevationLevel={elevationLevel} style={props.style}>
             {props.children}
@@ -30,5 +42,17 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
       </Pressable>
     </View>);
 }
-export default ZSPressable;
+const arePropsEqual = (prevProps, nextProps) => {
+    return (prevProps.onPress === nextProps.onPress &&
+        prevProps.onLongPress === nextProps.onLongPress &&
+        prevProps.isAnimation === nextProps.isAnimation &&
+        prevProps.pressedBackgroundColor === nextProps.pressedBackgroundColor &&
+        prevProps.pressedBackgroundBorderRadius === nextProps.pressedBackgroundBorderRadius &&
+        prevProps.elevationLevel === nextProps.elevationLevel &&
+        prevProps.fullWidth === nextProps.fullWidth &&
+        prevProps.color === nextProps.color &&
+        prevProps.style === nextProps.style &&
+        prevProps.children === nextProps.children);
+};
+export default React.memo(ZSPressable, arePropsEqual);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAC1D,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvH,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAIvD,MAAM,gBAAgB,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;AAa3C,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,sBAAsB,GAAG,0BAA0B,EACnD,6BAA6B,GAAG,EAAE,EAClC,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,GAAG,KAAK,EACS;IACjB,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAExC,MAAM,YAAY,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACzC,MAAM,KAAK,GAAG,WAAW,CACvB,aAAa,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAE,IAAI,CAAC,EACT,OAAO,CACR,CAAC;QACF,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC;SAC5D,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,CAAC,GAAG,EAAE;YACX,aAAa,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC,CAAC,EAAE,CAAC;QACL,OAAO;YACL,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa;YACjE,YAAY,EAAE,6BAA6B;SAC5C,CAAC;IACJ,CAAC,EACD,CAAC,sBAAsB,EAAE,6BAA6B,EAAE,SAAS,CAAC,CACnE,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAe,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAC9D;MAAA,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAElD;QAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACjC;UAAA,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAEnB;YAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;UAAA,EAAE,eAAe,CACnB;QAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC","sourcesContent":["import React, { useCallback } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel } from \"../types\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 };\n\ninterface ZSPressableProps extends ViewProps {\n  onPress?: (value?: any) => void;\n  onLongPress?: (value?: any) => void;\n  pressedBackgroundColor?: string;\n  pressedBackgroundBorderRadius?: number;\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  fullWidth?: boolean;\n  color?: ViewColorOptions;\n}\n\nfunction ZSPressable({\n  onPress,\n  onLongPress,\n  isAnimation = true,\n  pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n  pressedBackgroundBorderRadius = 16,\n  elevationLevel,\n  fullWidth = false,\n  color,\n  ...props\n}: ZSPressableProps) {\n  const isButtonPress = useSharedValue(0);\n\n  const boxAnimation = useAnimatedStyle(() => {\n    const scale = interpolate(\n      isButtonPress.value,\n      [0, 1],\n      [1, 0.96],\n      'clamp'\n    );\n    return {\n      transform: [{ scale: withTiming(scale, DEFAULT_DURATION) }],\n    };\n  }, []);\n\n  const handlePressStyle = useCallback(\n    (pressed: boolean) => {\n      runOnJS(() => {\n        isButtonPress.value = pressed ? 1 : 0;\n      })();\n      return {\n        backgroundColor: pressed ? pressedBackgroundColor : 'transparent',\n        borderRadius: pressedBackgroundBorderRadius,\n      };\n    },\n    [pressedBackgroundColor, pressedBackgroundBorderRadius, fullWidth]\n  );\n\n  return (\n    <View style={{ width: fullWidth ? '100%' as const : undefined }}>\n      <Pressable\n        onPress={onPress}\n        onLongPress={onLongPress}\n        style={({ pressed }) => handlePressStyle(pressed)}\n      >\n        <Animated.View style={boxAnimation}>\n          <AnimatedWrapper\n            color={color}\n            isAnimation={isAnimation}\n            elevationLevel={elevationLevel}\n            style={props.style}\n          >\n            {props.children}\n          </AnimatedWrapper>\n        </Animated.View>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default ZSPressable;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel } from \"../types\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\n\ninterface ZSPressableProps extends ViewProps {\n  onPress?: (value?: any) => void;\n  onLongPress?: (value?: any) => void;\n  pressedBackgroundColor?: string;\n  pressedBackgroundBorderRadius?: number;\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  fullWidth?: boolean;\n  color?: ViewColorOptions;\n}\n\nfunction ZSPressable({\n  onPress,\n  onLongPress,\n  isAnimation = true,\n  pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n  pressedBackgroundBorderRadius = 16,\n  elevationLevel,\n  fullWidth = false,\n  color,\n  ...props\n}: ZSPressableProps) {\n  const isButtonPress = useRef(useSharedValue(0)).current;\n\n  const boxAnimation = useAnimatedStyle(() => {\n    const scale = interpolate(\n      isButtonPress.value,\n      [0, 1],\n      SCALE_VALUES,\n      'clamp'\n    );\n    return {\n      transform: [{ scale }],\n    };\n  }, []);\n  \n  const handlePressIn = useCallback(() => {\n    isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n  }, [isButtonPress]);\n  \n  const handlePressOut = useCallback(() => {\n    isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n  }, [isButtonPress]);\n\n  const pressedStyle = useMemo(() => ({\n    backgroundColor: pressedBackgroundColor,\n    borderRadius: pressedBackgroundBorderRadius,\n  }), [pressedBackgroundColor, pressedBackgroundBorderRadius]);\n  \n  const unpressedStyle = useMemo(() => ({\n    backgroundColor: 'transparent',\n    borderRadius: pressedBackgroundBorderRadius,\n  }), [pressedBackgroundBorderRadius]);\n  \n  const handlePressStyle = useCallback(\n    (pressed: boolean) => {\n      return pressed ? pressedStyle : unpressedStyle;\n    },\n    [pressedStyle, unpressedStyle]\n  );\n\n  const containerStyle = useMemo(() => ({\n    width: fullWidth ? '100%' as const : undefined\n  }), [fullWidth]);\n\n  return (\n    <View style={containerStyle}>\n      <Pressable\n        onPress={onPress}\n        onLongPress={onLongPress}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        style={({ pressed }) => handlePressStyle(pressed)}\n      >\n        <Animated.View style={boxAnimation}>\n          <AnimatedWrapper\n            color={color}\n            isAnimation={isAnimation}\n            elevationLevel={elevationLevel}\n            style={props.style}\n          >\n            {props.children}\n          </AnimatedWrapper>\n        </Animated.View>\n      </Pressable>\n    </View>\n  );\n}\n\nconst arePropsEqual = (\n  prevProps: ZSPressableProps, \n  nextProps: ZSPressableProps\n): boolean => {\n  return (\n    prevProps.onPress === nextProps.onPress &&\n    prevProps.onLongPress === nextProps.onLongPress &&\n    prevProps.isAnimation === nextProps.isAnimation &&\n    prevProps.pressedBackgroundColor === nextProps.pressedBackgroundColor &&\n    prevProps.pressedBackgroundBorderRadius === nextProps.pressedBackgroundBorderRadius &&\n    prevProps.elevationLevel === nextProps.elevationLevel &&\n    prevProps.fullWidth === nextProps.fullWidth &&\n    prevProps.color === nextProps.color &&\n    prevProps.style === nextProps.style &&\n    prevProps.children === nextProps.children\n  );\n};\n\nexport default React.memo(ZSPressable, arePropsEqual);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAqD,cAAc,EAAwB,MAAM,cAAc,CAAC;AAIvH,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAIzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAiB,EACjB,iBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,QAAoB,EACpB,aAAa,EACb,QAAgB,EAChB,gBAAuB,EACvB,UAAkB,GACnB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA6I9B;;AAED,wBAAuC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAqD,cAAc,EAAwB,MAAM,cAAc,CAAC;AAIvH,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAIzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAiB,EACjB,iBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,QAAoB,EACpB,aAAa,EACb,QAAgB,EAChB,gBAAuB,EACvB,UAAkB,GACnB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAoN9B;;AAoBD,wBAAsD"}

package/build/ui/ZSTextField/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { Platform, TextInput } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import ButtonClose from './ui/ButtonClose';
@@ -9,31 +9,43 @@ import ViewAtom from '../atoms/ViewAtom';
 const iosOffset = Platform.OS === 'ios' ? 8 : 4;
 function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText, label = 'Placeholder', labelColor, placeHolderColor, inputBgColor, labelBgColor, borderWidth = 1.2, borderColor, focusColor, errorColor, borderRadius = 14, paddingHorizontal = 15, errorMessage, textInputProps, boxStyle = 'outline', innerBoxStyle, disabled = false, allowFontScaling = true, isTextArea = false, }) {
     const { typography, palette } = useTheme();
-    const [primaryStyle, subStyle] = typo.split('.');
-    let fErrorColor = errorColor || palette.danger.main;
-    // 폰트 크기 및 패밀리 추출
-    const fontSize = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontSize') || 17, [typography, primaryStyle, subStyle]);
-    const fontFamily = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontFamily') || '', [typography, primaryStyle, subStyle]);
-    // 컴포넌트 상태 관리
+    const typoConfig = useMemo(() => {
+        const [primaryStyle, subStyle] = typo.split('.');
+        return { primaryStyle, subStyle };
+    }, [typo]);
+    const fErrorColor = useMemo(() => errorColor || palette.danger.main, [errorColor, palette.danger.main]);
+    const fontSize = useMemo(() => {
+        return extractStyle(typography[typoConfig.primaryStyle][typoConfig.subStyle], 'fontSize') || 17;
+    }, [typography, typoConfig.primaryStyle, typoConfig.subStyle]);
+    const fontFamily = useMemo(() => {
+        return extractStyle(typography[typoConfig.primaryStyle][typoConfig.subStyle], 'fontFamily') || '';
+    }, [typography, typoConfig.primaryStyle, typoConfig.subStyle]);
     const [isFocused, setIsFocused] = useState(false);
-    const labelAnimationValue = useSharedValue(0);
-    const boxHeightValue = useSharedValue(0);
+    const labelAnimationValue = useRef(useSharedValue(0)).current;
+    const boxHeightValue = useRef(useSharedValue(0)).current;
     // 포커스 및 값 변경 시 라벨 애니메이션 트리거
     useEffect(() => {
-        labelAnimationValue.value = withTiming(value !== '' || isFocused ? 1 : 0, { duration: 150 });
-    }, [value, isFocused]);
+        labelAnimationValue.value = withTiming(value !== '' || isFocused ? 1 : 0, { duration: 100 });
+    }, [value, isFocused, labelAnimationValue]);
+    // 애니메이션 관련 상수
+    const animationConstants = useMemo(() => ({
+        baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),
+        targetFontSize: boxStyle === 'inbox' ? 10 : 11,
+        baseTop: isTextArea ? 12 : 0,
+        targetTopOffset: boxStyle === 'inbox' ? 17 : 2,
+    }), [fontSize, boxStyle, isTextArea]);
     // 라벨 애니메이션 스타일
     const animatedLabelStyle = useAnimatedStyle(() => {
-        const labelFontSize = interpolate(labelAnimationValue.value, [0, 1], [fontSize + (boxStyle === 'inbox' ? 1 : 0), boxStyle === 'inbox' ? 10 : 11], 'clamp');
+        const labelFontSize = interpolate(labelAnimationValue.value, [0, 1], [animationConstants.baseFontSize, animationConstants.targetFontSize], 'clamp');
         const labelTop = interpolate(labelAnimationValue.value, [0, 1], [
-            isTextArea ? 12 : 0,
-            isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 17 : 2),
+            animationConstants.baseTop,
+            isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset,
         ], 'clamp');
         return {
             top: labelTop,
             fontSize: labelFontSize,
         };
-    });
+    }, [animationConstants.baseFontSize, animationConstants.targetFontSize, animationConstants.baseTop, animationConstants.targetTopOffset, isTextArea]);
     // 레이아웃 핸들러
     const handleLayout = useCallback((event) => {
         const { height } = event.nativeEvent.layout;
@@ -43,25 +55,74 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
     // 포커스 및 블러 핸들러
     const handleFocus = useCallback(() => setIsFocused(true), []);
     const handleBlur = useCallback(() => setIsFocused(false), []);
+    const colorConfig = useMemo(() => ({
+        primaryColor: focusColor || palette.primary.main,
+        defaultBorderColor: borderColor || palette.grey[30],
+        defaultLabelColor: labelColor || palette.text.secondary,
+        placeholderColor: placeHolderColor || palette.grey[40],
+    }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor]);
     // 상태에 따른 테두리 색상 설정
-    const computedBorderColor = useMemo(() => (status === 'error' ? fErrorColor : isFocused ? (focusColor || palette.primary.main) : (borderColor || palette.grey[30])), [status, fErrorColor, isFocused, focusColor, borderColor, palette]);
-    // 상태에 따른 라벨 색상 설정
-    const computedLabelColor = useMemo(() => (status === 'error' ? fErrorColor : isFocused ? (focusColor || palette.primary.main) : value ? (labelColor || palette.text.secondary) : (placeHolderColor || palette.grey[40])), [status, fErrorColor, isFocused, focusColor, value, placeHolderColor, labelColor, palette]);
+    const computedBorderColor = useMemo(() => {
+        if (status === 'error')
+            return fErrorColor;
+        if (isFocused)
+            return colorConfig.primaryColor;
+        return colorConfig.defaultBorderColor;
+    }, [status, fErrorColor, isFocused, colorConfig.primaryColor, colorConfig.defaultBorderColor]);
+    // 상태에 따른 라벨 색상 설정 
+    const computedLabelColor = useMemo(() => {
+        if (status === 'error')
+            return fErrorColor;
+        if (isFocused)
+            return colorConfig.primaryColor;
+        if (value)
+            return colorConfig.defaultLabelColor;
+        return colorConfig.placeholderColor;
+    }, [status, fErrorColor, isFocused, value, colorConfig.primaryColor, colorConfig.defaultLabelColor, colorConfig.placeholderColor]);
+    const styleConfig = useMemo(() => {
+        const baseStyle = {
+            width: '100%',
+            justifyContent: isTextArea ? 'flex-start' : 'center',
+            borderRadius,
+            paddingHorizontal,
+            backgroundColor: inputBgColor || palette.background.base,
+            paddingTop: boxStyle === 'inbox' ? 13 : 0,
+        };
+        // 박스 스타일에 따른 테두리 설정
+        let borderStyle = {};
+        if (boxStyle === 'outline' || boxStyle === 'inbox') {
+            borderStyle = { borderWidth };
+        }
+        else if (boxStyle === 'underline') {
+            borderStyle = { borderBottomWidth: borderWidth };
+        }
+        // innerBoxStyle에 따른 스타일 설정
+        let innerStyle = {};
+        if (innerBoxStyle === 'top') {
+            innerStyle = {
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottomWidth: borderWidth / 2
+            };
+        }
+        else if (innerBoxStyle === 'middle') {
+            innerStyle = {
+                borderRadius: 0,
+                borderTopWidth: borderWidth / 2,
+                borderBottomWidth: borderWidth / 2
+            };
+        }
+        else if (innerBoxStyle === 'bottom') {
+            innerStyle = {
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderTopWidth: borderWidth / 2
+            };
+        }
+        return { ...baseStyle, ...borderStyle, ...innerStyle };
+    }, [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette.background.base]);
     // 컨테이너 스타일 정의
-    const containerStyle = useMemo(() => ({
-        width: '100%',
-        justifyContent: isTextArea ? 'flex-start' : 'center',
-        borderRadius,
-        paddingHorizontal,
-        backgroundColor: inputBgColor || palette.background.base,
-        paddingTop: boxStyle === 'inbox' ? 13 : 0,
-        ...(boxStyle === 'outline' || boxStyle === 'inbox' ? { borderWidth } : {}),
-        ...(boxStyle === 'underline' ? { borderBottomWidth: borderWidth } : {}),
-        ...(innerBoxStyle === 'top' ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: borderWidth / 2 }
-            : innerBoxStyle === 'middle' ? { borderRadius: 0, borderTopWidth: borderWidth / 2, borderBottomWidth: borderWidth / 2 }
-                : innerBoxStyle === 'bottom' ? { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderTopWidth: borderWidth / 2 }
-                    : {}),
-    }), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette]);
+    const containerStyle = styleConfig;
     // 라벨 스타일 정의
     const labelTextStyle = useMemo(() => ({
         fontSize,
@@ -73,19 +134,29 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
         fontFamily,
         borderRadius: boxStyle === 'outline' ? 5 : 0,
         overflow: 'hidden',
-    }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette]);
+    }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette.background.base]);
     // 텍스트 변경 핸들러
     const handleTextChange = useCallback((text) => {
         if (onChangeText)
             onChangeText(text);
     }, [onChangeText]);
+    const textInputStyle = useMemo(() => [
+        {
+            paddingTop: 7 + iosOffset,
+            paddingBottom: 5 + iosOffset,
+            color: palette.text.base,
+            fontSize,
+            width: '100%',
+            paddingRight: 25,
+            fontFamily
+        },
+        textInputProps?.style,
+    ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);
+    const shouldShowCloseButton = value && isFocused;
+    const shouldShowError = status === 'error' && errorMessage;
     return (<ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>
       <ViewAtom style={[containerStyle, { borderColor: computedBorderColor }]} onLayout={handleLayout} pointerEvents={disabled ? 'none' : 'auto'}>
-        <TextInput {...textInputProps} style={[
-            { paddingTop: 7 + iosOffset, paddingBottom: 5 + iosOffset, color: palette.text.base },
-            textInputProps?.style,
-            { fontSize, width: '100%', paddingRight: 25, fontFamily },
-        ]} value={value} onFocus={handleFocus} onBlur={handleBlur} onChangeText={handleTextChange} allowFontScaling={allowFontScaling} selectionColor={palette.grey[50]} autoCorrect={false} spellCheck={false}/>
+        <TextInput {...textInputProps} style={textInputStyle} value={value} onFocus={handleFocus} onBlur={handleBlur} onChangeText={handleTextChange} allowFontScaling={allowFontScaling} selectionColor={palette.grey[50]} autoCorrect={false} spellCheck={false}/>
 
         <ViewAtom pointerEvents="none" style={{ position: 'absolute' }}>
           <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>
@@ -93,11 +164,26 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
           </Animated.Text>
         </ViewAtom>
 
-        {(value && isFocused) && (<ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText}/>)}
+        {shouldShowCloseButton && (<ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText}/>)}
       </ViewAtom>
 
-      {status === 'error' && errorMessage && (<ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor}/>)}
+      {shouldShowError && (<ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor}/>)}
     </ViewAtom>);
 }
-export default React.memo(ZSTextField);
+const arePropsEqual = (prevProps, nextProps) => {
+    return (prevProps.value === nextProps.value &&
+        prevProps.status === nextProps.status &&
+        prevProps.disabled === nextProps.disabled &&
+        prevProps.errorMessage === nextProps.errorMessage &&
+        prevProps.typo === nextProps.typo &&
+        prevProps.boxStyle === nextProps.boxStyle &&
+        prevProps.innerBoxStyle === nextProps.innerBoxStyle &&
+        prevProps.isTextArea === nextProps.isTextArea &&
+        prevProps.label === nextProps.label &&
+        prevProps.focusColor === nextProps.focusColor &&
+        prevProps.borderColor === nextProps.borderColor &&
+        prevProps.labelColor === nextProps.labelColor &&
+        prevProps.onChangeText === nextProps.onChangeText);
+};
+export default React.memo(ZSTextField, arePropsEqual);
 //# sourceMappingURL=index.js.map