카공실록 - kakao map marker에 애니메이션 추가하기

오늘 한 일

• gloddy 개발
  • Avatar 컴포넌트 구현
• 카공실록 개발
  • home 페이지 맵 세부 구현

오펜하이머

영화 오펜하이머를 보았다.
3시간 러닝타임의 전기 영화를 몰입하면서 본 적은 처음이다.

나는 이런 철학적인 영화가 좋다. 생각을 많이 하게 만들고 다시 곱씹어 보게 된다.

오랜만에 생각을 많이 하게 만드는 영화를 봤다.

카공실록

맵 마커 변경

기본은 조그만 마커로 표시되는데, 누르면 큰 마커로 바뀌는 것으로 변경했다. 그러면서 화면 중앙에 오도록 했다.

🤔 마커 클릭 시 애니메이션을 주고 싶은데..

react-kakao-maps-sdk를 사용하고 있는데, 여기서 제공하고 있는 MapMarker 컴포넌트에서 애니메이션을 줄 수 없다.

그래서 마커를 커스텀하려고 kakao.maps.Marker를 사용했는데, 이것도 애니메이션을 줄 수 없다.

Marker 대신 kakao.maps.CustomOverlay를 사용하기로 했다.

'use client'
import { useRef, type PropsWithChildren, useEffect, useMemo } from 'react'
import { createPortal } from 'react-dom'

interface MarkerProps {
  map: kakao.maps.Map
  position: {
    latitude: number
    longitude: number
  }
}

export default function MarkerOverlay({ map, position, children }: PropsWithChildren<MarkerProps>) {
  const container = useRef(document.createElement('div'))

  const markerPosition = useMemo(
    () => new kakao.maps.LatLng(position.latitude, position.longitude),
    [position.latitude, position.longitude]
  )

  const markerOverlay = useMemo(
    () =>
      new kakao.maps.CustomOverlay({
        content: container.current,
        map,
        position: markerPosition,
      }),
    [map, markerPosition]
  )

  useEffect(() => {
    markerOverlay.setMap(map)
    return () => {
      markerOverlay.setMap(null)
    }
  }, [markerOverlay, map])

  return container.current.parentElement && createPortal(children, container.current.parentElement)
}

이제 MarkerOverlay 컴포넌트를 사용할 때 children에 무언가를 추가할 수 있게 되었다.

<MarkerOverlay map={map} position={position}>
  // 여기에 마커에 표시할 컨텐츠를 넣으면 된다.
</MarkerOverlay>

내일 할 일

• gloddy 개발 및 회의
• 카공실록 개발 및 회의