codeit-bootcamp-frontend · ckswnskfk · Nov 18, 2023 · Nov 19, 2023 · Nov 19, 2023 · Nov 19, 2023
diff --git a/data/users.js b/data/users.js
diff --git a/index.html b/index.html
@@ -39,6 +39,8 @@
     <link rel="stylesheet" href="styles/reset.css" />
     <link rel="stylesheet" href="styles/common.css" />
     <link rel="stylesheet" href="index.css" />
+
+    <script defer type="module" src="index.js"></script>
   </head>
   <body>
     <header class="bgc-blue">
@@ -54,7 +56,7 @@
               src="images/icons/logo.svg"
               alt="링크브러리 로고" />
           </a>
-          <a class="cta gnb__signin" href="pages/member/signin">로그인</a>
+          <a class="cta gnb__signin" href="pages/auth/signin">로그인</a>
         </div>
       </nav>
 
@@ -65,7 +67,7 @@ <h1 class="hero__heading">
           >를<br />
           쉽게 저장하고 관리해 보세요
         </h1>
-        <a class="cta hero__signup" href="pages/member/signup">링크 추가하기</a>
+        <a class="cta hero__signup" href="pages/auth/signup">링크 추가하기</a>
         <div class="hero__img">
           <img
             class="hero__img--img"

diff --git a/index.js b/index.js
@@ -0,0 +1,21 @@
+const signInAnchor = document.querySelector(".gnb__signin");
+const signUpAnchor = document.querySelector(".hero__signup");
+
+signInAnchor.addEventListener("click", (e) => {
+  e.preventDefault();
+  navigateFolderPage("/pages/auth/signin/");
+});
+
+signUpAnchor.addEventListener("click", (e) => {
+  e.preventDefault();
+  navigateFolderPage("/pages/auth/signup/");
+});
+
+function navigateFolderPage(href) {
+  if (localStorage.getItem("accessToken")) {
+    location.href = "/pages/folder/";
+    return;
+  }
+
+  location.href = href;
+}
diff --git a/pages/auth/api.js b/pages/auth/api.js
@@ -0,0 +1,12 @@
+import { fetchApi } from "/scripts/fetchApi.js";
+
+const postSignIn = (email, password) =>
+  fetchApi.post("/sign-in", { body: { email, password } });
+
+const postCheckEmail = (email) =>
+  fetchApi.post("/check-email", { body: { email } });
+
+const postSignUp = (email, password) =>
+  fetchApi.post("/sign-up", { body: { email, password } });
+
+export { postCheckEmail, postSignIn, postSignUp };
diff --git a/pages/member/sign.css → pages/auth/sign.css b/pages/member/sign.css → pages/auth/sign.css
diff --git a/pages/member/sign.js → pages/auth/sign.js b/pages/member/sign.js → pages/auth/sign.js
@@ -1,4 +1,4 @@
-import users from "/data/users.js";
+import { postCheckEmail } from "./api.js";
 import { isEmptyString } from "/scripts/utils.js";
 
 const errorMessage = {
@@ -18,38 +18,54 @@ const errorMessage = {
   },
 };
 
