Login page(1)

지금은 Login page를 메인 페이지로 하여 어떤 서비스인지 비회원이 체험이 불가능하지만 간접적으로 체험 가능하도록 변경할 계획이다 일단은 처음 시작하는 부분은 Login page로 지정하였다.

onChange onSubmit 의 활용

이제는 어느정도 익숙해진 post 요청을 위한 form 만들기 form 형태를 바꾼다음 유효성 검사도 넣을 계획이다. onChange로 받은 value 값을 post 요청 할 때 data로 넣는 방식이며 역시 중요한 useState를 사용하였다.

fetch()

POST프로토콜로 JSON인코딩된 데이터를 보내기 위해 fetch()를 사용합니다.
body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함

await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE 등
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
})

const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    console.log(value);
    const data = Object.assign({ "phone" : value })
    console.log(data);
    setPhone(data)     
  };

  
  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    console.log(value);
    const data:ObjectConstructor = Object.assign({ "email" : value })
    console.log(data);
    setEmail(data);
  };

const onSubmit = (e:React.FormEvent<HTMLFormElement>) => {   
     //클릭하면 false -> true로 전환 되며    
     //true 가 되면 창이 열리는 방식으로 
    e.preventDefault();
    console.log(tokenData);
    if(tokenData !== "") {
      fetch("/api/users/Confirm", {
         method : "POST",
         body: JSON.stringify(tokenData),
         headers: {
           "Content-Type": "application/json"
         } // api를 호출 할 때마다 headers를 설정해야 한다.
       })
       setTokenRouter(true);
    }
    if(email !== "") {
      fetch("/api/users/Login", {
        method : "POST",
        body: JSON.stringify(email),
        headers: {
          "Content-Type": "application/json"
        } // api를 호출 할 때마다 headers를 설정해야 한다.
      })
      setMailTokenInput(true);
      setTokenBtn(true)
      setEmail("")
    } else if(phone !== "") {
      fetch("/api/users/Login", {
        method : "POST",
        body: JSON.stringify(phone),
        headers: {
          "Content-Type": "application/json"
        }
      })    
      setNumberTokenInput(true)
      setTokenBtn(true)
    } else return;     
}