본문으로 건너뛰기

23.08.15

오늘 한 일​

  • 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 개발 및 회의
  • 카공실록 개발 및 회의