tailwind 사용시 동적 styling 고민

태그

Done

날짜

Oct 25, 2023

공통 컴포넌트를 tailwind로 만들면서 동적으로 props를 받아 style을 하고 싶은데, tailwind에서는 어려운 것 같습니다.

공통 컴포넌트에 대한 style을 할 때는 어떤 방식으로 하는 것이 좋을까요?

예를 들어, Button에 대한 컴포넌트를 만든다고 했을 때, 현재 구현해 본 방법은 다음과 같습니다.


// Button.tsx
import type { ReactNode } from "react";

export const buttonsConfig = {
  create: "w-165 h-50 bg-st-primary",
  lg: "w-200 h-80 bg-st-red",
  sm: {
    white: "w-115 h-40 bg-white",
    blue: "w-115 h-40 bg-st-primary",
    red: "w-115 h-40 bg-st-red",
    green: "w-115 h-40 bg-st-green",
  },
  sm2: "w-130 h-40 bg-st-primary",
  sm3: "w-160 h-40 bg-st-primary",
  md: "w-130 h-50 bg-st-red",
  modal: {
    white: "w-130 h-55 bg-white",
    blue: "w-130 h-55 bg-st-primary",
    red: "w-130 h-55 bg-st-red",
    green: "w-130 h-55 bg-st-green",
  },
};

interface buttonProps {
  children: ReactNode;
  buttonStyles: string;
}

const Button = ({ children, buttonStyles }: buttonProps) => {
  return (
    <button className={`${buttonStyles}  rounded-15 shadow-md`}>
      {children}
    </button>
  );
};

export default Button;


// Button 컴포넌트 사용
import Button, { buttonsConfig } from "@/components/_common/Button";

const Home = () => {
  return (
    <main>
      <div>This is Main</div>
      <Button buttonStyles={buttonsConfig.create}>스테디 등록</Button>
      <Button buttonStyles={buttonsConfig.md}>스테디 등록</Button>
      <Button buttonStyles={buttonsConfig.sm.green}>스테디 등록</Button>
      <Button buttonStyles={buttonsConfig.sm2}>스테디 등록</Button>
      <h1 className="text-3xl font-bold underline">Hello, Steady!</h1>
    </main>
  );
};

export default Home;

관리가 어려워진다.

→ 설정들을 판정하는 부분(width, height등)을 분리해서 만든다.

tailwind 자체 테마가 있다.

switch, case문 이용