[FEAT] Switch 컴포넌트, 스토리북 제작

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 next-env.d.ts
 
 *storybook.log
+storybook-static

package.json

@@ -12,6 +12,7 @@
     "prepare": "husky && husky install"
   },
   "dependencies": {
+    "@radix-ui/react-switch": "^1.1.2",
     "@storybook/addon-a11y": "^8.4.7",
     "@tanstack/react-query": "^5.62.15",
     "axios": "^1.7.9",

src/shared/lib/colors.ts

@@ -48,4 +48,5 @@ export const COLORS = {
 
 export type Colors = keyof typeof colors;
 export type IconColor = keyof typeof COLORS;
+export type SwitchColor = keyof typeof COLORS;
 export const colorNames = Object.keys(colors) as Colors[];

src/shared/ui/Switch/Switch.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { COLORS } from '@/shared/lib/colors';
+
+import { Switch } from '.';
+
+const meta = {
+  title: 'components/common/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Basic: Story = {
+  args: {
+    color: 'primary',
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'SwitchColor' },
+        defaultValue: { summary: 'primary' },
+      },
+      options: Object.keys(COLORS),
+    },
+  },
+  render: (args) => <Switch {...args} />,
+};

src/shared/ui/Switch/Switch.tsx

@@ -0,0 +1,23 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { COLORS, SwitchColor } from '@/shared/lib/colors';
+
+type Props = React.ComponentProps<typeof SwitchPrimitives.Root> & {
+  /**
+   * color of the switch.
+   * @default 'primary'
+   */
+  color?: SwitchColor;
+};
+
+export function Switch({ color = 'primary', ...props }: Props) {
+  return (
+    <SwitchPrimitives.Root
+      {...props}
+      className="group flex h-3.5 w-7 items-center rounded-full shadow-lg data-[state=checked]:bg-[var(--switch-color)] data-[state=unchecked]:bg-gray-500"
+      style={color && ({ '--switch-color': COLORS[color] } as React.CSSProperties)}
+    >
+      <SwitchPrimitives.Thumb className="h-5 w-5 -translate-x-1.5 rounded-full bg-white shadow-inner drop-shadow-md duration-100 group-data-[state=checked]:translate-x-3.5" />
+    </SwitchPrimitives.Root>
+  );
+}

src/shared/ui/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch } from './Switch';