[React/Node] 마켓컬리 클론코딩 6 - 로그인 페이지

• 로그인 페이지

 

이번 게시물은 딱히 내용이 없어서 그냥 건너뛸까 하다가, 이 다음으로 백엔드 쪽을 들여다볼 예정이라 임시로 마무리한다는 느낌으로 작성하기로 하였다.

 

<Login.js>

import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import user from "../elements/User";
import "../css/Login.css";

const Login = () => {
    const [id, setId] = useState('');
    const [pw, setPw] = useState('');
    const navigate = useNavigate();

    const checkUser = (e) => {
        e.preventDefault();
        const state = user.find(u => u.id === id && u.pw === pw);
        if(state){
            navigate(-1);
        }else{
            alert('아이디 또는 비밀번호를 확인해주세요.');
        }
    }

    return (
        <login>
            <div className="login_wrap">
                <h2>로그인</h2>
                <form onSubmit={checkUser}>
                    <div className="login_form">
                        <p><input 
                            className="login id" 
                            type="text" name="id" 
                            placeholder="아이디를 입력해주세요."
                            value={id}
                            onChange={(e)=>setId(e.target.value)}
                            /></p>
                        <p><input 
                            className="login pw" 
                            type="password" name="pw" 
                            placeholder="비밀번호를 입력해주세요."
                            value={pw}
                            onChange={(e)=>setPw(e.target.value)}
                            /></p>
                    </div>
                    <div className="find_my_account">
                        <a href="/find_my/id">아이디 찾기</a>
                        <div className="separator"></div>
                        <a href="/find_my/pw">비밀번호 찾기</a>
                    </div>
                    <div className="login_bt_wrap">
                        <input className="login_bt" type="submit" value="로그인" />
                        <input className="sign_up" type="button" value="회원가입" />
                    </div>
                </form>
            </div>
        </login>
    )
}

export default Login;
//별다른 효과는 아직 없는 상태. 로그인에 성공하면 홈페이지로 이동하는게 전부이다.
//이후 백엔드 연결시에 상태업데이트가 필요하고, 쿠키나 세션에 대한 개념이 없기에 추가적인 공부나 혹은 대체법이 필요.
//구현이 어느정도 되면 로그인 상태를 이용해 다른 페이지에 영향을 미치도록 세부적인 조정이 필요하다.

 

 

다른 부분은 일단 만들어만 두고, 로그인 버튼을 눌렀을 때에 동작만 일부 구현을 해두었다.

한 컴포넌트 내부이기 때문에 useState를 이용하였고, 로그인에 성공하였을 때 useNavigate를 이용해 로그인 페이지로 들어오기 전 페이지로 이동하도록 해두었다.

참고로, useHistory는  React Router v6 이후 버전부터 useNavigate로 변경되었다. useHistory 에러가 뜨길래 한참 고민했는데, 별다른 이상이 없는데 에러가 뜬다면 버전도 한번쯤 의심해보아야겠다.

 

<Login.css>

.login_wrap {
    padding: 0;
    width: 20%;
    text-align: center;
    margin: 80px 40%;
}

h2 {
    font-size: 18px;
    padding-bottom: 30px;
}

.login_form input {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid rgb(203, 203, 203);
    border-radius: 5px;
}

.login_form input[type="text"],
.login_form input[type="password"] {
    text-indent: 15px;
    font-weight: 600;
}

.find_my_account {
    font-size: 13px;
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.separator {
    width: 1px;
    height: 13px;
    background-color: gray;
    margin: 3px 5px 0 5px;
}

.login_bt_wrap input {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.login_bt {
    color: white;
    background-color: rgb(111, 0, 128);
    font-weight: 600;
}

.sign_up {
    color: rgb(111, 0, 128);
    background-color: white;
    font-weight: 600;
    border: 1px solid rgb(111, 0, 128);
}

 

 

 

 

https://memo-code.tistory.com/41

마켓컬리 클론코딩 7 - node.js express 연결