useState 훅을 사용하여 마커의 확대 여부를 관리하는 상태 변수를 추가한다. 예를 들어, const [isMarkerHovered, setIsMarkerHovered] = useState(false);를 추가한다.
마커 생성 시, 마커의 기본 크기와 확대된 크기를 변수로 정의한다. 예를 들어, const markerSize = isMarkerHovered ? new kakao.maps.Size(30, 35) : new kakao.maps.Size(20, 25);와 같이 정의한다. 기본 크기는 (20, 25)이고, 확대된 크기는 (30, 35)로 가정한다.
마커 생성 시, 마커의 이미지 옵션에 isMarkerHovered 값을 확인하여 옵션을 설정한다. 예를 들어, const imageOption = { offset: isMarkerHovered ? new kakao.maps.Point(30, 40) : new kakao.maps.Point(20, 30) };와 같이 설정한다.
마커 생성 시, 마커의 이미지를 갱신하여 크기와 옵션을 적용한다. 예를 들어, const markerImage = new kakao.maps.MarkerImage(imageSrc, markerSize, imageOption);와 같이 이미지를 생성한다.
마우스 이벤트를 처리하기 위해 kakao.maps.event.addListener를 사용하여 마커에 이벤트 리스너를 추가한다. 예를 들어, kakao.maps.event.addListener(marker, 'mouseover', function () { setIsMarkerHovered(true); });와 같이 마커에 마우스 오버 이벤트를 처리한다. 마우스 아웃 이벤트도 동일한 방식으로 처리할 수 있다.
