From f8d1729cbc5d5b67f40a82b22a9375a162361f78 Mon Sep 17 00:00:00 2001 From: mijin0928 <94034865+mijin0928@users.noreply.github.com> Date: Sun, 12 Nov 2023 20:51:45 +0900 Subject: [PATCH] =?UTF-8?q?4=EC=A3=BC=EC=B0=A8=20=EC=9C=84=ED=81=B4?= =?UTF-8?q?=EB=A6=AC=EB=AF=B8=EC=85=98=20=EC=9A=94=EA=B5=AC=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week4/css/reset.css | 15 +++ week4/css/style.css | 183 +++++++++++++++++++++++++++++++++++ week4/folder.html | 8 ++ week4/images/ico-eye-off.svg | 3 + week4/images/ico-eye-on.svg | 4 + week4/images/ico-google.png | Bin 0 -> 1899 bytes week4/images/ico-kakao.png | Bin 0 -> 1489 bytes week4/images/logo.svg | 11 +++ week4/js/signin.js | 92 ++++++++++++++++++ week4/js/signup.js | 104 ++++++++++++++++++++ week4/signin.html | 68 +++++++++++++ week4/signup.html | 78 +++++++++++++++ 12 files changed, 566 insertions(+) create mode 100644 week4/css/reset.css create mode 100644 week4/css/style.css create mode 100644 week4/folder.html create mode 100644 week4/images/ico-eye-off.svg create mode 100644 week4/images/ico-eye-on.svg create mode 100644 week4/images/ico-google.png create mode 100644 week4/images/ico-kakao.png create mode 100644 week4/images/logo.svg create mode 100644 week4/js/signin.js create mode 100644 week4/js/signup.js create mode 100644 week4/signin.html create mode 100644 week4/signup.html diff --git a/week4/css/reset.css b/week4/css/reset.css new file mode 100644 index 000000000..e193e1f79 --- /dev/null +++ b/week4/css/reset.css @@ -0,0 +1,15 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +input { + outline: none; + background: none; +} + +a { + color: inherit; + text-decoration: none; +} \ No newline at end of file diff --git a/week4/css/style.css b/week4/css/style.css new file mode 100644 index 000000000..3721dd739 --- /dev/null +++ b/week4/css/style.css @@ -0,0 +1,183 @@ +@charset "utf-8"; + +:root { + --main-bg-color: #f0f6ff; + --primary-color: #6d6afe; + --box-border-color: #ccd5e3; + --white-color: #fff; + --black-color: #373740; + --btn-color: #f5f5f5; + --sns-bg-color: #e7effb; +} + +body { + font-family: 'Pretendard'; + background-color: var(--main-bg-color); +} + +.container { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; +} + +.inner-wrap { + max-width: 400px; + margin: 0 auto; +} + +.join-member .logo { + text-align: center; +} + +.join-member .logo img { + width: 210px; +} + +.join-member .logo span { + overflow: hidden; + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + clip-path: rect(0 0 0 0); +} + +.join-link { + display: flex; + justify-content: center; + gap: 8px; + margin: 16px 0 0; +} + +.join-link .btn-join { + color: var(--primary-color); + font-weight: 600; + line-height: 19px; + border-bottom: 1px solid var(--primary-color); +} + +.form-wrap { + margin: 30px 0 0; +} + +.form-wrap label { + display: block; + margin: 0 0 12px 0; + font-size: 14px; + line-height: 16px; +} + +.form-wrap input { + width: 100%; + padding: 18px 15px; + color: var(--black-color); + border-radius: 8px; + border: 1px solid var(--box-border-color); + background-color: var(--white-color); +} + +.form-wrap input:focus { + border: 1px solid var(--primary-color); +} + +.form-box.active input { + border: 1px solid #ff5b56; +} + +.form-box.active .messeage { + display: block; + margin: 6px 0 0; + color: #ff5b56; + font-size: 14px; + line-height: 16px; +} + +.form-box + .form-box { + margin: 24px 0 0; +} + +.form-box .user-password { + position: relative; +} + +.form-box .user-password img[class*="eye"] { + position: absolute; + top: 50%; + right: 15px; + transform: translateY(-50%); + cursor: pointer; +} + +.btn-box { + margin: 30px 0 0; +} + +.btn-box button { + display: block; + width: 100%; + padding: 16px 20px; + border: 0; + border-radius: 8px; + text-align: center; + font-size: 18px; + font-weight: 600; + line-height: 21px; + cursor: pointer; + color: var(--btn-color); + background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%); +} + +.sns-login { + display: flex; + justify-content: space-between; + align-items: center; + margin: 32px 0 0; + padding: 12px 24px; + border-radius: 8px; + font-size: 14px; + line-height: 16px; + border: 1px solid var(--box-border-color); + background-color: var(--sns-bg-color); +} + +.sns-login .title { + font-size: 14px; + line-height: 16px; + color: var(--black-color); +} + +.sns-login ul { + overflow: hidden; + list-style-type: none; +} + +.sns-login ul li { + float: left; + margin: 0 16px 0 0; +} + +.sns-login ul li:last-child { + margin: 0; +} + +.sns-login ul li a { + display: block; + overflow: hidden; + width: 42px; + height: 42px; + text-indent: 100%; + white-space: nowrap; +} + +.sns-login ul li .google { + background: url('../images/ico-google.png') no-repeat; + background-size: 100% 42px; +} + +.sns-login ul li .kakao { + background: url('../images/ico-kakao.png') no-repeat; + background-size: 100% 42px; +} \ No newline at end of file diff --git a/week4/folder.html b/week4/folder.html new file mode 100644 index 000000000..0cc50450c --- /dev/null +++ b/week4/folder.html @@ -0,0 +1,8 @@ + + + + + + folder + + \ No newline at end of file diff --git a/week4/images/ico-eye-off.svg b/week4/images/ico-eye-off.svg new file mode 100644 index 000000000..783dc1b11 --- /dev/null +++ b/week4/images/ico-eye-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/week4/images/ico-eye-on.svg b/week4/images/ico-eye-on.svg new file mode 100644 index 000000000..61350f131 --- /dev/null +++ b/week4/images/ico-eye-on.svg @@ -0,0 +1,4 @@ + + + + diff --git a/week4/images/ico-google.png b/week4/images/ico-google.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b03aa92a04d911c58492e39ac616f10ecc022b GIT binary patch literal 1899 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 literal 0 HcmV?d00001 diff --git a/week4/images/logo.svg b/week4/images/logo.svg new file mode 100644 index 000000000..f3beb240f --- /dev/null +++ b/week4/images/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/week4/js/signin.js b/week4/js/signin.js new file mode 100644 index 000000000..0886818f3 --- /dev/null +++ b/week4/js/signin.js @@ -0,0 +1,92 @@ +const form = document.querySelector('form'); +const formBox = document.querySelectorAll('.form-box'); +const emailPattern = /^[A-Za-z0-9.\-_]+@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/; +const pwPattern = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/; +const userEmail = 'test@codeit.com'; +const emailInput = document.getElementById('signin-email'); +const pwInput = document.getElementById('signin-password'); +const userPw = 'codeit101'; +const btnLogin = document.querySelector('.btn-box .btn-login'); +const eyeOff = document.querySelector('.eye-off'); + +// 이메일, 비밀번호 유효성 검사 +formBox.forEach((el) => { + el.addEventListener('focusout', (e)=> { + if(e.target.value === ''){ + e.currentTarget.classList.add('active'); + + el.classList.contains('email') ? e.currentTarget.lastElementChild.textContent = '이메일을 입력하세요' : e.currentTarget.lastElementChild.textContent = '비밀번호를 입력하세요'; + }else{ + e.currentTarget.classList.remove('active'); + e.currentTarget.lastElementChild.textContent = ''; + validate(emailPattern, pwPattern); + } + + function validate(emailPattern, pwPattern){ + if(el.classList.contains('email')){ + if(emailPattern.test(e.target.value) === false){ + e.currentTarget.classList.add('active'); + e.currentTarget.lastElementChild.textContent = '올바른 이메일 주소가 아닙니다.'; + } + }else{ + if(pwPattern.test(e.target.value) === false){ + e.currentTarget.classList.add('active'); + e.currentTarget.lastElementChild.textContent = '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.'; + } + } + } + }); +}); + +// 로그인 버튼 클릭 시 이메일, 비밀번호 일치여부 확인 후 페이지 이동 +function login(e){ + e.preventDefault(); + + formBox.forEach((el) => { + if(!el.classList.contains('active')){ + if(emailInput.value === userEmail && pwInput.value === userPw){ + form.submit(); + }else{ + formBox.forEach((el) => { + el.classList.add('active'); + el.classList.contains('email') ? el.lastElementChild.textContent = '이메일을 확인해주세요.' : el.lastElementChild.textContent = '비밀번호를 확인해주세요.'; + }) + } + } + }) +} +btnLogin.addEventListener('click', login); + +form.addEventListener('keydown', (e) => { + if(e.key === 'Enter'){ + e.preventDefault(); + } +}) + +// 눈 아이콘 클릭 시 비밀번호 안보이게 하기 +function eyeOn(e){ + e.preventDefault(); + + e.target.parentElement.classList.toggle('active'); + if(e.target.parentElement.classList.contains('active')){ + e.target.previousElementSibling.setAttribute('type', 'text'); + e.target.setAttribute('src', './images/ico-eye-on.svg'); + }else{ + e.target.previousElementSibling.setAttribute('type', 'password'); + e.target.setAttribute('src', './images/ico-eye-off.svg'); + } +} +eyeOff.addEventListener('click', eyeOn); + + + + + + + + + + + + + diff --git a/week4/js/signup.js b/week4/js/signup.js new file mode 100644 index 000000000..8ec218d38 --- /dev/null +++ b/week4/js/signup.js @@ -0,0 +1,104 @@ +const form = document.querySelector('form'); +const formBox = document.querySelectorAll('.form-box'); +const emailPattern = /^[A-Za-z0-9.\-_]+@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/; +const pwPattern = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/; +const userEmail = 'test@codeit.com'; +const emailInput = document.getElementById('signin-email'); +const pwInput = document.getElementById('signin-password'); +const userPw = 'codeit101'; +const emailInputUp = document.getElementById('signup-email'); +const pwInputUp = document.getElementById('signup-password'); +const userPwCheck = document.getElementById('signup-check-password'); +const btnJoin = document.querySelector('.btn-box .btn-join'); +const eyeOn = document.querySelectorAll('.eye-on'); + +// 이메일, 비밀번호 유효성 검사 +formBox.forEach((el) => { + el.addEventListener('focusout', (e)=> { + if(e.target.value === ''){ + e.currentTarget.classList.add('active'); + + el.classList.contains('email') ? e.currentTarget.lastElementChild.textContent = '이메일을 입력하세요' : e.currentTarget.lastElementChild.textContent = '비밀번호를 입력하세요'; + }else{ + if(el.classList.contains('pw')){ + e.currentTarget.classList.remove('active'); + e.currentTarget.lastElementChild.textContent = ''; + + validate(emailPattern, pwPattern); + } + + function validate(emailPattern, pwPattern){ + if(el.classList.contains('email')){ + if(emailPattern.test(e.target.value) === false){ + e.currentTarget.classList.add('active'); + e.currentTarget.lastElementChild.textContent = '올바른 이메일 주소가 아닙니다.'; + } + }else{ + if(pwPattern.test(e.target.value) === false){ + e.currentTarget.classList.add('active'); + e.currentTarget.lastElementChild.textContent = '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.'; + } + } + } + } + }); +}); + +// 회원가입 버튼 클릭 시 가입된 이메일 존재 여부 확인 후 페이지 이동 +function join(e){ + e.preventDefault(); + + formBox.forEach((el) => { + if(!el.classList.contains('active')){ + if(emailInputUp.value === userEmail){ + if(el.classList.contains('email')){ + el.classList.add('active'); + el.lastElementChild.textContent = '이미 사용 중인 이메일입니다.'; + }else{ + el.classList.remove('active'); + el.lastElementChild.textContent = ''; + } + }else{ + form.submit(); + } + } + }) +} +btnJoin.addEventListener('click', join); + +// 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우 +function pwCheck(e){ + if(pwInputUp.value !== userPwCheck.value){ + e.target.parentElement.parentElement.classList.add('active'); + e.target.parentElement.parentElement.lastElementChild.textContent = '비밀번호가 일치하지 않아요.'; + } +} +userPwCheck.addEventListener('focusout', pwCheck); + +// 눈 아이콘 클릭 시 비밀번호 보이게 하기 +function eyeOff(e){ + e.preventDefault(); + + e.target.parentElement.classList.toggle('active'); + if(e.target.parentElement.classList.contains('active')){ + e.target.previousElementSibling.setAttribute('type', 'password'); + e.target.setAttribute('src', './images/ico-eye-off.svg'); + }else{ + e.target.previousElementSibling.setAttribute('type', 'text'); + e.target.setAttribute('src', './images/ico-eye-on.svg'); + } +} +eyeOn.forEach((eye) => {eye.addEventListener('click', eyeOff)}) + + + + + + + + + + + + + diff --git a/week4/signin.html b/week4/signin.html new file mode 100644 index 000000000..dbd7af9f7 --- /dev/null +++ b/week4/signin.html @@ -0,0 +1,68 @@ + + + + + + 로그인 + + + + + +
+
+
+

+ + Linkbrary 로고 + Linkbrary + +

+ +
+

회원이 아니신가요?

+ 회원 가입하기 +
+
+ +
+
+ + +
+ + +
+ + 비밀번호 눈 꺼짐 +
+

+
+ +
+ +
+
+
+ + +
+
+ + + diff --git a/week4/signup.html b/week4/signup.html new file mode 100644 index 000000000..b8cac9668 --- /dev/null +++ b/week4/signup.html @@ -0,0 +1,78 @@ + + + + + + 회원가입 + + + + + +
+
+
+

+ + Linkbrary 로고 + Linkbrary + +

+ +
+

이미 회원이신가요?

+ 로그인 하기 +
+
+ +
+
+ + +
+ + +
+ + 비밀번호 눈 켜짐 +
+

+
+ +
+ + +
+ + 비밀번호 눈 켜짐 +
+

+
+ +
+ +
+
+
+ + +
+
+ + +