배경색에 맞는 font color 적용

배경색 rgb 구하기 함수

const getTextColorByBackgroundColor = (hexColor: string) => {
      const colorToNumber = hexColor.substring(1); // 색상 앞의 # 제거
      const rgb = parseInt(colorToNumber, 16); // rrggbb를 10진수로 변환

      // eslint-disable-next-line no-bitwise
      const r = (rgb >> 16) & 0xff; // red 추출
      // eslint-disable-next-line no-bitwise
      const g = (rgb >> 8) & 0xff; // green 추출
      // eslint-disable-next-line no-bitwise
      const b = (rgb >> 0) & 0xff; // blue 추출
      const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
      // 색상 선택

      if (luma < 127.5) setTitleColor("white");
      else setTitleColor("black");
      // http://yoonbumtae.com/?p=2977 참고사이트
    };

styled component로 적용하기

const DetailTitleContainer = styled.div<{ backgroundColor: string }>`
  background-color: ${({ backgroundColor }) => backgroundColor};
`;

const DetailTitleText = styled.div<{ titleColor: string }>`
  h1 {
    color: ${({ titleColor }) => titleColor};
  }  
`;

return 문 작성

return (
    <DetailTitleContainer backgroundColor={backgroundColor}>
      <DetailTitleHeader>
        {field} {">"} {subCategory}
      </DetailTitleHeader>
      <DetailTitleText titleColor={titleColor}>
        <h1>{title}</h1>
        <h3>{subtitle}</h3>
      </DetailTitleText>
    </DetailTitleContainer>
  );