Devcamp_LogInPage

로그인 페이지 구현

LoginPage.tsx

import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { FaUser, FaLock } from "react-icons/fa";
import { Link } from "react-router-dom";
import "./LoginPage.css";

const LoginPage = () => {
  return (
    <Form>
      <div id="loginPage">
        <div>
          <p id="loginTitle">로그인</p>
        </div>
        <div id="inputLoginInfo">
          <Form.Group className="mb-3" controlId="formBasicEmail">
            <FaUser size="25" color="#A4A4A4" />
            <Form.Control placeholder="U-Saint ID" />
          </Form.Group>

          <Form.Group className="mb-3" controlId="formBasicPassword">
            <FaLock size="25" color="#A4A4A4" />
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>
          <div id="loginBtnDiv">
            <Link to="/MainPage">
              <Button id="loginBtn" variant="primary" type="submit">
                <p id="loginBtnText">로그인</p>
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </Form>
  );
};

export default LoginPage;

LoginPage.css

html,
body {
  height: 100%;
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loginTitle {
  font-size: 24px;
  color: #a4a4a4;
  display: flex;
  justify-content: center;
}

.mb-3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#formBasicEmail {
  height: 25px;
  width: 80%;
  border-radius: 0px;
  border-top: none;
  border-left: none;
  border-right: none;
  margin: 15px;
}

#formBasicPassword {
  height: 25px;
  width: 80%;
  border-radius: 0px;
  border-top: none;
  border-left: none;
  border-right: none;
  margin: 15px;
}

#loginBtnDiv {
  display: flex;
  justify-content: center;
}

#loginBtn {
  border: none;
  border-radius: 10px;
  background-color: #50b4d2;
  width: 291px;
  height: 41px;
}

#loginBtnText {
  margin: 0px;
  color: white;
}

직면한 문제

justify-content나 align-items 로 화면 가운데로 오게 하고싶었지만 html에 쌓여있어서 아무리 해도 작동하지 않아 그냥 margin을 줘서 해결했었다.

해결

html,
body {
  height: 100%;
}

정말 간단하게 그냥 html,body height를 100%로 주면 되는데 margin으로 해결하려 했던 내가 바보같다...