[NextJS] Notion API - 컬러 맵핑

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: [],
};