[React] 로그인 페이지 구현

login.jsx

import React from "react";

export default function Login() {
    return (
        <div className="page">
            <div className="titleWrap">
                The login page was created with React.
            </div>
            <div className="contentWrap">
                <div className="inputTitle">이메일 주소</div>
                <div className="inputWrap">
                    <input className="input" placeholder="test@gmail.com" />
                </div>
                <div className="errorMessageWrap">
                    올바른 이메일을 입력해주세요.
                </div>

                <div className="inputTitle">비밀번호</div>
                <div className="inputWrap">
                    <input className="input" placeholder="영문, 숫자, 특수문자 포함 8자 이상" />
                </div>
                <div className="errorMessageWrap">
                    영문, 숫자, 특수문자 포함 8자 이상 입력해주세요
                </div>
                <div>
                    <button className="bottonButton">
                        확인
                    </button>
                </div>
            </div>
        </div>
    );
}

 

index.css

.page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 500px;
  padding: 0 20px;

  left: 50%;
  transform:  translate(-50%, 0);

  background-color: #F7F7F7F7;

  overflow: hidden;
  flex-direction: column;
}

.titleWrap {
  margin-top: 87px;
  font-size: 26px;
  font-weight: 700;
  color: #262626;
}

.contentWrap {
  margin-top: 26px;
  flex: 1;
}

.inputtitle {
  font-size: 12px;
  font-weight: 600;
  color: #262626;
}

.innputWrap {
  display: flex;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
  background-color: white;
  border: 1px solid #e2e0e0;
}

.innputWrap:focus-within {
  border:1px dolid #9e30f4
}

.input {
  width: 100%;
  outline: none;
  border: 1px;
  height: 30px;
  font-size: 10px;
  font-weight: 400;

}
.input::placeholder {
  color : #dadada;
}

.errorMessageWrap {
  margin-top: 8px;
  color: red;
  font-size: 12px;
  padding-bottom: 10%;
}

.bottonButton {
  width: 100%;
  height: 48px;
  border: none;
  font-weight: 700;
  background-color: grey;
  border-radius: 64px;
  color: white;
  margin-bottom: 16px;
}