[style]TextButton컴포넌트

Author: mtm-git1018

src/app/design-system/page.tsx

@@ -1,5 +1,5 @@
 import Button from '@/shared/components/button/Button';
-
+import TextButton from '@/shared/components/button/TextButton';
 
 function Page() {
   return (
@@ -36,11 +36,15 @@ function Page() {
 
         <div className="space-y-2">
           <h3 className="text-xl font-medium border-b pb-1">Button</h3>
-          <Button type='button'>버튼</Button>
-          <Button variant="purple" type='button'>
+          <Button type="button">버튼</Button>
+          <Button variant="purple" type="button">
             Button
           </Button>
-          <Button type='button' disabled={true} variant="disable">button</Button>
+          <Button type="button" disabled={true} variant="disable">
+            button
+          </Button>
+          <TextButton>텍스트 버튼</TextButton>
+          <TextButton size="sm">텍스트 버튼</TextButton>
         </div>
       </div>
 

src/shared/components/button/Button.tsx

@@ -14,9 +14,8 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const SIZE = {
-  default:
-    'py-1 px-2 h-10 rounded-lg text-base font-bold min-w-25 flex-center',
-  sm:'py-1 px-2 rounded-lg text-base font-bold min-w-20 flex-center',
+  default: 'py-1 px-2 h-10 rounded-lg text-base font-bold min-w-25 flex-center',
+  sm: 'py-1 px-2 rounded-lg text-base font-bold min-w-20 flex-center',
 };
 
 const VARIANT = {
@@ -27,15 +26,22 @@ const VARIANT = {
 
 function Button({
   size = 'default',
-  type = 'submit',
+  type = 'button',
   disabled = false,
   variant = 'default',
   children,
   className,
   ref,
-  ...rest }: Props) {
+  ...rest
+}: Props) {
   return (
-    <button className={`${SIZE[size]} ${VARIANT[variant]} ${className}`} type={type} disabled={disabled} {...rest} ref={ref}>
+    <button
+      className={`${SIZE[size]} ${VARIANT[variant]} ${className}`}
+      type={type}
+      disabled={disabled}
+      {...rest}
+      ref={ref}
+    >
       {children}
     </button>
   );

src/shared/components/button/TextButton.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;