@0610studio/zs-ui 0.0.3 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -5,7 +5,9 @@ This library was created using [create-expo-module](https://docs.expo.dev/module
|
|
|
5
5
|
# install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npx expo install @react-native-async-storage/async-storage react-native-gesture-handler react-native-reanimated react-native-svg react-native-safe-area-context
|
|
8
|
+
npx expo install @react-native-async-storage/async-storage react-native-gesture-handler react-native-reanimated react-native-svg react-native-safe-area-context
|
|
9
|
+
|
|
10
|
+
npx expo install @0610studio/zs-ui
|
|
9
11
|
```
|
|
10
12
|
|
|
11
13
|
# 사용법
|
|
@@ -57,3 +59,17 @@ const [loaded] = useFonts(requireFonts);
|
|
|
57
59
|
|
|
58
60
|
- [Theme](https://github.com/KimJeonghun91/zs-ui/blob/main/example/src/pages/ThemeExample.tsx)
|
|
59
61
|
|
|
62
|
+
|
|
63
|
+
### 실행 영상
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
https://github.com/user-attachments/assets/73f59984-fc7b-4004-a516-089a2969ea1d
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
https://github.com/user-attachments/assets/24918e91-9afc-4777-b6c7-b914bfb30e60
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
https://github.com/user-attachments/assets/7b66915e-163e-4abe-9fab-fb25e33d7a88
|
|
75
|
+
|
|
@@ -50,10 +50,10 @@ function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DE
|
|
|
50
50
|
}), [duration, onEntering]);
|
|
51
51
|
// 애니메이션이 비활성화된 경우 기본 View로 렌더링
|
|
52
52
|
if (!isAnimation) {
|
|
53
|
-
return <View style={[style, staticStyle]} {...props}>{children}</View>;
|
|
53
|
+
return <View style={[{ backgroundColor: palette.background.base }, style, staticStyle]} {...props}>{children}</View>;
|
|
54
54
|
}
|
|
55
55
|
// 애니메이션이 적용된 View로 렌더링
|
|
56
|
-
return (<Animated.View style={[style, staticStyle, animatedStyle]} {...animationProps} {...props}>
|
|
56
|
+
return (<Animated.View style={[{ backgroundColor: palette.background.base }, style, staticStyle, animatedStyle]} {...animationProps} {...props}>
|
|
57
57
|
{children}
|
|
58
58
|
</Animated.View>);
|
|
59
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback } from 'react';\nimport { View, ViewProps, Platform } from 'react-native';\nimport Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ShadowLevel, ShadowStyle } from '../types';\n\nconst DEFAULT_DURATION = 200 as const;\nconst SHADOW_DURATION = 50 as const;\nconst IOS_SHADOW: readonly ShadowStyle[] = [\n { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 1.00 },\n { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 1.41 },\n { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 2.22 },\n { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 2.62 },\n { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 3.84 },\n { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 1, shadowRadius: 4.65 },\n { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 1, shadowRadius: 4.65 },\n { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 1, shadowRadius: 4.65 },\n { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 1, shadowRadius: 5.46 },\n { shadowOffset: { width: 0, height: 5 }, shadowOpacity: 1, shadowRadius: 6.27 },\n] as const;\n\ninterface AnimatedWrapperProps extends ViewProps {\n isAnimation: boolean;\n elevationLevel?: ShadowLevel;\n duration?: number;\n}\n\nfunction AnimatedWrapper({\n isAnimation = true,\n elevationLevel = 0,\n duration = DEFAULT_DURATION,\n style,\n children,\n ...props\n}: AnimatedWrapperProps) {\n const { palette } = useTheme();\n const opacity = useSharedValue(0);\n\n // 그림자 및 기타 스타일을 플랫폼에 맞게 미리 계산\n const staticStyle = useMemo(() => {\n if (Platform.OS === 'ios') {\n const { shadowOpacity, ...rest } = IOS_SHADOW[elevationLevel];\n return { shadowColor: palette.elevationShadow[elevationLevel], ...rest };\n }\n return { shadowColor: palette.elevationShadow[elevationLevel] };\n }, [elevationLevel, palette]);\n\n // 애니메이션 스타일 정의 (iOS 그림자 및 Android elevation 처리)\n const animatedStyle = useAnimatedStyle(() => {\n if (Platform.OS === 'ios') {\n return { shadowOpacity: opacity.value * IOS_SHADOW[elevationLevel].shadowOpacity };\n }\n return { elevation: opacity.value * elevationLevel };\n }, [elevationLevel]);\n\n // 컴포넌트가 등장할 때 애니메이션 핸들링\n const onEntering = useCallback(() => {\n opacity.value = withTiming(1, { duration: SHADOW_DURATION });\n }, [opacity]);\n\n // 애니메이션 속성 메모이제이션\n const animationProps = useMemo(() => ({\n entering: FadeInDown.duration(duration).withCallback((finished) => {\n 'worklet';\n if (finished) {\n runOnJS(onEntering)();\n }\n }),\n exiting: FadeOut.duration(50),\n }), [duration, onEntering]);\n\n // 애니메이션이 비활성화된 경우 기본 View로 렌더링\n if (!isAnimation) {\n return <View style={[{ backgroundColor: palette.background.base }, style, staticStyle]} {...props}>{children}</View>;\n }\n\n // 애니메이션이 적용된 View로 렌더링\n return (\n <Animated.View\n style={[{ backgroundColor: palette.background.base }, style, staticStyle, animatedStyle]}\n {...animationProps}\n {...props}\n >\n {children}\n </Animated.View>\n );\n}\n\nexport default React.memo(AnimatedWrapper);\n"]}
|
package/package.json
CHANGED
|
@@ -71,13 +71,13 @@ function AnimatedWrapper({
|
|
|
71
71
|
|
|
72
72
|
// 애니메이션이 비활성화된 경우 기본 View로 렌더링
|
|
73
73
|
if (!isAnimation) {
|
|
74
|
-
return <View style={[style, staticStyle]} {...props}>{children}</View>;
|
|
74
|
+
return <View style={[{ backgroundColor: palette.background.base }, style, staticStyle]} {...props}>{children}</View>;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
// 애니메이션이 적용된 View로 렌더링
|
|
78
78
|
return (
|
|
79
79
|
<Animated.View
|
|
80
|
-
style={[style, staticStyle, animatedStyle]}
|
|
80
|
+
style={[{ backgroundColor: palette.background.base }, style, staticStyle, animatedStyle]}
|
|
81
81
|
{...animationProps}
|
|
82
82
|
{...props}
|
|
83
83
|
>
|