From 43ace0ac86ff9a4ed4abd572fa4ad9b0900ec7ca Mon Sep 17 00:00:00 2001 From: JoohyoungJun Date: Mon, 22 Dec 2025 14:22:00 +0900 Subject: [PATCH 1/3] Add mobile, tablet size of pages --- frontend/signup.html | 1 + frontend/styles/global.css | 28 +++++++++++++++++++++- frontend/styles/home.css | 49 +++++++++++++++++++++++++++++++++++++- frontend/styles/login.css | 36 +++++++++++++++++++++++++++- 4 files changed, 111 insertions(+), 3 deletions(-) diff --git a/frontend/signup.html b/frontend/signup.html index f3c9653..9309e6b 100644 --- a/frontend/signup.html +++ b/frontend/signup.html @@ -12,6 +12,7 @@ /> +
diff --git a/frontend/styles/global.css b/frontend/styles/global.css index cee565a..1ad56d6 100644 --- a/frontend/styles/global.css +++ b/frontend/styles/global.css @@ -79,7 +79,7 @@ body { .link-home { color: #3692ff; - font-family: "ROKAF Sans"; + font-family: 'ROKAF Sans'; font-size: 25.633px; font-style: normal; font-weight: 700; @@ -190,3 +190,29 @@ footer { align-items: center; flex-shrink: 0; } + +/* tablet size */ +@media (max-width: 1199px) { + .navbar { + padding-left: 24px; + padding-right: 24px; + } + + footer { + padding-left: 24px; + padding-right: 24px; + } +} + +/* Mobile size */ +@media (max-width: 743px) { + .navbar { + padding-left: 16px; + padding-right: 16px; + } + + footer { + padding-left: 16px; + padding-right: 16px; + } +} diff --git a/frontend/styles/home.css b/frontend/styles/home.css index 90abfff..07e3a3d 100644 --- a/frontend/styles/home.css +++ b/frontend/styles/home.css @@ -76,7 +76,7 @@ .section { display: flex; - width: 1920px; + width: 100%; padding-top: 138px; padding-bottom: 138px; flex-direction: column; @@ -91,6 +91,7 @@ justify-content: center; align-items: center; gap: 64px; + padding: 0 24px; } .img-sec1 { @@ -165,3 +166,49 @@ align-items: center; gap: 10px; } + +@media (max-width: 743px) { + .section-box { + padding: 0 16px; + flex-direction: column; + gap: 24px; + align-items: center; + text-align: center; + } + + .img-sec1, + .img-sec2, + .img-sec3 { + width: 100%; + max-width: 400px; + height: auto; + } + + .main-top, + .main-bottom { + height: auto; + padding-top: 80px; + padding-bottom: 80px; + } + + .main-top-box, + .main-bottom-box { + flex-direction: column; + gap: 24px; + padding: 0 16px; + text-align: center; + } + + .main-top-box-right, + .main-bottom-box-right { + width: 100%; + height: auto; + } + + .img-home-top, + .img-home-bottom { + width: 100%; + max-width: 400px; + height: auto; + } +} diff --git a/frontend/styles/login.css b/frontend/styles/login.css index 5545359..dd8047d 100644 --- a/frontend/styles/login.css +++ b/frontend/styles/login.css @@ -20,7 +20,7 @@ .login-logo-text { color: var(--brand-blue, #3692ff); - font-family: "ROKAF Sans"; + font-family: 'ROKAF Sans'; font-size: 66.344px; font-style: normal; font-weight: 700; @@ -169,3 +169,37 @@ label { text-underline-offset: auto; text-underline-position: from-font; } + +@media (max-width: 743px) { + .login-box { + max-width: 400px; + width: 100%; + margin: 0 auto; + padding: 0 16px; + } + + .login-logo { + width: 100%; + justify-content: center; + gap: 12px; + } + + .login-main, + .login-main-top, + .inputs, + label { + width: 100%; + align-self: stretch; + } + + input, + .button-submit-login, + .button-submit-signup, + .login-main-mid { + width: 100%; + } + + .mid-container { + width: 100%; + } +} From b4b087822f47458aa4906c32bf97bfd0001b481c Mon Sep 17 00:00:00 2001 From: JoohyoungJun Date: Fri, 26 Dec 2025 16:40:16 +0900 Subject: [PATCH 2/3] Add auth.js --- frontend/login.html | 15 +++- frontend/scripts/auth.js | 185 ++++++++++++++++++++++++++++++++++++++ frontend/signup.html | 17 +++- frontend/styles/login.css | 26 +++++- 4 files changed, 238 insertions(+), 5 deletions(-) create mode 100644 frontend/scripts/auth.js diff --git a/frontend/login.html b/frontend/login.html index f896bbe..b442e0f 100644 --- a/frontend/login.html +++ b/frontend/login.html @@ -84,21 +84,31 @@ - +

- +
@@ -129,5 +139,6 @@ + diff --git a/frontend/scripts/auth.js b/frontend/scripts/auth.js new file mode 100644 index 0000000..11254aa --- /dev/null +++ b/frontend/scripts/auth.js @@ -0,0 +1,185 @@ +// login +const loginEmail = document.getElementById('login-email'); +const loginPw = document.getElementById('login-pw'); +const loginBtn = document.getElementById('login-btn'); +const loginEmailError = document.getElementById('login-email-err-msg'); +const loginPwError = document.getElementById('login-pw-err-msg'); + +// signup +const signupEmail = document.getElementById('signup-email'); +const signupUserName = document.getElementById('signup-username'); +const signupPw = document.getElementById('signup-pw'); +const signupPwCheck = document.getElementById('signup-pw-check'); +const signupPwCheckError = document.getElementById('signup-pw-check-err-msg'); +const signupBtn = document.getElementById('signup-btn'); +const signupEmailError = document.getElementById('signup-email-err-msg'); +const signupPwError = document.getElementById('signup-pw-err-msg'); + +const USER_DATA = [ + { email: 'codeit1@codeit.com', password: 'codeit101!' }, + { email: 'codeit2@codeit.com', password: 'codeit202!' }, + { email: 'codeit3@codeit.com', password: 'codeit303!' }, + { email: 'codeit4@codeit.com', password: 'codeit404!' }, + { email: 'codeit5@codeit.com', password: 'codeit505!' }, + { email: 'codeit6@codeit.com', password: 'codeit606!' }, +]; + +const emailRegex = /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; + +// login page +if (loginEmail && loginPw && loginBtn && loginEmailError && loginPwError) { + const validateEmail = () => { + const email = loginEmail.value.trim(); + + if (!emailRegex.test(email)) { + loginEmailError.textContent = '잘못된 이메일 형식입니다'; + return false; + } + + loginEmailError.textContent = ''; + return true; + }; + + const validatePW = () => { + const password = loginPw.value.trim(); + + if (password.length < 8) { + loginPwError.textContent = '비밀번호를 8자 이상 입력해주세요.'; + return false; + } + + loginPwError.textContent = ''; + return true; + }; + + const updateLoginBtn = () => { + // 둘 다 유효해야 + const ok = validateEmail() && validatePW(); + loginBtn.disabled = !ok; + }; + + // input(타이핑) 시 버튼 갱신 + loginEmail.addEventListener('input', updateLoginBtn); + loginPw.addEventListener('input', updateLoginBtn); + + // focus out(blur) 시 에러메시지 표시 + 버튼 갱신 + loginEmail.addEventListener('blur', updateLoginBtn); + loginPw.addEventListener('blur', updateLoginBtn); + + // 로그인 버튼 클릭 + loginBtn.addEventListener('click', (event) => { + event.preventDefault(); + if (loginBtn.disabled) return; + + const inputEmail = loginEmail.value.trim(); + const inputPw = loginPw.value.trim(); + + const user = USER_DATA.find((u) => u.email === inputEmail); + + if (!user || user.password !== inputPw) { + window.alert('비밀번호가 일치하지 않습니다.'); + return; + } + + window.location.href = './items.html'; + }); +} + +// signup page +if (signupEmail && signupUserName && signupPw && signupPwCheck && signupBtn) { + const checkEmailExists = () => { + const email = signupEmail.value.trim(); + if (USER_DATA.some((user) => user.email === email)) { + window.alert('사용중인 이메일입니다!'); + return true; + } + return false; + }; + + const validateSignupEmail = () => { + const email = signupEmail.value.trim(); + + if (!emailRegex.test(email)) { + signupEmailError.textContent = '잘못된 이메일 형식입니다'; + return false; + } + + signupEmailError.textContent = ''; + return true; + }; + + const validateSignupPW = () => { + const password = signupPw.value.trim(); + + if (password.length < 8) { + signupPwError.textContent = '비밀번호를 8자 이상 입력해주세요.'; + return false; + } + + signupPwError.textContent = ''; + return true; + }; + + const validateSignupUserName = () => { + const name = signupUserName.value.trim(); + return name ? true : false; + }; + + const validatePwCheck = () => { + const pw1 = signupPw.value.trim(); + const pw2 = signupPwCheck.value.trim(); + + if (pw1 !== pw2) { + signupPwCheckError.textContent = '비밀번호가 일치하지 않습니다.'; + return false; + } + + signupPwCheckError.textContent = ''; + return true; + }; + + const updateSignupBtn = () => { + if ( + !validateSignupEmail() || + !validateSignupUserName() || + !validateSignupPW() || + !validatePwCheck() || + checkEmailExists() + ) { + signupBtn.disabled = true; + } else { + signupBtn.disabled = false; + } + }; + + signupEmail.addEventListener('input', updateSignupBtn); + signupUserName.addEventListener('input', updateSignupBtn); + signupPw.addEventListener('input', updateSignupBtn); + signupPwCheck.addEventListener('input', updateSignupBtn); + signupEmail.addEventListener('blur', updateSignupBtn); + signupUserName.addEventListener('blur', updateSignupBtn); + signupPw.addEventListener('blur', updateSignupBtn); + signupPwCheck.addEventListener('blur', updateSignupBtn); + + console.log(signupEmail.value); + console.log(signupPw.value); + console.log(signupPwCheck.value); + console.log(signupUserName.value); + + // 회원가입 버튼 클릭 + signupBtn.addEventListener('click', (event) => { + event.preventDefault(); + + console.log(signupEmail.value); + console.log(signupPw.value); + console.log(signupPwCheck.value); + console.log(signupUserName.value); + + if (checkEmailExists()) { + window.alert('사용 중인 이메일입니다'); + return; + } + + window.location.href = './login.html'; + }); +} diff --git a/frontend/signup.html b/frontend/signup.html index 9309e6b..db64ea5 100644 --- a/frontend/signup.html +++ b/frontend/signup.html @@ -85,15 +85,18 @@ +

- + @@ -147,5 +161,6 @@ + diff --git a/frontend/styles/login.css b/frontend/styles/login.css index dd8047d..1190458 100644 --- a/frontend/styles/login.css +++ b/frontend/styles/login.css @@ -102,11 +102,17 @@ label { line-height: 32px; /* 160% */ } -.button-submit-login:hover, -.button-submit-signup:hover { +.button-submit-login:not(:disabled):hover, +.button-submit-signup:not(:disabled):hover { background-color: #3692ff; } +.button-submit-login:disabled, +.button-submit-signup:disabled { + background: var(--Cool-Gray-400, #9ca3af); + cursor: not-allowed; +} + .login-main-mid { width: 640px; height: 74px; @@ -203,3 +209,19 @@ label { width: 100%; } } + +/* error msg */ +.err-msg { + color: var(--error-red, #f74747); + font-family: Pretendard; + font-size: 15px; + font-style: normal; + font-weight: 600; + line-height: normal; + margin-top: 2px; +} + +.input-error { + color: #f74747; + border: 1px solid #f74747 !important; +} From 3cdc15730ef6ae0a027fcdb932012d9a6c877645 Mon Sep 17 00:00:00 2001 From: JoohyoungJun Date: Fri, 26 Dec 2025 16:43:39 +0900 Subject: [PATCH 3/3] chore: code convention in auth.js --- frontend/scripts/auth.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/scripts/auth.js b/frontend/scripts/auth.js index 11254aa..869ad9e 100644 --- a/frontend/scripts/auth.js +++ b/frontend/scripts/auth.js @@ -54,8 +54,11 @@ if (loginEmail && loginPw && loginBtn && loginEmailError && loginPwError) { const updateLoginBtn = () => { // 둘 다 유효해야 - const ok = validateEmail() && validatePW(); - loginBtn.disabled = !ok; + if (!validateEmail() || !validatePW()) { + loginBtn.disabled = true; + } else { + loginBtn.disabled = false; + } }; // input(타이핑) 시 버튼 갱신