입력 확인 모달 창

제출하기 버튼 클릭 시, 모든 input의 값이 유효한 상태일 경우 입력한 아이디와 비밀번호를 확인할 수 있는 모달 창을 보여주어야 합니다.

"취소하기" 버튼 클릭 시 모달 창이 닫혀야 합니다.

"가입하기" 버튼 클릭 시 윈도우의 alert 창을 이용해 "가입되었습니다 🥳 " 라는 메시지를 출력해야 합니다.

기존 코드 분리

기존 코드는 따로 return하는 값이 없어 모든 input값이 유효할 때 모달창을 띄우는 로직을 구현하기 어렵다.

따라서 코드를 분리한 후, 모든 input이 return 값으로 true일 경우 모달 창을 열려고 한다.

기존 코드

const ID_ERROR_MSG = {
    required: '필수 정보입니다.',
    invalid: '5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.',
}

// 유효성 검사 로직
// id 유효성 검사
const checkIdValidation = (value) => {
    let isValidId
    if (value.length === 0) {
        isValidId = 'required'
    } else {
        isValidId = ID_REGEX.test(value) ? true : 'invalid'
    }
    // 에러메세지 구현
    // 유효하지 않을 경우
    if (isValidId !== true) {
        $id.classList.add('border-red-600') // 빨간 테두리 추가
        $idMsg.innerText = ID_ERROR_MSG[isValidId] // 에러메세지 추가
    } else {
        $id.classList.remove('border-red-600')
        $idMsg.innerText = ''
    }
}
$id.addEventListener('focusout', () => checkIdValidation($id.value))

// 비밀번호 유효성 검사
const checkPwValidation = (value) => {
    let isValidPw
    if (value.length === 0) {
        isValidPw = 'required'
    } else {
        isValidPw = PW_REGEX.test(value) ? true : 'invalid'
    }
    if (isValidPw !== true) {
        $pw.classList.add('border-red-600')
        $pwMsg.innerText = PW_ERROR_MSG[isValidPw]
    } else {
        $pw.classList.remove('border-red-600')
        $pwMsg.innerText = ''
    }
}
$pw.addEventListener('focusout', () => checkPwValidation($pw.value))

// 비밀번호 확인
const PW_CHECK_ERROR_MSG = {
    required: '필수 정보입니다.',
    invalid: '비밀번호가 일치하지 않습니다.',
}

// 비밀번호 확인 유효성 검사
const checkPwCheckValidation = (value) => {
    // 비밀번호와 비밀번호확인이 같은지 확인
    let isValidPwCheck
    if (value.length === 0) {
        isValidPwCheck = 'required'
    } else {
        isValidPwCheck = $pw.value === value ? true : 'invalid'
    }

    if (isValidPwCheck !== true) {
        $pwCheck.classList.add('border-red-600')
        $pwCheckMsg.innerText = PW_CHECK_ERROR_MSG[isValidPwCheck]
    } else {
        $pwCheck.classList.remove('border-red-600')
        $pwCheckMsg.innerText = ''
    }
}
$pwCheck.addEventListener('focusout', () =>
    checkPwCheckValidation($pwCheck.value)
)

수정 후 코드

const ID_ERROR_MSG = {
    required: '필수 정보입니다.',
    invalid: '5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.',
}

const checkIdRegex = (value) => {
    if (value.length === 0) {
        return 'required'
    } else {
        return ID_REGEX.test(value) ? true : 'invalid'
    }
}

const checkIdValidation = (value) => {
    const isValidId = checkIdRegex(value)

    if (isValidId !== true) {
        $id.classList.add('border-red-600') // 빨간 테두리 추가
        $idMsg.innerText = ID_ERROR_MSG[isValidId] // 에러메세지 추가
    } else {
        $id.classList.remove('border-red-600')
        $idMsg.innerText = ''
    }

    return isValidId
}
$id.addEventListener('focusout', () => checkIdValidation($id.value))

const PW_ERROR_MSG = {
    required: '필수 정보입니다.',
    invalid: '8~16자 영문 대 소문자, 숫자를 사용하세요.',
}

const checkPwRegex = (value) => {
    if (value.length === 0) {
        return 'required'
    } else {
        return PW_REGEX.test(value) ? true : 'invalid'
    }
}

const checkPwValidation = (value) => {
    const isValidPw = checkPwRegex(value)

    if (isValidPw !== true) {
        $pw.classList.add('border-red-600')
        $pwMsg.innerText = PW_ERROR_MSG[isValidPw]
    } else {
        $pw.classList.remove('border-red-600')
        $pwMsg.innerText = ''
    }
    return isValidPw
}
$pw.addEventListener('focusout', () => checkPwValidation($pw.value))

const PW_CHECK_ERROR_MSG = {
    required: '필수 정보입니다.',
    invalid: '비밀번호가 일치하지 않습니다.',
}

const checkPwCheckRegex = (value) => {
    if (value.length === 0) {
        return 'required'
    } else {
        return $pw.value === value ? true : 'invalid'
    }
}

const checkPwCheckValidation = (value) => {
    let isValidPwCheck = checkPwCheckRegex(value)

    if (isValidPwCheck !== true) {
        $pwCheck.classList.add('border-red-600')
        $pwCheckMsg.innerText = PW_CHECK_ERROR_MSG[isValidPwCheck]
    } else {
        $pwCheck.classList.remove('border-red-600')
        $pwCheckMsg.innerText = ''
    }
    return isValidPwCheck
}
$pwCheck.addEventListener('focusout', () =>
    checkPwCheckValidation($pwCheck.value)
)

모달 구현

// 4.입력 확인 시 모달 창
const $modal = document.getElementById('modal') // modal
const $confirmId = document.getElementById('confirm-id') // 모달창에서 id
const $confirmPw = document.getElementById('confirm-pw') // 모달창에서 pw

const $submit = document.getElementById('submit')

$submit.addEventListener('click', (e) => {
    e.preventDefault() // 기본 기능 방지

    // 모든 input값의 유효성 검사
    const isValidForm =
        checkIdValidation($id.value) === true &&
        checkPwValidation($pw.value) === true &&
        checkPwCheckValidation($pwCheck.value) === true

    // 모든 input값이 유효할 경우 
    if (isValidForm) {
        $confirmId.innerText = $id.value
        $confirmPw.innerText = $pw.value
        $modal.showModal()
    }
})

// 버튼 로직 구현
const $cancleBtn = document.getElementById('cancel-btn')
const $approveBtn = document.getElementById('approve-btn')

$cancleBtn.addEventListener('click', () => {
    $modal.close() // 모달 닫기
})

$approveBtn.addEventListener('click', () => {
    window.alert('가입되었습니다 🥳 ') // 알림
    $modal.close() // 모달 닫기
    window.location.reload() // 새로고침
})