From e6dc011c194cb9860b1b30739b74162d4f317831 Mon Sep 17 00:00:00 2001 From: les0498 Date: Wed, 30 Jul 2025 19:54:19 +0900 Subject: [PATCH 01/11] =?UTF-8?q?style:=20signup=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=EC=97=90=EC=84=9C=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- signup/index.html | 4 +- signup/style.css | 10 --- style.css | 188 ++++++++++++++++++++++------------------------ 3 files changed, 92 insertions(+), 110 deletions(-) diff --git a/signup/index.html b/signup/index.html index 579c4abd..925e9392 100644 --- a/signup/index.html +++ b/signup/index.html @@ -8,10 +8,8 @@ - - - + diff --git a/signup/style.css b/signup/style.css index 58e64729..4fdecee8 100644 --- a/signup/style.css +++ b/signup/style.css @@ -1,14 +1,4 @@ -.email { - display: flex; - flex-direction: column; -} -.pwd-content { - position: relative; - width: 100%; - margin-top: 16px; - margin-bottom: 24px; -} @media (min-width: 768px) and (max-width: 1199px) { .content { diff --git a/style.css b/style.css index 98e17d0a..17422295 100644 --- a/style.css +++ b/style.css @@ -23,7 +23,6 @@ text-decoration: none; } - .sidebar { width: 100%; height: 51px; @@ -48,7 +47,6 @@ font-weight: 700; line-height: 140%; color: var(--gray700); - } .content { @@ -56,7 +54,7 @@ height: 444px; margin: 138px auto; padding: 0 23.5px; - background-color: #FCFCFC; + background-color: #fcfcfc; border-radius: 12px; display: flex; gap: 3rem; @@ -77,7 +75,7 @@ margin-bottom: 12px; } -.content .content-title { +.content .content-title { font-size: var(--clamp-40); font-weight: 700; line-height: 140%; @@ -123,8 +121,8 @@ align-items: center; width: 100%; height: 20px; - margin: 0 auto; - padding: 0 400px; + margin: 0 auto; + padding: 0 400px; gap: 30px; } @@ -133,7 +131,6 @@ color: var(--gray400); } - .footer .middle { color: var(--gray200); display: flex; @@ -143,7 +140,7 @@ .footer .sns { display: flex; - gap: 12px; + gap: 12px; } .sns a { @@ -151,14 +148,14 @@ align-items: center; } -/* 최대 1199px 태블릿.ver */ +/* 최대 1199px 태블릿.ver */ @media (min-width: 768px) and (max-width: 1199px) { - .header-all { + .header-all { padding-top: 84px; } - .header-title { + .header-title { font-size: var(--font-size-40); } @@ -168,8 +165,8 @@ } .content-title { - font-size: var(--font-size-32) !important; - } + font-size: var(--font-size-32) !important; + } .content-description { font-size: var(--font-size-18) !important; @@ -180,10 +177,10 @@ } .bottom-all { - padding-top: 201px; + padding-top: 201px; } - .bottom-title { + .bottom-title { font-size: var(--font-size-40); } @@ -192,7 +189,7 @@ } .footer p { - order: 1; + order: 1; } .footer .middle { @@ -202,78 +199,77 @@ .footer .sns { order: 3; } - } -/* 최대 767px 모바일.ver */ +/* 최대 767px 모바일.ver */ @media (max-width: 767px) { - .logo { - display: none; - } - - .header-all { - padding-top: 48px; - } - - .header-title { - font-size: var(--font-size-32); - } - - .tablet-hide-br { - display: block; - } - - #img-header-top{ - height: 204px; - } - - .header-btn { - width: 240px; - } - - .content-header { - font-size: var(--font-size-16) !important; - } - - .content-title { - font-size: var(--font-size-24) !important; - } - - .hide-br { - display: none; - } - - .bottom-banner { - height: 540px; - } - - .bottom-all { - padding-top: 121px; - } - - .bottom-title { - font-size: var(--font-size-32); - } - - #img-header-bottom { - height: 198px; - } - - .footer .middle { - order: 1; - } - - .footer .sns { - order: 2; - } - - .footer p { - order: 3; - width: 100%; - } -} + .logo { + display: none; + } + + .header-all { + padding-top: 48px; + } + + .header-title { + font-size: var(--font-size-32); + } + + .tablet-hide-br { + display: block; + } + + #img-header-top { + max-width: 100%; + height: auto; + } + + .header-btn { + width: 240px; + } + + .content-header { + font-size: var(--font-size-16) !important; + } + + .content-title { + font-size: var(--font-size-24) !important; + } + + .hide-br { + display: none; + } + .bottom-banner { + height: 540px; + } + + .bottom-all { + padding-top: 121px; + } + + .bottom-title { + font-size: var(--font-size-32); + } + + #img-header-bottom { + max-width: 100%; + height: auto; + } + + .footer .middle { + order: 1; + } + + .footer .sns { + order: 2; + } + .footer p { + order: 3; + width: 100%; + } +} @media (max-width: 1199px) { .title { @@ -285,7 +281,7 @@ text-align: center; align-items: center; justify-content: space-between; - width: 100%; + width: 100%; height: 100%; } @@ -295,16 +291,15 @@ font-weight: 700; } - .content { - width: 100%; - display: flex; - height: auto; - flex-direction: column; - padding: 0; - margin: auto; - margin-bottom: 40px; - gap: 2rem; + width: 100%; + display: flex; + height: auto; + flex-direction: column; + padding: 0; + margin: auto; + margin-bottom: 40px; + gap: 2rem; } .content .img { @@ -316,9 +311,9 @@ order: 2; } - .content> .img { + .content > .img { order: 1; - } + } .bottom-all { flex-direction: column; @@ -326,13 +321,12 @@ align-items: center; justify-content: space-between; width: 100%; - height: 100%; + height: 100%; padding-right: 0; padding-left: 0; margin: 0; } - .bottom-content { margin-bottom: 131px; } From 89c387090841aab85e6de9f01c14bfb3c909de6c Mon Sep 17 00:00:00 2001 From: les0498 Date: Wed, 30 Jul 2025 20:22:56 +0900 Subject: [PATCH 02/11] =?UTF-8?q?style:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=84=98=EC=B9=A8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style.css b/style.css index 17422295..8a1d8780 100644 --- a/style.css +++ b/style.css @@ -245,6 +245,8 @@ } .bottom-all { + max-width: 375px; + width: 100%; padding-top: 121px; } From 889eb66aacf7fed1b4bd4f9f9ea827dc766d116f Mon Sep 17 00:00:00 2001 From: les0498 Date: Wed, 30 Jul 2025 22:52:12 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20inp?= =?UTF-8?q?ut=20blur=EC=8B=9C=20=EA=B0=92=20=EC=97=86=EC=9C=BC=EB=A9=B4=20?= =?UTF-8?q?=EB=B9=A8=EA=B0=84=20=ED=85=8C=EB=91=90=EB=A6=AC=20=EB=B0=8F=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/common.css | 59 +++++++++---------- common/variables.css | 35 ++++++----- login/index.html | 109 ++++++++++++++++++++-------------- login/index.js | 12 ++++ login/style.css | 46 +++++++++------ signup/index.html | 136 ++++++++++++++++++++++++++----------------- 6 files changed, 232 insertions(+), 165 deletions(-) create mode 100644 login/index.js diff --git a/common/common.css b/common/common.css index 655779d6..c6e057cd 100644 --- a/common/common.css +++ b/common/common.css @@ -25,7 +25,7 @@ header, align-items: flex-end; width: 100%; height: 540px; - background-color: #CFE5FF; + background-color: #cfe5ff; margin: 0 auto; } @@ -34,11 +34,10 @@ main { margin-bottom: 120px; } - footer { width: 100%; background-color: #111827; - padding: 32px 0 108px; + padding: 32px 0 108px; } .login-btn { @@ -56,43 +55,44 @@ footer { text-decoration: none; } - - .header-btn { display: inline-flex; width: 357px; - height: 56px; + height: 56px; background-color: var(--blue); border-radius: 40px; - border-style: none; + border-style: none; text-decoration: none; color: var(--white); font-size: 20px; - font-weight: 600; + font-weight: 600; justify-content: center; align-items: center; min-width: 240px; min-height: 48px; -} +} -.title:hover ,.logo:hover{ +.title:hover, +.logo:hover { cursor: pointer; } -.login-btn:hover , .header-btn:hover { +.login-btn:hover, +.header-btn:hover { cursor: pointer; - background-color: #1967D6; + background-color: #1967d6; } -.login-btn:focus, .header-btn:focus { - background-color: #1251AA; +.login-btn:focus, +.header-btn:focus { + background-color: #1251aa; } -.login-btn:disabled, .header-btn:disabled { +.login-btn:disabled, +.header-btn:disabled { background-color: var(--gray400); } - @media (min-width: 768px) and (max-width: 1199px) { nav { padding: 10px 24px; @@ -107,20 +107,17 @@ footer { } main { - margin: 52px 0 82px; + margin: 52px 0 82px; display: flex; flex-direction: column; - padding: 0 20px; - } + padding: 0 20px; + } - - footer { + footer { width: 100%; height: 160px; - padding: 32px 104px 108px 104px; + padding: 32px 104px 108px 104px; } - - } @media (max-width: 767px) { @@ -132,22 +129,20 @@ footer { padding: var(--login-btn-padding); } - header { - height: 540px; + height: 540px; } main { - margin: 52px 0 82px; + margin: 52px 0 82px; display: flex; flex-direction: column; - padding: 0 20px; + padding: 0 20px; } - - footer { + + footer { width: 100%; height: 160px; - padding: 32px 32px 30px 32px; + padding: 32px 32px 30px 32px; } - } diff --git a/common/variables.css b/common/variables.css index 3f3c50d5..aca6ad20 100644 --- a/common/variables.css +++ b/common/variables.css @@ -1,28 +1,27 @@ :root { --gray900: #11827; - --gray800: #1F2937; + --gray800: #1f2937; --gray700: #374151; - --gray600: #4B5563; - --gray500: #6B7280; - --gray400: #9CA3AF; - --gray200: #E5E7EB; - --gray100: #F3F4F6; - --blue :#3692FF; - --white: #FFFFFF; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --blue: #3692ff; + --red: #f74747; + --white: #ffffff; - --font-size-14 : 0.875rem; - --font-size-16 : 1rem; - --font-size-18 : 1.125rem; - --font-size-20 : 1.25rem; - --font-size-24 : 1.5rem; - --font-size-32 : 2rem; - --font-size-40 : 2.5rem; + --font-size-14: 0.875rem; + --font-size-16: 1rem; + --font-size-18: 1.125rem; + --font-size-20: 1.25rem; + --font-size-24: 1.5rem; + --font-size-32: 2rem; + --font-size-40: 2.5rem; --clamp-24: clamp(1rem, 2.5vw, 1.5rem); --clamp-40: clamp(1.8rem, 3.5vw, 2.5rem); - - --nav-title: 25.63px; - --login-btn-padding: 11px 43px; + --login-btn-padding: 11px 43px; } diff --git a/login/index.html b/login/index.html index 290c89eb..d0a9b4de 100644 --- a/login/index.html +++ b/login/index.html @@ -1,50 +1,73 @@ - - - - Login - - - - - - - -
-
- -

판다마켓

 -
-
-
diff --git a/login/index.js b/login/index.js index 0df77cf1..7edd6d4b 100644 --- a/login/index.js +++ b/login/index.js @@ -3,6 +3,7 @@ import { updateButtonState, validateEmailInput, validatePasswordInput, + togglePasswordVisiblity, } from "../shared/form-utils.js"; const emailInput = document.getElementById("email"); @@ -13,6 +14,7 @@ const passwordError = document.getElementById("password-error"); const loginBtn = document.querySelector(".login-btn"); const loginForm = document.getElementById("LoginForm"); +const eyeIcon = document.getElementById("eyeIcon"); function validateEmail() { return validateEmailInput(emailInput, emailError); @@ -22,6 +24,10 @@ function validatePassword() { return validatePasswordInput(passwordInput, passwordError); } +function eyeIconClickHandler() { + togglePasswordVisiblity(passwordInput, eyeIcon); +} + function updateLoginBtnState() { return updateButtonState({ inputs: [emailInput, passwordInput], @@ -50,6 +56,10 @@ passwordInput.addEventListener("input", () => { updateLoginBtnState(); }); +eyeIcon.addEventListener("click", () => { + eyeIconClickHandler(); +}); + loginForm.addEventListener("submit", (e) => { e.preventDefault(); if (!loginBtn.disabled) { diff --git a/shared/form-utils.js b/shared/form-utils.js index 2c8c0168..043c09bc 100644 --- a/shared/form-utils.js +++ b/shared/form-utils.js @@ -59,6 +59,16 @@ export function validateConfirmPasswordInput( return !message; } +export function togglePasswordVisiblity(passwordInput, eyeIcon) { + if (!passwordInput || !eyeIcon) return; + + const isPasswordVisible = passwordInput.type === "text"; + passwordInput.type = isPasswordVisible ? "password" : "text"; + eyeIcon.src = isPasswordVisible + ? "/images/btn_visibility_off.png" + : "/images/btn_visibility_on.png"; +} + export function preventPasswordSpaces(passwordInput) { if (!passwordInput) return; diff --git a/signup/index.html b/signup/index.html index 12a60926..78aaac94 100644 --- a/signup/index.html +++ b/signup/index.html @@ -54,7 +54,11 @@ type="password" placeholder="비밀번호를 입력해 주세요." /> - +
@@ -68,7 +72,11 @@ type="password" placeholder="비밀번호를 다시 한 번 입력해 주세요." /> - +
diff --git a/signup/index.js b/signup/index.js index 13fc1b33..9bbc62ab 100644 --- a/signup/index.js +++ b/signup/index.js @@ -5,6 +5,7 @@ import { updateButtonState, validateNicknameInput, validateConfirmPasswordInput, + togglePasswordVisiblity, } from "../shared/form-utils.js"; const emailInput = document.getElementById("email"); @@ -22,6 +23,9 @@ const confirmPasswordError = document.getElementById("confirmPassword-error"); const signupBtn = document.querySelector(".signup-btn"); const signupForm = document.getElementById("signupForm"); +const eyePassword = document.getElementById("eye-password"); +const eyeConfirm = document.getElementById("eye-confirm"); + function validateEmail() { return validateEmailInput(emailInput, emailError); } @@ -34,6 +38,14 @@ function validatePassword() { return validatePasswordInput(passwordInput, passwordError); } +function eyePasswordHandler() { + togglePasswordVisiblity(passwordInput, eyePassword); +} + +function eyeConfirmClickHandler() { + togglePasswordVisiblity(confirmPasswordInput, eyeConfirm); +} + function validateConfirmPassword() { return validateConfirmPasswordInput( passwordInput, @@ -90,6 +102,14 @@ confirmPasswordInput.addEventListener("input", () => { updateSignupBtnState(); }); +eyePassword.addEventListener("click", () => { + eyePasswordHandler(); +}); + +eyeConfirm.addEventListener("click", () => { + eyeConfirmClickHandler(); +}); + signupForm.addEventListener("submit", (e) => { e.preventDefault(); if (!signupBtn.disabled) {