Function Modal

src/components/modal/Modal.tsx:58–143

({ children, onClose, isOpen, isScroll = false }: ModalType)

`;

function Modal({ children, onClose, isOpen, isScroll = false }: ModalType) {
  const [open, setOpen] = useState(false);
  const [fadeOutAnimation, setFadeOutAnimation] = useState(
    `${fadeIn} 0.3s forwards`
  );
  const [backgroundAnimation, setBackgroundAnimation] = useState(
    `${fadeInBackground} 0.3s forwards`
  );

  const handleClose = (e: any) => {
    if (e.target.id != "modal") {
      return false;
    }
    setFadeOutAnimation(`${fadeOut} 0.3s forwards`);
    setBackgroundAnimation(`${fadeOutBackground} 0.3s forwards`);

    setTimeout(() => {
      onClose();
      setOpen(false);
    }, 280);
  };

  useEffect(() => {
    if (isOpen) {
      setOpen(true);
      setFadeOutAnimation(`${fadeIn} 0.3s forwards`);
      setBackgroundAnimation(`${fadeInBackground} 0.3s forwards`);
    } else {
      setFadeOutAnimation(`${fadeOut} 0.3s forwards`);
      setBackgroundAnimation(`${fadeOutBackground} 0.3s forwards`);

      setTimeout(() => {
        onClose();
        setOpen(false);
      }, 280);
    }
  }, [isOpen]);

  return (
    <div
      onClick={handleClose}
      id="modal"
      css={css({
        display: open ? "flex" : "none",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100%",
        position: "fixed",
        top: "0",
        left: "0",
        backdropFilter: "brightness(70%)",
        animation: backgroundAnimation,
        scrollbarWidth: "none",
        zIndex: 3000,
        transition: "0.1s",
      })}
    >