[박지섭] sprint4

constants/message.js

@@ -0,0 +1,18 @@
+export const EMAIL_VALIDATION = Object.freeze({
+  invalid_email: '잘못된 이메일 형식입니다.',
+  required_email: '이메일을 입력해주세요.',
+});
+
+export const NICKNAME_VALIDATION = Object.freeze({
+  required_nickname: '닉네임을 입력해주세요.',
+});
+
+export const PASSWORD_VALIDATION = Object.freeze({
+  required_password: '비밀번호를 입력해주세요.',
+  invalid_password: '비밀번호를 8자 이상 입력해주세요.',
+});
+
+export const CONFIRM_PASSWORD_VALIDATION = Object.freeze({
+  required_confirm_password: '비밀번호를 다시 입력해주세요.',
+  not_matched_password: '비밀번호가 일치하지 않습니다.',
+});

constants/symbol.js

@@ -0,0 +1,5 @@
+export const SYMBOL = Object.freeze({
+  email_validate_regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  password_min_length: 8,
+  empty_message: '',
+});

login.html

@@ -36,7 +36,7 @@
           </div>
         </div>
 
-        <button type="submit" class="auth__button">로그인</button>
+        <button type="submit" class="auth__button" disabled>로그인</button>
       </form>
 
       <div class="auth__social">
@@ -68,5 +68,7 @@
         375px 이상의 화면에서 이용해 주세요.
       </div>
     </div>
+
+    <script type="module" src="./scripts/login_validation.js"></script>
   </body>
 </html>

scripts/login_validation.js

@@ -0,0 +1,74 @@
+import { validateEmail, validatePassword } from './validation/validation.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const emailInput = document.getElementById('email');
+  const passwordInput = document.getElementById('password');
+  const loginButton = document.querySelector('.auth__button');
+  const loginForm = document.querySelector('form');
+
+  const showError = (input, message) => {
+    const wrapper = input.closest('.auth__input');
+    wrapper.classList.add('auth__input-error');
+
+    let errorMessage = wrapper.querySelector('.auth__error-message');
+    if (!errorMessage) {
+      errorMessage = document.createElement('span');
+      errorMessage.className = 'auth__error-message';
+      wrapper.appendChild(errorMessage);
+    }
+    errorMessage.innerText = message;
+  };
+
+  const hideError = input => {
+    const wrapper = input.closest('.auth__input');
+    wrapper.classList.remove('auth__input-error');
+
+    const errorMessage = wrapper.querySelector('.auth__error-message');
+    if (errorMessage) {
+      errorMessage.remove();
+    }
+  };
+
+  const updateButtonState = () => {
+    const emailValid = !validateEmail(emailInput.value.trim());
+    const passwordValid = !validatePassword(passwordInput.value.trim());
+    loginButton.disabled = !(emailValid && passwordValid);
+  };
+
+  const validateEmailInput = () => {
+    const email = emailInput.value.trim();
+    hideError(emailInput);
+
+    const error = validateEmail(email);
+    if (error) {
+      showError(emailInput, error);
+    }
+
+    updateButtonState();
+  };
+
+  const validatePasswordInput = () => {
+    const password = passwordInput.value.trim();
+    hideError(passwordInput);
+
+    const error = validatePassword(password);
+    if (error) {
+      showError(passwordInput, error);
+    }
+
+    updateButtonState();
+  };
+
+  emailInput.addEventListener('blur', validateEmailInput);
+  passwordInput.addEventListener('blur', validatePasswordInput);
+
+  loginForm.addEventListener('submit', e => {
+    e.preventDefault();
+    const emailError = validateEmail(emailInput.value.trim());
+    const passwordError = validatePassword(passwordInput.value.trim());
+
+    if (!emailError && !passwordError) {
+      window.location.href = '/items.html';
+    }
+  });
+});

scripts/validation/validation.js

@@ -0,0 +1,60 @@
+import {
+  EMAIL_VALIDATION,
+  NICKNAME_VALIDATION,
+  PASSWORD_VALIDATION,
+  CONFIRM_PASSWORD_VALIDATION,
+} from '../../constants/message.js';
+
+import { SYMBOL } from '../../constants/symbol.js';
+
+/**
+ * 이메일 유효성 검사
+ * @param {string} email - 입력된 이메일
+ * @returns {string} - 에러 메시지 또는 빈 문자열
+ */
+export const validateEmail = email => {
+  if (!email) {
+    return EMAIL_VALIDATION.required_email;
+  }
+  return !SYMBOL.email_validate_regex.test(email) ? EMAIL_VALIDATION.invalid_email : SYMBOL.empty_message;
+};
+
+/**
+ * 닉네임 유효성 검사
+ * @param {string} nickname - 입력된 닉네임
+ * @returns {string} - 에러 메시지 또는 빈 문자열
+ */
+export const validateNickname = nickname => {
+  return !nickname ? NICKNAME_VALIDATION.required_nickname : SYMBOL.empty_message;
+};
+
+/**
+ * 비밀번호 유효성 검사
+ * @param {string} password - 입력된 비밀번호
+ * @returns {string} - 에러 메시지 또는 빈 문자열
+ */
+export const validatePassword = password => {
+  if (!password) {
+    return PASSWORD_VALIDATION.required_password;
+  }
+  return password.length < SYMBOL.password_min_length ? PASSWORD_VALIDATION.invalid_password : SYMBOL.empty_message;
+};
+
+/**
+ * 비밀번호 확인 유효성 검사
+ * @param {string} password - 비밀번호
+ * @param {string} confirmPassword - 비밀번호 확인 값
+ * @returns {string} - 에러 메시지 또는 빈 문자열
+ */
+export const validatePasswordConfirm = (password, confirmPassword) => {
+  if (!confirmPassword) {
+    return CONFIRM_PASSWORD_VALIDATION.required_confirm_password;
+  }
+
+  // 비밀번호와 같더라도 비밀번호 조건이 통과되어야 함
+  if (password.length < SYMBOL.password_min_length) {
+    return PASSWORD_VALIDATION.invalid_password;
+  }
+
+  return password !== confirmPassword ? CONFIRM_PASSWORD_VALIDATION.not_matched_password : SYMBOL.empty_message;
+};

styles/auth/auth.css

@@ -26,7 +26,7 @@ form {
   display: flex;
   flex-direction: column;
   text-align: left;
-  gap: 1.6rem;
+  gap: 0.8rem;
 }
 
 .auth__input label {
@@ -87,6 +87,13 @@ form {
   justify-content: center;
 }
 
+.auth__button:disabled {
+  background-color: var(--disable-400);
+  color: var(--secondary-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .auth__button:hover {
   background-color: var(--primary-200);
 }
@@ -137,3 +144,15 @@ form {
   font-weight: 500;
   text-decoration: underline;
 }
+
+.auth__input-error input {
+  border: 1px solid var(--error-500);
+}
+
+.auth__error-message {
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  font-weight: 600;
+  color: var(--error-500);
+  margin-left: 1.6rem;
+}