Merge pull request #126 from COW-dev/feat/#125

[REFACTOR] switch 컴포넌트 radix 의존성 제거

Author: ujinsim

package.json

@@ -41,7 +41,6 @@
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
-    "@radix-ui/react-switch": "^1.0.0",
     "framer-motion": "^11.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/shared/ui/Switch/Switch.tsx

@@ -1,23 +1,60 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { useState } from 'react';
 
 import { COLORS, SwitchColor } from '@/shared/lib/colors';
 
-type Props = React.ComponentProps<typeof SwitchPrimitives.Root> & {
+type Props = Omit<React.ComponentProps<'button'>, 'onClick'> & {
   /**
    * color of the switch.
    * @default 'primary'
    */
   color?: SwitchColor;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
 };
 
-export function Switch({ color = 'primary', ...props }: Props) {
+export function Switch({
+  color = 'primary',
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  className,
+  disabled,
+  ...props
+}: Props) {
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+  const isChecked = checked ?? uncontrolledChecked;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    const next = !isChecked;
+    if (checked === undefined) {
+      setUncontrolledChecked(next);
+    }
+    onCheckedChange?.(next);
+  };
+
   return (
-    <SwitchPrimitives.Root
+    <button
       {...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)}
+      type="button"
+      role="switch"
+      disabled={disabled}
+      onClick={handleClick}
+      aria-checked={isChecked}
+      data-state={isChecked ? 'checked' : 'unchecked'}
+      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',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={{ '--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>
+      <span 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" />
+    </button>
   );
 }

vite.config.ts

@@ -35,7 +35,6 @@ export default defineConfig({
         'react-dom',
         'react/jsx-runtime',
         'framer-motion',
-        '@radix-ui/react-switch',
         'tailwindcss',
       ],
       output: {