팝업에서 카카오맵 부를때 카카오맵이 이상하게 뜨는 이슈 해결

뿌이·2022년 9월 30일
0

react 15버전

목록 보기
13/17

html페이지에서는 카카오 맵이 아주 예쁘게 잘 불러와 지는데,
유독 팝업만 띄우면 잘 안되는 것이다.

이렇게 ;;
그래서 너무 해맸는데
원인을 찾았음

원인은

  1. 지도앱은 라이브러리 특성상 항상 가운데 위치를 하기 위해 position: absolute를 사용하여 부모요소의 위치를 기준으로 가지고 온다.
  2. 팝업 : display:none이 되어 있으면, 자연스럽게 지도가 팝업위치를 잡을 수 없다. 이럴경우 팝업 밖에 있는 요소에 기준을 잡게 된다.
    그 상태에서 팝업을 노출할때, 새롭게 데이터를 가져오는 것이 아니라,
    기존에 있던 소스에 display:none > block 으로 되기 때문에
    이미 지도 라이브러리는 다른 기준값을 기준으로 위치를 잡고 있엇다
    그런 이유로 팝업내에서는 안된다. 하지만, 팝업이 노출된 상태에서 다시 개발자 도구나 새로고침을 하는경우
    display: block;이 된 상태 > 부모요소가 존재한 상태에서 라이브러리가 다시 위치값을 잡앗기 때문에
    노출이된다 !
    즉, 라이브 러리의 기준값을 지정해주면 된다 !
    우리 회사의 다이얼 로그의 가운데 정렬 하는방법은 table 정렬이라 오류가 나타난것이다 ! table 정렬은 기준값을 잡기 애매함 !
    가운데정렬 기준 !

이었다. 결론적으로
가운데 정렬 하는 방법을 table로 하면 카카오맵이 깨져서 나올 수 있다는 점
명심하자~~

profile
기록이 쌓이면 지식이 된다.

0개의 댓글