diff --git a/css/login.css b/css/login.css
index 4615a1adc..314f31bf4 100644
--- a/css/login.css
+++ b/css/login.css
@@ -57,18 +57,29 @@
.input-box input::placeholder {
color: var(--gray-scale-400);
}
+.input-box input.error-border {
+ border: 1px solid var(--error);
+}
+.error-txt {
+ padding-left: 16px;
+ font-size: 14px;
+ font-weight: var(--font-weight-semibold);
+ line-height: 24px;
+ color: var(--error);
+}
.password-wrap {
display: grid;
align-items: center;
position: relative;
}
-.hide {
+.hide, .show {
position: absolute;
right: 16px;
height: 24px;
+ background: none;
cursor: pointer;
}
-.btn-login-disabled {
+.submit-btn {
padding: 16px 0;
border: none;
border-radius: 40px;
@@ -77,11 +88,21 @@
font-weight: var(--font-weight-semibold);
line-height: 32px;
color: var(--gray-scale-0);
+ cursor: inherit;
+}
+.submit-btn.abled {
+ background-color: var(--primary-color-100);
cursor: pointer;
}
-.btn-login-able {
- background-color: var(--main-bg-color );
+.submit-btn.abled:hover {
+ background-color: var(--primary-color-200);
+}
+.submit-btn.abled:active {
+ background-color: var(--primary-color-300);
}
+/* .btn-login-able {
+ background-color: var(--main-bg-color);
+} */
.login-sns {
display: flex;
justify-content: space-between;
diff --git a/css/style.css b/css/style.css
index b7e22900b..39c1d1bc4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,6 +15,10 @@ a {
text-decoration: none;
}
+button {
+ border: 0;
+}
+
.wrap {
display: flex;
justify-content: space-between;
diff --git a/css/vars.css b/css/vars.css
index 820349ecf..d13c681fb 100644
--- a/css/vars.css
+++ b/css/vars.css
@@ -3,7 +3,9 @@
--primary-color-100: #3692FF;
--primary-color-200: #1967d6;
--primary-color-300: #1251aa;
+
--main-bg-color-light: #E6F2FF;
+
--gray-scale-900: #111827;
--gray-scale-800: #1f2937;
--gray-scale-700: #374151;
@@ -17,6 +19,8 @@
--gray-scale-50: #f9fafb;
--gray-scale-0: #ffffff;
+ --error: #F74747;
+
/* font-weight */
--font-weight-light: 200;
--font-weight-regular: 300;
diff --git a/js/login-backup.js b/js/login-backup.js
new file mode 100644
index 000000000..495ed9299
--- /dev/null
+++ b/js/login-backup.js
@@ -0,0 +1,149 @@
+// const inputs = document.querySelector('input');
+// const errorMessage = document.createElement('p');
+// errorMessage.classList.add('error');
+// const inputEmail = document.querySelector('#login-email');
+// const inputPw = document.querySelector('#login-password');
+//const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+
+// function noContent() {
+// if(this.value === '') {
+// this.classList.add('error-border');
+// this.after(errorMessage);
+// errorMessage.append(this.placeholder);
+// } else {
+// this.classList.remove('error-border');
+// errorMessage.remove();
+// }
+// };
+
+// function validateEmail(email) {
+// const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+// if (regex.test(inputEmail)) {
+// alert("The email address is valid.");
+// } else {
+// alert("The email address is invalid.");
+// }
+// }
+
+// inputEmail.addEventListener('focusout', function() {
+// if(this.value === '') {
+// this.classList.add('error-border');
+// this.after(errorMessage);
+// errorMessage.append(this.placeholder);
+// } else if(validEmailCheck(this) == false) {
+// this.classList.remove('error-border');
+// errorMessage.remove();
+// };
+// });
+
+// function validEmailCheck(obj) {
+// const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+// return (obj.value.match(pattern) != null);
+// }
+
+
+
+
+
+
+// password show, hide
+
+const pwToggle = document.querySelector('#viewToggle');
+const toggleImg = document.querySelector('.toggle-img');
+
+
+pwToggle.addEventListener('click', () => {
+ if(pwToggle.className === 'hide') {
+ pwToggle.className = 'show';
+ toggleImg.src = 'images/btn_visibility_on.svg';
+ toggleImg.alt = '비밀번호 보이기';
+ inputPw.type = 'text';
+ } else {
+ pwToggle.className = 'hide';
+ toggleImg.src = 'images/btn_visibility_off.svg';
+ inputPw.type = 'password';
+ toggleImg.alt = '비밀번호 가리기';
+ }
+})
+
+
+const submitBtn = document.getElementsByClassName('submit-btn');
+
+
+
+
+function validateForm() {
+ if (email == '' || password == '') {
+
+ return false;
+ }
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(email)) {
+ alert('올바른 ㅌㅌㅌ');
+ return false;
+ } else {
+
+ }
+
+ submitBtn.classList.remove('disabled');
+ return true;
+};
+
+
+
+// const form = document.getElementById('login-form');
+
+// form.addEventListener('focusout', (event) => {
+// const targetInput = event.target;
+// if (targetInput.value == '') {
+// targetInput.classList.add('error-border');
+// const errorTxtbox = document.createElement('p');
+// errorTxtbox.classList.add('error-txt');
+// const errorTxt = targetInput.placeholder;
+// targetInput.after(errorTxtbox);
+// errorTxtbox.append(errorTxt);
+// } else {
+// targetInput.classList.remove('error-border');
+// targetInput.nextSibling.remove();
+// }
+// });
+
+
+
+// inputEmail.addEventListener('focusout', () => {
+// if(email == '') {
+// inputEmail.classList.add('error-border');
+// } else {
+// inputEmail.classList.remove('error-border');
+// }
+
+// });
+
+// inputEmail.addEventListener('focusin', function() {
+// const errorTxt = inputEmail.nextSibling.remove();
+// })
+
+// const errorBox = document.createElement('p');
+// inputEmail.after(errorBox);
+// errorBox.append(inputEmail.placeholder);
+
+
+
+const pwToggle = document.querySelector('#viewToggle');
+const toggleImg = document.querySelector('.toggle-img');
+
+
+pwToggle.addEventListener('click', () => {
+ if(pwToggle.className === 'hide') {
+ pwToggle.className = 'show';
+ toggleImg.src = 'images/btn_visibility_on.svg';
+ toggleImg.alt = '비밀번호 보이기';
+ inputPw.type = 'text';
+ } else {
+ pwToggle.className = 'hide';
+ toggleImg.src = 'images/btn_visibility_off.svg';
+ inputPw.type = 'password';
+ toggleImg.alt = '비밀번호 가리기';
+ }
+});
diff --git a/js/login.js b/js/login.js
new file mode 100644
index 000000000..e021b6149
--- /dev/null
+++ b/js/login.js
@@ -0,0 +1,118 @@
+//errMsg
+const errMsg = {
+ email: {
+ none: "이메일을 입력해주세요.",
+ invalid: "잘못된 이메일 형식입니다."
+ },
+ pw: {
+ none: "비밀번호를 입력해주세요.",
+ invalid: "비밀번호를 8자 이상 입력해주세요."
+ }
+};
+
+// email validChk
+function emailValidChk(email) {
+ const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+ if(pattern.test(email) === false) {
+ return false;
+ } else {
+ return true;
+ }
+};
+
+
+// email error
+const inputEmail = document.getElementById('login-email');
+inputEmail.addEventListener('focusout', () => {
+ const errorTxtbox = document.createElement('p');
+ errorTxtbox.classList.add('error-txt');
+ if (inputEmail.value == '') {
+ inputEmail.classList.add('error-border');
+ inputEmail.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.email.none;
+ } else if (emailValidChk(inputEmail.value) === false) {
+ inputEmail.classList.add('error-border');
+ inputEmail.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.email.invalid;
+ } else {
+ inputEmail.classList.remove('error-border');
+ inputEmail.nextSibling.remove();
+ }
+});
+
+inputEmail.addEventListener('focusin',() => {
+ inputEmail.nextSibling.remove();
+});
+
+
+// pw error
+const inputPw = document.getElementById('login-password');
+inputPw.addEventListener('focusout', () => {
+ const errorTxtbox = document.createElement('p');
+ errorTxtbox.classList.add('error-txt');
+ if (inputPw.value == '') {
+ inputPw.classList.add('error-border');
+ inputPw.parentElement.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.pw.none;
+ } else if (inputPw.value.length < 8) {
+ inputPw.classList.add('error-border');
+ inputPw.parentElement.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.pw.invalid;
+ } else {
+ inputPw.classList.remove('error-border');
+ inputPw.parentElement.nextSibling.remove();
+ }
+});
+
+inputPw.addEventListener('focusin',() => {
+ inputPw.parentElement.nextSibling.remove();
+});
+
+
+// submit-btn disable, able
+const submitBtn = document.querySelector('.submit-btn');
+function btnAble() {
+ const email = inputEmail.value;
+ const pw = inputPw.value;
+ if(email && pw != '' && emailValidChk(email) === true && pw.length > 7) {
+ submitBtn.disabled = false;
+ submitBtn.classList.add('abled');
+ } else {
+ submitBtn.disabled = true;
+ submitBtn.classList.remove('abled');
+ }
+};
+
+const form = document.getElementsByTagName('form');
+const inputs = document.getElementsByTagName('input');
+for ( let i = 0; i < inputs.length; i++ ) {
+ inputs[i].addEventListener('focusout', btnAble);
+};
+
+
+// password show, hide
+const pwToggle = document.querySelectorAll('#viewToggle');
+const toggleImg = document.getElementsByClassName('toggle-img');
+const inputPwtoggle = document.getElementsByClassName('password');
+
+for (let i = 0; i < pwToggle.length; i++) {
+ pwToggle[i].addEventListener('click', (e) => {
+ if(pwToggle[i].className === 'hide') {
+ pwToggle[i].className = 'show';
+ toggleImg[i].src = 'images/btn_visibility_on.svg';
+ toggleImg[i].alt = '비밀번호 보이기';
+ inputPwtoggle[i].type = "text";
+ } else {
+ pwToggle[i].className = 'hide';
+ toggleImg[i].src = 'images/btn_visibility_off.svg';
+ inputPwtoggle[i].type = 'password';
+ toggleImg[i].alt = '비밀번호 가리기';
+ }
+ });
+};
+
+// move
+function goItems() {
+ let link = '../items.html';
+ location.href = link;
+};
diff --git a/js/signup.js b/js/signup.js
new file mode 100644
index 000000000..ea3641167
--- /dev/null
+++ b/js/signup.js
@@ -0,0 +1,176 @@
+//errMsg
+const errMsg = {
+ email: {
+ none: "이메일을 입력해주세요.",
+ invalid: "잘못된 이메일 형식입니다."
+ },
+ pw: {
+ none: "비밀번호를 입력해주세요.",
+ invalid: "비밀번호를 8자 이상 입력해주세요."
+ },
+ pwRe: {
+ none: "비밀번호를 다시 입력해주세요.",
+ fail: "비밀번호가 일치하지 않습니다."
+ },
+ nick: {
+ none: "닉네임을 입력해주세요."
+ }
+};
+
+
+// email validChk
+function emailValidChk(email) {
+ const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+ if(pattern.test(email) === false) {
+ return false;
+ } else {
+ return true;
+ }
+};
+
+
+// email error
+const inputEmail = document.getElementById('signup-email');
+inputEmail.addEventListener('focusout', () => {
+ const errorTxtbox = document.createElement('p');
+ errorTxtbox.classList.add('error-txt');
+ if (inputEmail.value == '') {
+ inputEmail.classList.add('error-border');
+ inputEmail.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.email.none;
+ } else if (emailValidChk(inputEmail.value) === false) {
+ inputEmail.classList.add('error-border');
+ inputEmail.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.email.invalid;
+ } else {
+ inputEmail.classList.remove('error-border');
+ inputEmail.nextSibling.remove();
+ }
+});
+
+inputEmail.addEventListener('focusin',() => {
+ inputEmail.nextSibling.remove();
+});
+
+
+// pw error
+const inputPw = document.getElementById('signup-password');
+inputPw.addEventListener('focusout', () => {
+ const errorTxtbox = document.createElement('p');
+ errorTxtbox.classList.add('error-txt');
+ if (inputPw.value == '') {
+ inputPw.classList.add('error-border');
+ inputPw.parentElement.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.pw.none;
+ } else if (inputPw.value.length < 8) {
+ inputPw.classList.add('error-border');
+ inputPw.parentElement.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.pw.invalid;
+ } else {
+ inputPw.classList.remove('error-border');
+ inputPw.parentElement.nextSibling.remove();
+ }
+});
+
+inputPw.addEventListener('focusin',() => {
+ inputPw.parentElement.nextSibling.remove();
+});
+
+
+// nickname
+const inputNick = document.getElementById('signup-nickname');
+inputNick.addEventListener('focusout', () => {
+ const errorTxtbox = document.createElement('p');
+ errorTxtbox.classList.add('error-txt');
+ if (inputNick.value == '') {
+ inputNick.classList.add('error-border');
+ inputNick.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.nick.none;
+ } else {
+ inputNick.classList.remove('error-border');
+ inputNick.nextSibling.remove();
+ }
+});
+
+inputNick.addEventListener('focusin',() => {
+ inputNick.nextSibling.remove();
+});
+
+
+// pw rewrite
+const inputPwre = document.getElementById('signup-password-rewrite');
+inputPwre.addEventListener('focusout', () => {
+ const errorTxtbox = document.createElement('p');
+ errorTxtbox.classList.add('error-txt');
+ if (inputPwre.value == '') {
+ inputPwre.classList.add('error-border');
+ inputPwre.parentElement.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.pwRe.none;
+ } else if (inputPwre.value !== inputPw.value) {
+ inputPwre.classList.add('error-border');
+ inputPwre.parentElement.after(errorTxtbox);
+ errorTxtbox.textContent = errMsg.pwRe.fail;
+ } else {
+ inputPwre.classList.remove('error-border');
+ inputPwre.parentElement.nextSibling.remove();
+ }
+});
+
+inputPwre.addEventListener('focusin',() => {
+ inputPwre.parentElement.nextSibling.remove();
+});
+
+
+// submit-btn disable, able
+const submitBtn = document.querySelector('.submit-btn');
+function btnAble() {
+ const email = inputEmail.value;
+ const pw = inputPw.value;
+ const nick = inputNick.value;
+ const pwRewrite = inputPwre.value;
+ if(emailValidChk(email) === true && email && pw != '' && pw.length > 7 && nick && pwRewrite != '' && pw === pwRewrite) {
+ submitBtn.disabled = false;
+ submitBtn.classList.add('abled');
+ } else {
+ submitBtn.disabled = true;
+ submitBtn.classList.remove('abled');
+ }
+};
+
+const form = document.getElementsByTagName('form');
+const inputs = document.getElementsByTagName('input');
+for ( let i = 0; i < inputs.length; i++ ) {
+ inputs[i].addEventListener('focusout', btnAble);
+}
+
+// password show, hide
+const pwToggle = document.querySelectorAll('#viewToggle');
+const toggleImg = document.getElementsByClassName('toggle-img');
+const inputPwtoggle = document.getElementsByClassName('password');
+
+for (let i = 0; i < pwToggle.length; i++) {
+ pwToggle[i].addEventListener('click', () => {
+ if(pwToggle[i].className === 'hide') {
+ pwToggle[i].className = 'show';
+ toggleImg[i].src = 'images/btn_visibility_on.svg';
+ toggleImg[i].alt = '비밀번호 보이기';
+ inputPwtoggle[i].type = "text";
+ } else {
+ pwToggle[i].className = 'hide';
+ toggleImg[i].src = 'images/btn_visibility_off.svg';
+ inputPwtoggle[i].type = 'password';
+ toggleImg[i].alt = '비밀번호 가리기';
+ }
+ });
+}
+
+// move
+function goSignin() {
+ let link = '../signin.html';
+ location.href = link;
+};
+
+
+
+
+
diff --git a/login.html b/login.html
index bef1c2d42..dd8cfff96 100644
--- a/login.html
+++ b/login.html
@@ -5,7 +5,6 @@
판다마켓
-
@@ -16,7 +15,7 @@
-
+