codeit-bootcamp-frontend · Useong0 · Nov 18, 2023 · Nov 19, 2023 · Nov 19, 2023 · Nov 20, 2023
diff --git a/.github/delete-merged-branch-config.yml → ...4/.github/delete-merged-branch-config.yml b/.github/delete-merged-branch-config.yml → ...4/.github/delete-merged-branch-config.yml
diff --git a/.github/pull_request_template.md → week4/.github/pull_request_template.md b/.github/pull_request_template.md → week4/.github/pull_request_template.md
diff --git a/.gitignore → week4/.gitignore b/.gitignore → week4/.gitignore
diff --git a/faq.html → week4/faq.html b/faq.html → week4/faq.html
diff --git a/week4/folder.html b/week4/folder.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>folder</title>
+  </head>
+</html>
diff --git a/images/facebook.svg → week4/images/facebook.svg b/images/facebook.svg → week4/images/facebook.svg
diff --git a/images/hero.png → week4/images/hero.png b/images/hero.png → week4/images/hero.png
diff --git a/images/image1.png → week4/images/image1.png b/images/image1.png → week4/images/image1.png
diff --git a/images/image2.png → week4/images/image2.png b/images/image2.png → week4/images/image2.png
diff --git a/images/image3.png → week4/images/image3.png b/images/image3.png → week4/images/image3.png
diff --git a/images/image4.png → week4/images/image4.png b/images/image4.png → week4/images/image4.png
diff --git a/images/instagram.svg → week4/images/instagram.svg b/images/instagram.svg → week4/images/instagram.svg
diff --git a/images/logo.svg → week4/images/logo.svg b/images/logo.svg → week4/images/logo.svg
diff --git a/images/meta_image.png → week4/images/meta_image.png b/images/meta_image.png → week4/images/meta_image.png
diff --git a/images/sign/eye-off.svg → week4/images/sign/eye-off.svg b/images/sign/eye-off.svg → week4/images/sign/eye-off.svg
diff --git a/week4/images/sign/eye-on.svg b/week4/images/sign/eye-on.svg
diff --git a/images/sign/google.png → week4/images/sign/google.png b/images/sign/google.png → week4/images/sign/google.png
diff --git a/images/sign/icgoogle.png → week4/images/sign/icgoogle.png b/images/sign/icgoogle.png → week4/images/sign/icgoogle.png
diff --git a/images/sign/ickakao.png → week4/images/sign/ickakao.png b/images/sign/ickakao.png → week4/images/sign/ickakao.png
diff --git a/images/sign/kakao.png → week4/images/sign/kakao.png b/images/sign/kakao.png → week4/images/sign/kakao.png
diff --git a/images/twitter.svg → week4/images/twitter.svg b/images/twitter.svg → week4/images/twitter.svg
diff --git a/images/youtube.svg → week4/images/youtube.svg b/images/youtube.svg → week4/images/youtube.svg
diff --git a/index.html → week4/index.html b/index.html → week4/index.html
diff --git a/week4/js/signModule/email_validation.js b/week4/js/signModule/email_validation.js
@@ -0,0 +1,55 @@
+import { printError } from "./print_error.js"; 
+
+const emailInput = document.querySelector('#sign-email');
+const emailForm = emailInput.parentElement;
+
+const emailValidation = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\.\-]{1,10}\.[A-za-z0-9\-]{2,3}$/;
+
+// 비어있는지 체크
+function emailEmptyCheck(e) {
+  if(!emailInput.value) {
+    emailInput.classList.add('error');
+    printError(emailInput, '이메일을 입력해주세요.');
+  } else {
+    if(emailForm.querySelector('.error-message')) {
+      emailForm.lastElementChild.remove();
+    }
+    emailValidationCheck(e);
+  }
+}
+
+// 올바른 이메일인지 체크
+function emailValidationCheck(e) {
+  if(emailValidation.test(emailInput.value)) {
+    emailInput.classList.remove('error');
+    if(emailForm.querySelector('.error-message')) {
+      emailForm.lastElementChild.remove();
+    }
+    if(document.querySelector('title').text === '회원가입') {
+      usingEmail(e);
+    }
+  } else {
+    emailInput.classList.add('error');
+    printError(emailInput, '올바른 이메일 주소가 아닙니다.');
+  }
+}
+
+// 사용중인 이메일인지 체크
+function usingEmail(e) {
+  if(emailInput.value === '[email protected]') {
+    emailInput.classList.add('error');
+    printError(emailInput, '이미 사용 중인 이메일입니다.');
+  } else {
+    if(emailInput.parentElement.querySelector('.error')) {
+      emailInput.classList.remove('error');
+      emailInput.parentElement.lastElementChild.remove();
+    }
+  }
+}
+
+// 이벤트 등록
+function emailCheck(em) {
+  em.addEventListener('focusout', emailEmptyCheck, usingEmail);
+}
+
+export { emailInput, emailCheck, emailEmptyCheck, emailValidation };
diff --git a/week4/js/signModule/eye.js b/week4/js/signModule/eye.js
@@ -0,0 +1,26 @@
+const eyes = document.querySelectorAll('.eye');
+
+function eyeBlink (e) {
+  const eyeClass = e.target.parentElement.classList;
+  const pwdText = e.target.parentElement.parentElement.firstElementChild;
+  console.log('o');
+  if(eyeClass.contains('off')) {
+    e.target.src = '../../images/sign/eye-on.svg';
+    eyeClass.remove('off');
+    eyeClass.add('on');
+    pwdText.type = 'text';
+  } else {
+    e.target.src = '../../images/sign/eye-off.svg';
+    eyeClass.remove('on');
+    eyeClass.add('off');
+    pwdText.type = 'password';
+  }
+}
+
+const eyeEvent = function (eyes) {
+  for(let eye of eyes) {
+    eye.addEventListener('click', eyeBlink);
+  }
+}
+
+export  { eyes, eyeEvent };
diff --git a/week4/js/signModule/print_error.js b/week4/js/signModule/print_error.js
@@ -0,0 +1,13 @@
+function printError(input, message) {
+  if(input.parentElement.querySelector('.error-message')) {
+    input.parentElement.lastElementChild.remove();
+  }
+  if(!input.parentElement.querySelector('.error-message')) {
+    const emailError = document.createElement('p');
+    emailError.classList.add('error-message');
+    emailError.textContent = message;
+    input.parentElement.append(emailError);
+  }
+}
+
+export { printError };
diff --git a/week4/js/signModule/pwd_confirm.js b/week4/js/signModule/pwd_confirm.js
@@ -0,0 +1,29 @@
+import { printError } from "./print_error.js";
+import { pwdInput } from "./pwd_validation.js";
+
+const pwdConfirmInput = document.querySelector('#sign-password-confirm');
+const pwdConfirmForm = pwdConfirmInput.parentElement;
+
+// 비밀번호 확인
+function pwdConfirm(e) {
+  if(!pwdConfirmInput.value) {
+    pwdConfirmInput.classList.add('error');
+    printError(pwdConfirmInput, '비밀번호를 확인해주세요.');
+  } else {
+    if(pwdConfirmInput.value !== pwdInput.value) {
+      pwdConfirmInput.classList.add('error');
+      printError(pwdConfirmInput, '비밀번호가 일치하지 않아요.');
+    } else {
+      pwdConfirmInput.classList.remove('error');
+      if(pwdConfirmForm.querySelector('.error-message')) {
+        pwdConfirmForm.lastElementChild.remove();
+      }
+    }
+  }
+};
+
+function pwdConfirmCheck(e) {
+  pwdConfirmInput.addEventListener('focusout', pwdConfirm);
+};
+
+export { pwdConfirmInput, pwdConfirm, pwdConfirmCheck };
diff --git a/week4/js/signModule/pwd_validation.js b/week4/js/signModule/pwd_validation.js
@@ -0,0 +1,39 @@
+import { printError } from "./print_error.js";
+
+const pwdInput = document.querySelector('#sign-password');
+const pwdForm = pwdInput.parentElement;
+
+const pwdValidation = /^(?=.*\d)(?=^.{8,15}$)(?=.*[a-zA-Z]).*$/;
+
+// 비어있는지 체크
+function pwdEmptyCheck(e) {
+  if(!pwdInput.value) {
+    pwdInput.classList.add('error');
+    printError(pwdInput, '비밀번호를 입력해주세요.');
+  } else if(pwdInput.value) {
+    if(pwdForm.querySelector('.error-message')) {
+      pwdForm.lastElementChild.remove();
+    }
+    pwdValidationCheck(e);
+  }
+}
+
+// 올바른 형식인지 체크
+function pwdValidationCheck(e) {
+  if(pwdValidation.test(pwdInput.value)) {
+    pwdInput.classList.remove('error');
+    if(pwdForm.querySelector('.error-message')) {
+      pwdForm.lastElementChild.remove();
+    }
+  } else {
+    printError(pwdInput, '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.');
+    pwdInput.classList.add('error');
+  }
+}
+
+// 이벤트 등록
+function pwdCheck(pw) {
+  pw.addEventListener('focusout', pwdEmptyCheck);
+}
+
+export { pwdInput, pwdCheck, pwdEmptyCheck, pwdValidation };
diff --git a/week4/js/signin.js b/week4/js/signin.js
@@ -0,0 +1,11 @@
+import { eyes, eyeEvent } from './signModule/eye.js';
+import { emailInput, emailCheck } from './signModule/email_validation.js';
+import { pwdInput, pwdCheck } from './signModule/pwd_validation.js';
+import { btn, btnCheck } from './signin_btn.js';
+
+
+
+eyeEvent(eyes);
+emailCheck(emailInput);
+pwdCheck(pwdInput);
+btnCheck(btn);
diff --git a/week4/js/signin_btn.js b/week4/js/signin_btn.js
@@ -0,0 +1,24 @@
+import { printError } from "./signModule/print_error.js";
+import { emailInput } from "./signModule/email_validation.js";
+import { pwdInput } from "./signModule/pwd_validation.js";
+
+const btn = document.querySelector('.sign-button');
+
+function btnEmptyCheck(e) {
+  e.preventDefault();
+  if(emailInput.value === '[email protected]' && pwdInput.value === 'codeit101') {
+    location.href = "./folder.html";
+  }
+  else {
+      emailInput.classList.add('error');
+      printError(emailInput, '이메일을 확인해주세요.');
+      pwdInput.classList.add('error');
+      printError(pwdInput, '비밀번호를 확인해주세요.');
+  }
+}
+
+function btnCheck(btn) {
+  btn.addEventListener('click', btnEmptyCheck);
+}
+
+export { btn, btnCheck };
diff --git a/week4/js/signup.js b/week4/js/signup.js
@@ -0,0 +1,12 @@
+import { eyes, eyeEvent } from './signModule/eye.js';
+import { emailInput, emailCheck } from './signModule/email_validation.js';
+import { pwdInput, pwdCheck } from './signModule/pwd_validation.js';
+import { pwdConfirmInput, pwdConfirmCheck } from './signModule/pwd_confirm.js';
+import { btn, btnCheck } from './signup_btn.js';
+
+
+emailCheck(emailInput);
+pwdCheck(pwdInput);
+pwdConfirmCheck(pwdConfirmInput);
+eyeEvent(eyes);
+btnCheck(btn);
diff --git a/week4/js/signup_btn.js b/week4/js/signup_btn.js
@@ -0,0 +1,25 @@
+import { emailInput, emailEmptyCheck, emailValidation } from "./signModule/email_validation.js";
+import { pwdInput, pwdEmptyCheck, pwdValidation } from "./signModule/pwd_validation.js";
+import { pwdConfirmInput, pwdConfirm } from "./signModule/pwd_confirm.js";
+
+const btn = document.querySelector('.sign-button');
+
+let userEmail = '[email protected]'
+
+function btnSignupCheck(e) {
+  e.preventDefault();
+  if(emailInput.value && emailInput.value !== userEmail && emailValidation.test(emailInput.value)) {
+    if(pwdInput.value && pwdConfirmInput.value === pwdInput.value && pwdValidation.test(pwdInput.value)) {
+      location.href = './folder.html';
+    }
+  }
+}
+
+function btnCheck(btn) {
+  btn.addEventListener('click', btnSignupCheck);
+  btn.addEventListener('click', emailEmptyCheck);
+  btn.addEventListener('click', pwdEmptyCheck);
+  btn.addEventListener('click', pwdConfirm);
+}
+
+export { btn, btnCheck };
diff --git a/privacy.html → week4/privacy.html b/privacy.html → week4/privacy.html
diff --git a/signin.html → week4/signin.html b/signin.html → week4/signin.html
@@ -28,20 +28,20 @@
           <form class="sign-form">
             <div class="sign-form-section">
               <div>
