Merge pull request #34 from prgrms-web-devcourse-final-project/feat/button#32

[style] 버튼 공통 컴포넌트 #32

Author: mtm-git1018

package-lock.json

@@ -18,6 +18,7 @@
     ]
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
     "gsap": "^3.13.0",
     "next": "15.5.3",
     "react": "19.1.0",

package.json

@@ -1,6 +1,7 @@
 'use client';
 
-import Button from '@/shared/components/Button';
+import Button from '@/shared/components/button/Button';
+import TextButton from '@/shared/components/button/TextButton';
 import ConfirmPop from '@/shared/components/ModalPop/ConfirmPop';
 import ModalLayout from '@/shared/components/ModalPop/ModalLayout';
 import { useState } from 'react';
@@ -43,11 +44,23 @@ 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 type="button">버튼</Button>
+          <Button color="purple" type="button">
             Button
           </Button>
-          <Button variant="disable">button</Button>
+          <Button disabled>button</Button>
+          <Button type="button" size="sm">
+            버튼
+          </Button>
+          <Button type="button" size="sm" color="purple">
+            버튼
+          </Button>
+          <Button size="sm" disabled>
+            버튼
+          </Button>
+
+          <TextButton>텍스트 버튼</TextButton>
+          <TextButton size="sm">텍스트 버튼</TextButton>
         </div>
       </div>
 

src/app/design-system/page.tsx

@@ -0,0 +1,4 @@
+function index() {
+  return <button>버튼</button>;
+}
+export default index;

src/components/index.tsx

@@ -0,0 +1,65 @@
+import tw from '@/shared/utills/tw';
+import { cva } from 'class-variance-authority';
+import { ButtonHTMLAttributes, Ref } from 'react';
+
+// 버튼속성을 다 받을 수 있게
+// 클래스네임, 기본적인건 다 props로 받을 수 있게
+// 버튼 보여질 경우 arial hidden을 넣고 아이콘의경우 aria-label넣는다
+// 속성값에 disabled넣었을때 알어서 바뀔수 있게 할 수 있게 수정하기.
+// Ref가 잘 되는지 확인해보기
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'default' | 'sm';
+  color?: 'default' | 'purple';
+  ref?: Ref<HTMLButtonElement | null>;
+  disable?: boolean;
+  type?: 'submit' | 'button';
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const ButtonClass = cva(
+  `
+  py-1 px-2 rounded-lg text-base font-bold flex-center text-bold text-navy duration-300 disabled:bg-gray disabled:cursor-not-allowed disabled:text-primary
+  `,
+  {
+    variants: {
+      color: {
+        default: 'bg-secondary text-navy enabled:hover:inset-shadow-black',
+        purple: 'bg-tertiary text-secondary enabled:hover:inset-shadow-white',
+      },
+      size: {
+        default: 'h-10, min-w-25',
+        sm: 'h-8 min-w-20',
+      },
+    },
+    defaultVariants: {
+      color: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  size,
+  type = 'button',
+  color,
+  children,
+  className,
+  ref,
+  disabled,
+  ...rest
+}: Props) {
+  return (
+    <button
+      className={tw(ButtonClass({ color, size, className }))}
+      type={type}
+      ref={ref}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+export default Button;

src/shared/components/Button.tsx

@@ -0,0 +1,31 @@
+import { Ref } from 'react';
+
+interface Props {
+  size?: 'default' | 'sm';
+  type?: 'button' | 'submit';
+  ref?: Ref<HTMLButtonElement | null>;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const SIZE = {
+  default: 'text-base flex flex-col justfy-center',
+  sm: 'text-sm flex flex-col justfy-center',
+};
+
+function TextButton({
+  type = 'button',
+  children,
+  className,
+  ref,
+  size = 'default',
+  ...rest
+}: Props) {
+  return (
+    <button className={`${SIZE[size]} ${className}`} type={type} ref={ref} {...rest}>
+      {children}
+      <div className="h-[1px] w-100% bg-white"></div>
+    </button>
+  );
+}
+export default TextButton;

src/shared/components/button/Button.tsx

@@ -13,5 +13,10 @@
   --color-white: #ffffff;
   --color-black: #0f172a;
   --color-bg-pop: #3d3d3d;
+  --color-navy:#1f2544;
   --font-serif: 'Hahmlet', serif;
+
+--inset-shadow-black: inset 0 2px 6px rgba(0, 0, 0, 0.3);
+--inset-shadow-white: inset 0 0 8px rgba(255, 255, 255, 0.4);
+
 }

src/shared/components/button/TextButton.tsx

@@ -12,5 +12,7 @@
   'NanumSquareNeo',sans-serif;
   line-height: 1.5;
   font-weight: 500;
+  color:#fff;
+  background-color: var(--color-primary)
 }