NextJS Styled-components background-image 속성 사용하기

에러상황

Create-React-App에서 NextJS로 이전하는 과정에서 background-image속성이 제대로 적용되지 않는 다는 것을 알게되었습니다. 다음은 체킹 여부에 따라서 이미지가 바뀌는 커스텀 체크박스입니다.

import { EmptyCheckBoxIcon, FilledCheckBoxIcon } from 'public/assets/images';

export const RowCheckBox = Styled(CheckBox)`
  + label {
    background-image: url('${EmptyCheckBoxIcon}');
  }

  :checked + label {
    background-image: url('${FilledCheckBoxIcon}');
  }
`;

아이콘 두개는 svg파일로 root 디렉토리의 public에 저장되어 사용하고 있습니다. CRA에서는 위의 코드로 충분히 잘 나왔고, NextJS로의 이전 이후에도 분명 다른 컴포넌트에서 사용할 때는 잘 호출되어 나왔는데, 유독 Styled-component의 background-image옵션이 작동하지 않았습니다. 경로의 문제라고 생각해 알아보았습니다.

해결 방법

export const RowCheckBox = Styled(CheckBox)`
  + label {
    background-image: url('/assets/images/emptyCheckBox.svg');
  }

  :checked + label {
    background-image: url('/assets/images/filledCheckBox.svg');
  }
`;

public안의 아이콘은 바꾸지 않고 경로만 직접 사용하는 방법으로 해결했습니다. 아마 빌드 시 아이콘을 최적화하는 과정을 거치는데, 이 과정에서 찾아오지 못하는 것 같습니다. 물론 next-images모듈을 사용하면 문제의 코드처럼 사용할 수 있겠지만, NextJS 10버전 이후에서 지원하는 내장된 next/image를 사용했기 때문에, 위와 같은 방법으로 해결했습니다. 이 스타일은 이미지가 컴포넌트 별로 변경되지 않아 이렇게 해결할 수 있었지만, 컴포넌트 별 이미지만 다르게 재활용해야한다면 다른 방법을 고려해야 할 것 같습니다.