From 4038f2e35f35a363f6c8eeb19575fdf24fea79aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=EC=98=81?= Date: Mon, 2 Sep 2024 13:25:48 +0900 Subject: [PATCH] =?UTF-8?q?[=EA=B9=80=EC=88=98=EC=98=81]=20Sprint4=20(#59)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 랜딩페이지 * fixed untracked files * style: 불필요한 font 스타일 코드 수정 * refactor: 클래스 네이밍 * feat:header고정 * feat: 로그인 * feat:회원가입 * fix:페이지 루트 수정 * refactor: 랜딩페이지 section ,footer * feat : tablet display * feat: landing page mobile display * feat: auth page mobile display * feat:줄바꿈 수정 * feat: meta tag * feat:meta tag * chore: github action * feat : login, signup meta tag * feat : login email,password validation * feat: signup email, password, nickname validation * feat : login, signup password visibility * docs : 주석 수정 --- .../workflows/delete-merged-branch-config.yml | 17 +- img/btn_visibility_on.png | Bin 0 -> 1984 bytes index.html | 2 - login.html | 19 +- script/auth.js | 165 ++++++++++++++++++ signup.html | 32 +++- style/auth.css | 28 ++- style/auth_mobile.css | 16 -- style/global.css | 2 +- style/index.css | 156 +++++++++++++++++ style/index_mobile.css | 68 -------- style/index_tablet.css | 83 --------- 12 files changed, 403 insertions(+), 185 deletions(-) create mode 100644 img/btn_visibility_on.png create mode 100644 script/auth.js delete mode 100644 style/auth_mobile.css delete mode 100644 style/index_mobile.css delete mode 100644 style/index_tablet.css diff --git a/.github/workflows/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml index d5493361..664e58d4 100644 --- a/.github/workflows/delete-merged-branch-config.yml +++ b/.github/workflows/delete-merged-branch-config.yml @@ -8,7 +8,20 @@ jobs: delete-branch: runs-on: ubuntu-latest steps: - - name: delete branch + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Check if branch exists + id: check_branch + run: | + if git show-ref --verify --quiet refs/heads/${{ github.head_ref }}; then + echo "branch_exists=true" >> $GITHUB_ENV + else + echo "branch_exists=false" >> $GITHUB_ENV + fi + + - name: Delete branch + if: env.branch_exists == 'true' uses: SvanBoxel/delete-merged-branch@main env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/img/btn_visibility_on.png b/img/btn_visibility_on.png new file mode 100644 index 0000000000000000000000000000000000000000..89d641887ed1a888f467f570a63bd292ac12791a GIT binary patch literal 1984 zcmV;x2S50UP)m85#=y1!%5=>Ix1;xc=DW;?wqVeH(}7mAQE$ULz_AfTgq$q! zDlm3lfN&Tv8}!gZvRn{i%Rls+yN$XF$AFO%6d`4rE@8N6BGDV8CTk=F5iuu<{3a9Z z7G9QMw4kNe@D9D@Q4lp$f{vM(7z7hF|E<34kAr63i z3Rtb;q1A3QesrU~DwP{{r_iy{=ahUV$~^R4_{w?2yV!4eXLGF%L%_fU(X4sDXsrtY zmGoYsEqu0tAKCcz;r%8IfGbzObC3Y^YvLllzMavvK8$5I5J8u&Rm%*l$M~n6*g-%O zXUp=Sq@+K8zKY9v7Qezt>Ea?ulY@}dH$j)LFU%qVcOhv>jhGl2S8#a?F7BkwD4&bP zCqJ*MbQ3d44M$7@hdc&gQ+AN@sNDH6&z7Zr3HrQtf!^ZkRo&cDC-t@-h%pEKEkV}tY2XXAhU@qGUo zC_rfjg}?f~+|Gf|{jzzlu3{t1lO8AD#N~-;!U0ySt?=5$54o5YoqQi=o;+G@fYQ5T zqyx4tx8q8fR0$%v1chsQ59B3*Ge^}Khc<}d-kFmV?ZR>NagKDWjp2J-HGHR#q?7`1 z$U*pmcC-!I*NRkVBNkb@HdZr##oeFk?)K*DB=wbUm8>yq9TY)Xb%G6B#YUzN>iQkH zAvM?W!xlji6vjE@J!Fzo-+r|EgQ|_dpL{a$0nYaek!Blx%u~GQD%&_WL6PlD)JC2^ zN}WM8z41e8y{&?#rB;}WCUbOC{jY%YkW)J>Xm743i z6>|XeXT^(amTZ@797b zB+npVaysv1IkGfx79(U}m67EOX1NGmh!br?|Mq86U!MFDJXY`M*&T&ot6K0C zObG9)uV4y9l%7?m3_X%II}AAHyY8 zgM^Z%A9A{{(kIe7uG59TdUlBMWjICw^D7IarITeoIE*1O+b^OlQ8Au}p$P zPQyBB5qo|nF@(Tx&8S4HGz>%#At0$^)zDH_UgYAxrYF1&ovq}==LK8Ug=t(fRme~W zsFr+%66>I68;5p2s2jpzDc|V^2Q!zJapgHNqYkW0|NsC0|NsC0|NsC0|SHq7ybcXz@M&B Sc7lZf00006*3x literal 0 HcmV?d00001 diff --git a/index.html b/index.html index e55a5967..6dec4142 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,6 @@ > - -
diff --git a/login.html b/login.html index 0c6612ac..ebe3866b 100644 --- a/login.html +++ b/login.html @@ -2,11 +2,14 @@ + + + + 로그인 -
@@ -16,7 +19,7 @@
-
+
+ + 이메일을 입력해 주세요 + + 잘못된 이메일 형식입니다
@@ -37,8 +44,12 @@ required /> 비밀번호 숨김 + + 비밀번호를 입력해주세요 + + 비밀번호를 8자 이상 입력해주세요
- +
- + \ No newline at end of file diff --git a/script/auth.js b/script/auth.js new file mode 100644 index 00000000..7396fe62 --- /dev/null +++ b/script/auth.js @@ -0,0 +1,165 @@ +const loginForm = document.getElementById('login-form'); +const signupForm = document.getElementById('signup-form'); +const emailInput = document.getElementById('email'); +const passwordInput = document.getElementById('password'); +const passwordConfirmInput = document.getElementById('password-confirm'); +const nameInput = document.getElementById('name'); +const loginButton = document.getElementById('login-button'); +const signupButton = document.getElementById('signup-button'); + +// 재할당 가능하도록 - let +let isEmailValidate = false; +let isPasswordValidate = false; +let isPasswordConfirmValidate = false; +let isNameValidate = false; + +// 오류 메시지 +function showError(input, errorId) { + const errorElement = document.getElementById(errorId); + if (errorElement) { + errorElement.style.display = "block"; + input.style.border = "1px solid #f74747"; + } +} + +// 상태 초기화 +function hideError(input, errorId) { + const errorElement = document.getElementById(errorId); + if (errorElement) { + errorElement.style.display = "none"; + input.style.border = "none"; + } +} + +// 이메일 형식 검증 +function validateEmail(email) { + const emailRegex = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + return emailRegex.test(email); +} + +// 이메일 검사 +function checkEmail() { + const emailValue = emailInput.value; + + if (!emailValue) { + showError(emailInput, "email-empty"); + } else if (!validateEmail(emailValue)) { + isEmailValidate = false; + hideError(emailInput, "email-empty"); // 두 가지 오류 메세지가 동시에 나타나지 않도록 함 + showError(emailInput, "email-invalidate"); + } else { + isEmailValidate = true; + hideError(emailInput, "email-empty"); + hideError(emailInput, "email-invalidate"); + } + submitButtonInvalidate(); +} + +if (emailInput) { + emailInput.addEventListener("focusout", checkEmail); +} + +// 비밀번호 검사 +function checkPassword() { + const passwordValue = passwordInput.value; + + if (!passwordValue) { + showError(passwordInput, "password-empty"); + } else if (passwordValue.length < 8) { + hideError(passwordInput, "password-empty"); + showError(passwordInput, "password-invalidate"); + } else { + isPasswordValidate = true; + hideError(passwordInput, "password-empty"); + hideError(passwordInput, "password-invalidate"); + } + submitButtonInvalidate(); +} + +if (passwordInput) { + passwordInput.addEventListener("focusout", checkPassword); +} + +// 닉네임 검사 +function checkName() { + const nameValue = nameInput.value; + if (!nameValue) { + showError(nameInput, "name-empty"); + isNameValidate = false; + } else { + isNameValidate = true; + hideError(nameInput, "name-empty"); + } + submitButtonInvalidate(); +} + +if (nameInput) { + nameInput.addEventListener("focusout", checkName); +} + +// 비밀번호 확인 +function checkPasswordConfirm() { + const passwordValue = passwordInput.value; + const passwordConfirmValue = passwordConfirmInput.value; + + if (!passwordConfirmValue) { + showError(passwordConfirmInput, "password-confirm-empty"); + isPasswordConfirmValidate = false; + } else if (passwordValue !== passwordConfirmValue) { + hideError(passwordConfirmInput, "password-confirm-empty"); + showError(passwordConfirmInput, "password-confirm-invalidate"); + isPasswordConfirmValidate = false; + } else { + isPasswordConfirmValidate = true; + hideError(passwordConfirmInput, "password-confirm-empty"); + hideError(passwordConfirmInput, "password-confirm-invalidate"); + } + submitButtonInvalidate(); +} + +if (passwordConfirmInput) { + passwordConfirmInput.addEventListener("focusout", checkPasswordConfirm); +} + +// 조건 모두 충족 시 로그인, 회원가입 버튼 활성화 +function submitButtonInvalidate() { + if (signupForm) { + if (isEmailValidate && isPasswordValidate && isPasswordConfirmValidate && isNameValidate) { + signupButton.disabled = false; + window.location.href="/login.html"; + } else { + signupButton.disabled = true; + } + } else if (loginForm) { + if (isEmailValidate && isPasswordValidate) { + loginButton.disabled = false; + window.location.href="/items.html"; + } else { + loginButton.disabled = true; + } + } +} + +// 처음에 비활성화 되도록 +submitButtonInvalidate(); + +// 비밀번호 표시/숨김 함수 +function passwordVisibility(event) { + const button = event.currentTarget; + const passwordInput = button.previousElementSibling; + const visibilityIcon = button; + const isPasswordVisible = passwordInput.type; + + if (isPasswordVisible === "text") { + passwordInput.type = "password"; + visibilityIcon.src = "../img/btn_visibility_off.png"; + } else { + passwordInput.type = "text"; + visibilityIcon.src = "../img/btn_visibility_on.png"; + } +} + +const visibilityButtons = document.querySelectorAll('.visibility-btn'); +visibilityButtons.forEach((button) => + button.addEventListener("click", passwordVisibility) +); diff --git a/signup.html b/signup.html index 524b5e58..c8e50782 100644 --- a/signup.html +++ b/signup.html @@ -3,10 +3,13 @@ + + + + 회원가입 -
@@ -16,7 +19,7 @@
-
+
+ + 이메일을 입력해 주세요 + + 잘못된 이메일 형식입니다
@@ -36,6 +43,8 @@ placeholder="닉네임을 입력해주세요" required /> + + 닉네임을 입력해 주세요
@@ -47,19 +56,27 @@ required /> 비밀번호 숨김 + + 비밀번호를 입력해 주세요 + + 비밀번호를 8자 이상 입력해주세요
-
- +
+ 비밀번호 숨김 + + 비밀번호를 입력해 주세요 + + 비밀번호가 일치하지 않습니다
- +
+ \ No newline at end of file diff --git a/style/auth.css b/style/auth.css index 4c71e00b..538739fb 100644 --- a/style/auth.css +++ b/style/auth.css @@ -66,7 +66,7 @@ input::placeholder { font-size: 16px; line-height: 24px; } - + input:focus { outline-color: #3692FF;; } @@ -96,7 +96,7 @@ input:focus { color: #F3F4F6; font-size: 20px; font-weight: 600; - + cursor: pointer; } @@ -164,4 +164,28 @@ button:disabled { font-weight: 500; line-height: normal; text-decoration-line: underline; +} +.error-message { + color: #f74747; + font-weight: 600; + font-size: 15px; + line-height: 18px; + margin-top: 8px; + display: none; + padding-left: 16px; +} + +/* mobile */ +@media (max-width:767px){ + .auth-container { + padding: 0 16px; + display:inline-flex; + } + .panda-logo { + width:198px; + } + .auth-wrap { + max-width: 400px; + margin:24px 0; + } } \ No newline at end of file diff --git a/style/auth_mobile.css b/style/auth_mobile.css deleted file mode 100644 index 63bba412..00000000 --- a/style/auth_mobile.css +++ /dev/null @@ -1,16 +0,0 @@ -@media (max-width:767px){ - br{ - display:none !important; - } - .auth-container { - padding: 0 16px; - display:inline-flex; - } - .panda-logo { - width:198px; - } - .auth-wrap { - max-width: 400px; - margin:24px 0; - } -} \ No newline at end of file diff --git a/style/global.css b/style/global.css index 575bb001..b1c49f42 100644 --- a/style/global.css +++ b/style/global.css @@ -12,5 +12,5 @@ html { body { margin: 0; background: #FCFCFC; - color: #fff; + } diff --git a/style/index.css b/style/index.css index 688a9549..7f2ecefe 100644 --- a/style/index.css +++ b/style/index.css @@ -12,6 +12,8 @@ header { border-bottom: 1px solid #DFDFDF; background: #FFF; } + + .header-wrap { width:100%; max-width:1120px; @@ -62,6 +64,7 @@ header { align-items:center; justify-content:center; } + .banner-wrap , .bottom-wrap{ position:absolute; bottom:0px; @@ -70,9 +73,11 @@ header { gap: 7px; } + .img-home-top, .img-home-bottom { width:746px; } + .banner-textbox, .bottom-textbox { height:100%; display: flex; @@ -234,3 +239,154 @@ footer a, span { height:20px; } +/* tablet */ +@media (max-width:1199px) { + .section-text> br, + .banner-text > br { + display:none; + } + header { + height:70px; + padding : 0 24px; + } + + .img-home-top, .img-home-bottom { + width:100%; + } + .img-section { + max-width:100%; + } + .banner { + height:771px; + margin-bottom:24px; + } + .banner-wrap { + width:100%; + height:100%; + flex-direction: column; + } + .banner-textbox { + align-items: center; + text-align: center; + } + .section-left { + height:708px; + } + .section-left-wrap { + max-width:696px; + height:708px; + flex-direction: column; + gap:24px; + } + .tag { + font-size:18px; + margin:0px; + } + .section-textbox { + width:100%; + margin:0; + } + .section-text { + font-size:32px; + } + .section-text-detail { + font-size:19px; + line-height:26px; + } + .section-right { + height:708px; + margin: 56px 0; + } + .section-right-wrap { + max-width:696px; + height:100%; + flex-direction: column-reverse; + gap:24px; + } + .bottom { + height: 744px; + margin-top:56px; + } + .footer-wrap { + max-width:536px; + } + .bottom-wrap { + width:100%; + height:100%; + flex-direction: column; + } + .bottom-text { + margin-top: 60px; + text-align: center; + } +} + +/* mobile */ +@media (max-width:767px) { + .banner-text > br{ + display:inline ; + } + .banner { + height: 540px; + } + .banner-wrap { + max-width:100%; + justify-content: space-between; + } + .banner-textbox { + padding:48px 0; + gap:18px; + } + .banner-text { + max-width:240px; + font-size:32px; + text-align: center; + } + .items-button { + height:48px; + font-size:18px; + padding:12px 71px; + } + .section-left { + height:417px; + } + .section-right { + height:417px; + } + .section-left-wrap { + max-width:344px; + max-height:417px; + } + .section-right-wrap { + max-width:344px; + max-height:417px; + } + .tag { + font-size: 16px; + } + .section-text { + font-size:24px; + } + .section-text-detail { + font-size:16px; + } + .bottom { + margin-top:86px; + height:540px; + } + .bottom-textbox { + padding:0; + max-width:236px; + } + .bottom-text { + text-align: center; + font-size:32px; + } + .footer-wrap { + max-width: 311px; + } + .copyright { + position:absolute; + top:60px; + } +} \ No newline at end of file diff --git a/style/index_mobile.css b/style/index_mobile.css deleted file mode 100644 index f2194afc..00000000 --- a/style/index_mobile.css +++ /dev/null @@ -1,68 +0,0 @@ -@media (max-width:767px) { - .banner-text > br{ - display:inline ; - } - .banner { - height: 540px; - } - .banner-wrap { - max-width:100%; - justify-content: space-between; - } - .banner-textbox { - padding:48px 0; - gap:18px; - } - .banner-text { - max-width:240px; - font-size:32px; - text-align: center; - } - .items-button { - height:48px; - font-size:18px; - padding:12px 71px; - } - .section-left { - height:417px; - } - .section-right { - height:417px; - } - .section-left-wrap { - max-width:344px; - max-height:417px; - } - .section-right-wrap { - max-width:344px; - max-height:417px; - } - .tag { - font-size: 16px; - } - .section-text { - font-size:24px; - } - .section-text-detail { - font-size:16px; - } - .bottom { - margin-top:86px; - height:540px; - } - .bottom-textbox { - padding:0; - max-width:236px; - } - .bottom-text { - text-align: center; - font-size:32px; - } - .footer-wrap { - max-width: 311px; - } - .copyright { - position:absolute; - top:60px; - } -} \ No newline at end of file diff --git a/style/index_tablet.css b/style/index_tablet.css deleted file mode 100644 index 3de86cc5..00000000 --- a/style/index_tablet.css +++ /dev/null @@ -1,83 +0,0 @@ -/* tablet */ -@media (max-width:1199px) { - .section-text> br{ - display:none; - } - .banner-text > br { - display:none; - } - header { - height:70px; - padding : 0 24px; - } - - .img-home-top, .img-home-bottom { - width:100%; - } - .img-section { - max-width:100%; - } - .banner { - height:771px; - margin-bottom:24px; - } - .banner-wrap { - width:100%; - height:100%; - flex-direction: column; - } - .banner-textbox { - align-items: center; - text-align: center; - } - .section-left { - height:708px; - } - .section-left-wrap { - max-width:696px; - height:708px; - flex-direction: column; - gap:24px; - } - .tag { - font-size:18px; - margin:0px; - } - .section-textbox { - width:100%; - margin:0; - } - .section-text { - font-size:32px; - } - .section-text-detail { - font-size:19px; - line-height:26px; - } - .section-right { - height:708px; - margin: 56px 0; - } - .section-right-wrap { - max-width:696px; - height:100%; - flex-direction: column-reverse; - gap:24px; - } - .bottom { - height: 744px; - margin-top:56px; - } - .footer-wrap { - max-width:536px; - } - .bottom-wrap { - width:100%; - height:100%; - flex-direction: column; - } - .bottom-text { - margin-top: 60px; - text-align: center; - } -} \ No newline at end of file