테일윈드로 포탈로 모달작성시 뒤에 클릭이 안됩니다
<div
id='modalRoot'
ref={ref}
className='fixed inset-0 z-100 flex flex-col items-center justify-center'
>
{children}
</div>테일 윈드로 선생님 모달 포탈로만드는것 해보고있는데.
뒤에 클릭이 안되요
pointer-events-none 쓰지말고 하는법이 없을까요?!
일단은
아래처럼 쓰고잇긴한데 ㅠㅠ 먼가 ...
'use client';
import React, { useEffect, useRef } from 'react';
import { useModalStore } from '@/shared/models/modal/stores/modalStore';
const mutationObserverOption: MutationObserverInit = {
childList: true,
subtree: false,
};
/**
* 모달 컴포넌트를 렌더링하기 위한 전역 컨테이너 프로바이더입니다.
* 모달이 열려 있을 때 body 요소에 'no-scroll' 클래스를 토글하여 스크롤을 비활성화합니다.
*
* @param {React.ReactNode} children - 모달 루트 내부에 렌더링할 자식 요소
* @returns {JSX.Element} 모달 루트 프로바이더
*/
const ModalRootProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const ref = useRef<HTMLDivElement>(null);
const { openedModalTypes, closeModal } = useModalStore();
// const isModalOpen = openedModalTypes.length > 0;
useEffect(() => {
let observer: MutationObserver;
/**
* MutationObserver를 사용하여 모달 루트 컨테이너의 자식 요소 변경을 감지합니다.
* 모달이 열려 있는 경우 body 요소에 'no-scroll' 클래스를 추가하고, 모달이 닫혀 있는 경우 클래스를 제거합니다.
*/
if (ref.current) {
observer = new MutationObserver(() => {
const size = ref.current?.childNodes.length || 0;
document.body.classList.toggle('no-scroll', size > 0);
ref.current!.classList.toggle('bg-black/50', size > 0);
ref.current!.style.pointerEvents = size > 0 ? 'auto' : 'none';
});
observer.observe(ref.current, mutationObserverOption);
}
// 컴포넌트 언마운트 시 MutationObserver 연결을 해제합니다.
return () => {
observer.disconnect();
};
}, []);
return (
<div
id='modalRoot'
ref={ref}
className='fixed inset-0 z-100 flex flex-col items-center justify-center pointer-events-none'
// onClick={handleOutsideClick}
>
{children}
</div>
);
};
export default ModalRootProvider;
Answer 2
1
modalRoot는
z-index를 확보하기 위해 html body의 가장 마지막에 위치시키는 것이 바람직합니다.
<body>
<ModalProvider />
{children}
<ModalRoot />
</body>modalRoot에는 스타일이 불필요합니다.
<div id="modalRoot" ref={ref} />
1
깃헙에 올려주시고 링크 공유해 주세요. 저도 돌려보고 말씀드릴게요.
6장 ORM 에 관하여 질문
0
1
0
안녕하세요 한번 더 문의드립니다.
0
8
0
git 초기설정하고 Next Js 설치하는게 너무 어렵습니다.
0
7
1
커서 색상 및 클로드코드 프롬프트 입력칸 설정 문의
0
9
1
81강 실습 자료 없음
0
8
1
클로드 질문에서 줄 바꿈
0
12
1
2강 퀴즈를 푸려는데 자꾸 수강하지 않은 수업이있는데.. 다들었습니다 ㅜ
0
15
1
서브에이전트 실행중에도 대기해야 할까요?
0
11
1
소스코드 제공여부
0
22
2
궁금했던 질문입니다. 바로 콤마위치 입니다.
0
15
1
선생님 공유해주신 핸드북에 링크가 몇개 잘못되었어요
0
19
2
62강 실습자료가 잘못되었습니다.
0
17
1
제네릭을 사용하실 때 콤마
0
180
2
popover createPortal 방식에서
0
167
2
스낵바를 만들 때 snackBarContext와 snackBarSetContext
0
166
2
snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?
0
204
1
useCallback, useMemo의 차이에 대해서 궁금합니다.
0
382
1
createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문
0
370
3
강의자료 (보일러플레이트) 다운로드 관련 질문
0
269
1
모달만드는 방식 질문
0
257
1
캐러셀 동작원리
0
323
2
dropdown 내부에서 data의 타입을 알아야 할까요?
0
216
1
Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?
0
300
2
keyEventMap를 전역에 구현하신 이유가 궁금합니다!
0
280
2