fix(fe): 커스텀 폰트 크기 토큰이 cn()에서 삭제돼 텍스트가 커지던 회귀 해결

[seongbin9786]

바텀 탭 라벨을 비롯한 여러 화면의 텍스트가 의도한 크기보다 커져 보이던 문제를 해결한다. 실제로 바텀 탭 라벨은 11px가 아니라 상속값 16px로 렌더되고 있었다.

원인

#117에서 text-[11px] 같은 임의값을 styles.css @theme의 커스텀 font-size 토큰(--text-caption/label/body)으로 바꿨는데, cn()이 쓰는 기본 tailwind-merge는 이 토큰들을 폰트 크기로 인식하지 못한다. 값 없는 text-* 패턴이라 텍스트 색상으로 분류해 버린다.

그 결과 cn()에서 text-foreground·text-muted-foreground 같은 색상 클래스와 함께 쓰면 서로 충돌한다고 보고 크기 토큰을 삭제한다. 크기 클래스를 잃은 요소는 상속 크기(대개 16px)로 부풀어 오른다.

cn("text-caption font-bold text-muted-foreground")  →  "font-bold text-muted-foreground"   // text-caption 삭제

구버전 text-[11px]은 임의 길이값이라 tailwind-merge가 폰트 크기로 올바르게 인식해 삭제되지 않았다. 즉 #117의 "렌더가 이전과 픽셀 동일" 전제는 cn()으로 색상과 함께 쓰는 경우 성립하지 않았다.

확인된 영향 지점(cn()으로 색상과 병합되는 곳):

• 바텀 탭 라벨(StackTabBar) — 모든 화면
• TagChip(관계 태그, size 변형이 text-label/caption, surface 변형이 색상) — 사람·프로필·타임라인·설정 전반
• EmptyState 제목(text-body + 색상) — 빈 상태 화면 전반
• people 탭 마지막 만남 라벨, 타임라인 차트 기간 메뉴 등

플레인 문자열(className="...", cn() 미경유)로 쓴 곳은 색상과 병합되지 않아 영향이 없다.

해결

cn의 tailwind-merge를 extendTailwindMerge로 확장해 세 토큰을 font-size 그룹에 명시 등록한다. 이러면 색상과 공존해도 삭제되지 않고, 다른 폰트 크기와는 정상적으로 병합(뒤가 이김)된다. 손댄 파일은 frontend/src/lib/utils.ts 한 개다.

styles.css의 --text-* 목록과 토큰 이름을 동기화해야 하며, 그 취지는 코드 주석으로 남겼다.

검증

• 실제 utils.ts의 cn을 import해 확인:
  • cn("text-caption font-bold text-muted-foreground") → text-caption 유지
  • cn("text-label font-bold text-foreground") → text-label 유지
  • cn("text-body font-extrabold text-foreground") → text-body 유지
  • cn("text-caption text-sm") → text-sm (폰트 크기끼리 뒤가 이김)
• pnpm run typecheck 통과
• eslint src/lib/utils.ts 통과

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mongle	Ready	Preview, Comment	Jul 20, 2026 11:59am