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: [],
};
'React' 카테고리의 다른 글
[NextJS] 링크 정보 숨겨서 query값만 받아오기 (0) | 2024.06.28 |
---|---|
[NextJS] Notion API - 기간 맵핑 (0) | 2024.06.26 |
[Portfolio] Notion API를 이용해 NextJS로 포트폴리오 만들기 (0) | 2024.06.26 |
[React] useState 배열의 객체 수정 (0) | 2023.12.28 |
[React] useState 입력 값을 이용하여 배열 렌더링 (0) | 2023.12.27 |
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: [],
};
'React' 카테고리의 다른 글
[NextJS] 링크 정보 숨겨서 query값만 받아오기 (0) | 2024.06.28 |
---|---|
[NextJS] Notion API - 기간 맵핑 (0) | 2024.06.26 |
[Portfolio] Notion API를 이용해 NextJS로 포트폴리오 만들기 (0) | 2024.06.26 |
[React] useState 배열의 객체 수정 (0) | 2023.12.28 |
[React] useState 입력 값을 이용하여 배열 렌더링 (0) | 2023.12.27 |