#22 : 지도 오버레이

1. 지도 오버레이로 코드 수정

기존에는 카카오 API 중 인포윈도우로 카페명을 표시했었는데 디자인도 어렵고 클릭이벤트, 마우스이벤트를 동시에 주고 싶어서 오버레이로 코드를 수정하기 시작했다. 오버레이 이벤트 주는 코드만 첨부하면 아래처럼 썼는데 mouseover, click은 되는데 mouseout 이벤트 때문에 클릭 이벤트는 작동이 안 되는 것 같아 보였다.

window.kakao.maps.event.addListener(marker, 'mouseover', function () {
  overlay.setMap(map);
});

window.kakao.maps.event.addListener(marker, 'mouseout', function () {
  overlay.setMap(null);
});

window.kakao.maps.event.addListener(marker, 'click', function () {
  overlay.setMap(map);
});

해결한 방법은 클릭된 상태인지 체크를 하는 방법이었다. 처음에는 상태변수로 관리했는데 문제가 여전히 해결되지 않아 내부변수로 수정했고 잘 해결되었다. 클릭 상태까지 해서 아래와 같이 코드를 수정했다.

let isClicked = false;

/*
...
*/

window.kakao.maps.event.addListener(marker, 'click', function () {
  if (!isClicked) {
    isClicked = true;
  } overlay.setMap(map);
});

window.kakao.maps.event.addListener(marker, 'mouseover', function () {
  if (isClicked) {
    return;
} overlay.setMap(map);
});

window.kakao.maps.event.addListener(marker, 'mouseout', function () {
  if (isClicked) {
    return;
  } overlay.setMap(null);
});

 

---

2. 페이지 위로 올리기 버튼 구현

저번 프로젝트 때에도 이 버튼을 만들어보고 싶었는데 못 했었다. 이번에는 해보려고 어떤 방법이 있는지 찾아보던 중 스크롤을 상태로 저장하면 된다는 것을 보고 구현해보았다. 이렇게 컴포넌트를 한 개 만들고 스크롤 버튼을 넣고 싶은 페이지에 컴포넌트를 연결해주었다!

import React, { useState } from 'react';
import scrollBtn from '../images/scroll-btn.png';
import '../styles/ScrollButton.scss';

export const ScrollButton = () => {
  const [scroll, setScroll] = useState(0);

  const handleScrollUp = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
    setScroll(0);
  };

  return (
    <div className="scroll-container">
      <div className="scroll-btn" onClick={handleScrollUp}>
        <img src={scrollBtn} alt="TOP"></img>
      </div>
    </div>
  );
};