모달 영역 밖 클릭시 닫기

방법은 간단하다.

다음 처럼 전체 영역을 가진 div 태그를 만들어준다.

export const ModalBackgroundOutEvent = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
`;

 

모달에는 z-index 속성을 주어 저 배경영역보다 위에 있게한다.

이를 주지 않는경우에 모달을 누를때 모달이 닫아지기 때문에 꼭 넣어주어야한다.

 

그러면 저 ModalBackgroundOutEvent 에 onClick 으로 모달을 닫게하는 state 를 변경하면 된다.

다음과 같은식으로 말이다.

  <ModalBackgroundOutEvent
    onClick={() => {
      dispatcher(setUsePointExcept({ value: false }));
    }}></ModalBackgroundOutEvent>