Main: 반응형 이미지를 위한 source, picture

[choigirang]

• webp 호환성 문제로 인해 태그 변경 시키기

export default function Card(props: SkillCardProps) {
  const { src, txt, bedge, color } = props;
  const { scrollToPage } = useMoveScroll();

  return (
    <Container onClick={() => scrollToPage(bedge)}>
      <Img src={`${src}.webp`} alt={`${src}-img`} />
      <Text sx={{ '.bedge': { backgroundColor: color } }}>
        <span className="bedge">{bedge}</span>
        <span className="main-txt">{txt}</span>
      </Text>
    </Container>
  );
}