💅 style: bookingButton 컴포넌트 구현 및 스토리북 추가 #15

src/components/core/Button/BookingButton/BookingButton.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import BookingButton from "./BookingButton";
+
+const meta: Meta<typeof BookingButton> = {
+  title: "Core/Button/BookingButton",
+  component: BookingButton,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BookingUnavailable: Story = {
+  args: {
+    scrabCount: 210,
+    disabled: true,
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ width: "400px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const BookingAvailable: Story = {
+  args: { scrabCount: 210, disabled: false },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ width: "400px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const isScrabed: Story = {
+  args: { scrabCount: 210, disabled: false, isScrabed: true },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ width: "400px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

src/components/core/Button/BookingButton/BookingButton.tsx

@@ -0,0 +1,48 @@
+import { FC } from "react";
+
+import { ScrapIcon } from "@/components/icons";
+import { cn } from "@/utils/cn";
+
+import BasicButton from "../BasicButton/BasicButton";
+
+interface Props {
+  label?: string;
+  className?: string;
+  isScrabed?: boolean;
+  scrabCount?: number;
+  disabled?: boolean;
+}
+
+const BookingButton: FC<Props> = ({
+  className,
+  label = "예매하기",
+  isScrabed = false,
+  scrabCount = 0,
+  disabled = true,
+}) => {
+  return (
+    <div
+      className={cn(
+        "w-full h-[98px] p-[24px]",
+        "flex justify-between items-center gap-[11px]",
+        "border-[1px] border-gray-scale-100",
+        "bg-gray-scale-0",
+        className,
+      )}
+    >
+      <BasicButton type="button" label={label} disabled={disabled} />
+      <button className="flex flex-col items-center">
+        <ScrapIcon
+          width={30}
+          height={30}
+          className={isScrabed ? "text-gray-scale-700" : "text-gray-scale-200"}
+        />
+        <span className="h-auto w-auto text-caption1-medium text-gray-700">
+          {scrabCount}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default BookingButton;