[Feat] Checkbox 컴포넌트 개발 및 디자인 구현

.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

src/shared/ui/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,35 @@
+import { Checkbox } from '@shared/ui/Checkbox/Checkbox';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Shared/UI/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Checkbox',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: 'Checkbox',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    label: 'Checkbox',
+  },
+};

src/shared/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,50 @@
+import { checkboxVariants } from '@shared/ui/Checkbox/Checkbox.variants';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+export type CheckboxProps = ComponentPropsWithoutRef<'input'> &
+  VariantProps<typeof checkboxVariants> & {
+    label?: string;
+  };
+
+export const Checkbox = ({
+  label,
+  checked,
+  disabled,
+  focus,
+  className,
+  ...props
+}: CheckboxProps) => {
+  const {
+    root,
+    box,
+    icon,
+    label: labelStyle,
+  } = checkboxVariants({
+    checked,
+    disabled,
+    focus,
+  });
+
+  return (
+    <label className={root({ className })}>
+      <input type="checkbox" className="sr-only" {...props} checked={checked} disabled={disabled} />
+
+      <span className={box()}>
+        {checked && (
+          <svg className={icon()} width="11" height="8" viewBox="0 0 11 8" fill="none">
+            <path
+              d="M10.0833 0.75L3.66667 7.16667L0.75 4.25"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </span>
+
+      {label && <span className={labelStyle()}>{label}</span>}
+    </label>
+  );
+};

src/shared/ui/Checkbox/Checkbox.variants.ts

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+
+export const checkboxVariants = tv({
+  slots: {
+    root: ['inline-flex items-center', 'gap-[var(--spacing-xxs)]', 'cursor-pointer', 'select-none'],
+
+    box: [
+      'flex items-center justify-center',
+      'w-[20px] h-[20px]',
+      'rounded-[4px]',
+      'border',
+      'transition-colors duration-[250ms] ease-out',
+    ],
+
+    icon: ['w-[14px] h-[14px]', 'flex items-center justify-center', 'text-[var(--color-white)]'],
+
+    label: ['typo-caption-1', 'text-[var(--color-gray-600)]'],
+  },
+
+  variants: {
+    checked: {
+      false: {
+        box: ['bg-transparent', 'border-[var(--color-gray-300)]'],
+        icon: ['hidden'],
+      },
+
+      true: {
+        box: ['bg-[var(--color-green-600)]', 'border-[var(--color-green-600)]'],
+        icon: ['block'],
+      },
+    },
+
+    focus: {
+      true: {
+        box: ['ring-2', 'ring-[var(--color-green-600)]', 'ring-offset-2'],
+      },
+    },
+
+    disabled: {
+      true: {
+        root: ['cursor-not-allowed'],
+        box: ['bg-[var(--color-gray-300)]', 'border-[var(--color-gray-300)]'],
+        label: ['text-[var(--color-gray-600)]', 'line-through'],
+      },
+    },
+  },
+
+  defaultVariants: {
+    checked: false,
+    focus: false,
+    disabled: false,
+  },
+});