diff --git a/common-responsive.css b/common-responsive.css new file mode 100644 index 00000000..86da77bd --- /dev/null +++ b/common-responsive.css @@ -0,0 +1,45 @@ +/* common */ +@media (min-width:375px)and (max-width:1199px){ + footer-div{ + flex-flow:wrap; + } + .main-left, .main-right { + width: 100%; + background-color: #ffffff; + flex-wrap: wrap; + } + .main-div, .main-div-right { + padding: 0 20px; + } + .main-img{ + width: 100%; + } + .top-section { + height: auto; + } + .top-div{ + flex-direction: column; + align-items: center; + } + .top-content{ + width: 100%; + } + .content { + width: 100%; + height: 300px; + text-align: center; + } + .img-home{ + width: 100%; + } + .footer-div { + flex-flow:wrap; + } + .br-none{ + display: none; + } + +} + + + diff --git a/common.js b/common.js new file mode 100644 index 00000000..f6d5c507 --- /dev/null +++ b/common.js @@ -0,0 +1,77 @@ +export const pwd = document.getElementById('login-pwd'); +export const email = document.getElementById('login-email'); +export const nick = document.getElementById('login-nickname'); +export const confirmPwd = document.getElementById('login-pwd-confirm'); +export const loginBtn = document.getElementById('login-btn'); +export const signBtn= document.getElementById('sign-btn'); +export const visibilityIcon = document.querySelectorAll(".visibility-off"); + +// 에러 메세지 추가 +export function addErrorMessage(target,message) { + removeErrorMessage(target); + const error = document.createElement("div"); + error.textContent= message; + error.classList.add("alert-empty"); + target.classList.add("empty"); + target.after(error); + } + + // 에러 메세지 삭제 + export function removeErrorMessage(target){ + const error = target.nextElementSibling; + if(error && error.classList.contains("alert-empty")){ + error.remove(); + } + target.classList.remove("empty"); + } + + // 비밀번호 체크 +export function checkedPwd(){ + if(pwd.value==''){ + addErrorMessage(pwd,'비밀번호를 입력해주세요'); + }else if (pwd.value.length < 8) { + addErrorMessage(pwd, "비밀번호를 8자 이상 입력해주세요"); + } + } + + // 이메일 체크 + export function checkedEmail(){ + if(email.value===''){ + addErrorMessage(email,'이메일을 입력해주세요'); + }else if(!email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === ""){ + addErrorMessage(email,'잘못된 이메일 형식입니다.') + } + } + + // 비밀번호 확인 +export function confirmPassword() { + + if (confirmPwd.value === "") { + addErrorMessage(confirmPwd, "비밀번호를 입력해주세요"); + } else if (pwd.value !== confirmPwd.value) { + addErrorMessage(confirmPwd, "비밀번호가 일치하지 않습니다."); + } + } + + // 닉네임 체크 +export function checkedNickname(){ + if(nick.value===''){ + addErrorMessage(nick,'닉네임을 입력해주세요'); + } + } + + + // 비밀번호 보이기 아이콘 변화 +export function visibileIcon(event,icon,input) { + event.preventDefault(); + icon.classList.toggle("on"); + if (icon.classList.contains("on")) { + icon.setAttribute("src", "image/visibility_on.png"); + input.setAttribute("type", "text"); + } else { + icon.setAttribute("src", "image/visibility_off.png"); + input.setAttribute("type", "password"); + } +} + + diff --git a/image/visibility_on.png b/image/visibility_on.png new file mode 100644 index 00000000..e2b65cba Binary files /dev/null and b/image/visibility_on.png differ diff --git a/index-responsive.css b/index-responsive.css new file mode 100644 index 00000000..5f306389 --- /dev/null +++ b/index-responsive.css @@ -0,0 +1,22 @@ +/* Mobile */ +@media (min-width:375px) and (max-width:767px){ + .main-header-div { + margin: 0 16px; + } + .img-home{ + width: 100%; + } + +} +/* Tablet */ +@media (min-width:768px) and (max-width:1199px){ + .main-header-div { + margin: 0 24px; + } + .main-left, .main-right { + max-width: 900px; + } + .br-none-title { + display: none; + } +} \ No newline at end of file diff --git a/index.html b/index.html index fa6b500c..fe2c7dd7 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ - + + @@ -23,7 +24,7 @@
-
일상의 모든 물건을
거래해 보세요
+
일상의 모든 물건을
거래해 보세요
구경하러 가기
배너이미지 @@ -34,7 +35,7 @@ 첫 번째 본문 이미지
Hot Item
-
인기 상품을
확인해 보세요
+
인기 상품을
확인해 보세요
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
@@ -42,7 +43,7 @@ 두 번째 본문 이미지
Search
-
구매를 원하는
상품을 검색하세요
+
구매를 원하는
상품을 검색하세요
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
@@ -51,7 +52,7 @@ 세 번째 본문 이미지
Register
-
판매를 원하는
상품을 등록하세요
+
판매를 원하는
상품을 등록하세요
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
diff --git a/login.html b/login.html index 0fe0ce5c..0814de23 100644 --- a/login.html +++ b/login.html @@ -3,10 +3,12 @@ - + + 로그인 + @@ -25,7 +27,7 @@ placeholder="비밀번호를 입력해주세요" class="sign-form-input" required/> 비밀번호 숨기기 - + 로그인
@@ -38,5 +40,7 @@ + + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 00000000..213d91d7 --- /dev/null +++ b/login.js @@ -0,0 +1,40 @@ +import {pwd,email,loginBtn,visibilityIcon} from './common.js' +import {removeErrorMessage,visibileIcon,checkedPwd,checkedEmail} from './common.js' + +// 비밀번호 체크 +pwd.addEventListener('focusout',checkedPwd); +pwd.addEventListener("focusin", () => removeErrorMessage(pwd)); + +// 이메일 체크 +email.addEventListener("focusout",checkedEmail); +email.addEventListener('focusin',()=>removeErrorMessage(email)); + +// 비밀번호 보이기 아이콘 변화 +visibilityIcon.forEach((icon,i) => { + icon.addEventListener("mousedown", ()=>visibileIcon(event, + visibilityIcon[i] + ,visibilityIcon[i].parentElement.firstElementChild)); + }); + +// 로그인 버튼 체크 +function blockLoginBtn(){ + if(document.querySelector('.alert-empty')||email.value==='' + || !email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === "" + ||pwd.value==''||pwd.value.length < 8){ + loginBtn.classList.remove('ok-btn') + loginBtn.removeAttribute('href'); + }else{ + loginBtn.classList.add('ok-btn') + loginBtn.setAttribute('href','items.html') + } +} + +loginBtn.addEventListener('click',()=>{ + checkedEmail(); + checkedPwd(); + blockLoginBtn(); + }); + +loginBtn.addEventListener('mouseover',blockLoginBtn); + + diff --git a/responsive.css b/responsive.css deleted file mode 100644 index 3b920d43..00000000 --- a/responsive.css +++ /dev/null @@ -1,84 +0,0 @@ -/*style.css*/ -/* common */ -@media (min-width:375px)and (max-width:1199px){ - footer-div{ - flex-flow:wrap; - } - .main-left, .main-right { - width: 100%; - background-color: #ffffff; - flex-wrap: wrap; - } - .main-div, .main-div-right { - padding: 0 20px; - } - .main-img{ - width: 100%; - } - .top-section { - height: auto; - } - .top-div{ - flex-direction: column; - align-items: center; - } - .content { - height: 40vh; - text-align: center; - } - .img-home{ - width: 100%; - } - .footer-div { - flex-flow:wrap; - } - -} -/* Mobile */ -@media (min-width:375px) and (max-width:767px){ - .main-header-div { - margin: 0 16px; - } - .img-home{ - width: 100%; - } - -} -/* Tablet */ -@media (min-width:768px) and (max-width:1199px){ - .main-header-div { - margin: 0 24px; - } - .main-left, .main-right { - max-width: 900px; - } -} - -/* sign.css */ - -/* Mobile */ -@media (min-width:375px) and (max-width:767px) { - .sign-body { - width: 100%; - padding-left: 16px; - padding-right: 16px; - } - .sign-logo{ - width: 55%; - height: 20%; - } - - .sign-form * , .sign-logo { - max-width: 400px; - display: block; - margin-left: auto; - margin-right: auto; - } - - .simple-login-div{ - max-width: 400px; - margin-left: auto; - margin-right: auto; - } - -} diff --git a/root.css b/root.css index 8a9a3727..f5636ec7 100644 --- a/root.css +++ b/root.css @@ -10,4 +10,7 @@ --gray50 : #f9fafb; --blue:#3692ff; --white:#ffffff; - } \ No newline at end of file + --red :#F74747; + } + + \ No newline at end of file diff --git a/sign-responsive.css b/sign-responsive.css new file mode 100644 index 00000000..e5ec08ef --- /dev/null +++ b/sign-responsive.css @@ -0,0 +1,26 @@ +/* Mobile */ +@media (min-width:375px) and (max-width:767px) { + .sign-body { + width: 100%; + padding-left: 16px; + padding-right: 16px; + } + .sign-logo{ + width: 55%; + height: 20%; + } + + .sign-form * , .sign-logo { + max-width: 400px; + display: block; + margin-left: auto; + margin-right: auto; + } + + .simple-login-div{ + max-width: 400px; + margin-left: auto; + margin-right: auto; + } + +} diff --git a/sign.css b/sign.css index 20d09137..6559e99a 100644 --- a/sign.css +++ b/sign.css @@ -69,12 +69,11 @@ font-size: 20px; font-weight: 500; color: var(--gray100); - cursor:pointer; + text-align: center; + display: inline-block; + text-decoration: none; } - .sign-btn:hover { - background-color: var(--blue); - } .simple-login-div { display: flex; @@ -84,6 +83,7 @@ padding :16px 23px; width: 100%; background-color: #e6f2ff; + border-radius: 8px; } .simple-login-txt { @@ -115,8 +115,24 @@ color: var(--blue); } - +/*이벤트발생 시 적용할 css*/ .footer-signup-link:hover { color : #1251aa } +.sign-form-input.empty { + margin-bottom: 0; + outline : 1px solid var(--red); +} +.alert-empty{ + font-size: 14px; + color: var(--red); + margin-top: 10px; + margin-bottom: 16px; + padding : 0 15px; +} +.ok-btn:hover{ + background-color: var(--blue); + cursor:pointer; + text-decoration: none; +} diff --git a/signin.html b/signin.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/signin.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/signup.html b/signup.html index d69610b0..cf3c7099 100644 --- a/signup.html +++ b/signup.html @@ -3,7 +3,8 @@ - + + 회원가입 @@ -41,7 +42,7 @@ 비밀번호 숨기기
- + 회원가입
@@ -54,5 +55,6 @@ + \ No newline at end of file diff --git a/signup.js b/signup.js new file mode 100644 index 00000000..42bcd73d --- /dev/null +++ b/signup.js @@ -0,0 +1,57 @@ +import {pwd,email,nick,confirmPwd,signBtn,visibilityIcon} from './common.js' +import {checkedPwd,checkedEmail,removeErrorMessage,visibileIcon,confirmPassword,checkedNickname} from './common.js' +const pwdParent = document.querySelector('.password-container'); + +// 비밀번호 체크 +pwd.addEventListener('focusout',checkedPwd); +pwd.addEventListener("focusin", () => removeErrorMessage(pwd)); + +// 이메일 체크 +email.addEventListener("focusout",checkedEmail); +email.addEventListener('focusin',()=>removeErrorMessage(email)); + + +// 닉네임 체크 +nick.addEventListener("focusout",checkedNickname); +nick.addEventListener("focusin",()=>removeErrorMessage(nick)); + +// 비밀번호 확인 +confirmPwd.addEventListener("focusout", confirmPassword); +confirmPwd.addEventListener("focusin", () => removeErrorMessage(confirmPwd)); + +// 비밀번호 보이기 아이콘 변화 + visibilityIcon.forEach((icon,i) => { + icon.addEventListener("mousedown", ()=>visibileIcon(event, + visibilityIcon[i] + ,visibilityIcon[i].parentElement.firstElementChild)); + }); + +// 회원가입 버튼 체크 +function blockLoginBtn(){ + if(document.querySelector('.alert-empty')||email.value==='' + || !email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === "" + ||pwd.value==''||pwd.value.length < 8 + ||nick.value===''||pwd.value !== confirmPwd.value){ + signBtn.classList.remove('ok-btn') + signBtn.removeAttribute('href'); + }else{ + signBtn.classList.add('ok-btn') + signBtn.setAttribute('href','signin.html') + } +} +signBtn.addEventListener('click',()=>{ + checkedEmail(); + checkedPwd(); + checkedNickname(); + confirmPassword() + blockLoginBtn(); + }); + + signBtn.addEventListener('mouseover',blockLoginBtn); + + + + + + +