🏆 목표

<aside> 💡 TailwindCSS와 Next.js를 이용해서 UI 요소를 만들던 중 개발자 모드에서는 제대로 적용된 것이 식별되었음에도 실제로는 적용이 안된 UI가 발생하였다. 이 문제를 해결해보자.

</aside>

<button class="h-14 w-14 rounded-full border border-black-900 bg-black text-white" data-value="free">FREE</button>

📖 해결 과정

import getButtonBaseStyles, {
  ButtonBaseStyles,
} from "@/utils/func/getButtonStyles";
import clsx from "clsx";
import { MouseEvent } from "react";

interface ButtonProps {
  text: string;
  value?: string;
  isFocused?: boolean;
  style?: ButtonBaseStyles;
  onClickHandler?: (event: MouseEvent<HTMLButtonElement>) => void;
}
const Button = ({
  text,
  value,
  isFocused,
  style = "rounded",
  onClickHandler,
}: ButtonProps) => {
  const baseStyle = getButtonBaseStyles(style);
  console.log(clsx(baseStyle, isFocused ? "bg-black text-white" : ""));
  return (
    <button
      className={clsx(baseStyle, isFocused ? "bg-black text-white" : "")}
      onClick={onClickHandler}
      data-value={value}
    >
      {text}
    </button>
  );
};

export default Button;

• 현재 문제가 발생한 Button component로 문제가 있음으로 예상되는 부분을 순차적으로 찾아보자

[예상 문제 발생 구간]

1. baseStyle에서 적용되는 style이 문제가 되고있다.
2. 해당 스타일이 동적으로 switch문을 통해서 return되는 값인데 그 중에서 일부 스타일만 적용이 되지 않고 있다(w-14, h-14, border-black)
3. 스타일을 적용하는 tailwind.config.ts 파일에 uitls를 추가해보자

import type { Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";
import tailwindcssAnimated from "tailwindcss-animated"; // require 대체

export default {
  content: [
    "./src/utils/**/*.{js,ts,jsx,tsx,mdx}",
    ...
  ],
  ...
} satisfies Config;

🎙️ 시도

• console.log()를 통해서 baseStyle이 제대로 return이 되는지를 확인했지만 문제 없었다.( undefined, null 아님 제대로 값 넘어 옴)