From 413dfc4764cb927b8a227325e0ad097a223c6d90 Mon Sep 17 00:00:00 2001
From: yeynii <yeynii@github.com>
Date: Sat, 14 Oct 2023 17:47:17 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20button=20style=20variant,=20color?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domain/_common/components/Button.tsx | 26 +++++---
 src/stories/Button.stories.ts            | 34 ----------
 src/stories/Button.stories.tsx           | 81 ++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 42 deletions(-)
 delete mode 100644 src/stories/Button.stories.ts
 create mode 100644 src/stories/Button.stories.tsx

diff --git a/src/domain/_common/components/Button.tsx b/src/domain/_common/components/Button.tsx
index 55c7d75..41954f7 100644
--- a/src/domain/_common/components/Button.tsx
+++ b/src/domain/_common/components/Button.tsx
@@ -2,30 +2,40 @@ import React, { type ReactNode } from 'react';
 
 interface ButtonProps {
   disabled?: boolean;
-  variant: 'normal' | 'text' | 'primary' | 'large';
+  variant?: 'text' | 'contained';
+  color?: 'grey' | 'primary' | 'red';
   type?: 'button' | 'submit';
   onClick?: () => void;
   children?: ReactNode;
 }
 
 const buttonStyle = {
-  text: 'text-grey-buttontext active:bg-grey-background disabled:text-grey-whitegray disabled:bg-opacity-0',
-  normal:
-    'text-grey-buttontext bg-grey-background active:bg-grey-placeholder disabled:text-grey-whitegray disabled:bg-grey-background',
-  primary: 'text-white bg-primary-default active:bg-primary-touch disabled:bg-primary-disabled',
-  large: 'text-white bg-red-default w-full min-w-[336px] h-11 active:bg-red-touch disabled:bg-red-disabled',
+  grey: {
+    text: 'text-grey-buttontext active:bg-grey-buttontext active:bg-opacity-10 disabled:text-grey-placeholder disabled:bg-transparent',
+    contained:
+      'text-grey-buttontext bg-grey-background active:bg-grey-placeholder disabled:text-grey-placeholder disabled:bg-grey-whitegray',
+  },
+  primary: {
+    text: 'text-primary-default active:bg-primary-default active:bg-opacity-10 disabled:text-primary-disabled disabled:bg-transparent',
+    contained: 'text-white bg-primary-default active:bg-primary-touch disabled:bg-primary-disabled',
+  },
+  red: {
+    text: 'text-red-default active:bg-red-default active:bg-opacity-10 disabled:text-red-disabled disabled:bg-transparent',
+    contained: 'text-white bg-red-default active:bg-red-touch disabled:bg-red-disabled',
+  },
 };
 
 export function Button({
-  variant,
   disabled = false,
+  variant = 'text',
+  color = 'grey',
   onClick,
   children,
   type = 'submit',
 }: React.PropsWithChildren<ButtonProps>) {
   return (
     <button
-      className={`border-none rounded-lg text-sm font-bold w-40 h-11 ${buttonStyle[variant]}`}
+      className={`border-none rounded-lg text-sm font-bold w-40 h-11 ${buttonStyle[color][variant]}`}
       disabled={disabled}
       type={type}
       onClick={onClick}
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
deleted file mode 100644
index 5a9e07a..0000000
--- a/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@/domain/_common/components';
-
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/KHvd0JBcID35sOdr61Iief/Main?type=design&node-id=558-293&mode=design&t=lrfbeqjL6cPdTJqE-4',
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DefaultText: Story = {
-  args: {
-    children: '뒤로 가기',
-    variant: 'text',
-  },
-};
-
-export const DisabledText: Story = {
-  args: {
-    children: '뒤로 가기',
-    disabled: true,
-    variant: 'text',
-  },
-};
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
new file mode 100644
index 0000000..9221237
--- /dev/null
+++ b/src/stories/Button.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/domain/_common/components';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/KHvd0JBcID35sOdr61Iief/Main?type=design&node-id=558-293&mode=design&t=lrfbeqjL6cPdTJqE-4',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: 'default',
+  },
+};
+export const Grey: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Button variant="text" color="grey">
+        text
+      </Button>
+      <Button variant="text" color="grey" disabled>
+        text
+      </Button>
+      <Button variant="contained" color="grey">
+        contained
+      </Button>
+      <Button variant="contained" color="grey" disabled>
+        contained
+      </Button>
+    </div>
+  ),
+};
+
+export const Primary: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Button variant="text" color="primary">
+        text
+      </Button>
+      <Button variant="text" color="primary" disabled>
+        text
+      </Button>
+      <Button variant="contained" color="primary">
+        contained
+      </Button>
+      <Button variant="contained" color="primary" disabled>
+        contained
+      </Button>
+    </div>
+  ),
+};
+
+export const Red: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Button variant="text" color="red">
+        text
+      </Button>
+      <Button variant="text" color="red" disabled>
+        text
+      </Button>
+      <Button variant="contained" color="red">
+        contained
+      </Button>
+      <Button variant="contained" color="red" disabled>
+        contained
+      </Button>
+    </div>
+  ),
+};

