diff --git a/faq.html b/faq.html index b5987d28d..43e658755 100644 --- a/faq.html +++ b/faq.html @@ -3,19 +3,18 @@ - - - - + + + + + 판다마켓 - FAQ + + + - 판다마켓 + diff --git a/images/panda/panda.png b/images/panda/panda.png deleted file mode 100644 index a74bf18ae..000000000 Binary files a/images/panda/panda.png and /dev/null differ diff --git a/images/panda/panda_logo.png b/images/panda/panda_logo.png deleted file mode 100644 index 2d715499d..000000000 Binary files a/images/panda/panda_logo.png and /dev/null differ diff --git a/images/panda/pandamarket.png b/images/panda/pandamarket.png deleted file mode 100644 index 3e18897f3..000000000 Binary files a/images/panda/pandamarket.png and /dev/null differ diff --git a/images/pandamarket/favicon.ico b/images/pandamarket/favicon.ico new file mode 100644 index 000000000..9fecc692d Binary files /dev/null and b/images/pandamarket/favicon.ico differ diff --git a/images/pandamarket/logo.svg b/images/pandamarket/logo.svg new file mode 100644 index 000000000..d497acbfe --- /dev/null +++ b/images/pandamarket/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/pandamarket/og-image.png b/images/pandamarket/og-image.png new file mode 100644 index 000000000..e7d7b5bf6 Binary files /dev/null and b/images/pandamarket/og-image.png differ diff --git a/index.html b/index.html index dc7da6506..25eff058a 100644 --- a/index.html +++ b/index.html @@ -3,26 +3,22 @@ - + + + + + + 판다마켓 + + - - 판다마켓
- - 판다마켓 홈 + + 판다마켓 로고 로그인
@@ -30,26 +26,23 @@
- 인기 상품 + 인기 상품
-

Hot item

-

+

Hot Item

+

인기 상품을
확인해 보세요 -

+

가장 HOT한 중고거래 물품을
판다마켓에서 확인해 보세요 @@ -57,33 +50,27 @@

+ 검색 기능
-

Search

-

+

Search

+

구매를 원하는
상품을 검색하세요 -

+

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

- 검색 기능
- 판매 상품 등록 + 판매 상품 등록
-

Register

-

+

Register

+

판매를 원하는
상품을 등록하세요 -

+

어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요 @@ -94,21 +81,21 @@

diff --git a/items.html b/items.html index 1ab3e640e..31bd798d4 100644 --- a/items.html +++ b/items.html @@ -3,19 +3,18 @@ - - - - + + + + + 판다마켓 - 상품 리스트 + + + - 판다마켓 + diff --git a/login.html b/login.html index 1ec2b16b0..ebde5be85 100644 --- a/login.html +++ b/login.html @@ -3,29 +3,25 @@ - + + + + + + 판다마켓 - 로그인 + + - - 판다마켓 - 로그인
- -
+
+ required + > + 이메일을 입력해 주세요 + 잘못된 이메일 형식입니다
@@ -43,37 +42,30 @@ name="password" type="password" placeholder="비밀번호를 입력해 주세요" - > - 비밀번호 숨김 + required + > +
+ 비밀번호를 입력해 주세요 + 비밀번호를 8자 이상 입력해 주세요 - - +
-

간편 로그인하기

+

간편 로그인하기

@@ -82,6 +74,7 @@

간편 로그인하기

