> React 로 로그인페이지 구현

기존에 HTML 과 CSS로 만든 로그인페이지를 React 를 이용하여 구현해보았다.
처음 상위태그로 지정해줄때는 css가 다깨지고 원래모양이 나오지 않아서 속상했다.. 하지만 여러 과정을 거쳐서 지금의 로그인 페이지를 구현했다

로그인페이지 SCSS

.Loginho {
  padding-left: 150px;
  .my-box {
    width: 500px;
    height: 500px;

    margin-left: 30%;
    margin-top: 5%;
    border: 1px solid rgb(192, 187, 187);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .img-box img {
      width: 250px;
      height: 100px;
      display: block;
      margin: 0px auto;
    }

    .wrap {
      height: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .login {
        margin-top: 20px;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        input {
          width: 300px;
          height: 50px;
          border-radius: 10px;
          margin-top: 10px;
          padding: 0px 20px;
          border: 1px solid rgb(192, 187, 187);
          outline: none;
          // transform: translate(75%, 20%);
        }
      }
      .button-box {
        .btn {
          color: white;
          font-size: 20px;
          font-weight: bold;
          background-color: #bfdffd;
          width: 300px;
          height: 50px;
          border: 0;
          outline: none;
          border-radius: 10px;

          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .sns {
        a {
          display: flex;
        }
        i {
          margin-right: 10px;
          margin-top: 5px;
        }
        .face {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          cursor: pointer;
          color: blue;
          font-weight: bold;
     
        }
      }
      .forget {
        
        font-size: 15px;
        cursor: pointer;
        margin-bottom: 10px;
      }
    }
  }
  .create {
    width: 500px;
    height: 10%;
    box-sizing: border-box;
    margin-left: 30%;
    margin-top: 3%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(192, 187, 187);
    padding: 10px;
  }
  .create {
    span {
      color: blue;
      text-decoration: underline;
      cursor: pointer;
      font-weight: bold;
    }
  }
}

이렇게 구현하면서 여러 어려움에 봉착했다

오타조심

처음 문제는 아무리 상위태그를 해도 scss가 먹지않아서 몇시간을 헤맸었다.. 분명히 상위태그를 잘주었고 그전에 했던 css를 참고하면서 똑같이 하길 반복했는데 계속 안먹는것이었다... 그러던중 유진Hong님이 제껄 봐주다가 오타가 난것을 발견하였다... Wrap 클래스를 Warp 라고 써져있었던 것이다...
이래서 개발자들이 오타조심 오타조심이라고 하는것이었다... 뻐져리게 느끼고 다음엔 절대로 오타를 내서는 안되겠다고 생각을하였다!!!

transform: translate 주의

처음 css 작업을했을 때 박스를 원하는대로 옮겨보겠다고 멋도모르고 transform:translate 를 썻었다. 그것도 모르고 div태그 속 내용물이있어야하는데 삐져나가 있는 걸 발견했다. margin과 padding을 써보면서 요리조리 움직였지만 근본적인 원인을 해결하지 못했었다. 그러던중 transform 을 주석처리해봤는데...??? 원인을 찾아버렸다.. 저것을 쓰니 정해진 박스안 이외에도 벗어나는걸 확인했다. 이번에도 유진 Hong 님이 저건 움직이는 이미지나 동적인 효과를 줄 때 써야한다고 알려줬다.다음부터는 하나하나 의미있게 써야하는걸 또 깨달아버렸다!!

이번 작업을 하면서 느낀점!

SCSS에선 항상 제일큰 부모태그가 감싸줘야하고 그다음 순차적으로 상위요소로 감싸줘야한다. 처음 부모태그를 줄때 혹시나 SCSS가 이상하게 바뀌어도 당황하지않고 침착하게 해결할 수 있는 능력을 길러야겠다. 기계는 거짓말을 하지않는다!!