[#398] RadioButton 컴포넌트

src/stories/Base/RadioButton.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import RadioButton from '@/ui/Base/RadioButton';
+import Button from '@/ui/Base/Button';
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Base/RadioButton',
+  component: RadioButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioButton>;
+
+type FormValues = {
+  radio: string;
+};
+
+const RadioButtonWithUseForm = () => {
+  const { register, handleSubmit, watch } = useForm<FormValues>({
+    mode: 'all',
+    defaultValues: { radio: '라디오 A' },
+  });
+
+  const handleSubmitForm: SubmitHandler<FormValues> = ({ radio }) => {
+    alert(`Submit as: ${radio}`);
+  };
+
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit(handleSubmitForm)}
+        className="flex w-[43rem] flex-col gap-[1.6rem]"
+      >
+        <div className="flex justify-between">
+          <RadioButton {...register('radio')} value="라디오 A" />
+          <RadioButton {...register('radio')} value="라디오 B" />
+          <RadioButton {...register('radio')} value="라디오 C" />
+        </div>
+        <Button size="large" type="submit">
+          Submit
+        </Button>
+      </form>
+      <pre>{JSON.stringify(watch(), null, 2)}</pre>
+    </>
+  );
+};
+
+export const Default: Story = {
+  render: args => <RadioButton {...args} value="라디오 버튼" />,
+};
+
+export const RadioButtonForm: Story = {
+  render: RadioButtonWithUseForm,
+};

src/ui/Base/RadioButton.tsx

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react';
+
+const BASE_RADIO_BUTTON_CLASSES =
+  'px-[1.2rem] py-[0.5rem] bg-main-600/[0.18] text-main-900 text-sm font-normal rounded-[2rem] cursor-pointer w-full h-full peer-checked:bg-main-900 peer-checked:text-white';
+
+const RadioButton = (
+  {
+    name,
+    value,
+    ...props
+  }: Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'type' | 'className'>,
+  ref: Ref<HTMLInputElement>
+) => {
+  return (
+    <label htmlFor={`id-${value}`}>
+      <input
+        id={`id-${value}`}
+        name={name}
+        className="peer hidden"
+        type="radio"
+        value={value}
+        ref={ref}
+        {...props}
+      />
+      <span className={BASE_RADIO_BUTTON_CLASSES}>{value}</span>
+    </label>
+  );
+};
+
+export default forwardRef(RadioButton);