[Feat/#58] feat(web): migrate Radio

apps/web/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
     "date-fns": "^4.1.0",

apps/web/src/shared/components/Radio/Radio.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Radio } from "./Radio";
+import type { RadioProps } from "./Radio.type";
+
+const meta = {
+  title: "v2/Components/Radio",
+  component: Radio,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    options: {
+      control: "select",
+      options: [
+        [
+          { label: "프로젝트1", value: "프로젝트1" },
+          { label: "프로젝트2", value: "프로젝트2" },
+          { label: "프로젝트3", value: "프로젝트3" },
+        ],
+      ],
+      description: "radio의 옵션을 지정",
+    },
+    disabled: {
+      control: "boolean",
+      description: "radio의 비활성화 상태를 지정",
+    },
+    defaultValue: {
+      control: "select",
+      options: ["프로젝트1", "프로젝트2", "프로젝트3"],
+      description: "radio의 기본 값을 지정",
+    },
+  },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    defaultValue: "프로젝트1",
+    options: [
+      { label: "프로젝트1", value: "프로젝트1" },
+      { label: "프로젝트2", value: "프로젝트2" },
+      { label: "프로젝트3", value: "프로젝트3" },
+    ],
+  },
+  render: args => <Radio {...args} />,
+};
+
+export const Disabled: Story = {
+  args: {
+    options: [
+      { label: "프로젝트1", value: "프로젝트1" },
+      { label: "프로젝트2", value: "프로젝트2" },
+      { label: "프로젝트3", value: "프로젝트3" },
+    ],
+    disabled: true,
+  },
+  render: (args: RadioProps) => <Radio {...args} />,
+};

apps/web/src/shared/components/Radio/Radio.tsx

@@ -0,0 +1,77 @@
+import * as RadioGroupBase from "@radix-ui/react-radio-group";
+import { css } from "../../../../styled-system/css";
+import type { RadioProps } from "./Radio.type";
+
+export function Radio({ options, defaultValue, onChange, disabled = false }: RadioProps) {
+  return (
+    <RadioGroupBase.Root
+      defaultValue={defaultValue}
+      onValueChange={onChange}
+      disabled={disabled}
+      className={css({
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        gap: "8px",
+      })}
+    >
+      {options.map(option => (
+        <div
+          className={css({
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+          })}
+          key={option.value}
+        >
+          <RadioGroupBase.Item
+            className={css({
+              margin: "11px",
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              border: "1px solid #B7C2D0",
+              cursor: "pointer",
+              position: "relative",
+              flexShrink: 0,
+              _hover: { borderColor: "#3A8DFF" },
+              '&[data-state="checked"]': { borderColor: "#3A8DFF" },
+              "&[data-disabled]": { borderColor: "#B7C2D0", cursor: "not-allowed" },
+            })}
+            value={option.value}
+            id={`radio-${option.value}`}
+          >
+            <div
+              className={css({
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                backgroundColor: "transparent",
+                "[data-state=checked] &": { backgroundColor: "#3A8DFF" },
+                "[data-disabled] &": { backgroundColor: "#B7C2D0" },
+              })}
+            />
+            <RadioGroupBase.Indicator />
+          </RadioGroupBase.Item>
+          <label
+            className={css({
+              display: "flex",
+              alignItems: "center",
+              cursor: "pointer",
+              userSelect: "none",
+              '&[aria-disabled="true"]': { opacity: 0.5, cursor: "not-allowed" },
+            })}
+            aria-disabled={disabled}
+            htmlFor={`radio-${option.value}`}
+          >
+            <div className={css({ flex: 1 })}>{option.label}</div>
+          </label>
+        </div>
+      ))}
+    </RadioGroupBase.Root>
+  );
+}

apps/web/src/shared/components/Radio/Radio.type.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export type RadioProps = {
+  options: {
+    label: ReactNode;
+    value: string;
+  }[];
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+};