코드캠프 1주차 복습

정희준·2023년 3월 7일
개발자코드캠프
0

1주차 복습

오늘은 html,css,javascript 를 배운 1주차 내용을 종합하여 만든 하나의 로그인 페이지에 대해 복습 해볼 예정이다!

📌 오늘의 내용

우선 완성된 화면의 모습부터 알아보자

위 사진처럼 회원가입을 할 수 있는 모습이며 이메일, 이름, 비밀번호, 핸드폰번호, 지역, 성별을 입력받고 인증번호 전송과 인증확인 기능, 필수 입력체크 기능이 들어간 화면이다 html 부터 코드를 확인해보자

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>회원가입</title>
    <link rel="stylesheet" href="./final.css">
    <script src="./final.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="title">코드캠프 회원가입</div>
        <div class="info">
            <input id="email" type="text" placeholder="이메일을 입력해 주세요.">
            <div class="errorMessage" id="emailErrorMessage"></div>
        </div>
        <div class="info">
            <input id="name" type="text" placeholder="이름을 입력해 주세요.">
            <div class="errorMessage" id="nameErrorMessage"></div>
        </div>
        <div class="info">
            <input id="pw1" type="text" placeholder="비밀번호를 입력해 주세요.">
            <div class="errorMessage" id="pw1ErrorMessage"></div>
        </div>
        <div class="info">
            <input id="pw2" type="text" placeholder="비밀번호를 다시 입력해 주세요.">
            <div class="errorMessage" id="pw2ErrorMessage"></div>
        </div>
        <div class="phone__wrapper">
            <div class="phoneNumDiv">
                <input id="pNum1" type="text" maxlength="3" oninput="changeFocus1()">-
                <input id="pNum2" type="text" maxlength="4" oninput="changeFocus2()">-
                <input id="pNum3" type="text" maxlength="4" oninput="changeFocus3()">
            </div>
            <div class="tokenSendDiv">
                <div class="tokenText" id="tokenNum">000000</div>
                <button class="tokenBtn" id="tokenSend" onclick="tokenSend()" disabled="true">인증번호 전송</button>
            </div>
            <div class="tokenSubMitDiv">
                <div class="tokenText" id="tokenTimer">3:00</div>
                <button class="tokenBtn" id="tokenSubmit" onclick="tokenSubmit()"  disabled="true">인증확인</button>
            </div>
        </div>
        <div class="locationDiv">
            <select id="location">
                <option disabled="true" selected="true">지역을 선택하세요.</option>
                <option>인천</option>
                <option>서울</option>
                <option>경기</option>
            </select>
            <div class="errorMessage" id="locationErrorMessage"></div>
        </div>
        <div class="genderDiv">
            <div class="gender">
                <input type="radio" name="gender" value="W" id="gender1">여성
                <input type="radio" name="gender" value="M" id="gender2">남성
            </div>
            <div class="errorMessage" id="genderErrorMessage"></div>
        </div>
        <div class="divideLine"></div>
        <button class="submit" id="submit" onclick="submit()" disabled="true">가입하기</button>
    </div>
</body>
</html>

html의 구조를 큰 틀로 살펴보면
가장 큰 div(.wrapper)로 감싸 주었고 같은 타이틀로 활용할 div(.title)
정보를 입력받을 div(.info , .phone_wrapper, .locationDiv, .genderDiv)
가입하기 버튼(.submit)이 .wrapper의 자식요소로 구성 되어있다

.info 의 경우 같은 css 속성을 적용 시키기 위해 같은 class 명을 사용한 것을 확인할 수 있다.
그리고 함수를 사용 하기 위한 oninput,onclick 속성을 사용한 것을 확인할 수 있다.

그 다음 html을 꾸미기 위한 css 에 대해 알아보자

* {
    box-sizing: border-box;
    margin: 0;
}

