feat: button 컴포넌트 생성

app/globals.css

@@ -16,7 +16,7 @@
     --color-neutral-70: #3b414e;
     --color-neutral-80: #252931;
     --color-neutral-90: #161a1d;
-    --color-neutral-100: #0b0c0f;
+    --color-neutral-95: #0b0c0f;
 
     --color-primary-5: #eff6ff;
     --color-primary-10: #dbeafe;

app/page.tsx

@@ -1,13 +1,20 @@
-import React from 'react';
 import AuthHandler from '@/components/AuthHandler';
 import HomeMain from '@/components/Home/HomeMain';
 import HeaderNav from '@/components/Header/HeaderNav';
+import { Button } from '@/components/ui/button';
+
 export default function HomePage() {
   return (
     <>
       <HeaderNav />
       <HomeMain />
       <AuthHandler />
+      <Button variant="default" size="default" enabled={true}>
+        Enabled Button
+      </Button>
+      <Button variant="default" size="default" enabled={false}>
+        Disabled Button
+      </Button>
     </>
   );
 }

components/ui/button.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary-40 text-neutral-0 hover:bg-primary-30',
+        destructive:
+          'bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90',
+        outline:
+          'border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50',
+        secondary:
+          'bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80',
+        ghost:
+          'hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50',
+        link: 'text-slate-900 underline-offset-4 hover:underline dark:text-slate-50',
+      },
+      size: {
+        default: 'h-10 px-5 py-4 rounded-4 text-[19px]',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+      state: {
+        enabled: 'opacity-100 pointer-events-auto ',
+        disabled: 'opacity-50 pointer-events-none bg-neutral-7 text-neutral-20 ',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'default',
+        class:
+          'active:bg-primary-50 active:text-neutral-0 active:justify-center active:items-center active:gap-10 active:rounded-lg active:flex-shrink-0',
+      },
+      {
+        variant: 'default',
+        class: ':not(:disabled):bg-neutral-7',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      state: 'enabled',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  enabled?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, enabled = true, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(
+          buttonVariants({ variant, size, state: enabled ? 'enabled' : 'disabled', className }),
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
     "class-variance-authority": "^0.7.0",

tailwind.config.ts

@@ -21,6 +21,7 @@ const config: Config = {
         neutral: {
           '0': 'var(--color-neutral-0)',
           '5': 'var(--color-neutral-5)',
+          '7': 'var(--color-neutral-7)',
           '10': 'var(--color-neutral-10)',
           '20': 'var(--color-neutral-20)',
           '30': 'var(--color-neutral-30)',
@@ -30,7 +31,7 @@ const config: Config = {
           '70': 'var(--color-neutral-70)',
           '80': 'var(--color-neutral-80)',
           '90': 'var(--color-neutral-90)',
-          '100': 'var(--color-neutral-100)',
+          '95': 'var(--color-neutral-95)',
         },
         primary: {
           '5': 'var(--color-primary-5)',