From 660ac16226b2de593a831dc57749c8b774fd12e5 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Thu, 18 Apr 2024 02:53:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Radio=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RadioContainer의 Item 역할을 하는 컴포넌트입니다.
---
 src/components/Radio/Radio.tsx | 106 +++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src/components/Radio/Radio.tsx

diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
new file mode 100644
index 0000000..1a79042
--- /dev/null
+++ b/src/components/Radio/Radio.tsx
@@ -0,0 +1,106 @@
+import styled from '@emotion/styled';
+import { HTMLAttributes } from 'react';
+
+import { convertCSS } from '../../utils/convertCSS';
+import Flex from '../Flex/Flex';
+
+interface Props extends HTMLAttributes<HTMLInputElement> {
+  value: string;
+  checked: boolean;
+  margin?: string;
+  gap?: string | number;
+}
+
+interface RadioLabelProps {
+  margin?: string;
+  gap?: string | number;
+}
+
+const Radio = ({ value, checked, margin, gap, ...attributes }: Props) => {
+  return (
+    <>
+      <RadioInput
+        type="radio"
+        id={value}
+        value={value}
+        checked={checked}
+        {...attributes}
+      />
+      <Flex alignItems="center">
+        {checked ? (
+          <CheckedLabel margin={margin} htmlFor={value} gap={gap}>
+            {value}
+          </CheckedLabel>
+        ) : (
+          <UnCheckedLabel margin={margin} htmlFor={value} gap={gap}>
+            {value}
+          </UnCheckedLabel>
+        )}
+      </Flex>
+    </>
+  );
+};
+
+export default Radio;
+
+const RadioInput = styled.input`
+  display: none;
+`;
+
+const RadioLabel = styled.label<RadioLabelProps>`
+  margin: ${({ margin }) => margin};
+  position: relative;
+  padding-left: ${({ gap }) => (gap && convertCSS(gap)) || '28px'};
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+`;
+
+const CheckedLabel = styled(RadioLabel)`
+  color: ${({ theme }) => theme.color.b4};
+  &::before {
+    background-color: transparent;
+    border: 1.5px solid ${({ theme }) => theme.color.c1};
+    box-sizing: border-box;
+  }
+
+  &::after {
+    width: 12px;
+    height: 12px;
+    top: 5px;
+    left: 5px;
+    background-color: ${({ theme }) => theme.color.c1};
+  }
+`;
+
+const UnCheckedLabel = styled(RadioLabel)`
+  color: ${({ theme }) => theme.color.b4};
+  &::before {
+    background-color: ${({ theme }) => theme.color.l2};
+  }
+
+  &::after {
+    background-color: ${({ theme }) => theme.color.w1};
+  }
+`;