feat: 페이지 하단 공통 버튼 구현

.storybook/preview.tsx

@@ -1,4 +1,7 @@
 import type { Preview } from '@storybook/react';
+import '../src/styles/fonts.css';
+import '../src/styles/global.css';
+import '../src/styles/reset.css';
 
 const preview: Preview = {
   parameters: {

src/components/common/Button/pageBottom/pageBottomBtn.css.ts

@@ -0,0 +1,33 @@
+import theme from '@styles/theme.css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const bottomBtnStyle = recipe({
+  base: {
+    ...theme.FONTS.h5Sb16,
+    color: theme.COLORS.white,
+    borderRadius: 8,
+    height: '5.2rem',
+  },
+  variants: {
+    size: {
+      small: {
+        width: '23.6rem',
+      },
+      large: {
+        width: '33.5rem',
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: theme.COLORS.gray5,
+        cursor: 'not-allowed',
+      },
+      false: {
+        backgroundColor: theme.COLORS.primary400,
+        cursor: 'pointer',
+      },
+    },
+  },
+});
+
+export default bottomBtnStyle;

src/components/common/Button/pageBottom/pageBottomBtn.tsx

@@ -0,0 +1,23 @@
+import bottomBtnStyle from './pageBottomBtn.css';
+
+interface PageBottomBtnProps {
+  btnText: string;
+  size: 'small' | 'large';
+  disabled: boolean;
+  onClick: () => void;
+}
+
+const PageBottomBtn = ({ btnText, size, disabled, onClick }: PageBottomBtnProps) => {
+  const className = bottomBtnStyle({
+    size,
+    disabled,
+  });
+
+  return (
+    <button className={className} onClick={disabled ? undefined : onClick}>
+      {btnText}
+    </button>
+  );
+};
+
+export default PageBottomBtn;

src/stories/pageBottomBtn.stories.ts

@@ -0,0 +1,79 @@
+import PageBottomBtn from '@components/common/Button/pageBottom/pageBottomBtn';
+import type { Meta, StoryObj } from '@storybook/react';
+
+interface PageBottomBtnProps {
+  btnText: string;
+  size: 'small' | 'large';
+  disabled: boolean;
+  onClick: () => void;
+}
+
+const meta: Meta<typeof PageBottomBtn> = {
+  title: 'Common/PageBottomBtn', // 스토리북에서 표시될 경로
+  component: PageBottomBtn,
+  parameters: {
+    layout: 'centered', // 컴포넌트를 가운데 정렬
+  },
+  argTypes: {
+    btnText: {
+      control: { type: 'text' },
+      description: 'The text displayed on the button',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'large'],
+      description: 'The size of the button',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Indicates whether the button is disabled',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'The function triggered when the button is clicked',
+    },
+  },
+  args: {
+    btnText: 'Click Me',
+    size: 'large',
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PageBottomBtnProps>;
+
+export const Default: Story = {};
+
+export const LargeEnabled: Story = {
+  args: {
+    btnText: '절로가 시작하기',
+    size: 'large',
+    disabled: false,
+  },
+};
+
+export const SmallEnabled: Story = {
+  args: {
+    btnText: '예약하기',
+    size: 'small',
+    disabled: false,
+  },
+};
+
+export const LargeDisabled: Story = {
+  args: {
+    btnText: '다음',
+    size: 'large',
+    disabled: true,
+  },
+};
+
+export const SmallDisabled: Story = {
+  args: {
+    btnText: '예약하기',
+    size: 'small',
+    disabled: true,
+  },
+};