판다마켓이 처음이신가요? 회원가입 - +
+ \ No newline at end of file diff --git a/privacy.html b/privacy.html index d7a67ef80..e17da41ff 100644 --- a/privacy.html +++ b/privacy.html @@ -3,19 +3,18 @@ - - - - + + + + + 판다마켓 - 이용약관 + + + - 판다마켓 + diff --git a/scripts/auth.js b/scripts/auth.js new file mode 100644 index 000000000..7165f3778 --- /dev/null +++ b/scripts/auth.js @@ -0,0 +1,169 @@ + +const login = document.getElementById("login"); +const signup = document.getElementById("signup"); +const email = document.getElementById("email"); +const nickname = document.getElementById("nickname"); +const password = document.getElementById("password"); +const passwordConfirmationInput = document.getElementById("passwordConfirmation"); +const submitButton = document.querySelector('.auth-container form button[type="submit"]'); + +function showError(input, errorId) { + const errorElement = document.getElementById(errorId); + errorElement.style.display = "block"; + input.style.border = "1px solid #f74747"; +} + +function hideError(input, errorId) { + const errorElement = document.getElementById(errorId); + errorElement.style.display = "none"; + input.style.border = "none"; +} + +function validateEmailString(email) { + const emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/; + return emailRegex.test(email); +} + +function checkEmailValidity() { + const emailValue = email.value.trim(); + + isEmailValid = false; + hideError(email, "emailEmptyError"); + hideError(email, "emailInvalidError"); + + if (!emailValue) { + showError(email, "emailEmptyError"); + } else if (!validateEmailString(emailValue)) { + showError(email, "emailInvalidError"); + } else { + isEmailValid = true; + hideError(email, "emailEmptyError"); + hideError(email, "emailInvalidError"); + } + updateSubmitButtonState(); +} + +function checkNicknameValidity() { + const nicknameValue = nickname.value.trim(); + isNicknameValid = false; + hideError(nickname, "nicknameEmptyError"); + + if (!nicknameValue) { + showError(nickname, "nicknameEmptyError"); + } else { + isNicknameValid = true; + hideError(email, "nicknameEmptyError"); + } + updateSubmitButtonState(); +} + +function checkPasswordValidity() { + const passwordValue = password.value.trim(); + isPasswordValid = false; + + hideError(password, "passwordEmptyError"); + hideError(password, "passwordInvalidError"); + + if (!passwordValue) { + showError(password, "passwordEmptyError"); + } else if (passwordValue.length < 8) { + showError(password, "passwordInvalidError"); + } else { + isPasswordValid = true; + hideError(password, "passwordEmptyError"); + hideError(password, "passwordInvalidError"); + } + updateSubmitButtonState(); + +} + +function checkPasswordConfirmationValidity() { + const passwordConfirmationValue = passwordConfirmationInput.value.trim(); + isPasswordConfirmationValid = false; + + hideError(passwordConfirmationInput, "passwordConfirmationError"); + hideError(passwordConfirmationInput, "passwordConfirmationInitError"); + + if (!isPasswordValid) { + showError(passwordConfirmationInput, "passwordConfirmationInitError"); + } else if ( + !passwordConfirmationValue || + passwordConfirmationValue !== password.value.trim() + ) { + showError(passwordConfirmationInput, "passwordConfirmationError"); + } else { + isPasswordConfirmationValid = true; + hideError(passwordConfirmationInput, "passwordConfirmationError"); + hideError(passwordConfirmationInput, "passwordConfirmationInitError"); + } + updateSubmitButtonState(); +} + +function updateSubmitButtonState() { + let isFormValid = isEmailValid && isPasswordValid; + + if (signup) { + isFormValid = + isFormValid && isNicknameValid && isPasswordConfirmationValid; + } + + submitButton.disabled = !isFormValid; +} + +if (email) { + email.addEventListener("focusout", checkEmailValidity); +} +if (nickname) { + nickname.addEventListener("focusout", checkNicknameValidity); +} +if (password) { + password.addEventListener("input", checkPasswordValidity); +} +if (passwordConfirmationInput) { + passwordConfirmationInput.addEventListener( + "input", + checkPasswordConfirmationValidity + ); +} + +updateSubmitButtonState(); + +if (login) { + login.addEventListener("submit", function (event) { + event.preventDefault(); + window.location.href = "items.html"; + }); +} + +if (signup) { + signup.addEventListener("submit", function (event) { + event.preventDefault(); + window.location.href = "signup.html"; + }); +} + +function togglePasswordVisibility(event) { + const button = event.currentTarget; + const inputField = button.parentElement.querySelector("input"); + const toggleIcon = button.querySelector(".password-toggle-icon"); + + const isPasswordVisible = inputField.type === "text"; + + inputField.type = isPasswordVisible ? "text" : "password"; + + toggleIcon.src = isPasswordVisible + ? "images/icons/eye-visible.svg" + : "images/icons/eye-invisible.svg"; + toggleIcon.alt = isPasswordVisible + ? "비밀번호 표시 상태 아이콘" + : "비밀번호 숨김 상태 아이콘"; + button.setAttribute( + "aria-label", + isPasswordVisible ? "비밀번호 숨기기" : "비밀번호 보기" + ); +} + +const toggleButtons = document.querySelectorAll(".password-toggle-button"); +toggleButtons.forEach((button) => + button.addEventListener("click", togglePasswordVisibility) +); diff --git a/singin.html b/singin.html index bebaec34c..f41009ba3 100644 --- a/singin.html +++ b/singin.html @@ -3,25 +3,25 @@ - + + + + + + 판다마켓 - 회원가입 + + - - 판다마켓 - 회원가입
- -
+
+ required + > + + 이메일을 입력해 주세요 + + + 잘못된 이메일 형식입니다 +
+
+ required + > + + 닉네임을 입력해 주세요 +
+
@@ -48,61 +61,81 @@ name="password" type="password" placeholder="비밀번호를 입력해 주세요" - > - 비밀번호 숨김 + required + > +
+ + 비밀번호를 입력해 주세요 + + + 비밀번호를 8자 이상 입력해 주세요 +
+
- +
+ required + > +
+ + 먼저 조건에 맞는 비밀번호를 입력해 주세요 + + + 비밀번호가 일치하지 않습니다 +
-
-

