TIL > fetch data

Agnes Shin·2022년 3월 6일
0
post-custom-banner

`import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './Login.scss';

function Login() {
const [idValue, setIdValue] = useState('');
const [pwValue, setPwValue] = useState('');
// const navigate = useNavigate();

const handleIdInput = e => {
setIdValue(e.target.value);
};

const handlePwInput = e => {
setPwValue(e.target.value);
console.log(idValue, pwValue);
};

const isValid = () => {
if (idValue.includes('@') && pwValue.length >= 8) {
return true;
}
return false;
};

// const condition = idValue.length > 0 && pwValue.length > 0;

const navigate = useNavigate();

const handleFetch = () => {
fetch('http://10.58.6.174:8000/users/signin', {
method: 'POST',
body: JSON.stringify({
email: idValue,
password: pwValue,
}),
})
.then(response => response.json())
.then(result => {
if (result.access_token) {
localStorage.setItem('token', result.access_token);
navigate('/');
} else {
alert('가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.');
}
});
};

return (

<div className="login">
  <h1>로그인</h1>
  <div className="loginFormBox">
    <form className="loginForm">
      <input
        className="loginInput"
        type="text"
        onChange={handleIdInput}
        placeholder="아이디 (이메일)"
        name="userName"
      />
      <input
        required
        className="loginInput"
        type="text"
        onChange={handlePwInput}
        placeholder="비밀번호"
        text="password"
      />
      <div className="idSave">
        <input id="checkbox" className="checkBox" type="checked" />
        <label htmlFor="checkbox" className="circle" />
        <span>아이디 저장</span>
      </div>
      <button
        type="button"
        className={isValid() ? 'loginBtn yellow' : 'loginBtn'}
        onClick={handleFetch}
        disabled={!isValid()}
      >
        로그인
      </button>
    </form>
    <div className="forgotContainer">
      <Link to="/" className="forgot" alt="아이디 찾기" /> 아이디찾기
      <Link to="/" className="forgot" alt="비밀번호 찾기" /> 비밀번호 찾기
    </div>
  </div>
</div>

);
}

export default Login;``
코드를 입력하세요

profile
30기 신윤숙 / FE
post-custom-banner

0개의 댓글