[FEAT] Checkbox 공통 컴포넌트 구현

packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+
+import { Checkbox } from "./Checkbox";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    onChange: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+const PlaygroundCheckbox = (args: React.ComponentProps<typeof Checkbox>) => {
+  const [checked, setChecked] = useState(args.checked);
+  return <Checkbox {...args} checked={checked} onChange={setChecked} />;
+};
+
+export const Playground: Story = {
+  render: (args) => <PlaygroundCheckbox {...args} />,
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Checkbox checked={false} onChange={() => {}} />
+        <p className="text-xs">Unchecked</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Checkbox checked={true} onChange={() => {}} />
+        <p className="text-xs">Checked</p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Checkbox checked={true} disabled onChange={() => {}} />
+        <p className="text-xs">Disabled</p>
+      </div>
+    </div>
+  ),
+};

packages/timo-design-system/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@lib";
+import { useId } from "react";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Checkbox = ({
+  checked,
+  onChange,
+  disabled = false,
+  className,
+}: CheckboxProps) => {
+  const id = useId();
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        "relative inline-flex h-6 w-6 shrink-0 items-center justify-center",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className,
+      )}
+    >
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
+        className="peer sr-only"
+      />
+      <span
+        className={cn(
+          "peer-focus-visible:ring-timo-blue-300 flex h-4.5 w-4.5 items-center justify-center rounded-[4px] border transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1",
+          !checked && "border-timo-gray-500",
+          checked && !disabled && "border-timo-blue-300 bg-timo-blue-300",
+          checked && disabled && "bg-timo-blue-100 border-timo-blue-100",
+        )}
+      >
+        {(checked || disabled) && (
+          <svg
+            width="10"
+            height="7"
+            viewBox="0 0 10 7"
+            overflow="visible"
+            fill="none"
+            aria-hidden="true"
+            className="text-timo-yellow-300"
+          >
+            <path
+              d="M0.75 3.5L3.5 6.25L9.25 0.75"
+              stroke="currentColor"
+              strokeWidth="1"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </span>
+    </label>
+  );
+};

packages/timo-design-system/src/components/index.ts

@@ -1,3 +1,4 @@
+export { Checkbox } from "./checkbox/Checkbox";
 export { Color } from "./color/Color";
 export { Typography } from "./typography/Typography";
 export { Tag } from "./tag/Tag";