From fd670757e7479aecbc3cf78e07ec3d9c79a5d955 Mon Sep 17 00:00:00 2001 From: YuWonKyu Date: Fri, 14 Mar 2025 00:54:42 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=EB=AF=B8=EC=85=983=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=EB=B0=B1=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 타이틀 수정 - 불필요한 주석 삭제 - 오픈그래프 메타태그 옳바른 주소값 수정 - 가독성을 위한 들여쓰기 추가 - min-width 삭제 --- base.css | 25 +++ css/index.css => index.css | 27 +-- index.html | 116 ++++++------ signin/signin.css | 222 +++++++++++++++++++++++ html/login.html => signin/signin.html | 8 +- css/loginSignUp.css => signup/signup.css | 5 +- html/SignUp.html => signup/signup.html | 10 +- 7 files changed, 315 insertions(+), 98 deletions(-) create mode 100644 base.css rename css/index.css => index.css (93%) create mode 100644 signin/signin.css rename html/login.html => signin/signin.html (92%) rename css/loginSignUp.css => signup/signup.css (99%) rename html/SignUp.html => signup/signup.html (92%) 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/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..f48a00e4 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 @@
  • - X 아이콘(전 트위터) + X 아이콘(전 트위터)
  • - 유튜브 아이콘 + 유튜브 아이콘
  • - 인스타그램 아이콘 + 인스타그램 아이콘
