shadcn pointerEvents 문제

https://github.com/radix-ui/primitives/issues/1241
https://github.com/shadcn-ui/ui/issues/1912

shadcn을 사용하다보니, modal이나 dropdown을 close했을때 화면이 클릭이 안되는 문제가 발생했다. 이벤트끼리 맞물려서 동작이 이상해지는 것 같았다.

검색을해보니 예전버전부터 지금까지 계속 고쳐지지않는것 같다.
이슈해결에 대한 방법이 크게 없어보였다.

문제는 dialog 나 dropdown 메뉴들이 open이되면 body에
pointerEvents:none 처리가 되고 close가 되면 사라져야되는데
이벤트가 동작이 되지 않아서 발생하는 문제 같았다.

이게 dialog안에 dropdown을 쓰는것 처럼 2가지 가 맞물리게 되면 body에 pointerEvents가 사라지지 않고 계속 남아있게되어서 웹페이지가 클릭이 안되는 상태가 발생한다.

그래서 고민하다가 해결한 방법은

  onClose: () => {
    set({ type: null, isOpen: false });
    setTimeout(() => {
      document.body.style.pointerEvents = "";
    }, 200);
  },

zustand를 사용하고있고, modal의 close처리를 통합해서 해주고 있었기 때문에
하나씩 close처리를 해주지 않고, 간단하게 처리할 수 있었다.
테스트 결과 200-300ms정도가 적당했고, 마음에 들지는 않지만 일단은 이렇게 해결해서 사용 중이다.

더 테스트 해보고 더 좋은 방법이 생기면 업데이트를 해야겠다.