[React] Login.js UI 구현

오늘은 React로 로그인 UI 구현한 것을 기록하겠습니다.

회원가입 폼 대로 비슷하게 구현한 단순 UI이기 때문에 특별한 건 없네요..!

 

---

 

 

 

 

로그인 Login.js 컴포넌트 생성

• pages 폴더 아래에 Login.js 컴포넌트 생성
• css 폴더 아래에 Login.css 생성

 

import해주기

import React from "react";
import '../css/Login.css';
import Nav from "../components/Nav";

 

 

로그인 폼 & 아이디, 비밀번호 입력할 input창 생성

class Login extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <Nav/>
                </div>
                <form className="loginForm">
                    <div>
                        <h1 id='login_title'>로그인</h1>
                    </div>
                    <div>
                        <div className="input">
                            <input type="text" className="userId" id="userId" placeholder="아이디" autoFocus></input>
                            <input type="password" className="password" id="password" placeholder="비밀번호"></input>
                            <button id="loginBut">Login</button>
                        </div>
                        </div>
                </form>
            </div>
        )
    }
}

export default Login;

 

흔한 로그인 ui 이기 때문에 딱히 설명할건 없습니다.

• 아이디 인풋창에 autoFocus를 해주어 사용자의 편의성 향상
• 비밀번호 인풋창에 type="password"로 지정하여 보안성 향상

 

링크

                        <div className="link">
                            <NavLink to="/findId">아이디 찾기</NavLink>
                            <span>&nbsp;|&nbsp;</span>
                            <NavLink to="/findPw">비밀번호 찾기</NavLink>
                            <span>&nbsp;|&nbsp;</span>
                            <NavLink to="/register">회원가입</NavLink>
                        </div>

 

그 아래엔 아이디 찾기 / 비밀번호 찾기 /회원가입을 링크하여 사용자의 편의성을 향상시켰습니다.

React에서는 일반적으로 <a> 태그를 사용하여 하이퍼링크를 만드는 것보다는 react-router-dom의 NavLink 컴포넌트를 사용하여 내부 링크를 관리합니다.

 

import { NavLink } from "react-router-dom";

 react-router-dom의 NavLink를 꼭 import 해주어야 한다는 점 주의!

 

💻 프로젝트 최종 import문 모습

 

 

---

 

 

Login.css

* {
    box-sizing: border-box;
    font-family: 'SUIT-Medium';
}

div h5 {
    margin-bottom: 3px; 
    color: rgb(107, 107, 107);
}

.loginForm {
    width: 600px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    border: 5px solid rgb(163, 156, 231);
}

h1#login_title {
    margin-bottom: 50px; /* 로그인 글자와 아래 요소 간격 */
}

.input {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userId, .password {
    width: 300px;
    height: 40px;
    border : 1px solid rgb(163, 156, 231);
    border-radius:5px;
    padding: 0 10px;
    margin-bottom: 10px;
}

#loginBut {
    background-color: rgb(163, 156, 231);
    color : white;
    border : none;
    border-radius: 5px;
    font-size: 17px;
    height: 50px;
    width: 300px;
    margin : 20px 0 10px 0;
}

#loginBut:hover {
    background-color: #f8d1dd; /* 마우스 호버 시 색상 변경 */
}

.link a {
    text-decoration: none; /* 밑줄 제거 */
    color: rgb(107, 107, 107); /* 색상 변경 */
}

.link a:hover {
    color: #f8d1dd; /* 마우스 호버 시 색상 변경 */
}