From 0508ca08c306624a6eb5b8cbb24f4c67f837fd35 Mon Sep 17 00:00:00 2001 From: MELATONIN99 Date: Mon, 10 Jun 2024 10:42:15 +0900 Subject: [PATCH 1/2] =?UTF-8?q?refactor.=20=ED=8F=B0=ED=8A=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD,=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8,=20Class=EB=AA=85,=20CSS=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 기존에 Script로 불러오던 폰트를 Link태그를 사용하여 불러오게 변경하였습니다. (모든 html파일, css파일에 적용) * 메인 페이지 footer 태그가 2개여서 좀 더 시맨틱 한 구조를 위해 하단부 html 태그명, class명, css값을 수정하였습니다. --- index.html | 104 ++++++++++++++++++++++++++-------------------------- join.css | 4 ++ login.html | 47 ++++++++---------------- signup.html | 54 +++++++++++---------------- style.css | 57 +++++++++++++++++++--------- 5 files changed, 131 insertions(+), 135 deletions(-) diff --git a/index.html b/index.html index 27c9da780..239d1c147 100644 --- a/index.html +++ b/index.html @@ -9,36 +9,12 @@ 판다마켓 - +
@@ -66,7 +42,11 @@
- 인기 상품 기능 소개 이미지 + 인기 상품 기능 소개 이미지
Hot item
@@ -93,12 +73,20 @@ 쉽게 찾아보세요
- 검색 기능 소개 이미지 + 검색 기능 소개 이미지
- 상품 등록 기능 소개 이미지 + 상품 등록 기능 소개 이미지
Register
@@ -113,10 +101,10 @@
-
-
-
-
+
+
+
+
믿을 수 있는
판다마켓 중고거래 @@ -124,10 +112,10 @@
-
+ diff --git a/join.css b/join.css index d9df413d3..83bb5b837 100644 --- a/join.css +++ b/join.css @@ -22,6 +22,10 @@ font-size: 100%; font: inherit; vertical-align: baseline; + box-sizing: border-box; + font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, + Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* HTML5 display-role reset for older browsers */ diff --git a/login.html b/login.html index 2940fda49..8bc09ab5f 100644 --- a/login.html +++ b/login.html @@ -5,36 +5,12 @@ 판다마켓 로그인 - +
@@ -54,7 +30,12 @@
- +
@@ -74,7 +55,9 @@ diff --git a/signup.html b/signup.html index 77f8121ca..2629936aa 100644 --- a/signup.html +++ b/signup.html @@ -5,36 +5,12 @@ 판다마켓 회원가입 - +
@@ -58,12 +34,22 @@
- +
- +
@@ -83,7 +69,9 @@ diff --git a/style.css b/style.css index e10507822..22850d2da 100644 --- a/style.css +++ b/style.css @@ -22,6 +22,9 @@ font: inherit; vertical-align: baseline; box-sizing: border-box; + font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, + Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* HTML5 display-role reset for older browsers */ @@ -66,7 +69,6 @@ body { flex-direction: column; justify-content: center; align-items: center; - font-family: 'pretendard', sans-serif; color: var(--gray700); margin: 0; } @@ -87,7 +89,7 @@ main { width: 1200px; } -section { +.section-box { height: 720px; display: flex; align-items: center; @@ -244,13 +246,13 @@ section { text-align: right; } -.footer-contents { +.bottom-contents { margin-top: 200px; width: 100vw; height: 540px; background-color: #cfe5ff; } -.footer-contents-background { +.bottom-contents-background { background-color: #cfe5ff; background-image: url(image/main/Img_home_bottom.png); background-position: 80% 100%; @@ -263,13 +265,13 @@ section { align-items: center; } -.footer-text-image { +.bottom-text-image { width: 1200px; display: flex; align-items: center; justify-content: left; } -.footer-text { +.bottom-text { position: relative; } @@ -308,16 +310,25 @@ section { font-weight: 400; } +.sns-links { + display: flex; +} + +li { + display: inline-block; +} + .sns-link-mini { width: 20px; height: 20px; + margin-left: 12px; } @media screen and (max-width: 1199px) and (min-width: 768px) { main { width: 100vw; padding: 24px 24px; } - section { + .section-box { height: auto; justify-content: center; } @@ -377,11 +388,12 @@ section { flex-direction: column; } .section-image { - width: 696px; + width: 100%; height: 524px; margin-top: 64px; } .contents { + width: 100%; gap: 20px; } .content-category { @@ -404,13 +416,18 @@ section { .content-text { font-size: 18px; } + + .reverse { + flex-direction: column; + } + .reverse > .section-box { flex-direction: column-reverse; } - .footer-contents { + .bottom-contents { margin-top: 64px; } - .footer-contents-background { + .bottom-contents-background { background-position: 52% 100%; background-size: 996px 540px; width: 100vw; @@ -419,7 +436,7 @@ section { justify-content: center; align-items: center; } - .footer-text-image { + .bottom-text-image { height: 100%; justify-content: center; text-align: center; @@ -427,7 +444,7 @@ section { font-size: 32px; line-height: 44.8px; } - .footer-text { + .bottom-text { margin-top: 201px; } .footer-link-bar-background { @@ -449,8 +466,9 @@ section { @media screen and (max-width: 767px) { main { width: 100vw; + padding: 0 16px; } - section { + .section-box { height: auto; justify-content: center; } @@ -507,6 +525,7 @@ section { } .contents { gap: 20px; + width: 100%; } .content-category { font-size: 16px; @@ -528,13 +547,17 @@ section { .content-text { font-size: 16px; } + .reverse { + flex-direction: column; + } + .reverse > .section-box { flex-direction: column-reverse; } - .footer-contents { + .bottom-contents { margin-top: 64px; } - .footer-contents-background { + .bottom-contents-background { background-position: 52% 100%; background-size: 497.91px 269.95px; width: 100vw; @@ -543,7 +566,7 @@ section { justify-content: center; align-items: center; } - .footer-text-image { + .bottom-text-image { height: 100%; justify-content: center; text-align: center; @@ -551,7 +574,7 @@ section { font-size: 32px; line-height: 44.8px; } - .footer-text { + .bottom-text { margin-top: 121px; } .footer-link-bar-background { From ba02e4742dc393a55ffd4463b47334f96fb510b5 Mon Sep 17 00:00:00 2001 From: MELATONIN99 Date: Fri, 14 Jun 2024 17:11:20 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat.=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20form=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?= =?UTF-8?q?=EC=82=AC=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 유효성 검사 결과에 따라 로그인, 회원가입 버튼 활성/비활성화되는 기능을 추가했습니다. * 패스워드 인풋칸의 눈 모양 클릭 시 패스워드 보임/숨김 기능을 추가했습니다. --- .vscode/launch.json | 15 +++++ items.html | 11 ++++ join.css | 39 +++++++++++- login-signup.js | 143 ++++++++++++++++++++++++++++++++++++++++++++ login.html | 17 +++++- signin.html | 11 ++++ signup.html | 31 ++++++++-- 7 files changed, 255 insertions(+), 12 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 items.html create mode 100644 login-signup.js create mode 100644 signin.html diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..9c16c7ac7 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:5500", + "webRoot": "${workspaceFolder}" + } + ] +} diff --git a/items.html b/items.html new file mode 100644 index 000000000..41cf218bb --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

items

+ + diff --git a/join.css b/join.css index 83bb5b837..9623427fd 100644 --- a/join.css +++ b/join.css @@ -93,6 +93,7 @@ input { font-weight: 400; text-indent: 20px; } + .logo { margin-top: 60px; } @@ -155,9 +156,6 @@ input { cursor: pointer; display: block; } -.login-btn:hover { - background-color: var(--blue); -} .easy-login-background { background-color: #e6f2ff; @@ -242,3 +240,38 @@ input { margin-bottom: 185px; } } +/* 아래로는 로그인, 회원가입 페이지 에러 핸들링용 클래스입니다. */ +.error { + outline: 2px solid var(--red); +} + +.error2 { + outline: 2px solid var(--red); +} +.error-message { + font-size: 15px; + position: absolute; + opacity: 0; + top: calc(100% + 4px); + left: 16px; +} + +.condition-message { + font-size: 15px; + position: absolute; + opacity: 0; + top: calc(100% + 4px); + left: 16px; +} + +.waring { + color: var(--red); + opacity: 100; +} +.waring2 { + color: var(--red); + opacity: 100; +} +.accept { + background-color: var(--blue); +} diff --git a/login-signup.js b/login-signup.js new file mode 100644 index 000000000..9b9039b46 --- /dev/null +++ b/login-signup.js @@ -0,0 +1,143 @@ +const $input = document.getElementsByClassName('input'); +const $email = document.getElementById('email'); +const $name = document.getElementById('name'); +const $password = document.getElementById('password'); +const $checkPassword = document.getElementById('checkPassword'); +const $loginBtn = document.getElementsByClassName('login-btn'); +const $form = document.getElementsByClassName('form'); +const $signup = document.getElementsByClassName('signup'); +const $login = document.getElementsByClassName('login'); +const $loginForm = document.getElementById('loginForm'); +const $conditionMessage = document.querySelectorAll('.condition-message'); +const $passwordEye = document.getElementById('passwordEye'); +const $checkPasswordEye = document.getElementById('checkPasswordEye'); +const pattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/; + +const pass = [false, false, false, false]; + +// 인풋 입력값있는지 체크 +function inputCheck(e) { + const $target = e.target; + const $errorMesaage = $target.nextElementSibling; + if ($target.value === '') { + $target.classList.add('error2'); + $errorMesaage.classList.add('waring'); + } else { + $target.classList.remove('error2'); + $errorMesaage.classList.remove('waring'); + } +} + +// 이메일 정규식 체크 +function emailCheck() { + if ($email.value === '') { + $conditionMessage[0].classList.remove('waring'); + $input[0].classList.remove('error'); + } else if (!pattern.test($email.value)) { + $conditionMessage[0].classList.add('waring'); + $input[0].classList.add('error'); + } else { + $conditionMessage[0].classList.remove('waring'); + $input[0].classList.remove('error'); + } +} + +// 비밀번호 8글자 이상인지 체크 +function passwordCheck(e) { + if (e.target.id === 'password') { + const $target = e.target; + const $Message = $target.nextElementSibling.nextElementSibling; + if ($target.value.length < 8 && $target.value.length > 0) { + $Message.classList.add('waring'); + $target.classList.add('error'); + } else { + $Message.classList.remove('waring'); + $target.classList.remove('error'); + } + } +} +// 비밀번호 재확인 체크 +function ReCheckPassword() { + if ($password.value !== $checkPassword.value) { + $conditionMessage[2].classList.add('waring'); + $input[3].classList.add('error'); + } else { + $conditionMessage[2].classList.remove('waring'); + $input[3].classList.remove('error'); + } +} + +// 조건 충족했는지 체크 +function meetsCondition() { + for (let i = 0; i < $input.length; i++) { + if ($input[i].value !== '') { + if ($input[i].classList.contains('error') || $input[i].classList.contains('error2')) { + pass.splice(i, 1, false); + } else { + pass.splice(i, 1, true); + } + } + } +} + +// 모든 조건을 충족했는지 체크 후 충족했다면 버튼 활성화 +function meetAallConditions() { + if ($input.length === 2) { + const loginPass = pass.slice(0, 2); + if (loginPass.every((value) => value === true)) { + $loginBtn[0].classList.add('accept'); + } else { + $loginBtn[0].classList.remove('accept'); + } + } else if (pass.every((value) => value === true)) { + $loginBtn[0].classList.add('accept'); + } else { + $loginBtn[0].classList.remove('accept'); + } +} + +// 포커스 아웃 시에 함수들을 실행하여 조건 확인 +$loginForm.addEventListener('focusout', (e) => { + emailCheck(); + passwordCheck(e); + if ($input.length === 4) { + ReCheckPassword(); + } + inputCheck(e); + meetsCondition(); + meetAallConditions(); +}); + +// 모든 조건 만족 시 submit 하여 페이지 이동 +$loginForm.addEventListener('submit', (e) => { + e.preventDefault(); + meetsCondition(); + meetAallConditions(); + if ($loginBtn[0].classList.contains('accept')) { + if ($input.length === 2) { + window.location.href = '/items'; + } else { + window.location.href = '/signin'; + } + } +}); + +// 패스워드 눈알 아이콘 클릭 시 패스워드 보임/숨김 변경 +$passwordEye.addEventListener('click', () => { + if ($password.type === 'text') { + $password.type = 'password'; + $passwordEye.src = 'image/icon/btn_icon/visibilty_off.png'; + } else { + $password.type = 'text'; + $passwordEye.src = 'image/icon/btn_icon/visibilty_on.png'; + } +}); +$checkPasswordEye.addEventListener('click', () => { + if ($checkPassword.type === 'text') { + $checkPassword.type = 'password'; + $checkPasswordEye.src = 'image/icon/btn_icon/visibilty_off.png'; + } else { + $checkPassword.type = 'text'; + $checkPasswordEye.src = 'image/icon/btn_icon/visibilty_on.png'; + } +}); diff --git a/login.html b/login.html index 8bc09ab5f..1eb589718 100644 --- a/login.html +++ b/login.html @@ -21,20 +21,30 @@
-
+
- + +
이메일을 입력해주세요
+
잘못된 이메일 형식입니다.
- + +
비밀번호를 입력해주세요
+
비밀번호를 8자 이상 입력해주세요.
@@ -59,5 +69,6 @@ 판다마켓이 처음이신가요? 회원가입 + diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..226cfcc83 --- /dev/null +++ b/signin.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

signin

+ + diff --git a/signup.html b/signup.html index 2629936aa..8e155a42f 100644 --- a/signup.html +++ b/signup.html @@ -21,34 +21,52 @@
- +
- + +
이메일을 입력해주세요
+
잘못된 이메일 형식입니다.
- + +
닉네임을 입력해주세요
- + +
비밀번호를 입력해주세요
+
비밀번호를 8자 이상 입력해주세요.
- + +
비밀번호가 일치하지 않습니다.
@@ -73,5 +91,6 @@ 이미 회원이신가요? 로그인 +