refactor: disabled 상태와 variantClass 코드 개선

Author: almighty55555

src/components/Button.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 
-type ButtonVariant = "primary" | "white" | "disabled";
+type ButtonVariant = "primary" | "white";
 type ButtonTextSize = "lg" | "md" | "sm";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   textSize?: ButtonTextSize;
   fullWidth?: boolean;
+  disabled?: boolean;
 }
 
 const textSizeClassMap: Record<ButtonTextSize, string> = {
@@ -15,28 +16,26 @@ const textSizeClassMap: Record<ButtonTextSize, string> = {
   sm: "text-xs font-normal leading-4",
 };
 
+const variantClassMap: Record<ButtonVariant, string> = {
+  primary: "bg-[#EA3C12] text-white hover:bg-[#ca3f2a] active:bg-[#aa3523]",
+  white:
+    "bg-white text-[#EA3C12] border border-[#EA3C12] hover:bg-[#fff5f3] active:bg-[#ffe5e0]",
+};
+
+const disabledClass = "bg-gray-40 text-white cursor-not-allowed";
+
 export default function Button({
   variant = "primary",
   textSize = "md",
   fullWidth = false,
+  disabled = false,
   className,
   children,
   ...props
 }: ButtonProps) {
   const baseClasses = "rounded-md";
-
-  let variantClass = "";
-  if (variant === "primary") {
-    variantClass =
-      "bg-[#EA3C12] text-white hover:bg-[#ca3f2a] active:bg-[#aa3523]";
-  } else if (variant === "white") {
-    variantClass =
-      "bg-white text-[#EA3C12] border border-[#EA3C12] hover:bg-[#fff5f3] active:bg-[#ffe5e0]";
-  } else if (variant === "disabled") {
-    variantClass = "bg-gray-40 text-white cursor-not-allowed";
-  }
-
   const fullWidthClass = fullWidth ? "w-full" : "";
+  const variantClass = disabled ? disabledClass : variantClassMap[variant];
   const textSizeClass = textSizeClassMap[textSize];
 
   const finalClassName = [
@@ -50,11 +49,7 @@ export default function Button({
     .join(" ");
 
   return (
-    <button
-      className={finalClassName}
-      disabled={variant === "disabled" || props.disabled}
-      {...props}
-    >
+    <button className={finalClassName} disabled={disabled} {...props}>
       {children}
     </button>
   );