feat: StickyFooter 작성

src/components/common/StickyFooter.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+type Direction = 'row' | 'column';
+
+type StickyFooterProps = {
+  children?: React.ReactNode;
+  direction?: Direction;
+  className?: string;
+};
+
+const getDirectionClass = (direction: Direction) => {
+  switch (direction) {
+    case 'row': {
+      return 'flex-row';
+    }
+    case 'column': {
+      return 'flex-col';
+    }
+  }
+};
+
+const BASE_STICKY_FOOTER_CLASSES =
+  'fixed bottom-0 left-0 right-0 z-10 mx-auto flex w-full max-w-[43rem] gap-[0.8rem] bg-white px-[2.0rem] pb-[calc(env(safe-area-inset-bottom)+1.5rem)] pt-[1.5rem]';
+
+const StickyFooter = ({
+  children,
+  direction = 'row',
+  className,
+}: StickyFooterProps) => {
+  const directionClass = useMemo(
+    () => getDirectionClass(direction),
+    [direction]
+  );
+
+  return (
+    <footer
+      className={`${BASE_STICKY_FOOTER_CLASSES} ${directionClass} ${className}`}
+    >
+      {children}
+    </footer>
+  );
+};
+
+export default StickyFooter;

src/stories/common/StickyFooter.stories.tsx

@@ -0,0 +1,55 @@
+import Button from '@/components/common/Button';
+import StickyFooter from '@/components/common/StickyFooter';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof StickyFooter> = {
+  title: 'Common/StickyFooter',
+  component: StickyFooter,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StickyFooter>;
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <StickyFooter>
+      <Button size="full" onClick={() => alert('click!')}>
+        다음
+      </Button>
+    </StickyFooter>
+  ),
+};
+
+export const Row: Story = {
+  args: { direction: 'row' },
+  render: args => (
+    <StickyFooter {...args}>
+      <Button size="full">1</Button>
+      <Button size="full" colorScheme="grey">
+        2
+      </Button>
+    </StickyFooter>
+  ),
+};
+
+export const Column: Story = {
+  args: { direction: 'column' },
+  render: args => (
+    <StickyFooter {...args}>
+      <Button size="full">1</Button>
+      <Button size="full" colorScheme="grey">
+        2
+      </Button>
+    </StickyFooter>
+  ),
+};