feat: #2 라디오 버튼 컴포넌트

src/component/common/Radio.tsx → src/component/common/RadioButton/Radio.tsx

@@ -1,8 +1,7 @@
 import { css } from "@emotion/react";
 import { useContext } from "react";
 
-import ListItemCard from "./Card/ListItemCard";
-
+import ListItemCard from "@/component/common/Card/ListItemCard";
 import { RadioContext } from "@/store/context/RadioContext";
 
 type RadioProps = {

src/component/common/RadioButton/RadioButtonGroup.tsx

@@ -0,0 +1,31 @@
+import { css } from "@emotion/react";
+import { useState } from "react";
+
+import Radio from "./Radio";
+
+import { RadioContext } from "@/store/context/RadioContext";
+
+type RadioButtonGroupProps = {
+  items: { value: string; text: string }[];
+};
+
+const RadioButtonGroup = ({ items }: RadioButtonGroupProps) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      `}
+    >
+      <RadioContext.Provider value={{ selectedValue, onChange: (val: string) => setSelectedValue(val) }}>
+        {items.map(({ value, text }) => {
+          return <Radio key={crypto.randomUUID()} value={value} text={text} />;
+        })}
+      </RadioContext.Provider>
+    </div>
+  );
+};
+
+export default RadioButtonGroup;

src/store/context/RadioContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+type RadioContextState = {
+  selectedValue?: string;
+  onChange?: (value: string) => void;
+};
+
+export const RadioContext = createContext<RadioContextState | undefined>(undefined);