diff --git a/.DS_Store b/.DS_Store index 414007129..09539476 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" "b/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" index 1cc646f2..375f33f1 100644 Binary files "a/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" and "b/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" differ diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/img/btn_visibility_on_24px.png" "b/\355\214\220\353\213\244\353\247\210\354\274\223/img/btn_hidden.png" similarity index 100% rename from "\355\214\220\353\213\244\353\247\210\354\274\223/img/btn_visibility_on_24px.png" rename to "\355\214\220\353\213\244\353\247\210\354\274\223/img/btn_hidden.png" diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/img/visible.png" "b/\355\214\220\353\213\244\353\247\210\354\274\223/img/visible.png" new file mode 100644 index 00000000..9920a1ef Binary files /dev/null and "b/\355\214\220\353\213\244\353\247\210\354\274\223/img/visible.png" differ diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/.DS_Store" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/.DS_Store" index 91881e11..b8b843f9 100644 Binary files "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/.DS_Store" and "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/.DS_Store" differ diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/.DS_Store" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/.DS_Store" new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/.DS_Store" differ diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/index.html" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/index.html" new file mode 100644 index 00000000..423fae95 --- /dev/null +++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/index.html" @@ -0,0 +1,61 @@ + + + + + + 로그인 + + + + +
+
+ 비밀번호가 일치하지 않습니다. + +
+
+
+ +
+
+

이메일

+
+ +
+
+
+

비밀번호

+
+ + +
+ +
+ + +
+

판다마켓이 처음이면 나가

