React 모달 구현하기 (외부 클릭 닫기)

  const [modalPlayItem, setModalPlayItem] = useState('');

  const clickImg = (snippet) => {
    setReleaseModal(true);
    document.body.style.overflow = 'hidden';
    setModalPlayItem(snippet);
  };

  const closeReleasePopup = () => {
    setReleaseModal(false);
    setModalPlayItem('');
    document.body.style.overflow = 'unset';
  };

import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import AddForm from '../components/AddForm';
import ContentsList from '../components/ContentsList';
import { authService } from '../firebase';

const Modal = ({ closeReleasePopup, modalPlayItem }) => {
 
  return (
    <>
      <Layer onClick={() => closeReleasePopup()}></Layer>
      <ModalLayer>
        <CloseButton onClick={() => closeReleasePopup()}>X</CloseButton>
        <ModalContainer>
          
        </ModalContainer>
      </ModalLayer>
    </>
  );
};

export default Modal;

const Layer = styled.div`
  z-index: 1500;
  display: block;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
`;
const ModalLayer = styled.div`
  z-index: 2000;
  width: 80%;
  height: 80vh;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: white;
  border-radius: 16px;
  transform: translate(-50%, -50%) !important;
`;
const ModalContainer = styled.div`
  width: 85%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 30px;
`;

간단하게 컴포넌트로 모달을 구현해줬고 모달 외부를 클릭했을 때 닫게 하기 위해 Layer에 onClick={() => closeReleasePopup()}를 줬다.

document.body.style.overflow는 외부 스크롤을 방지하게 하기 위해 줬고 모달이 닫히면 overflow가 꺼지도록 줬다.

외부 클릭시 닫히는 기능을 css로 줬는데 이 부분을 조금더 공부해야겠다.