[#367] Switch 컴포넌트 (#386)

* feat: switch 컴포넌트 공유를 위한 커밋

* style: Switch 컴포넌트 마크업 변경

* feat: Switch 컴포넌트 구현 및 사용하지 않는 컴포넌트 제거

* chore: 사용하지 않는 stories/Switch 컴포넌트 제거

* fix: FormValues 타입 boolean으로 수정

src/stories/Base/Switch.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import Switch from '@/ui/Base/Switch';
+import Button from '@/ui/Base/Button';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Base/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+type FormValues = {
+  comment: boolean;
+};
+
+const SwitchWithUseForm = () => {
+  const { register, handleSubmit } = useForm<FormValues>({
+    mode: 'all',
+    defaultValues: { comment: true },
+  });
+
+  const handleSubmitForm: SubmitHandler<FormValues> = ({ comment }) => {
+    alert(`comment: ${comment ? 'public' : 'private'}`);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleSubmitForm)}
+      className="flex w-[43rem] flex-col gap-[1.6rem]"
+    >
+      <div className="flex justify-between">
+        <span className="text-md">댓글 공개</span>
+        <Switch {...register('comment')} />
+      </div>
+      <Button
+        size="large"
+        type="submit"
+        onClick={handleSubmit(handleSubmitForm)}
+      >
+        Submit
+      </Button>
+    </form>
+  );
+};
+
+export const Default: Story = {
+  args: { name: 'switch' },
+};
+
+export const WithForm: Story = {
+  render: SwitchWithUseForm,
+};

src/ui/Base/Switch.tsx

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react';
+
+const Switch = (
+  {
+    name,
+    ...props
+  }: Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'type' | 'className'>,
+  ref: Ref<HTMLInputElement>
+) => {
+  return (
+    <label
+      className="relative inline-flex h-[2.4rem] w-[4.2rem] cursor-pointer items-center"
+      htmlFor={name}
+    >
+      <input
+        id={name}
+        name={name}
+        className="peer hidden"
+        type="checkbox"
+        ref={ref}
+        {...props}
+      />
+      <div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-cancel peer-checked:bg-main-900" />
+      <span className="absolute left-0 h-[2rem] w-[2rem] translate-x-[2rem] transform rounded-full bg-white transition peer-checked:translate-x-[0.25rem]" />
+      <span className="sr-only">{`Enable ${name}`}</span>
+    </label>
+  );
+};
+
+export default forwardRef(Switch);