Modal 컴포넌트 밖 또는 X버튼 눌렀을 때 닫기

return (
    <DarkBackground onClick={close}>
      <DialogBlock onClick={e => e.stopPropagation()}>
        <DialogHeader>
          <DialogTitle>{headerText}</DialogTitle>
          <CloseBtn src={closeImg} onClick={close} />
        </DialogHeader>
        <DialogBody>
          <ProductPhoto src={photo} />
          <ProductTitle>{title}</ProductTitle>
        </DialogBody>
        <ModalCheerUpBtn onClick={showMsg}>{btnText}</ModalCheerUpBtn>
        {isClicked ? (
          <MsgBox>
            <Msg>[{title}]</Msg>
            <CheerUpComp>응원완료</CheerUpComp>
          </MsgBox>
        ) : null}
      </DialogBlock>
    </DarkBackground>
  );