Merge pull request #56 from 0ne6yte/feature/button-renewal

feat: Button style variant, color로 분기

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 flex-1 p-[13px] ${buttonStyle[color][variant]}`}
       disabled={disabled}
       type={type}
       onClick={onClick}

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 w-[800px] flex-wrap">
+      <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 w-[800px] flex-wrap">
+      <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 w-[800px] flex-wrap">
+      <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>
+  ),
+};

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>