diff --git a/auth.css b/auth.css index 5024532c..8aab1961 100644 --- a/auth.css +++ b/auth.css @@ -18,7 +18,12 @@ width: 100%; } -.input_box { +.input_container { + position: relative; + margin: 16px 0 24px; +} + +.input_wrap { position: relative; } @@ -36,10 +41,29 @@ border: none; background-color: var(--gray100); padding: 16px 24px; - margin: 16px 0 24px; border-radius: 12px; } +.user_form .inputAlert { + border: 1px solid #f74747; +} + +.email_alert, +.password_alert, +.nickname_alert, +.pw_check_alert { + display: none; +} + +.visible_alert { + display: block; + color: #f74747; + font-size: 14px; + font-weight: 600; + margin-top: 8px; + padding-left: 16px; +} + .visible_button { width: 24px; height: 24px; @@ -47,37 +71,45 @@ z-index: 1; top: 50%; right: 24px; - margin-top: -16px; + transform: translateY(-50%); padding: 0; border: none; cursor: pointer; } -.visible_on, -.visible_off { +.visible_password { width: 100%; - height: 100%; } .login_button, .signup_button { - font-size: 20px; - color: var(--gray100); - line-height: 32px; - font-weight: 600; - font-family: Pretendard; - background-color: var(--gray400); width: 100%; height: 56px; border-radius: 9999px; border: none; margin-bottom: 24px; cursor: pointer; + background-color: var(--gray400); transition: all 300ms ease; } -.login_button:hover, -.signup_button:hover { +.auth_button a { + font-size: 20px; + color: var(--gray100); + line-height: 32px; + font-weight: 600; + font-family: Pretendard; + display: inline-flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +.btn_disable { + background-color: var(--gray400); +} + +.btn_active { background-color: var(--blue); } @@ -116,7 +148,7 @@ color: var(--blue); } -@media (min-width: 375px) and (max-width: 767px) { +@media (max-width: 767px) { .user_form_logo { width: unset; height: 95px; diff --git a/common.css b/common.css index fbf08595..d7705a3b 100644 --- a/common.css +++ b/common.css @@ -11,139 +11,6 @@ --blue: #3692ff; } -/* Reset CSS: start - body에 폰트 추가 */ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; - font-family: Pretendard; -} -ol, -ul { - list-style: none; -} -blockquote, -q { - quotes: none; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -/* Reset CSS: end */ - * { box-sizing: border-box; } diff --git a/image/ogImage.png b/image/ogImage.png new file mode 100644 index 00000000..2695e335 Binary files /dev/null and b/image/ogImage.png differ diff --git a/index.css b/index.css index 0bd54dda..41475177 100644 --- a/index.css +++ b/index.css @@ -344,13 +344,10 @@ main { margin-right: 104px; } - .privacy_faq { - font-family: 'Abel', sans-serif; - } /* footer: end */ } -@media (min-width: 375px) and (max-width: 767px) { +@media (max-width: 767px) { /* header: start */ .navbar_wrap { width: 100%; @@ -358,11 +355,6 @@ main { } .logo { - display: none; - } - - .m_logo { - display: inline-block; width: 103px; } @@ -371,11 +363,6 @@ main { margin-right: 30px; } - .logo { - width: 123px; - height: 41px; - } - .login { width: 100px; } @@ -461,6 +448,7 @@ main { /* main ad: start */ .ad { height: 124.597vw; + min-height: 540px; overflow: hidden; flex-direction: column; align-items: center; @@ -468,7 +456,7 @@ main { } .ad > .title { - margin-top: 131px; + bottom: 29.167vw; margin-right: 0; text-align: center; font-size: 32px; diff --git a/index.html b/index.html index f0b149ac..afa26fa5 100644 --- a/index.html +++ b/index.html @@ -5,31 +5,41 @@ 판다마켓 - + + - - - - + + + - - - - + + + + + + + + + + + +
- - + + + +
@@ -38,7 +48,7 @@

- 일상의 모든 물건을 + 일상의 모든 물건을 거래해 보세요

구경하러 가기 @@ -66,7 +76,7 @@

인기 상품을 확인해 보세요

Search

- 구매를 원하는 + 구매를 원하는 상품을 검색하세요

@@ -83,7 +93,7 @@

Register

- 판매를 원하는 + 판매를 원하는 상품을 등록하세요

diff --git a/login.html b/login.html index 7310effa..d9654f3b 100644 --- a/login.html +++ b/login.html @@ -4,6 +4,7 @@ 판다마켓 +

- +
+ + +
-
- - +
+
+ + +
+

- +

판다마켓이 처음이신가요?

+ diff --git a/login.js b/login.js new file mode 100644 index 00000000..346a658d --- /dev/null +++ b/login.js @@ -0,0 +1,100 @@ +const EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + +// input +const email = document.querySelector('#email'); +const password = document.querySelector('#password'); +const inputAll = document.querySelectorAll('input'); + +// alert +const emailAlert = document.querySelector('.email_alert'); +const passwordAlert = document.querySelector('.password_alert'); + +// button +const authButton = document.querySelector('.auth_button'); +const authBtnLink = document.querySelector('.auth_button a'); +const passwordVisible = document.querySelector('.visible_password'); + +let emailInputStatus = false; +let pwInputStatus = false; + +function emailChecker(e) { + if (e.target.value === '') { + showAlert(e.target, emailAlert, '이메일을 입력해주세요.'); + emailInputStatus = false; + } else if (!EMAIL_PATTERN.test(e.target.value)) { + showAlert(e.target, emailAlert, '잘못된 이메일 형식입니다.'); + emailInputStatus = false; + } else { + hideAlert(e.target, emailAlert); + emailInputStatus = true; + } +} + +function passwordChecker(e) { + if (e.target.value === '') { + showAlert(e.target, passwordAlert, '비밀번호를 입력해주세요.'); + pwInputStatus = false; + } else if (e.target.value.length < 8) { + showAlert(e.target, passwordAlert, '비밀번호를 8자 이상 입력해주세요.'); + pwInputStatus = false; + } else { + hideAlert(e.target, passwordAlert); + pwInputStatus = true; + } +} + +function showAlert(inputField, element, message) { + inputField.classList.add('inputAlert'); + element.classList.add('visible_alert'); + element.textContent = message; +} + +function hideAlert(inputField, element) { + inputField.classList.remove('inputAlert'); + element.classList.remove('visible_alert'); +} + +function visibleBtnHandler() { + if (password.type === 'password') { + password.type = 'text'; + passwordVisible.src = './image/btn_visibility_off.png'; + } else { + password.type = 'password'; + passwordVisible.src = './image/btn_visibility_on.png'; + } +} + +function authButtonActivate(e) { + if (!authButton.classList.contains('btn_active')) { + e.preventDefault(); + } +} + +function inputInit() { + inputAll.forEach((input) => { + input.value = ''; + }); +} +email.addEventListener('focusout', (e) => emailChecker(e)); +password.addEventListener('focusout', (e) => passwordChecker(e)); +authBtnLink.addEventListener('click', (e) => authButtonActivate(e)); +authButton.addEventListener('click', inputInit); +passwordVisible.addEventListener('click', visibleBtnHandler); +inputAll.forEach((tag) => { + tag.addEventListener('input', () => { + if ( + Array.from(inputAll).every((input) => { + if (input.type === 'password') { + return input.value.length >= 8 && !input.classList.contains('inputAlert'); + } + return input.value !== '' && !input.classList.contains('inputAlert'); + }) + ) { + authButton.classList.add('btn_active'); + authButton.classList.remove('btn_disable'); + } else { + authButton.classList.remove('btn_active'); + authButton.classList.add('btn_disable'); + } + }); +}); diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..165bead2 --- /dev/null +++ b/reset.css @@ -0,0 +1,134 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; + font-family: Pretendard; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + background-color: transparent; +} diff --git a/signup.html b/signup.html index 6c818c8d..dfc3a028 100644 --- a/signup.html +++ b/signup.html @@ -4,6 +4,7 @@ 판다마켓 +
- +
+ + +
- +
+ +

+
-
- - +
+
+ + +
+

-
- - +
+
+ + +
+

- +

이미 회원이신가요?

+ diff --git a/signup.js b/signup.js new file mode 100644 index 00000000..1812cda9 --- /dev/null +++ b/signup.js @@ -0,0 +1,135 @@ +const EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + +// input +const email = document.querySelector('#email'); +const password = document.querySelector('#password'); +const passwordCheck = document.querySelector('#password_check'); +const nickname = document.querySelector('#nickname'); +const inputAll = document.querySelectorAll('input'); + +// alert +const emailAlert = document.querySelector('.email_alert'); +const passwordAlert = document.querySelector('.password_alert'); +const passwordCheckAlert = document.querySelector('.pw_check_alert'); +const nicknameAlert = document.querySelector('.nickname_alert'); + +// button +const authButton = document.querySelector('.auth_button'); +const authBtnLink = document.querySelector('.auth_button a'); +const passwordVisible = document.querySelectorAll('.visible_password'); + +let emailInputStatus = false; +let pwInputStatus = false; +let pwInputCheckStatus = false; +let nicknameStatus = false; +let checkPassword; + +function emailChecker(e) { + if (e.target.value === '' && e.target.type === 'email') { + showAlert(e.target, emailAlert, '이메일을 입력해주세요.'); + emailInputStatus = false; + } else if (!EMAIL_PATTERN.test(e.target.value)) { + showAlert(e.target, emailAlert, '잘못된 이메일 형식입니다.'); + emailInputStatus = false; + } else { + hideAlert(e.target, emailAlert); + emailInputStatus = true; + } +} + +function nicknameChecker(e) { + if (e.target.value === '') { + showAlert(e.target, nicknameAlert, '닉네임을 입력해주세요.'); + nicknameStatus = false; + } else { + hideAlert(e.target, nicknameAlert); + nicknameStatus = true; + } +} + +function passwordChecker(e) { + if (e.target.value === '' && e.target.type === 'password') { + showAlert(e.target, passwordAlert, '비밀번호를 입력해주세요.'); + pwInputStatus = false; + } else if (e.target.value.length < 8) { + showAlert(e.target, passwordAlert, '비밀번호를 8자 이상 입력해주세요.'); + pwInputStatus = false; + } else { + hideAlert(e.target, passwordAlert); + checkPassword = e.target.value; + pwInputStatus = true; + } +} + +function passwordDoubleCheck(e) { + if (e.target.value !== checkPassword) { + showAlert(e.target, passwordCheckAlert, '비밀번호가 일치하지 않습니다.'); + pwInputCheckStatus = false; + } else { + hideAlert(e.target, passwordCheckAlert); + pwInputCheckStatus = true; + } +} + +function showAlert(inputField, element, message) { + inputField.classList.add('inputAlert'); + element.classList.add('visible_alert'); + element.textContent = message; +} + +function hideAlert(inputField, element) { + inputField.classList.remove('inputAlert'); + element.classList.remove('visible_alert'); +} + +function visibleBtnHandler(e) { + const targetInput = e.target.closest('.input_wrap').querySelector('input'); + console.log(targetInput); + if (targetInput.type === 'password') { + targetInput.type = 'text'; + e.target.src = './image/btn_visibility_off.png'; + } else { + targetInput.type = 'password'; + e.target.src = './image/btn_visibility_on.png'; + } +} + +function authButtonActivate(e) { + if (!authButton.classList.contains('btn_active')) { + e.preventDefault(); + } +} + +function inputInit() { + inputAll.forEach((input) => { + input.value = ''; + }); +} + +email.addEventListener('focusout', (e) => emailChecker(e)); +password.addEventListener('focusout', (e) => passwordChecker(e)); +passwordCheck.addEventListener('focusout', (e) => passwordDoubleCheck(e)); +nickname.addEventListener('focusout', (e) => nicknameChecker(e)); +authButton.addEventListener('click', inputInit); +authBtnLink.addEventListener('click', (e) => authButtonActivate(e)); +passwordVisible.forEach((element) => { + element.addEventListener('click', (e) => visibleBtnHandler(e)); +}); +inputAll.forEach((tag) => { + tag.addEventListener('input', () => { + if ( + Array.from(inputAll).every((input) => { + if (input.type === 'password') { + return input.value.length >= 8 && !input.classList.contains('inputAlert'); + } + return input.value !== '' && !input.classList.contains('inputAlert'); + }) + ) { + authButton.classList.add('btn_active'); + authButton.classList.remove('btn_disable'); + } else { + authButton.classList.remove('btn_active'); + authButton.classList.add('btn_disable'); + } + }); +});