CustomOverlayMap css z-index 속성 적용에 관하여

[sunwoo0706]

안녕하세요 좋은 라이브러리 정말 잘 사용하고 있습니다 !

https://hirecruit.site/ 라는 서비스를 운영중 여러가지의 커스텀 마커들이 중첩되어 뒤에 존재하는 커스텀 마커들이 가려지게 되어 CustomOverlayMap 에 css hover로 z-index를 조정하여 해당 커스텀 마커에 마우스 오버시 요소 z-index 값을 증가하게 하여 가려진 커스텀 마커의 정보를 볼 수 있도록 개발하려 하였습니다.

하지만 작업중 다른 css 속성들은 hover를 통하여 트리거 가능하였지만, z-index만 적용되지 않는 문제가 있어 확인해보니 CustomOverlayMap 위의 존재하는 어떠한 엘리먼트가 z-index: 1 로 초기화 되어있어 적용이 되지 않는것 같더라고요 해당 문제에 관하여 다른 해결책이 있거나 상위 엘리먼트 스타일에 접근할 수 있는 방법이 있을까요??

[JaeSeoKim]

혹시 해당 상황을 알수 있는 코드 샘플을 알 수 있을까요?

CodeSandBox와 같은 서비스를 이용해주시면 감사하겠습니다!(군 입영을 한 상황이여서 직접 환경을 구축하기에는 무리가 있어서 양해 부탁드립니다.)

[JaeSeoKim]

https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/main/src/components/CustomOverlayMap.tsx#L38

해당 코드를 확인 해보면 CustomOverlay에서 zIndex에 대한 prop이 존재 하니 한번 사용해보시고 이상이 있다면 이야기 해주세요!

[sunwoo0706]

isMouseOver라는 state를 생성하고 하위 엘리먼트의 onMouseOver, onMouseLeave 이벤트에 등록하고 이로 customOverlayMap 컴포넌트의 zIndex props를 트리거하여 해결하였습니다 감사합니다 !