-function handleErrorMessage(element, addOrRemoveHide, errorMessage = "") {
-  const parent = element.parentElement;
-  const errorMessageSpan = parent.querySelector(".input-error__message");
+function handleErrorMessage(target, errorMessage = "") {
+  const parent = target.parentElement;
+  let errorMessageSpan = parent.querySelector(".input-error__message");
+
+  if (isEmptyString(errorMessage) && !errorMessageSpan) {
+    return;
+  }
+
+  if (!errorMessageSpan) {
+    errorMessageSpan = document.createElement("span");
+    errorMessageSpan.classList.add("input-error__message");
+    target.after(errorMessageSpan);
+    errorMessageSpan.textContent = errorMessage;
+    return;
+  }
+
+  if (isEmptyString(errorMessage)) {
+    errorMessageSpan.remove();
+    return;
+  }
 
   errorMessageSpan.textContent = errorMessage;
-  errorMessageSpan.classList[addOrRemoveHide]("hide");
 }
 
 function inputValidationFailed(target, errorMessage, eyeIcon) {
   target.classList.add("input-error");
-  handleErrorMessage(target, "remove", errorMessage);
+  handleErrorMessage(target, errorMessage);
   if (eyeIcon) {
     eyeIcon.classList.add("eye-icon__error");
   }
 }
 
 function inputValidationSucceeded(target, eyeIcon) {
   target.classList.remove("input-error");
-  handleErrorMessage(target, "add");
+  handleErrorMessage(target);
   if (eyeIcon) {
     eyeIcon.classList.remove("eye-icon__error");
   }
 }
 
-function checkEmailValid(element, checkExist = true) {
+async function checkEmailValid(element, checkExist = true) {
   if (isEmptyString(element.value)) {
     return errorMessage.email.empty;
   }
   if (!isEmailValid(element.value)) {
     return errorMessage.email.valid;
   }
-  if (checkExist && isEmailExist(element.value)) {
+  if (checkExist && (await isEmailExist(element.value))) {
     return errorMessage.email.exist;
   }
   return "";
@@ -82,14 +98,16 @@ function isPasswordValid(password) {
   return password.trim().length >= 8 && regex.test(password);
 }
 
-function isEmailExist(email) {
-  return users.some((user) => user.email === email);
-}
-
-function isMemberExist(member) {
-  return users.some(
-    (user) => user.email === member.email && user.password === member.password
-  );
+async function isEmailExist(email) {
+  let emailExist = true;
+  try {
+    await postCheckEmail(email);
+    emailExist = false;
+  } catch (error) {
+    console.error(`${error.name}: ${error.message}`);
+  } finally {
+    return emailExist;
+  }
 }
 
 function changePasswordVisibility(passwordInput) {
@@ -104,6 +122,10 @@ function changePasswordVisibility(passwordInput) {
   };
 }
 
+function setUserAccessToken({ data }) {
+  localStorage.setItem("accessToken", data.accessToken);
+}
+
 export {
   changePasswordVisibility,
   checkEmailValid,
@@ -112,5 +134,5 @@ export {
   errorMessage,
   inputValidationFailed,
   inputValidationSucceeded,
-  isMemberExist,
+  setUserAccessToken,
 };
diff --git a/pages/member/signin/index.html → pages/auth/signin/index.html b/pages/member/signin/index.html → pages/auth/signin/index.html
@@ -68,7 +68,6 @@
               name="email"
               required
               placeholder="이메일을 입력해주세요." />
-            <span class="input-error__message hide"></span>
           </div>
           <div class="form__password">
             <label class="form__label" for="input-password">비밀번호</label>
@@ -83,7 +82,6 @@
               class="form__input--eye-off eye-icon"
               type="button"
               aria-label="패스워드 보이기"></button>
-            <span class="input-error__message hide"></span>
           </div>
 
           <button class="cta form__submit" type="submit">로그인</button>

diff --git a/pages/auth/signin/signin.js b/pages/auth/signin/signin.js
@@ -0,0 +1,96 @@
+import {
+  changePasswordVisibility,
+  checkEmailValid,
+  checkPasswordValid,
+  errorMessage,
+  inputValidationFailed,
+  inputValidationSucceeded,
+  setUserAccessToken,
+} from "../sign.js";
+
+import { postSignIn } from "../api.js";
+import { isEmptyString } from "/scripts/utils.js";
+
+navigateFolderPage("pages/auth/signin/");
+
+/**
+ * email input
+ */
+const emailInput = document.querySelector("#input-email");
+emailInput.addEventListener("focusout", onEmailFocusout);
+
+async function onEmailFocusout({ target }) {
+  const errorMessage = await checkEmailValid(target, false);
+  if (!isEmptyString(errorMessage)) {
+    inputValidationFailed(target, errorMessage);
+    return false;
+  }
+
+  inputValidationSucceeded(target);
+  return true;
+}
+
+/**
+ * password input
+ */
+const passwordInput = document.querySelector("#input-password");
+const passwordEyeIcon = document.querySelector(
+  ".form__password .form__input--eye-off"
+);
+
+passwordInput.addEventListener("focusout", onPasswordFocusout);
+
+function onPasswordFocusout({ target }) {
+  const errorMessage = checkPasswordValid(target);
+  if (!isEmptyString(errorMessage)) {
+    inputValidationFailed(target, errorMessage, passwordEyeIcon);
+    return false;
+  }
+
+  inputValidationSucceeded(target, passwordEyeIcon);
+  return true;
+}
+
+passwordEyeIcon.addEventListener(
+  "click",
+  changePasswordVisibility(passwordInput)
+);
+
+/**
+ * form
+ */
+const form = document.querySelector(".form");
+
+form.addEventListener("submit", onSubmit);
+
+function onSubmit(e) {
+  e.preventDefault();
+
+  const validResult =
+    onEmailFocusout({ target: emailInput }) &&
+    onPasswordFocusout({ target: passwordInput });
+
+  if (!validResult) {
+    return;
+  }
+
+  doSignIn(emailInput.value, passwordInput.value);
+}
+
+async function doSignIn(email, password) {
+  try {
+    const signInResponse = await postSignIn(email, password);
+    setUserAccessToken(signInResponse);
+    location.href = "/pages/folder";
+  } catch (error) {
+    console.error(`${error.name}: ${error.message}`);
+    if (error.name === "AuthApiError") {
+      inputValidationFailed(emailInput, errorMessage.email.loginFailed);
+      inputValidationFailed(
+        passwordInput,
+        errorMessage.password.loginFailed,
+        passwordEyeIcon
+      );
+    }
+  }
+}
diff --git a/pages/member/signup/index.html → pages/auth/signup/index.html b/pages/member/signup/index.html → pages/auth/signup/index.html
@@ -69,7 +69,6 @@
               name="email"
               required
               placeholder="이메일을 입력해주세요." />
-            <span class="input-error__message hide"></span>
           </div>
           <div class="form__password">
             <label class="form__label" for="input-password">비밀번호</label>
@@ -84,7 +83,6 @@
               class="form__input--eye-off eye-icon"
               type="button"
               aria-label="패스워드 감추기"></button>
-            <span class="input-error__message hide"></span>
           </div>
           <div class="form__password-chk">
             <label class="form__label" for="input-password-chk">
@@ -103,7 +101,6 @@
               class="form__input--eye-off eye-icon"
               type="button"
               aria-label="패스워드 감추기"></button>
-            <span class="input-error__message hide"></span>
           </div>
 
           <button class="cta form__submit" type="submit">회원가입</button>