-                <label for="signin-email">
+                <label for="sign-email">
                   이메일
                 </label>
                 <div>
-                  <input id="singin-email" name="email" type="email" autocomplete="off" placeholder="이메일" required>
+                  <input id="sign-email" name="email" type="text" autocomplete="off" placeholder="이메일">
                 </div>
               </div>
               <div>
-                <label for="signin-password">
+                <label for="sign-password">
                   비밀번호
                 </label>
                 <div class="pwd-section">
-                  <input id="signin-password" name="password" type="password" placeholder="비밀번호" required>
-                  <span class="eye">
+                  <input id="sign-password" name="password" type="password" placeholder="비밀번호">
+                  <span class="eye off">
                     <img src="images/sign/eye-off.svg">
                   </span>
                 </div>
@@ -65,5 +65,6 @@
         </div>
       </div>
     </div>
+    <script type="module" src="./js/signin.js"></script>
   </body>
 </html>
diff --git a/signup.html → week4/signup.html b/signup.html → week4/signup.html
@@ -35,30 +35,30 @@
           <form class="sign-form">
             <div class="sign-form-section">
               <div>
-                <label for="signup-email">
+                <label for="sign-email">
                   이메일
                 </label>
                 <div>
-                  <input id="singup-email" name="email" type="email" autocomplete="off" placeholder="이메일" required>
+                  <input id="sign-email" name="email" type="email" autocomplete="off" placeholder="이메일">
                 </div>
               </div>
               <div>
