[쇼핑몰 구현 프로젝트] 10. Error 잡기 / 보안 강화

① Error가 있으면 message와 함께 Error Modal 띄우기

    <Modal show={openModal} onClose={onClick}>
      <Modal.Header>{props.header}</Modal.Header>
      <Modal.Body>
        <div className="space-y-6">
          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
            {props.message1}
          </p>
          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
            {props.message2}
          </p>
        </div>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={onClick}>I accept</Button>
      </Modal.Footer>
    </Modal>

  const [ isError, setIsError ] = useState(false);
  const [ errorMessage, setErrorMessage ] = useState("");
      
  if(isError){
    return (
      <ErrorModal 
        header="Error occurs"
        message1={errorMessage}
        message2="Please try again"
      />
    );  
  }

 

② Route에 userId 포함 시 LocalStorage의 유저와 동일한 지 확인

const userId = useParams().uid

if(userId !== auth.userId) {
    setIsError(true);
	setErrorMessage('Invalid userId');
}