TIL - 2024/06/19

왜 만들려고 하는가?

나만무 프로젝트하기 전에 1주일간 게시판 구현 과제를 하면서 오랜만에 React(Next.js) 코드를 써보았는데, 확실히 항상 짜던 방식으로 짜는 것이 느껴졌고, 짧은 기간이지만 그래도 하나라도 더 새로운 방식을 해보고 있었다.

그중에 tailwind로 스타일 코드를 짜면서 작은 게시판이지만 많은 버튼이 있는 것을 보고, 우리가 부트스트랩이나, MUI와 같이 재사용할 수 있는 컴포넌트를 만들어두면 생산성이 많이 올라갈 것이라고 생각했다.

당연한 얘기지만 Ctrl + C, V로 빠르게 반복적으로 같은 컴포넌트를 찍어낼 수 있지만 재사용가능하고, 확장성이 면에서는 컴포넌트를 통해 핸들링 하는 것이 더 바람직한 방법이라고 생각했다.

// 버튼 타입 지정 ( 크기: size, 타입: type )
type Variant = "default" | "primary" | "warning";
type Size = "fit" | "full";

// 버튼 Props 지정
interface ButtonStyleProps {
  variant?: Variant;
  size?: Size;
}

interface ButtonComponentProps extends ButtonStyleProps {
  children: React.ReactNode;
  onClick?: () => void;
}

// 타입에 따른 스타일 지정
const buttonColor = {
  default: "bg-[#a2a2a2] hover:bg-[#909090] active:bg-[#c8c8c8]",
  primary: "bg-[#307eec] hover:bg-[#1261e0] active:bg-[#4c90ff]",
  warning: "bg-[#ff6254] hover:bg-[#ff7f74] active:bg-[#ff6522]",
};

// 타입에 따른 버튼 스타일 연산
const BTN_BASE =
  "flex justify-center items-center py-2 rounded-xl text-white font-bold text-mg";

const buttonClassName = ({
  variant = "default",
  size = "fit",
}: ButtonStyleProps) => {
  const colorStyle = buttonColor[variant];
  const sizeStyle = size == "fit" ? "w-content px-4" : "w-full";

  return `${BTN_BASE} ${colorStyle} ${sizeStyle}`;
};

// 버튼 Return
export default function Button({
  children,
  onClick,
  ...styleProps
}: ButtonComponentProps) {
  return (
    <button
      type="button"
      className={`${buttonClassName({ ...styleProps })}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Reference

재사용 가능한 버튼 컴포넌트 만들기 - React

재사용 가능한 버튼 컴포넌트 만들기 (TypeScript, Emotion)