From 7018f9b4436728e8f548433ae901bd0bf297bf91 Mon Sep 17 00:00:00 2001
From: yeynii <yeynii@github.com>
Date: Sat, 14 Oct 2023 17:55:57 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20button=20size=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domain/_common/components/Button.tsx | 2 +-
 src/stories/Button.stories.tsx           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/domain/_common/components/Button.tsx b/src/domain/_common/components/Button.tsx
index 41954f7..761dea6 100644
--- a/src/domain/_common/components/Button.tsx
+++ b/src/domain/_common/components/Button.tsx
@@ -35,7 +35,7 @@ export function Button({
 }: React.PropsWithChildren<ButtonProps>) {
   return (
     <button
-      className={`border-none rounded-lg text-sm font-bold w-40 h-11 ${buttonStyle[color][variant]}`}
+      className={`border-none rounded-lg text-sm font-bold flex-1 p-[13px] ${buttonStyle[color][variant]}`}
       disabled={disabled}
       type={type}
       onClick={onClick}
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 9221237..e8388e8 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -25,7 +25,7 @@ export const Default: Story = {
 };
 export const Grey: Story = {
   render: () => (
-    <div className="flex gap-2">
+    <div className="flex gap-2 w-[800px] flex-wrap">
       <Button variant="text" color="grey">
         text
       </Button>
@@ -44,7 +44,7 @@ export const Grey: Story = {
 
 export const Primary: Story = {
   render: () => (
-    <div className="flex gap-2">
+    <div className="flex gap-2 w-[800px] flex-wrap">
       <Button variant="text" color="primary">
         text
       </Button>
@@ -63,7 +63,7 @@ export const Primary: Story = {
 
 export const Red: Story = {
   render: () => (
-    <div className="flex gap-2">
+    <div className="flex gap-2 w-[800px] flex-wrap">
       <Button variant="text" color="red">
         text
       </Button>

From bdc2d884a6b7fa796cd633266721ba64ec3f8dff Mon Sep 17 00:00:00 2001
From: yeynii <yeynii@github.com>
Date: Sat, 14 Oct 2023 18:04:29 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20button=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=9C=20=EC=99=B8=EB=B6=80=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EC=97=90=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/Dropdown.stories.tsx  | 2 +-
 src/stories/TextInput.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stories/Dropdown.stories.tsx b/src/stories/Dropdown.stories.tsx
index eb82fc4..a38e29b 100644
--- a/src/stories/Dropdown.stories.tsx
+++ b/src/stories/Dropdown.stories.tsx
@@ -21,7 +21,7 @@ export const Default: Story = {
       <div className="relative">
         <Dropdown>
           <Dropdown.Trigger>
-            <Button isDisabled={false} type="text" onClick={() => {}}>
+            <Button variant="text" onClick={() => {}}>
               버튼
             </Button>
           </Dropdown.Trigger>
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 68f1291..c201424 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -51,7 +51,7 @@ export const Error: Story = {
     return (
       <form onSubmit={onSubmit}>
         <TextInput name="value1" label="Error" control={control} />
-        <Button variant="primary" onClick={onSubmit}>
+        <Button variant="contained" color="primary" onClick={onSubmit}>
           submit
         </Button>
       </form>