+ 회원가입 +
+
+
+ + + + \ No newline at end of file diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/index.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/index.js" new file mode 100644 index 00000000..f76ee127 --- /dev/null +++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/index.js" @@ -0,0 +1,200 @@ + +let emailInput = document.querySelector("#Email"); +let passwordInput = document.querySelector('#password'); +let loginbtn = document.querySelector('.login_bt'); +let nickName = document.querySelector('#name'); +let btnVisibility = document.querySelectorAll('.btnVisibility img') + +const createElement = (content, className, appendDomClass) => { + let newSpan = document.createElement("span"); + newSpan.classList.add(className); + newSpan.textContent = content; + newSpan.style.color = "red"; + document.querySelector(appendDomClass).appendChild(newSpan); +}; + +const hideElement = (name) => { + let element = document.querySelector(`.${name}`); + if (element) { + element.remove(); + } +}; + +function validateEmail(email) { + const regExp = + /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; + return regExp.test(email); +} + + +emailInput.addEventListener("blur", checkTargetValue); +function checkTargetValue(e) { + let email = e.target.value; + if (e.target.value.length >= 1) { + e.target.style.border = "none"; + hideElement("assd"); + } + if (e.target.value.length === 0) { + hideElement("assd"); + e.target.style.border = "1px solid red"; + createElement("이메일을 입력해주세요.", "assd", ".e_mail"); + } else { + if (!validateEmail(email)) { + hideElement("assd"); + e.target.style.border = "1px solid red"; + createElement("잘못된 이메일 형식입니다.", "assd", ".e_mail"); + } else { + hideElement("assd"); + } + } +} + + + + + passwordInput.addEventListener("blur", passwordRetype); + function passwordRetype(e) { + console.log(e); + if (e.target.value.length === 0) { + hideElement("passwordTxt"); + e.target.parentElement.style.border = "1px solid red"; + createElement("비밀번호를 입력하세요", "passwordTxt", ".password"); + } else{ + if(e.target.value.length >=1 && e.target.value.length < 8){ + e.target.style.border = '1px solid red' + hideElement("passwordTxt"); + createElement("비밀번호를 8자 이상 입력하세요", "passwordTxt", ".password"); + }else{ + e.target.parentElement.style.border = 'none' + hideElement("passwordTxt"); + }; + } + } + + +//FIX +for(let i=0; i { + if(eamilError === null && pwError === null && + emailInput.value.length !== 0 && passwordInput.value.length !== 0){ + loginbtn.classList.add('login_bt_change') + } + + if(eamilError !== null || pwError !== null + || !validateEmail(emailInput.value) || passwordInput.value.length < 8 + ){ + loginbtn.classList.remove('login_bt_change') + } + +}) + + +const USER_DATA = [ + { email: 'codeit1@codeit.com', password: "codeit101!" }, + { email: 'codeit2@codeit.com', password: "codeit202!" }, + { email: 'codeit3@codeit.com', password: "codeit303!" }, + { email: 'codeit4@codeit.com', password: "codeit404!" }, + { email: 'codeit5@codeit.com', password: "codeit505!" }, + { email: 'codeit6@codeit.com', password: "codeit606!" }, +] + +let correctEmail = function(){ + return USER_DATA.map(callback) + function callback (user) { + if (user.email === emailInput.value) { + return true + } else { + return false + } + } +}; + +let correctPassword = function(){ + return USER_DATA.map(callback) + function callback (user) { + if (user.password === passwordInput.value){ + return true + } else { + return false + } + } +}; + +console.log('123',correctEmail()); +console.log('ddd',correctPassword()); + +// let modal = document.createElement('div'); +let modalAll = document.querySelector('.modal_bg'); +let modalClose = document.querySelector('.modal button'); +modalAll.classList.add('hidden'); + +modalClose.addEventListener('click',closeModal); + +function modalShow(){ + modalAll.classList.remove('hidden'); + modalAll.classList.add('visible'); +} +function closeModal(){ + modalAll.classList.add('hidden'); + modalAll.classList.remove('visible'); +} + +loginbtn.addEventListener('click',nobtn); +function nobtn(e){ + e.preventDefault(); + + function a(){ + if (correctEmail().filter((arr)=> arr)[0]) { + // console.log('아이디가 있어요') + return true; + } else { + // console.log('아이디가 없어요') + } + return; + } + function b(){ + if(correctPassword().filter((arr) => arr)[0]){ + // console.log('비밀번호가 있') + return true; + } else{ + // console.log('비밀번호 없') + } + return; + } + + if(a(), b()){ + window.location.href = '../items.html' + } else if(emailInput.value.length === 0){ + alert('이메일을 입력하세요'); + } else if(passwordInput.value.length === 0){ + alert('비밀번호를 입력하세요') + } + else{ + modalAll.classList.add('visible'); + } + +} + + + + diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/login.html" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/login.html" deleted file mode 100644 index 0eb35f77..00000000 --- "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/login.html" +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - 로그인 - - - -
- - -
- - - \ No newline at end of file diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/loginstyle.css" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/loginstyle.css" index 82964dce..d6ddc84f 100644 --- "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/loginstyle.css" +++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/login/loginstyle.css" @@ -10,6 +10,15 @@ display: flex; flex-direction: column; align-items: center; + max-width: 640px; +} + +.logo{ + max-width: 400px; +} + +.logo > a > img{ + width: 100%; } button{ @@ -17,21 +26,26 @@ button{ background: none; } +.login_bt_change{ + background-color: var(--blue200); + color: var(--cool-gray100); +} + .login_inner{ display: flex; flex-direction: column; gap: 24px; margin-top: 40px; align-items: center; - min-width: 480px; - width: 50%; + /* min-width: 480px; */ + /* width: 50%; */ align-items: center; justify-content: center; } -.login_inner .e_mail, .login_inner .password, .login_bt, .simple_login{ +.login_inner .e_mail, .login_inner .password{ width: 67.3%; - min-width: 440px; + min-width: 640px; } .login_inner p{ @@ -41,19 +55,38 @@ button{ display: inline-block; } -input{ +.box{ border: none; background-color: var(--cool-gray100); - padding: 20px 24px; + /* padding: 20px 24px; */ display: flex; align-items: center; border-radius: 12px; margin-top: 16px; - width: 90%; + /* width: 100%; */ +} + +.box > input{ + border: none; + background-color: transparent; + /* padding: 0; */ + padding: 20px 24px; + display: flex; + align-items: center; + border-radius: 0; + margin-top: 0; + width: 100%; + height: 100%; + border-radius: 12px; } +.box .btnVisibility{ + margin-right: 10px; +} + input:focus{ - outline: 1px solid var(--blue200); + /* outline: 1px solid var(--blue200); */ + outline: none; } input:focus::placeholder{ @@ -67,25 +100,14 @@ input::placeholder{ line-height: 26px; } -input#pass{ - background-image: url(../../img/btn_visibility_on_24px.png); - background-repeat: no-repeat; - background-size: 24px; - background-position: 96% center; -} - -.password input img{ - vertical-align: middle; - width: 92%; - position: absolute; -} .login_bt{ background-color: var(--cool-gray200); justify-content: center; color: var(--cool-gray100); border-radius: 40px; - width: 67.3%; + width: 100%; + /* width: 640px; */ height: 56px; /* padding: 12px 24px; */ @@ -108,12 +130,12 @@ input#pass{ .simple_login{ background-color: var(--blue100); - /* padding: 16px 23px; */ border-radius: 8px; display: flex; align-items: center; justify-content: space-between; - width: 67.3%; + /* width: 67.3%; */ + width: 100%; } .simple_login span{ @@ -128,7 +150,7 @@ input#pass{ margin: 12px 24px; } -.login_inner .txt p{ +.login_inner .txt p, a{ font-size: 14px; font-weight: 500; line-height: 24px; @@ -138,3 +160,91 @@ input#pass{ color: var(--blue200); line-height: 16px; } + +.modal_bg{ + background-color: rgba(0, 0, 0, 0.6); + width: 100%; + position: fixed; + height: 100%; + top: 0; + +} + +.modal{ + width: 540px; + height: 250px; + background-color: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + border-radius: 8px; +} + +.modal span{ + line-height: 240px; + display: block; + font-size: 16px; + font-weight: 500; +} + +.modal button{ + width: 120px; + height: 48px; + border-radius: 8px; + background-color: var(--blue200); + color: #fff; + position: absolute; + right: 30px; + bottom: 30px; +} + +.hidden{ + visibility: hidden; +} + +.visible { + visibility: visible; +} + + + +@media (min-width: 744px){ + .inner{ + padding: 0 16px; + width: 100%; + } + + .login_inner { + min-width: 640px; + } + + .logo{ + min-width: 400px; + } + + .login_inner .e_mail, .password{ + width: 100%; + } + +} + + +@media (min-width: 375px){ + .inner{ + padding: 0 16px; + /* width: 100%; */ + } + + .login_inner { + /* border: 1px solid red; */ + min-width: 340px; + width: 100%; + } + + .login_inner .e_mail, .login_inner .password{ + min-width: 340px; + width: 100%; + } +} diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/.DS_Store" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/.DS_Store" new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/.DS_Store" differ diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/index.html" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/index.html" new file mode 100644 index 00000000..ab794344 --- /dev/null +++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/index.html" @@ -0,0 +1,73 @@ + + + + + + 회원가입 + + + +
+
+ 사용 중인 이메일입니다. + +
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/index.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/index.js" new file mode 100644 index 00000000..343f3121 --- /dev/null +++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/index.js" @@ -0,0 +1,196 @@ + +let emailInput = document.querySelector("#Email"); +let passwordInput = document.querySelectorAll('.password_input'); +let loginbtn = document.querySelector('.login_bt'); +let nickName = document.querySelector('#name'); +let btnVisibility = document.querySelectorAll('.btnVisibility img') + +const createElement = (content, className, appendDomClass) => { + let newSpan = document.createElement("span"); + newSpan.classList.add(className); + newSpan.textContent = content; + newSpan.style.color = "red"; + document.querySelector(appendDomClass).appendChild(newSpan); +}; + +const hideElement = (name) => { + let element = document.querySelector(`.${name}`); + if (element) { + element.remove(); + } +}; + +function validateEmail(email) { + const regExp = + /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; + return regExp.test(email); +} + + +emailInput.addEventListener("blur", checkTargetValue); +function checkTargetValue(e) { + let email = e.target.value; + if (e.target.value.length >= 1) { + e.target.style.border = "1px solid blue"; + hideElement("assd"); + } + if (e.target.value.length === 0) { + hideElement("assd"); + e.target.style.border = "1px solid red"; + createElement("이메일을 입력해주세요.", "assd", ".e_mail"); + } else { + if (!validateEmail(email)) { + hideElement("assd"); + e.target.style.border = "1px solid red"; + createElement("잘못된 이메일 형식입니다.", "assd", ".e_mail"); + } else { + hideElement("assd"); + } + } +} + +nickName.addEventListener("blur", nickRetype); +function nickRetype(e) { + hideElement("aaa"); + // let email = e.target.value; + if (e.target.value.length === 0) { + hideElement("aaa"); + e.target.style.border = "1px solid red"; + createElement("닉네임을 입력해주세요.", "aaa", ".e_mail.oo"); + } +} + +for(let i = 0; i < passwordInput.length; i++){ + passwordInput[i].addEventListener("blur", passwordRetype); + function passwordRetype(e) { + + let box = e.target.parentElement.parentElement; + if(box.classList[1]){ + if(passwordInput[0].value === passwordInput[1].value){ + hideElement("passwordTxt2"); + e.target.parentElement.style.border = "1px solid blue"; + } else{ + hideElement("passwordTxt2"); + e.target.parentElement.style.border = "1px solid red"; + createElement("비밀번호가 일치하지 않습니다", "passwordTxt2", ".password.aa"); + } + }else{ + if (e.target.value.length === 0) { + hideElement("passwordTxt"); + e.target.parentElement.style.border = "1px solid red"; + createElement("비밀번호를 입력하세요", "passwordTxt", ".password"); + } else{ + if(e.target.value.length >=1 && e.target.value.length < 8){ + hideElement("passwordTxt"); + createElement("비밀번호를 8자 이상 입력하세요", "passwordTxt", ".password"); + }else{ + e.target.style.border = '1px solid blue' + hideElement("passwordTxt"); + }; + } + } + } +} + + + + +//FIX +for(let i=0; i { +// let eamilError = document.querySelector('.assd'); +// let pwError= document.querySelector('.passwordTxt') + +// console.log('하냐?',passwordInput.value); + +// if(eamilError === null && pwError === null && +// emailInput.value.length !== 0 && passwordInput.value.length !== 0){ +// loginbtn.classList.add('login_bt_change') +// } + +// if(eamilError !== null || pwError !== null +// || !validateEmail(emailInput.value) || passwordInput.value.length < 8 +// ){ +// loginbtn.classList.remove('login_bt_change') +// } + +// }) + + +let modal = document.querySelector('.modal_bg'); +let modalCloseBtn = document.querySelector('.modal button'); +modal.classList.add('hidden'); +modalCloseBtn.addEventListener('click',closeModal); + +function modalShow(){ + modal.classList.remove('hidden'); + modal.classList.add('visible'); +} +function closeModal(){ + modal.classList.add('hidden'); + modal.classList.remove('visible'); +} + +const USER_DATA = [ + { email: 'codeit1@codeit.com', password: "codeit101!" }, + { email: 'codeit2@codeit.com', password: "codeit202!" }, + { email: 'codeit3@codeit.com', password: "codeit303!" }, + { email: 'codeit4@codeit.com', password: "codeit404!" }, + { email: 'codeit5@codeit.com', password: "codeit505!" }, + { email: 'codeit6@codeit.com', password: "codeit606!" }, +] + +function checkUserEmailInfo (user) { + if (user.email === emailInput.value) return true + else return false +} + +let correctUser = function(){ + return USER_DATA.some(checkUserEmailInfo) +} + + +console.log('123',correctUser()); + + + +loginbtn.addEventListener('click',nobtn); +function nobtn(e){ + console.log('nnn') + e.preventDefault(); + let existEmail = correctUser(); + console.log('existEmail',existEmail) + if(existEmail) modalShow() + + if(emailInput.value.length === 0 || passwordInput[0].value.length === 0 + || passwordInput[1].value.length === 0 || nickName.value.length === 0){ + alert('정보를 입력하세요') + } else { + alert('회원가입이 완료되었습니다.') + window.location.href = '../login/index.html' + // console.log('dhomm') + } + +} + + + + diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signup.html" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signup.html" deleted file mode 100644 index 008fcdc1..00000000 --- "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signup.html" +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - 로그인 - - - -
- - -
- - - \ No newline at end of file diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signupstyle.css" "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signupstyle.css" index b74b00aa..d6ddc84f 100644 --- "a/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signupstyle.css" +++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/sub/signup/signupstyle.css" @@ -10,6 +10,15 @@ display: flex; flex-direction: column; align-items: center; + max-width: 640px; +} + +.logo{ + max-width: 400px; +} + +.logo > a > img{ + width: 100%; } button{ @@ -17,21 +26,26 @@ button{ background: none; } +.login_bt_change{ + background-color: var(--blue200); + color: var(--cool-gray100); +} + .login_inner{ display: flex; flex-direction: column; gap: 24px; margin-top: 40px; align-items: center; - min-width: 480px; - width: 50%; + /* min-width: 480px; */ + /* width: 50%; */ align-items: center; justify-content: center; } -.login_inner .e_mail, .login_inner .password, .join_bts, .simple_login{ +.login_inner .e_mail, .login_inner .password{ width: 67.3%; - min-width: 440px; + min-width: 640px; } .login_inner p{ @@ -41,19 +55,38 @@ button{ display: inline-block; } -input{ +.box{ border: none; background-color: var(--cool-gray100); - padding: 20px 24px; + /* padding: 20px 24px; */ display: flex; align-items: center; border-radius: 12px; margin-top: 16px; - width: 90%; + /* width: 100%; */ +} + +.box > input{ + border: none; + background-color: transparent; + /* padding: 0; */ + padding: 20px 24px; + display: flex; + align-items: center; + border-radius: 0; + margin-top: 0; + width: 100%; + height: 100%; + border-radius: 12px; } +.box .btnVisibility{ + margin-right: 10px; +} + input:focus{ - outline: 1px solid var(--blue200); + /* outline: 1px solid var(--blue200); */ + outline: none; } input:focus::placeholder{ @@ -67,36 +100,25 @@ input::placeholder{ line-height: 26px; } -input#pass{ - background-image: url(../../img/btn_visibility_on_24px.png); - background-repeat: no-repeat; - background-size: 24px; - background-position: 96% center; -} - -.password input img{ - vertical-align: middle; - width: 92%; - position: absolute; -} -.join_bt{ +.login_bt{ background-color: var(--cool-gray200); justify-content: center; color: var(--cool-gray100); border-radius: 40px; - width: 67.3%; + width: 100%; + /* width: 640px; */ height: 56px; /* padding: 12px 24px; */ } -.join_bt:hover{ +.login_bt:hover{ background-color: var(--blue200); color: var(--cool-gray100); } -.join_bt > a{ +.login_bt > a{ font-size: 20px; font-weight: 600; display: block; @@ -112,7 +134,8 @@ input#pass{ display: flex; align-items: center; justify-content: space-between; - width: 67.3%; + /* width: 67.3%; */ + width: 100%; } .simple_login span{ @@ -137,3 +160,91 @@ input#pass{ color: var(--blue200); line-height: 16px; } + +.modal_bg{ + background-color: rgba(0, 0, 0, 0.6); + width: 100%; + position: fixed; + height: 100%; + top: 0; + +} + +.modal{ + width: 540px; + height: 250px; + background-color: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + border-radius: 8px; +} + +.modal span{ + line-height: 240px; + display: block; + font-size: 16px; + font-weight: 500; +} + +.modal button{ + width: 120px; + height: 48px; + border-radius: 8px; + background-color: var(--blue200); + color: #fff; + position: absolute; + right: 30px; + bottom: 30px; +} + +.hidden{ + visibility: hidden; +} + +.visible { + visibility: visible; +} + + + +@media (min-width: 744px){ + .inner{ + padding: 0 16px; + width: 100%; + } + + .login_inner { + min-width: 640px; + } + + .logo{ + min-width: 400px; + } + + .login_inner .e_mail, .password{ + width: 100%; + } + +} + + +@media (min-width: 375px){ + .inner{ + padding: 0 16px; + /* width: 100%; */ + } + + .login_inner { + /* border: 1px solid red; */ + min-width: 340px; + width: 100%; + } + + .login_inner .e_mail, .login_inner .password{ + min-width: 340px; + width: 100%; + } +}