Project-Log 3. 会員入選画面の実現

🌊 入水時にオールをこぐ

1週間のスタートだったので、上のコードの中のスケジュールで、忙しい午前を過ごしました.
私は一日中チームメンバーと会議をして、プロジェクトの方向を確定しました.
それぞれの進捗状況と知らない部分を共有して解答しました.
ログイン機能の実装が完了した後、午後から始まりました.
成功できず、明日まで延期し、会員入選画面を実現した.

-知らない

条項ビュー部分が行ごとに異なるために1つの位置に統一された操作
時間がかかりました.依然としてflexやpositionなどのレイアウトの概念が弱いと感じています.

チェックボックスの大きさは調節可能ですが、外形やクリック時の変動についてはまだ変わっていないので、「チェックボックス」に対するGoogle化を加えます.

-学んだこと

は今日、画面実装が行われ、真ん中の枠線から上へ
SignUpBox、底部はcheckBox、そのうち
一番難しい部分は格子部分のレイアウトです.いつも横に
歪んだ状況が発生して、私は再びゆっくりとコードを読んで、一番上のラベルの中でcenterが食べていないことを発見して、再修正した後にcolumを通じて今
席を見つけることができます.

は確かに私が書いたコードですが、エラーが発生しました.今日の経験.
一度のミスだからといって慰めてくれないで、これからも再構築と少しずつ
慎重なコードを書くべきだと思います.

-うまくやっている点と改善すべき点

登録と似たような場所が多いので、時間が長くなく、
復唱ではなく、思考を温め、コードを書く.

Googleのやり方は間違っているようです.もっと深く英語で検索して
いろいろな方法で情報を探す練習が必要かもしれません.

-作成されたコード

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;
    }
  }
}

💥 明日も目標達成できるよう頑張ります!