인프런 커뮤니티 질문&답변

중고마켓 구현 중에 계속 구글링해도 해결이 안돼서 질문드립니다ㅠ

Header에 판매하기 Link가 있고, 클릭하면 /product/new 로 이동하게 했습니다

주소창에 직접 주소를 입력해서 들어가면 에러가 안뜨는데, 버튼을 클릭해서 들어가면

TypeError: window.kakao.maps.LatLng is not a constructor 에러가 발생하는데

원인이 뭘까요 ....??

Header

             <Link href="/product/new">
                <a>
                  <S.HeaderIcon>
                    판매하기
                  </S.HeaderIcon>
                </a>
              </Link>

BoardWrite

declare const window: typeof globalThis & {
  kakao: any
}

export default function BoardWrite(props: IBoardWriteProps): JSX.Element {
  const router = useRouter()
  const { setValue, trigger } = useForm({
    mode: "onChange",
  })

  useEffect(() => {
    const script = document.createElement("script")
    script.src =
      "https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키"
    document.head.appendChild(script)

    script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById("map") // 지도를 담을 영역의 DOM 레퍼런스
        const options = {
          // 지도를 생성할 때 필요한 기본 옵션
          center: new window.kakao.maps.LatLng(37.462381, 126.813369), // 지도의 중심좌표.
          level: 3, // 지도의 레벨(확대, 축소 정도)
        }

        const map = new window.kakao.maps.Map(container, options) // 지도 생성 및 객체 리턴

      })
    }
  }, [])