Project-Log 1. 로그인 화면 구현

🔥 1차 프로젝트 시작

• 프론트 엔드 - 로그인 및 회원가입 화면, 기능 구현 임무

간단한 로그인 창 화면을 구현하는 것을 1차 목표로 삼고 진행했다.

- 모르는 점

• 모르는 점이라기 보다 아직도 flex를 활용한 레이아웃등 공간 배치하는 부분이
  많이 미숙했었다.
• 그렇기에 flex🔑에 대해서 더욱 공부하고 초반에 너무 시간을 오래 끌면 안되겠다고 생각했다.

- 배운점

• 로그인 버튼 밑에 회원가입과 비밀번호 찾기가 기존에는 세로로 붙어 있었는데 상위 태그에 justify-content: space-around🔑를 활용해서 공간적인 부분에서 더 간결하게 잘 표현할 수 있었다.

• justify-content🔑를 공부해 보니 “justify”는 메인 축 방향으로 정렬을 하고
  “align”은 수직 축 방향으로 정렬하는 것을 알 수 있었다.

• 그중에서 space-around🔑 는 아이템들의 “둘레(around)”에 균일한 간격을 말하고 여기서 아이템은!

• 부모 요소를 Flex Container(플렉스 컨테이너)라고 부르고,
  자식 요소를 Flex Item(플렉스 아이템)이라고 부르는 이 아이템이다.

- 잘한 점과 개선할 점

• hover 기능을 넣은 곳에 글자와 로그인 박스가 각자 움직이는 부분을 발견해서 동일한 움직임을 가질 수 있게 개선해야 할 것 같다.
• 코드를 조금 더 간결하게 할 수 있겠다는 생각이 들었고 그 해결방안을 추가로 찾아봐야 할 것 같다.
• CSS에서 하루 종일 발목을 붙잡혀있던 지난날과는 다르게 하루 동안
  눈에 보이는 진도를 나갔다는 점에서 스스로 조금이나마 성장했다고
  느낄 수 있었고 그래서 좋았다!!

- 작성한 코드

• SignIn.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './SignIn.scss';

class SignIn extends Component {
  render() {
    return (
      <section className='signIn'>
        <form action='' className='form'>
          <div className='signInBox'>
            <p className='email'>이메일</p>
            <input className='text' type='text' placeholder='이메일' />
            <p className='password'>비밀번호</p>
            <input
              className='passwordBox'
              type='password'
              placeholder='비밀번호'
            />
            <button className='loginButton'>
              <p className='loginStyle'>LOGIN</p>
            </button>
            <div className='search'>
              <Link className='signUp' to='/SignUP'>
                회원가입
              </Link>
              <Link className='findPassword' to=''>
                비밀번호 찾기
              </Link>
            </div>
            <button className='button'>LOGIN WITH KOKOA</button>
            <button className='button'>LOGIN WITH FACEKICK</button>
            <button className='button'>LOGIN WITH GARGLE</button>
          </div>
        </form>
      </section>
    );
  }
}

export default SignIn;

• SignIn.scss

.signIn {
  display: flex;
  justify-content: center;
  align-items: center;

  .signInBox {
    display: flex;
    flex-direction: column;
    width: 600px;
    margin: 130px 40px 100px 40px;
  }

  .email,
  .password {
    margin-bottom: 6px;
    font-size: large;
  }

  .text,
  .passwordBox {
    height: 43px;
    margin-bottom: 20px;
    padding-left: 10px;
    border: solid 1px;
    font-size: 15px;
  }

  .loginButton {
    height: 40px;
    margin-bottom: 21px;
    color: white;
    background-color: black;
    border-radius: 45px;
    border: none;
    font-size: large;
    cursor: pointer;

    .loginStyle {
      font-size: 20px;
      -webkit-transition: all 0.1s linear;
      transition: all 0.1s linear;
    }
  }

  .loginButton:hover {
    background-color: white;
    border: solid 1px black;

    .loginStyle:hover {
      color: black;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
    }
  }

  .search {
    display: flex;
    justify-content: space-around;
  }

  .signUp,
  .findPassword {
    margin-bottom: 90px;
    font-size: 17px;
    text-decoration: underline;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }

  .signUp:hover,
  .findPassword:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  .button {
    height: 45px;
    margin-bottom: 10px;
    background-color: white;
    border: solid 0.1px;
    border-radius: 45px;
    font-size: large;
    cursor: pointer;
  }
}

✨ 성장한 모습으로 팀원들과 함께 멋지게 프로젝트를 마무리하자!