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

web-app/app/shared/components/checkbox/Checkbox.tsx

@@ -0,0 +1,66 @@
+import type { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+import { Checkbox as AriaCheckbox, composeRenderProps } from 'react-aria-components';
+
+import { tv } from 'tailwind-variants';
+
+const checkbox = tv({
+  base: 'inline-flex items-center gap-2 text-sm font-medium leading-7',
+  variants: {
+    isDisabled: {
+      true: 'text-dabeeo-gray-be',
+    },
+  },
+});
+
+const box = tv({
+  base: 'w-4 h-4 box-border shrink-0 flex items-center justify-center text-white border border-dabeeo-gray-be transition',
+  variants: {
+    isSelected: {
+      true: 'bg-primary border-primary',
+    },
+    isDisabled: {
+      true: 'text-dabeeo-gray-99 bg-dabeeo-gray-eb border-dabeeo-gray-be cursor-not-allowed',
+    },
+    isFocusVisible: {
+      true: 'ring-2 ring-offset-2 ring-primary',
+    },
+  },
+  compoundVariants: [],
+});
+
+export const Checkbox = (props: AriaCheckboxProps) => {
+  const { className, children, ...restProps } = props;
+  return (
+    <AriaCheckbox
+      className={composeRenderProps(className, (className, renderProps) => checkbox({ ...renderProps, className }))}
+      {...restProps}
+    >
+      {composeRenderProps(children, (children, { isSelected, isIndeterminate, ...renderProps }) => (
+        <>
+          <div className={box({ isSelected: isSelected || isIndeterminate, ...renderProps })}>
+            {isIndeterminate ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M5 12h14" />
+              </svg>
+            ) : isSelected ? (
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 7.00893L7.85714 10.625L13 5" stroke="currentColor" strokeWidth="2" />
+              </svg>
+            ) : null}
+          </div>
+          {children}
+        </>
+      ))}
+    </AriaCheckbox>
+  );
+};