인프런 커뮤니티 질문&답변

냠냠굿님의 프로필 이미지
냠냠굿

작성한 질문수

[React / VanillaJS] UI 요소 직접 만들기 Part 2

기본환경세팅 (2/2) 컴포넌트 작성

테일윈드로 포탈로 모달작성시 뒤에 클릭이 안됩니다

해결된 질문

작성

·

214

·

수정됨

1

<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;

답변 2

1

정재남님의 프로필 이미지
정재남
지식공유자

  1. modalRoot는 z-index를 확보하기 위해 html body의 가장 마지막에 위치시키는 것이 바람직합니다.

<body>
  <ModalProvider />
  {children}
  <ModalRoot />
</body>
  1. modalRoot에는 스타일이 불필요합니다.

    <div id="modalRoot" ref={ref} />
냠냠굿님의 프로필 이미지
냠냠굿
질문자

선생님 정말 도움이되었어요 정말감사합니다!
선생님 다른강의도 다구매할게요 책은 예전에 구매했엇네요

1

정재남님의 프로필 이미지
정재남
지식공유자

깃헙에 올려주시고 링크 공유해 주세요. 저도 돌려보고 말씀드릴게요.

냠냠굿님의 프로필 이미지
냠냠굿
질문자



페이지는 /result/0/0 이고 모달버튼 누르면

ㄱ. 일부컴퍼넌트가 블러가안됨
ㄴ. pointer-events-none를 안하면 클릭이 안됩니다 ㅠ

냠냠굿님의 프로필 이미지
냠냠굿

작성한 질문수

질문하기