From ea70e80d38799a15a1929a5cc14407414c55d577 Mon Sep 17 00:00:00 2001
From: sangrae <tiger030205@gmail.com>
Date: Sat, 1 Nov 2025 22:35:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EA=B3=B5=ED=86=B5?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.tsx | 56 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/Button.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..b6c1707
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'white';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  width?: string | number;
+  height?: string | number;
+  fontSize?: string | number;
+  padding?: string;
+  children: ReactNode;
+}
+
+const VARIANT_MAP: Record<ButtonVariant, string> = {
+  primary: 'bg-primary text-white hover:bg-yellow-400 disabled:bg-yellow-200',
+  secondary:
+    'bg-secondary text-white hover:bg-neutral-700 disabled:bg-neutral-300',
+  success: 'bg-success text-white hover:bg-lime-600 disabled:bg-lime-200',
+  warning: 'bg-warning text-white hover:bg-orange-400 disabled:bg-orange-300',
+  danger: 'bg-danger text-white hover:bg-red-700 disabled:bg-red-300',
+  white: 'bg-white text-secondary hover:text-neutral-400',
+};
+
+export default function Button({
+  variant = 'primary',
+  width,
+  height,
+  fontSize,
+  padding = '12px 24px',
+  children,
+  className = '',
+  ...rest
+}: ButtonProps) {
+  const inlineStyle: React.CSSProperties = {
+    width,
+    height,
+    fontSize,
+    padding,
+  };
+
+  return (
+    <button
+      style={inlineStyle}
+      className={`inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-150 ${VARIANT_MAP[variant]} ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}