feat: Button disabled style 추가

src/stories/base/Button.stories.tsx

@@ -59,6 +59,22 @@ export const Kakao: Story = {
   render: args => <Button {...args}>버튼</Button>,
 };
 
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: args => (
+    <div className="flex gap-[0.5rem]">
+      <Button {...args} fill={true}>
+        버튼
+      </Button>
+      <Button {...args} fill={false}>
+        버튼
+      </Button>
+    </div>
+  ),
+};
+
 export const RecentSearch: Story = {
   args: {
     ...MainLight.args,

src/v1/base/Button.tsx

@@ -33,7 +33,20 @@ const getSizeClasses = (size: Size) => {
   }
 };
 
-const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
+const getSchemeClasses = (
+  theme: ColorScheme,
+  isFill: boolean,
+  disabled?: boolean
+) => {
+  if (disabled) {
+    return (
+      'cursor-default ' +
+      (isFill
+        ? 'border-transparent bg-black-900/[0.12] text-black-900/[0.26]'
+        : 'border-black-900/[0.12] bg-white text-black-900/[0.26]')
+    );
+  }
+
   switch (theme) {
     case 'main': {
       return isFill
@@ -68,21 +81,23 @@ const Button = ({
   fill = true,
   fullRadius = false,
   className,
+  disabled,
   children,
   ...props
 }: ButtonProps) => {
   const computedClasses = useMemo(() => {
     const sizeClass = getSizeClasses(size);
-    const schemeClass = getSchemeClasses(colorScheme, fill);
+    const schemeClass = getSchemeClasses(colorScheme, fill, disabled);
     const roundedClass = fullRadius ? 'rounded-full' : 'rounded-[5px]';
 
     return [sizeClass, schemeClass, roundedClass].join(' ');
-  }, [size, colorScheme, fill, fullRadius]);
+  }, [size, colorScheme, fill, fullRadius, disabled]);
 
   return (
     <button
       type="button"
-      className={`${BASE_BUTTON_CLASSES} ${computedClasses} ` + className}
+      className={`${BASE_BUTTON_CLASSES} ${computedClasses} ${className}`}
+      disabled={disabled}
       {...props}
     >
       {children}