@0610studio/zs-ui 0.3.1 → 0.3.2
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/build/ui/ZSPressable/index.d.ts +4 -4
- package/build/ui/ZSPressable/index.d.ts.map +1 -1
- package/build/ui/ZSPressable/index.js +12 -13
- package/build/ui/ZSPressable/index.js.map +1 -1
- package/build/ui/ZSRadioGroup/index.d.ts.map +1 -1
- package/build/ui/ZSRadioGroup/index.js +1 -1
- package/build/ui/ZSRadioGroup/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ViewProps } from "react-native";
|
|
3
3
|
import type { ShadowLevel } from "../types";
|
|
4
|
+
import { ViewColorOptions } from "../../theme/types";
|
|
4
5
|
interface ZSPressableProps extends ViewProps {
|
|
5
|
-
onPress
|
|
6
|
+
onPress?: (value?: any) => void;
|
|
6
7
|
onLongPress?: (value?: any) => void;
|
|
7
8
|
pressedBackgroundColor?: string;
|
|
8
9
|
pressedBackgroundBorderRadius?: number;
|
|
9
|
-
flex?: number;
|
|
10
|
-
minWidth?: number;
|
|
11
10
|
isAnimation?: boolean;
|
|
12
11
|
elevationLevel?: ShadowLevel;
|
|
13
12
|
fullWidth?: boolean;
|
|
13
|
+
color?: ViewColorOptions;
|
|
14
14
|
}
|
|
15
|
-
declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius,
|
|
15
|
+
declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius, elevationLevel, fullWidth, color, ...props }: ZSPressableProps): React.JSX.Element;
|
|
16
16
|
export default ZSPressable;
|
|
17
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useCallback } from "react";
|
|
2
|
-
import { Pressable } from "react-native";
|
|
2
|
+
import { Pressable, View } from "react-native";
|
|
3
3
|
import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from "react-native-reanimated";
|
|
4
4
|
import AnimatedWrapper from "../atoms/AnimatedWrapper";
|
|
5
5
|
const DEFAULT_DURATION = { duration: 100 };
|
|
6
|
-
function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16,
|
|
6
|
+
function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, ...props }) {
|
|
7
7
|
const isButtonPress = useSharedValue(0);
|
|
8
8
|
const boxAnimation = useAnimatedStyle(() => {
|
|
9
9
|
const scale = interpolate(isButtonPress.value, [0, 1], [1, 0.96], 'clamp');
|
|
@@ -18,18 +18,17 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
|
|
|
18
18
|
return {
|
|
19
19
|
backgroundColor: pressed ? pressedBackgroundColor : 'transparent',
|
|
20
20
|
borderRadius: pressedBackgroundBorderRadius,
|
|
21
|
-
flex: fullWidth ? 1 : flex,
|
|
22
|
-
minWidth: minWidth,
|
|
23
|
-
alignSelf: fullWidth ? 'stretch' : undefined,
|
|
24
21
|
};
|
|
25
|
-
}, [pressedBackgroundColor, pressedBackgroundBorderRadius,
|
|
26
|
-
return (<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
{props.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
}, [pressedBackgroundColor, pressedBackgroundBorderRadius, fullWidth]);
|
|
23
|
+
return (<View style={{ width: fullWidth ? '100%' : undefined }}>
|
|
24
|
+
<Pressable onPress={onPress} onLongPress={onLongPress} style={({ pressed }) => handlePressStyle(pressed)}>
|
|
25
|
+
<Animated.View style={boxAnimation}>
|
|
26
|
+
<AnimatedWrapper color={color} isAnimation={isAnimation} elevationLevel={elevationLevel} style={props.style}>
|
|
27
|
+
{props.children}
|
|
28
|
+
</AnimatedWrapper>
|
|
29
|
+
</Animated.View>
|
|
30
|
+
</Pressable>
|
|
31
|
+
</View>);
|
|
33
32
|
}
|
|
34
33
|
export default ZSPressable;
|
|
35
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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,
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKhD,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKhD,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,qBAwGA;;AAED,wBAAkC"}
|
|
@@ -20,7 +20,7 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
20
20
|
{options.map((option) => {
|
|
21
21
|
const isSelected = value?.index === option.index;
|
|
22
22
|
const setColor = isSelected ? palette.primary.light : palette.background.neutral;
|
|
23
|
-
return (<ZSPressable key={option.index} onPress={() => handleSelect(option)} pressedBackgroundColor="transparent"
|
|
23
|
+
return (<ZSPressable key={option.index} onPress={() => handleSelect(option)} pressedBackgroundColor="transparent" fullWidth>
|
|
24
24
|
<ViewAtom style={{
|
|
25
25
|
flexDirection: 'row',
|
|
26
26
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,MAAuB,MAAM,WAAW,CAAC;AAChD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,WAAW,GAWZ;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,MAAmB,EAAE,EAAE;QACvD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YAC3C,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,KAAK,EAAE,MAAM;SACd,CAAC,CACF,IAAI,cAAc,CAAC,CAEnB;MAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,UAAU,GAAG,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;YACjD,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;YAEjF,OAAO,CACL,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CACpC,sBAAsB,CAAC,aAAa,CACpC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, memo } from 'react';\nimport { ViewProps } from 'react-native';\nimport { RadioOption } from '../types';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ZSText, { ZSTextProps } from '../ZSText';\nimport ZSPressable from '../ZSPressable';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nfunction ZSRadioGroup({\n options,\n value,\n onSelect,\n containerStyle,\n valueStyle,\n minWidth,\n disabled = false,\n fullWidth = false,\n selectStyle,\n}: {\n options: RadioOption[];\n value?: RadioOption;\n onSelect: (value: RadioOption) => void;\n containerStyle?: ViewProps;\n valueStyle?: ZSTextProps;\n selectStyle?: ZSTextProps;\n minWidth?: number;\n disabled?: boolean;\n fullWidth?: boolean;\n}) {\n const { palette } = useTheme();\n\n const handleSelect = useCallback((option: RadioOption) => {\n if (!disabled) {\n onSelect(option);\n }\n }, [disabled, onSelect]);\n\n return (\n <ViewAtom\n style={{\n flexDirection: fullWidth ? 'column' : 'row',\n gap: 10,\n flexWrap: fullWidth ? 'nowrap' : 'wrap',\n width: '100%',\n }}\n {...containerStyle}\n >\n {options.map((option) => {\n const isSelected = value?.index === option.index;\n const setColor = isSelected ? palette.primary.light : palette.background.neutral;\n\n return (\n <ZSPressable\n key={option.index}\n onPress={() => handleSelect(option)}\n pressedBackgroundColor=\"transparent\"\n fullWidth\n >\n <ViewAtom\n style={{\n flexDirection: 'row',\n alignItems: 'center',\n paddingVertical: 12,\n borderWidth: 1,\n paddingLeft: 10,\n paddingRight: 15,\n borderRadius: 26,\n borderColor: setColor,\n backgroundColor: isSelected ? palette.background.layer1 : 'transparent',\n flex: 1,\n }}\n >\n {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}\n {!fullWidth && (\n <ViewAtom\n style={{\n width: 20,\n height: 20,\n borderWidth: 1,\n borderRadius: 10,\n borderColor: setColor,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <ViewAtom\n style={{\n width: 12,\n height: 12,\n borderRadius: 6,\n backgroundColor: setColor,\n }}\n />\n </ViewAtom>\n )}\n {/* 옵션 텍스트 표시 */}\n <ZSText style={{ marginLeft: 10 }} {...valueStyle}>\n {option.value}\n </ZSText>\n\n {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n {fullWidth && (\n <ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>\n <ViewAtom\n style={{\n backgroundColor: isSelected\n ? palette.primary.main\n : palette.background.layer2,\n paddingHorizontal: 10,\n borderRadius: 50,\n minWidth: 42,\n minHeight: 24,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n {isSelected ? (\n <SvgCheck size={18} />\n ) : (\n <ZSText typo=\"body.5\" {...selectStyle}>\n 선택\n </ZSText>\n )}\n </ViewAtom>\n </ViewAtom>\n )}\n </ViewAtom>\n </ZSPressable>\n );\n })}\n </ViewAtom>\n );\n}\n\nexport default memo(ZSRadioGroup);\n"]}
|