-                <label for="signup-password">
+                <label for="sign-password">
                   비밀번호
                 </label>
                 <div class="pwd-section">
-                  <input id="signup-password" name="password" type="password" placeholder="비밀번호" required>
+                  <input id="sign-password" name="password" type="password" placeholder="비밀번호">
                   <span class="eye">
                     <img src="images/sign/eye-off.svg">
                   </span>
                 </div>
               </div>
               <div>
-                <label for="signup-password-comfirm">
+                <label for="sign-password-confirm">
                   비밀번호 확인
                 </label>
                 <div class="pwd-section">
-                  <input id="signup-password-comfirm" name="password" type="password" placeholder="비밀번호" required>
+                  <input id="sign-password-confirm" name="password" type="password" placeholder="비밀번호">
                   <span class="eye">
                     <img src="images/sign/eye-off.svg">
                   </span>
@@ -83,5 +83,6 @@
         </div>
       </div>
     </div>
+    <script type="module" src="./js/signup.js"></script>
   </body>
 </html>
diff --git a/src/index-media.css → week4/src/index-media.css b/src/index-media.css → week4/src/index-media.css
@@ -15,21 +15,21 @@
 
   .tablet-padding {
     display: block;
+    flex: 0 99 20rem;
     min-width: 3.2rem;
   }
-
-  .tablet-padding-center {
-    min-width: 53.8rem;
-  }
 
   nav {
-    display: grid;
-    grid-template: 9.4rem / 1fr 133px 1fr 128px 1fr;
+    display: flex;
     max-width: 192rem;
     height: 9.4rem;
     padding: 0;
   }
 
+  .tablet-padding-center {
+    flex: 10 1 538px;
+  }
+
   .hero-header {
     display: flex;
     flex-direction: column;
@@ -77,21 +77,6 @@
   }
 }
 
-/* tablet nav padding */
-@media screen and (max-width: 862px) {
-  .tablet-padding {
-   width: 3.2rem;
-  }
-
-  .tablet-padding-center {
-    min-width: auto;
-  }
-
-  nav {
-    display: grid;
-    grid-template: 9.4rem / 32px 133px 1fr 128px 32px;
-  }
-}
 
 /* mobile */
 @media screen and (max-width: 767px) {

diff --git a/src/reset.css → week4/src/reset.css b/src/reset.css → week4/src/reset.css
diff --git a/src/sign-media.css → week4/src/sign-media.css b/src/sign-media.css → week4/src/sign-media.css