diff --git a/css/style_for_signup_&_login.css b/css/authorization.css similarity index 75% rename from css/style_for_signup_&_login.css rename to css/authorization.css index 50303861f..24c1a299c 100644 --- a/css/style_for_signup_&_login.css +++ b/css/authorization.css @@ -4,6 +4,22 @@ box-sizing: border-box; } +:root { + --alert: #f74747; + --darkerBlue: #3182f6; + --blue: #3692ff; + --skyBlue: #e6f2ff; + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7289; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; +} + /* =================== Mobile =================== */ body { @@ -22,6 +38,8 @@ body { max-width: 400px; width: 100%; + overflow-x: auto; + margin-top: 80px; margin-bottom: 211px; @@ -57,7 +75,7 @@ body { display: flex; flex-direction: column; align-items: stretch; - gap: 8px; + /* gap: 8px; */ } .form label { @@ -71,24 +89,28 @@ body { .form input { height: 56px; + width: 100%; + + margin-top: 8px; + display: block; padding: 16px 24px; border: 0; border-radius: 12px; - /* margin-top: 16px; */ + /* margin-top: 8px; */ - background-color: #f3f4f6; + background-color: var(--gray100); } .form input:focus { outline: none; - border: 2px solid #3692ff; + border: 2px solid var(--blue); } ::placeholder { - color: #9ca3af; + color: var(--gray400); font-family: Pretendard; font-size: 16px; @@ -107,13 +129,13 @@ body { .visibility_toggle { position: absolute; - top: 16px; + /* top: 16px; */ right: 24px; bottom: 16px; } button { - color: #f3f4f6; + color: var(--gray100); font-family: Pretendard, sans-serif; font-size: 20px; font-weight: 600; @@ -127,18 +149,18 @@ button { border: 0; border-radius: 40px; - background-color: #9ca3af; + background-color: var(--gray400); } button:hover { - background-color: #3692ff; + /* background-color: var(--blue); */ cursor: pointer; } .footer { height: 74px; - background-color: #e6f2ff; + background-color: var(--skyBlue); border-radius: 8px; @@ -173,14 +195,14 @@ button:hover { } .link_to_login_or_signin { - color: #1f2937; + color: var(--gray800); font-size: 14px; font-weight: 500; text-align: center; } .link_to_login_or_signin a { - color: #3182f6; + color: var(--darkerBlue); } /* =================== Tablet =================== */ @@ -219,7 +241,11 @@ button:hover { } .form .input_box { - gap: 16px; + /* gap: 16px; */ + } + + .form input { + margin-top: 16px; } .form label { @@ -242,3 +268,16 @@ button:hover { margin-bottom: unset; } } + +/* Sprint 4 회원가입, 로그인 입력창 경고문구 만들기 */ + +.alert { + color: var(--alert); + font-size: 14px; + font-weight: 600; + line-height: 24px; + + display: none; +} + +/* border: 2px solid var(--blue); */ diff --git a/css/style_for_index.css b/css/index.css similarity index 96% rename from css/style_for_index.css rename to css/index.css index 8037f8235..02d7de8ef 100644 --- a/css/style_for_index.css +++ b/css/index.css @@ -7,12 +7,27 @@ box-sizing: border-box; } +:root { + --blue: #3692ff; + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7289; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; +} + body { font-family: Pretendard, sans-serif; margin: 0; min-width: 375px; + + overflow-x: auto; } a { @@ -756,7 +771,9 @@ a { } } -@media (min-width: 1500px) { +/* 아래 코드가 제대로 동작하지 않아서 주석처리 하였습니다. */ + +/* @media (min-width: 1500px) { .nav .space { flex-grow: 1; } @@ -765,4 +782,4 @@ a { min-width: 1100px; flex-grow: 0; } -} +} */ diff --git a/img/for_signup_&_login/google_logo.svg b/img/authorization/google_logo.svg similarity index 100% rename from img/for_signup_&_login/google_logo.svg rename to img/authorization/google_logo.svg diff --git a/img/for_signup_&_login/kakaotalk_logo.svg b/img/authorization/kakaotalk_logo.svg similarity index 100% rename from img/for_signup_&_login/kakaotalk_logo.svg rename to img/authorization/kakaotalk_logo.svg diff --git a/img/for_signup_&_login/panda_market_logo.svg b/img/authorization/panda_market_logo.svg similarity index 100% rename from img/for_signup_&_login/panda_market_logo.svg rename to img/authorization/panda_market_logo.svg diff --git a/img/for_signup_&_login/visibility_toggle_off.svg b/img/authorization/visibility_toggle_off.svg similarity index 100% rename from img/for_signup_&_login/visibility_toggle_off.svg rename to img/authorization/visibility_toggle_off.svg diff --git a/img/for_signup_&_login/visibility_toggle_on.svg b/img/authorization/visibility_toggle_on.svg similarity index 100% rename from img/for_signup_&_login/visibility_toggle_on.svg rename to img/authorization/visibility_toggle_on.svg diff --git a/img/for_index/Img_home_01_green_tshirt.svg b/img/index/Img_home_01_green_tshirt.svg similarity index 100% rename from img/for_index/Img_home_01_green_tshirt.svg rename to img/index/Img_home_01_green_tshirt.svg diff --git a/img/for_index/Img_home_02_magnifying_glass.svg b/img/index/Img_home_02_magnifying_glass.svg similarity index 100% rename from img/for_index/Img_home_02_magnifying_glass.svg rename to img/index/Img_home_02_magnifying_glass.svg diff --git a/img/for_index/Img_home_03_folders.svg b/img/index/Img_home_03_folders.svg similarity index 100% rename from img/for_index/Img_home_03_folders.svg rename to img/index/Img_home_03_folders.svg diff --git a/img/for_index/Img_home_bottom_two_pandas.svg b/img/index/Img_home_bottom_two_pandas.svg similarity index 100% rename from img/for_index/Img_home_bottom_two_pandas.svg rename to img/index/Img_home_bottom_two_pandas.svg diff --git a/img/for_index/Img_home_top_a_panda_with_blue_bag.svg b/img/index/Img_home_top_a_panda_with_blue_bag.svg similarity index 100% rename from img/for_index/Img_home_top_a_panda_with_blue_bag.svg rename to img/index/Img_home_top_a_panda_with_blue_bag.svg diff --git a/img/for_index/ic_facebook.svg b/img/index/ic_facebook.svg similarity index 100% rename from img/for_index/ic_facebook.svg rename to img/index/ic_facebook.svg diff --git a/img/for_index/ic_instagram.svg b/img/index/ic_instagram.svg similarity index 100% rename from img/for_index/ic_instagram.svg rename to img/index/ic_instagram.svg diff --git a/img/for_index/ic_main.svg b/img/index/ic_main.svg similarity index 100% rename from img/for_index/ic_main.svg rename to img/index/ic_main.svg diff --git a/img/for_index/ic_twitter.svg b/img/index/ic_twitter.svg similarity index 100% rename from img/for_index/ic_twitter.svg rename to img/index/ic_twitter.svg diff --git a/img/for_index/ic_youtube.svg b/img/index/ic_youtube.svg similarity index 100% rename from img/for_index/ic_youtube.svg rename to img/index/ic_youtube.svg diff --git a/img/for_index/text_logo_panda_market.svg b/img/index/text_logo_panda_market.svg similarity index 100% rename from img/for_index/text_logo_panda_market.svg rename to img/index/text_logo_panda_market.svg diff --git a/index.html b/index.html index 5c170face..a3a2dad0f 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,8 @@ 판다마켓 - + + @@ -14,9 +15,9 @@
- main_icon + main_icon panda_market_text_logo @@ -39,7 +40,7 @@
a_panda_with_blue_bag @@ -54,7 +55,7 @@
green_tshirt
@@ -75,7 +76,7 @@
magnifying_glass @@ -96,7 +97,7 @@
- folders + folders
Register
@@ -127,7 +128,7 @@
two_pandas
@@ -143,17 +144,17 @@ FAQ
- - facebook + + facebook - - twitter + + twitter - - youtube + + youtube - - instagram + + instagram
diff --git a/js/authorization.js b/js/authorization.js new file mode 100644 index 000000000..5489a8a5a --- /dev/null +++ b/js/authorization.js @@ -0,0 +1,182 @@ +window.onload = function () { + const form = document.querySelector('.form'); + const email = form.querySelector('#email'); + const nickname = form.querySelector('#nickname'); + const passwordList = document.querySelectorAll('.password'); + const visibility_toggle = document.querySelectorAll('.visibility_toggle'); + const button = form.querySelector('button'); + + let [isEmailValid, isNicknameValid, isPwValid, isPwcheckValid] = [ + false, + false, + false, + false, + ]; + + // + // + // + + // 이메일 유효성 검사 함수 정의 + function emailValidCheck(e) { + const alertList = e.target.parentNode.parentNode.querySelectorAll('.alert'); + + const emailValid = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test( + email.value.trim() + ); + if (e.target.value === '') { + alertList[0].style.display = 'block'; + alertList[1].style.display = 'none'; + e.target.style.border = '1px solid #F74747'; + isEmailValid = false; + } else if (!emailValid) { + alertList[0].style.display = 'none'; + alertList[1].style.display = 'block'; + e.target.style.border = '1px solid #F74747'; + isEmailValid = false; + } else { + alertList[0].style.display = 'none'; + alertList[1].style.display = 'none'; + e.target.style.border = 'none'; + isEmailValid = true; + } + } + + // + // + // + + // 닉네임 유효성 검사 함수 정의 + function nicknameValidCheck(e) { + const alertList = e.target.parentNode.parentNode.querySelectorAll('.alert'); + if (e.target.value === '') { + alertList[0].style.display = 'block'; + e.target.style.border = '1px solid #F74747'; + isNicknameValid = false; + } else { + alertList[0].style.display = 'none'; + e.target.style.border = 'none'; + isNicknameValid = true; + } + } + + // + // + // + + // 비밀번호 유효성 검사 함수 정의 + function pwValidCheck(e) { + const alertList = e.target.parentNode.parentNode.querySelectorAll('.alert'); + if (passwordList[0].value === '') { + alertList[0].style.display = 'block'; + alertList[1].style.display = 'none'; + e.target.style.border = '1px solid #F74747'; + isPwValid = false; + } else if (passwordList[0].value.length < 8) { + alertList[0].style.display = 'none'; + alertList[1].style.display = 'block'; + e.target.style.border = '1px solid #F74747'; + isPwValid = false; + } else { + alertList[0].style.display = 'none'; + alertList[1].style.display = 'none'; + e.target.style.border = 'none'; + isPwValid = true; + } + } + + // + // + // + + // 비밀번호 확인 유효성 검사 함수 정의 + function pwCheckValid(e) { + const alertList = e.target.parentNode.parentNode.querySelectorAll('.alert'); + if (passwordList[1].value === passwordList[0].value) { + alertList[0].style.display = 'none'; + e.target.style.border = 'none'; + isPwcheckValid = true; + } else { + alertList[0].style.display = 'block'; + e.target.style.border = '1px solid #F74747'; + isPwcheckValid = false; + } + } + + if (button.textContent === '회원가입') { + // 회원가입 페이지에서 동작 코드 + + // + // + // + + // 이벤트 등록, keyup 이벤트가 발생해도 동작하는 코드를 추가했습니다. + email.addEventListener('focusout', emailValidCheck); + nickname.addEventListener('focusout', nicknameValidCheck); + passwordList[0].addEventListener('focusout', pwValidCheck); + passwordList[1].addEventListener('focusout', pwCheckValid); + + email.addEventListener('keyup', emailValidCheck); + nickname.addEventListener('keyup', nicknameValidCheck); + passwordList[0].addEventListener('keyup', pwValidCheck); + passwordList[1].addEventListener('keyup', pwCheckValid); + + // + // + // + + // 버튼 활성화 코드, 모두 제대로 입력되는 동시에 버튼이 활성화될 수 있도록 keyup이벤트를 적용했습니다. + form.addEventListener('keyup', () => { + if (isEmailValid && isNicknameValid && isPwValid && isPwcheckValid) { + button.disabled = false; + button.style.backgroundColor = '#3182f6'; + } else { + button.disabled = true; + button.style.backgroundColor = '#9ca3af'; + } + }); + } else { + // 로그인 페이지에서 동작하는 코드 + + // + // + // + + // 이벤트 등록, keyup 이벤트가 발생해도 동작하는 코드를 추가했습니다. + email.addEventListener('focusout', emailValidCheck); + passwordList[0].addEventListener('focusout', pwValidCheck); + + email.addEventListener('keyup', emailValidCheck); + passwordList[0].addEventListener('keyup', pwValidCheck); + + // + // + // + + // 모두 제대로 입력되는 동시에 버튼이 활성화될 수 있도록 keyup이벤트를 적용했습니다. + form.addEventListener('keyup', () => { + if (isEmailValid && isPwValid) { + button.disabled = false; + button.style.backgroundColor = '#3182f6'; + } else { + button.disabled = true; + button.style.backgroundColor = '#9ca3af'; + } + }); + } + + // 비밀번호 보이게했다 안보이게했다하는 토글 + visibility_toggle.forEach((toggle, index) => { + toggle.addEventListener('click', (e) => { + if (e.target.classList.contains('on')) { + e.target.classList.toggle('on'); + e.target.src = 'img/authorization/visibility_toggle_off.svg'; + passwordList[index].type = 'password'; + } else { + e.target.classList.toggle('on'); + e.target.src = 'img/authorization/visibility_toggle_on.svg'; + passwordList[index].type = 'text'; + } + }); + }); +}; diff --git a/js/signup_&_login.js b/js/signup_&_login.js deleted file mode 100644 index 72980c7fe..000000000 --- a/js/signup_&_login.js +++ /dev/null @@ -1,26 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const visibility_toggle = document.querySelectorAll('.visibility_toggle'); - const password = document.querySelectorAll('.password'); - - visibility_toggle.forEach((toggle, index) => { - toggle.addEventListener('click', (e) => { - if (e.target.classList.contains('on')) { - e.target.classList.toggle('on'); - e.target.src = 'img/for_signup_&_login/visibility_toggle_off.svg'; - password[index].type = 'password'; - } else { - e.target.classList.toggle('on'); - e.target.src = 'img/for_signup_&_login/visibility_toggle_on.svg'; - password[index].type = 'text'; - } - }); - }); - - const button = document.querySelector('button'); - - button.addEventListener('click', () => { - if (password[0].value !== password[1].value) { - alert('비밀번호가 일치하지 않습니다.'); - } - }); -}); diff --git a/login.html b/login.html index d134a0c05..505f04656 100644 --- a/login.html +++ b/login.html @@ -3,31 +3,36 @@ - + 로그인 - + - +
간편 로그인하기
Google_login_page Kakaotalk_login_page
diff --git a/signup.html b/signup.html index bbb22b00d..dfc857297 100644 --- a/signup.html +++ b/signup.html @@ -3,40 +3,47 @@ - + 회원가입 - +
@@ -67,28 +78,31 @@ /> visibility_toggle
+
비밀번호가 일치하지 않습니다.
- +
간편 로그인하기
Google_login_page Kakaotalk_login_page