문제점 & 원인

프로젝트 내에서 태그와 아바타의 fallback UI에 특정 색상을 지정해야 하는 상황에서, 제공된 API로 색상 코드를 별도로 관리할 수 없는 이슈를 해결하기 위해 고민을 해보았습니다.

해결방법

모든 글자는 유니코드라는 숫자 값을 가지고 있기 때문에, 이를 활용해 색상을 지정하는 방법을 생각해냈습니다.

export type HexColor = `#${string}`;
export const DEFAULT_COLORS: HexColor[] = ['#7AC555', '#760DDE', '#FFA500', '#76A5EA', '#E876EA'];

export function getColorByString(value: string, colorArray: string[]) {
  const charCode = value.toLowerCase().charCodeAt(0);
  const index = charCode % colorArray.length;
  return colorArray[index];
}

export default function TagChip({ label, className, ...props }: TagChipProps) {
  const colorCode = getColorByString(label, DEFAULT_COLORS);

  return (
    <span
      className={cn('...', className)}
      style={{ color: colorCode, backgroundColor: `${colorCode}${BACKGROUND_ALPHA}` }}
      {...props}
    >
      {label}
    </span>
  );
}

태그나 이메일의 첫 글자를 가져와 유니코드로 변환하고, 그 값을 미리 설정한 색상 배열의 길이로 나눈 나머지를 배열의 인덱스로 활용했습니다.

이렇게 하면 유니코드 값이 특정 색상 배열의 인덱스 범위 내로 매핑되도록 할 수 있고,

이로 인해 각 글자에 고유한 색을 일관되게 지정할 수 있게 되었습니다.