feature/imgonnado#10-radio (imgonnado#11)

* imgonnado#7 💄 래디오 컴포넌트 작성

* imgonnado#7 💄 래디오 컴포넌트 작성

pages/index.tsx

@@ -7,6 +7,7 @@ import CommonLayout from "../src/components/Layout/CommonLayout";
 import ProjectList from "../src/components/ProjectList/ProjectList";
 import Button from "../src/components/Button/Button";
 import ButtonArea from "../src/components/Button/ButtonArea";
+import Radio from "../src/components/Radio/Radio";
 
 function App() {
   const projectListData = [

src/components/Radio/Radio.module.scss

@@ -0,0 +1,35 @@
+.radio {
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  // margin-right: 10px;
+  padding: 0;
+  appearance: none;
+  border: 2px solid var(--bg-4);
+  border-radius: 50%;
+  vertical-align: middle;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:checked {
+    position: relative;
+    border: 2px solid var(--primary-color);
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    box-shadow: 0 0 0 3px inset var(--bg-1);
+
+    & + .radioLabel.primary {
+      color: var(--primary-color);
+    }
+  }
+  & + .radioLabel {
+    margin-left: 9px;
+    font-weight: 500;
+    vertical-align: middle;
+  }
+
+  &:disabled + .radioLabel {
+    color: #999;
+  }
+}

src/components/Radio/Radio.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./Radio.module.scss";
+
+interface RadioProps {
+  children: React.ReactNode;
+  id?: string;
+  name?: string;
+  textColor?: "primary";
+  disabled?: boolean;
+  checked?: boolean;
+}
+
+function Radio({
+  children,
+  id,
+  name,
+  textColor,
+  disabled,
+  checked,
+}: RadioProps) {
+  return (
+    <>
+      <input
+        type="radio"
+        className={styles.radio}
+        id={id}
+        name={name}
+        disabled={disabled}
+        checked={checked}
+      />
+      <label
+        className={clsx(styles.radioLabel, textColor && styles[`${textColor}`])}
+        htmlFor={id}
+      >
+        {children}
+      </label>
+    </>
+  );
+}
+
+export default Radio;