[Week4] 권부근

.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 }}

auth/main.js

@@ -0,0 +1,94 @@
+import {
+  displayError,
+  resetError,
+  validateInput,
+  validationState,
+} from "./utill/validation.js";
+import { ERROR_MESSAGE } from "./utill/constant.js";
+import { user } from "./utill/db.js";
+
+const form = document.querySelector(".sign-form");
+const inputs = form.querySelectorAll("input");
+
+const submit = document.querySelector(".cta");
+const authType = submit.dataset.auth;
+
+const emailInput = document.querySelector('.sign-input[type="email"]');
+const passwordInput = document.querySelector('.sign-input[type="password"]');
+const confirmPasswordInput = document.querySelector(".confirm-password");
+
+const focusHandler = (e) => {
+  if (e.target.tagName === "INPUT") {
+    const errorMessage = validateInput(e.target);
+    displayError(e.target, errorMessage);
+  }
+};
+
+const submitHandler = (e) => {
+  e.preventDefault();
+  resetError();
+  let isValid = true;
+  let account = {};
+
+  inputs.forEach((input) => {
+    const { type, value, name } = input;
+    if (validationState[name] === undefined) {
+      const errorMessage = validateInput(input);
+      if (errorMessage) {
+        displayError(input, errorMessage);
+        isValid = false;
+      }
+    } else if (!validationState[name]) {
+      displayError(
+        input,
+        ERROR_MESSAGE[authType]["INVALID_" + type.toUpperCase()]
+      );
+      isValid = false;
+    }
+    account[name] = value;
+  });
+
+  let isSubmit = false;
+
+  if (authType === "signin" && isValid) {
+    if (account.email !== user.email) {
+      displayError(emailInput, ERROR_MESSAGE[authType]["INVALID_EMAIL"]);
+      isValid = false;
+    } else if (account.password !== user.password) {
+      console.log(account, user);
+      displayError(passwordInput, ERROR_MESSAGE[authType]["INVALID_PASSWORD"]);
+      isValid = false;
+    } else {
+      isSubmit = true;
+    }
+  }
+
+  if (authType === "signup" && isValid) {
+    if (account.email === user.email) {
+      displayError(emailInput, ERROR_MESSAGE[authType]["EXIST_EMAIL"]);
+      isValid = false;
+    } else if (passwordInput.value !== confirmPasswordInput.value) {
+      displayError(
+        confirmPasswordInput,
+        ERROR_MESSAGE[authType]["PASSWORD_EQUAL"]
+      );
+      isValid = false;
+    }
+    if (isValid) {
+      isSubmit = true;
+    }
+  }
+  if (isSubmit) {
+    form.submit();
+  }
+};
+
+const keyupHandler = (e) => {
+  if (e.key === "Enter") {
+    submit.click();
+  }
+};
+
+form.addEventListener("focusout", focusHandler);
+form.addEventListener("submit", submitHandler);
+document.addEventListener("keyup", keyupHandler);

auth/signin.html

@@ -26,21 +26,25 @@
       </p>
     </header>
     <div class="sign-box">
-      <form class="sign-form">
+      <form action="/folder.html" class="sign-form" novalidate>
         <div class="sign-inputs">
           <div class="sign-input-box">
             <label class="sign-input-label">이메일</label>
-            <input class="sign-input" />
+            <input class="sign-input" type="email" name="email" />
           </div>
-          <div class="sign-input-box sign-password">
+          <div class="error-message"></div>
+          <div class="sign-input-box">
             <label class="sign-input-label">비밀번호</label>
-            <input class="sign-input" type="password" />
-            <button class="eye-button" type="button">
-              <img src="../images/eye-off.svg" />
-            </button>
+            <div class="sign-password">
+              <input class="sign-input" type="password" name="password" />
+              <button class="eye-button" type="button">
+                <img src="../images/eye-off.svg" />
+              </button>
+            </div>
+            <div class="error-message"></div>
           </div>
         </div>
-        <button class="cta" type="submit">로그인</button>
+        <button class="cta" type="submit" data-auth="signin">로그인</button>
       </form>
       <div class="sns-box">
         <span class="sns-text">소셜 로그인</span>
@@ -54,5 +58,7 @@
         </div>
       </div>
     </div>
+    <script type="module" src="main.js"></script>
+    <script src="./utill/toggle.js"></script>
   </body>
 </html>

auth/signup.html

@@ -26,28 +26,41 @@
       </p>
     </header>
     <div class="sign-box">
-      <form class="sign-form">
+      <form action="/folder.html" class="sign-form" novalidate>
         <div class="sign-inputs">
           <div class="sign-input-box">
             <label class="sign-input-label">이메일</label>
-            <input class="sign-input" />
+            <div class="sign-email">
+              <input class="sign-input" type="email" name="email" />
+            </div>
+            <div class="error-message"></div>
           </div>
-          <div class="sign-input-box sign-password">
+          <div class="sign-input-box">
             <label class="sign-input-label">비밀번호</label>
