[FEAT] AddTaskButton 컴포넌트 구현

apps/timo-web/app/globals.css

@@ -1,3 +1,13 @@
 @import "tailwindcss";
 @import "@repo/tailwind-config/theme.css";
 @import "@repo/timo-design-system/styles";
+
+@layer base {
+  button {
+    cursor: pointer;
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+  }
+}

packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.stories.tsx

@@ -0,0 +1,44 @@
+import { AddTaskButton } from "@components/button/add-task-button/AddTaskButton";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Button/AddTaskButton",
+  component: AddTaskButton,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    text: {
+      control: "text",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "weekly", "big"],
+    },
+  },
+} satisfies Meta<typeof AddTaskButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: "Add task",
+    variant: "default",
+  },
+};
+
+export const Weekly: Story = {
+  args: {
+    text: "Add task",
+    variant: "weekly",
+  },
+};
+
+export const Big: Story = {
+  args: {
+    text: "Add task",
+    variant: "big",
+  },
+};

packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsx

@@ -0,0 +1,48 @@
+import { PlusIcon } from "@icons";
+import { cn } from "@lib";
+
+export type AddTaskButtonVariant = "default" | "weekly" | "big";
+
+const ADD_TASK_BUTTON_VARIANT: Record<AddTaskButtonVariant, string> = {
+  default: "w-57.5 px-2 typo-body-m-12",
+  weekly: "w-29 px-2 typo-body-m-12",
+  big: "h-14.5 w-155 px-5 typo-headline-m-14",
+};
+
+export interface AddTaskButtonProps {
+  text: string;
+  variant?: AddTaskButtonVariant;
+  onClick?: () => void;
+}
+
+export const AddTaskButton = ({
+  text,
+  variant = "default",
+  onClick,
+}: AddTaskButtonProps) => {
+  const isWeekly = variant === "weekly";
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "bg-timo-gray-300 rounded-4 flex items-center gap-1 py-1.5",
+        ADD_TASK_BUTTON_VARIANT[variant],
+      )}
+    >
+      <span className="flex size-5.5 shrink-0 items-center justify-center">
+        <PlusIcon />
+      </span>
+
+      <span
+        className={cn(
+          "text-timo-gray-700",
+          isWeekly ? "min-w-0 flex-1 truncate" : "shrink-0 whitespace-nowrap",
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};

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

@@ -3,6 +3,6 @@ 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 { AddTaskButton } from "@components/button/add-task-button/AddTaskButton";
 export { TodayBadge } from "@components/badge/today-badge/TodayBadge";
 export { PlayButton } from "@components/button/play-button/PlayButton";

packages/timo-design-system/src/components/tag/Tag.tsx

@@ -7,6 +7,7 @@ export interface TagProps {
 
 export const Tag = ({ text, variant = "default" }: TagProps) => {
   const isBlue = variant === "blue";
+
   return (
     <div
       className={`flex h-4 items-center justify-center rounded-[4px] px-[6.5px] ${

turbo/generators/config.ts

@@ -31,7 +31,7 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
         type: "append",
         path: "packages/timo-design-system/src/components/index.ts",
         template:
-          'export { {{pascalCase name}} } from "./{{kebabCase name}}/{{pascalCase name}}";',
+          'export { {{pascalCase name}} } from "@components/{{kebabCase name}}/{{pascalCase name}}";',
       },
     ],
   });