From 5788004d365be44aaee82e04cc4fb260d695721a Mon Sep 17 00:00:00 2001 From: Seongbin Kim Date: Mon, 20 Jul 2026 20:58:37 +0900 Subject: [PATCH] =?UTF-8?q?fix(fe):=20cn()=EC=97=90=EC=84=9C=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=8F=B0=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=EC=9D=B4=20=EC=82=AD=EC=A0=9C=EB=90=98?= =?UTF-8?q?=EB=8D=98=20=ED=9A=8C=EA=B7=80=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit styles.css @theme의 --text-caption/label/body는 값이 있는 커스텀 font-size 토큰인데, 기본 tailwind-merge는 이를 폰트 크기로 인식하지 못해 텍스트 색상으로 분류한다. 그래서 cn()에서 text-foreground·text-muted-foreground 같은 색상과 함께 쓰면 서로 충돌한다고 보고 크기 토큰을 삭제해, 해당 요소가 폰트 크기 클래스를 잃고 상속 크기(16px 등)로 부풀어 올랐다. 바텀 탭 라벨, TagChip, EmptyState 제목 등 cn()에 색상과 함께 태우는 곳 전반에서 발생했다. extendTailwindMerge로 세 토큰을 font-size 그룹에 명시 등록해, 색상과 공존해도 삭제되지 않고 다른 폰트 크기와는 올바르게 병합되도록 한다. styles.css의 --text-* 목록과 동기화가 필요하다. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/lib/utils.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index 31e8033..5e6cb94 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -1,6 +1,16 @@ import { clsx } from 'clsx' import type { ClassValue } from 'clsx' -import { twMerge } from 'tailwind-merge' +import { extendTailwindMerge } from 'tailwind-merge' + +// styles.css @theme 의 커스텀 font-size 토큰. 기본 tailwind-merge 는 값이 없는 text-* +// 를 색상으로 보고, cn() 에서 text-foreground 같은 색상과 함께 쓰면 폰트 크기 토큰을 +// 충돌로 지워 버린다(→ 상속 크기로 부풂). font-size 그룹에 명시 등록해 병합에서 살린다. +// styles.css 의 --text-* 목록과 동기화해야 한다. +const twMerge = extendTailwindMerge({ + extend: { + classGroups: { 'font-size': [{ text: ['caption', 'label', 'body'] }] }, + }, +}) export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs))