Login페이지 기능 구현

로그인 성공 시 main페이지로 이동

props를 사용하여 서버에 있는 id, password의 값이 일치할 경우
main페이지로 이동이 가능하도록 코드를 짰다.

🚫 여기서 주의해야 할 점은, 내가 기존에 state상에 비밀번호를
pwd로 설정했더니 서버에서의 비밀번호를 인식하지 못하길래
뭐가 문젠가 했더니,
서버 상에 비밀번호는 passwd라는 단어로 되어있어서 인식하지 못했던 것이었다.
key - value 로 연결되어 있기 때문에 정확한 단어를 써주어야 한다는걸 깨달았다.

조건문을 사용하여 json.success일 경우에는
props.history.replace('/main') 을 통해 main페이지로 이동이 가능하도록 했다.

error 메세지 띄우기

① 아이디 / 비밀번호 값이 하나라도 없을 경우

조건문을 사용하여 인풋창이 하나라도 비어있을 경우,
해당 메세지를 띄우도록 했다.

else if((state.id === '') || (state.passwd === '')) {
  setState({
    id : '',
    passwd : '',
    error: '아이디와 비밀번호를 모두 입력해주세요',
  })
}

② 아이디 / 비밀번호 값이 불일치 할 경우

서버상의 id, passwd값과 일치하지 않을 경우
해당 메세지를 띄우도록 했다.

else {
  setState({
    id : '',
    passwd : '',
    error : '존재하지 않는 아이디이거나, 올바르지 않은 비밀번호입니다'
  })
}

오류메세지를 조건에 충족할 경우 띄우는게 왜그리도 어려운지,
state를 사용해서 값을 조정하면 되는거였는데
그게 그렇게 적용이 되지가 않았다. (머릿속에 정리가 안됨 😂)

남은작업은 로그인 버튼을 눌렀을 때 spinner가 뜨게 하는건데
state를 사용하면 될 것 같은데 또다시 적용이 어려워져서
일단 건너뛰고 PR을 올렸다.

moon의 말로는 버튼에 onClick을 주어서 이벤트를 주면 될 것 같다길래
다시 리서치 해보았더니
state값을 boolean으로 설정한다음
삼항연산자를 사용해서, 클릭했을 때 true이면 spinner를 띄우고
false일 경우엔 버튼으로 남겨두면 될 것 같은데 조금 더 머리를 써보아야 될 것 같다ㅠㅠ

더 센스있는 기능들을 넣으면 좋겠지만 내 머리로는 한계..
우선은 이만큼 해두고 다음 페이지로 넘어가야 할 것 같다.
이 작업만 일주일이라니! 너무 한심할정도이다ㅠㅠ
다음 페이지에서는 더 복잡한 내용들이 나타나겠지만
속도를 좀 내야겠다.