html,
body {
    width: 1920px;
    height: 1196px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 540px;
    height: 960px;
    background-color: #ffffff;
    border: 1px solid #AACDFF;
    box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.title {
    width: 380px;
    text-align: left;
    font-family: 'Noto Sans CJK KR';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 47px;
    margin : 10px 0px;
    color: #0068FF;
}

.info>input {
    width: 380px;
    height: 60px;
    background: #FFFFFF;
    border: 1px solid #D2D2D2;
    border-radius: 7px;
}

.errorMessage {
    width: 380px;
    text-align: center;
    font-size: 7px;
    color: red;
}

.phone__wrapper {
    width: 380px;
    display: flex;
    flex-direction: column;
}

.phoneNumDiv {
    width: 380px;
    /* font-size: 11px; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.phoneNumDiv>input {
    width: 100px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #D2D2D2;
    border-radius: 7px;
}

.tokenSendDiv {
    margin-top: 15px;
    width: 380px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.tokenSubMitDiv {
    margin-top: 15px;
    width: 380px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.tokenText {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #0068FF;
}

.tokenBtn {
    width: 120px;
    height: 40px;
    border-radius: 7px;
    border: 1px solid #D2D2D2;
    margin-left: 15px;
    font-family: 'Noto Sans CJK KR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

#location {
    width: 380px;
    height: 60px;
    background: #FFFFFF;
    border: 1px solid #D2D2D2;
    border-radius: 7px;
}

.genderDiv {
    width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gender {
    display: flex;
    flex-direction: row;
    justify-content: center;     
}

.gender>input {
    margin: 3px;
}

#gender2 {
    margin-left: 15px;
}

.divideLine {
    border-top: 1px solid #E6E6E6;
    width: 380px;
}

.submit {
    width: 380px;
    height: 75px;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
}

input , select {
    padding: 10px;
}

위 코드를 살펴보자

  • 전체 태그 선택자에 레이아웃이 변경 되지 않도록 border-box로 지정
  • body의 flex 속성을 이용하여 자식요소 가운데 정렬
  • 메인 요소들을 감싸는 box 개념의 .wrapper 크기,배경색상,배경테두리,배경그림자 설정 flex속성 이용 자식요소 정렬
  • 곳곳의 font 속성으로 글자 설정 margin,padding을 이용 하여 레이아웃 맞추기

flex를 활용한 레이아웃이다.

마지막으로 기능을 작성한 js 파일을 알아보자

// oninput 속성을 통해 함수가 발동 되며 포커스를 옮겨주는 함수
const changeFocus1 = () => {
  //#pNum1의 value
  let pNum1 = document.getElementById("pNum1").value;
  if (pNum1.length === 3) {
    document.getElementById("pNum2").focus();
  }
};
// oninput 속성을 통해 함수가 발동 되며 포커스를 옮겨주는 함수
const changeFocus2 = () => {
  //#pNum2의 value
  let pNum2 = document.getElementById("pNum2").value;
  if (pNum2.length === 4) {
    document.getElementById("pNum3").focus();
  }
};
// oninput 속성을 통해 함수가 발동 되며 버튼의 상태를 변경 해주는 함수
const changeFocus3 = () => {
  //#pNum3의 value
  let pNum2 = document.getElementById("pNum3").value;
  if (pNum2.length === 4) {
    //#tokenSend 버튼 활성화,css 변경
    document.getElementById("tokenSend").disabled = false;
    document.getElementById("tokenSend").style =
      "background-color:#FFFFFF; border-color: #0068FF; color: #0068FF; cursor: pointer;";
  }
};

let timer;
// onclick 속성을 통해 함수가 발동 되며 인증번호 생성을 해주는 함수
const tokenSend = (arg) => {
  // Math 함수 이용하여 6자리 랜덤 번호 생성
  const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
  // #tokenSend 비활성화, css 초기화, #tokenNum 텍스트 변경
  document.getElementById("tokenSend").disabled = true;
  document.getElementById("tokenSend").style = "";
  document.getElementById("tokenNum").innerText = token;

  let time = 180;

  // timer 기능 setInterval 함수 사용 하여 1초마다 반복
  timer = setInterval(function () {
    if (time >= 0) {
      // 0초가 될 때 까지 타이머 작동 중 버튼 활성화, css 변경, 텍스트 변경
      let min = Math.floor(time / 60);
      let sec = String(time % 60).padStart(2, "0");
      time = time - 1;

      document.getElementById("tokenSubmit").disabled = false;
      document.getElementById("tokenSubmit").style =
        "background-color:#0068FF; color: #FFFFFF; cursor: pointer;";
      document.getElementById("tokenTimer").innerText = min + ":" + sec;
    } else {
      // 타이머 종료 시 버튼 (활성화,비활성화), css 변경, 텍스트 변경
      document.getElementById("tokenNum").innerText = "000000";
      document.getElementById("tokenTimer").innerText = "3:00";

      document.getElementById("tokenSubmit").disabled = true;
      document.getElementById("tokenSubmit").style = "";

      document.getElementById("tokenSend").disabled = false;
      document.getElementById("tokenSend").style =
        "background-color:#FFFFFF; border-color: #0068FF; color: #0068FF; cursor: pointer;";
      // timer 함수 중단 시키기
      clearInterval(timer);
    }
  }, 1000);
};

// onclick 속성을 통해 함수가 발동 되며 인증 완료 버튼 함수
const tokenSubmit = () => {
  let tokeTimer = document.getElementById("tokenTimer").innerText;

  if (tokenTimer !== "0:00") {
    // 타이머 종료 하기 전 인증완료 알러트와 버튼 활성화, css 변경, 텍스트 변경
    alert("인증이 완료되었습니다.");
    // timer 함수 중단 시키기
    clearInterval(timer);

    document.getElementById("tokenNum").innerText = "000000";
    document.getElementById("tokenTimer").innerText = "3:00";

    document.getElementById("tokenSubmit").disabled = true;
    document.getElementById("tokenSubmit").innerText = "인증완료";
    document.getElementById("tokenSubmit").style = "";

    document.getElementById("tokenSend").disabled = true;

    document.getElementById("submit").disabled = false;
    document.getElementById("submit").style =
      "background-color:#FFFFFF; border-color: #0068FF; color: #0068FF; cursor: pointer;";
  }
};

// onclick 속성을 통해 발동 되며 입력값들을 체크 하는 함수
const submit = () => {
  // 입력값
  let email = document.getElementById("email").value;
  let name = document.getElementById("name").value;
  let pw1 = document.getElementById("pw1").value;
  let pw2 = document.getElementById("pw2").value;
  let location = document.getElementById("location").value;
  let woman = document.getElementById("gender1").checked;
  let man = document.getElementById("gender2").checked;

  // 조건 체크용 변수
  let isValid = true;
  // 이메일 입력값 체크
  if (!email.includes("@")) {
    document.getElementById("emailErrorMessage").innerText =
      "이메일이 올바르지 않습니다.";
    isValid = false;
  } else {
    document.getElementById("emailErrorMessage").innerText = "";
  }
  // 이름 입력값 체크
  if (name === "") {
    document.getElementById("nameErrorMessage").innerText =
      "이름이 올바르지 않습니다.";
    isValid = false;
  } else {
    document.getElementById("nameErrorMessage").innerText = "";
  }
  // 비밀번호 입력값 체크
  if (pw1 === "" || pw2 === "" || pw1 !== pw2) {
    document.getElementById("pw1ErrorMessage").innerText =
      "비밀번호를 입력해 주세요.";
    document.getElementById("pw2ErrorMessage").innerText =
      "비밀번호를 입력해 주세요.";
    isValid = false;
  } else {
    document.getElementById("pw1ErrorMessage").innerText = "";
    document.getElementById("pw2ErrorMessage").innerText = "";
  }
  // 지역 입력값 체크
  if (location === "지역을 선택하세요.") {
    document.getElementById("locationErrorMessage").innerText =
      "지역을 선택해주세요.";
    isValid = false;
  } else {
    document.getElementById("locationErrorMessage").innerText = "";
  }
  // 성별 입력값 체크
  if (!woman && !man) {
    document.getElementById("genderErrorMessage").innerText =
      "성별을 선택해주세요.";
    isValid = false;
  } else {
    document.getElementById("genderErrorMessage").innerText = "";
  }
  // 모든 조건 통과시 가입 완료 알러트
  if (isValid) {
    alert("코드캠프 가입을 축하합니다.");
  }
};

주석으로 함수의 기능들과 작동 조건에 대해 설명해 보았다
간략하게 Dom 조작을 통해 css 변경, Text 변경, 입력값 체크, 인증번호, 타이머 기능들이다.

1주차 마무리

1주차는 간략하게 종합적으로 배운 주차여서 크게 어려운 기능들은 없었지만 정말 자주 사용할 기능들이니 다시 한번 복습 !

profile
정희준
같이 일하고 싶은 사람이 되어보자! 다시 시작하는 개발 블로그.
이전 포스트

코드캠프 15일차

다음 포스트

코드캠프 2주차 복습

0개의 댓글