반응형

notion api에서 block으로 가져온 데이터를 가져오고 보니 block으로 객체형태로 오면서
type이나 color나 나뉘어서 와서 그걸 보고 색깔도 똑같이 할 수 있겠다 싶어서 따로 utils 파일로 빼서 작업을 해봤다

 

1. 컬러 매핑 함수

color-maaping.ts

// 색상 매핑 객체
const colorMap: { [key: string]: string } = {
  red: 'bg-custom-red dark:bg-custom-red-dark',
  orange: 'bg-custom-orange dark:bg-custom-orange-dark',
  // 원하는 부분 여기에 계속해서 추가
};

// 클래스 네임 설정 함수
export const getBgColorClassName = (color: string) => {
  return colorMap[color] || 'bg-custom-default dark:bg-custom-default-dark'; // 기본값 설정 가능
};

 

먼저 원하는 컬러명과 사용할 클래스를 적용해놓는다.

 

2. 컬러 매핑 함수 사용

tags.tsx

import { getBgColorClassName } from '@/utils/bg-color-mapping';
import classNames from 'classnames';

interface Props {
  tags: {
    id: string;
    name: string;
    color: string;
  }[];
  wrap: string;
}

const CommonTags = ({ tags, wrap }: Props) => {
  return (
    <div className={wrap}>
      {tags.map(aTag => (
        <h6
          className={classNames(
            'px-2 py-1 rounded-md w-30',
            getBgColorClassName(aTag.color), // 동적 클래스 설정
          )}
          key={aTag.id}
        >
          {aTag.name}
        </h6>
      ))}
    </div>
  );
};

export default CommonTags;

 

클래스를 중복으로 사용할 수 있는 classnames를 사용해서 해당 함수를 사용한다.

 

3. tailwind.config 추가 ( 중요! )

tailwind에 custom한 함수가 사용할 수 있게끔 선언해야한다

클래스는 적용이 됐는데 css가 적용이 되지 않아서 여기서 찾는데 꽤 걸렸는데 그 이유는 다음과 같다
tailwind CSS JIT 모드에서 특정 클래스를 항상 생성하고 싶다면 safelist를 사용해야 한다.

이는 코드에서 해당 클래스가 실제로 사용되지 않더라도 생성되도록 보장하기 때문이다.

반면에 colors 설정은 색상 팔레트를 정의하지만, 이를 사용한 클래스가 실제로 사용되지 않으면 해당 클래스가 생성되지 않는다.

따라서, 동적으로 클래스가 사용되는 경우 safelist를 사용하여 필요한 클래스를 보장하는 것이 중요

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        'custom-red': 'rgb(255, 226, 221)',
        'custom-red-dark': 'rgb(110, 54, 48)',
        // 여기에 원하는 컬러 추가
      },
    },
  },
  safelist: [
    'bg-custom-red',
    'dark:bg-custom-red-dark',
    // 여기에 원하는 전체 클래스명 추가
  ],
  plugins: [],
};

 

반응형