diff --git a/signin/signin.css b/signin/signin.css new file mode 100644 index 00000000..a5cbc836 --- /dev/null +++ b/signin/signin.css @@ -0,0 +1,222 @@ +: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-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; +} +.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; +} +.login-button ,.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(--secondary-400); + color: var(--secondary-100); + cursor: pointer; +} +.login-button:hover ,.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: 19.8rem; + 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/html/login.html b/signin/signin.html similarity index 92% rename from html/login.html rename to signin/signin.html index c9a5d437..100d7c4b 100644 --- a/html/login.html +++ b/signin/signin.html @@ -5,13 +5,13 @@ - login - + 판다마켓 - 로그인 +
- + 판다마켓 로고 글자 @@ -49,7 +49,7 @@
diff --git a/css/loginSignUp.css b/signup/signup.css similarity index 99% rename from css/loginSignUp.css rename to signup/signup.css index 5ae7fd78..5ef707b2 100644 --- a/css/loginSignUp.css +++ b/signup/signup.css @@ -18,9 +18,10 @@ --error: #f74747; } * { - font-family: 'Pretendard'; box-sizing: border-box; + flex-wrap: wrap; font-size: 10px; + font-family: 'Pretendard'; } body { margin: 3rem auto; @@ -37,7 +38,7 @@ main { align-items: center; } .main-logo { - width: 10.353rem; + width: 10.3rem; height: 10.388rem; } .main-logo-text { diff --git a/html/SignUp.html b/signup/signup.html similarity index 92% rename from html/SignUp.html rename to signup/signup.html index 0a48cd8c..6c9e460f 100644 --- a/html/SignUp.html +++ b/signup/signup.html @@ -5,13 +5,13 @@ - SignUp - - + 판다마켓 - 회원가입 + +
- + 판다마켓 로고 글자 @@ -63,7 +63,7 @@
From a3f968bc5c41610ab7608329d98f839bba997ad3 Mon Sep 17 00:00:00 2001 From: YuWonKyu Date: Mon, 17 Mar 2025 15:20:46 +0900 Subject: [PATCH 2/8] =?UTF-8?q?js=ED=8C=8C=EC=9D=BC=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9D=B4=EB=A9=94=EC=9D=BC=EC=9D=B8=ED=92=8B=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 각 폴더에 js파일 추가 - 로그인,회원가입페이지에 이메일입력란 오류메세지추가 - css 인풋 높이 확장 --- formFunction.js | 0 signin/signin.css | 13 +++++++++++++ signin/signin.html | 19 ++++++++++++++----- signin/signin.js | 12 ++++++++++++ signup/signup.css | 14 ++++++++++++++ signup/signup.html | 34 +++++++++++++++++++++++----------- signup/signup.js | 12 ++++++++++++ 7 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 formFunction.js create mode 100644 signin/signin.js create mode 100644 signup/signup.js diff --git a/formFunction.js b/formFunction.js new file mode 100644 index 00000000..e69de29b diff --git a/signin/signin.css b/signin/signin.css index a5cbc836..c03a9c26 100644 --- a/signin/signin.css +++ b/signin/signin.css @@ -60,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; @@ -80,6 +88,11 @@ form { border: none; padding: 1.6rem 2.4rem; } +#error-message { + display: none; + color: var(--error); + +} .input-password { position: relative; } diff --git a/signin/signin.html b/signin/signin.html index 100d7c4b..b97895c4 100644 --- a/signin/signin.html +++ b/signin/signin.html @@ -11,21 +11,28 @@
- + 판다마켓 로고 글자
-
+ + \ No newline at end of file diff --git a/signin/signin.js b/signin/signin.js new file mode 100644 index 00000000..82f525b5 --- /dev/null +++ b/signin/signin.js @@ -0,0 +1,12 @@ +document.getElementById('email').addEventListener('blur', function(){ + const emailInput = document.getElementById('email'); + const errorMassage = document.getElementById('error-message'); + + if(!emailInput.value) { + emailInput.classList.add('error'); + errorMassage.style.display = 'block'; + } else { + emailInput.classList.remove('error'); + errorMassage.style.display = 'none'; + } +}); \ No newline at end of file diff --git a/signup/signup.css b/signup/signup.css index 5ef707b2..ad350242 100644 --- a/signup/signup.css +++ b/signup/signup.css @@ -59,6 +59,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; @@ -79,6 +87,12 @@ form { border: none; padding: 1.6rem 2.4rem; } +#error-message, #error-password-message { + display: none; + color: var(--error); + font-size: 1.4rem; + padding-left: 1.6rem; +} .input-password { position: relative; } diff --git a/signup/signup.html b/signup/signup.html index 6c9e460f..f5005794 100644 --- a/signup/signup.html +++ b/signup/signup.html @@ -11,26 +11,32 @@
- + 판다마켓 로고 글자 -
+ + \ No newline at end of file diff --git a/signup/signup.js b/signup/signup.js new file mode 100644 index 00000000..82f525b5 --- /dev/null +++ b/signup/signup.js @@ -0,0 +1,12 @@ +document.getElementById('email').addEventListener('blur', function(){ + const emailInput = document.getElementById('email'); + const errorMassage = document.getElementById('error-message'); + + if(!emailInput.value) { + emailInput.classList.add('error'); + errorMassage.style.display = 'block'; + } else { + emailInput.classList.remove('error'); + errorMassage.style.display = 'none'; + } +}); \ No newline at end of file From ef4d7555c95d06717d007576930d52ebdeb0c00d Mon Sep 17 00:00:00 2001 From: YuWonKyu Date: Mon, 17 Mar 2025 18:17:00 +0900 Subject: [PATCH 3/8] =?UTF-8?q?Add=20Signin.js=20=EB=B9=84=EB=B0=80?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=EB=B3=B4=EA=B8=B0/=EA=B0=80=EB=A6=AC?= =?UTF-8?q?=EA=B8=B0,=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그인 유효성 확인 및 css 색상 변경 - 비밀번호 눈모양 클릭식 비밀번호 보기/가리기 가능하게 변경 --- signin/signin.css | 17 +++++----- signin/signin.html | 19 +++++++----- signin/signin.js | 77 ++++++++++++++++++++++++++++++++++++++++++++-- signup/signup.css | 6 ++-- signup/signup.html | 29 +++++++++++------ signup/signup.js | 75 ++++++++++++++++++++++++++++++++++++++++++-- 6 files changed, 191 insertions(+), 32 deletions(-) diff --git a/signin/signin.css b/signin/signin.css index c03a9c26..15803b09 100644 --- a/signin/signin.css +++ b/signin/signin.css @@ -78,7 +78,6 @@ input.error { .input-field { width: 64rem; height: 5.6rem; - gap: 1rem; border-radius: 1.2rem; background-color:var(--secondary-200); font-weight: 400; @@ -88,10 +87,10 @@ input.error { border: none; padding: 1.6rem 2.4rem; } -#error-message { +#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; @@ -99,7 +98,7 @@ input.error { .password-visibility { position: absolute; right: 2.4rem; - top: 1.3rem; + top: 1.5rem; background-color: transparent; border: none; } @@ -109,7 +108,7 @@ input.error { align-items: center; cursor: pointer; } -.login-button ,.sign-button { +.login-button { height: 5.6rem; gap: 1rem; border-radius: 4rem; @@ -118,11 +117,15 @@ input.error { 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 { diff --git a/signin/signin.html b/signin/signin.html index b97895c4..880e794e 100644 --- a/signin/signin.html +++ b/signin/signin.html @@ -21,8 +21,10 @@
- - 이메일을 입력해주세요 + + 이메일을 입력해주세요. + + 잘못된 이메일 형식입니다.
- - 비밀번호를 입력해주세요 + + 비밀번호를 입력해주세요. -
- diff --git a/signin/signin.js b/signin/signin.js index 82f525b5..27d9a858 100644 --- a/signin/signin.js +++ b/signin/signin.js @@ -1,12 +1,83 @@ +//이메일 document.getElementById('email').addEventListener('blur', function(){ const emailInput = document.getElementById('email'); - const errorMassage = document.getElementById('error-message'); + const errorMassage = document.getElementById('error-email-message'); + const errorMassageFormat = document.getElementById('error-emailform-message') - if(!emailInput.value) { + 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 emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + return emailRegex.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'; } -}); \ No newline at end of file + validateForm(); +}) +// 이메일 + 비밀번호 유효성 +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'; + } +}) \ No newline at end of file diff --git a/signup/signup.css b/signup/signup.css index ad350242..6a9a90b5 100644 --- a/signup/signup.css +++ b/signup/signup.css @@ -87,7 +87,7 @@ input.error { border: none; padding: 1.6rem 2.4rem; } -#error-message, #error-password-message { +#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; @@ -109,7 +109,7 @@ input.error { align-items: center; cursor: pointer; } -.login-button ,.sign-button { +.sign-button { height: 5.6rem; gap: 1rem; border-radius: 4rem; @@ -122,7 +122,7 @@ input.error { color: var(--secondary-100); cursor: pointer; } -.login-button:hover ,.sign-button:hover { +.sign-button:hover { background-color: var(--primary-200); } .easy-login { diff --git a/signup/signup.html b/signup/signup.html index f5005794..9f48cd19 100644 --- a/signup/signup.html +++ b/signup/signup.html @@ -21,40 +21,51 @@
- + 이메일을 입력해주세요 + + 잘못된 이메일 형식입니다. +
- +
+ + + 닉네임을 입력해주세요. + +
- - 비밀번호를 입력해주세요 + + 비밀번호를 입력해주세요. + + + 비밀번호를 8자 이상 입력해주세요.
-