feat: 공통 컴포넌트 추가 생성

web-app/app/shared/components/switch/Switch.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Switch as AriaSwitch, SwitchProps as AriaSwitchProps } from 'react-aria-components';
+
+import clsx from 'clsx';
+import { tv } from 'tailwind-variants';
+
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
+  children?: React.ReactNode;
+}
+
+const track = tv({
+  base: 'flex h-4.5 w-8 box-border px-1 items-center rounded-full transition duration-200 ease-in-out',
+  variants: {
+    isSelected: {
+      false: 'bg-dabeeo-gray-99',
+      true: 'bg-dabeeo-green-main',
+    },
+    isDisabled: {
+      true: 'bg-dabeeo-gray-eb',
+    },
+    isReadOnly: {
+      true: 'opacity-50',
+    },
+    isFocusVisible: {
+      true: 'ring-2 ring-offset-2 ring-primary',
+    },
+  },
+});
+
+const handle = tv({
+  base: 'h-3 w-3 transform rounded-full outline outline-1 -outline-offset-1 outline-transparent shadow-[0_1px_3px_0_rgba(5,48,48,0.35)] transition duration-200 ease-in-out',
+  variants: {
+    isSelected: {
+      false: 'translate-x-0 bg-white',
+      true: 'translate-x-[11px] bg-white',
+    },
+  },
+});
+
+export function Switch({ children, ...props }: SwitchProps) {
+  return (
+    <AriaSwitch
+      {...props}
+      className={clsx(
+        props.className,
+        'relative flex gap-2 items-center text-dabeeo-black-34 text-sm transition [-webkit-tap-highlight-color:transparent] cursor-pointer'
+      )}
+    >
+      {(renderProps) => (
+        <>
+          <div className={track(renderProps)}>
+            <span className={handle(renderProps)} />
+          </div>
+          {children}
+        </>
+      )}
+    </AriaSwitch>
+  );
+}