부트캠프 5일차! 회원가입 인증창 만들기

이제 부트캠프를 시작한지 일주일이 다 지나간다.

5일 마지막 과제는 극악의 난이도를 자랑한다...

 

회원가입 인증창 만들기

1주차 파이널 과제,

UI만 봤을 때 금방 끝날 줄 알았다.

실제로 HTML CSS로 UI 작업은 1시간 내로 끝났기에 더 자신감이 있었다.

 

하지만 문제는 기능 구현 ..!

 

구현해야할 기능

 

1. 지역선택하기는 서울, 인천, 경기 가능하도록 구현

2. '지역을 선택하세요'는 선택 불가능하도록 비활성화

3. 남성, 여성 성별 선택은 둘 중에 하나만 선택 가능하도록 구현

4. 휴대폰번호 입력칸에서 3자리 혹은 4자리 번호 입력 조건 만족시 다음칸으로 포커스 이동

5. 휴대폰 번호 모두 입력 시 '인증번호 전송' 버튼 활성화

6. '인증번호 전송' 버튼 클릭 시 6자리 수의 랜덤 토큰 생성 및 3:00분 타이머 작동

7.  3분 타이머 작동 시 '인증확인' 버튼 활성화

8. 3분 내에 '인증확인' 버튼 클릭시 '인증이 완료되었습니다' 알람 메시지 작동

9. 3분 초과 시 '인증 확인' 버튼 비활성화 & 토큰 번호 및 시간 3:00으로 초기화

10. 3분 내에 인증 완료 시 비활성화 되어있던 '가입하기' 버튼 활성화

11. '가입하기' 버튼 클릭 시 이메일, 이름, 비밀번호, 지역선택, 성별선택 미입력 체크 후 에러메세지 구현

12. 이메일은 '@' 미포함시에도 에러메시지 구현

13. 비밀번호 일치하지 않을 때 에러메시지 구현

14. '가입하기' 버튼 재클릭 시 위의 검증 다시 실행 조건에 만족하면 에러메세지 제거

15. 에러메세지가 없는 경우 "가입을 축하합니다." 메세지 작동

 

진짜 어마어마한 기능 구현이다 ㅠㅠ

 

차근차근 트라이해본 결과 10번까지는 어찌저찌 기능을 구현했다.

강의를 돌려보며 따라하다보니 되긴하더라.

 

하지만 문제는 11번부터 15번.

5시간 동안 머리를 싸매면서 겨우 13번까지 구현했다.

 

let isStarted = false;

let auth = () => {
    document.getElementById("button_signup").disabled = true;
    document.getElementById("btn").disabled = true
    if(isStarted === false) {
        // 타이머가 작동 중이 아닐 떄
        isStarted = true
        document.getElementById("btn2").disabled = false
        document.getElementById("btn2").style.backgroundColor = 'blue'
        document.getElementById("btn2").style.color = 'white'
        document.getElementById("btn2").style.border = 'solid blue'
        let number = document.getElementById('number')
        let timer_number = document.getElementById('time')
        let random = String(Math.floor(Math.random() * 1000000) ).padStart(6,"0")

        number.innerText = random;
        number.style.color = "#0068FF"
        
        let time = 3
        let timer

        timer = setInterval(function() {
            if (time >= 0){
                let min = Math.floor(time / 60);
                let sec = String(time % 60).padStart(2, "0");
                document.getElementById("time").innerText = `${min} : ${sec}`;
                time = time - 1
            } else {
                document.getElementById("btn2").disabled = true
                
                isStarted = false
                clearInterval(timer)
                document.getElementById("btn").disabled = false;
                number.innerText = "000000"
                timer_number.innerText = "3:00"
            }
        }, 1000)
    } else {
        //타이머가 작동중일 떄
    }
}

const changeFocus1 = () => {
    let phone1 = document.getElementById("p1").value
    if(phone1.length === 3){
        document.getElementById("p2").focus()
    }
}

const changeFocus2 = () => {
    let phone1 = document.getElementById("p2").value
    if(phone1.length === 4){
        document.getElementById("p3").focus()
    }
}

const changeFocus3 = () => {
    let phone1 = document.getElementById("p3").value

    if(phone1.length === 4){
        document.getElementById("btn").disabled = false;
        document.getElementById("btn").style.color = '#0068FF'
        document.getElementById("btn").style.backgroundColor = 'white'
        document.getElementById("btn").style.border = "solid blue"
    }
}

function confirm(){
    alert("인증이 완료되었습니다.");
    let signupBtn = document.getElementById("button_signup")
    signupBtn.disabled = false;
    signupBtn.style.backgroundColor = 'white'
    signupBtn.style.color = 'blue'
    signupBtn.style.border = 'solid blue'

    document.getElementById("btn2").innerText = "인증완료"
}

function InputState() {
    OnSignupButton();
}

function OnSignupButton() {
    let signupBtn = document.getElementById('button_signup');
    let emailInput = document.getElementById('email_input');
    let emailError = document.getElementById('email_error');
    let nameError = document.getElementById('name_error');
    let nameInput = document.getElementById('name_input');
    let pw1Error = document.getElementById('pw1_error');
    let pw1Input = document.getElementById('pw1_input');
    let pw2Error = document.getElementById('pw2_error');
    let pw2Input = document.getElementById('pw2_input');
    let selectError = document.getElementById('select_error');
    let selectInput = document.getElementById('select_input');
    let checkError = document.getElementById('check_error');
    let check1Input = document.getElementById('check1_input');
    let check2Input = document.getElementById('check2_input');

    if (emailInput.value === "" || emailInput.value.indexOf('@') === -1) {
        emailError.style.visibility = "visible"
    } 
    if (nameInput.value === "") {
        nameError.style.visibility = "visible"
    } 
    if (pw1Input.value === "" || pw2Input.value !== pw1Input.value) {
        pw1Error.style.visibility = "visible"
    }
    if (pw2Input.value === "" || pw2Input.value !== pw1Input.value) {
        pw2Error.style.visibility = "visible"
    }
    if (selectInput.value === '지역을 선택하세요') {
        selectError.style.visibility = "visible"
    }
    if (check1Input.checked === false && check2Input.checked === false) {
        checkError.style.visibility = "visible"
    } 
}

13번 까지 구현한 js 코드다.

카멜이니 뭐니 컨벤션은 하나도 지키지 않은 것을 둘째치고

OnSignupButton 함수는 정말 극악의 코드다.

 

해당하는 모든 html요소를 일일이 불러와서 하나씩 if문을 실행시켰다.

 

14번과 15번은 계속 시도해봤지만 끝내 구현하지 못했다.

함수를 재실행 해야하는 것인데

첫번째에 이미 실행된 함수를 초기화하는 방법을 찾지 못했다

 

결국 모든 기능을 구현하지 못했지만

이것저것 시도해보면서 코드에 익숙해진 것 같아

과제를 하면 보낸 삽질 시간에 만족한다.

 

---

2022-12-23일

boolean 변수를 선언하고 그 상태를 조건문에 넣어 계속 판별되도록 14,15번의 기능도 구현했다.

역시 코딩은 끝까지 완성하는 경험이 필요하다. 중도포기는 전체의 포기다