<BackgroundContainer>
  <ContentsMenubar name="maskmap" />
  <Description>
    <button onClick={mylocationHandler}>내 위치</button>
    <div>
      <span
        style={{
          textAlign: 'center',
          color: 'black',
          background: 'rgba(255,255,255,0.7)',
        }}
      >
        <div style={{ fontSize: '20px', fontFamily: 'escore8' }}>
          {weekArr[week]}요일
        </div>
        <div style={{ marginTop: '5px' }}>{weekMask[week]}</div>
      </span>
      <span style={{ background: 'green' }}>100개이상</span>
      <span style={{ background: 'orange' }}>30~100개</span>
      <span style={{ background: 'red' }}>2~30개</span>
      <span style={{ background: 'black' }}>없음</span>
    </div>
  </Description>
  <MapContainer id="map"></MapContainer>
</BackgroundContainer>

let map = null
const week = new Date().getDay()
const weekArr = ['일', '월', '화', '수', '목', '금', '토']
const weekMask = [
  '누구나',
  '1,6년생',
  '2,7년생',
  '3,8년생',
  '4,9년생',
  '5,0년생',
  '누구나',
]

<MapContainer id="map"></MapContainer>

useEffect(() => {
    map = new naver.maps.Map('map', {
      center: new naver.maps.LatLng(37.5666805, 126.9784147),
      zoom: 10,
      mapTypeId: naver.maps.MapTypeId.NORMAL
    })

<button onClick={mylocationHandler}>내 위치</button>

const onSuccessGeolocation = position => {
  var location = new naver.maps.LatLng(
    position.coords.latitude,
    position.coords.longitude
  )

  map.setCenter(location)
  map.setZoom(16)
}

const onErrorGeolocation = () => {
  // 에러!!
}

const mylocationHandler = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      onSuccessGeolocation,
      onErrorGeolocation
    )
  } else {
    // 에러
  }
}

naver.maps.Event.addListener(map, 'dragend', function(e) {
  // ...
})

const url =
  'https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json'
const query = `?lat=${map.getCenter().y}&lng=${map.getCenter().x}`
fetch(url + query)
  .then(res => {
    return res.json()
  })
  .then(json => {
    // ...
  })

const remain_stat = {
  plenty: 'green',
  some: 'orange',
  few: 'red',
  empty: 'black',
  break: 'black',
}
for (let i = 0; i < json.count; i++) {
  var marker = new naver.maps.Marker({
    icon: {
      content: `<div style="font-size:10px; font-family:escore6; border:1px solid lightgrey; color:white; background:${
        remain_stat[json.stores[i].remain_stat]
      }; border-radius:5px; padding:4px;">${json.stores[i].name}</div>`,
    },
    position: new naver.maps.LatLng(json.stores[i].lat, json.stores[i].lng),
    map: map,
  })
}