웹에서 지도가 뜨질 않습니다

JavaScript
1

/** @jsxImportSource @emotion/react */

import { css } from ‘@emotion/react’

import React, { useEffect } from ‘react’;

const mapStyle = css`

width: 100%;

height: 0;

padding-bottom: 80%;

position: relative;

overflow: hidden;

> #map {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

`;

const MapTest = () => {

useEffect(() => {

    const script = document.createElement('script');

    script.async = true;

    script.type = 'text/javascript';

    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=33c4314f8f06ba1c408e47635d2f69b6`

    document.head.appendChild(script);

    script.onload = () => {

        const container = document.getElementById('map');

        const options = {

            center: new window.kakao.maps.LatLng(35, 129),

            level: 3

        };

       

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

    };

       

}, []);

return (

    <div>

        <div id='map' style={mapStyle}></div>

    </div>

);

};

export default MapTest;

다음 코드를 사용해서 App.js에서 코드를 실행시켰으나, 웹에서는 지도가 뜨질 않네요… 계속 수정해보고 바라봐도 어디서 오류가 뜨는건지를 모르겠어서 글 남겨봅니다!