docs/shared 폴더 생성

src/app/design-system/page.tsx

@@ -1,3 +1,5 @@
+import Button from '@/shared/components/Button';
+
 function Page() {
   return (
     <div className="p-6 space-y-6">
@@ -33,7 +35,11 @@ function Page() {
 
         <div className="space-y-2">
           <h3 className="text-xl font-medium border-b pb-1">Button</h3>
-          {/* 여기 컴포넌트 삽입 */}
+          <Button>버튼</Button>
+          <Button variant="purple" size="sm">
+            Button
+          </Button>
+          <Button variant="disable">button</Button>
         </div>
       </div>
 

src/app/layout.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
-import '../styles/global.css';
-
+import '@/shared/styles/global.css';
 export const metadata: Metadata = {
   title: 'SSOUL',
   description: '칵테일을 좋아하는 사람들을 위한 서비스',

src/shared/components/Button.tsx

@@ -0,0 +1,28 @@
+import { ButtonHTMLAttributes, Ref } from 'react';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'default' | 'sm';
+  variant?: 'default' | 'purple' | 'disable';
+  children: string;
+  ref?: Ref<HTMLButtonElement | null>;
+}
+
+const SIZE = {
+  default: 'py-1 px-2 h-10 rounded-lg text-base font-bold min-w-25 cursor-pointer flex-center',
+  sm: 'py-1 px-2 rounded-lg text-base font-bold min-w-20 cursor-pointer flex-center',
+};
+
+const VARIANT = {
+  default: 'bg-secondary',
+  purple: 'bg-tertiary text-bold text-secondary',
+  disable: 'bg-gray',
+};
+
+function Button({ size = 'default', variant = 'default', children, ref, ...rest }: Props) {
+  return (
+    <button className={`${SIZE[size]} ${VARIANT[variant]}`} {...rest} ref={ref}>
+      {children}
+    </button>
+  );
+}
+export default Button;