[인스타그램 클론코딩] 03. 로그인 구현(Front-End)

1. SignIn.js 작성

const SignIn = () => {
    const signin = [
        {name: 'email', type: 'text', placeholder: '이메일'},
        {name: 'password', type: 'password', placeholder: '비밀번호'}
    ]

    const [inputs, setInputs] = useState({
        email: '',
        password: ''
    })

    const onChange = (e) => {
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name]: value
        });
    };

    const navigate = useNavigate();

    const onSubmit = () => {
        authAxios.post("/login", inputs)
            .then((res) => {
                const accessToken = res.data.accessToken;
                localStorage.setItem('accessToken', accessToken);
                alert("로그인에 성공하였습니다!");
                navigate("/outstagram");
            })
            .catch((err) => {
                alert(err.response.data);
            });
    };

    return (
        <>
            <div className={style.sign_input_container}>
                <div className={style.logo}>
                    OutStagram
                </div>
                {signin.map((component, idx) => {
                    return (<input key={idx} className={style.inputs} name={component.name} type={component.type} placeholder={component.placeholder} onChange={onChange}/>);
                })}
                <button className={style.buttons} onClick={onSubmit}>로그인</button>
            </div>

            <div className={style.sign_nav_container}>
                <div>
                    계정이 없으신가요?
                </div>
                <div className={style.nav_link} onClick={() => navigate('/users/sign-up')}>
                    가입하기
                </div>
            </div>
        </>
    );
};

export default SignIn;

 

- 회원가입과 마찬가지로 inputs의 값들을  백엔드의 /login url로 요청한 후, 요청이 올바르게 응답되었다면 accessToken을 localStorage에 저장 후 main 컨테이너로 redirec하고 에러가 발생했다면 그 에러에 대해 alert 해준다.

 

2. App.js 수정

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/users" element={<UserContainer/>}>
            <Route path='sign-in' element={<SignIn/>}/>
            <Route path='sign-up' element={<SignUp/>}/>
        </Route>
        <Route path="/outstagram" element={<MainContainer/>}>

        </Route>
      </Routes>
    </Router>
  );
}

export default App;

 

- url '/users/sign-in' 이 SignIn 컴포넌트를 랜더링하게 설정한다.

- url '/outstagram' 이 MainContainer 컴포넌트를 랜더링하게 설정한다.

 

 

3. 실제 동작 모습