[FRONT] CustomOverLay 여는방식 수정

[WHO-A-U]

CustomOverLay 여는방식 개선 및 기능추가

기능

- 왼쪽 사이드바 클릭시 overlay 를 띄울수 있음

- 한번에 하나의 overlay 만 띄우는것을 가능하게함

기존 CustomOverLay 를 여는 방식

marker 에 onClick event 를 달아 onClick 이 됬다면 isVisible 이라는 state 의 값이 true 가 되면서 보이는 구조

const NormalMarker = ({ store, index }) => {
  const [isOpen, setIsOpen] = useState(false);

...

  return (
    <>
      <MapMarker
        position={position}
        image={{
          src: MARKER_NORMAL,
          size: markerNormalSize,
        }}
        clickable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
        onClick={() => setIsOpen(true)}
      />
      {isOpen && (
        <>
          <CustomOverlayMap position={position}>
            <div className="wrap">
              <div className="info">
                <InfoWindowCard
                  place={store}
                  onClick={() => setIsOpen(false)}
                />
              </div>
            </div>
          </CustomOverlayMap>
        </>
      )}
    </>
  );
};

현재 방식

recoil 변수로 focusedId 를 선언한뒤

export const focusedIdState = atom({
  key: 'focusedId',
  default: null
})

한번에 하나의 overlay 만 띄어지도록 관리

  {isOpen && (
        <>
          <CustomOverlayMap position={position}>
            <div className="wrap">
              <div className="info">
                <InfoWindowCard
                  place={store}
                  onClick={() => setIsOpen(false)}
                />
              </div>
            </div>
          </CustomOverlayMap>
        </>
      )}

여기서 말하는 id 는 DB에서 관리되는 place id 를 의미함