리액트 모달창 스크롤 방지

import React, { useEffect } from 'react';
import styled from 'styled-components';

type ModalProps = {
    visible?: boolean;
    closeModal: () => void;
    children: React.ReactNode;
};

const Modal: React.FC<ModalProps> = ({ visible, closeModal, children }) => {
    useEffect(() => {
        if (visible) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
    }, [visible]);
    return <>{visible && <ModalWrapper onClick={closeModal}>{children}</ModalWrapper>}</>;
};

export default Modal;

const ModalWrapper = styled.div`
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
`;