From 53c31fb20c4278c36f4053ea2e7acfc873759e23 Mon Sep 17 00:00:00 2001 From: Aventurine91 Date: Sun, 6 Oct 2024 23:34:01 +0900 Subject: [PATCH] =?UTF-8?q?basic-=ED=95=98=EC=8B=A0=ED=98=9C-sprint1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../3-sprint-mission-fe" | 1 + .../index.html" | 2 +- .../join.js" | 8 - .../login.html" | 23 ++- .../login.js" | 171 ++++++++++++++++++ .../login_style.css" | 104 ++++++++++- .../register.css" | 114 +++++++++++- .../register.html" | 28 ++- .../register2.js" | 167 +++++++++++++++++ 9 files changed, 589 insertions(+), 29 deletions(-) create mode 160000 "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/3-sprint-mission-fe" delete mode 100644 "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.js" rename "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.css" => "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.css" (66%) rename "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.html" => "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.html" (67%) create mode 100644 "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register2.js" diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/3-sprint-mission-fe" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/3-sprint-mission-fe" new file mode 160000 index 0000000..fd58012 --- /dev/null +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/3-sprint-mission-fe" @@ -0,0 +1 @@ +Subproject commit fd58012470ec2ece62bedb78706a356c14fc2416 diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/index.html" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/index.html" index b5bbc24..4f03fb2 100644 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/index.html" +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/index.html" @@ -1,5 +1,5 @@ - + diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.js" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.js" deleted file mode 100644 index 08dfc20..0000000 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.js" +++ /dev/null @@ -1,8 +0,0 @@ -document.querySelectorAll('.toggle-password').forEach(function(button) { - button.addEventListener('click', function() { - const passwordInput = this.previousElementSibling; - const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; - passwordInput.setAttribute('type', type); - this.querySelector('img').alt = type === 'password' ? '토글패스워드' : '비밀번호 숨기기'; - }); -}); \ No newline at end of file diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.html" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.html" index 1c86f04..31ee414 100644 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.html" +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.html" @@ -1,5 +1,5 @@ - + @@ -19,19 +19,21 @@
+
비밀번호
+ -
- + +
- +
@@ -43,11 +45,22 @@
+ +

- 판다마켓 처음이신가요? 회원가입 + 판다마켓 처음이신가요? 회원가입

+ + diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.js" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.js" index 245ff35..b86c259 100644 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.js" +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login.js" @@ -1,3 +1,4 @@ +//비밀번호 토글 버튼 document.querySelector('.toggle-password').addEventListener('click', function () { const passwordInput = document.getElementById('password'); const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; @@ -5,3 +6,173 @@ document.querySelector('.toggle-password').addEventListener('click', function () this.querySelector('img').alt = type === 'password' ? '토글패스워드' : '비밀번호 숨기기'; }); + +//이메일 입력 칸 +document.getElementById('email').addEventListener('focusout', function() { + const emailInput = document.getElementById('email'); + const errorMessage = document.getElementById('emailError'); + const emailValue = emailInput.value.trim(); + const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + + if (emailValue === "") { + emailInput.classList.add('error'); + errorMessage.textContent = '이메일을 입력해주세요.'; + errorMessage.style.visibility = 'visible'; + } else if (!emailPattern.test(emailValue)) { + emailInput.classList.add('error'); + errorMessage.textContent = '잘못된 이메일 형식입니다.'; + errorMessage.style.visibility = 'visible'; + } else { + emailInput.classList.remove('error'); + errorMessage.style.visibility = 'hidden'; + } +}); + +//비밀번호 입력 칸 +document.getElementById('password').addEventListener('focusout', function() { + const passwordInput = document.getElementById('password'); + const errorMessage = document.getElementById('passwordError'); + const passwordValue = passwordInput.value.trim(); + + // 비밀번호의 최소 길이를 검사 (8자 이상) + if (passwordValue === "") { + passwordInput.classList.add('error'); + errorMessage.textContent = '비밀번호를 입력해주세요.'; + errorMessage.style.visibility = 'visible'; +} else if (passwordValue.length < 8) { + passwordInput.classList.add('error'); + errorMessage.textContent = '비밀번호를 8자 이상 입력해주세요.'; + errorMessage.style.visibility = 'visible'; +} else { + passwordInput.classList.remove('error'); + errorMessage.style.visibility = 'hidden'; +} +}); + +function validateForm() { + const emailInput = document.getElementById('email'); + const passwordInput = document.getElementById('password'); + const loginButton = document.querySelector('.login-btn'); + + const emailValue = emailInput.value.trim(); + const passwordValue = passwordInput.value.trim(); + + const emailError = document.getElementById('emailError'); + const passwordError = document.getElementById('passwordError'); + + const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + + let isValid = true; + + // 이메일 유효성 검사 + if (emailValue === "") { + emailInput.classList.add('error'); + emailError.textContent = '이메일을 입력해주세요.'; + emailError.style.visibility = 'visible'; + isValid = false; + } else if (!emailPattern.test(emailValue)) { + emailInput.classList.add('error'); + emailError.textContent = '잘못된 이메일 형식입니다.'; + emailError.style.visibility = 'visible'; + isValid = false; + } else { + emailInput.classList.remove('error'); + emailError.style.visibility = 'hidden'; + } + + // 비밀번호 유효성 검사 + if (passwordValue === "") { + passwordInput.classList.add('error'); + passwordError.textContent = '비밀번호를 입력해주세요.'; + passwordError.style.visibility = 'visible'; + isValid = false; + } else if (passwordValue.length < 8) { + passwordInput.classList.add('error'); + passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.'; + passwordError.style.visibility = 'visible'; + isValid = false; + } else { + passwordInput.classList.remove('error'); + passwordError.style.visibility = 'hidden'; + } + + // 로그인 버튼 활성화/비활성화 + loginButton.disabled = !isValid; +} + +// 이메일과 비밀번호 입력 필드에서 입력할 때마다 유효성 검사를 호출 +document.getElementById('email').addEventListener('input', validateForm); +document.getElementById('password').addEventListener('input', validateForm); + +// focusout 이벤트 시에도 유효성 검사 호출 +document.getElementById('email').addEventListener('focusout', validateForm); +document.getElementById('password').addEventListener('focusout', validateForm); + +// 로그인 버튼 클릭 이벤트 추가 +document.querySelector('.login-btn').addEventListener('click', function() { + const loginButton = document.querySelector('.login-btn'); // 클래스 선택자로 변경 + + // 버튼이 활성화되어 있을 때만 이동 + if (!loginButton.disabled) { + window.location.href = '/items'; // '/items'로 페이지 이동 + } + }); + + + // 유저 데이터베이스 (이미 존재하는 이메일과 비밀번호) +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!' } +]; + +// 로그인 처리 함수 +function handleLogin() { + const emailInput = document.getElementById('email').value.trim(); + const passwordInput = document.getElementById('password').value.trim(); + + // 유저 데이터베이스에서 이메일과 비밀번호 찾기 + const user = USER_DATA.find(user => user.email === emailInput); + + if (!user) { + // 이메일이 데이터베이스에 없는 경우 + openModal('비밀번호가 일치하지 않습니다.'); + } else if (user.password !== passwordInput) { + // 이메일은 있지만 비밀번호가 틀린 경우 + openModal('비밀번호가 일치하지 않습니다.'); + } else { + // 이메일과 비밀번호가 모두 일치하는 경우 + window.location.href = '/login'; // 페이지 이동 + } +} +// 모달 요소 가져오기 +const modal = document.getElementById('modal'); +const modalMessage = document.getElementById('modalMessage'); +const closeModalButton = document.querySelector('.close-modal-btn'); + +// 모달 열기 함수 +function openModal(message) { + modalMessage.textContent = message; + modal.style.display = 'block'; // 모달을 보이게 설정 +} + +// 모달 닫기 함수 (확인 버튼 클릭 시) +closeModalButton.addEventListener('click', function () { + modal.style.display = 'none'; +}); + +// 배경 클릭으로 모달 닫기 +window.addEventListener('click', function (event) { + if (event.target === modal) { + modal.style.display = 'none'; + } +}); + + + + +// 로그인 버튼 클릭 시 실행 +document.querySelector('.login-btn').addEventListener('click', handleLogin); diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login_style.css" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login_style.css" index 39abe23..a645bb0 100644 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login_style.css" +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/login_style.css" @@ -20,7 +20,7 @@ body { border-radius: 10px; text-align: center; width: 640px; -} +} .logo-section { margin-bottom: 30px; @@ -71,6 +71,37 @@ body { justify-content: space-between; } +.input-group1 input.error { + border: 1px solid red; +} + +.error-message-mail { + font-family: 'Pretendard'; + display: flex; + justify-content: space-between; + color: #F74747; + font-size: 15px; + visibility: hidden; + margin-top: 8px; + line-height: 17.9px; + font-weight: 600; +} + +.error-message-password { + font-family: 'Pretendard'; + display: flex; + justify-content: space-between; + color: #F74747; + font-size: 15px; + visibility: hidden; + margin-top: 8px; + line-height: 17.9px; + font-weight: 600; + position: absolute; + bottom: -20px; +} + + .input-group1 input:focus { outline: none; border: 1px solid #3692ff; @@ -109,11 +140,13 @@ input[type="password"] { outline: none; } -.input-group2 input:focus { - outline: none; - border: 1px solid #3692ff; +input[type="password"] { + padding-right: 40px; /* 토글 버튼이 겹치지 않도록 여유 공간 추가 */ } +.input-group2 input:focus { + outline: none;} + .toggle-password { background: none; border: none; @@ -130,7 +163,7 @@ input[type="password"] { .login-btn { width: 640px; height: 56px; - background-color: #9CA3AF; + background-color: #3692FF; font-family: 'Pretendard'; color: white; font-size: 20px; @@ -142,9 +175,14 @@ input[type="password"] { cursor: pointer; margin-bottom: 20px; border-radius: 40px; - margin-top: 24px; + margin-top: 30px; } +.login-btn:disabled { + background-color: #9CA3AF; + cursor: not-allowed; +} + .social-login { font-size: 16px; line-height: 26px; @@ -202,3 +240,57 @@ input[type="password"] { text-decoration: underline; } +/* 모달 전체 배경 */ +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); +} + +/* 모달 내용 */ +.modal-content { + background-color: white; + margin: 20% auto; + padding: 30px; + border-radius: 8px; + width: 520px; + height: 250px; + position: relative; + text-align: center; /* 텍스트를 중앙에 정렬 */ +} + +/* 모달 텍스트 */ +.modalmessage { + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 500; + line-height: 19.09px; + text-align: center; + color: #1F2937;/* 텍스트 색상 */ + margin-bottom: 30px; +} + +/* 확인 버튼 */ +.modal-footer { + display: flex; + justify-content: flex-end; +} + +.close-modal-btn { + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 600; + line-height: 19.09px; + background-color: #3692FF; /* 파란색 버튼 */ + color: white; + border: none; + padding: 12px 23px 12px 23px; + gap: 10px; + border-radius: 8px; + cursor: pointer; +} diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.css" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.css" similarity index 66% rename from "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.css" rename to "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.css" index 3a9163b..69874d6 100644 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.css" +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.css" @@ -70,8 +70,37 @@ body { justify-content: space-between; } +.input-group1 input.error { + border: 1px solid red; +} + +.error-message-mail { + font-family: 'Pretendard'; + display: flex; + justify-content: space-between; + color: #F74747; + font-size: 15px; + visibility: hidden; + margin-top: 8px; + line-height: 17.9px; + font-weight: 600; +} +.error-message-password { + font-family: 'Pretendard'; + display: flex; + justify-content: space-between; + color: #F74747; + font-size: 15px; + visibility: hidden; + margin-top: 8px; + line-height: 17.9px; + font-weight: 600; + position: absolute; + bottom: -20px; +} + .input-group2 input { width: 640px; height: 56px; @@ -89,6 +118,21 @@ body { display: flex; justify-content: space-between; } + +input[type="password"] { + flex: 1; + border: none; + outline: none; + padding: 8px; + font-size: 16px; + color: #808080; +} + +input[type="password"] { + padding-right: 40px; /* 토글 버튼이 겹치지 않도록 여유 공간 추가 */ +} + + .input-group3 { width: 640px; height: 56px; @@ -188,14 +232,14 @@ body { top: 480px ; } -.join-btn { +.register-btn { width: 640px; height: 56px; background-color: #9CA3AF; font-family: 'Pretendard'; color: white; font-size: 20px; - font-weight: 600px; + font-weight: 600; padding: 16px 124px 16px 124px; border: none; border-radius: 5px; @@ -206,6 +250,12 @@ body { margin-top: 24px; } +.register-btn.active { + background-color: #3692FF; /* 활성화 상태에서 파란색 */ + cursor: pointer; /* 활성화 상태에서 클릭 가능 */ + opacity: 1; +} + .social-login { font-size: 16px; line-height: 26px; @@ -264,3 +314,63 @@ body { } +/* 모달 전체 배경 */ +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); +} + +/* 모달 내용 */ +.modal-content { + background-color: white; + margin: 20% auto; + padding: 30px; + border-radius: 8px; + width: 520px; + height: 250px; + position: relative; + text-align: center; /* 텍스트를 중앙에 정렬 */ +} + +/* 모달 텍스트 */ +.modal-text { + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 500; + line-height: 19.09px; + text-align: center; + color: #1F2937;/* 텍스트 색상 */ + margin-bottom: 30px; +} + +/* 확인 버튼 */ +.modal-footer { + display: flex; + justify-content: flex-end; +} + +.close-modal-btn { + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 600; + line-height: 19.09px; + background-color: #3692FF; /* 파란색 버튼 */ + color: white; + border: none; + padding: 12px 23px 12px 23px; + gap: 10px; + border-radius: 8px; + cursor: pointer; +} + +.close-modal-btn:hover { + background-color: #155abc; /* 버튼에 hover 시 색상 변경 */ +} + + diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.html" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.html" similarity index 67% rename from "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.html" rename to "\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.html" index ca5ca38..f458b79 100644 --- "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/join.html" +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register.html" @@ -1,10 +1,10 @@ - + 회원가입 - +
@@ -18,29 +18,32 @@
+
닉네임
- - + +
비밀번호
+
비밀번호 확인
- + +
- + @@ -62,8 +65,19 @@

