카카오맵 api 마커 엑박 문의

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

import React, { useEffect, useRef, useState } from 'react';
import GreyMarker from './nomalMarker.png';
import BlueMarker from './checkMarker.png';

const ContentsMap = () => {
  const [address, setAddress] = useState('');
  const container = useRef();
  const [kakaoMap, setKakaoMap] = useState(null);

  const [markerInfo, setMarkerInfo] = useState('');

  const onChangeMap = (e) => {
    setAddress(e.target.value);
  };

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services&autoload=false`;
    document.head.appendChild(script);

    script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById('map');

        const options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

        const map = new window.kakao.maps.Map(container, options);

        const icon = new window.kakao.maps.MarkerImage(
          'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
          new window.kakao.maps.Size(31, 35),
          {
            offset: new window.kakao.maps.Point(16, 34),
            alt: '마커 이미지 예제',
            shape: 'poly',
            coords: '1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33',
          }
        );

        const marker = new window.kakao.maps.Marker({
          map: map,
          position: new window.kakao.maps.LatLng(33.450701, 126.570667),
          image: icon,
        });

    
      });
    };
  }, [container]);



  return (
    <div>
      <div>헬스장 위치</div>
      <div>
        <input placeholder="헬스장 위치검색" onChange={onChangeMap} />
        <div id="map" style={{ width: '100%', height: 312 }} />;
      </div>
    </div>
  );
};

export default ContentsMap;

nextjs 환경에서
카카오맵 마커 이미지를 변경할려고하는데 엑박이 떠서 문의드립니다
png 파일을 import 받아서 적용해주면 엑박이뜨고 예제있는 url을 입력하면 이미지가 바뀐걸로 보이는데
png 파일은 적용이 안되는걸까요?

image

png파일도 마커 이미지로 설정 가능합니다.
스샷을 보면 이미지 경로가 잘못 설정돼서 404 에러가 나고 있는 걸로 보입니다.

localhost:3000/[object%20Object]로 호출하고 있는데
경로를 올바르게 설정해서 다시 이미지를 불러와주세요.

import React, { useEffect, useRef, useState } from 'react';
import CheckMarker from '../../../../../../public/checkMarker.svg';

declare global {
  interface Window {
    kakao: any;
  }
}

const KakaoMap = () => {
  const container = useRef();
  const [kakaoMap, setKakaoMap] = useState(null);
  const [markerInfo, setMarkerInfo] = useState('');

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services&autoload=false`;
    document.head.appendChild(script);

    script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById('map');

        const options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

        const map = new window.kakao.maps.Map(container, options);

        const markerImage = new window.kakao.maps.MarkerImage(
          CheckMarker,
          new window.kakao.maps.Size(36, 36),
          new window.kakao.maps.Point(13, 34)
        );

        const marker = new window.kakao.maps.Marker({
          map: map,
          position: new window.kakao.maps.LatLng(33.450701, 126.570667),
          image: markerImage,
        });

        setKakaoMap(map);
      });
    };
  }, [container]);

  return <div id="map" style={{ width: '100%', height: 312, borderRadius: '8px' }} />;
};

export default KakaoMap;

경로가 잘못된거같다고 하셔서 next환경에서 이미지를 인식을 못하는거같아서 일단 인식은되게 고쳐놨습니다.
그랬더니 이번에는 해당 코드로 실행하면 아얘 마커 이미지가 바뀌지않고 기본 마커로 뜨고 요청자체가 안가네요.
무엇이 문제일까요…?

Create React App 4이상인 경우
import 모듈을 사용할 경우 src 폴더 하위에 위치해야합니다.
https://create-react-app.dev/docs/adding-images-fonts-and-files
버전 확인해서 해당 버전이라면 src 하위로 이동시켜주세요.

그리고 public 폴더의 사용법은 아래 링크 참고해주세요.
https://create-react-app.dev/docs/using-the-public-folder