htlee
5812d9dea3
- cn() 유틸 신규 (clsx + tailwind-merge, 시맨틱 토큰 classGroup 등록) - theme.css @layer utilities로 직접 정의 (Tailwind v4 복합 이름 매핑 실패 대응): text-heading/label/hint/on-vivid/on-bright, bg-surface-raised/overlay - badgeVariants (CVA) 재구축: 8 intent x 4 size, rem 기반, !important 제거 - Badge 컴포넌트가 cn(badgeVariants, className)로 override 허용 - DataTable width 의미 변경: 고정 -> 선호 최소 너비 (minWidth), truncate + title 툴팁 - dateFormat.ts sv-SE 로케일로 YYYY-MM-DD HH:mm:ss 일관된 KST 출력 - ColorPicker 신규 (팔레트 + native color + hex 입력) - shared/constants/ 19개 카탈로그: violation/alert/event/enforcement/patrol/ engine/userRole/device/parentResolution/modelDeployment/gearGroup/darkVessel/ httpStatus/userAccount/loginResult/permission/vesselAnalysis/connection/trainingZone + kpiUiMap. 백엔드 enum/code_master 기반 SSOT - i18n ko/en common.json에 카테고리 섹션 추가 - adminApi.fetchRoles()가 updateRoleColorCache 자동 호출 - 공통 컴포넌트 (ExcelExport/NotificationBanner/Pagination/SaveButton) 시맨틱 토큰 적용
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
/**
|
|
* className 병합 유틸 — tailwind-merge로 충돌 자동 해결.
|
|
*
|
|
* cva()의 base class와 컴포넌트 className prop을 합칠 때 사용.
|
|
* 같은 그룹(text color, padding, bg 등) 클래스가 여러 개면 마지막 것만 적용.
|
|
*
|
|
* 사용 예:
|
|
* cn(badgeVariants({ intent }), className)
|
|
* → className에서 들어오는 text-red-400이 base의 text-on-bright을 override (마지막 우선)
|
|
*
|
|
* 시맨틱 토큰 (text-on-vivid, text-on-bright, text-heading 등)을 tailwind-merge가
|
|
* text-color 그룹으로 인식하도록 extendTailwindMerge로 확장.
|
|
*/
|
|
|
|
import { extendTailwindMerge } from 'tailwind-merge';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
|
|
const twMerge = extendTailwindMerge({
|
|
extend: {
|
|
classGroups: {
|
|
// 프로젝트 시맨틱 텍스트 색상 (theme.css 정의) — text-* 그룹 충돌 해결
|
|
'text-color': [
|
|
'text-heading',
|
|
'text-label',
|
|
'text-hint',
|
|
'text-on-vivid',
|
|
'text-on-bright',
|
|
],
|
|
},
|
|
},
|
|
});
|
|
|
|
export function cn(...inputs: ClassValue[]): string {
|
|
return twMerge(clsx(inputs));
|
|
}
|