Project-Log 3. 회원가입 화면 구현

🌊 물 들어올때 노를 저어라

한 주의 시작이기에 위코드에서의 일정으로 바쁜 오전 일과를 보냈다.
팀원들과 하루 종일 미팅을 하면서 프로젝트의 방향성을 다잡았고
각자의 진행 상황 공유와 모르는 부분을 함께 보면서 풀어나갔다.

로그인 기능 구현을 마무리하면서 오후 시간을 시작했으나, 한 가지 기능을
성공시키지 못해서 내일로 잠시 미루고 회원가입 화면을 구현했다.

- 모르는 점

• 약관 보기 부분이 각 줄마다 위치가 다르기에 한 곳으로 통일 시키는 작업이
  오래 걸렸다. 아직도 flex, position 등 레이아웃 배치에 대한 개념이 약하다는 것을 느꼈다.
• 체크박스의 크기는 조절이 가능했으나, 외형적인 부분, 클릭 시 변동 사항에 대해서는 아직 바꾸지 못했는데 'checkbox'에 대한 구글링을 더 해봐야겠다.

- 배운점

• 오늘 화면 구현을 진행하면서 가운데 border 선을 기준으로 위쪽은
  signUpBox, 밑쪽은 checkBox로 나누어서 작업을 했었고, 그중에서
  제일 어려웠던 부분은 체크박스 부분의 레이아웃 배치였다. 자꾸 한쪽으로
  치우쳐있는 상황이 발생했고 코드를 다시 천천히 읽어보니 맨 상위 태그에서 center가 먹지 않았던 상황이었고, 다시 수정한 뒤에 colum을 통해서 지금의
  자리를 찾아갈 수 있었다.

• 분명 내가 작성한 코드임에도 불구하고 실수가 발생했다. 오늘의 경험을
  한 번의 실수라고 위로하며 넘기지 말고 앞으로 계속해서 리팩토링과 조금은
  신중한 코드를 작성해야겠다고 느꼈다.

- 잘한 점과 개선할 점

• 로그인과 비슷한 부분이 많아서 시간이 오래 걸리지 않았고 하면서 무작정
  복붙하는 것이 아니라, 다시 복습하고 생각하면서 코드를 작성하였다.
• 구글링의 방법이 잘못된 것 같다. 조금 더 깊게, 영어로도 검색을 해보고
  다양한 방법으로 정보를 찾는 연습이 필요할 것 같다.

- 작성한 코드

• SignUp.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FaEye } from 'react-icons/fa';
import { FaEyeSlash } from 'react-icons/fa';
import './SignUp.scss';

class SignUp extends Component {
  constructor() {
    super();
    this.state = {
      id: '',
      password: '',
      isActive: false,
      seePw: false,
    };
  }

  changeIcon = () => {
    this.setState({
      seePw: !this.state.seePw,
    });
  };

  render() {
    const { seePw } = this.state;
    return (
      <section className='signUp'>
        <form action='' className='form'>
          <div className='signUpBox'>
            <div className='inputBox'>
              <p className='name'>이름</p>
              <input className='nameBox' type='text' placeholder='이름' />
              <p className='email'>이메일</p>
              <input className='emailBox' type='text' placeholder='이메일' />
              <p className='password'>비밀번호</p>
              <input
                className='passwordBox'
                type={seePw ? 'text' : 'password'}
                placeholder='비밀번호'
              />
              {seePw ? (
                <FaEyeSlash className='onEye' onClick={this.changeIcon} />
              ) : (
                <FaEye className='onEye' onClick={this.changeIcon} />
              )}
              <p className='address'>주소</p>
              <input className='addressBox' type='text' placeholder='주소' />
            </div>
            <div className='checkBox'>
              <div className='line'></div>
              <p className='agreement'>이용악관 동의</p>
              <div className='checkInput'>
                <div className='allAgree'>
                  <input className='headPoint' type='checkbox' />
                  <p className='agreedName'>전체 동의 합니다.</p>
                </div>
                <div className='subCheck'>
                  <input className='checkPoint' type='checkbox' />
                  <p className='agreedName'>이용약관 동의</p>
                  <p className='choose'>(필수)</p>
                  <Link className='readMore'>약관보기</Link>
                </div>
                <div className='subCheck'>
                  <input className='checkPoint' type='checkbox' />
                  <p className='agreedName'>개인정보 수집 및 이용 동의</p>
                  <p className='choose'>(필수)</p>
                  <Link className='readMore'>약관보기</Link>
                </div>
                <div className='subCheck'>
                  <input className='checkPoint' type='checkbox' />
                  <p className='agreedName'>마케팅 수신 동의</p>
                  <p className='choose'>(선택)</p>
                  <Link className='readMore'>약관보기</Link>
                </div>
                <div className='subCheck'>
                  <input className='checkPoint' type='checkbox' />
                  <p className='agreedName'>본인은 만 14세 이상입니다.</p>
                  <p className='choose'>(필수)</p>
                </div>
              </div>
              <button className='registerBox'>
                <p className='registerStyle'>REGISTER</p>
              </button>
            </div>
          </div>
        </form>
      </section>
    );
  }
}
export default SignUp;

• SignUp.scss

.signUp {
  .signUpBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 130px 40px 100px 40px;
    font-family: Helvetica;

    .inputBox {
      display: flex;
      flex-direction: column;
      width: 600px;

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

      .nameBox,
      .emailBox,
      .passwordBox,
      .addressBox {
        height: 43px;
        margin-bottom: 20px;
        padding-left: 10px;
        border: solid 1px;
        font-size: 15px;
        opacity: 0.8;
      }

      .onEye {
        position: relative;
        bottom: 50px;
        left: 560px;
        cursor: pointer;
      }
    }
  }

  .line {
    border: solid 1px black;
    margin-bottom: 20px;
  }

  .checkBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 600px;
    margin-top: 30px;

    .agreement {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .checkInput {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding-left: 150px;
      margin: 10px 0px 40px;

      .allAgree {
        display: flex;
        position: relative;
        align-items: center;
        margin-bottom: 30px;

        .headPoint {
          margin-right: 20px;
          width: 15px;
          height: 15px;
          cursor: pointer;
        }

        .agreedName {
          font-size: 25px;
        }
      }
    }

    .subCheck {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      width: 500px;

      .choose {
        margin-left: 5px;
        color: gray;
      }

      .checkPoint {
        margin-right: 20px;
        width: 15px;
        height: 15px;
        cursor: pointer;
      }

      .checkPoint:checked {
        color: white;
        background-color: black;
      }

      .readMore {
        position: absolute;
        margin-left: 300px;
        text-decoration: underline;
      }
    }

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

      .registerStyle {
        font-size: 23px;
        -webkit-transition: all 0.1s linear;
        transition: all 0.1s linear;
      }
    }

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

      .registerStyle: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);
      }
    }
  }
}

@media only screen and (max-width: 1000px) {
  .signUp {
    .signUpBox {
      width: 100vw;
    }

    .onEye {
      position: absolute;
      top: 255px;
      left: auto;
      bottom: auto;
      right: 30px;
      cursor: pointer;
    }
  }
}

💥 내일도 목표를 달성하기 위해서 파이팅!