From 95835db7e7c2a07d20e5298ffdb1983618411deb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B0=80=ED=9D=AC?= <bn8245@gmail.com>
Date: Sat, 31 Aug 2024 17:34:12 +0900
Subject: [PATCH 1/5] =?UTF-8?q?login.js=20=ED=8C=8C=EC=9D=BC=20=20?=
 =?UTF-8?q?=EB=A7=8C=EB=93=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 login.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 login.js

diff --git a/login.js b/login.js
new file mode 100644
index 000000000..e69de29bb

From 6f41ed9d60fd6f217274a8d867a63ac1bde6b21c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B0=80=ED=9D=AC?= <bn8245@gmail.com>
Date: Sat, 31 Aug 2024 22:21:09 +0900
Subject: [PATCH 2/5] =?UTF-8?q?js=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 login.css  | 16 +++++++++++
 login.html |  5 +++-
 login.js   | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+), 1 deletion(-)

diff --git a/login.css b/login.css
index 7ca40e3a1..74f79b2ce 100644
--- a/login.css
+++ b/login.css
@@ -43,6 +43,22 @@ body{
     outline-color: #3692FF;;
 }
 
+.error {
+    border:1px solid red;
+}
+
+.error-message-pw {
+    outline-color: red;
+    color: red;
+    display: none;
+}
+
+.error-message {
+    outline-color: red;
+    color: red;
+    display: none;
+}
+
 .input::placeholder{
     color: #9CA3AF;
     font-weight: 400;
diff --git a/login.html b/login.html
index 8f493b1c1..fd6973dcb 100644
--- a/login.html
+++ b/login.html
@@ -29,12 +29,14 @@
       <form class="email-box">
         <label class="email-label" for ="email">이메일</label>
         <input class="input" placeholder="이메일을 입력해주세요" id="email">
+        <div class="error-message"></div>
       </form>
       <form class="pw-box">
         <label class="pw-label" for ="pw">비밀번호</label>
         <input class="input" placeholder="비밀번호를 입력해주세요" type="password" id="pw">
+        <div class='error-message-pw'></div>
       </form>
-      <button class="login-btn" onclick="location.href='/login'">로그인</button>
+      <button id="login" class="login-btn" onclick="location.href='/items'">로그인</button>
       <article class="easy-login-box">
         <div class="easy-content">
           <span>간편 로그인하기</span>
@@ -49,5 +51,6 @@
         <a href="signup.html">회원가입</a>
       </section>
     </main>
+    <script src="login.js"></script>
   </body>
 </html>
diff --git a/login.js b/login.js
index e69de29bb..6033cd473 100644
--- a/login.js
+++ b/login.js
@@ -0,0 +1,82 @@
+const emailInputElement = document.querySelector('#email');
+const pwInputElement = document.querySelector('#pw');
+const errorMessage = document.querySelector('.error-message');
+const pwErrorMessage = document.querySelector('.error-message-pw');
+
+function emailForm(e) {
+  console.log("focus out 발생")
+  // 이메일 input이 비어있음
+  if (emailInputElement.value === '') {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent ="이메일을 입력해주세요."
+    errorMessage.style.display = 'block';
+  } else if (!(emailInputElement.value.includes("@")
+  && emailInputElement.value.includes("."))) {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent ="잘못된 이메일 형식입니다."
+    errorMessage.style.display = 'block';
+  }else{
+    emailInputElement.classList.remove('error');
+    errorMessage.style.display = 'none';
+  }
+}
+
+function pwForm(e) {
+  console.log("focus out 발생")
+  // 이메일 input이 비어있음
+  if (pwInputElement.value === '') {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  } else if (pwInputElement.value.length < 8) {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 8자 이상 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  }else{
+    pwInputElement.classList.remove('error');
+    pwErrorMessage.style.display = 'none';
+  }
+}
+
+function removeMessage(e){
+  if(e.target.id === "email"){
+    errorMessage.style.display = 'none';  
+  }else{
+    pwErrorMessage.style.display = 'none';
+  }
+}
+
+
+emailInputElement.addEventListener('blur', emailForm)
+emailInputElement.addEventListener('focus', removeMessage)
+
+pwInputElement.addEventListener('blur', pwForm)
+pwInputElement.addEventListener('focus', removeMessage)
+
+// ----------------------------------------------------------
+
+const loginElement = document.querySelector("#login")
+
+function activateLogin(e){
+  if(emailInputElement.classList.contains('error') 
+    || pwInputElement.classList.contains('error')){
+      //드모르간 극혐
+      //deactivate
+      loginElement.style.backgroundColor = "#9CA3AF"
+      
+  } else if(emailInputElement.value === '' || pwInputElement.value === ''){
+      //deactivate
+      loginElement.style.backgroundColor = "#9CA3AF"
+  }else{
+    //activate
+      loginElement.style.backgroundColor = "#3692FF"
+  }
+}
+
+pwInputElement.addEventListener('blur', activateLogin)
+emailInputElement.addEventListener('blur', activateLogin)
+
+
+
+// 로그인 버튼을 활성화시키는 함수 
+//  ( if-else 써서, 둘다 충족이 되는거면 로그인 버튼 활성화,아니면? 비활성화)
\ No newline at end of file

From d7731f181a399e7dd8dc2ff231586a82600d59e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B0=80=ED=9D=AC?= <bn8245@gmail.com>
Date: Sun, 1 Sep 2024 13:53:33 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 login.js  | 8 --------
 signup.js | 0
 2 files changed, 8 deletions(-)
 create mode 100644 signup.js

diff --git a/login.js b/login.js
index 6033cd473..23567fe3e 100644
--- a/login.js
+++ b/login.js
@@ -4,8 +4,6 @@ const errorMessage = document.querySelector('.error-message');
 const pwErrorMessage = document.querySelector('.error-message-pw');
 
 function emailForm(e) {
-  console.log("focus out 발생")
-  // 이메일 input이 비어있음
   if (emailInputElement.value === '') {
     emailInputElement.classList.add('error');
     errorMessage.textContent ="이메일을 입력해주세요."
@@ -60,15 +58,11 @@ const loginElement = document.querySelector("#login")
 function activateLogin(e){
   if(emailInputElement.classList.contains('error') 
     || pwInputElement.classList.contains('error')){
-      //드모르간 극혐
-      //deactivate
       loginElement.style.backgroundColor = "#9CA3AF"
       
   } else if(emailInputElement.value === '' || pwInputElement.value === ''){
-      //deactivate
       loginElement.style.backgroundColor = "#9CA3AF"
   }else{
-    //activate
       loginElement.style.backgroundColor = "#3692FF"
   }
 }
@@ -78,5 +72,3 @@ emailInputElement.addEventListener('blur', activateLogin)
 
 
 
-// 로그인 버튼을 활성화시키는 함수 
-//  ( if-else 써서, 둘다 충족이 되는거면 로그인 버튼 활성화,아니면? 비활성화)
\ No newline at end of file
diff --git a/signup.js b/signup.js
new file mode 100644
index 000000000..e69de29bb

From 8a89ec4bbaff2981c950ed8b5c96997aa3a84b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B0=80=ED=9D=AC?= <bn8245@gmail.com>
Date: Sun, 1 Sep 2024 21:01:14 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=8F=84=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 login.css   |  10 ++--
 login.js    |   2 -
 signup.html |  15 ++++--
 signup.js   | 131 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 145 insertions(+), 13 deletions(-)

diff --git a/login.css b/login.css
index 74f79b2ce..526de69be 100644
--- a/login.css
+++ b/login.css
@@ -47,13 +47,11 @@ body{
     border:1px solid red;
 }
 
-.error-message-pw {
-    outline-color: red;
-    color: red;
-    display: none;
-}
 
-.error-message {
+.error-message,
+.error-message-pw,
+.error-message-nick,
+.error-message-pwcheck {
     outline-color: red;
     color: red;
     display: none;
diff --git a/login.js b/login.js
index 23567fe3e..385f3942d 100644
--- a/login.js
+++ b/login.js
@@ -20,8 +20,6 @@ function emailForm(e) {
 }
 
 function pwForm(e) {
-  console.log("focus out 발생")
-  // 이메일 input이 비어있음
   if (pwInputElement.value === '') {
     pwInputElement.classList.add('error');
     pwErrorMessage.textContent ="비밀번호를 입력해주세요."
diff --git a/signup.html b/signup.html
index b8e391015..a4860a7ff 100644
--- a/signup.html
+++ b/signup.html
@@ -28,21 +28,25 @@
     <main class="container">
       <form class="email-box">
         <label class="email-label">이메일</label>
-        <input class="input" placeholder="이메일을 입력해주세요">
+        <input class="input" id="email" placeholder="이메일을 입력해주세요">
+        <div class="error-message"></div>
       </form>
       <form class="nickname-box">
         <label class="nickname-label">닉네임</label>
-        <input class="input" placeholder="닉네임을 입력해주세요">
+        <input class="input" id="nickname" placeholder="닉네임을 입력해주세요">
+        <div class="error-message-nick"></div>
       </form>
       <form class="pw-box">
         <label class="pw-label">비밀번호</label>
-        <input class="input" placeholder="비밀번호를 입력해주세요"  type="password">
+        <input class="input" id="pw" placeholder="비밀번호를 입력해주세요"  type="password">
+        <div class="error-message-pw"></div>
       </form>
       <form class="pw-repeat-box">
         <label class="pw-repeat-label">비밀번호 확인</label>
-        <input class="input" placeholder="비밀번호를 다시 한 번 입력해주세요"  type="password">
+        <input class="input" id="pwcheck" placeholder="비밀번호를 다시 한 번 입력해주세요"  type="password">
+        <div class="error-message-pwcheck"></div>
       </form>
-      <button class="login-btn" onclick="location.href='/login'">회원가입</button>
+      <button class="login-btn">회원가입</button>
       <article class="easy-login-box">
         <div class="easy-content">
           <span>간편 로그인하기</span>
@@ -57,5 +61,6 @@
         <a href="login.html">로그인</a>
       </section>
     </main>
+  <script src="signup.js"></script>
   </body>
 </html>
diff --git a/signup.js b/signup.js
index e69de29bb..2aeec84f0 100644
--- a/signup.js
+++ b/signup.js
@@ -0,0 +1,131 @@
+let signupValid = false
+
+//ID 선택하기
+const emailInputElement = document.getElementById('email');
+const nickInputElement = document.getElementById('nickname');
+const pwInputElement = document.getElementById('pw');
+const pwCheckInputElement = document.getElementById('pwcheck');
+const errorMessage = document.querySelector('.error-message');
+const nickErrorMessage = document.querySelector('.error-message-nick');
+const pwErrorMessage = document.querySelector('.error-message-pw');
+const pwCheckErrorMessage = document.querySelector('.error-message-pwcheck');
+const signupElement = document.querySelector('.login-btn')
+
+
+
+
+
+function emailForm(e) {
+  if (emailInputElement.value === '') {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent = "이메일을 입력해주세요"
+    errorMessage.style.display = 'block';
+  } else if (!(emailInputElement.value.includes("@")
+  && emailInputElement.value.includes("."))) {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent ="잘못된 이메일 형식입니다."
+    errorMessage.style.display = 'block';
+  }else{
+    emailInputElement.classList.remove('error');
+    errorMessage.style.display = 'none';
+  };
+};
+
+function nickForm(e) {
+  if (nickInputElement.value === '') {
+    nickInputElement.classList.add('error');
+    nickErrorMessage.textContent = "닉네임을 입력해주세요."
+    nickErrorMessage.style.display = "block";
+  } else {
+    nickInputElement.classList.remove('error');
+    nickErrorMessage.style.display = 'none';
+  };
+};
+
+function pwForm(e) {
+  if (pwInputElement.value === '') {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  } else if (pwInputElement.value.length < 8) {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 8자 이상 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  }else{
+    pwInputElement.classList.remove('error');
+    pwErrorMessage.style.display = 'none';
+  };
+};
+
+function removeMessage(e){
+  if(e.target.id === "email"){
+    errorMessage.style.display = 'none';  
+  } else if(e.target.id === "nickname"){
+    nickErrorMessage.style.display = 'none';
+  } else if(e.target.id === "pw"){
+    pwErrorMessage.style.display = 'none';
+  } else{
+    pwCheckErrorMessage.style.display = 'none';
+  };
+};
+
+function pwValid(e) {
+  if (!(pwInputElement.value === pwCheckInputElement.value)) {
+    pwCheckInputElement.classList.add('error');
+    pwCheckErrorMessage.textContent = "비밀번호가 일치하지 않습니다.."
+    pwCheckErrorMessage.style.display = 'block';
+  }else{
+    pwCheckInputElement.classList.remove('error');
+    pwCheckErrorMessage.style.display = 'none';
+  };
+}
+
+function activateSignup(e){
+  if(
+    emailInputElement.classList.contains('error') 
+    || nickInputElement.classList.contains('error')
+    || pwInputElement.classList.contains('error')
+    || pwCheckInputElement.classList.contains('error')
+  ) {
+    signupElement.style.backgroundColor = "#9CA3AF"
+  } else if (
+    emailInputElement.value ==='' 
+    || nickInputElement.value ===''
+    || pwInputElement.value ===''
+    || pwCheckInputElement.value === ''
+  ) {
+    signupElement.style.backgroundColor = "#9CA3AF"
+  } else {
+    signupElement.style.backgroundColor = "#3692FF"
+    signupValid = true
+  }
+}
+
+
+
+emailInputElement.addEventListener('blur', emailForm);
+nickInputElement.addEventListener('blur', nickForm);
+pwInputElement.addEventListener('blur', pwForm);
+pwCheckInputElement.addEventListener('blur', pwValid);
+
+emailInputElement.addEventListener('focus',removeMessage)
+nickInputElement.addEventListener('focus',removeMessage)
+pwInputElement.addEventListener('focus',removeMessage)
+pwCheckInputElement.addEventListener('focus',removeMessage)
+
+
+emailInputElement.addEventListener('blur', activateSignup)
+nickInputElement.addEventListener('blur', activateSignup)
+pwInputElement.addEventListener('blur', activateSignup)
+pwCheckInputElement.addEventListener('blur', activateSignup)
+
+pwInputElement.addEventListener('change',pwValid);
+
+
+function signupButton(e){
+  if(signupValid){
+    window.location.href = "/login.html"
+  }
+}
+
+signupElement.addEventListener("click",signupButton)
\ No newline at end of file

From c3c3d711fdb465a6ea9a94a4b4cd07acbca074ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B0=80=ED=9D=AC?= <bn8245@gmail.com>
Date: Sun, 1 Sep 2024 21:03:19 +0900
Subject: [PATCH 5/5] =?UTF-8?q?login=20=EB=A7=81=ED=81=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 signup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/signup.js b/signup.js
index 2aeec84f0..883884ea4 100644
--- a/signup.js
+++ b/signup.js
@@ -124,7 +124,7 @@ pwInputElement.addEventListener('change',pwValid);
 
 function signupButton(e){
   if(signupValid){
-    window.location.href = "/login.html"
+    window.location.href = "/login"
   }
 }