간편 로그인하기

+

간편 로그인하기

- 이미 회원이신가요? 로그인 + 이미 회원이신가요? + 로그인
+ diff --git a/styles/auth.css b/styles/auth.css index fa3d240dd..5e332bd1c 100644 --- a/styles/auth.css +++ b/styles/auth.css @@ -45,13 +45,27 @@ line-height: 24px; } +.input-info input:focus { + outline-color: var(--blue); +} + .input-wrapper { position: relative; display: flex; align-items: center; } -.toggle-password { +.error-message { + color: #f74747; + font-weight: 600; + font-size: 15px; + line-height: 18px; + margin-top: 8px; + display: none; + padding-left: 16px; +} + +.password-toggle-button { position: absolute; right: 24px; } @@ -66,7 +80,7 @@ margin: 24px 0; } -.social-login h3 { +.social-login h2 { font-weight: 500; font-size: 16px; line-height: 24px; @@ -89,7 +103,6 @@ text-underline-offset: 2px; } - @media (min-width: 768px) { .auth-container { max-width: 640px; @@ -108,4 +121,10 @@ font-size: 18px; margin-bottom: 16px; } -} \ No newline at end of file +} + +@media (min-width: 1280px) { + .auth-container { + padding: 60px 0; + } +} diff --git a/styles/global.css b/styles/global.css index 2c45353dc..0c39bcbc7 100644 --- a/styles/global.css +++ b/styles/global.css @@ -27,6 +27,7 @@ body { header { position: fixed; top: 0; + left: 0; width: 100%; height: 70px; display: flex; @@ -44,12 +45,13 @@ main { footer { background-color: #111827; color: #9ca3af; + font-size: 16px; + padding: 32px; display: flex; justify-content: space-between; align-items: center; - padding: 32px 200px 108px 200px; - font-size: 16px; - font-weight: 600; + flex-wrap: wrap; + gap: 60px; } a { @@ -57,7 +59,7 @@ a { color: inherit; } -h1 { +h2 { font-size: 40px; font-weight: 700; line-height: 56px; @@ -65,10 +67,10 @@ h1 { img { vertical-align: bottom; -} +} .button { - background-color: #3692ff; + background-color: var(--blue); color: #ffffff; display: inline-flex; align-items: center; @@ -89,31 +91,16 @@ img { pointer-events: none; } -.pill.button { +.button.pill { font-size: 20px; font-weight: 600; border-radius: 40px; padding: 16px 124px; } -.banner { - background-color: #cfe5ff; - height: 60vh; - display: flex; - align-items: center; - background-repeat: no-repeat; - background-position: 80% bottom; - background-size: 55%; -} - .wrapper { - max-width: 1200px; - margin: 0 auto; width: 100%; -} - -.feature { - margin-bottom: 64px; + margin: 0 16px; } @media (min-width: 768px) { @@ -141,10 +128,6 @@ img { padding: 0 200px; } - .break-on-desktop { - display: inline; - } - footer { padding: 32px 200px 108px 200px; } diff --git a/styles/home.css b/styles/home.css index 0849c2791..a1c54e945 100644 --- a/styles/home.css +++ b/styles/home.css @@ -1,3 +1,12 @@ +.banner { + background-color: #cfe5ff; + height: 60vh; + text-align: center; + background-repeat: no-repeat; + background-position: bottom; + background-size: 100%; +} + .login.button { font-size: 16px; font-weight: 600; @@ -13,11 +22,7 @@ background-image: url("../images/home/bottom.png"); } -.banner .pill.button { - margin-top: 32px; -} - -.banner h1 { +.banner h2 { font-weight: 700; font-size: 32px; line-height: 44.8px; @@ -25,15 +30,15 @@ padding-bottom: 18px; } +.features.wrapper { + padding-bottom: 138px; +} + .feature img { width: 100%; margin-bottom: 20px; } -.features.wrapper { - padding-bottom: 138px; -} - .feature-content { flex: 1; } @@ -42,7 +47,7 @@ text-align: right; } -.feature-content h2 { +.feature-content h3 { color: var(--blue); font-size: 16px; line-height: 22.4px; @@ -50,7 +55,7 @@ margin-bottom: 8px; } -.feature-content h1 { +.feature-content h2 { font-weight: 700; font-size: 24px; line-height: 33.6px; @@ -64,28 +69,13 @@ margin-top: 20px; } -.feature-tag { - color: #3692ff; - font-size: 18px; - line-height: 25px; - font-weight: 700; - margin-bottom: 12px; -} - -.feature-description { - font-size: 24px; - font-weight: 500; - line-height: 30px; - margin-top: 24px; -} - -.footerMenu { +.footer-menu { display: flex; gap: 30px; color: #e5e7eb; } -.socialMedia { +.social-media { display: flex; gap: 12px; } @@ -96,25 +86,25 @@ background-size: 120%; } - .banner h1 { + .banner h2 { font-size: 40px; line-height: 56px; padding-top: 84px; padding-bottom: 24px; } - #features { + .features { padding-top: 24px; padding-bottom: 16px; } - .feature-content h2 { + .feature-content h3 { font-size: 18px; line-height: 25.2px; margin-bottom: 12px; } - .feature-content h1 { + .feature-content h2 { font-size: 32px; line-height: 44.8px; } @@ -135,12 +125,12 @@ background-size: 55%; } - .banner h1 { + .banner h2 { padding-top: 0; padding-bottom: 32px; } - #features { + .features { padding: 138px 0; } @@ -160,7 +150,7 @@ margin-bottom: 0; } - .feature-content h1 { + .feature-content h2 { font-size: 40px; line-height: 56px; } diff --git a/styles/panda.css b/styles/panda.css new file mode 100644 index 000000000..58a510470 --- /dev/null +++ b/styles/panda.css @@ -0,0 +1,14 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + height: 100vmin; +} + +a { + display: block; + background-image: url('/images/pandamarket/og-image.png'); + background-repeat: no-repeat; + background-position: center; + background-size : contain; +} diff --git a/styles/pandaaaa.css b/styles/pandaaaa.css deleted file mode 100644 index e835ec154..000000000 --- a/styles/pandaaaa.css +++ /dev/null @@ -1,4 +0,0 @@ -* { - width: 100%; - height: 100%; -} \ No newline at end of file