[design] 공통 Button 컴포넌트 생성 - 기본 버튼

src/app/layout.tsx

@@ -3,8 +3,8 @@ import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import ViewportAdjuster from '@/components/common/ViewportAdjuster'
 import '@/styles/globals.css'
-import Header from '@/components/common/layout/Header'
-import Footer from '@/components/common/layout/Footer'
+import Header from '@/components/layout/Header'
+import Footer from '@/components/layout/Footer'
 
 export const metadata: Metadata = {
   title: '지혜 | Ji-hye',

src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import Pagination from '@/components/common/pagination/Pagination'
 import BreakpointTest from '@/components/design-system/BreakpointTest'
+import ButtonTest from '@/components/design-system/ButtonTest'
 import ColorPalette from '@/components/design-system/ColorPalette'
 import TypoSystem from '@/components/design-system/TypoSystem'
 import { useState } from 'react'
@@ -24,12 +25,16 @@ export default function Home() {
       <ColorPalette />
 
       <TypoSystem />
+
+      <ButtonTest />
+
       <Pagination
         currentPage={currentPage}
         totalPages={totlepages}
         onPageChange={setCurrentPage}
         limit={limit}
       />
+
     </div>
   )
 }

src/components/common/button/Button.tsx

@@ -0,0 +1,55 @@
+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(
+  'w-full inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none outline-none cursor-pointer',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-primary text-white hover:bg-primary-hover disabled:bg-disabled-fill disabled:text-assistive',
+        secondary:
+          'bg-secondary text-white hover:bg-secondary-hover disabled:bg-disabled-fill disabled:text-assistive',
+        tertiary:
+          'bg-tertiary text-secondary hover:bg-tertiary-hover disabled:bg-disabled-fill disabled:text-assistive',
+        outline:
+          'bg-white text-secondary border border-secondary hover:bg-outline-hover hover:text-white disabled:border-alter-line disabled:text-disabled',
+      },
+      size: {
+        sm: 'p-1 typo-caption2 rounded-sm gap-0.5',
+        md: 'px-3.5 py-3 typo-button1 rounded-md gap-1.5',
+        lg: 'px-4 py-3.5 typo-h3 rounded-md gap-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'secondary',
+      size: 'lg',
+    },
+  },
+)
+
+const Button = ({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) => {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button }

src/components/design-system/ButtonTest.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Button } from '../common/Button/Button'
+
+const ButtonTest = () => {
+  const variants = ['primary', 'secondary', 'tertiary', 'outline']
+  const sizes = ['lg', 'md', 'sm']
+  return (
+    <section className="space-y-8">
+      <h2 className="typo-h2 mb-4">기본 버튼</h2>
+      {variants.map((variant) => (
+        <div key={variant} className="space-y-2">
+          <p className="typo-h3">{variant}</p>
+          <div className="grid grid-cols-6 gap-2 items-start">
+            {sizes.map((s) => (
+              <>
+                <Button variant={variant} size={s}>
+                  버튼입니다
+                </Button>
+                <Button variant={variant} size={s} disabled>
+                  버튼입니다
+                </Button>
+              </>
+            ))}
+          </div>
+        </div>
+      ))}
+    </section>
+  )
+}
+
+export default ButtonTest

tailwind.config.ts

@@ -19,66 +19,6 @@ export default {
         lg: '80rem',
       },
     },
-    extend: {
-      colors: {
-        // Primitive Colors - Grayscale
-        gray: {
-          50: 'var(--color-gray-50)',
-          100: 'var(--color-gray-100)',
-          200: 'var(--color-gray-200)',
-          300: 'var(--color-gray-300)',
-          400: 'var(--color-gray-400)',
-          500: 'var(--color-gray-500)',
-          600: 'var(--color-gray-600)',
-          700: 'var(--color-gray-700)',
-          800: 'var(--color-gray-800)',
-          900: 'var(--color-gray-900)',
-          950: 'var(--color-gray-950)',
-        },
-        // Primitive Colors - Orangescale
-        orange: {
-          50: 'var(--color-orange-50)',
-          100: 'var(--color-orange-100)',
-          200: 'var(--color-orange-200)',
-          300: 'var(--color-orange-300)',
-          400: 'var(--color-orange-400)',
-          500: 'var(--color-orange-500)',
-          600: 'var(--color-orange-600)',
-          700: 'var(--color-orange-700)',
-          800: 'var(--color-orange-800)',
-          900: 'var(--color-orange-900)',
-        },
-        // Semantic Colors - Brand
-        primary: 'var(--color-primary)',
-        secondary: 'var(--color-secondary)',
-        tertiary: 'var(--color-tertiary)',
-        white: 'var(--color-white)',
-
-        // Semantic Colors - Status
-        error: 'var(--color-error)',
-        success: 'var(--color-success)',
-        warning: 'var(--color-warning)',
-        positive: 'var(--color-positive)',
-
-        // Semantic Colors - Text
-        text: {
-          normal: 'var(--color-normal)',
-          alternative: 'var(--color-alternative)',
-          assistive: 'var(--color-assistive)',
-          disable: 'var(--color-disable)',
-        },
-
-        // Border Colors
-        border: 'var(--color-border)',
-        'border-alter': 'var(--color-border-alter)',
-        'border-assist': 'var(--color-border-assist)',
-      },
-      borderRadius: {
-        lg: 'var(--radius-lg)',
-        md: 'var(--radius-md)',
-        sm: 'var(--radius-sm)',
-      },
-    },
   },
   plugins: [tailwindAnimate],
 } satisfies Config