[Feature] Firebase auth settings and sign up implemented

src/components/auth/AuthForm.jsx

@@ -11,7 +11,9 @@ const FORM_TYPE = {
   register: '회원가입',
 };
 
-const AuthForm = ({ type, onChange, fields }) => {
+const AuthForm = ({
+  type, fields, onChange, onSubmit,
+}) => {
   const formType = FORM_TYPE[type];
 
   const { userEmail, password } = fields;
@@ -22,35 +24,49 @@ const AuthForm = ({ type, onChange, fields }) => {
     onChange({ name, value });
   };
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    onSubmit();
+  };
+
   return (
     <AuthFormWrapper>
       <h2>{formType}</h2>
-      <input
-        type="text"
-        value={userEmail}
-        name="userEmail"
-        placeholder="이메일"
-        autoComplete="email"
-        onChange={handleChange}
-      />
-      <input
-        type="password"
-        value={password}
-        name="password"
-        placeholder="비밀번호"
-        autoComplete="password"
-        onChange={handleChange}
-      />
-      {type === 'register' && (
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={userEmail}
+          name="userEmail"
+          placeholder="이메일"
+          autoComplete="email"
+          onChange={handleChange}
+        />
         <input
           type="password"
-          value={fields.passwordConfirm}
-          name="passwordConfirm"
-          placeholder="비밀번호 확인"
-          autoComplete="new-password"
+          value={password}
+          name="password"
+          placeholder="비밀번호"
+          autoComplete="password"
           onChange={handleChange}
         />
-      )}
+        {type === 'register' && (
+          <input
+            type="password"
+            value={fields.passwordConfirm}
+            name="passwordConfirm"
+            placeholder="비밀번호 확인"
+            autoComplete="new-password"
+            onChange={handleChange}
+          />
+        )}
+        <button
+          data-testid="auth-button"
+          type="submit"
+        >
+          {formType}
+        </button>
+      </form>
     </AuthFormWrapper>
   );
 };

src/components/auth/AuthForm.test.jsx

@@ -6,16 +6,19 @@ import AuthForm from './AuthForm';
 
 describe('AuthForm', () => {
   const handleChange = jest.fn();
+  const handleSubmit = jest.fn();
 
   beforeEach(() => {
     handleChange.mockClear();
+    handleSubmit.mockClear();
   });
 
   const renderAuthForm = ({ type, fields }) => render((
     <AuthForm
       type={type}
       fields={fields}
       onChange={handleChange}
+      onSubmit={handleSubmit}
     />
   ));
 
@@ -94,5 +97,17 @@ describe('AuthForm', () => {
         expect(handleChange).toBeCalled();
       });
     });
+
+    it('listens event call submit', () => {
+      const { getByTestId } = renderAuthForm(register);
+
+      const button = getByTestId('auth-button');
+
+      expect(button).not.toBeNull();
+
+      fireEvent.submit(button);
+
+      expect(handleSubmit).toBeCalled();
+    });
   });
 });

src/containers/auth/RegisterFormContainer.jsx

@@ -1,16 +1,20 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
+import { useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { get } from '../../util/utils';
-import { changeAuthField } from '../../reducers/slice';
+import { changeAuthField, clearAuth, requestRegister } from '../../reducers/slice';
 
 import AuthForm from '../../components/auth/AuthForm';
 
 const RegisterFormContainer = () => {
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const register = useSelector(get('register'));
+  const auth = useSelector(get('auth'));
+  const authError = useSelector(get('authError'));
 
   const onChangeRegisterField = useCallback(({ name, value }) => {
     dispatch(
@@ -20,13 +24,33 @@ const RegisterFormContainer = () => {
         value,
       }),
     );
-  });
+  }, [dispatch]);
+
+  const onSubmit = useCallback(() => {
+    dispatch(requestRegister());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (auth) {
+      history.push('/login');
+    }
+
+    if (authError) {
+      // TODO: 추 후 error 처리
+      console.error(authError);
+    }
+
+    return () => {
+      dispatch(clearAuth());
+    };
+  }, [dispatch, auth, authError]);
 
   return (
     <AuthForm
       type="register"
-      onChange={onChangeRegisterField}
       fields={register}
+      onChange={onChangeRegisterField}
+      onSubmit={onSubmit}
     />
   );
 };

