All files / src/lib utils.ts

100% Statements 76/76
100% Branches 1/1
100% Functions 1/1
100% Lines 76/76

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 771x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1152x 1152x  
// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';
 
// 대표 typography 클래스 (size, line-height, letter-spacing 포함)
const baseTypographyClasses = [
  'display-lg',
  'display-md',
  'display-sm',
  'display-xs',
  'text-xl',
  'text-lg',
  'text-md',
  'text-sm',
  'text-xs',
  'text-2xs',
];
 
// weight 변형 클래스 (위 속성 + font-weight 포함)
const weightTypographyClasses = [
  'display-lg-regular',
  'display-lg-medium',
  'display-lg-semibold',
  'display-lg-bold',
  'display-md-regular',
  'display-md-medium',
  'display-md-semibold',
  'display-md-bold',
  'display-sm-regular',
  'display-sm-medium',
  'display-sm-semibold',
  'display-sm-bold',
  'display-xs-regular',
  'display-xs-medium',
  'display-xs-semibold',
  'display-xs-bold',
  'text-xl-regular',
  'text-xl-medium',
  'text-xl-semibold',
  'text-xl-bold',
  'text-lg-regular',
  'text-lg-medium',
  'text-lg-semibold',
  'text-lg-bold',
  'text-md-regular',
  'text-md-medium',
  'text-md-semibold',
  'text-md-bold',
  'text-sm-regular',
  'text-sm-medium',
  'text-sm-semibold',
  'text-sm-bold',
  'text-xs-regular',
  'text-xs-medium',
  'text-xs-semibold',
  'text-xs-bold',
  'text-2xs-regular',
  'text-2xs-medium',
  'text-2xs-semibold',
  'text-2xs-bold',
];
 
// 모든 typography 클래스
const allTypographyClasses = [...baseTypographyClasses, ...weightTypographyClasses];
 
const customTwMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [{ text: allTypographyClasses }],
    },
  },
});
 
export const cn = (...inputs: ClassValue[]) => {
  return customTwMerge(clsx(inputs));
};