[FEAT] DeleteButton 컴포넌트 추가

packages/timo-design-system/src/components/button/delete-button/DeleteButton.stories.tsx

@@ -0,0 +1,26 @@
+import { DeleteButton } from "./DeleteButton";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/DeleteButton",
+  component: DeleteButton,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light-gray",
+      values: [
+        { name: "light-gray", value: "#F5F5F5" },
+        { name: "dark", value: "#333333" },
+        { name: "white", value: "#FFFFFF" },
+      ],
+    },
+  },
+} satisfies Meta<typeof DeleteButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { onClick: () => {} },
+};

packages/timo-design-system/src/components/button/delete-button/DeleteButton.tsx

@@ -0,0 +1,22 @@
+import { TrashOnIcon } from "@icons";
+import { cn } from "@lib";
+
+export interface DeleteButtonProps {
+  onClick: () => void;
+}
+
+export const DeleteButton = ({ onClick }: DeleteButtonProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "typo-headline-r-14 text-timo-black flex h-8.25 w-20 items-center gap-0.5 rounded-[4px] bg-white p-1.5",
+        "active:bg-timo-blue-300 active:text-white active:[&_path]:fill-white",
+      )}
+    >
+      <TrashOnIcon className="size-4.5 shrink-0" />
+      삭제하기
+    </button>
+  );
+};

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

@@ -4,4 +4,5 @@ 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 { DeleteButton } from "@components/button/delete-button/DeleteButton";
 export { TodayBadge } from "@components/badge/today-badge/TodayBadge";

packages/timo-design-system/src/components/layout/scrollbar/Scrollbar.stories.tsx

@@ -12,8 +12,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="flex w-[340px] flex-col gap-6">
-      <div className="border-timo-gray-500 h-[200px] overflow-y-auto rounded-lg border p-4">
+    <div className="flex w-80 flex-col gap-6">
+      <div className="border-timo-gray-500 h-50 overflow-y-auto rounded-lg border p-4">
         {Array.from({ length: 20 }, (_, i) => (
           <p key={i} className="text-timo-gray-900 py-1 text-sm">
             아이템 {i + 1}
@@ -22,11 +22,11 @@ export const Default: Story = {
       </div>
 
       <div className="border-timo-gray-500 overflow-x-auto rounded-lg border p-4">
-        <div className="flex w-[800px] gap-3">
+        <div className="flex w-80 gap-3">
           {Array.from({ length: 12 }, (_, i) => (
             <div
               key={i}
-              className="bg-timo-gray-300 text-timo-gray-900 flex h-[60px] w-[100px] shrink-0 items-center justify-center rounded-lg text-sm"
+              className="bg-timo-gray-300 text-timo-gray-900 flex h-15 w-25 shrink-0 items-center justify-center rounded-lg text-sm"
             >
               아이템 {i + 1}
             </div>