✨나머지 버튼 style 추가

depromeet · Dec 13, 2023 · 0561bd9 · 0561bd9
1 parent ed3e8c8
commit 0561bd9
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/src/components/Button/Button.stories.ts → src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.ts → src/components/Button/Button.stories.tsx
@@ -16,6 +16,13 @@ const meta = {
       control: 'select',
     },
   },
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '327px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -53,3 +60,12 @@ export const GhostButton: Story = {
     children: 'Ghost Button',
   },
 };
+
+export const DisabledButton: Story = {
+  args: {
+    disabled: true,
+    size: 'large',
+    variant: 'cta',
+    children: 'Disabled Button',
+  },
+};
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -23,7 +23,7 @@ const buttonStyle = cva({
         background: 'gradients.button1',
         color: 'gray.gray100',
         '&:hover': {
-          background: 'gradients.button2',
+          // background: 'gradients.button2',
         },
         '&:pressed': {
           background: 'gradients.button2',
@@ -38,14 +38,52 @@ const buttonStyle = cva({
       primary: {
         backgroundColor: 'purple.purple800',
         color: 'gray.gray100',
+        '&:hover': {
+          // backgroundColor: 'purple.purple700',
+        },
+        '&:pressed': {
+          backgroundColor: 'purple.purple700',
+        },
+        '&:active': {
+          backgroundColor: 'purple.purple700',
+        },
+        '&:disabled': {
+          opacity: '0.4',
+        },
       },
       secondary: {
         backgroundColor: 'gray.gray200',
         color: 'text.secondary',
+        '&:hover': {
+          // backgroundColor: 'gray.gray100',
+        },
+        '&:pressed': {
+          backgroundColor: 'gray.gray100',
+        },
+        '&:active': {
+          backgroundColor: 'gray.gray100',
+        },
+        '&:disabled': {
+          opacity: '0.4',
+          backgroundColor: 'gray.gray100',
+          color: 'text.placeholder',
+        },
       },
       ghost: {
         backgroundColor: 'transparent',
         color: 'purple.purple500',
+        '&:hover': {
+          // color: 'purple.purple400',
+        },
+        '&:pressed': {
+          color: 'purple.purple400',
+        },
+        '&:active': {
+          color: 'purple.purple400',
+        },
+        '&:disabled': {
+          color: 'text.placeholder',
+        },
       },
     },
   },