codeit-bootcamp-frontend · yujo11 · Nov 14, 2023 · Sep 3, 2023 · Nov 12, 2023 · Nov 12, 2023
diff --git a/.github/workflows/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml
@@ -0,0 +1,14 @@
+name: delete branch on close pr
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  delete-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: delete branch
+        uses: SvanBoxel/delete-merged-branch@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/folder.html b/folder.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script type="module" src=""></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -188,5 +188,6 @@ <h2>
         </div>
       </div>
     </footer>
+    <script type="module" src="./script/index.js"></script>
   </body>
 </html>
diff --git a/script/emailData.js b/script/emailData.js
@@ -0,0 +1,6 @@
+//사용중인 유저 데이터
+const userData = [
+  { email: "[email protected]", password: "codeit101" },
+  { email: "[email protected]", password: "dksdkffuwna1" },
+];
-const userData = [
-  { email: "[email protected]", password: "codeit101" },
-  { email: "[email protected]", password: "dksdkffuwna1" },
-];
+const USER_DATA = [
+  { email: "[email protected]", password: "codeit101" },
+  { email: "[email protected]", password: "dksdkffuwna1" },
+];
-const userData = [
-  { email: "[email protected]", password: "codeit101" },
-  { email: "[email protected]", password: "dksdkffuwna1" },
-];
+const USER_DATA = [
+  { email: "[email protected]", password: "codeit101" },
+  { email: "[email protected]", password: "dksdkffuwna1" },
+];
+export default userData;
diff --git a/script/folder.js b/script/folder.js
diff --git a/script/function.js b/script/function.js
@@ -0,0 +1,36 @@
+import userData from "./emailData.js";
+
+function createTag(target, message) {
+  //태그 생성
+  if (target.nextSibling) {
+    return;
+  }
+  target.classList = "redBorder";
+  const span = document.createElement("span");
+  span.innerHTML = `${message}`;
+  span.classList.add("redMessage");
+  target.parentElement.append(span);
+}
+function removeTag(target) {
+  //태그 삭제
+  target.classList.toggle("redBorder", 0);
+  if (target.nextSibling) {
+    target.nextSibling.remove();
+  }
+}
+function checkEmail(str) {
+  //이메일 정규식
+  const reg_email =
+    /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
+  if (!reg_email.test(str)) {
+    return false;
+  } else {
+    return true;
+  }
-  if (!reg_email.test(str)) {
-    return false;
-  } else {
-    return true;
-  }
+  return reg_email.test(str)
-  if (!reg_email.test(str)) {
-    return false;
-  } else {
-    return true;
-  }
+  return reg_email.test(str)
+}
+function emailDuplicateCheck(str) {
+  // 이메일 중복 확인 함수
+  return userData.find((el) => el.email === str);
+}
+
+export { createTag, removeTag, checkEmail, emailDuplicateCheck };
diff --git a/script/index.js b/script/index.js
diff --git a/script/signin.js b/script/signin.js
@@ -0,0 +1,77 @@
+import { inputEmail, inputPassword, eyeIcon, form } from "./tags.js";
+import { createTag, removeTag, checkEmail } from "./function.js";
+import userData from "./emailData.js";
+let emailEnable = false; //이메일 사용 가능 여부
+let passwordEnable = false; //패스워드 사용 가능 여부
+function emailCheck(e) {
+  //이메일 확인 함수
+  if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) {
-function emailCheck(e) {
-  //이메일 확인 함수
-  if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) {
+function emailCheck({ type, key }) {
+  //이메일 확인 함수
+  if (type === "focusout" || (type === "keyup" && key === "Enter")) {
-function emailCheck(e) {
-  //이메일 확인 함수
-  if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) {
+function emailCheck({ type, key }) {
+  //이메일 확인 함수
+  if (type === "focusout" || (type === "keyup" && key === "Enter")) {
+    let input = e.target;
+    if (input.value === "") {
+      createTag(input, "이메일을 입력해주세요");
+    } else if (!checkEmail(input.value)) {
+      createTag(input, "올바른 이메일이 아닙니다.");
+    } else {
+      emailEnable = true;
+    }
+  }
+}
+
+function passwordCheck(e) {
+  //패스워드 확인 함수
+  if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) {
+    let input = e.target;
+    if (input.value === "") {
+      createTag(input, "비밀번호를 입력해주세요");
+    } else if (
+      input.value.length < 9 ||
+      !/[a-zA-Z]/.test(input.value) ||
+      !/\d/.test(input.value)
+    ) {
+      createTag(input, "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.");
+    } else {
+      passwordEnable = true;
+    }
+  }
+}
+function login(e) {
+  //로그인 가능 여부 확인 판단 후 form 제출 조건에 부합되지 않으면 e정지!
+  const user = userData.find((el) => el.email === inputEmail.value);
+  if (emailEnable && passwordEnable) {
+    if (user === undefined) {
+      createTag(inputEmail, "존재하지 않는 이메일 입니다.");
+      e.preventDefault();
+    } else if (user.password !== inputPassword.value) {
+      createTag(inputPassword, "비밀번호가 틀렸습니다.");
+      e.preventDefault();
+    }
+  } else {
+    e.preventDefault();
+  }
+}
+
+function init(e) {
+  //추가된 span 내용 삭제 및 보더 값 삭제
+  let input = e.target;
+  removeTag(input);
+}
+function passwordOpen() {
+  //패스워드 보이게 안보이게 하는 기능 추가
+  const icon =
+    eyeIcon[0].getAttribute("src") === "./images/eye_off.svg"
+      ? "./images/eye-on.svg"
+      : "./images/eye_off.svg";
+  eyeIcon[0].setAttribute("src", icon);
+  const type =
+    inputPassword.getAttribute("type") === "password" ? "text" : "password";
+  inputPassword.setAttribute("type", type);
+}
+//이벤트 리스너
+inputEmail.addEventListener("focusout", (e) => emailCheck(e, "이메일"));
+inputEmail.addEventListener("keyup", (e) => emailCheck(e, "이메일"));
+inputPassword.addEventListener("focusout", (e) => passwordCheck(e, "비밀번호"));
+inputPassword.addEventListener("keyup", (e) => passwordCheck(e, "비밀번호"));
+inputEmail.addEventListener("focusin", init);
+inputPassword.addEventListener("focusin", init);
+eyeIcon[0].addEventListener("click", passwordOpen);
+form.addEventListener("submit", login);
diff --git a/script/signup.js b/script/signup.js
@@ -0,0 +1,110 @@
+import {
+  inputEmail,
+  inputPassword,
+  inputPasswordCheck,
+  eyeIcon,
+  form,
+} from "./tags.js";
+import {
+  createTag,
+  removeTag,
+  checkEmail,
+  emailDuplicateCheck,
+} from "./function.js";
+import userData from "./emailData.js";
+
+let emailEnable = false; //이메일 사용 가능 여부
+let passwordEnable = false; // 패스워드 사용 가능 여부
+function emailCheck(e) {
+  //이메일 사용 가능 여부 판단 함수
+  if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) {
+    let input = e.target;
+    if (input.value === "") {
+      createTag(input, "이메일을 입력해주세요");
+    } else if (!checkEmail(input.value)) {
+      createTag(input, "올바른 이메일이 아닙니다.");
+    } else {
+      const user = emailDuplicateCheck(input.value);
+      if (user) {
+        createTag(input, "이미 사용중인 이메일입니다.");
+      }
+      emailEnable = true;
+    }
+  }
+}
+
+function PasswordCheck(e, type) {
+  //패스워드 사용 가능 여부 판단 함수
+  if (e.type === "focusout" || (e.type === "keyup" && e.key === "Enter")) {
+    let input = e.target;
+    if (
+      input.value === "" &&
+      (type === "비밀번호" || type === "비밀번호체크")
+    ) {
+      createTag(input, "비밀번호를 입력해주세요");
+    } else if (
+      input.value.length < 9 ||
+      !/[a-zA-Z]/.test(input.value) ||
+      !/\d/.test(input.value)
+    ) {
+      createTag(input, "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.");
+    } else if (type === "비밀번호체크" && input.value !== inputPassword.value) {
+      createTag(input, "비밀번호가 일치하지 않습니다.");
+    }
+    passwordEnable = true;
+  }
+}
+function init(e) {
+  //에러로 판단 된 내용 삭제
+  let input = e.target;
+  removeTag(input);
+}
+function passwordOpen() {
+  //패스워드 보이게 하는 함수
+  const icon =
+    eyeIcon[0].getAttribute("src") === "./images/eye-on.svg"
+      ? "./images/eye_off.svg"
+      : "./images/eye-on.svg";
+  eyeIcon[0].setAttribute("src", icon);
+  const type =
+    inputPassword.getAttribute("type") === "text" ? "password" : "text";
+  inputPassword.setAttribute("type", type);
+}
+function passwordCheckOpen() {
+  const icon =
+    eyeIcon[1].getAttribute("src") === "./images/eye-on.svg"
+      ? "./images/eye_off.svg"
+      : "./images/eye-on.svg";
+  eyeIcon[1].setAttribute("src", icon);
+  const type =
+    inputPasswordCheck.getAttribute("type") === "text" ? "password" : "text";
+  inputPasswordCheck.setAttribute("type", type);
+}
+function signup(e) {
+  //회원 가입을 위한 조건 판단 후 form 제출
+  const user = emailDuplicateCheck(inputEmail.value);
+  console.log(user);
+  if (!(emailEnable && passwordEnable) || user.email === inputEmail.value) {
+    e.preventDefault();
+  }
+  userData.push({
+    email: inputEmail.value,
+    password: inputPasswordCheck.value,
+  });
+} //이벤트 리스너
+inputEmail.addEventListener("focusout", (e) => emailCheck(e, "이메일"));
+inputEmail.addEventListener("keyup", (e) => emailCheck(e, "이메일"));
+inputPassword.addEventListener("focusout", (e) => PasswordCheck(e, "비밀번호"));
+inputPassword.addEventListener("keyup", (e) => PasswordCheck(e, "비밀번호"));
+inputEmail.addEventListener("focusin", init);
+inputPassword.addEventListener("focusin", init);
+inputPasswordCheck.addEventListener("focusout", (e) =>
+  PasswordCheck(e, "비밀번호체크")
+);
+inputPasswordCheck.addEventListener("keyup", (e) =>
+  PasswordCheck(e, "비밀번호체크")
+);
+inputPasswordCheck.addEventListener("focusin", init);
+eyeIcon[0].addEventListener("click", passwordOpen);
+eyeIcon[1].addEventListener("click", passwordCheckOpen);
+form.addEventListener("submit", signup);
diff --git a/script/tags.js b/script/tags.js
@@ -0,0 +1,14 @@
+const inputEmail = document.querySelector("#email");
+const inputPassword = document.querySelector("#password");
+const inputPasswordCheck = document.querySelector("#passwordCheck");
+const formButton = document.querySelector("#button");
+const eyeIcon = document.querySelectorAll(".eyeIcon");
+const form = document.querySelector(".formContainer");
+export {
+  inputEmail,
+  inputPassword,
+  inputPasswordCheck,
+  formButton,
+  eyeIcon,
+  form,
+};
diff --git a/signin.css b/signin.css
@@ -99,7 +99,14 @@ input {
   position: relative;
   outline: none;
 }
-
+.redBorder {
+  border-color: var(--red);
+}
+.redMessage {
+  color: var(--red);
+  font-size: 14px;
+  font-weight: 400;
+}
 input:focus {
   border: 1px solid var(--primary);
 }
@@ -128,7 +135,8 @@ img.eyeIcon {
   width: 1rem;
   height: 1rem;
   right: 1rem;
-  bottom: 1rem;
+  top: 3rem;
+  z-index: 1;
 }
 .secondaryContainer {
   display: flex;
@@ -187,8 +195,5 @@ a.socialLoginLink > img {
       width: 100%;
       max-width: 400px;
     }
-    .inputField {
-      width: 100%;
-    }
   }
 }
diff --git a/signin.html b/signin.html
@@ -3,6 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://seongseonko.netlify.app/" />
+    <meta property="og:title" content="Linkbrary" />
+    <meta
+      property="og:image"
+      content="https://seongseonko.netlify.app/images/lotto.jpg"
+    />
+    <meta
+      property="og:description"
+      content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요"
+    />
+    <meta property="og:site_name" content="Linkbrary" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <link rel="stylesheet" href="./signin.css" />
     <title>Linkbrary</title>
   </head>
@@ -24,24 +38,17 @@
               </div>
             </div>
           </div>
-          <form class="formContainer">
+          <form class="formContainer" action="./folder.html">
             <div class="inputGroup">
               <label for="email"> 이메일 </label>
-              <input
-                id="email"
-                type="email"
-                name="email"
-                placeholder="[email protected]"
-              />
+              <input id="email" type="email" name="email" />
             </div>
             <div class="inputGroup">
               <label for="password"> 비밀번호 </label>
-              <div class="inputField">
-                <input id="password" type="password" name="password" />
-                <img class="eyeIcon" src="./images/eye_off.svg" alt="감은 눈" />
-              </div>
+              <img class="eyeIcon" src="./images/eye_off.svg" alt="감은 눈" />
+              <input id="password" type="password" name="password" />
             </div>
-            <button>로그인</button>
+            <button id="button">로그인</button>
           </form>
         </div>
         <div class="secondaryContainer">
@@ -57,5 +64,6 @@
         </div>
       </div>
     </section>
+    <script type="module" src="./script/signin.js"></script>
   </body>
 </html>
diff --git a/signup.css b/signup.css
@@ -100,12 +100,21 @@ input {
 .inputFieldContainer {
   position: relative;
 }
-.inputFieldContainer > img {
+img.eyeIcon {
   position: absolute;
-  right: 1rem;
-  bottom: 1.1rem;
   width: 1rem;
   height: 1rem;
+  right: 1rem;
+  top: 1.2rem;
+  z-index: 1;
+}
+.redBorder {
+  border-color: var(--red);
+}
+.redMessage {
+  color: var(--red);
+  font-size: 14px;
+  font-weight: 400;
 }
 input:focus {
   border: 1px solid var(--primary);