[FEAT] CreateButton 컴포넌트 구현

.gitignore

@@ -39,6 +39,7 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+.mcp.json
 
 # Storybook build output
 packages/timo-design-system/storybook-static/

packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx

@@ -0,0 +1,39 @@
+import { CreateButton } from "./CreateButton";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/CreateButton",
+  component: CreateButton,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "버튼에 표시될 텍스트",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "버튼 비활성화 여부",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+} satisfies Meta<typeof CreateButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: "생성하기" },
+};
+
+export const Disabled: Story = {
+  args: { label: "생성하기", disabled: true },
+};

packages/timo-design-system/src/components/button/create-button/CreateButton.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@lib";
+
+export interface CreateButtonProps {
+  label: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const CreateButton = ({
+  label,
+  disabled = false,
+  onClick,
+}: CreateButtonProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "typo-headline-b-14 inline-flex items-center justify-center rounded px-3 py-1.5",
+        disabled
+          ? "bg-timo-gray-500 text-timo-gray-700 cursor-not-allowed"
+          : "bg-timo-blue-300 cursor-pointer text-white",
+      )}
+    >
+      {label}
+    </button>
+  );
+};

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

@@ -1,6 +1,7 @@
-export { Checkbox } from "./checkbox/Checkbox";
-export { Color } from "./color/Color";
-export { Typography } from "./typography/Typography";
-export { Tag } from "./tag/Tag";
-export { PriorityIcon } from "./priority-icon/PriorityIcon";
-export { TodayBadge } from "./badge/today-badge/TodayBadge";
+export { Checkbox } from "@components/checkbox/Checkbox";
+export { Color } from "@components/color/Color";
+export { Typography } from "@components/typography/Typography";
+export { Tag } from "@components/tag/Tag";
+export { PriorityIcon } from "@components/priority-icon/PriorityIcon";
+export { CreateButton } from "@components/button/create-button/CreateButton";
+export { TodayBadge } from "@components/badge/today-badge/TodayBadge";