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);
+