diff --git a/image/btn_visibility_on_24px.png b/image/btn_visibility_on_24px.png new file mode 100644 index 00000000..53081da1 Binary files /dev/null and b/image/btn_visibility_on_24px.png differ diff --git a/index.html b/index.html index e5731775..d53db611 100644 --- a/index.html +++ b/index.html @@ -1,119 +1,125 @@ + + + + + + 판다마켓 + - - - - - - 판다마켓 - - - -
- -
-
-
-
-
-

- 일상의 모든 물건을
- 거래해 보세요 -

- - - + +
+ +
+
+
+
+
+

일상의 모든 물건을 거래해 보세요

+ + + +
+ 판다마켓 히어로 이미지
- 판다마켓 히어로 이미지 -
-
-
-
- 카드 이미지 1번 -
- Hot Item -

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

-

- 가장 HOT한 중고거래 물품을
- 판다마켓에서 확인해 보세요 -

+ +
+
+ 카드 이미지 1번 +
+ Hot Item +

인기 상품을 확인해 보세요

+

+ 가장 HOT한 중고거래 물품을
+ 판다마켓에서 확인해 보세요 +

+
-
-
-
-
-
- Search -

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

-

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

+
+
+
+ 카드 이미지 2번 +
+ Search +

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

+

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

+
- 카드 이미지 2번 - -
-
-
- 카드 이미지 3번 -
- Register -

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

-

- 어떤 물건이든 판매하고 싶은 상품을
- 쉽게 등록하세요 -

+
+
+
+ 카드 이미지 3번 +
+ Register +

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

+

+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +

+
+
+
+ + diff --git a/items.html b/items.html index e69de29b..b3fdca32 100644 --- a/items.html +++ b/items.html @@ -0,0 +1,14 @@ + + + + + 판다마켓 + + +
+
+

아이템 페이지

