feature(FE) : register form 서버 연결 (#88)

client/src/apis/auth.js

@@ -0,0 +1,9 @@
+import client from './client';
+
+export const regiseterUser = async (data) => {
+  const response = await client.post('user/join', data);
+
+  return response;
+};
+
+export const login = async () => {};

client/src/components/auth/register.js

@@ -1,13 +1,17 @@
 import { inputForm } from '@/components/common';
+import { regiseterUser } from '@/apis/auth';
+import { navigate } from '@/core/router';
 import { INPUT } from '@/constants/constant';
 import { $ } from '@/utils';
 import { _ } from '@/utils/customFx';
 
 const register = () => {
-  const REGISTER_INPUT_TYPE = ['email', 'verificationCode', 'tel', 'password'];
+  const REGISTER_INPUT_TYPE = ['userName', 'email', 'verificationCode', 'tel', 'password'];
   const emailReg = /^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
   const codeReg = /^[0-9]{6}$/i;
+
   let userData = {
+    name: '',
     email: '',
     verificationCode: '',
     phoneNumber: '',
@@ -21,18 +25,25 @@ const register = () => {
     <h5>기프티콘을 효율적으로 관리해보세요.</h5>
   `;
 
-  const setUserData = ({ target }) => {
+  const setUserData = ({ target }, targets) => {
     const dataType = _.getDataset(target, 'data-input');
     const newUserData = { ...userData };
+    checkValidateAll(targets);
+
+    if (!target.validity.valid) return;
+
+    newUserData[dataType] = target.value;
+    userData = newUserData;
 
-    if (target.validity.valid) {
-      newUserData[dataType] = target.value;
-      userData = newUserData;
-    }
-    console.log(userData);
     return userData;
   };
 
+  const checkValidateAll = (targets) => {
+    if (![...targets].every((target) => target.validity.valid)) return;
+
+    $.qs('.auth-button').classList.add('active');
+  };
+
   const addCodeForm = (e, resolve) => {
     const formTarget = $.qs('#verification-code-input-section');
 
@@ -53,22 +64,35 @@ const register = () => {
   };
 
   const testValidation = ({ target }, type, reg) => {
-    if (target.type === 'tel') {
-      return putAutoHyphen(target);
-    }
+    if (target.type === 'tel') return putAutoHyphen(target);
     const isValidate = reg.test(target.value);
 
     changeButtonStatus(type, isValidate);
   };
 
+  const handleClickSubmitButton = (e) => {
+    console.log(e);
+    e.stopPropagation();
+    e.preventDefault();
+
+    const { name, email, password, phoneNumber } = userData;
+    const data = { name, email, password, phoneNumber };
+
+    regiseterUser(data);
+  };
+
   // prettier-ignore
   const handleChangeInput = (target) => 
     _.pipe(
       $.findAll('.text-input'),
-      _.tap(
-        _.map((f) => $.on('change', setUserData)(f))
-        ),
-      console.log)(target);
+      (targets) => _.map((f) => $.on('input', (e) => setUserData(e, targets))(f), targets),
+      ([f]) => f)(target);
+
+  // prettier-ignore
+  const handleClickGoBack = (target) => 
+    _.pipe(
+      $.find('.left-arrow-button'),
+      $.on('click', () => navigate('/')))(target);
 
   // prettier-ignore
   const validateEmail = (target) =>
@@ -95,6 +119,12 @@ const register = () => {
       $.find('#verification-code-input'),
       $.on('input', (e) => testValidation(e, '.confirm-button', codeReg)))(target);
 
+  // prettier-ignore
+  const submitData = (target) => 
+    _.pipe(
+      $.find('.auth-button'),
+      $.on('click', (e) => handleClickSubmitButton(e)))(target);
+
   // prettier-ignore
   const render = () =>
     new Promise(resolve =>
@@ -115,10 +145,12 @@ const register = () => {
     _.go(
       render(),
       handleChangeInput,
+      handleClickGoBack,
       validateEmail,
       validatePhone,
       sendVerificationCode(),
-      validateCode);
+      validateCode,
+      submitData);
 
   return appendRegister;
 };

client/src/constants/constant.js

@@ -47,6 +47,13 @@ const INPUT = [
     dataType: 'email',
     pattern: EMAIL_REG,
   },
+  {
+    type: 'userName',
+    name: 'user-name-input',
+    label: '이름',
+    required: true,
+    dataType: 'userName',
+  },
 ];
 
 export { SERVER_URL, INPUT };

client/src/main.js

@@ -2,8 +2,6 @@ import '@/styles/style.scss';
 import { setScreenSize } from '@/utils';
 import { navigateHome, navigateAuth, navigateMain, navigatePost } from '@/pages';
 import { routes, navigate } from '@/core/router';
-import { _ } from '@/utils/customFx';
-// import client from '@/apis/client';
 
 routes.push(
   { path: '/', component: navigateHome },
@@ -16,14 +14,3 @@ const path = window.location.pathname;
 navigate(path);
 
 window.addEventListener('resize', setScreenSize);
-
-// client.get('cookie');
-
-const test = async () => 'test';
-const test2 = async () => 'test2';
-
-const start = async () => {
-  _.go(await test(), console.log, test2, console.log);
-};
-
-// start();

client/src/styles/auth.scss

@@ -6,6 +6,7 @@
   align-items: center;
 
   .white-header-section {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;

client/src/styles/style.scss

@@ -13,5 +13,5 @@
   margin: 0;
   padding: 0;
   font-family: 'Nanum Gothic', sans-serif;
-  overflow: hidden;
+  overflow-x: hidden;
 }