특정 단어에만 다른 스타일 적용

1. 우선 highlight가 표시 될 키워드를 따로 prop를 제공한다.

     <Slogan>
        <Title title="안녕하세요!" />
        <Title
          title="커리어 탐색이 리쿠르탐이에요"
          highlight="리쿠르탐"
          SubTitle="르쿠르탐에서 AI 커리어 추천을 받아보세요 🔥"
        />
      </Slogan>

2. 전체 문장에서 하이라이트 문자 추출

해당 문자열에 highlight 문자가 포함이 되어있으면

1) RegExp

(new RegExp(`(${highlight})`) highlight를 문자열에서 정규식 표현식으로 찾습니다.

2) Split

정규식 표현식에 따라 분할 시킵니다. title을 highlight 기준으로 나눠줍니다.

3) Map

split 메소드로 생성된 배열을 순회하면서 part와 highlight 키워드가 일치하면 css를 변경해줍니다.

const TitleBox = styled.div``;

const TitleContent = styled.div`
  margin-bottom: 10px;
  margin-right: 5px;
  font-size: ${fontSizes.xl};
  color: ${colors.gray[100]};
  font-weight: 700;
  letter-spacing: -0.48px;
`;

const SubTitleContent = styled.div`
  font-size: ${fontSizes.m};
  font-weight: 500;
  color: ${colors.gray[70]};
  letter-spacing: -0.32px;
`;

const Highlight = styled.span`
  color: ${colors.primary[600]};
`;

const Title: React.FC<TitleProps> = ({ title, highlight, SubTitle }) => {
  const parts = highlight
    ? title
        .split(new RegExp(`(${highlight})`))
        .map((part, index) => (part === highlight ? <Highlight key={index}>{part}</Highlight> : part))
    : [title];

  return (
    <TitleBox>
      <TitleContent>{parts}</TitleContent>
      <SubTitleContent> {SubTitle}</SubTitleContent>
    </TitleBox>
  );
};