From cd957482c0ad8dca10b238938f39859a58789fa1 Mon Sep 17 00:00:00 2001
From: hanyugeon <hanyugeon@naver.com>
Date: Wed, 7 Aug 2024 00:26:51 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20StickyFooter=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/BottomActionButton.tsx  | 23 --------
 src/components/common/StickyFooter.tsx        | 44 +++++++++++++++
 .../common/BottomActionButton.stories.tsx     | 28 ----------
 src/stories/common/StickyFooter.stories.tsx   | 55 +++++++++++++++++++
 4 files changed, 99 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/common/BottomActionButton.tsx
 create mode 100644 src/components/common/StickyFooter.tsx
 delete mode 100644 src/stories/common/BottomActionButton.stories.tsx
 create mode 100644 src/stories/common/StickyFooter.stories.tsx

diff --git a/src/components/common/BottomActionButton.tsx b/src/components/common/BottomActionButton.tsx
deleted file mode 100644
index 1e5b3e5e..00000000
--- a/src/components/common/BottomActionButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-
-import Button from '@/components/common/Button';
-
-type BottomActionButtonProps = Omit<
-  ComponentPropsWithoutRef<typeof Button>,
-  'className'
->;
-
-const BottomActionButton = ({
-  children,
-  ...props
-}: BottomActionButtonProps) => {
-  return (
-    <footer className="fixed bottom-0 left-0 right-0 z-10 mx-auto w-full max-w-[43rem] bg-white px-[2.0rem] pb-[calc(env(safe-area-inset-bottom)+1.5rem)] pt-[1.5rem]">
-      <Button size="full" {...props}>
-        {children}
-      </Button>
-    </footer>
-  );
-};
-
-export default BottomActionButton;
diff --git a/src/components/common/StickyFooter.tsx b/src/components/common/StickyFooter.tsx
new file mode 100644
index 00000000..bdc6f9a1
--- /dev/null
+++ b/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;
diff --git a/src/stories/common/BottomActionButton.stories.tsx b/src/stories/common/BottomActionButton.stories.tsx
deleted file mode 100644
index cee9d753..00000000
--- a/src/stories/common/BottomActionButton.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import BottomActionButton from '@/components/common/BottomActionButton';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof BottomActionButton> = {
-  title: 'Common/BottomActionButton',
-  component: BottomActionButton,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BottomActionButton>;
-
-export const Default: Story = {
-  args: {},
-  render: () => (
-    <BottomActionButton onClick={() => alert('click!')}>
-      다음
-    </BottomActionButton>
-  ),
-};
diff --git a/src/stories/common/StickyFooter.stories.tsx b/src/stories/common/StickyFooter.stories.tsx
new file mode 100644
index 00000000..3ed9153c
--- /dev/null
+++ b/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>
+  ),
+};