+
+
+ + diff --git a/login.html b/login.html index 61ef68e6..61ca5f80 100644 --- a/login.html +++ b/login.html @@ -1,56 +1,94 @@ + + + + + + 판다마켓 + - - - - - - 판다마켓 - - - -
-
- - 판다마켓 로고 - -
-
-
-
- - - -
-
- -
- -
- + + +
+
+ + 판다마켓 로고 + +
+
+
+
+ + 이메일을 입력해주세요. + 잘못된 이메일 형식입니다. + + 비밀번호를 입력해주세요. + 비밀번호를 8자 이상 입력해주세요. + +
+
+ +
+ +
+ diff --git a/script/function.js b/script/function.js new file mode 100644 index 00000000..5f145ad5 --- /dev/null +++ b/script/function.js @@ -0,0 +1,25 @@ +export { enableLoginButton, passwordShowHide }; + +function enableLoginButton(button, ...validator) { + const checkValid = validator.every((el) => el === true); + if (checkValid) { + button.removeAttribute("disabled"); + button.classList.add("login-button-enable"); + } else { + button.setAttribute("disabled", true); + button.classList.remove("login-button-enable"); + } +} + +function passwordShowHide(button, input) { + const passwordHideImage = button.children.item(0); + const passwordShowImage = button.children.item(1); + + button.onclick = () => { + passwordShowImage.classList.toggle("password-show-button-toggle"); + passwordHideImage.classList.toggle("password-hide-button-toggle"); + if (input.getAttribute("type") === "password") + input.setAttribute("type", "text"); + else input.setAttribute("type", "password"); + }; +} diff --git a/script/login.js b/script/login.js new file mode 100644 index 00000000..0515025c --- /dev/null +++ b/script/login.js @@ -0,0 +1,67 @@ +import { enableLoginButton } from "./function.js"; + +let emailCheck = false; +let passwordCheck = false; + +const loginButton = document.getElementById("login-button"); + +// 이메일 유효성 검사 코드 +const emailInput = document.getElementById("email-input"); +const emailEmptyWarningMessage = document + .getElementsByClassName("warning-message") + .item(0); +const emailInvalidWarningMessage = document + .getElementsByClassName("warning-message") + .item(1); + +emailInput.addEventListener("focusout", (e) => { + if (e.target.value === "" && e.target.validity.valid === true) { + emailInput.classList.add("warning-input-border"); + emailEmptyWarningMessage.classList.add("warning-message-active"); + emailCheck = false; + enableLoginButton(loginButton, emailCheck, passwordCheck); + } else if (e.target.value !== "" && e.target.validity.valid === false) { + emailInput.classList.add("warning-input-border"); + emailEmptyWarningMessage.classList.remove("warning-message-active"); + emailInvalidWarningMessage.classList.add("warning-message-active"); + emailCheck = false; + enableLoginButton(loginButton, emailCheck, passwordCheck); + } else { + emailInput.classList.remove("warning-input-border"); + emailEmptyWarningMessage.classList.remove("warning-message-active"); + emailInvalidWarningMessage.classList.remove("warning-message-active"); + emailCheck = true; + enableLoginButton(loginButton, emailCheck, passwordCheck); + } +}); + +// 비밀번호 유효성 검사 코드 +const passwordInput = document.getElementById("password-input"); +const passwordEmptyWarningMessage = document + .getElementsByClassName("warning-message") + .item(2); +const passwordInvalidWarningMessage = document + .getElementsByClassName("warning-message") + .item(3); + +passwordInput.addEventListener("focusout", (e) => { + if (e.target.value === "") { + passwordInput.classList.add("warning-input-border"); + passwordEmptyWarningMessage.classList.add("warning-message-active"); + passwordInvalidWarningMessage.classList.remove("warning-message-active"); + passwordCheck = false; + enableLoginButton(loginButton, emailCheck, passwordCheck); + } else if (e.target.value.length < 8) { + passwordInput.classList.add("warning-input-border"); + passwordEmptyWarningMessage.classList.remove("warning-message-active"); + passwordInvalidWarningMessage.classList.add("warning-message-active"); + passwordCheck = false; + enableLoginButton(loginButton, emailCheck, passwordCheck); + } else { + passwordInput.classList.remove("warning-input-border"); + passwordEmptyWarningMessage.classList.remove("warning-message-active"); + passwordInvalidWarningMessage.classList.remove("warning-message-active"); + passwordCheck = true; + enableLoginButton(loginButton, emailCheck, passwordCheck); + } +}); diff --git a/script/signup.js b/script/signup.js new file mode 100644 index 00000000..8e4cdb42 --- /dev/null +++ b/script/signup.js @@ -0,0 +1,121 @@ +import { enableLoginButton, passwordShowHide } from "./function.js"; + +let emailCheck = false; +let nicknameCheck = false; +let passwordCheck = false; +let password = ""; + +const loginButton = document.getElementById("login-button"); + +// 이메일 유효성 검사 코드 +const emailInput = document.getElementById("email-input"); +const emailEmptyWarningMessage = document + .getElementsByClassName("warning-message") + .item(0); +const emailInvalidWarningMessage = document + .getElementsByClassName("warning-message") + .item(1); + +emailInput.addEventListener("focusout", (e) => { + if (e.target.value === "" && e.target.validity.valid === true) { + emailInput.classList.add("warning-input-border"); + emailEmptyWarningMessage.classList.add("warning-message-active"); + emailCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } else if (e.target.value !== "" && e.target.validity.valid === false) { + emailInput.classList.add("warning-input-border"); + emailEmptyWarningMessage.classList.remove("warning-message-active"); + emailInvalidWarningMessage.classList.add("warning-message-active"); + emailCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } else { + emailInput.classList.remove("warning-input-border"); + emailEmptyWarningMessage.classList.remove("warning-message-active"); + emailInvalidWarningMessage.classList.remove("warning-message-active"); + emailCheck = true; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } +}); + +// 닉네임 유효성 검사 코드 +const nicknameInput = document.getElementById("nickname-input"); +const nicknameEmptyWarningMessage = document + .getElementsByClassName("warning-message") + .item(2); + +nicknameInput.addEventListener("focusout", (e) => { + if (e.target.value === "") { + nicknameInput.classList.add("warning-input-border"); + nicknameEmptyWarningMessage.classList.add("warning-message-active"); + nicknameCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } else { + nicknameInput.classList.remove("warning-input-border"); + nicknameEmptyWarningMessage.classList.remove("warning-message-active"); + nicknameCheck = true; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } +}); + +// 비밀번호 유효성 검사 코드 +const passwordInput = document.getElementById("password-input"); +const passwordEmptyWarningMessage = document + .getElementsByClassName("warning-message") + .item(3); +const passwordInvalidWarningMessage = document + .getElementsByClassName("warning-message") + .item(4); + +passwordInput.addEventListener("focusout", (e) => { + password = e.target.value; + if (e.target.value === "") { + passwordInput.classList.add("warning-input-border"); + passwordEmptyWarningMessage.classList.add("warning-message-active"); + passwordInvalidWarningMessage.classList.remove("warning-message-active"); + passwordCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } else if (e.target.value.length < 8) { + passwordInput.classList.add("warning-input-border"); + passwordEmptyWarningMessage.classList.remove("warning-message-active"); + passwordInvalidWarningMessage.classList.add("warning-message-active"); + passwordCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } else { + passwordInput.classList.remove("warning-input-border"); + passwordEmptyWarningMessage.classList.remove("warning-message-active"); + passwordInvalidWarningMessage.classList.remove("warning-message-active"); + passwordCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } +}); + +// 비밀번호 확인 유효성 검사 코드 +const passwordConfirmInput = document.getElementById("password-confirm-input"); +const passwordNotConfirmedWarningMessage = document + .getElementsByClassName("warning-message") + .item(5); + +passwordConfirmInput.addEventListener("focusout", (e) => { + if (e.target.value !== password) { + passwordConfirmInput.classList.add("warning-input-border"); + passwordNotConfirmedWarningMessage.classList.add("warning-message-active"); + passwordCheck = false; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } else { + passwordConfirmInput.classList.remove("warning-input-border"); + passwordNotConfirmedWarningMessage.classList.remove( + "warning-message-active" + ); + passwordCheck = true; + enableLoginButton(loginButton, emailCheck, nicknameCheck, passwordCheck); + } +}); + +// 비밀번호 보이기/숨기기 +const passwordShowHideButton = document.querySelectorAll( + ".password-show-hide-button" +); + +passwordShowHideButton.forEach((el) => { + passwordShowHide(el, el.parentNode.children[0]); +}); diff --git a/signup.html b/signup.html index 17d4b1ec..fab2e2a8 100644 --- a/signup.html +++ b/signup.html @@ -1,69 +1,145 @@ + + + + + + 판다마켓 + - - - - - - 판다마켓 - - - -
-
- - 판다마켓 로고 - -
-
-
-
- - - - - -
-
- -
- -
- - - + + + +
+
+ + 판다마켓 로고 + +
+
+
+
+ + 이메일을 입력해주세요. + 잘못된 이메일 형식입니다. + + 닉네임을 입력해주세요. + + 비밀번호를 입력해주세요. + 비밀번호를 8자 이상 입력해주세요. + + 비밀번호가 일치하지 않습니다. + +
+
+ +
+ +
+ diff --git a/global.css b/style/global.css similarity index 100% rename from global.css rename to style/global.css diff --git a/login.css b/style/login.css similarity index 62% rename from login.css rename to style/login.css index f8e78d79..b85002c2 100644 --- a/login.css +++ b/style/login.css @@ -37,14 +37,20 @@ input { flex-grow: 1; } -form button { +.login-button { + width: 100%; padding: 16px 0px; border: 0; border-radius: 40px; - background-color: var(--primary-color); + background-color: var(--gray400); color: #fff; font-size: 20px; font-weight: 600; + cursor: not-allowed; +} + +.login-button-enable { + background-color: var(--primary-color); cursor: pointer; } @@ -53,12 +59,26 @@ form button { position: relative; } -.password-container>button { +.password-show-hide-button { + border: 0; position: absolute; background-color: transparent; right: 20px; - top: 0px; + top: 16px; z-index: 1; + cursor: pointer; +} + +.password-show-button { + display: none; +} + +.password-hide-button-toggle { + display: none; +} + +.password-show-button-toggle { + display: inline; } .easy-login-container { @@ -77,7 +97,7 @@ form button { gap: 16px; } -.easy-login-icon>button { +.easy-login-icon > button { background-color: transparent; border: 0; padding: 0; @@ -89,6 +109,38 @@ footer { margin-top: 16px; } -footer>a { +footer > a { color: var(--primary-color); } + +.warning-message { + display: none; + color: #ff0000; +} + +.warning-message-active { + display: block; +} + +.warning-input-border { + border: 1px solid red; +} + +@media (max-width: 767px) { + header { + margin-top: 80px; + } + + header > a > img { + width: 198px; + } + + main { + width: calc(100% - 32px); + } + + form, + label { + width: 100%; + } +} diff --git a/style.css b/style/style.css similarity index 53% rename from style.css rename to style/style.css index 6a7c2895..dd613c8d 100644 --- a/style.css +++ b/style/style.css @@ -1,17 +1,19 @@ @font-face { font-family: "Pretendard-Regular"; - src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff"); + src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") + format("woff"); } header { background-color: #fff; width: 100%; height: 70px; - padding: 9px; - display: flex; - justify-content: center; position: fixed; top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; } header img { @@ -21,7 +23,6 @@ header img { .nav-content { width: 1120px; - margin: 0px 200px; display: flex; justify-content: space-between; align-items: center; @@ -35,6 +36,7 @@ header img { border: 0; color: #fff; cursor: pointer; + margin-left: auto; } .hero { @@ -51,10 +53,21 @@ header img { justify-content: center; } +.hero-info { + display: flex; + flex-direction: column; + align-items: center; +} + +.hero-info > a { + text-decoration-line: none; +} + .hero-text { font-weight: 700; font-size: 40px; line-height: 140%; + word-break: keep-all; } .hero-button { @@ -68,6 +81,8 @@ header img { font-size: 20px; line-height: 32px; cursor: pointer; + display: flex; + align-items: center; } .hero img { @@ -79,6 +94,7 @@ header img { display: flex; justify-content: center; align-items: center; + margin-bottom: 52px; } .feature { @@ -91,6 +107,10 @@ header img { padding: 0px 12px; } +.feature-rev { + flex-direction: row-reverse; +} + .feature-content { display: flex; flex-direction: column; @@ -99,21 +119,19 @@ header img { } .feature-content-rev { - display: flex; text-align: end; - flex-direction: column; - margin-left: 24px; - width: 350px; } -.feature span { +.feature span, +.feature-rev span { color: var(--primary-color); font-size: 18px; font-weight: 700; line-height: 26px; } -.feature h2 { +.feature h2, +.feature-rev h2 { font-weight: 700; font-size: 40px; line-height: 140%; @@ -121,7 +139,8 @@ header img { margin: 0; } -.feature p { +.feature p, +.feature-rev p { font-weight: 500; font-size: 24px; line-height: 32px; @@ -180,6 +199,11 @@ footer { gap: 30px; } +.footer-menu > a { + text-decoration-line: none; + color: #fff; +} + .footer-social { display: flex; gap: 12px; @@ -188,3 +212,137 @@ footer { .footer-social img { cursor: pointer; } + +@media (max-width: 1200px) { + .nav-content { + width: 100%; + margin: 0px 24px; + } + + .hero { + height: 771px; + } + + .hero-content { + flex-direction: column; + align-items: center; + } + + .hero-info { + margin-bottom: 150px; + } + + .feature { + height: 708px; + flex-direction: column; + align-items: start; + gap: 16px; + } + + .feature-rev { + align-items: end; + } + + .feature h2, + .feature-rev h2 { + font-weight: 700; + font-size: 32px; + margin: 0; + } + + .feature p, + .feature-rev p { + font-weight: 500; + font-size: 24px; + line-height: 32px; + } + + .footer-content { + width: 100%; + height: 927px; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .footer-info-content { + margin: 32px 104px 64px 104px; + } +} + +@media (max-width: 767px) { + .nav-content { + width: 100%; + margin: 0px 16px; + } + + .hero { + height: 540px; + } + + .hero-content { + width: 60%; + flex-direction: column; + align-items: center; + } + + .hero-content > img { + height: 186px; + object-fit: cover; + } + + .hero-info { + margin-bottom: 10px; + } + + .hero-button { + padding: 16px 32px; + display: flex; + align-items: center; + } + + .feature { + height: 708px; + flex-direction: column; + align-items: start; + gap: 16px; + } + + .feature > img { + width: 100%; + } + + .feature-rev { + align-items: end; + } + + .feature h2, + .feature-rev h2 { + font-weight: 700; + font-size: 32px; + margin: 0; + } + + .feature p, + .feature-rev p { + font-weight: 500; + font-size: 24px; + line-height: 32px; + } + + .footer-content { + width: 100%; + height: 540px; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .footer-content > img { + height: 204px; + } + + .footer-info-content { + margin: 32px 104px 64px 104px; + } +}