[#24] 중복체크 기능 구현

- Close #31 - 중복이 많지만 change 이벤트에 중복 확인 코드만 따로 등록하고, 프라미스.then 으로 해결했다. - 코드 스타일 약간 수정. 구조 분해 활용하기 위해서 - async 사용 안했으므로 웹팩 다시 초기화
codesquad-member-2020 · Mar 27, 2020 · 593b4e4 · 593b4e4
1 parent 9f744a3
commit 593b4e4
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 34 deletions.
diff --git a/FE/src/modules/constants.js b/FE/src/modules/constants.js
@@ -77,7 +77,7 @@ export const PASS_MESSAGE = {
   checkPassword: "비밀번호가 일치합니다.",
 };
 
-export const PASS = null;
+export const PASS = "";
 
 export const KEY_CODE_ZERO = 48;
 

diff --git a/FE/src/modules/fields.js b/FE/src/modules/fields.js
@@ -1,4 +1,3 @@
-import app from "./server.js";
 import { PATTERN, FORM_ID, LIMITED_LENGTH, ERROR_MSG_ID, ERROR_MESSAGE, PASS_MESSAGE, PASS } from "./constants.js";
 import { _q, daysInMonth } from "./util.js";
 
@@ -20,19 +19,12 @@ export const selectFields = {
 export const inputFields = {
   userId: {
     inputElement: _q(FORM_ID.userId),
-    async selectErrorMessage() {
+    selectErrorMessage(valid = null) {
       if (!this.isFieldValid()) return this.errorMessage.misMatch;
-      const isDuplicate = await app.fetchData(this.inputElement.value);
-      if (isDuplicate.valid) return this.errorMessage.duplicate;
-      console.log(isDuplicate.valid);
+      if (valid === null) return null;
+      if (valid) return this.errorMessage.duplicate;
       return PASS;
     },
-    // async isDuplicate() {
-    //   const isDuplicate = await app.fetchData(this.inputElement.value);
-    //   console.log(isDuplicate, typeof isDuplicate, isDuplicate.valid);
-    //   console.log("is Await?", this.inputElement.value);
-    //   return isDuplicate.valid;
-    // },
     isFieldValid() {
       const userId = this.inputElement.value;
       const userIdRegex = PATTERN.userId;
@@ -77,9 +69,10 @@ export const inputFields = {
   checkPassword: {
     inputElement: _q(FORM_ID.checkPassword),
     isFieldValid() {
-      const password = _q(FORM_ID.password).value;
+      const password = inputFields.password.inputElement.value;
+      const passwordErrorMessage = inputFields.password.selectErrorMessage();
       const checkPassword = this.inputElement.value;
-      return password === checkPassword;
+      return passwordErrorMessage === PASS && password === checkPassword;
     },
     selectErrorMessage() {
       if (!this.isFieldValid()) return this.errorMessage;

diff --git a/FE/src/modules/main.js b/FE/src/modules/main.js
@@ -1,12 +1,17 @@
 import { _q } from "./util.js";
-import { validateInputForms, validateSelectForms, preventKeypressExceptNum } from "./validation.js";
+import { validateInputForms, validateSelectForms, validateDuplicateId, preventKeypressExceptNum } from "./validation.js";
 import userData from "./userData.js";
 
 const signupForm = _q("form");
 const buttons = _q(".btn-wrap");
 
-signupForm.addEventListener("input", event => validateInputForms(event));
-signupForm.addEventListener("change", event => validateSelectForms(event));
+signupForm.addEventListener("input", event => {
+  validateInputForms(event);
+});
+signupForm.addEventListener("change", event => {
+  validateDuplicateId(event);
+  validateSelectForms(event);
+});
 signupForm.addEventListener("keypress", event => preventKeypressExceptNum(event));
 
 buttons.addEventListener("click", event => {

diff --git a/FE/src/modules/validation.js b/FE/src/modules/validation.js
@@ -1,5 +1,6 @@
-import { inputFields, selectFields } from "./fields.js";
+import app from "./server.js";
 import userData from "./userData.js";
+import { inputFields, selectFields } from "./fields.js";
 import { _q, toggleClass } from "./util.js";
 import { KEY_CODE_ZERO, KEY_CODE_NINE, TOGGLE_CLASS, PASS } from "./constants.js";
 
@@ -16,20 +17,40 @@ export const validateInputForms = event => {
     const currentField = inputFields[field];
     if (event.target === currentField.inputElement) {
       let errorMessage = currentField.selectErrorMessage();
-      const messageElement = currentField.errorMessageElement;
+      const { errorMessageElement } = currentField;
       if (isValidatePassed(errorMessage)) {
         errorMessage = currentField.passMessage;
         setUserData(field, currentField.inputElement.value);
-        toggleClass(messageElement, TOGGLE_CLASS.pass, TOGGLE_CLASS.error);
+        toggleClass(errorMessageElement, TOGGLE_CLASS.pass, TOGGLE_CLASS.error);
       } else {
         setUserData(field, null);
-        toggleClass(messageElement, TOGGLE_CLASS.error, TOGGLE_CLASS.pass);
+        toggleClass(errorMessageElement, TOGGLE_CLASS.error, TOGGLE_CLASS.pass);
       }
-      generateMessage(messageElement, errorMessage);
+      generateMessage(errorMessageElement, errorMessage);
     }
   });
 };
 
+export const validateDuplicateId = event => {
+  const { userId } = inputFields;
+  if (event.target === userId.inputElement) {
+    const { value } = userId.inputElement;
+    app.fetchData(value).then(response => {
+      let errorMessage = userId.selectErrorMessage(response.valid);
+      const { errorMessageElement } = userId;
+      if (isValidatePassed(errorMessage)) {
+        errorMessage = userId.passMessage;
+        setUserData(userId, userId.inputElement.value);
+        toggleClass(errorMessageElement, TOGGLE_CLASS.pass, TOGGLE_CLASS.error);
+      } else {
+        setUserData(userId, null);
+        toggleClass(errorMessageElement, TOGGLE_CLASS.error, TOGGLE_CLASS.pass);
+      }
+      generateMessage(errorMessageElement, errorMessage);
+    });
+  }
+};
+
 export const validateSelectForms = event => {
   Object.keys(selectFields).forEach(field => {
     const currentField = selectFields[field];

diff --git a/FE/webpack.config.js b/FE/webpack.config.js
@@ -4,8 +4,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   mode: "development",
-  entry: { index: ["babel-polyfill", "./src/signup.js"] },
-  // signin: "./src/signin.js", home: "./src/home.js" },
+  entry: { index: "./src/signup.js", signin: "./src/signin.js", home: "./src/home.js" },
   output: {
     path: path.resolve(__dirname, "dist"),
     filename: "dist/[name].bundle.js",
@@ -17,16 +16,16 @@ module.exports = {
       chunks: ["index"],
       template: "./src/signup.html",
     }),
-    // new HtmlWebpackPlugin({
-    //   filename: "signin.html",
-    //   chunks: ["signin"],
-    //   template: "./src/signin.html",
-    // }),
-    // new HtmlWebpackPlugin({
-    //   filename: "home.html",
-    //   chunks: ["home"],
-    //   template: "./src/home.html",
-    // }),
+    new HtmlWebpackPlugin({
+      filename: "signin.html",
+      chunks: ["signin"],
+      template: "./src/signin.html",
+    }),
+    new HtmlWebpackPlugin({
+      filename: "home.html",
+      chunks: ["home"],
+      template: "./src/home.html",
+    }),
   ],
   devServer: {
     contentBase: path.join(__dirname, "./dist/"),