[문주영] Sprint4

login.html

@@ -15,13 +15,13 @@
         </a>
         <form>
             <label for="email">이메일</label>
-            <input id="email" name="email" type="email">
+            <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
             <label for="password">비밀번호</label>
             <div class="password-container">
-                <input id="password" name="password" type="password">
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
                 <button class="eye-btn" type="button"><img src="images/ic_eye_invisible.svg"></button>
             </div>
-            <button class="complete-btn" type="submit">로그인</button>
+            <button class="complete-btn" type="button" onclick="location.href='/items.html'" disabled>로그인</button>
         </form>
         <div class="simple-login">
             간편 로그인하기
@@ -38,5 +38,6 @@
             판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a>
         </div>
     </main>
+    <script src="scripts/auth.js"></script>
 </body>
 </html>

scripts/auth.js

@@ -0,0 +1,106 @@
+const form = document.querySelector("form");
+const inputs = document.querySelectorAll("form input");
+const button = document.querySelector("button.complete-btn");
+
+const email = document.querySelector("input#email");
+const nickname = document.querySelector("input#nickname");
+const password = document.querySelector("input#password");
+const passwordCheck = document.querySelector("input#password-check");
+
+const passwordContainers = document.querySelectorAll(".password-container");
+
+function wrongInput(node, text){
+    node.classList.add("wrong");
+    node.classList.remove("correct");
+
+    let wrongMessage;
+    if (node.nextElementSibling?.tagName === 'DIV'){
+        wrongMessage = node.nextElementSibling;
+    } else {
+        wrongMessage = document.createElement('div');
+        wrongMessage.setAttribute("class","wrong-message");
+    }
+    wrongMessage.textContent = text;
+    node.after(wrongMessage);
+}
+
+function correctInput(node) {
+    node.classList.add("correct");
+    node.classList.remove("wrong");
+
+    if (node.nextElementSibling?.tagName === 'DIV'){
+        node.nextElementSibling.remove();
+    }
+}
+
+function passwordMatch() {
+    if (password.value !== passwordCheck.value) {
+        wrongInput(passwordCheck, "비밀번호가 일치하지 않습니다.");
+    } else {
+        correctInput(passwordCheck);
+    }
+}
+
+email.addEventListener("focusout", (e) => {
+    if (!e.target.value) {
+        wrongInput(e.target, "이메일을 입력해주세요.");
+    } else if (!e.target.validity.valid) {
+        wrongInput(e.target, "잘못된 이메일 형식입니다.");
+    } else {
+        correctInput(e.target);
+    }
+});
+
+nickname?.addEventListener("focusout", (e) => {
+    if (!e.target.value) {
+        wrongInput(e.target, "닉네임을 입력해주세요.");
+    } else {
+        correctInput(e.target);
+    }
+});
+
+password.addEventListener("focusout", (e) => {
+    if (!e.target.value) {
+        wrongInput(e.target, "비밀번호를 입력해주세요.");
+    } else if (e.target.value.length < 8) {
+        wrongInput(e.target, "비밀번호를 8자 이상 입력해주세요.");
+    } else {
+        correctInput(e.target);
+    }
+});
+
+if (passwordCheck) {
+    password.addEventListener("change", () => {
+        if (passwordCheck.value) {
+            passwordMatch();
+        }
+    });
+    passwordCheck.addEventListener("input", () => {
+        if (password.value) {
+            passwordMatch();
+        }
+    });
+}
+
+form.addEventListener("focusout", () => {
+    for (let input of inputs) {
+        if (!input.classList.contains("correct")){
+            return;
+        }
+    }
+    button.removeAttribute("disabled");
+});
+
+passwordContainers.forEach( (node) => {
+    node.addEventListener("click", (e) => {
+        if (e.target.tagName === "IMG") {
+            if (e.currentTarget.firstElementChild.getAttribute("type") === "password"){
+                e.currentTarget.firstElementChild.setAttribute("type", "text");
+                e.target.setAttribute("src", "images/ic_eye_visible.svg");
+            } else {
+                e.currentTarget.firstElementChild.setAttribute("type", "password");
+                e.target.setAttribute("src", "images/ic_eye_invisible.svg");
+            }
+        }
+    });
+} )

signup.html

@@ -15,20 +15,20 @@
         </a>
         <form>
             <label for="email">이메일</label>
-            <input id="email" name="email" type="email">
+            <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
             <label for="nickname">닉네임</label>
-            <input id="nickname" name="nickname">
+            <input id="nickname" name="nickname" placeholder="닉네임을 입력해주세요">
             <label for="password">비밀번호</label>
             <div class="password-container">
-                <input id="password" name="password" type="password">
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
                 <button class="eye-btn" type="button"><img src="images/ic_eye_invisible.svg"></button>
             </div>
             <label for="password-check">비밀번호 확인</label>
             <div class="password-container">
-                <input id="password-check" name="password-check" type="password">
+                <input id="password-check" name="password-check" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
                 <button class="eye-btn" type="button"><img src="images/ic_eye_invisible.svg"></button>
             </div>
-            <button class="complete-btn" type="submit">회원가입</button>
+            <button class="complete-btn" type="button" onclick="location.href='/login.html'" disabled>회원가입</button>
         </form>
         <div class="simple-login">
             간편 로그인하기
@@ -45,5 +45,6 @@
             이미 회원이신가요? <a href="/login.html">로그인</a>
         </div>
     </main>
+    <script src="scripts/auth.js"></script>
 </body>
 </html>

styles/auth.css

@@ -37,7 +37,7 @@ form label {
 
 form input {
     width: 100%;
-    padding: 16px 24px 14px;
+    padding: 15px 24px ;
     margin-bottom: 24px;
     border-radius: 12px;
     background-color: var(--gray100);
@@ -46,6 +46,27 @@ form input {
     line-height: 26px;
 }
 
+form input.wrong {
+    margin-bottom: 8px;
+    border: solid 1px var(--red);
+}
+
+form input.correct {
+    border: solid 1px var(--blue);
+}
+
+form input::placeholder {
+    color: var(--gray400);
+}
+
+form .wrong-message {
+    margin: 8px 16px 18px;
+    color: var(--red);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+}
+
 form .password-container {
     position: relative;
     justify-content: center;
@@ -56,7 +77,6 @@ form .password-container .eye-btn {
     padding: 0;
     position: absolute;
     top: 16px;
-    bottom: 16px;
     right: 24px;
 }
 
@@ -75,6 +95,10 @@ form .complete-btn {
     line-height: 32px;
 }
 
+form .complete-btn:disabled {
+    background-color: var(--gray400);
+}
+
 .simple-login {
     width: 100%;
     padding: 16px 23px;

styles/color.css

@@ -1,12 +1,13 @@
 :root {
     --blue: #3692FF;
-    --gray900: #111827 ;
-    --gray800: #1F2937 ;
-    --gray700: #374151 ;
-    --gray600: #4B5563 ;
-    --gray500: #6B7280 ;
-    --gray400: #9CA3AF ;
-    --gray200: #E5E7EB ;
-    --gray100: #F3F4F6 ;
-    --gray50: #F9FAFB ;
+    --red: #F74747;
+    --gray900: #111827;
+    --gray800: #1F2937;
+    --gray700: #374151;
+    --gray600: #4B5563;
+    --gray500: #6B7280;
+    --gray400: #9CA3AF;
+    --gray200: #E5E7EB;
+    --gray100: #F3F4F6;
+    --gray50: #F9FAFB;
 }