From ec6f41af1041f2b14a46a3fbbaea0ea4e6a23114 Mon Sep 17 00:00:00 2001
From: JayoonKim <jayoon999@gmail.com>
Date: Tue, 30 Jan 2024 16:12:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20StandadButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../standardButton/StandardButton.stories.tsx | 29 +++++++++++++++++++
 .../common/standardButton/StandardButton.tsx  | 25 ++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/components/common/standardButton/StandardButton.stories.tsx
 create mode 100644 src/components/common/standardButton/StandardButton.tsx

diff --git a/src/components/common/standardButton/StandardButton.stories.tsx b/src/components/common/standardButton/StandardButton.stories.tsx
new file mode 100644
index 0000000..33d912b
--- /dev/null
+++ b/src/components/common/standardButton/StandardButton.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import StandardButton from './StandardButton'
+
+const meta: Meta<typeof StandardButton> = {
+  component: StandardButton,
+  tags: ['autodocs'],
+  title: 'components/StandardButton',
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    state: {
+      control: 'select',
+      options: ['disabled', 'enabled']
+    },
+    style: {
+      control: 'select',
+      options: ['outlined', 'filled']
+    }
+  }
+}
+export default meta
+type Story = StoryObj<typeof StandardButton>
+
+export const Default: Story = {
+  render: (args) => (
+    <StandardButton label={args.label} state={args.state} style={args.style} />
+  )
+}
diff --git a/src/components/common/standardButton/StandardButton.tsx b/src/components/common/standardButton/StandardButton.tsx
new file mode 100644
index 0000000..641b64a
--- /dev/null
+++ b/src/components/common/standardButton/StandardButton.tsx
@@ -0,0 +1,25 @@
+interface StandardButtonProps {
+  label: string
+  state: 'disabled' | 'enabled'
+  style: 'outlined' | 'filled'
+}
+const StandardButton = ({ label, state, style }: StandardButtonProps) => {
+  return (
+    <div
+      className={`rounded-[8px] cursor-pointer flex justify-center items-center font-medium border border-1 w-full h-full px-[0px] py-[10px] ${
+        state === 'enabled'
+          ? // enabled
+            style === 'filled'
+            ? 'bg-green-50 text-white-0 border-green-50'
+            : 'bg-transparent text-green-50 border-green-50'
+          : // disabled
+          style === 'filled'
+          ? 'bg-gray-10 text-gray-50 border-gray-50'
+          : 'bg-transparent text-gray-40 border-gray-40'
+      }`}>
+      {label}
+    </div>
+  )
+}
+
+export default StandardButton