src/containers/auth/RegisterFormContainer.test.jsx

@@ -1,11 +1,21 @@
 import React from 'react';
 
+import { MemoryRouter } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { render, fireEvent } from '@testing-library/react';
 
 import RegisterFormContainer from './RegisterFormContainer';
 
+const mockPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory() {
+    return { push: mockPush };
+  },
+}));
+
 describe('RegisterFormContainer', () => {
   const dispatch = jest.fn();
 
@@ -19,11 +29,15 @@ describe('RegisterFormContainer', () => {
         password: '',
         passwordConfirm: '',
       },
+      auth: given.auth,
+      authError: given.authError,
     }));
   });
 
   const renderRegisterFormContainer = () => render((
-    <RegisterFormContainer />
+    <MemoryRouter>
+      <RegisterFormContainer />
+    </MemoryRouter>
   ));
 
   it('renders register form text', () => {
@@ -62,5 +76,38 @@ describe('RegisterFormContainer', () => {
         });
       });
     });
+
+    it('submit event calls dispatch', () => {
+      const { getByTestId } = renderRegisterFormContainer();
+
+      const button = getByTestId('auth-button');
+
+      expect(button).not.toBeNull();
+
+      fireEvent.submit(button);
+
+      expect(dispatch).toBeCalled();
+    });
+  });
+
+  describe('action after signing up', () => {
+    context('when success auth to register', () => {
+      given('auth', () => ({
+        auth: 'seungmin@naver.com',
+      }));
+
+      it('go to login page', () => {
+        renderRegisterFormContainer();
+
+        expect(mockPush).toBeCalledWith('/login');
+      });
+    });
+
+    // TODO: 현재 authError는 콘솔 출력
+    context('when failure auth to register', () => {
+      given('authError', () => ({
+        authError: 'error',
+      }));
+    });
   });
 });

src/reducers/slice.js

@@ -6,6 +6,7 @@ import {
   getStudyGroup,
   getStudyGroups,
   postStudyGroup,
+  postUserRegister,
 } from '../services/api';
 
 const writeInitialState = {
@@ -39,6 +40,8 @@ const { actions, reducer } = createSlice({
     writeField: writeInitialState,
     register: authInitialState.register,
     login: authInitialState.login,
+    auth: null,
+    authError: null,
   },
 
   reducers: {
@@ -95,6 +98,38 @@ const { actions, reducer } = createSlice({
         draft[form][name] = value;
       });
     },
+
+    clearAuthFields(state) {
+      const { register, login } = authInitialState;
+
+      return {
+        ...state,
+        register,
+        login,
+      };
+    },
+
+    setAuth(state, { payload: user }) {
+      return {
+        ...state,
+        auth: user,
+      };
+    },
+
+    setAuthError(state, { payload: error }) {
+      return {
+        ...state,
+        authError: error,
+      };
+    },
+
+    clearAuth(state) {
+      return {
+        ...state,
+        auth: null,
+        authError: null,
+      };
+    },
   },
 });
 
@@ -105,6 +140,10 @@ export const {
   clearWriteFields,
   successWrite,
   changeAuthField,
+  clearAuthFields,
+  setAuth,
+  setAuthError,
+  clearAuth,
 } = actions;
 
 export const loadStudyGroups = (tag) => async (dispatch) => {
@@ -135,4 +174,18 @@ export const writeStudyGroup = () => async (dispatch, getState) => {
   dispatch(clearWriteFields());
 };
 
+export const requestRegister = () => async (dispatch, getState) => {
+  const { register: { userEmail, password } } = getState();
+
+  try {
+    const { user } = await postUserRegister({ userEmail, password });
+
+    dispatch(setAuth(user.email));
+
+    dispatch(clearAuthFields());
+  } catch (error) {
+    setAuthError(error);
+  }
+};
+
 export default reducer;