Feat: 공통 Button 컴포넌트 구현

Feat: 공통 Button 컴포넌트 구현

Author: mungyun

components/Button.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode, ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  width?: string;
+  height?: string;
+  radius?: string;
+  color?: "positive" | "negative";
+  size?: string;
+}
+
+const Button = ({
+  children,
+  width = "auto",
+  height = "53px",
+  radius = "8px",
+  color = "positive",
+  size = "18px",
+  ...props
+}: ButtonProps) => {
+  const backgroundStyle =
+    color === "positive"
+      ? "linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%)"
+      : "#FF5B56";
+
+  return (
+    <button
+      style={{
+        width,
+        height,
+        borderRadius: radius,
+        background: backgroundStyle,
+        fontSize: size,
+      }}
+      className="flex justify-center items-center text-white font-[600] whitespace-nowrap hover:opacity-90"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

styles/globals.css

@@ -12,6 +12,7 @@
 
 :root {
   --background: #ffffff;
+  --white200: #f5f5f5;
   --black100: #000;
   --black200: #111322;
   --black300: #373740;

tailwind.config.ts

@@ -20,6 +20,7 @@ const config: Config = {
         gray400: "var(--gray400)",
         gray500: "var(--gray500)",
         purple100: "var(--purple100)",
+        white200: "var(--white200)",
       },
       screens: {
         sm: "375px",