Merge pull request #30 from codesquad-memeber-2020/feature/JS/#24

Feature/js/#24
codesquad-member-2020 · Mar 27, 2020 · d3d0aba · d3d0aba
2 parents 6e3c5a3 + 7e0b435
commit d3d0aba
Show file tree

Hide file tree

Showing 13 changed files with 6,014 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/frontend/constants/RegExp.js b/frontend/constants/RegExp.js
@@ -7,7 +7,8 @@ const RegExp = {
     UPPERCASE: /[A-Z]/g,
     LOWERCASE: /[a-z]/g,
     SPECIAL: /[~!@#$%^&*()_+|<>?:{}]/gi
-  }
+  },
+  PHONE_NUMBER: /^010\d{3,4}\d{4}$/
 };
 
 export default RegExp;
diff --git a/frontend/constants/message.js b/frontend/constants/message.js
@@ -35,6 +35,12 @@ export const INTERESTS_MESSAGE = {
   SUCCESS: `관심사를 최대치까지 등록하셨습니다.`
 };
 
+export const PHONE_NUMBER_MESSAGE = {
+  DEFAULT: `번호를 입력해 주세요.`,
+  ERROR_REGEXP: `형식에 맞지 않는 번호입니다.`,
+  SUCCESS: `번호 입력이 완료 됬습니다.`
+};
+
 export const BIRTHDAY_MESSAGE = {
   NUMBER: `숫자만 입력해 주세요`,
   YEAR: {

diff --git a/frontend/js/signUp.js b/frontend/js/signUp.js
@@ -2,10 +2,14 @@ import RegExp from "../constants/RegExp.js";
 import {
   ID_MESSAGE,
   EMAIL_MESSAGE,
-  INTERESTS_MESSAGE
+  INTERESTS_MESSAGE,
+  PHONE_NUMBER_MESSAGE
 } from "../constants/message.js";
+import validationState from "../js/validationState.js";
+
+console.log(validationState);
 
-const IDinputDOM = document.querySelector("#id");
+const IDinputDOM = document.querySelector("#user_id");
 const IDMessageDOM = document.querySelector(".ID_message");
 
 //--------------------ID 유효성 검사--------------------
@@ -161,6 +165,74 @@ registerEmailInputEventHandler(
   EMAIL_MESSAGE,
   RegExp
 );
+
+//--------------------휴대전화------------------
+const phoneNumberInputDOM = document.querySelector("#phone_number");
+const phoneNumberMessageDOM = document.querySelector(".phone_number_message");
+
+function registerPhoneNumberInputEventHandler(
+  phoneNumberInputDOM,
+  phoneNumberMessageDOM,
+  PHONE_NUMBER_MESSAGE,
+  RegExp
+) {
+  phoneNumberInputDOM.addEventListener("focusout", () => {
+    const targetPhoneNumber = event.target.value;
+
+    if (judgePhoneNumberBlank(targetPhoneNumber)) {
+      insertPhoneNumberBlankDiscriminantMessage(
+        phoneNumberMessageDOM,
+        PHONE_NUMBER_MESSAGE.DEFAULT
+      );
+    } else if (
+      !judgePhoneNumberRegExp(targetPhoneNumber, RegExp.PHONE_NUMBER)
+    ) {
+      insertPhoneNumberRegExpDiscriminantMessage(
+        phoneNumberMessageDOM,
+        PHONE_NUMBER_MESSAGE.ERROR_REGEXP
+      );
+    } else {
+      phoneNumberMessageDOM.style.color = "#00c850";
+      phoneNumberMessageDOM.innerText = PHONE_NUMBER_MESSAGE.SUCCESS;
+    }
+  });
+}
+
+function judgePhoneNumberRegExp(targetPhoneNumber, RegExp) {
+  return RegExp.test(targetPhoneNumber);
+}
+
+function judgePhoneNumberBlank(targetPhoneNumber) {
+  if (targetPhoneNumber === "") {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function insertPhoneNumberRegExpDiscriminantMessage(
+  phoneNumberMessageDOM,
+  ERROR_REGEXP_MESSAGE
+) {
+  phoneNumberMessageDOM.style.color = "#EB0000";
+  phoneNumberMessageDOM.innerText = ERROR_REGEXP_MESSAGE;
+}
+
+function insertPhoneNumberBlankDiscriminantMessage(
+  phoneNumberMessageDOM,
+  DEFAULT_MESSAGE
+) {
+  phoneNumberMessageDOM.style.color = "#EB0000";
+  phoneNumberMessageDOM.innerText = DEFAULT_MESSAGE;
+}
+
+registerPhoneNumberInputEventHandler(
+  phoneNumberInputDOM,
+  phoneNumberMessageDOM,
+  PHONE_NUMBER_MESSAGE,
+  RegExp
+);
+
 //--------------------관심사--------------------
 
 const intersetInputDOM = document.querySelector(".tag-container input");
@@ -271,8 +343,6 @@ const clauseModal = document.querySelector(".madal");
 const modalAgreementBtn = document.querySelector(".madal_agree_btn button");
 const agreementCheckBox = document.querySelector("#agreement");
 
-console.dir((agreementCheckBox.disabled = false));
-
 agreementBtn.addEventListener("click", () => {
   blindArea.className = "blind";
   clauseModal.style.visibility = "unset";

diff --git a/frontend/js/signUp_ellin.js b/frontend/js/signUp_ellin.js
@@ -1,10 +1,8 @@
-import RegExp from "/constants/RegExp.js";
-import validationState from "./validationState.js";
+import RegExp from "../constants/RegExp.js";
 import {
   PASSWORD_MESSAGE,
-  PASSWORD_RECONFIRM_MESSAGE,
-  BIRTHDAY_MESSAGE
-} from "/constants/message.js";
+  PASSWORD_RECONFIRM_MESSAGE
+} from "../constants/message.js";
 
 (function() {
   const singUpForm = document.querySelector(".join");

diff --git a/frontend/js/validationState.js b/frontend/js/validationState.js
@@ -4,11 +4,7 @@ const validationState = {
   email: false,
   name: false,
   phone_number: false,
-  clause: false,
-  password: false,
-  passwordReconfirm: false,
-  birthdayYear: false,
-  birthdayMonth: false,
-  birthdayDay: false
+  clause: false
 };
+
 export default validationState;
diff --git a/frontend/login.html b/frontend/login.html
@@ -1,33 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/css/reset.css" />
+    <link rel="stylesheet" href="/css/login.css" />
+    <title>로그인</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="/css/reset.css" />
-  <link rel="stylesheet" href="/css/login.css" />
-  <title>로그인</title>
-</head>
-
-<body>
-  <div class="header">
-    <form action="default" method="POST" class="join">
-      <div class="join_row">
-        <input type="text" name="id" class="join_box" placeholder="로그인" />
-      </div>
-      <div class="join_row">
-        <input type="password" name="password" class="join_box" placeholder="비밀번호" />
-      </div>
-      <div class="btn_area">
-        <button type="submit" class="join_btn">
-          <span class="btn_font">로그인</span>
-        </button>
-        <button type="button" class="join_btn">
-          <span class="btn_font">회원가입</span>
-        </button>
-      </div>
-    </form>
-  </div>
-</body>
-
-</html>
+  <body>
+    <div class="header">
+      <form action="default" method="POST" class="join">
+        <div class="join_row">
+          <input type="text" name="id" class="join_box" placeholder="로그인" />
+        </div>
+        <div class="join_row">
+          <input
+            type="password"
+            name="password"
+            class="join_box"
+            placeholder="비밀번호"
+          />
+        </div>
+        <div class="btn_area">
+          <button type="submit" class="join_btn">
+            <span class="btn_font">로그인</span>
+          </button>
+          <button type="button" class="join_btn">
+            <span class="btn_font">회원가입</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </body>
+</html>