+ + + + - + \ No newline at end of file diff --git "a/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register2.js" "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register2.js" new file mode 100644 index 0000000..748a8a9 --- /dev/null +++ "b/\354\212\244\355\224\204\353\246\260\355\212\270\353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/\354\212\244\355\224\204\353\246\260\355\212\270 \353\257\270\354\205\230_1&2_\355\225\230\354\213\240\355\230\234/register2.js" @@ -0,0 +1,167 @@ +// 비밀번호 토글 +document.querySelectorAll('.toggle-password').forEach(function (button) { + button.addEventListener('click', function () { + const passwordInput = this.parentElement.querySelector('input[type="password"], input[type="text"]'); + const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; + passwordInput.setAttribute('type', type); + + this.querySelector('img').alt = type === 'password' ? '토글패스워드' : '비밀번호 숨기기'; + }); +}); + +// 이메일, 비밀번호, 비밀번호 확인 유효성 검사 및 회원가입 버튼 활성화 +function validateForm() { + const emailInput = document.getElementById('email'); + const passwordInput = document.getElementById('password'); + const confirmPasswordInput = document.getElementById('passwordConfirm'); + const registerButton = document.querySelector('.register-btn'); + + const emailValue = emailInput.value.trim(); + const passwordValue = passwordInput.value.trim(); + const confirmPasswordValue = confirmPasswordInput.value.trim(); + + const emailError = document.getElementById('emailError'); + const passwordError = document.getElementById('passwordError'); + const confirmPasswordError = document.getElementById('passwordConfirmError'); + + const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + + let isValid = true; + + // 이메일 유효성 검사 + if (!emailValue) { + emailInput.classList.add('error'); + emailError.textContent = '이메일을 입력해주세요.'; + emailError.style.visibility = 'visible'; + isValid = false; + } else if (!emailPattern.test(emailValue)) { + emailInput.classList.add('error'); + emailError.textContent = '잘못된 이메일 형식입니다.'; + emailError.style.visibility = 'visible'; + isValid = false; + } else { + emailInput.classList.remove('error'); + emailError.style.visibility = 'hidden'; + } + + // 비밀번호 유효성 검사 + if (!passwordValue) { + passwordInput.classList.add('error'); + passwordError.textContent = '비밀번호를 입력해주세요.'; + passwordError.style.visibility = 'visible'; + isValid = false; + } else if (passwordValue.length < 8) { + passwordInput.classList.add('error'); + passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.'; + passwordError.style.visibility = 'visible'; + isValid = false; + } else { + passwordInput.classList.remove('error'); + passwordError.style.visibility = 'hidden'; + } + + // 비밀번호 확인 유효성 검사 + if (!confirmPasswordValue) { + confirmPasswordInput.classList.add('error'); + confirmPasswordError.textContent = '비밀번호 확인을 입력해주세요.'; + confirmPasswordError.style.visibility = 'visible'; + isValid = false; + } else if (passwordValue !== confirmPasswordValue) { + confirmPasswordInput.classList.add('error'); + confirmPasswordError.textContent = '비밀번호가 일치하지 않습니다.'; + confirmPasswordError.style.visibility = 'visible'; + isValid = false; + } else { + confirmPasswordInput.classList.remove('error'); + confirmPasswordError.style.visibility = 'hidden'; + } + + // 회원가입 버튼 활성화/비활성화 + registerButton.disabled = !isValid; + if (isValid) { + registerButton.classList.add('active'); + } else { + registerButton.classList.remove('active'); + } +} + +// 각 필드에 유효성 검사 이벤트 추가 +document.getElementById('email').addEventListener('input', validateForm); +document.getElementById('password').addEventListener('input', validateForm); +document.getElementById('passwordConfirm').addEventListener('input', validateForm); + +// 회원가입 버튼 클릭 시 조건 확인 후 페이지 이동 +document.querySelector('.register-btn').addEventListener('click', function () { + const registerButton = document.querySelector('.register-btn'); + + // 버튼이 활성화되어 있을 때만 이동 + if (!registerButton.disabled) { + window.location.href = '/items'; // '/items'로 페이지 이동 + } +}); + + +// 유저 데이터베이스 +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!' } +]; + + + +// 회원가입 처리 함수 +function handleSignup() { + // 폼 입력 값 가져오기 + const emailInput = document.getElementById('email').value.trim(); + const nicknameInput = document.getElementById('nickname').value.trim(); + const passwordInput = document.getElementById('password').value.trim(); + const confirmPasswordInput = document.getElementById('passwordConfirm').value.trim(); + + // 이메일 중복 체크 + const isEmailTaken = USER_DATA.some(user => user.email === emailInput); + + if (isEmailTaken) { + // 이메일이 이미 존재하는 경우 + openModal('사용 중인 이메일입니다'); + } else if (passwordInput !== confirmPasswordInput) { + // 비밀번호 확인이 일치하지 않는 경우 + openModal('비밀번호가 일치하지 않습니다.'); + } else if (passwordInput.length < 8) { + // 비밀번호가 8자 이상이 아닌 경우 + openModal('비밀번호는 8자 이상이어야 합니다.'); + } else { + // 회원가입 성공 처리 + // 새로운 유저 데이터 추가 (가짜로 처리) + USER_DATA.push({ email: emailInput, password: passwordInput }); + + // 성공 메시지 표시 및 로그인 페이지로 이동 + openModal('회원가입이 성공적으로 처리되었습니다'); + + window.location.href = '/login'; // 로그인 페이지로 이동 + } +} + +// 모달 요소 가져오기 +const modal = document.getElementById('modal'); +const modalMessage = document.getElementById('modalMessage'); +const closeModal = document.querySelector('.close-modal-btn'); + +// 모달 열기 함수 +function openModal(message) { + modalMessage.textContent = message; // 전달된 메시지를 모달에 표시 + modal.style.display = 'block'; // 모달을 보이게 설정 +} + +// 모달 닫기 함수 +closeModal.addEventListener('click', function() { + modal.style.display = 'none'; +}); + + +// 회원가입 버튼 클릭 시 실행 +document.querySelector('.register-btn').addEventListener('click', handleSignup); +