회원가입 폼 (Vanilla JS) - 2

오늘 해본 요구사항은 4, 5이다. 추가적으로 리팩토링까지 해봤다.

4. 입력 확인 모달 창 구현 ✅

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

const $confirmId = document.getElementById('confirm-id')
const $confirmPw = document.getElementById('confirm-pw')

const $cancelBtn = document.getElementById('cancel-btn')
const $approveBtn = document.getElementById('approve-btn')

• 제출하기 버튼 클릭 시, 모달 창 보여주기
• 모든 input 의 값이 유효한 상태

$submit.addEventListener('click', (e) => {
  e.preventDefault()
  const isValidForm =
    checkValidation($id, $idMsg) === true &&
    checkValidation($pw, $pwMsg) === true &&
    checkValidation($pwCheck, $pwCheckMsg) === true
  if (isValidForm) {
    $confirmId.innerText = $id.value
    $confirmPw.innerText = $pw.value
    $modal.showModal()
  }
})

• 취소하기 버튼 클릭 시, 모달 창 닫히기

$cancelBtn.addEventListener('click', () => {
  $modal.close()
})

• 가입하기 버튼 클릭 시, alert 창으로 메세지 띄우기

$approveBtn.addEventListener('click', () => {
  window.alert('가입되었습니다 🥳 ')
  $modal.close()
  $id.value = ''
  $pw.value = ''
  $pwCheck.value = ''
})

5. 폰트 사이즈 조절 버튼 ✅

• 기본 폰트 사이즈: 16px
• 1px씩 폰트 사이즈 조절 기능 구현
  (최소: 12px, 최대: 20px)

const $increaseFontBtn = document.getElementById('increase-font-btn')
const $decreaseFontBtn = document.getElementById('decrease-font-btn')
const $html = document.documentElement

const MAX_FONT_SIZE = 20
const MIN_FONT_SIZE = 12

• 현재 폰트 사이즈가 20px일 경우 + 버튼 비활성화
• 현재 폰트 사이즈가 12px일 경우 - 버튼 비활성화

$increaseFontBtn.addEventListener('click', () => {
  // font size +1px
  const nextFontSize = getHtmlFontSize() + 1
  $html.style.fontSize = nextFontSize
  // 만약 20px 이상이면 increaseBtn 비활성화
  if (nextFontSize >= MAX_FONT_SIZE) {
    $increaseFontBtn.disabled = true
  }
  if (nextFontSize > MIN_FONT_SIZE) {
    $decreaseFontBtn.disabled = false
  }
})

$decreaseFontBtn.addEventListener('click', () => {
  // font size -1px
  const nextFontSize = getHtmlFontSize() - 1
  $html.style.fontSize = nextFontSize
  // 만약 12px 이하면 decreaseBtn 비활성화
  if (nextFontSize <= MIN_FONT_SIZE) {
    $decreaseFontBtn.disabled = true
  }
  if (nextFontSize < MAX_FONT_SIZE) {
    $increaseFontBtn.disabled = false
  }
})

• 버튼 구현 로직이 비슷해서 함수로 묶어보았다.

$increaseFontBtn.addEventListener('click', () => {
  onClickFontSizeControl('increase')
})

$decreaseFontBtn.addEventListener('click', () => {
  onClickFontSizeControl('decrease')
})

const onClickFontSizeControl = (flag) => {
  const fontSize = getHtmlFontSize()
  let newFontSize = flag === 'increase' ? fontSize + 1 : fontSize - 1
  $html.style.fontSize = newFontSize
  $decreaseFontBtn.disabled = newFontSize <= MIN_FONT_SIZE
  $increaseFontBtn.disabled = newFontSize >= MAX_FONT_SIZE
}

6. 최종코드 (+리팩토링) 🌀

// 2. 유효성 검사 로직
const $pw = document.getElementById('pw')
const $pwMsg = document.getElementById('pw-msg')

const $pwCheck = document.getElementById('pw-check')
const $pwCheckMsg = document.getElementById('pw-check-msg')

const ID_REGEX = new RegExp('^[a-z0-9_-]{5,20}$')
const PW_REGEX = new RegExp('^[a-zA-Z0-9]{8,16}$')

const ERROR_MSG = {
  required: '필수 정보입니다.',
  invalidId: '5~20자의 영문 소문자, 숫자와 특수기호(_)(-)만 사용 가능합니다.',
  invalidPw: '8~16자 영문 대 소문자, 숫자를 사용하세요.',
  invalidPwCheck: '비밀번호가 일치하지 않습니다.',
}

// 3. 커스텀 에러 메시지

const checkRegex = (target) => {
  const { value, id } = target // destructuring 구조분해할당
  // const value = target.value, const id = target.id
  if (value.length === 0) {
    return 'required'
  } else {
    switch (id) {
      case 'id':
        return ID_REGEX.test(value) ? true : 'invalidId'
      case 'pw':
        return PW_REGEX.test(value) ? true : 'invalidPw'
      case 'pw-check':
        return $pw.value === value ? true : 'invalidPwCheck'
    }
  }
}

const checkValidation = (target, msgTarget) => {
  const isValid = checkRegex(target)
  if (isValid !== true) {
    target.classList.add('border-red-600')
    msgTarget.innerText = ERROR_MSG[isValid]
  } else {
    target.classList.remove('border-red-600')
    msgTarget.innerText = ''
  }
  return isValid
}

$id.addEventListener('focusout', () => checkValidation($id, $idMsg))

$pw.addEventListener('focusout', () => checkValidation($pw, $pwMsg))

$pwCheck.addEventListener('focusout', () =>
  checkValidation($pwCheck, $pwCheckMsg)
)

// 4. 입력 확인 모달 창 구현
const $submit = document.getElementById('submit')
const $modal = document.getElementById('modal')

const $confirmId = document.getElementById('confirm-id')
const $confirmPw = document.getElementById('confirm-pw')

const $cancelBtn = document.getElementById('cancel-btn')
const $approveBtn = document.getElementById('approve-btn')

$submit.addEventListener('click', (e) => {
  e.preventDefault()
  const isValidForm =
    checkValidation($id, $idMsg) === true &&
    checkValidation($pw, $pwMsg) === true &&
    checkValidation($pwCheck, $pwCheckMsg) === true
  if (isValidForm) {
    $confirmId.innerText = $id.value
    $confirmPw.innerText = $pw.value
    $modal.showModal()
  }
})

$cancelBtn.addEventListener('click', () => {
  $modal.close()
})

$approveBtn.addEventListener('click', () => {
  window.alert('가입되었습니다 🥳 ')
  $modal.close()
  $id.value = ''
  $pw.value = ''
  $pwCheck.value = ''
})

---

이렇게 간단한 회원가입 폼을 구현해보았다.
웹에 대해 공부한지 겨우 반 년 정도 된 나에게는 뿌듯한 미니 프로젝트가 되었다.

추가적으로 netlify 로 배포해보았다.
🌐 미니 회원가입 폼