문제 상황

• 이미지가 아래 그림처럼 나와야 정상임

• npm run dev로 실행했을 때는 정상으로 이미지가 잘 나왔음
  

• 하지만 빌드를 하고 npm run preview를 하면 아래 캡쳐와 같이 원하는 이미지가 나오지 않음

• 개발자 도구에서 css를 확인해 보니 미디어 쿼리에 적용해놓은 코드 라인들이 보이지 않음
  

문제 해결을 위한 시도

1. 문제가 되는 모바일 상태의 이미지들만 svg에서 png로 교체함

• 정상적으로 빌드가 됨
  

2. background-img 대신 picture 태그 이용하기

• 이미지가 svg임에도 불구하고 정상적으로 빌드가 됨
• picture 태그

//중략
  return (
    <Link to={path}>
      <AnimatedPicture $isSidebarOpenNarrow={isSidebarOpenNarrow}>
        <picture>
          <source media="(max-width: 767px)" srcSet={image.mobile.src} />
          <source media="(max-width: 1199px)" srcSet={image.tablet.src} />
          {isSidebarOpenNarrow ? (
            <source media="(min-width: 1024px)" srcSet={image.desktopNarrow.src} />
          ) : (
            <source media="(min-width: 1024px)" srcSet={image.desktopWide.src} />
          )}
          <img
            src={image.desktopWide.src}
            alt={image.desktopWide.alt}
            onClick={onClick}
            aria-label={image.desktopWide.alt}
          />
        </picture>
      </AnimatedPicture>
    </Link>
  );
}
//중략

질문하고 싶은 것

• 개발 모드에서는 정상적으로 작동하던 코드가 build를 하고 나면 왜 버그가 생기는지 모르겠습니다. 원인을 찾으려면 어떻게 해야 할까요??
• 제가 추측하는 원인은 background-img속성 사용, vite로 한 build, svg 파일 사용 중 하나일 것 같은데 도대체 뭐를 해야 원인을 알 수 있는지 모르겠습니다!

문제 컴포넌트 전체 코드

import { Link } from "react-router-dom";
import styled, { keyframes } from "styled-components";
import DESIGN_TOKEN from "@/styles/tokens";

import useResponsiveSidebar from "@/hooks/useResponsiveSideBar";
import { BannerImage } from "@/constants/banners";

interface BannerProps {
  image: BannerImage;
  path: string;
  onClick?: () => void;
}

export default function Banner({ image, path, onClick }: BannerProps) {
  const isSidebarOpenNarrow = useResponsiveSidebar();

  return (
    <Link to={path}>
      <AnimatedBackground $image={image}>
        <Background
          $isSidebarOpenNarrow={isSidebarOpenNarrow}
          onClick={onClick}
          $image={image}
          aria-label={image.desktopWide.alt}></Background>
      </AnimatedBackground>
    </Link>
  );
}

const {
  mediaQueries: { tablet, mobile },
} = DESIGN_TOKEN;

const fadeIn = keyframes`
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`;

const AnimatedBackground = styled.div<{ $image: BannerImage }>`
  animation: ${fadeIn} 0.5s ease-out;
  background-image: ${({ $image }) => `url(${$image.desktopWide.src})`};
  background-size: cover;
  background-position: center;
  border-radius: 2rem;
`;

const Background = styled.figure<{ $isSidebarOpenNarrow: boolean; $image: BannerImage }>`
  border-radius: 2rem;
  width: ${({ $isSidebarOpenNarrow }) => ($isSidebarOpenNarrow ? 29 : 36)}rem;
  height: 24rem;
  background-image: ${({ $isSidebarOpenNarrow, $image }) =>
    $isSidebarOpenNarrow ? `url(${$image.desktopNarrow.src})` : `url(${$image.desktopWide.src})`};
  background-size: cover;
  background-position: center;

  ${tablet} {
    background-image: url(${({ $image }) => $image.tablet.src});
    width: 22.6rem;
    height: 22.6rem;
  }

  ${mobile} {
    background-image: url(${({ $image }) => $image.mobile.src});
    max-width: 22.6rem;
    width: 100%;
    height: 100%;

    &::after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
  }
`;