refactor(FE) : 회원가입 페이지 비밀번호 체크 수정 (#88)

client/src/components/auth/register.js

@@ -85,8 +85,14 @@ const register = () => {
       .replace(/(\-{1,2})$/g, '');
   };
 
+  const checkPassword = (target) => {
+    if (userData.password !== userData.passwordCheck) return target.classList.add('invalid');
+    target.classList.remove('invalid');
+  };
+
   const testValidation = ({ target }, type, reg) => {
     if (target.type === 'tel') return putAutoHyphen(target);
+    if (type === 'passwordCheck') return checkPassword(target);
     const isValidate = reg.test(target.value);
 
     changeButtonStatus(type, isValidate);
@@ -135,6 +141,12 @@ const register = () => {
       $.find('#phone-input'),
       $.on('input', (e) => testValidation(e, '.phone', emailReg)))(target);
 
+  // prettier-ignore
+  const validatePassword = (target) => 
+    _.pipe(
+      $.find('#password-check-input'),
+      $.on('input', (e) => testValidation(e, 'passwordCheck', codeReg)))(target);
+
   // prettier-ignore
   const sendVerificationCode = () =>
     new Promise((resolve) =>
@@ -178,6 +190,7 @@ const register = () => {
       handleClickEye,
       validateEmail,
       validatePhone,
+      validatePassword,
       sendVerificationCode(),
       validateCode,
       submitData);

client/src/constants/constant.js

@@ -1,6 +1,6 @@
 const SERVER_URL = {
   IMG: 'https://amatta-icons.s3.ap-northeast-2.amazonaws.com/',
-  API: 'http://backend.amatta.site/',
+  API: 'https://backend.amatta.site/',
 };
 
 const EMAIL_REG = '^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$';

client/src/styles/auth.scss

@@ -144,6 +144,13 @@
         }
       }
 
+      .invalid {
+        border-bottom: 1px solid $red-color !important;
+        + label {
+          color: $red-color !important;
+        }
+      }
+
       .confirm-button,
       .verify-button {
         position: absolute;