diff --git a/.github/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml similarity index 76% rename from .github/delete-merged-branch-config.yml rename to .github/workflows/delete-merged-branch-config.yml index 2a6d27bef..d54933615 100644 --- a/.github/delete-merged-branch-config.yml +++ b/.github/workflows/delete-merged-branch-config.yml @@ -4,12 +4,11 @@ on: pull_request: types: [closed] -permissions: - pull-requests: write - jobs: delete-branch: runs-on: ubuntu-latest steps: - name: delete branch uses: SvanBoxel/delete-merged-branch@main + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/css/login.css b/css/login.css new file mode 100644 index 000000000..b5d0be368 --- /dev/null +++ b/css/login.css @@ -0,0 +1,232 @@ +/* 모든 요소의 크기를 테두리 포함하도록 설정 */ +* { + box-sizing: border-box; +} + +@font-face { + font-family: "Pretendard-Regular"; + src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") + format("woff"); + font-weight: 400; + font-style: normal; +} + +body { + font-family: "Pretendard-Regular", "Noto Sans KR", Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.login { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 640px; +} + +.logo__container { + display: flex; + justify-content: center; + align-items: center; + width: 396px; + height: 132px; + gap: 8px; + padding-bottom: 40px; +} + +.logo__link { + text-decoration: none; + color: #3692ff; +} + +.logo__title { + font-size: 66px; + font-weight: 700; + line-height: 89.56px; +} + +.login__container { + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; +} + +.form__container { + display: flex; + flex-direction: column; + gap: 24px; +} + +.form__group { + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; +} + +.form__group-input { + height: 56px; + border-radius: 12px; + border: 0px; + background-color: #f3f4f6; + padding: 15px 24px; + width: 100%; +} + +.form__group-input, +.form__group-input::placeholder { + font-size: 16px; + line-height: 26px; + font-weight: 400; +} + +.error { + border: 2px solid red; +} + +.email__error-message, +.password__error-message { + color: red; + padding: 0px 16px; + display: none; + font-size: 14px; + line-height: 24px; + font-weight: 600; + transform: translateY(-8px); +} + +.form__group-label { + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +.form__group-input-container { + position: relative; +} + +.form__group-img { + position: absolute; + right: 24px; + top: 15px; +} + +.login-button { + width: 100%; + height: 56px; + border-radius: 40px; + background-color: #9ca3af; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + color: #f3f4f6; + font-size: 20px; + line-height: 32px; + font-weight: 600; + border: 0; +} + +.login-button:hover { + cursor: pointer; +} + +.social-login__container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 23px; + width: 100%; + border-radius: 8px; + background-color: #e6f2ff; +} + +.social-login__icon { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; +} + +.social-login__container > p { + font-size: 16px; + line-height: 26px; + font-weight: 500; + color: #1f2937; +} + +.sign-up__container { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} + +.sign-up__container > p { + font-size: 14px; + font-weight: 500; + line-height: 24px; + color: #1f2937; +} + +.sign-up__link { + font-size: 14px; + line-height: 16px; + font-weight: 500; + color: #3692ff; +} + +@media screen and (max-width: 767px) { + .login { + padding: 0 16px; + width: 100%; + max-width: 100%; + margin: 0 auto; + } + + .logo__container { + width: 100%; + height: auto; + padding-bottom: 24px; + } + + .logo__img { + width: 51px; + height: auto; + } + + .logo__title { + font-size: 34px; + line-height: 44px; + } + + .form__container { + gap: 16px; + } + + .form__group { + gap: 8px; + } + + .form__group-label { + font-size: 14px; + line-height: 24px; + } + + .login-button { + font-size: 20px; + line-height: 32px; + } + + .social-login__icon { + gap: 16px; + } + + .sign-up__container { + gap: 4x; + } +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 000000000..e99794658 --- /dev/null +++ b/css/main.css @@ -0,0 +1,363 @@ +* { + box-sizing: border-box; +} + +@font-face { + font-family: "Pretendard-Regular"; + src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") + format("woff"); + font-weight: 400; + font-style: normal; +} + +body { + font-family: "Pretendard-Regular"; +} + +a { + text-decoration: none; + cursor: pointer; +} + +.header { + position: fixed; + width: 100%; + height: 70px; + top: 0; +} + +.header__container { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + margin: 0 auto; + padding: 9.5px 0px; + max-width: 1120px; +} + +.header__logo { + display: flex; + align-items: center; + gap: 8.5px; +} + +.header__logo span { + font-size: 26px; + font-weight: 700; + color: #3692ff; +} + +.header__login-button { + width: 128px; + height: 48px; + background: #3692ff; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + color: #f3f4f6; + display: flex; + justify-content: center; + align-items: center; + line-height: 26px; +} + +.main-banner { + margin-top: 67px; +} + +.main-banner, +.sub-banner { + background: #cfe5ff; +} + +.main-banner__container, +.sub-banner__container { + margin: 0 auto; + width: 100%; + max-width: 1110px; +} + +.main-banner__img, +.sub-banner__img { + width: 100%; + height: auto; +} + +.main-banner__container { + display: flex; + align-items: center; + padding-top: 200px; + gap: 7px; +} + +.main-banner__text-container { + display: flex; + flex-direction: column; + gap: 32px; + padding-bottom: 60px; +} + +.main-banner__title, +.sub-banner__title, +.feature-section__content-box__title { + font-size: 40px; + font-weight: 700; + color: #374151; + line-height: 56px; + white-space: nowrap; +} + +.main-banner__cta { + width: 357px; + color: #f9fafb; + background-color: #3692ff; + height: 56px; + border-radius: 40px; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; + font-weight: 600; + line-height: 32px; +} + +.feature-section { + padding: 138px 0; + width: 100%; + margin: 0 auto; +} + +.feature-section__container { + display: flex; + justify-content: center; + align-items: center; + padding: 0 23.5px; + gap: 64px; + background-color: #fcfcfc; + max-width: 100%; + width: 988px; + margin: 0 auto; +} + +.feature-section__content-box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 12px; +} + +.feature-section__content-box__label { + color: #3692ff; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +.feature-section__content-box__title { + padding-bottom: 12px; +} + +.feature-section__content-box__description { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: #374151; + white-space: nowrap; +} + +.feature-section__image-left { + order: 2; +} + +.feature-section__content-box--right { + text-align: right; + align-items: flex-end; +} + +.sub-banner__container { + display: flex; + gap: 69px; + justify-content: space-between; + align-items: center; + padding-top: 143px; +} + +.footer-section { + width: 100%; + height: 160px; + background-color: #111827; +} + +.footer-container { + width: 1120px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + padding-top: 32.5px; + max-width: 100%; +} + +.footer-ul { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.footer-ul > li a { + font-size: 16px; + font-weight: 400; + line-height: 19.09px; +} + +.footer-ul > li:first-child { + color: #9ca3af; +} + +.footer-ul > li:nth-child(2) { + display: flex; + gap: 30px; +} + +.footer-ul > li:nth-child(2) > a { + color: #e5e7eb; +} + +.footer-ul > li:last-child { + display: flex; + gap: 12px; +} + +@media screen and (max-width: 1199px) { + .header__container { + padding: 9.5px 24px; + } + + .main-banner__container, + .sub-banner__container { + flex-direction: column; + padding-top: 84px; + } + + .main-banner__container { + gap: 0px; + } + + .main-banner__container > .main-banner__title br { + display: none; + } + + .main-banner__title { + text-align: center; + } + + .main-banner__text-container { + padding-bottom: 211px; + gap: 24px; + align-items: center; + } + + .feature-section { + padding: 24px; + } + + .feature-section__container { + flex-direction: column; + align-items: flex-start; + background-color: #ffffff; + padding: 0px; + gap: 24px; + } + + .feature-section__content-box { + text-align: left; + width: 100%; + gap: 16px; + } + + .feature-section__content-box__title { + padding-bottom: 8px; + font-size: 32px; + } + + .feature-section__content-box__title > br { + display: none; + } + + .feature-section__content-box__description { + font-size: 18px; + line-height: 26px; + } + + .feature-section__content-box__description--right { + text-align: right; + } + + .feature-section__image { + width: 100%; + height: auto; + } + + .feature-section__image-left { + order: 0; + } + + .sub-banner__container { + padding-top: 201px; + gap: 217px; + } + + .footer-container { + width: 536px; + } +} + +@media screen and (max-width: 767px) { + .header__container { + padding: 9.5px 16px; + } + + .header__logo-img { + display: none; + } + + .main-banner__text-container { + padding-bottom: 132px; + } + + .main-banner__title, + .sub-banner__title { + font-size: 32px; + line-height: 44.8px; + } + + .main-banner__cta { + width: 240px; + font-size: 18px; + line-height: 26px; + } + .feature-section__content-box { + gap: 8px; + } + + .feature-section__content-box__label { + font-size: 16px; + } + + .feature-section__content-box__title { + font-size: 24px; + line-height: 32px; + } + + .feature-section__content-box__description { + font-size: 16px; + } + + .sub-banner__container { + padding-top: 121px; + gap: 131px; + } +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 000000000..45a05ecf8 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/signup.css b/css/signup.css new file mode 100644 index 000000000..2edde8e49 --- /dev/null +++ b/css/signup.css @@ -0,0 +1,243 @@ +/* 모든 요소의 크기를 테두리 포함하도록 설정 */ +* { + box-sizing: border-box; +} + +@font-face { + font-family: "Pretendard-Regular"; + src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") + format("woff"); + font-weight: 400; + font-style: normal; +} + +html { + height: 100%; +} + +body { + font-family: "Pretendard-Regular"; + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.signup { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 640px; +} + +.logo__container { + display: flex; + justify-content: center; + align-items: center; + width: 396px; + height: 132px; + gap: 8px; + padding-bottom: 40px; +} + +.logo__link { + text-decoration: none; + color: #3692ff; +} + +h1 { + font-size: 66px; + font-weight: 700; + line-height: 89.56px; +} + +.signup__container { + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; +} + +.form__container { + display: flex; + flex-direction: column; + gap: 24px; +} + +.form__group { + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; +} + +.form__group-input { + height: 56px; + border-radius: 12px; + border: 0px; + background-color: #f3f4f6; + padding: 15px 24px; + width: 100%; +} + +.form__group-input:focus { + border: 1px solid #3692ff; + outline: none; +} + +.form__group-input::placeholder { + font-size: 16px; + line-height: 26px; + font-weight: 400; +} + +.error { + border: 2px solid red; +} + +.email__error-message, +.password__error-message, +.nickname__error-message, +.checked-password__error-message { + color: red; + padding: 0px 16px; + display: none; + font-size: 14px; + line-height: 24px; + font-weight: 600; + transform: translateY(-8px); +} + +.form__group-label { + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +.form__group-input-container { + position: relative; +} + +.form__group-img { + position: absolute; + top: 15px; + right: 24px; +} + +.signup-button { + width: 100%; + height: 56px; + border-radius: 40px; + background-color: #9ca3af; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + color: #f3f4f6; + font-size: 20px; + line-height: 32px; + font-weight: 600; + border: 0; +} + +.signup-button:hover, +.form__group-img:hover { + cursor: pointer; +} + +.social-login__container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 23px; + width: 100%; + border-radius: 8px; + background-color: #e6f2ff; +} + +.social-login__icon { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; +} + +.social-login__container > p { + font-size: 16px; + line-height: 26px; + font-weight: 500; + color: #1f2937; +} + +.login__container { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} + +.login__container > p { + font-size: 14px; + font-weight: 500; + line-height: 24px; + color: #1f2937; +} + +.login__link { + font-size: 14px; + line-height: 16px; + font-weight: 500; + color: #3692ff; +} + +@media screen and (max-width: 767px) { + .signup { + padding: 0 16px; + width: 100%; + max-width: 100%; + margin: 0 auto; + } + + .logo__container { + width: 100%; + height: auto; + padding-bottom: 24px; + } + + .logo__img { + width: 51px; + height: auto; + } + + .logo__link-header { + font-size: 34px; + line-height: 44px; + } + + .form__container { + gap: 16px; + } + + .form__group { + gap: 8px; + } + + .form__group-label { + font-size: 14px; + line-height: 24px; + } + + .signup-button { + font-size: 20px; + line-height: 32px; + } + + .social-login__icon { + gap: 16px; + } + + .login__container { + gap: 4x; + } +} diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 000000000..7ce56caaa Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/banner-img.png b/img/banner-img.png new file mode 100644 index 000000000..58b29043e Binary files /dev/null and b/img/banner-img.png differ diff --git a/img/close-eyes.png b/img/close-eyes.png new file mode 100644 index 000000000..5dc09fbe1 Binary files /dev/null and b/img/close-eyes.png differ diff --git a/img/google-icon.png b/img/google-icon.png new file mode 100644 index 000000000..f75dc7616 Binary files /dev/null and b/img/google-icon.png differ diff --git a/img/hot-items-img.png b/img/hot-items-img.png new file mode 100644 index 000000000..249652e34 Binary files /dev/null and b/img/hot-items-img.png differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png new file mode 100644 index 000000000..a3e343c77 Binary files /dev/null and b/img/ic_facebook.png differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png new file mode 100644 index 000000000..c47e044d1 Binary files /dev/null and b/img/ic_instagram.png differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png new file mode 100644 index 000000000..3f74b730a Binary files /dev/null and b/img/ic_twitter.png differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png new file mode 100644 index 000000000..874150b0b Binary files /dev/null and b/img/ic_youtube.png differ diff --git a/img/kakaotalk-icon.png b/img/kakaotalk-icon.png new file mode 100644 index 000000000..bd7678005 Binary files /dev/null and b/img/kakaotalk-icon.png differ diff --git a/img/open-eyes.png b/img/open-eyes.png new file mode 100644 index 000000000..32765f0b2 Binary files /dev/null and b/img/open-eyes.png differ diff --git a/img/register-img.png b/img/register-img.png new file mode 100644 index 000000000..eb0d6cd26 Binary files /dev/null and b/img/register-img.png differ diff --git a/img/search-img.png b/img/search-img.png new file mode 100644 index 000000000..84d8629f1 Binary files /dev/null and b/img/search-img.png differ diff --git "a/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" "b/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" new file mode 100644 index 000000000..e74e7d911 Binary files /dev/null and "b/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" differ diff --git "a/img/\355\214\220\353\213\244\354\226\274\352\265\264.png" "b/img/\355\214\220\353\213\244\354\226\274\352\265\264.png" new file mode 100644 index 000000000..0a1a4f202 Binary files /dev/null and "b/img/\355\214\220\353\213\244\354\226\274\352\265\264.png" differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..2d27ea61d --- /dev/null +++ b/index.html @@ -0,0 +1,145 @@ + + + + + + + + 판다마켓 + + +
+
+ + +
+
+
+
+
+

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

+ 구경하러 가기 +
+ 손인사 하는 판다 +
+
+
+
+ 핫 아이템 +
+

Hot item

+

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

+

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

+
+
+
+
+
+ 검색 아이템 +
+

Search

+

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

+

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

+
+
+
+
+
+ 등록 아이템 +
+

Register

+

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

+

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

+
+
+
+
+
+
+

+ 믿을 수 있는
+ 판다마켓 중고 거래 +

+
+ 서브 배너 이미지 +
+
+ + + diff --git a/js/inputFocus.js b/js/inputFocus.js new file mode 100644 index 000000000..6358c62d6 --- /dev/null +++ b/js/inputFocus.js @@ -0,0 +1,76 @@ +document.addEventListener("DOMContentLoaded", () => { + const inputEmail = document.getElementById("email"); + const inputPassword = document.getElementById("password"); + const emailErrorMessage = document.querySelector(".email__error-message"); + const passwordErrorMessage = document.querySelector( + ".password__error-message" + ); + const loginButton = document.querySelector(".login-button"); + + function disabledLoginButton() { + // display가 block 상태이면 결국 에러메세지가 이미 출력중 + if ( + emailErrorMessage.textContent === "" && + passwordErrorMessage.textContent === "" + ) { + loginButton.disabled = false; + loginButton.style.backgroundColor = "#3692ff"; + } else { + loginButton.disabled = true; + loginButton.style.backgroundColor = "#9ca3af"; + } + } + + // 이메일 유효성 검사 함수 + // 정규식을 활용하여 이메일 형식 검사 및 value값 유무 확인 + function validateEmail() { + const emailValue = inputEmail.value.trim(); + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 이메일 정규식 + + if (!emailValue) { + emailErrorMessage.textContent = "이메일을 입력해주세요."; + emailErrorMessage.style.display = "block"; + inputEmail.classList.add("error"); + } else if (!emailRegex.test(emailValue)) { + emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; + emailErrorMessage.style.display = "block"; + inputEmail.classList.add("error"); + } else { + emailErrorMessage.textContent = ""; + emailErrorMessage.style.display = "block"; + inputEmail.classList.remove("error"); + } + + disabledLoginButton(); + } + + // 비밀번호 8자리이상인지, 비밀번호의 value값 유무 확인하는 함수 + function validatePassword() { + const passwordValue = inputPassword.value.trim(); + + if (!passwordValue) { + passwordErrorMessage.textContent = "비밀번호를 입력해주세요."; + passwordErrorMessage.style.display = "block"; + inputPassword.classList.add("error"); + } else if (passwordValue.length < 8) { + passwordErrorMessage.textContent = "비밀번호를 8자이상 입력해주세요."; + passwordErrorMessage.style.display = "block"; + inputPassword.classList.add("error"); + } else { + passwordErrorMessage.textContent = ""; + passwordErrorMessage.style.display = "none"; + inputPassword.classList.remove("error"); + } + + disabledLoginButton(); + } + + inputEmail.addEventListener("focusout", validateEmail); + inputPassword.addEventListener("focusout", validatePassword); + + // loginButton 클릭 시 /items로 이동 + loginButton.addEventListener("click", (e) => { + e.preventDefault(); + window.location.href = "/items"; + }); +}); diff --git a/js/login.js b/js/login.js new file mode 100644 index 000000000..e69de29bb diff --git a/js/signup.js b/js/signup.js new file mode 100644 index 000000000..5b81a73fd --- /dev/null +++ b/js/signup.js @@ -0,0 +1,125 @@ +document.addEventListener("DOMContentLoaded", () => { + const inputEmail = document.getElementById("email"); + const inputPassword = document.getElementById("password"); + const emailErrorMessage = document.querySelector(".email__error-message"); + const passwordErrorMessage = document.querySelector( + ".password__error-message" + ); + const inputNickname = document.getElementById("nickname"); + const nicknameErrorMessage = document.querySelector( + ".nickname__error-message" + ); + const checkedPassword = document.getElementById("checked-password"); + const checkedPasswordErrorMessage = document.querySelector( + ".checked-password__error-message" + ); + const signupButton = document.querySelector(".signup-button"); + + // 회원가입 버튼 활성/비활성 시키는 함수 + function disabledLoginButton() { + // display가 block 상태이면 결국 에러메세지가 이미 출력중 + if ( + emailErrorMessage.textContent === "" && + passwordErrorMessage.textContent === "" && + nicknameErrorMessage.textContent === "" && + checkedPasswordErrorMessage.textContent === "" + ) { + signupButton.disabled = false; + signupButton.style.backgroundColor = "#3692ff"; + } else { + signupButton.disabled = true; + signupButton.style.backgroundColor = "#9ca3af"; + } + } + + // 이메일 유효성 검사 함수 + // 정규식을 활용하여 이메일 형식 검사 및 value값 유무 확인 + function validateEmail() { + const emailValue = inputEmail.value.trim(); + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 이메일 정규식 + + if (!emailValue) { + emailErrorMessage.textContent = "이메일을 입력해주세요."; + emailErrorMessage.style.display = "block"; + inputEmail.classList.add("error"); + } else if (!emailRegex.test(emailValue)) { + emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; + emailErrorMessage.style.display = "block"; + inputEmail.classList.add("error"); + } else { + emailErrorMessage.textContent = ""; + emailErrorMessage.style.display = "block"; + inputEmail.classList.remove("error"); + } + + disabledLoginButton(); + } + + // 비밀번호 8자리이상인지, 비밀번호의 value값 유무 확인하는 함수 + function validatePassword() { + const passwordValue = inputPassword.value.trim(); + + if (!passwordValue) { + passwordErrorMessage.textContent = "비밀번호를 입력해주세요."; + passwordErrorMessage.style.display = "block"; + inputPassword.classList.add("error"); + } else if (passwordValue.length < 8) { + passwordErrorMessage.textContent = "비밀번호를 8자이상 입력해주세요."; + passwordErrorMessage.style.display = "block"; + inputPassword.classList.add("error"); + } else { + passwordErrorMessage.textContent = ""; + passwordErrorMessage.style.display = "none"; + inputPassword.classList.remove("error"); + } + + disabledLoginButton(); + } + + //닉네임 값 유무를 확인하는 함수 + function validateNickname() { + const nicknameValue = inputNickname.value.trim(); + + if (!nicknameValue) { + nicknameErrorMessage.textContent = "닉네임을 입력해주세요."; + nicknameErrorMessage.style.display = "block"; + inputNickname.classList.add("error"); + } else { + nicknameErrorMessage.textContent = ""; + nicknameErrorMessage.style.display = "none"; + inputNickname.classList.remove("error"); + } + + disabledLoginButton(); + } + + // 입력된 비밀번호가 일치하는지 확인하는 함수 + function validateCheckedPassword() { + const passwordValue = inputPassword.value.trim(); + const checkedPasswordValue = checkedPassword.value.trim(); + + if (passwordValue !== checkedPasswordValue) { + checkedPasswordErrorMessage.textContent = "비밀번호가 일치하지 않습니다."; + checkedPasswordErrorMessage.style.display = "block"; + checkedPassword.classList.add("error"); + } else { + checkedPasswordErrorMessage.textContent = ""; + checkedPasswordErrorMessage.style.display = "none"; + checkedPassword.classList.remove("error"); + } + console.log(passwordValue, checkedPasswordValue); + disabledLoginButton(); + } + + // 이벤트리스너 + inputEmail.addEventListener("focusout", validateEmail); + inputPassword.addEventListener("focusout", validatePassword); + inputNickname.addEventListener("focusout", validateNickname); + checkedPassword.addEventListener("focusout", validateCheckedPassword); + + // signupButton 클릭 시 /signin로 이동 + signupButton.addEventListener("click", (e) => { + e.preventDefault(); + window.location.href = "/signin"; + }); +}); diff --git a/login.html b/login.html new file mode 100644 index 000000000..389ecffc2 --- /dev/null +++ b/login.html @@ -0,0 +1,80 @@ + + + + + + + + 로그인 + + +
+
+ + 판다얼굴 + +

판다마켓

 +
+
+
+
+ + + +
+
+ +
+ + 비밀번호 가림 이미지 +
+ +
+ +
+ + +
+
+ + + diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..4363b669d --- /dev/null +++ b/signup.html @@ -0,0 +1,112 @@ + + + + + + + + 회원가입 + + +
+
+ + 판다얼굴 + +

판다마켓

 +
+
+
+
+ + + +
+
+ + + +
+
+ +
+ + 비밀번호 가림 이미지 +
+ +
+
+ +
+ + 비밀번호 가림 이미지 +
+ +
+ +
+ + +
+
+ + +