Feature/#193 radio 컴포넌트 텍스트 사이즈 변경 (#195)

* design : StyledRadio text size #193 * design : StyledRadio dot과텍스트 사이거리 1로 수정 #193 * design : StyledRadioGroup spacing 추가 #193
BDD-CLUB · Apr 11, 2024 · 4bd9f1a · 4bd9f1a
1 parent a19e303
commit 4bd9f1a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/components/StyledRadio/index.tsx b/src/components/StyledRadio/index.tsx
@@ -23,7 +23,7 @@ const StyledRadio = (props: StyledRadioProps) => {
         justify="center"
         w={6}
         h={6}
-        mr={3}
+        mr={1}
         borderWidth="3px"
         borderColor={color.orange_light}
         borderRadius="full"
@@ -55,7 +55,7 @@ const StyledRadio = (props: StyledRadioProps) => {
         }}
         bgColor={color.orange_light}
       >
-        <Text p="3" textColor="white" {...textStyles.bold_xl}>
+        <Text px="6" textColor="white" {...textStyles.bold_md}>
           {props.children}
         </Text>
       </Flex>

diff --git a/src/components/StyledRadioGroup/index.tsx b/src/components/StyledRadioGroup/index.tsx
@@ -7,7 +7,16 @@ import { Flex, HStack, useRadioGroup, Text } from '@chakra-ui/react';
 import { StyledRadioGroupProps } from '@/components/StyledRadioGroup/types';
 import textStyles from '@/theme/foundations/textStyles';
 
-const StyledRadioGroup = ({ title, name, defaultValue, value, onChange, children, w }: StyledRadioGroupProps) => {
+const StyledRadioGroup = ({
+  title,
+  name,
+  defaultValue,
+  value,
+  onChange,
+  children,
+  w,
+  spacing,
+}: StyledRadioGroupProps) => {
   if (defaultValue && children.find((child) => child.props.value === defaultValue) === undefined) {
     throw new Error('기본값이 선택지에 없습니다.');
   }
@@ -22,9 +31,9 @@ const StyledRadioGroup = ({ title, name, defaultValue, value, onChange, children
   const group = getRootProps();
 
   return (
-    <Flex direction="column" rowGap="3" w={w} m="20">
+    <Flex direction="column" rowGap="3" w={w}>
       <Text {...textStyles.bold_xl}>{title}</Text>
-      <HStack {...group}>
+      <HStack {...group} spacing={spacing || '4'}>
         {children.map((child) => (
           <child.type key={child.props.value} {...getRadioProps({ value: child.props.value })}>
             {child.props.children}

diff --git a/src/components/StyledRadioGroup/types.ts b/src/components/StyledRadioGroup/types.ts
@@ -6,4 +6,5 @@ export interface StyledRadioGroupProps {
   defaultValue?: string;
   value?: string;
   children: JSX.Element[];
+  spacing?: string | number;
 }