[7주차] 리액트: 확인/취소 알림창

리액트: 확인/취소 알림창

입력창에 모두 값을 입력하고, submit을 눌렀을 때 다시 confirm 하는 알림창을 넣는 것은 사용자경험을 더 높인다고 생각한다.

따라서 이번 개인 프로젝트에서 addhandler 의 validation check 마지막 부분에 window.confirm("string") 을 넣어보았다.

 

바닐라 자바스크립트 환경에서는 window 없이 사용하면 된다.

 

  // NEW LETTER ADD
  const addHandler = (event) => {
    event.preventDefault();
    const newLetter = {id: uuid(), userName: userName, createdAt: moment().format('YY-MM-DD HH:mm'), message: message, wroteTo: selectedCharacter,
    }
    console.log('입력값으로 만들어진 객체',newLetter);
    const userNameLength = userName.trim().length;
    const messageLength = message.trim().length;

    // validation check
    if (userNameLength === 0 || messageLength === 0) {
      alert("Please fill out the blank");
      return;
    } else if (userNameLength > 20) { 
      alert("Please write your usernmae within 20 characters.");
      return;
    } else if (messageLength > 100) {
      alert("Please write your message within 100 characters.");
      return;
    } else if (/^\s*$/.test(userName) || /^\s*$/.test(message)) {
      alert("Only spaces have been entered.");
      return;
    } else {
      if(window.confirm("Are you sure you want to send the letter?") === true){
        setLetters([...letters, newLetter]);
        alert("Your letter has been successfully sent!");
      } else {
        return false;
      }
      // input box init
        setUserName("");
        setMessage("");
    }
  }