[Feat/#60] feat(web): migrate Switch

apps/web/package.json

@@ -15,6 +15,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@radix-ui/react-switch": "^1.2.6",
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
     "date-fns": "^4.1.0",

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Switch } from "./Switch";
+import type { SwitchProps } from "./Switch.type";
+
+const meta = {
+  title: "v2/Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: "boolean",
+      description: "토글의 현재 상태를 설정합니다",
+    },
+    onChange: {
+      action: "pressed changed",
+      description: "토글 상태가 변경될 때 호출되는 콜백 함수",
+    },
+    disabled: {
+      control: "boolean",
+      description: "토글의 비활성화 상태를 설정합니다",
+    },
+    value: {
+      control: "boolean",
+      description: "토글의 현재 상태를 설정합니다",
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {},
+  render: args => <Switch {...args} />,
+};
+
+export const Disabled: Story = {
+  args: {},
+  render: (args: SwitchProps) => <Switch {...args} disabled />,
+};
+
+export const SwitchGroup: Story = {
+  args: {},
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        alignItems: "center",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <div>ON</div>
+        <Switch defaultValue />
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <div>OFF</div>
+        <Switch />
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,55 @@
+import * as SwitchBase from "@radix-ui/react-switch";
+import { forwardRef } from "react";
+import { css } from "../../../../styled-system/css";
+import type { SwitchProps } from "./Switch.type";
+
+const SWITCH_WIDTH_PX = 52;
+const SWITCH_HEIGHT_PX = 32;
+const SWITCH_THUMB_WIDTH_PX = 28;
+const SWITCH_THUMB_HEIGHT_PX = 28;
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, defaultValue = false, onChange, disabled = false, value }, ref) => {
+    return (
+      <SwitchBase.Root
+        ref={ref}
+        defaultChecked={defaultValue}
+        onCheckedChange={onChange}
+        checked={value}
+        className={
+          css({
+            width: `${SWITCH_WIDTH_PX}px`,
+            height: `${SWITCH_HEIGHT_PX}px`,
+            backgroundColor: "#B7C2D0",
+            borderRadius: `${SWITCH_HEIGHT_PX / 2}px`,
+            position: "relative",
+            '&[data-state="checked"]': {
+              backgroundColor: "#3A8DFF",
+            },
+          }) + (className ? ` ${className}` : "")
+        }
+        data-frieeren-component="Switch"
+        disabled={disabled}
+        aria-disabled={disabled}
+      >
+        <SwitchBase.Thumb
+          className={css({
+            display: "block",
+            width: `${SWITCH_THUMB_WIDTH_PX}px`,
+            height: `${SWITCH_THUMB_HEIGHT_PX}px`,
+            backgroundColor: "#FFFFFF",
+            borderRadius: `${SWITCH_THUMB_HEIGHT_PX / 2}px`,
+            transition: "transform 100ms",
+            transform: "translateX(2px)",
+            willChange: "transform",
+            "[data-state=checked] &": {
+              transform: `translateX(${SWITCH_WIDTH_PX - SWITCH_THUMB_WIDTH_PX - 2}px)`,
+            },
+          })}
+        />
+      </SwitchBase.Root>
+    );
+  }
+);
+
+Switch.displayName = "Switch";

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

@@ -0,0 +1,7 @@
+export interface SwitchProps {
+  className?: string;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  defaultValue?: boolean;
+  value?: boolean;
+}