const Modal = ({ children, onClose }: ModalProps): JSX.Element => {
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, []);
  return (
    <Wrapper>
      <Overlay onClick={onClose} />
      <ModalContent>
        ...
        {children}
      </ModalContent>
    </Wrapper>
  );
};

useEffect hook

• 모달 open시 스크롤 방지

Wrapper

• 전체 화면 고정 및 modal content 중앙 설정

export const Wrapper = styled.div`
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background-color: rgb(0, 0, 0, 0.6);
`;

Overlay

• 클릭시 모달 종료

export const Overlay = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`;