diff --git a/base.css b/base.css new file mode 100644 index 00000000..6787b23a --- /dev/null +++ b/base.css @@ -0,0 +1,25 @@ +:root { + --primary-0: #e6f2ff; + --primary-50: #cfe5ff; /* background */ + --primary-100: #3692ff; /* default */ + --primary-200: #1967d6; /* hover */ + --primary-300: #1251aa; /* active, focus */ + --secondary-50: #f9fafb; + --secondary-100: #f3f4f6; /*input bg*/ + --secondary-200: #e5e7eb; + --secondary-300: #fcfcfc; /* card bg, bottom banner bg */ + --secondary-350: #dfdfdf; + --secondary-400: #9ca3af; /* inactive */ + --secondary-500: #6b7280; + --secondary-600: #4b5563; + --secondary-700: #374151; + --secondary-800: #1f2937; + --secondary-900: #111827; /* footer bg*/ + --error: #f74747; +} +* { + box-sizing: border-box; + flex-wrap: wrap; + font-size: 10px; + font-family: 'Pretendard'; +} \ No newline at end of file diff --git a/html/SignUp.html b/html/SignUp.html deleted file mode 100644 index 0a48cd8c..00000000 --- a/html/SignUp.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - SignUp - - - - -
- - - 판다마켓 로고 글자 - -
- - - - - - - -
- - -
- -
- - -
- -
-
-
- 간편 로그인하기 -
- -
-
- 이미 회원이신가요? 로그인 -
-
- - \ No newline at end of file diff --git a/img/webshop.jpg b/img/webshop.jpg new file mode 100644 index 00000000..320dc3fc Binary files /dev/null and b/img/webshop.jpg differ diff --git a/img/webshop.png b/img/webshop.png deleted file mode 100644 index 724226f1..00000000 Binary files a/img/webshop.png and /dev/null differ diff --git a/css/index.css b/index.css similarity index 93% rename from css/index.css rename to index.css index d26030e7..3d80013b 100644 --- a/css/index.css +++ b/index.css @@ -1,27 +1,4 @@ -:root { - --primary-0: #e6f2ff; - --primary-50: #cfe5ff; /* background */ - --primary-100: #3692ff; /* default */ - --primary-200: #1967d6; /* hover */ - --primary-300: #1251aa; /* active, focus */ - --secondary-50: #f9fafb; - --secondary-100: #f3f4f6; /*input bg*/ - --secondary-200: #e5e7eb; - --secondary-300: #fcfcfc; /* card bg, bottom banner bg */ - --secondary-350: #dfdfdf; - --secondary-400: #9ca3af; /* inactive */ - --secondary-500: #6b7280; - --secondary-600: #4b5563; - --secondary-700: #374151; - --secondary-800: #1f2937; - --secondary-900: #111827; /* footer bg*/ - --error: #f74747; -} -* { - box-sizing: border-box; - flex-wrap: wrap; - font-size: 10px; -} +@import url(base.css); body { font-family: 'Pretendard'; margin: 0; @@ -387,7 +364,7 @@ footer { padding: 3.2rem 10.2rem 0; } } -@media (min-width: 375px) and (max-width: 767px){ +@media (max-width: 767px){ html { font-size: 8px; } diff --git a/index.html b/index.html index d2921380..b9cd932f 100644 --- a/index.html +++ b/index.html @@ -6,49 +6,36 @@ 판다마켓 - - - + + - - - - - - + + + + + + - - - - - - - + + + + + + + - +
- - 판다마켓글 + + 판다마켓글 -
@@ -60,31 +47,34 @@
- 웃을 구경하는 판다 + 웃을 구경하는 판다
- Hot item + Hot item
- 인기 상품을 - - 확인해 보세요 + 인기 상품을 + + 확인해 보세요 +
- 가장 HOT한 중고거래 물품을
- 판다 마켓에서 확인해 보세요 + 가장 HOT한 중고거래 물품을
+ 판다 마켓에서 확인해 보세요
@@ -100,7 +90,9 @@
구매를 원하는 - 상품을 검색하세요 + + 상품을 검색하세요 +
구매하고 싶은 물품은 검색해서
@@ -108,28 +100,28 @@
- 돋보기가 그려진 그림 + 돋보기가 그려진 그림
- 여러 사진들과 파일들 + 여러 사진들과 파일들
- Register + Register
-
- 판매를 원하는 - - 상품을 등록하세요 - -
-
- 어떤 물건이든 판매하고 싶은 상품을
- 쉽게 등록하세요 -
+
+ 판매를 원하는 + + 상품을 등록하세요 + +
+
+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +
@@ -144,7 +136,7 @@ - 두 판다가 대화하는 모습 + 두 판다가 대화하는 모습 @@ -165,16 +157,16 @@ diff --git a/css/loginSignUp.css b/signin/signin.css similarity index 87% rename from css/loginSignUp.css rename to signin/signin.css index 5ae7fd78..616bbc5a 100644 --- a/css/loginSignUp.css +++ b/signin/signin.css @@ -18,10 +18,12 @@ --error: #f74747; } * { - font-family: 'Pretendard'; box-sizing: border-box; + flex-wrap: wrap; font-size: 10px; + font-family: 'Pretendard'; } + body { margin: 3rem auto; display: flex; @@ -37,7 +39,7 @@ main { align-items: center; } .main-logo { - width: 10.353rem; + width: 10.3rem; height: 10.388rem; } .main-logo-text { @@ -58,6 +60,14 @@ form { flex-direction: column; gap: 2.4rem; } +input.error { + border: 1px solid var(--error); +} +.input-height { + height: 8.2rem; + display: flex; + align-content: space-between; +} .input-label { width: 100%; height: 2.6rem; @@ -68,7 +78,6 @@ form { .input-field { width: 64rem; height: 5.6rem; - gap: 1rem; border-radius: 1.2rem; background-color:var(--secondary-200); font-weight: 400; @@ -78,13 +87,18 @@ form { border: none; padding: 1.6rem 2.4rem; } +#error-email-message, #error-password-message, #error-emailform-message, #error-message-length{ + display: none; + color: var(--error); + font-size: 1.4rem; +} .input-password { position: relative; } .password-visibility { position: absolute; right: 2.4rem; - top: 1.3rem; + top: 1.5rem; background-color: transparent; border: none; } @@ -94,7 +108,7 @@ form { align-items: center; cursor: pointer; } -.login-button ,.sign-button { +.login-button { height: 5.6rem; gap: 1rem; border-radius: 4rem; @@ -103,11 +117,15 @@ form { line-height: 3.2rem; text-align: center; border: none; - background-color:var(--secondary-400); + background-color:var(--primary-100); color: var(--secondary-100); cursor: pointer; } -.login-button:hover ,.sign-button:hover { +.login-button:disabled { + background-color: var(--secondary-400); + cursor:not-allowed; +} +.login-button:hover { background-color: var(--primary-200); } .easy-login { @@ -184,7 +202,7 @@ form { height: 4.5rem; } .main-logo-contain { - width: 19.8rem; + width: 20rem; height: 6.6rem; padding-right: 0.212rem; gap: 1.12rem; diff --git a/html/login.html b/signin/signin.html similarity index 60% rename from html/login.html rename to signin/signin.html index c9a5d437..a2e40e8f 100644 --- a/html/login.html +++ b/signin/signin.html @@ -5,9 +5,10 @@ - login - + 판다마켓 - 로그인 + +
@@ -16,21 +17,33 @@ 판다마켓 로고 글자
-
diff --git a/signin/signin.js b/signin/signin.js new file mode 100644 index 00000000..dde4fb98 --- /dev/null +++ b/signin/signin.js @@ -0,0 +1,81 @@ +//이메일 +document.getElementById('email').addEventListener('blur', function(){ + const emailInput = document.getElementById('email'); + const errorMassage = document.getElementById('error-email-message'); + const errorMassageFormat = document.getElementById('error-emailform-message') + if (emailInput.value.trim() === '') { + emailInput.classList.add('error'); + errorMassage.style.display = 'block'; + errorMassageFormat.style.display = 'none'; + } else if (!isValidEmail(emailInput.value)) { + emailInput.classList.add('error'); + errorMassageFormat.style.display = 'block'; + errorMassage.style.display = 'none'; + } else { + emailInput.classList.remove('error'); + errorMassage.style.display = 'none'; + errorMassageFormat.style.display = 'none'; + } +}) +//이메일 양식 +function isValidEmail(email) { + const emailstyle = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + return emailstyle.test(email); +} +//비밀번호 +document.getElementById('password').addEventListener('blur', function(){ + const passwordInput = document.getElementById('password'); + const errorMassage = document.getElementById('error-password-message'); + const errorMassageLength = document.getElementById('error-message-length'); + if (passwordInput.value.trim() ==='') { + passwordInput.classList.add('error'); + errorMassage.style.display = 'block'; + errorMassageLength.style.display = 'none'; + } else if (passwordInput.value.length < 8) { + passwordInput.classList.add('error'); + errorMassageLength.style.display = 'block'; + errorMassage.style.display = 'none'; + } else { + passwordInput.classList.remove('error'); + errorMassage.style.display = 'none'; + errorMassageLength.style.display = 'none'; + } + validateForm(); +}) +//비밀번호 8자리 확인 +function isValidPassword(password) { + return password.length >=8; +} +// 이메일 + 비밀번호 유효성 +function validateForm() { + const emailInput = document.getElementById('email'); + const passwordInput = document.getElementById('password'); + const loginButton = document.getElementById('signin-button'); +//유효성 변수 + const emailValid = isValidEmail(emailInput.value.trim()); + const passwordValid = isValidPassword(passwordInput.value.trim()); + if (emailValid && passwordValid) { + loginButton.disabled = false; + } else { + loginButton.disabled = true; + } +} +// 로그인 클릭시 +document.getElementById('signin-button').addEventListener('click',function(){ + window.location.href = "/items"; +}) + +//비밀번호 눈모양설정 +document.getElementById('toggle-password').addEventListener('click', function(){ + const passwordInput = document.getElementById('password'); + const eyeIcon = document.getElementById('eye-icon') + + if (passwordInput.type === 'password') { + passwordInput.type = 'text'; + eyeIcon.src = '../img/passwordEye.svg'; + } else { + passwordInput.type = 'password'; + eyeIcon.src = '../img/passwordBlind.svg'; + } +}) + diff --git a/signup/signup.css b/signup/signup.css new file mode 100644 index 00000000..15759393 --- /dev/null +++ b/signup/signup.css @@ -0,0 +1,239 @@ +:root { + --primary-0: #e6f2ff; + --primary-50: #cfe5ff; /* background */ + --primary-100: #3692ff; /* default */ + --primary-200: #1967d6; /* hover */ + --primary-300: #1251aa; /* active, focus */ + --secondary-50: #f9fafb; + --secondary-100: #f3f4f6; /*input bg*/ + --secondary-200: #e5e7eb; + --secondary-300: #fcfcfc; /* card bg, bottom banner bg */ + --secondary-350: #dfdfdf; + --secondary-400: #9ca3af; /* inactive */ + --secondary-500: #6b7280; + --secondary-600: #4b5563; + --secondary-700: #374151; + --secondary-800: #1f2937; + --secondary-900: #111827; /* footer bg*/ + --error: #f74747; +} +* { + box-sizing: border-box; + flex-wrap: wrap; + font-size: 10px; + font-family: 'Pretendard'; +} +body { + margin: 3rem auto; + display: flex; + flex-direction: column; + align-items: center; +} +main { + width: 64rem; + height: auto; + display: flex; + gap: 4rem; + flex-direction: column; + align-items: center; +} +.main-logo { + width: 10.3rem; + height: 10.388rem; +} +.main-logo-text { + width: 26.6rem; + height: 9rem; +} +.main-logo-contain { + width: 39.6rem; + height: 13.2rem; + padding-right: 0.423rem; + display: flex; + align-items: center; + gap: 2.23rem; +} +form { + width: 64rem; + display: flex; + flex-direction: column; + gap: 2.4rem; +} +input.error { + border: 1px solid var(--error); +} +.input-height { + height: 8.2rem; + display: flex; + align-content: space-between; +} +.input-label { + width: 100%; + height: 2.6rem; + font-weight: 700; + font-size: 1.8rem; + line-height: 2.6rem; +} +.input-field { + width: 64rem; + height: 5.6rem; + gap: 1rem; + border-radius: 1.2rem; + background-color:var(--secondary-200); + font-weight: 400; + font-size: 1.3rem; + line-height: 2.6rem; + color: var(--secondary-800); + border: none; + padding: 1.6rem 2.4rem; +} +#error-email-message, #error-emailform-message, #error-username-message, #error-password-message, #error-matchpassword-message, #error-message-length { + display: none; + color: var(--error); + font-size: 1.4rem; + padding-left: 1.6rem; +} +.input-password { + position: relative; +} +.password-visibility { + position: absolute; + right: 2.4rem; + top: 1.3rem; + background-color: transparent; + border: none; +} +.password-Eye { + background-color: transparent; + display: flex; + align-items: center; + cursor: pointer; +} +.sign-button { + height: 5.6rem; + gap: 1rem; + border-radius: 4rem; + font-weight: 600; + font-size: 2rem; + line-height: 3.2rem; + text-align: center; + border: none; + background-color:var(--primary-100); + color: var(--secondary-100); + cursor: pointer; +} +.sign-button:disabled, #signup-button.disabled { + cursor: not-allowed; + background-color: var(--secondary-400); +} +.sign-button:hover { + background-color: var(--primary-200); +} +.easy-login { + width: 64rem; + height: 7.4rem; + background-color: var(--primary-0); + display: flex; + justify-content:space-between; + align-items: center; + border-radius: 0.8rem; + gap: 1rem; + padding:1.6rem 2.3rem; +} +.easy-text { + width: 10.1rem; + height: 2.6rem; + font-weight: 500; + font-size: 1.6rem; + line-height: 2.6rem; + color: var(--secondary-800); +} +.login-sites { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.6rem; + width: 10rem; + height: 4.2rem; +} +.login-site { + width: 4.2rem; + height: 4.2rem; +} +.signup-text { + width: 19.7rem; + height: 2.4rem; + font-weight: 500; + font-size: 1.4rem; + line-height: 2.4rem; + gap: 0.4rem; +} +.signlink-text { + width: 4.9rem; + height: 1.7rem; + color: var(--primary-100); + font-weight: 500; + font-size: 1.4rem; + line-height: 100%; +} + +@media (max-width: 767px){ + html { + font-size: 8px; + } + body { + display: flex; + flex-direction: column; + align-items: center; + } + main { + width: 34.3rem; + height: auto; + display: flex; + gap: 2.4rem; + flex-direction: column; + align-items: center; + } + .main-logo { + width: 5.176rem; + height: 5.194rem; + } + .main-logo-text { + width: 13.3rem; + height: 4.5rem; + } + .main-logo-contain { + width: 20rem; + height: 6.6rem; + padding-right: 0.212rem; + gap: 1.12rem; + } + form { + width: 34.3rem; + gap: 1.6rem; + } + .input-label { + width: 100%; + height: 1.7rem; + font-size: 1.4rem; + line-height: 100%; + } + .input-field { + width: 34.3rem; + height: 5.6rem; + font-size: 1.6rem; + } + .password-visibility { + top: 1.5rem; + } + .easy-login { + width: 34.3rem; + } + .signup-text { + width: 19.7rem; + height: 2.4rem; + } + .signlink-text { + width: 4.9rem; + } +} diff --git a/signup/signup.html b/signup/signup.html new file mode 100644 index 00000000..cfbbcefc --- /dev/null +++ b/signup/signup.html @@ -0,0 +1,92 @@ + + + + + + + + 판다마켓 - 회원가입 + + + + + +
+ + + 판다마켓 로고 글자 + +
+ +
+ + + 이메일을 입력해주세요 + + + 잘못된 이메일 형식입니다. + +
+ +
+ + + 닉네임을 입력해주세요. + +
+ +
+ + + 비밀번호를 입력해주세요. + + + 비밀번호를 8자 이상 입력해주세요. + + +
+ +
+ + + 비밀번호가 일치하지 않습니다. + + +
+ + +
+ + +
+ + \ No newline at end of file diff --git a/signup/signup.js b/signup/signup.js new file mode 100644 index 00000000..eee9138a --- /dev/null +++ b/signup/signup.js @@ -0,0 +1,144 @@ +//이메일 +document.getElementById('email').addEventListener('blur', function(){ + const emailInput = document.getElementById('email'); + const errorMassage = document.getElementById('error-email-message'); + const errorMassageFormat = document.getElementById('error-emailform-message') + if (emailInput.value.trim() === '') { + emailInput.classList.add('error'); + errorMassage.style.display = 'block'; + errorMassageFormat.style.display = 'none'; + } else if (!isValidEmail(emailInput.value)) { + emailInput.classList.add('error'); + errorMassageFormat.style.display = 'block'; + errorMassage.style.display = 'none'; + } else { + emailInput.classList.remove('error'); + errorMassage.style.display = 'none'; + errorMassageFormat.style.display = 'none'; + } + validateForm(); +}); +// 이메일 양식 검증 +function isValidEmail(email) { + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + return emailRegex.test(email); +} +//닉네임 +document.getElementById('username').addEventListener('blur', function(){ + const usernameInput = document.getElementById('username'); + const errorMassage = document.getElementById('error-username-message'); + if(!usernameInput.value) { + usernameInput.classList.add('error'); + errorMassage.style.display = 'block'; + } else { + usernameInput.classList.remove('error'); + errorMassage.style.display = 'none'; + } + validateForm(); +}); +//비밀번호 +document.getElementById('password').addEventListener('blur', function(){ + const passwordInput = document.getElementById('password'); + const errorMassage = document.getElementById('error-password-message'); + const errorMassageLength = document.getElementById('error-message-length'); + if (passwordInput.value.trim() ==='') { + passwordInput.classList.add('error'); + errorMassage.style.display = 'block'; + errorMassageLength.style.display = 'none'; + } else if (passwordInput.value.length < 8) { + passwordInput.classList.add('error'); + errorMassageLength.style.display = 'block'; + errorMassage.style.display = 'none'; + } else { + passwordInput.classList.remove('error'); + errorMassage.style.display = 'none'; + errorMassageLength.style.display = 'none'; + } + validateForm(); +}); +//비밀번호 8자리 검증 +function isValidPassword(password) { + return password.length >=8; +}; +//비밀번호 재확인 +document.getElementById('checkpassword').addEventListener('blur', function(){ + checkPasswordMatch(); + validateForm(); +}); +//비밀번호 확인 +function checkPasswordMatch() { + const passwordInput = document.getElementById('password'); + const checkpassword = document.getElementById('checkpassword'); + const errorMassageMatch = document.getElementById('error-matchpassword-message'); + if (passwordInput.value !== checkpassword.value) { + checkpassword.classList.add('error'); + errorMassageMatch.style.display = 'block'; + } else { + checkpassword.classList.remove('error'); + errorMassageMatch.style.display = 'none'; + } +}; +//회원가입 활성화 비활성화 +function validateForm() { + const emailInput = document.getElementById('email'); + const usernameInput = document.getElementById('username'); + const passwordInput = document.getElementById('password'); + const checkPasswordInput = document.getElementById('checkpassword'); + const signupButton = document.getElementById('signup-button'); + + const emailValid = isValidEmail(emailInput.value.trim()); + const usernameValid = usernameInput.value.trim() !== ''; + const passwordValid = isValidPassword(passwordInput.value.trim()); + const passwordsMatch = passwordInput.value === checkPasswordInput.value; + + if (emailValid && usernameValid && passwordValid && passwordsMatch) { + signupButton.disabled = false; + } else { + signupButton.disabled = true; + } +}; +// 회원가입 클릭시 페이지이동 및 메세지 +document.getElementById('signup-button').addEventListener('click', function(){ + const emailInput = document.getElementById('email'); + const usernameInput = document.getElementById('username'); + const passwordInput = document.getElementById('password'); + const checkPasswordInput = document.getElementById('checkpassword'); + + const emailValid = isValidEmail(emailInput.value.trim()); + const usernameValid = usernameInput.value.trim() !== ''; + const passwordValid = isValidPassword(passwordInput.value.trim()); + const passwordsMatch = passwordInput.value === checkPasswordInput.value; + + if (emailValid && usernameValid && passwordValid && passwordsMatch) { + window.location.href = "../signin/signin.html"; + } else { + alert("정보를 입력해주세요."); + } +}); +//<비밀번호> 눈모양설정 +document.getElementById('toggle-password').addEventListener('click', function(){ + const passwordInput = document.getElementById('password'); + const eyeIcon = document.getElementById('eye-icon') + + if (passwordInput.type === 'password') { + passwordInput.type = 'text'; + eyeIcon.src = '../img/passwordEye.svg'; + } else { + passwordInput.type = 'password'; + eyeIcon.src = '../img/passwordBlind.svg'; + } +}) +//<비밀번호 확인> 눈모양설정 +document.getElementById('toggle-password-re').addEventListener('click', function(){ + const passwordInput = document.getElementById('checkpassword'); + const eyeIcon = document.getElementById('eye-icon-re') + + if (passwordInput.type === 'password') { + passwordInput.type = 'text'; + eyeIcon.src = '../img/passwordEye.svg'; + } else { + passwordInput.type = 'password'; + eyeIcon.src = '../img/passwordBlind.svg'; + } +}); +