Merge pull request #21 from depromeet/feature/2/multi-select-button

Feature/2/커스텀 라디오 버튼

src/component/common/Card/ListItemCard.tsx

@@ -0,0 +1,29 @@
+import { css } from "@emotion/react";
+
+type ListItemCardProps = {
+  variant?: "default" | "theme";
+  height?: string;
+  borderRadius?: string;
+  children: React.ReactNode;
+};
+
+const ListItemCard = ({ variant = "default", height = "5rem", borderRadius = ".8rem", children }: ListItemCardProps) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: ${variant === "default" ? "#F1F3F5" : "#608dff"};
+        height: ${height};
+        border-radius: ${borderRadius};
+        color: ${variant === "default" ? "#212529" : "#fff"};
+        transition: 0.4s all;
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ListItemCard;

src/component/common/RadioButton/Radio.tsx

@@ -0,0 +1,45 @@
+import { css } from "@emotion/react";
+import { useContext } from "react";
+
+import ListItemCard from "@/component/common/Card/ListItemCard";
+import { RadioContext } from "@/store/context/RadioContext";
+
+type RadioProps = {
+  value: string;
+  children: React.ReactNode;
+};
+
+const Radio = ({ value, children }: RadioProps) => {
+  const radioContext = useContext(RadioContext);
+  return (
+    <ListItemCard variant={radioContext?.selectedValue === value ? "theme" : "default"}>
+      <label
+        htmlFor={value}
+        css={css`
+          font-weight: 600;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          width: 100%;
+        `}
+      >
+        {children}
+      </label>
+      <input
+        type="radio"
+        name={radioContext?.radioName}
+        id={value}
+        value={value}
+        onChange={(e) => {
+          radioContext?.onChange && radioContext.onChange(e.target.value);
+        }}
+        css={css`
+          display: none;
+        `}
+      />
+    </ListItemCard>
+  );
+};
+
+export default Radio;

src/component/common/RadioButton/RadioButtonGroup.tsx

@@ -0,0 +1,26 @@
+import { css } from "@emotion/react";
+
+import { RadioContext } from "@/store/context/RadioContext";
+
+type RadioButtonGroupProps = {
+  children: React.ReactNode;
+  selectedValue: string | undefined;
+  onChange: React.Dispatch<React.SetStateAction<string | undefined>>;
+  radioName: string;
+};
+
+const RadioButtonGroup = ({ children, ...rest }: RadioButtonGroupProps) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      `}
+    >
+      <RadioContext.Provider value={rest}>{children}</RadioContext.Provider>
+    </div>
+  );
+};
+
+export default RadioButtonGroup;

src/store/context/RadioContext.ts

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