refactor(#49): disabled 상태 스타일 정의를 variant에서 base의 selectors로 변경

Author: wkdtnqls0506

src/components/ui/Button/Button.css.ts

@@ -10,6 +10,17 @@ export const button = recipe({
     fontWeight: 600,
     transition: "background-color 0.2s ease",
     whiteSpace: "nowrap",
+
+    selectors: {
+      "&:disabled": {
+        backgroundColor: colors.coolNeutral[96],
+        color: colors.neutral[70],
+        cursor: "not-allowed",
+      },
+      "&:disabled:hover": {
+        backgroundColor: colors.coolNeutral[96],
+      },
+    },
   },
   variants: {
     variant: {
@@ -28,11 +39,6 @@ export const button = recipe({
         backgroundColor: colors.coolNeutral[99],
         ":hover": { backgroundColor: colors.coolNeutral[97] },
       },
-      disabled: {
-        backgroundColor: colors.coolNeutral[96],
-        color: colors.neutral[70],
-        cursor: "not-allowed",
-      },
     },
     size: {
       small: {

src/components/ui/Button/Button.stories.tsx

@@ -21,6 +21,9 @@ const meta: Meta<typeof Button> = {
       control: "select",
       options: ["small", "medium", "large", "fullWidth"],
     },
+    disabled: {
+      control: "boolean",
+    },
     onClick: { action: "clicked" },
   },
 };
@@ -50,14 +53,6 @@ export const Assistive: Story = {
   },
 };
 
-export const Disabled: Story = {
-  args: {
-    variant: "disabled",
-    size: "medium",
-    disabled: true,
-  },
-};
-
 export const Sizes: Story = {
   render: args => (
     <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>

src/components/ui/Button/Button.tsx

@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef } from "react";
 
 import { button } from "./Button.css";
 
-type ButtonVariant = "primary" | "dark" | "assistive" | "disabled";
+type ButtonVariant = "primary" | "dark" | "assistive";
 type ButtonSize = "small" | "medium" | "large" | "fullWidth";
 
 type ButtonProps = {