feat: base button 컴포넌트 추가, button, icon button 컴포넌트 수정

Author: sikkzz

src/components/ui/BaseButton/BaseButton.module.scss

@@ -0,0 +1,10 @@
+@use "@/styles/mixins" as *;
+
+.BaseButton {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  border-radius: 0.875rem;
+  width: 100%;
+  height: 3.25rem;
+}

src/components/ui/BaseButton/BaseButton.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import styles from "@/components/ui/BaseButton/BaseButton.module.scss";
+import type { BaseButtonProps } from "@/components/ui/BaseButton/BaseButton.types";
+
+const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
+  ({ className, children, type = "button", ...props }, ref) => {
+    return (
+      <button className={classNames(styles.BaseButton, className)} ref={ref} type={type} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+
+export default BaseButton;

src/components/ui/BaseButton/BaseButton.types.ts

@@ -0,0 +1,6 @@
+export interface ButtonOwnProps {
+  as?: React.ElementType;
+  text?: string;
+}
+
+export type BaseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

src/components/ui/Button/Button.module.scss

@@ -1,14 +1,6 @@
 @use "@/styles/mixins" as *;
 
 .Button {
-  cursor: pointer;
-  margin: 0;
-  border: none;
-  border-radius: 0.875rem;
-  padding: 0.875rem;
-  width: 100%;
-  height: 3.25rem;
-
   &.style-primary {
     background-color: var(--color-text01);
     color: var(--color-white);

src/components/ui/Button/Button.tsx

@@ -1,20 +1,37 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import classNames from "classnames";
 
+import BaseButton from "@/components/ui/BaseButton/BaseButton";
 import styles from "@/components/ui/Button/Button.module.scss";
 import type { ButtonProps } from "@/components/ui/Button/Button.types";
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "primary", text, ...props }, ref) => {
+  (
+    { as = BaseButton, className, variant = "primary", text, disabled = false, onClick, ...props },
+    ref,
+  ) => {
+    const Comp = as as typeof BaseButton;
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!disabled) {
+          onClick?.(e);
+        }
+      },
+      [onClick, disabled],
+    );
+
     return (
-      <button
-        className={classNames(styles.Button, styles[`style-${variant}`], className)}
+      <Comp
         ref={ref}
+        className={classNames(styles.Button, styles[`style-${variant}`], className)}
+        disabled={disabled}
+        onClick={handleClick}
         {...props}
       >
         {text}
-      </button>
+      </Comp>
     );
   },
 );

src/components/ui/Button/Button.types.ts

@@ -1,7 +1,7 @@
-export type ButtonVariant = "primary" | "secondary" | "disabled";
+import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types";
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  type?: "button" | "submit";
-  text?: string;
+type ButtonVariant = "primary" | "secondary" | "disabled";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonOwnProps {
   variant?: ButtonVariant;
 }

src/components/ui/IconButton/IconButton.module.scss

@@ -1,20 +1,12 @@
 @use "@/styles/mixins" as *;
 
 .IconButton {
-  cursor: pointer;
-  margin: 0;
-  border: none;
-  border-radius: 0.875rem;
-  padding: 0.875rem;
-  width: 100%;
-
   display: flex;
   justify-content: center;
   align-items: center;
 
   &.size-md {
     gap: 0.375rem;
-    height: 3.25rem;
     background-color: var(--color-gray400);
     color: var(--color-white);
     @include buttonSecondary;

src/components/ui/IconButton/IconButton.tsx

@@ -1,22 +1,48 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import classNames from "classnames";
 
+import BaseButton from "@/components/ui/BaseButton/BaseButton";
 import Icon from "@/components/ui/Icon/Icon";
 import styles from "@/components/ui/IconButton/IconButton.module.scss";
 import type { IconButtonProps } from "@/components/ui/IconButton/IconButton.types";
 
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ className, size = "md", text, iconName, ...props }, ref) => {
+  (
+    {
+      as = BaseButton,
+      className,
+      size = "md",
+      disabled = false,
+      onClick,
+      text,
+      iconName,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = as as typeof BaseButton;
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!disabled) {
+          onClick?.(e);
+        }
+      },
+      [onClick, disabled],
+    );
+
     return (
-      <button
-        className={classNames(styles.IconButton, styles[`size-${size}`], className)}
+      <Comp
         ref={ref}
+        className={classNames(styles.IconButton, styles[`size-${size}`], className)}
+        disabled={disabled}
+        onClick={handleClick}
         {...props}
       >
         <Icon name={iconName} />
         {text}
-      </button>
+      </Comp>
     );
   },
 );

src/components/ui/IconButton/IconButton.types.ts

@@ -1,10 +1,11 @@
+import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types";
 import type { IconNameType } from "@/components/ui/Icon/Icon";
 
-export type IconButtonSize = "md" | "sm";
+type IconButtonSize = "md" | "sm";
 
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  type?: "button" | "submit";
-  text?: string;
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ButtonOwnProps {
   size?: IconButtonSize;
   iconName: IconNameType;
 }