로그인 컴포넌트 생성하기

미리보기

로그인 컴포넌트 생성

리액트에서 컴포넌트를 생성하려면 함수를 선언하고 반환값으로 html 태그를 반환해야합니다.

컴포넌트를 생성하기 전에 먼저 index.css, App.css의 내용과 App.jsx의 App 메서드의 내용을 전부 지워주도록 하겠습니다.

 

다음으로 src폴더에 components라는 폴더를 생성하고 안에 Login.jsx라는 파일을 하나 생성합니다.

 

로그인을 하려면 ID, PASSWORD, 로그인 버튼이 필요하므로 form, input, button 태그를 이용하여 화면을 구성합니다.

다른 파일에서도 Login 컴포넌트를 불러올 수 있게 Login 함수를 기본 모듈로 설정합니다.

const Login = () => {
  return (
    <div className="Login">
      <form action="" className="login_form">
        <input type="text" placeholder="아이디" />
        <input type="password" placeholder="비밀번호" />
        <button>로그인</button>
      </form>
    </div>
  );
};

export default Login;

 

App.jsx에서 Login 컴포넌트를 불러온 후 Login 컴포넌트를 반환해 화면을 보이게 합니다.

import "./App.css";
import Login from "./components/Login";

function App() {
  return <Login />;
}

export default App;

레이아웃 구성하기

아이디, 비밀번호, 로그인 버튼이 왼쪽 상단에 몰려 있기 때문에 보기가 안좋습니다.

진짜 로그인 화면 같이 레이아웃을 구성해 주겠습니다.

먼저 index.css 파일에 다음과 같은 스타일을 작성해 주도록 하겠습니다.

바깥쪽 여백을 제거하는 css 코드입니다.

index.css

body {
  margin: 0;
}

 

바깥쪽 여백을 제거해서 아이디 Input 태그가 왼쪽에 딱 붙어있게 되었습니다.

중앙 정렬을 시키기 위해 Login 컴포넌트에 css 를 설정해 주겠습니다.

먼저 Login.css를 생성하고 Login 컴포넌트에 Login.css를 불러와 줍니다.

Login.jsx

import "./Login.css";

const Login = () => {
  return (
    <div className="Login">
      <form action="" className="login_form">
        <input type="text" placeholder="아이디" />
        <input type="password" placeholder="비밀번호" />
        <button>로그인</button>
      </form>
    </div>
  );
};

export default Login;

Login.css

Login클래스를 가지는 div 태그에 min-height 값을 100vh로 설정해 화면의 최소 높이를 브라우저 화면 전체로 설정하고

display 속성을 flex로 설정한 후 justify-content와 align-items를 center로 설정해 중앙정렬을 시켜줍니다.

 

.Login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

form 태그안에 요소들을 한줄씩 나오게 하기 위해 .login_form 클래스를 가지는 form 태그의 스타일을 지정해 주겠습니다.

flex-direction 속성을 이용해 form 태그 안 요소들 하나가 한줄 전체를 가지도록 설정해 줍니다.

.Login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login_form {
    display: flex;
    flex-direction: column;
}

 

스타일 설정하기

Form 스타일

로그인 폼을 눈에 잘 보이게 하기 위해 배경색을 주고 최소 크기를 400px로 설정해줍니다.

padding값을 상하좌우 30px씩 갖도록 안쪽여백을 설정하고 경계선과 그림자도 설정해줍니다.

둥글둥글한 효과를 주기 위해 border-radius를 5px로 설정하여 박스의 모서리 부분을 동그랗게 설정해 줍니다.

.login_form {
    display: flex;
    flex-direction: column;

    background-color: rgb(236, 236, 236);
    min-width: 400px;
    padding: 30px;
    border: 1px solid rgb(232, 232, 232);
    box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px;
    border-radius: 5px;
}

Input 스타일

기본적인 폰트 크기를 15px로 설정하고 배경색 과 글자색을 설정해줍니다.

line-height로 줄 간격을 30px로 설정하고 margin과 padding 으로 바깥 여백 상하에는 4px 안쪽 여백은 상하좌우 10px갖도록 만들어 줍니다.

경계선과 둥글둥글한 모서리를 설정해주고 윤곽선을 안쓰도록 설정해줍니다.

다음으로 hover나 focus 즉 마우스를 올리거나 요소의 커서를 클릭 했을때 변화가 0.5초에 걸쳐 일어나도록 transition 속성을 설정해줍니다.

input 이나 focus 되었을때 윤곽선을 안보이게 하고 경계선, 배경색, 그림자를 설정해줍니다.

.login_form > input {
    font-size: 15px;
    
    background-color: #f8fafc;
    color: #0d0c22;

    line-height: 30px;
    margin: 4px 0px;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
    outline: none;
    transition: 0.5s ease;
}

.login_form > input::placeholder {
    color: #94a3b8;
}

.login_form > input:focus,
.login_form > input:hover {
  outline: none;
  border-color: rgba(129, 140, 248);
  background-color: #fff;
  box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
}

Button 스타일

버튼의 배경색을 input 태그에 설정한 값과 비슷하게 설정해줍니다.

안쪽여백 상하좌우 12px ,경계선, 둥글둥글한 모서리를 설정해줍니다.

 

마우스를 올렸을때 클릭하는 모양이 되도록 cursor 값을 pointer로 설정해줍니다.

transition 속성으로 0.2초동안 변화가 일어나도록 설정해줍니다.

user-select 속성으로 버튼의 텍스트를 선택할 수 없도록 설정해줍니다.

 

마우스를 버튼에 올렸을 때 배경색을 기존과 비슷하지만 다르게 설정해줍니다.

마우스로 버튼을 클릭했을때 버튼의 크기를 기존 크기의 0.95로 설정해줍니다.

 

.login_form > button {
  background-color: rgb(169, 169, 240);
  padding: 12px;
  border-radius: 5px;
  border: 2.5px solid #e0e1e4;
  box-shadow: 0px 0px 0px 0px;
  cursor: pointer;
  transition: all 0.2s ease-in-out 0ms;
  user-select: none;
}

.login_form > button:hover {
  background-color: rgb(203, 203, 245);
}
.login_form > button:active {
  transform: scale(0.95);
}