codeit-bootcamp-frontend · addiescode-sj · Jun 19, 2025 · May 19, 2025 · May 21, 2025
diff --git a/items.html b/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>items</title>
+  </head>
+  <body>
+    <h1>item pages</h1>
+  </body>
+</html>
diff --git a/js/login.js b/js/login.js
@@ -0,0 +1,102 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const emailInput = document.getElementById('email')
+  const passwordInput = document.getElementById('password')
+  const loginButton = document.querySelector('.login_button')
+
+  // 이메일 부분
+
+  emailInput.addEventListener('blur', () => {
+    const value = emailInput.value.trim()
+    const errorMsg = getOrCreateErrorElement(emailInput)
+
+    if (!value) {
+      showError(emailInput, errorMsg, '이메일을 입력해주세요.')
+    } else if (!isValidEmail(value)) {
+      showError(emailInput, errorMsg, '잘못된 이메일 형식입니다.')
+    } else {
+      clearError(emailInput, errorMsg)
+    }
+    updateButtonState()
+  })
+
+  // 비밀번호 부분
+
+  passwordInput.addEventListener('blur', () => {
+    const value = passwordInput.value.trim()
+    const errorMsg = getOrCreateErrorElement(passwordInput)
+
+    if (!value) {
+      showError(passwordInput, errorMsg, '비밀번호를 입력해주세요.')
+    } else if (value.length < 8) {
+      showError(passwordInput, errorMsg, '비밀번호를 8자 이상 입력해주세요.')
+    } else {
+      clearError(passwordInput, errorMsg)
+    }
+    updateButtonState()
+  })
+
+  function isValidEmail(email) {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return regex.test(email)
+  }
+
+  function showError(input, errorElement, message) {
+    const wrapper = input.closest('.login_password_wrap') || input
+    wrapper.classList.add('error')
+    errorElement.textContent = message
+    errorElement.style.display = 'block'
+  }
+
+  function clearError(input, errorElement) {
+    const wrapper = input.closest('.login_password_wrap') || input
+    wrapper.classList.remove('error')
+    errorElement.textContent = ''
+    errorElement.style.display = 'none'
+  }
+
+  function getOrCreateErrorElement(input) {
+    let wrapper = input.closest('.login_password_wrap') || input
+    let next = wrapper.nextElementSibling
+    if (!next || !next.classList.contains('error-message')) {
+      const error = document.createElement('p')
+      error.className = 'error-message'
+      error.style.color = 'red'
+      error.style.fontSize = '14px'
+      error.style.marginTop = '4px'
+      wrapper.parentNode.insertBefore(error, wrapper.nextSibling)
+      return error
+    }
+    return next
+  }
+  function updateButtonState() {
+    const emailValue = emailInput.value.trim()
+    const passwordValue = passwordInput.value.trim()
+
+    const hasEmailError = getOrCreateErrorElement(emailInput).textContent !== ''
+    const hasPasswordError =
+      getOrCreateErrorElement(passwordInput).textContent !== ''
+
+    const isValid =
+      emailValue && passwordValue && !hasEmailError && !hasPasswordError
+
+    loginButton.disabled = !isValid
+
+    if (isValid) {
+      loginButton.classList.add('active')
+    } else {
+      loginButton.classList.remove('active')
+    }
+  }
+  emailInput.addEventListener('input', updateButtonState)
+  passwordInput.addEventListener('input', updateButtonState)
+
+  const loginForm = document.querySelector('.login_form_container')
+
+  loginForm.addEventListener('submit', function (e) {
+    e.preventDefault() // 폼 제출 방지
+    if (!loginButton.disabled) {
+      window.location.href = '/items.html'
+    }
+  })
+  updateButtonState()
+})
diff --git a/js/signup.js b/js/signup.js
@@ -0,0 +1,152 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const emailInput = document.getElementById('email')
+  const nicknameInput = document.getElementById('nickname')
+  const passwordInput = document.getElementById('password')
+  const passwordCheckInput = document.getElementById('passwordCheck')
+  const signupButton = document.querySelector('.login_button')
+  const signupForm = document.querySelector('.signup_form_frame')
+
+  // 이메일 부분
+  emailInput.addEventListener('blur', () => {
+    const value = emailInput.value.trim()
+    const errorMsg = getOrCreateErrorElement(emailInput)
+
+    if (!value) {
+      showError(emailInput, errorMsg, '이메일을 입력해주세요.')
+    } else if (!isValidEmail(value)) {
+      showError(emailInput, errorMsg, '잘못된 이메일 형식입니다.')
+    } else {
+      clearError(emailInput, errorMsg)
+    }
+
+    updateButtonState()
+  })
+
+  // 닉네임 부분
+  nicknameInput.addEventListener('blur', () => {
+    const value = nicknameInput.value.trim()
+    const errorMsg = getOrCreateErrorElement(nicknameInput)
+
+    if (!value) {
+      showError(nicknameInput, errorMsg, '닉네임을 입력해주세요.')
+    } else {
+      clearError(nicknameInput, errorMsg)
+    }
+
+    updateButtonState()
+  })
+
+  // 비밀번호 부분
+  passwordInput.addEventListener('blur', () => {
+    const value = passwordInput.value.trim()
+    const errorMsg = getOrCreateErrorElement(passwordInput)
+
+    if (!value) {
+      showError(passwordInput, errorMsg, '비밀번호를 입력해주세요.')
+    } else if (value.length < 8) {
+      showError(passwordInput, errorMsg, '비밀번호를 8자 이상 입력해주세요.')
+    } else {
+      clearError(passwordInput, errorMsg)
+    }
+
+    updateButtonState()
+  })
+
+  // 비밀번호 확인 부분분
+  passwordCheckInput.addEventListener('blur', () => {
+    const pwValue = passwordInput.value.trim()
+    const checkValue = passwordCheckInput.value.trim()
+    const errorMsg = getOrCreateErrorElement(passwordCheckInput)
+
+    if (pwValue !== checkValue) {
+      showError(passwordCheckInput, errorMsg, '비밀번호가 일치하지 않습니다.')
+    } else {
+      clearError(passwordCheckInput, errorMsg)
+    }
+
+    updateButtonState()
+  })
+
+  emailInput.addEventListener('input', updateButtonState)
+  nicknameInput.addEventListener('input', updateButtonState)
+  passwordInput.addEventListener('input', updateButtonState)
+  passwordCheckInput.addEventListener('input', updateButtonState)
+
+  function updateButtonState() {
+    const emailValue = emailInput.value.trim()
+    const nicknameValue = nicknameInput.value.trim()
+    const passwordValue = passwordInput.value.trim()
+    const passwordCheckValue = passwordCheckInput.value.trim()
+
+    const hasEmailError = getOrCreateErrorElement(emailInput).textContent !== ''
+    const hasNicknameError =
+      getOrCreateErrorElement(nicknameInput).textContent !== ''
+    const hasPasswordError =
+      getOrCreateErrorElement(passwordInput).textContent !== ''
+    const hasPasswordCheckError =
+      getOrCreateErrorElement(passwordCheckInput).textContent !== ''
+
+    const isValid =
+      emailValue &&
+      nicknameValue &&
+      passwordValue &&
+      passwordCheckValue &&
+      !hasEmailError &&
+      !hasNicknameError &&
+      !hasPasswordError &&
+      !hasPasswordCheckError
+
+    signupButton.disabled = !isValid
+
+    if (isValid) {
+      signupButton.classList.add('active')
+    } else {
+      signupButton.classList.remove('active')
+    }
+  }
+
+  // 회원가입시 로그인페이지로
+  signupForm.addEventListener('submit', function (e) {
+    e.preventDefault()
+    if (!signupButton.disabled) {
+      window.location.href = '/login/index.html'
+    }
+  })
+
+  function isValidEmail(email) {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return regex.test(email)
+  }
+
+  function showError(input, errorElement, message) {
+    const wrapper = input.closest('.login_password_wrap') || input
+    wrapper.classList.add('error')
+    errorElement.textContent = message
+    errorElement.style.display = 'block'
+  }
+
+  function clearError(input, errorElement) {
+    const wrapper = input.closest('.login_password_wrap') || input
+    wrapper.classList.remove('error')
+    errorElement.textContent = ''
+    errorElement.style.display = 'none'
+  }
+
+  function getOrCreateErrorElement(input) {
+    let wrapper = input.closest('.login_password_wrap') || input
+    let next = wrapper.nextElementSibling
+    if (!next || !next.classList.contains('error-message')) {
+      const error = document.createElement('p')
+      error.className = 'error-message'
+      error.style.color = 'red'
+      error.style.fontSize = '14px'
+      error.style.marginTop = '4px'
+      wrapper.parentNode.insertBefore(error, wrapper.nextSibling)
+      return error
+    }
+    return next
+  }
+
+  // 페이지 로드 초기화
+  updateButtonState()
+})
diff --git a/login/index.html b/login/index.html
@@ -79,5 +79,6 @@
         </div>
       </div>
     </div>
+    <script src="../js/login.js"></script>
   </body>
 </html>
diff --git a/login/login.css b/login/login.css
@@ -262,3 +262,28 @@ html {
     max-width: 640px;
   }
 }
+
+.error {
+  border: 1px solid red;
+}
+
+.error-message {
+  color: red;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.login_input.error {
+  border: 1px solid red !important;
+}
+
+.login_password_wrap.error {
+  border: 1px solid red;
+}
+
+.login_button:disabled {
+  background-color: #d1d5db;
+  color: white;
+  cursor: not-allowed;
+  opacity: 1;
+}
diff --git a/login/signup.html b/login/signup.html
@@ -96,5 +96,6 @@
         </div>
       </div>
     </div>
+    <script src="../js/signup.js"></script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,5 +79,6 @@ @@
             </div>
           </div>
         </div>
+        <script src="../js/login.js"></script>
       </body>
     </html>