From 4abfb322f391f2b0914a70e52c3ee44af03227bb Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Sun, 10 Nov 2024 20:01:32 +0900
Subject: [PATCH 1/8] project3 first commit

---
 project/login.html      |  4 +-
 project/login.js        | 90 ++++++++++++++++++++++++++++++++++++++++-
 project/signup.html     | 12 +++---
 project/style_login.css | 30 ++++++++------
 4 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/project/login.html b/project/login.html
index 093ab04..d856286 100644
--- a/project/login.html
+++ b/project/login.html
@@ -12,10 +12,10 @@
             <a id="section0" href="index.html"></a>
 
             <form id="section1">
-                <label class="section1_box">이메일
+                <label class="section1_box"><span class="box_name">이메일</span>
                     <input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
                 </label>
-                <label class="section1_box">비밀번호
+                <label class="section1_box"><span class="box_name">비밀번호</span>
                     <div class="password-container">
                         <input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
                         <img src="img/btn_visibility_off.png" class="icon_eyes">
diff --git a/project/login.js b/project/login.js
index cb2fb84..c1c1fd2 100644
--- a/project/login.js
+++ b/project/login.js
@@ -22,7 +22,9 @@ icons.forEach(icon => {
 
 // 버튼 색깔 활성화
 let button = document.querySelector('#section1_button');
-let inputbox = document.querySelectorAll('#section1 input')
+let inputbox = document.querySelectorAll('#section1 input');
+
+
 function checkinput(){
     let check =true;
     inputbox.forEach(input => {
@@ -37,6 +39,92 @@ function checkinput(){
         button.style.backgroundColor ='#9CA3AF';
     }
 }
+
 inputbox.forEach(input=>{
     input.addEventListener('input',checkinput);
 });
+//
+let email_check =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
+let pw_check=/^.{8,}/;
+//로그인 버튼 checkout 됬을때
+inputbox.forEach(input=>{
+    input.addEventListener('focus',()=>{
+        input.style.border =  '0.125rem solid #3692FF';
+    });
+    input.addEventListener('blur',function(){
+        console.log(input.id);
+        if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
+            if(input.value===''){ // 아무것도 입력 안하면
+                if(!input.nextElementSibling){
+                    input.style.border =  '0.125rem solid red';
+                    let alret_msg = document.createElement('div');
+                    alret_msg.textContent = '이메일을 입력해주세요.';
+                    alret_msg.className = 'alert';
+                    input.parentElement.append(alret_msg);
+                }
+                else{
+                    input.style.border =  '0.125rem solid red';
+                    input.nextElementSibling.textContent='이메일을 입력해주세요.';
+                }
+            }
+            else if(!email_check.test(input.value)){
+                if(!input.nextElementSibling) {
+                    input.style.border =  '0.125rem solid red';
+                    let alret_msg = document.createElement('div');
+                    alret_msg.textContent = '잘못된 이메일 형식입니다.';
+                    alret_msg.className = 'alert';
+                    input.parentElement.append(alret_msg);
+                }
+                else{
+                    input.style.border =  '0.125rem solid red';
+                    input.nextElementSibling.textContent='잘못된 이메일 형식입니다.';
+                }
+            }
+            else if(email_check.test(input.value)){
+                if(input.nextElementSibling) {
+                    input.nextElementSibling.remove();
+                    input.style.border =  'none';
+                }
+            }
+        }
+        
+        else if(input.id === "section1_pwbox"){// 이메일인지 비밀번호인지 확인 -> 비밀번호면
+            if(input.value===''){ // 아무것도 입력 안하면
+                console.log(input.nextElementSibling);
+                if(!input.nextElementSibling){
+                    input.style.border =  '0.125rem solid red';
+                    let alret_msg = document.createElement('div');
+                    alret_msg.textContent = '비밀번호를 입력해주세요.';
+                    alret_msg.className = 'alert';
+                    input.parentElement.append(alret_msg);
+                }
+                else{
+                    input.style.border =  '0.125rem solid red';
+                    input.nextElementSibling.textContent='비밀번호를 입력해주세요.';
+                }
+            }
+            else if(!pw_check.test(input.value)){
+                // if(!input.nextElementSibling) {
+                    input.style.border =  '0.125rem solid red';
+                    let alret_msg = document.createElement('div');
+                    alret_msg.textContent = '비밀번호를 8자 이상 입력해주세요.';
+                    alret_msg.className = 'alert';
+                    console.log(input.parentElement.parentElement);
+                    input.parentElement.parentElement.append(alret_msg);
+                // }
+                // else{
+                //     input.style.border =  '0.125rem solid red';
+                //     input.nextElementSibling.textContent='비밀번호를 8자 이상 입력해주세요.';
+                // }
+            }
+            else if(pw_check.test(input.value)){
+                if(input.nextElementSibling) {
+                    input.nextElementSibling.remove();
+                    input.style.border =  'none';
+                }
+            }
+        }
+
+
+    })
+})
diff --git a/project/signup.html b/project/signup.html
index f7edce5..c67a234 100644
--- a/project/signup.html
+++ b/project/signup.html
@@ -12,21 +12,21 @@
             <a id="section0" href="index.html"></a>
 
             <form id="section1">
-                <label class="section1_box">이메일
+                <label class="section1_box"><span class="box_name">이메일</span>
                     <input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
                 </label>
-                <label class="section1_box">닉네임
-                    <input name="nickname" placeholder="닉네임을 입력해주세요" id="section1_emailbox" required>
+                <label class="section1_box"><span class="box_name">닉네임</span>
+                    <input name="nickname" placeholder="닉네임을 입력해주세요" id="section1_nicknamebox" required>
                 </label>
-                <label class="section1_box">비밀번호
+                <label class="section1_box"><span class="box_name">비밀번호</span>
                     <div class="password-container">
                         <input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
                         <img src="img/btn_visibility_off.png" class="icon_eyes">
                     </div>
                 </label>
-                <label class="section1_box">비밀번호 확인
+                <label class="section1_box"><span class="box_name">비밀번호 확인</span>
                     <div class="password-container">
-                        <input type="password" name="password" placeholder="비밀번호를 다시 한 번 입력해주세요" id="section1_pwbox" required>
+                        <input type="password" name="password" placeholder="비밀번호를 다시 한 번 입력해주세요" id="section1_pwcheckbox" required>
                         <img src="img/btn_visibility_off.png" class="icon_eyes">
                     </div>
                 </label>
diff --git a/project/style_login.css b/project/style_login.css
index 1c2bfeb..c349974 100644
--- a/project/style_login.css
+++ b/project/style_login.css
@@ -42,14 +42,14 @@ body {
     font-size: 1.125rem; /* 18px */
     font-weight: 700;
     width: 100%;
-    height: 6.125rem; /* 98px */
+    /* height: 6.125rem; 98px */
     color: var(--text-color-dark);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
-#section1_emailbox {
+#section1_emailbox , #section1_nicknamebox {
     background-color: var(--box-background-color);
     width: 40rem; /* 640px */
     height: 3.5rem; /* 56px */
@@ -63,6 +63,7 @@ body {
     box-sizing: border-box;
 }
 
+
 .password-container {
     position: relative;
     display: flex;
@@ -79,12 +80,8 @@ input[type="password"]::-ms-clear {
   display: none;
 }
 
-#section1_emailbox:focus {
-    border: 0.125rem solid var(--input-focus-color); /* 2px */
-    outline: none; 
-}
 
-#section1_pwbox {
+#section1_pwbox , #section1_pwcheckbox  {
     background-color: var(--box-background-color);
     width: 40rem; /* 640px */
     height: 3.5rem; /* 56px */
@@ -98,11 +95,6 @@ input[type="password"]::-ms-clear {
     box-sizing: border-box;
 }
 
-#section1_pwbox:focus {
-    border: 0.125rem solid var(--input-focus-color); /* 2px */
-    outline: none; 
-}
-
 #section1_button {
     width: 100%;
     height: 3.5rem; /* 56px */
@@ -157,3 +149,17 @@ input[type="password"]::-ms-clear {
 .login_text{
     color: var(--button-active-color);
 }
+
+
+.box_name{
+    margin-bottom: 1rem;
+}
+
+.alert{
+    color: #F74747;
+    font-size: 0.9375rem;
+    line-height: 1.11875rem;
+    font-weight: 600;
+    margin-top: 0.5rem;
+    margin-left: 1rem;
+}
\ No newline at end of file

From b6a5e7dbeae6802edb6c370275313a24b65ec075 Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Mon, 11 Nov 2024 09:56:51 +0900
Subject: [PATCH 2/8] add make_alret_msg function

---
 project/login.js | 118 ++++++++++++++++++-----------------------------
 1 file changed, 46 insertions(+), 72 deletions(-)

diff --git a/project/login.js b/project/login.js
index c1c1fd2..6f586e3 100644
--- a/project/login.js
+++ b/project/login.js
@@ -1,6 +1,3 @@
-
-
-
 // 비밀번호 암호화 해제/설정 버튼
 let icons = document.querySelectorAll('.icon_eyes');
 icons.forEach(icon => {
@@ -23,29 +20,25 @@ icons.forEach(icon => {
 // 버튼 색깔 활성화
 let button = document.querySelector('#section1_button');
 let inputbox = document.querySelectorAll('#section1 input');
+const email_check =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
+const pw_check=/^.{8,}/;
 
-
-function checkinput(){
-    let check =true;
-    inputbox.forEach(input => {
-        if(input.value === ''){
-            check=false
-        }
-    });
-    if(check === true){
-        button.style.backgroundColor ='#3692FF';
+let make_alret_msg = (input,text)=>{
+    let box = input.closest('.section1_box')
+    if(!box.querySelector('.alert')){
+        input.style.border =  '0.125rem solid red';
+        let alert_msg = document.createElement('div');
+        alert_msg.textContent = text;
+        alert_msg.className = 'alert';
+        box.append(alert_msg);
     }
     else{
-        button.style.backgroundColor ='#9CA3AF';
+        input.style.border =  '0.125rem solid red';
+        box.querySelector('.alert').textContent = text;
     }
 }
 
-inputbox.forEach(input=>{
-    input.addEventListener('input',checkinput);
-});
-//
-let email_check =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
-let pw_check=/^.{8,}/;
+
 //로그인 버튼 checkout 됬을때
 inputbox.forEach(input=>{
     input.addEventListener('focus',()=>{
@@ -55,76 +48,57 @@ inputbox.forEach(input=>{
         console.log(input.id);
         if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
             if(input.value===''){ // 아무것도 입력 안하면
-                if(!input.nextElementSibling){
-                    input.style.border =  '0.125rem solid red';
-                    let alret_msg = document.createElement('div');
-                    alret_msg.textContent = '이메일을 입력해주세요.';
-                    alret_msg.className = 'alert';
-                    input.parentElement.append(alret_msg);
-                }
-                else{
-                    input.style.border =  '0.125rem solid red';
-                    input.nextElementSibling.textContent='이메일을 입력해주세요.';
-                }
+                make_alret_msg(input,'이메일을 입력해주세요.');
             }
             else if(!email_check.test(input.value)){
-                if(!input.nextElementSibling) {
-                    input.style.border =  '0.125rem solid red';
-                    let alret_msg = document.createElement('div');
-                    alret_msg.textContent = '잘못된 이메일 형식입니다.';
-                    alret_msg.className = 'alert';
-                    input.parentElement.append(alret_msg);
-                }
-                else{
-                    input.style.border =  '0.125rem solid red';
-                    input.nextElementSibling.textContent='잘못된 이메일 형식입니다.';
-                }
+                make_alret_msg(input,'잘못된 이메일 형식입니다.');
             }
             else if(email_check.test(input.value)){
-                if(input.nextElementSibling) {
-                    input.nextElementSibling.remove();
-                    input.style.border =  'none';
+                if(input.parentElement.querySelector('.alert')) {
+                    input.parentElement.querySelector('.alert').remove();
                 }
+                input.style.border =  'none';
             }
         }
         
         else if(input.id === "section1_pwbox"){// 이메일인지 비밀번호인지 확인 -> 비밀번호면
             if(input.value===''){ // 아무것도 입력 안하면
-                console.log(input.nextElementSibling);
-                if(!input.nextElementSibling){
-                    input.style.border =  '0.125rem solid red';
-                    let alret_msg = document.createElement('div');
-                    alret_msg.textContent = '비밀번호를 입력해주세요.';
-                    alret_msg.className = 'alert';
-                    input.parentElement.append(alret_msg);
-                }
-                else{
-                    input.style.border =  '0.125rem solid red';
-                    input.nextElementSibling.textContent='비밀번호를 입력해주세요.';
-                }
+                make_alret_msg(input,'비밀번호를 입력해주세요.');
+
             }
             else if(!pw_check.test(input.value)){
-                // if(!input.nextElementSibling) {
-                    input.style.border =  '0.125rem solid red';
-                    let alret_msg = document.createElement('div');
-                    alret_msg.textContent = '비밀번호를 8자 이상 입력해주세요.';
-                    alret_msg.className = 'alert';
-                    console.log(input.parentElement.parentElement);
-                    input.parentElement.parentElement.append(alret_msg);
-                // }
-                // else{
-                //     input.style.border =  '0.125rem solid red';
-                //     input.nextElementSibling.textContent='비밀번호를 8자 이상 입력해주세요.';
-                // }
+                make_alret_msg(input,'비밀번호를 8자 이상 입력해주세요.');
             }
             else if(pw_check.test(input.value)){
-                if(input.nextElementSibling) {
-                    input.nextElementSibling.remove();
-                    input.style.border =  'none';
+                if(input.closest('.section1_box').querySelector('.alert')) {
+                    input.closest('.section1_box').querySelector('.alert').remove();
                 }
+                input.style.border =  'none';
             }
         }
 
 
     })
 })
+
+
+
+// function checkinput(){
+//     let check =true;
+//     inputbox.forEach(input => {
+//         if(input.value === ''){
+//             check=false
+//         }
+//     });
+//     if(check === true){
+//         button.style.backgroundColor ='#3692FF';
+//     }
+//     else{
+//         button.style.backgroundColor ='#9CA3AF';
+//     }
+// }
+
+// inputbox.forEach(input=>{
+//     input.addEventListener('input',checkinput);
+// });
+//
\ No newline at end of file

From ebfd6a0a9ef146d466216622236ce04cf1ebd9db Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Mon, 11 Nov 2024 10:33:19 +0900
Subject: [PATCH 3/8] edit check_input fuction

---
 project/login.js | 80 ++++++++++++++++++++++++++++--------------------
 1 file changed, 46 insertions(+), 34 deletions(-)

diff --git a/project/login.js b/project/login.js
index 6f586e3..7186d07 100644
--- a/project/login.js
+++ b/project/login.js
@@ -17,13 +17,15 @@ icons.forEach(icon => {
 });
 
 
-// 버튼 색깔 활성화
+// 변수들
 let button = document.querySelector('#section1_button');
 let inputbox = document.querySelectorAll('#section1 input');
-const email_check =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
-const pw_check=/^.{8,}/;
+const email_pattern =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
+const pw_pattern=/^.{8,}/;
+let email_check =false;
+let pw_check =false;
 
-let make_alret_msg = (input,text)=>{
+const make_alret_msg = (input,text)=>{
     let box = input.closest('.section1_box')
     if(!box.querySelector('.alert')){
         input.style.border =  '0.125rem solid red';
@@ -31,6 +33,7 @@ let make_alret_msg = (input,text)=>{
         alert_msg.textContent = text;
         alert_msg.className = 'alert';
         box.append(alert_msg);
+        
     }
     else{
         input.style.border =  '0.125rem solid red';
@@ -39,21 +42,17 @@ let make_alret_msg = (input,text)=>{
 }
 
 
-//로그인 버튼 checkout 됬을때
+//입력 값이 올바른지 체크
 inputbox.forEach(input=>{
-    input.addEventListener('focus',()=>{
-        input.style.border =  '0.125rem solid #3692FF';
-    });
     input.addEventListener('blur',function(){
-        console.log(input.id);
         if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
             if(input.value===''){ // 아무것도 입력 안하면
                 make_alret_msg(input,'이메일을 입력해주세요.');
             }
-            else if(!email_check.test(input.value)){
+            else if(!email_pattern.test(input.value)){
                 make_alret_msg(input,'잘못된 이메일 형식입니다.');
             }
-            else if(email_check.test(input.value)){
+            else if(email_pattern.test(input.value)){
                 if(input.parentElement.querySelector('.alert')) {
                     input.parentElement.querySelector('.alert').remove();
                 }
@@ -66,39 +65,52 @@ inputbox.forEach(input=>{
                 make_alret_msg(input,'비밀번호를 입력해주세요.');
 
             }
-            else if(!pw_check.test(input.value)){
+            else if(!pw_pattern.test(input.value)){
                 make_alret_msg(input,'비밀번호를 8자 이상 입력해주세요.');
             }
-            else if(pw_check.test(input.value)){
+            else if(pw_pattern.test(input.value)){
                 if(input.closest('.section1_box').querySelector('.alert')) {
                     input.closest('.section1_box').querySelector('.alert').remove();
                 }
                 input.style.border =  'none';
             }
         }
-
-
     })
 })
 
+const check_input= () =>{
+    
+    if(pw_check === true && email_check === true){
+        button.style.backgroundColor ='#3692FF';
+    }
+    else{
+        button.style.backgroundColor ='#9CA3AF';
+    }
+}
 
+inputbox.forEach(input=>{
+    input.addEventListener('input',()=>{
+        if(input.id === "section1_emailbox"){
+            if(email_pattern.test(input.value)){
+                email_check=true;
+            }
+            else{
+                email_check=false;
+            }
+        }
+        
+        else if(input.id === "section1_pwbox"){
+            if(pw_pattern.test(input.value)){
+                pw_check = true;
+            }
+            else{
+                pw_check = false;
+            }
+        }
+    })
+    input.addEventListener('focus',()=>{
+        input.style.border =  '0.125rem solid #3692FF';
+    });
 
-// function checkinput(){
-//     let check =true;
-//     inputbox.forEach(input => {
-//         if(input.value === ''){
-//             check=false
-//         }
-//     });
-//     if(check === true){
-//         button.style.backgroundColor ='#3692FF';
-//     }
-//     else{
-//         button.style.backgroundColor ='#9CA3AF';
-//     }
-// }
-
-// inputbox.forEach(input=>{
-//     input.addEventListener('input',checkinput);
-// });
-//
\ No newline at end of file
+    input.addEventListener('input',check_input);
+});

From b0668560fb374748b45f59f10cc62e23aa9c23d1 Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Mon, 11 Nov 2024 14:36:06 +0900
Subject: [PATCH 4/8] add button activate function

---
 project/login.html |  2 +-
 project/login.js   | 40 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/project/login.html b/project/login.html
index d856286..19a92bd 100644
--- a/project/login.html
+++ b/project/login.html
@@ -21,7 +21,7 @@
                         <img src="img/btn_visibility_off.png" class="icon_eyes">
                     </div>
                 </label>
-                <button id="section1_button">로그인</button>
+                <button type="button" id="section1_button" disabled>로그인</button>
                 
                 <div id="section1_social">
                     <div id="section1_socialinner">
diff --git a/project/login.js b/project/login.js
index 7186d07..3be56b6 100644
--- a/project/login.js
+++ b/project/login.js
@@ -1,3 +1,13 @@
+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!" },
+]
+
+
 // 비밀번호 암호화 해제/설정 버튼
 let icons = document.querySelectorAll('.icon_eyes');
 icons.forEach(icon => {
@@ -22,8 +32,14 @@ let button = document.querySelector('#section1_button');
 let inputbox = document.querySelectorAll('#section1 input');
 const email_pattern =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
 const pw_pattern=/^.{8,}/;
-let email_check =false;
-let pw_check =false;
+let email_check =false;//형식이 올바른지 확인
+let pw_check =false;//형식이 올바른지 확인
+
+
+
+
+
+
 
 const make_alret_msg = (input,text)=>{
     let box = input.closest('.section1_box')
@@ -82,17 +98,21 @@ const check_input= () =>{
     
     if(pw_check === true && email_check === true){
         button.style.backgroundColor ='#3692FF';
+        button.disabled = false;
     }
     else{
         button.style.backgroundColor ='#9CA3AF';
+        button.disabled = true;
     }
 }
 
 inputbox.forEach(input=>{
     input.addEventListener('input',()=>{
+        console.log(input.value);
         if(input.id === "section1_emailbox"){
             if(email_pattern.test(input.value)){
                 email_check=true;
+                // if(input.value)
             }
             else{
                 email_check=false;
@@ -113,4 +133,20 @@ inputbox.forEach(input=>{
     });
 
     input.addEventListener('input',check_input);
+
+});
+
+button.addEventListener('click',()=>{
+    const email_input = document.querySelector('#section1_emailbox').value;
+    const pw_input = document.querySelector('#section1_pwbox').value;
+    const user_exist = USER_DATA.some(user => user.email === email_input && user.password === pw_input);
+    if(pw_check === true && email_check === true ){
+        if(!user_exist){ // 존재 안하면?
+            alert("비밀번호가 일치하지 않습니다.")
+        }
+        else{
+            location.href = 'items.html';
+        }
+    }
 });
+

From 8455fd47267d516b32a661d667b69c9c8e89c5d2 Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Mon, 11 Nov 2024 15:15:14 +0900
Subject: [PATCH 5/8] add signup function

---
 project/signup.html |   4 +-
 project/signup.js   | 172 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 project/signup.js

diff --git a/project/signup.html b/project/signup.html
index c67a234..6b14027 100644
--- a/project/signup.html
+++ b/project/signup.html
@@ -30,7 +30,7 @@
                         <img src="img/btn_visibility_off.png" class="icon_eyes">
                     </div>
                 </label>
-                <button id="section1_button">회원가입</button>
+                <button type="button" id="section1_button">회원가입</button>
                 
                 <div id="section1_social">
                     <div id="section1_socialinner">
@@ -50,6 +50,6 @@
                 </div>
             </form>
         </div>
-        <script src="login.js"></script>
+        <script src="signup.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/project/signup.js b/project/signup.js
new file mode 100644
index 0000000..622c619
--- /dev/null
+++ b/project/signup.js
@@ -0,0 +1,172 @@
+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!" },
+]
+
+
+// 비밀번호 암호화 해제/설정 버튼
+let icons = document.querySelectorAll('.icon_eyes');
+icons.forEach(icon => {
+    icon.addEventListener('click',function () { 
+        const input = icon.previousElementSibling;
+        let type = input.getAttribute('type');
+        if(type === 'password'){
+            type ='text';
+            icon.setAttribute('src','img/btn_visibility_on.png')
+        }
+        else{
+            type='password';
+            icon.setAttribute('src','img/btn_visibility_off.png')
+        }
+        input.setAttribute('type',type);
+    })
+});
+
+
+// 변수들
+let button = document.querySelector('#section1_button');
+let inputbox = document.querySelectorAll('#section1 input');
+const email_pattern =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
+const pw_pattern=/^.{8,}/;
+let email_check =false;//형식이 올바른지 확인
+let pw_check =false;//형식이 올바른지 확인
+let pw_same_check = false;
+
+
+
+
+
+
+const make_alret_msg = (input,text)=>{
+    let box = input.closest('.section1_box')
+    if(!box.querySelector('.alert')){
+        input.style.border =  '0.125rem solid red';
+        let alert_msg = document.createElement('div');
+        alert_msg.textContent = text;
+        alert_msg.className = 'alert';
+        box.append(alert_msg);
+        
+    }
+    else{
+        input.style.border =  '0.125rem solid red';
+        box.querySelector('.alert').textContent = text;
+    }
+}
+
+
+//입력 값이 올바른지 체크
+inputbox.forEach(input=>{
+    input.addEventListener('blur',function(){
+        if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
+            if(input.value===''){ // 아무것도 입력 안하면
+                make_alret_msg(input,'이메일을 입력해주세요.');
+            }
+            else if(!email_pattern.test(input.value)){
+                make_alret_msg(input,'잘못된 이메일 형식입니다.');
+            }
+            else if(email_pattern.test(input.value)){
+                if(input.parentElement.querySelector('.alert')) {
+                    input.parentElement.querySelector('.alert').remove();
+                }
+                input.style.border =  'none';
+            }
+        }
+        
+        else if(input.id === "section1_pwbox"){// 이메일인지 비밀번호인지 확인 -> 비밀번호면
+            if(input.value===''){ // 아무것도 입력 안하면
+                make_alret_msg(input,'비밀번호를 입력해주세요.');
+
+            }
+            else if(!pw_pattern.test(input.value)){
+                make_alret_msg(input,'비밀번호를 8자 이상 입력해주세요.');
+            }
+            else if(pw_pattern.test(input.value)){
+                if(input.closest('.section1_box').querySelector('.alert')) {
+                    input.closest('.section1_box').querySelector('.alert').remove();
+                }
+                input.style.border =  'none';
+            }
+        }
+        else if(input.id === "section1_pwcheckbox"){// 비밀번호 확인
+            const pw_input = document.querySelector('#section1_pwbox').value;
+            if(pw_input !== input.value){
+                make_alret_msg(input,'비밀번호가 일치하지 않습니다.');
+            }
+            else{
+                if(input.closest('.section1_box').querySelector('.alert')) {
+                    input.closest('.section1_box').querySelector('.alert').remove();
+                }
+                input.style.border =  'none';
+            }
+        }
+    })
+})
+
+const check_input = () =>{
+    
+    if(pw_check === true && email_check === true && pw_same_check === true){
+        button.style.backgroundColor ='#3692FF';
+        button.disabled = false;
+    }
+    else{
+        button.style.backgroundColor ='#9CA3AF';
+        button.disabled = true;
+    }
+}
+
+inputbox.forEach(input=>{
+    input.addEventListener('input',()=>{
+        console.log(input.value);
+        if(input.id === "section1_emailbox"){
+            if(email_pattern.test(input.value)){
+                email_check=true;
+            }
+            else{
+                email_check=false;
+            }
+        }
+        
+        else if(input.id === "section1_pwbox"){
+            if(pw_pattern.test(input.value)){
+                pw_check = true;
+            }
+            else{
+                pw_check = false;
+            }
+        }
+        else if(input.id === "section1_pwcheckbox"){
+            const pw_input = document.querySelector('#section1_pwbox').value;
+            if(input.value === pw_input){
+                pw_same_check = true;
+            }
+            else{
+                pw_same_check = false;
+            }
+        }
+    })
+    input.addEventListener('focus',()=>{
+        input.style.border =  '0.125rem solid #3692FF';
+    });
+
+    input.addEventListener('input',check_input);
+
+});
+
+button.addEventListener('click',()=>{
+    const email_input = document.querySelector('#section1_emailbox').value;
+    const pw_input = document.querySelector('#section1_pwbox').value;
+    const user_exist = USER_DATA.some(user => user.email === email_input);
+    if(pw_check === true && email_check === true && pw_same_check === true){
+        if(!user_exist){ // 존재 안하면?
+            location.href = 'login.html';
+        }
+        else{
+            alert("사용 중인 이메일입니다.")
+        }
+    }
+});
+

From 64fe2c038bfaf3f96b0e0b29be187a43780c7599 Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Mon, 11 Nov 2024 15:16:05 +0900
Subject: [PATCH 6/8] refactoring

---
 project/signup.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/project/signup.js b/project/signup.js
index 622c619..bdad51b 100644
--- a/project/signup.js
+++ b/project/signup.js
@@ -158,7 +158,6 @@ inputbox.forEach(input=>{
 
 button.addEventListener('click',()=>{
     const email_input = document.querySelector('#section1_emailbox').value;
-    const pw_input = document.querySelector('#section1_pwbox').value;
     const user_exist = USER_DATA.some(user => user.email === email_input);
     if(pw_check === true && email_check === true && pw_same_check === true){
         if(!user_exist){ // 존재 안하면?

From 030f9bd9606bfcc09410cd74b5cd075b3dac4fad Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Tue, 12 Nov 2024 16:11:51 +0900
Subject: [PATCH 7/8] add error msg modal in login

---
 project/login.html      |  8 +++++++
 project/login.js        | 12 ++++++----
 project/style_login.css | 50 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/project/login.html b/project/login.html
index 19a92bd..8191373 100644
--- a/project/login.html
+++ b/project/login.html
@@ -8,6 +8,14 @@
         <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
     </head>
     <body>
+        <div class="modal hidden">
+            <div class="error_msg">
+                <p>비밀번호가 일치하지 않습니다.</p>
+                <button type="button" id="error_msg_button">확인</button>
+            </div> 
+        </div>
+
+
         <div id="box">
             <a id="section0" href="index.html"></a>
 
diff --git a/project/login.js b/project/login.js
index 3be56b6..55e230a 100644
--- a/project/login.js
+++ b/project/login.js
@@ -34,8 +34,8 @@ const email_pattern =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
 const pw_pattern=/^.{8,}/;
 let email_check =false;//형식이 올바른지 확인
 let pw_check =false;//형식이 올바른지 확인
-
-
+let modal =document.querySelector('.modal');
+let error_button = document.querySelector('#error_msg_button');
 
 
 
@@ -141,8 +141,8 @@ button.addEventListener('click',()=>{
     const pw_input = document.querySelector('#section1_pwbox').value;
     const user_exist = USER_DATA.some(user => user.email === email_input && user.password === pw_input);
     if(pw_check === true && email_check === true ){
-        if(!user_exist){ // 존재 안하면?
-            alert("비밀번호가 일치하지 않습니다.")
+        if(!user_exist){ 
+            modal.classList.remove('hidden');
         }
         else{
             location.href = 'items.html';
@@ -150,3 +150,7 @@ button.addEventListener('click',()=>{
     }
 });
 
+
+error_button.addEventListener('click',()=>{
+    modal.classList.add('hidden');
+})
diff --git a/project/style_login.css b/project/style_login.css
index c349974..fa6bdff 100644
--- a/project/style_login.css
+++ b/project/style_login.css
@@ -10,6 +10,55 @@ body {
     align-items: center;
     font-family: 'Pretendard Variable', sans-serif;
 }
+.modal{
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.error_msg{
+    position: relative;
+    width: 33.75rem;
+    height: 15.625rem;
+    background-color: white;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+}
+.error_msg p{
+    margin: 0;
+    padding-bottom: 40px;
+
+}
+#error_msg_button{
+    position:absolute;
+    width: 7.5rem;
+    height: 3rem;
+    background-color: var(--button-active-color);
+    color: var(--button-text-color);
+    border-radius: 0.5rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-width: 0;
+    right: 20px;
+    bottom: 20px;
+}
+
+.hidden {
+    display: none;
+}
 
 #box {
     display: flex;
@@ -19,6 +68,7 @@ body {
     gap: 2.5rem; /* 40px */
     justify-content: space-between;
     align-items: center;
+    
 }
 
 #section0 {

From db47e361de00e9943381bee009f4a22cb97feb19 Mon Sep 17 00:00:00 2001
From: sungmin <usm0259@kaist.ac.kr>
Date: Tue, 12 Nov 2024 16:22:37 +0900
Subject: [PATCH 8/8] add error msg modal in singup

---
 project/signup.html | 7 +++++++
 project/signup.js   | 8 ++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/project/signup.html b/project/signup.html
index 6b14027..a40d952 100644
--- a/project/signup.html
+++ b/project/signup.html
@@ -8,6 +8,13 @@
         <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
     </head>
     <body>
+        <div class="modal hidden">
+            <div class="error_msg">
+                <p>사용 중인 이메일입니다.</p>
+                <button type="button" id="error_msg_button">확인</button>
+            </div> 
+        </div>
+
         <div id="box">
             <a id="section0" href="index.html"></a>
 
diff --git a/project/signup.js b/project/signup.js
index bdad51b..db6a365 100644
--- a/project/signup.js
+++ b/project/signup.js
@@ -35,7 +35,8 @@ const pw_pattern=/^.{8,}/;
 let email_check =false;//형식이 올바른지 확인
 let pw_check =false;//형식이 올바른지 확인
 let pw_same_check = false;
-
+let modal =document.querySelector('.modal');
+let error_button = document.querySelector('#error_msg_button');
 
 
 
@@ -164,8 +165,11 @@ button.addEventListener('click',()=>{
             location.href = 'login.html';
         }
         else{
-            alert("사용 중인 이메일입니다.")
+            modal.classList.remove('hidden');
         }
     }
 });
 
+error_button.addEventListener('click',()=>{
+    modal.classList.add('hidden');
+})
\ No newline at end of file