TIL #54 | 모달 디테일하게 구현하기

모달 뒷배경 움직임 방지

ux를 위해 모달 뒷배경 클릭 시 스크롤이 되지 않도록 설정하였다.

  useEffect(() => {
    if (viewSearchModal) {
      document.body.style.cssText = `
        position: fixed; 
        top: -${window.scrollY}px;
        overflow-y: scroll;
        width: 100%;`;
      return () => {
        const scrollY = document.body.style.top;
        document.body.style.cssText = "";
        window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
      };
    }
  }, [viewSearchModal]);

모달 바깥 영역 클릭 시 모달 닫기

모달 커스텀 훅을 만들어서 모달 바깥 영역 클릭 시 모달을 닫을 수 있도록 구현하였다.

먼저 ref로 사용할 모달 박스 영역을 설정한다.

	 const modalRef = useRef<HTMLInputElement>(null);

		...
		
		/* 모달 배경 영역 */
        <StModalContainer>
	        /* 모달 영역 */
          <StModalBox ref={modalRef}>
            <StSearchSection>
            ...

설정한 모달 ref 값과 함수를 넘겨줘서 useEffect 안에서 렌더링시 이벤트가 실행되도록 구현하고 끝나면 지워지도록 구현하였다.

import React, { useEffect } from "react";

interface Props {
  ref: React.RefObject<HTMLInputElement>;
  handler: () => void;
}

const useOnClickOutSide = ({ ref, handler }: Props) => {
  useEffect(() => {
    const listener = (e: MouseEvent) => {
      // 모달 밖 클릭 시
      // ref.current 영역을 클릭하지 않았거나 ref.current (모달 영역)을 포함하고 있는 경우
      if (!ref.current || ref.current.contains(e.target as Node)) {
        return;
      }

      // 모달 밖 클릭 시
      handler();
    };

    document.addEventListener("mousedown", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
    };
  }, [ref, handler]);
};

export default useOnClickOutSide;