일상의 모든 물건을 거래해보세요
- 구경하러 가기 + 구경하러 가기
믿을 수 있는
판다마켓 중고거래
@codeit-2024
-
diff --git a/login.html b/login.html
deleted file mode 100644
index 5661c299..00000000
--- a/login.html
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
-
-
-
-
-
-
-
판다마켓 - 로그인 - - -- - - - \ No newline at end of file diff --git a/faq.html b/pages/faq.html similarity index 100% rename from faq.html rename to pages/faq.html diff --git a/items.html b/pages/items.html similarity index 86% rename from items.html rename to pages/items.html index 80e0b143..c20752f9 100644 --- a/items.html +++ b/pages/items.html @@ -6,6 +6,6 @@
-
-
- Items Page - +this is items page.
\ No newline at end of file diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 00000000..b53584a2 --- /dev/null +++ b/pages/login.html @@ -0,0 +1,57 @@ + + + + + + + + +판다마켓 - 로그인 + + ++ + + + + + \ No newline at end of file diff --git a/privacy.html b/pages/privacy.html similarity index 100% rename from privacy.html rename to pages/privacy.html diff --git a/pages/signup.html b/pages/signup.html new file mode 100644 index 00000000..a3513db9 --- /dev/null +++ b/pages/signup.html @@ -0,0 +1,72 @@ + + + + + + + + +
+
+
+ 판다마켓 - 회원가입 + + ++ + + + + + \ No newline at end of file diff --git a/scripts/formValidation.js b/scripts/formValidation.js new file mode 100644 index 00000000..e6b80511 --- /dev/null +++ b/scripts/formValidation.js @@ -0,0 +1,116 @@ +const email = document.getElementById('email'); +const password = document.querySelector('#pwd'); +const passwordConfirm = document.querySelector('#pwd-confirm'); +const username = document.getElementById('username'); +const submitButton = document.querySelector('.submit-button'); + +document.documentElement.style.setProperty('--red', '#F74747'); +document.documentElement.style.setProperty('--gray400', '#9CA3AF'); + +// 페이지 로드 시 버튼을 비활성화 +submitButton.disabled = true; +submitButton.style.backgroundColor = 'var(--gray400)'; + +function enableButton(button) { + button.disabled = false; + button.style.backgroundColor = 'var(--blue100)'; +} + +function disableButton(button) { + button.disabled = true; + button.style.backgroundColor = 'var(--gray400)'; +} + +function checkFormValidity() { + const isEmailValid = validateEmail(email.value) === ''; + const isPasswordValid = validatePassword(password.value) === ''; + const isPasswordConfirmValid = validatePasswordConfirm(passwordConfirm.value, password.value) === ''; + const isUsernameValid = validateUsername(username.value) === ''; + + // 모든 입력값이 유효하면 버튼 활성화, 아니면 비활성화 + if (isEmailValid && isPasswordValid && isPasswordConfirmValid && isUsernameValid) { + enableButton(submitButton); + } else { + disableButton(submitButton); + } +} + +function validateInput(inputElement, messageElement, validateCallback) { + const inputValue = inputElement.value; + const validationMessage = validateCallback(inputValue); + + if (validationMessage) { + messageElement.textContent = validationMessage; + inputElement.style.border = '1px solid var(--red)'; + return false; + } else { + messageElement.textContent = ''; + inputElement.style.border = 'none'; + return true; + } +} + +function validateEmail(check_email) { + const email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; + if (!check_email) { + return '이메일을 입력해주세요'; + } + if (!email_regex.test(check_email)) { + return '잘못된 이메일 형식입니다'; + } + return ''; +} + +function validatePassword(check_password) { + if (!check_password) { + return '비밀번호를 입력해주세요'; + } else if (check_password.length < 8) { + return '비밀번호를 8자 이상 입력해주세요'; + } + return ''; +} + +function validatePasswordConfirm(confirm_password, check_password) { + if (confirm_password !== check_password) { + return '비밀번호가 일치하지 않습니다.'; + } + return ''; +} + +function validateUsername(check_username) { + if (!check_username) { + return '닉네임을 입력해주세요'; + } + return ''; +} + +// focusout 이벤트 처리 +email.addEventListener('focusout', function () { + const message = document.querySelector('.message-email'); + validateInput(email, message, validateEmail); + checkFormValidity(); // 폼 상태 체크 +}); + +password.addEventListener('focusout', function () { + const message = document.querySelector('.message-password'); + validateInput(password, message, validatePassword); + checkFormValidity(); // 폼 상태 체크 +}); + +passwordConfirm.addEventListener('focusout', function () { + const message = document.querySelector('.message-password-confirm'); + validateInput(passwordConfirm, message, (value) => validatePasswordConfirm(value, password.value)); + checkFormValidity(); // 폼 상태 체크 +}); + +username.addEventListener('focusout', function () { + const message = document.querySelector('.message-username'); + validateInput(username, message, validateUsername); + checkFormValidity(); // 폼 상태 체크 +}); + +// input 이벤트 처리 +email.addEventListener('input', checkFormValidity); +password.addEventListener('input', checkFormValidity); +passwordConfirm.addEventListener('input', checkFormValidity); +username.addEventListener('input', checkFormValidity); \ No newline at end of file diff --git a/scripts/loginTogglePassword.js b/scripts/loginTogglePassword.js new file mode 100644 index 00000000..66c8f819 --- /dev/null +++ b/scripts/loginTogglePassword.js @@ -0,0 +1,25 @@ +const passwordInput = document.querySelector('#pwd'); +const passwordBtn = document.querySelector('.pwd-icon-btn'); +const toggleImg = document.querySelector('.pwd-icons'); +let toggle = true; // 기본 안보이게 + +function showPassword(input, img) { + input.type = 'text'; + img.src = '../assets/icons/show-password.png'; + toggle = false; +} + +function hidePassword(input, img) { + input.type = 'password'; + img.src = '../assets/icons/hide-password.png'; + toggle = true; +} + +passwordBtn.addEventListener('click', function (e) { + e.preventDefault(); + if(toggle) { + showPassword(passwordInput, toggleImg); + } else { + hidePassword(passwordInput, toggleImg); + } +}); \ No newline at end of file diff --git a/scripts/loginValidation.js b/scripts/loginValidation.js new file mode 100644 index 00000000..76d742d0 --- /dev/null +++ b/scripts/loginValidation.js @@ -0,0 +1,81 @@ +const email = document.getElementById('email'); +const password = document.querySelector('#pwd'); +const submitButton = document.querySelector('.submit-button'); + +document.documentElement.style.setProperty('--red', '#F74747'); +document.documentElement.style.setProperty('--gray400', '#9CA3AF'); + +// 페이지 로드 시 버튼을 비활성화 +submitButton.disabled = true; +submitButton.style.backgroundColor = 'var(--gray400)'; + +function enableButton(button) { + button.disabled = false; + button.style.backgroundColor = 'var(--blue100)'; +} + +function disableButton(button) { + button.disabled = true; + button.style.backgroundColor = 'var(--gray400)'; +} + +function checkFormValidity() { + const isEmailValid = validateEmail(email.value) === ''; + const isPasswordValid = validatePassword(password.value) === ''; + + if (isEmailValid && isPasswordValid) { + enableButton(submitButton); + } else { + disableButton(submitButton); + } +} + +function validateInput(inputElement, messageElement, validateCallback) { + const inputValue = inputElement.value; + const validationMessage = validateCallback(inputValue); + + if (validationMessage) { + messageElement.textContent = validationMessage; + inputElement.style.border = '1px solid var(--red)'; + return false; + } else { + messageElement.textContent = ''; + inputElement.style.border = 'none'; + return true; + } +} + +function validateEmail(check_email) { + const email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; + if (!check_email) { + return '이메일을 입력해주세요'; + } + if (!email_regex.test(check_email)) { + return '잘못된 이메일 형식입니다'; + } + return ''; +} + +function validatePassword(check_password) { + if (!check_password) { + return '비밀번호를 입력해주세요'; + } else if (check_password.length < 8) { + return '비밀번호를 8자 이상 입력해주세요'; + } + return ''; +} + +email.addEventListener('focusout', function () { + const message = document.querySelector('.message-email'); + const isValid = validateInput(email, message, validateEmail); + checkFormValidity(); // 이메일 검사 후 폼 상태 체크 +}); + +password.addEventListener('focusout', function () { + const message = document.querySelector('.message-password'); + const isValid = validateInput(password, message, validatePassword); + checkFormValidity(); // 비밀번호 검사 후 폼 상태 체크 +}); + +email.addEventListener('input', checkFormValidity); // 이메일 입력 시 체크 +password.addEventListener('input', checkFormValidity); // 비밀번호 입력 시 체크 diff --git a/scripts/signupTogglePassword.js b/scripts/signupTogglePassword.js new file mode 100644 index 00000000..5d664139 --- /dev/null +++ b/scripts/signupTogglePassword.js @@ -0,0 +1,37 @@ +const passwordInput = document.querySelector('#pwd'); +const passwordBtn = document.querySelector('.pwd-icon-btn'); +const passwordConfirmInput = document.querySelector('#pwd-confirm'); +const passwordConfirmBtn = document.querySelector('.pwd-confirm-icon-btn'); +const toggleImg = document.querySelector('.pwd-icons'); +const toggleConfirmImg = document.querySelector('.pwd-confirm-icon'); +let toggle = true; // 기본 안보이게 + +function showPassword(input, img) { + input.type = 'text'; + img.src = '../assets/icons/show-password.png'; + toggle = false; +} + +function hidePassword(input, img) { + input.type = 'password'; + img.src = '../assets/icons/hide-password.png'; + toggle = true; +} + +passwordBtn.addEventListener('click', function (e) { + e.preventDefault(); + if(toggle) { + showPassword(passwordInput, toggleImg); + } else { + hidePassword(passwordInput, toggleImg); + } +}); + +passwordConfirmBtn.addEventListener('click', function (e) { + e.preventDefault(); + if(toggle) { + showPassword(passwordConfirmInput, toggleConfirmImg); + } else { + hidePassword(passwordConfirmInput, toggleConfirmImg); + } +}); \ No newline at end of file diff --git a/signup.html b/signup.html deleted file mode 100644 index cde8d553..00000000 --- a/signup.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - - - -
+
+
+ 판다마켓 - 회원가입 - - -- - - - \ No newline at end of file
-
-
-
- 
- 
+ 
+