Feature/#177 radio component (#178)

* feat : StyledRadio

#177

* feat : StyledRadioGroup

#177

src/components/StyledRadio/index.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/jsx-props-no-spreading */
+
+'use client';
+
+import { Box, useRadio, Flex, Text } from '@chakra-ui/react';
+
+import { StyledRadioProps } from '@/components/StyledRadio/types';
+import color from '@/constants/color';
+import textStyles from '@/theme/foundations/textStyles';
+
+const StyledRadio = (props: StyledRadioProps) => {
+  const { getInputProps, getRadioProps } = useRadio(props);
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+
+  return (
+    <Flex as="label" align="center" w="100%" h={12}>
+      <input {...input} />
+      <Flex
+        {...checkbox}
+        align="center"
+        justify="center"
+        w={6}
+        h={6}
+        mr={3}
+        borderWidth="3px"
+        borderColor={color.orange_light}
+        borderRadius="full"
+        _checked={{
+          borderColor: color.orange,
+        }}
+        aspectRatio="1/1"
+      >
+        <Box
+          {...checkbox}
+          display="none"
+          w={3}
+          h={3}
+          borderRadius="full"
+          _checked={{
+            display: 'block',
+          }}
+          bgColor={color.orange}
+        />
+      </Flex>
+      <Flex
+        {...checkbox}
+        align="center"
+        w="100%"
+        h="100%"
+        borderRadius="3xl"
+        _checked={{
+          bgColor: color.orange,
+        }}
+        bgColor={color.orange_light}
+      >
+        <Text p="3" textColor="white" {...textStyles.bold_xl}>
+          {props.children}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default StyledRadio;

src/components/StyledRadio/types.ts

@@ -0,0 +1,5 @@
+import { UseRadioProps } from '@chakra-ui/react';
+
+export interface StyledRadioProps extends UseRadioProps {
+  children: string;
+}

src/components/StyledRadioGroup/index.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+'use client';
+
+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) => {
+  if (defaultValue && children.find((child) => child.props.value === defaultValue) === undefined) {
+    throw new Error('기본값이 선택지에 없습니다.');
+  }
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name,
+    defaultValue,
+    value,
+    onChange,
+  });
+
+  const group = getRootProps();
+
+  return (
+    <Flex direction="column" rowGap="3" w={w} m="20">
+      <Text {...textStyles.bold_xl}>{title}</Text>
+      <HStack {...group}>
+        {children.map((child) => (
+          <child.type key={child.props.value} {...getRadioProps({ value: child.props.value })}>
+            {child.props.children}
+          </child.type>
+        ))}
+      </HStack>
+    </Flex>
+  );
+};
+
+export default StyledRadioGroup;

src/components/StyledRadioGroup/types.ts

@@ -0,0 +1,9 @@
+export interface StyledRadioGroupProps {
+  title?: string;
+  name?: string;
+  onChange?: (value: string) => void;
+  w?: string | number;
+  defaultValue?: string;
+  value?: string;
+  children: JSX.Element[];
+}