-            <input class="sign-input" type="password" />
-            <button class="eye-button" type="button">
-              <img src="../images/eye-off.svg" />
-            </button>
+            <div class="sign-password">
+              <input class="sign-input" type="password" name="password" />
+              <button class="eye-button" type="button">
+                <img src="../images/eye-off.svg" />
+              </button>
+            </div>
+            <div class="error-message"></div>
           </div>
-          <div class="sign-input-box sign-password">
+          <div class="sign-input-box">
             <label class="sign-input-label">비밀번호 확인</label>
-            <input class="sign-input" type="password" />
-            <button class="eye-button" type="button">
-              <img src="../images/eye-off.svg" />
-            </button>
+            <div class="sign-password">
+              <input
+                class="sign-input confirm-password"
+                type="password"
+                name="confirm-password"
+              />
+              <button class="eye-button" type="button">
+                <img src="../images/eye-off.svg" />
+              </button>
+            </div>
+            <div class="error-message"></div>
           </div>
         </div>
-        <button class="cta" type="submit">회원가입</button>
+        <button class="cta" type="submit" data-auth="signup">회원가입</button>
       </form>
       <div class="sns-box">
         <span class="sns-text">다른 방식으로 가입하기</span>
@@ -61,5 +74,7 @@
         </div>
       </div>
     </div>
+    <script type="module" src="main.js"></script>
+    <script src="./utill/toggle.js"></script>
   </body>
 </html>

auth/styles.css

@@ -80,6 +80,7 @@ header {
 .sign-input {
   padding: 1.8rem 1.5rem;
   border-radius: 0.8rem;
+  width: 100%;
   border: 0.1rem solid var(--gray-3);
   font-size: 1.6rem;
   line-height: 150%;
@@ -89,9 +90,15 @@ header {
   border-color: var(--primary);
 }
 
+.error-message {
+  font-size: 1.4rem;
+  color: var(--Red);
+}
+
 .eye-button {
   position: absolute;
-  bottom: 2.2rem;
+  top: 50%;
+  transform: translateY(-50%);
   right: 1.5rem;
   width: 1.6rem;
   height: 1.6rem;

auth/utill/constant.js

@@ -0,0 +1,16 @@
+export const ERROR_MESSAGE = {
+  signin: {
+    EMPTY_EMAIL: "이메일을 입력해주세요.",
+    EMPTY_PASSWORD: "비밀번호를 입력해주세요.",
+    INVALID_EMAIL: "이메일을 확인해주세요",
+    INVALID_PASSWORD: "비밀번호를 확인해주세요.",
+  },
+  signup: {
+    EMPTY_EMAIL: "이메일을 입력해주세요.",
+    EMPTY_PASSWORD: "비밀번호를 입력해주세요.",
+    INVALID_EMAIL: "올바른 이메일 주소가 아닙니다.",
+    INVALID_PASSWORD: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.",
+    EXIST_EMAIL: "이미 존재하는 이메일입니다.",
+    PASSWORD_EQUAL: "비밀번호가 일치하지 않아요.",
+  },
+};

auth/utill/db.js

@@ -0,0 +1,4 @@
+export const user = {
+  email: "[email protected]",
+  password: "codeit101",
+};

auth/utill/toggle.js

@@ -0,0 +1,14 @@
+document.querySelectorAll(".eye-button").forEach((button) => {
+  button.addEventListener("click", function () {
+    const input = this.previousElementSibling;
+    const img = this.querySelector("img");
+
+    if (input.type === "password") {
+      input.type = "text";
+      img.src = "../images/eye-on.svg";
+    } else {
+      input.type = "password";
+      img.src = "../images/eye-off.svg";
+    }
+  });
+});

auth/utill/validation.js

@@ -0,0 +1,50 @@
+// validation.js
+import { ERROR_MESSAGE } from "./constant.js";
+import { user } from "./db.js";
+
+const submit = document.querySelector(".cta");
+const authType = submit.dataset.auth;
+
+export const validationState = {};
+
+const PATTERN = {
+  email:
+    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i,
+  password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
+  "confirm-password": /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
+};
+
+const getErrorMessage = (name, condition) => {
+  const errorType = condition ? "EMPTY_" : "INVALID_";
+  return ERROR_MESSAGE[authType][errorType + name.toUpperCase()];
+};
+
+export function validateInput(input) {
+  const { name, value } = input;
+  let errorMessage = "";
+
+  if (value === "") {
+    errorMessage = getErrorMessage(name, true);
+  } else if (!PATTERN[name].test(value)) {
+    errorMessage = getErrorMessage(name, false);
+  } else if (
+    authType === "signup" &&
+    name === "email" &&
+    value === user.email
+  ) {
+    errorMessage = ERROR_MESSAGE[authType]["EXIST_EMAIL"];
+  }
+
+  validationState[name] = !errorMessage;
+
+  return errorMessage;
+}
+
+export function resetError() {
+  const errorMessages = document.querySelectorAll(".error-message");
+  errorMessages.forEach((message) => (message.textContent = ""));
+}
+export function displayError(input, errorMessage) {
+  const errorDisplay = input.parentNode.nextElementSibling;
+  errorDisplay.textContent = errorMessage;
+}

folder.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>folder 페이지</div>
+  </body>
+</html>