[Refactor] Refactoring into auth and group reducers

src/App.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { Switch, Route } from 'react-router-dom';
 
 import { loadItem } from './services/storage';
-import { setUser } from './reducers/slice';
+import { setUser } from './reducers/authSlice';
 
 import MainPage from './pages/MainPage';
 import WritePage from './pages/WritePage';

src/App.test.jsx

@@ -24,19 +24,23 @@ describe('App', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((selector) => selector({
-      groups: STUDY_GROUPS,
-      group: given.group,
-      writeField: {
-        tags: [],
+      groupReducer: {
+        groups: STUDY_GROUPS,
+        group: given.group,
+        writeField: {
+          tags: [],
+        },
       },
-      register: {
-        userEmail: '',
-        password: '',
-        passwordConfirm: '',
-      },
-      login: {
-        userEmail: '',
-        password: '',
+      authReducer: {
+        register: {
+          userEmail: '',
+          password: '',
+          passwordConfirm: '',
+        },
+        login: {
+          userEmail: '',
+          password: '',
+        },
       },
     }));
   });
@@ -103,7 +107,7 @@ describe('App', () => {
       renderApp({ path: '/' });
 
       expect(dispatch).toBeCalledWith({
-        type: 'application/setUser',
+        type: 'auth/setUser',
         payload: user.email,
       });
     });

src/containers/auth/LoginFormContainer.jsx

@@ -4,10 +4,10 @@ import { useUnmount } from 'react-use';
 import { useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { get, isCheckValidate } from '../../util/utils';
+import { getAuth, isCheckValidate } from '../../util/utils';
 import {
   changeAuthField, clearAuth, clearAuthFields, requestLogin,
-} from '../../reducers/slice';
+} from '../../reducers/authSlice';
 import { ERROR_MESSAGE, FIREBASE_AUTH_ERROR_MESSAGE } from '../../util/messages';
 
 import AuthForm from '../../components/auth/AuthForm';
@@ -20,9 +20,9 @@ const LoginFormContainer = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const login = useSelector(get('login'));
-  const user = useSelector(get('user'));
-  const authError = useSelector(get('authError'));
+  const login = useSelector(getAuth('login'));
+  const user = useSelector(getAuth('user'));
+  const authError = useSelector(getAuth('authError'));
 
   const onChangeLoginField = useCallback(({ name, value }) => {
     dispatch(

src/containers/auth/LoginFormContainer.test.jsx

@@ -25,9 +25,11 @@ describe('LoginFormContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((selector) => selector({
-      login: given.login,
-      user: given.user,
-      authError: given.authError,
+      authReducer: {
+        login: given.login,
+        user: given.user,
+        authError: given.authError,
+      },
     }));
   });
 
@@ -70,7 +72,7 @@ describe('LoginFormContainer', () => {
         fireEvent.change(field, { target: { value, name } });
 
         expect(dispatch).toBeCalledWith({
-          type: 'application/changeAuthField',
+          type: 'auth/changeAuthField',
           payload: {
             form: 'login',
             name,
@@ -149,7 +151,7 @@ describe('LoginFormContainer', () => {
         expect(container).toHaveTextContent('로그인에 실패하였습니다.');
 
         expect(dispatch).toBeCalledWith({
-          type: 'application/clearAuthFields',
+          type: 'auth/clearAuthFields',
         });
       });
     });

src/containers/auth/RegisterFormContainer.jsx

@@ -4,10 +4,10 @@ import { useUnmount } from 'react-use';
 import { useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { get, isCheckValidate } from '../../util/utils';
+import { getAuth, isCheckValidate } from '../../util/utils';
 import {
   changeAuthField, clearAuth, clearAuthFields, requestRegister,
-} from '../../reducers/slice';
+} from '../../reducers/authSlice';
 import { ERROR_MESSAGE, FIREBASE_AUTH_ERROR_MESSAGE } from '../../util/messages';
 
 import AuthForm from '../../components/auth/AuthForm';
@@ -20,10 +20,10 @@ const RegisterFormContainer = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const register = useSelector(get('register'));
-  const auth = useSelector(get('auth'));
-  const user = useSelector(get('user'));
-  const authError = useSelector(get('authError'));
+  const register = useSelector(getAuth('register'));
+  const auth = useSelector(getAuth('auth'));
+  const user = useSelector(getAuth('user'));
+  const authError = useSelector(getAuth('authError'));
 
   const onChangeRegisterField = useCallback(({ name, value }) => {
     dispatch(

src/containers/auth/RegisterFormContainer.test.jsx

@@ -26,10 +26,12 @@ describe('RegisterFormContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((selector) => selector({
-      user: given.user,
-      auth: given.auth,
-      authError: given.authError,
-      register: given.register,
+      authReducer: {
+        user: given.user,
+        auth: given.auth,
+        authError: given.authError,
+        register: given.register,
+      },
     }));
   });
 
@@ -78,7 +80,7 @@ describe('RegisterFormContainer', () => {
         fireEvent.change(field, { target: { value, name } });
 
         expect(dispatch).toBeCalledWith({
-          type: 'application/changeAuthField',
+          type: 'auth/changeAuthField',
           payload: {
             form: 'register',
             name,
@@ -153,7 +155,7 @@ describe('RegisterFormContainer', () => {
               name: 'password',
               value: '',
             },
-            type: 'application/changeAuthField',
+            type: 'auth/changeAuthField',
           });
 
           expect(container).toHaveTextContent('비밀번호가 일치하지 않습니다.');

src/containers/common/HeaderContainer.jsx

@@ -3,16 +3,16 @@ import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { get } from '../../util/utils';
-import { requestLogout } from '../../reducers/slice';
+import { getAuth } from '../../util/utils';
+import { requestLogout } from '../../reducers/authSlice';
 
 import Header from '../../components/common/Header';
 
 const HeaderContainer = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const user = useSelector(get('user'));
+  const user = useSelector(getAuth('user'));
 
   const onLogout = useCallback(() => {
     dispatch(requestLogout());

src/containers/common/HeaderContainer.test.jsx

@@ -26,7 +26,9 @@ describe('HeaderContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((selector) => selector({
-      user: given.user,
+      authReducer: {
+        user: given.user,
+      },
     }));
   });
 

src/containers/groups/StudyGroupsContainer.jsx

@@ -6,8 +6,8 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import qs from 'qs';
 
-import { get } from '../../util/utils';
-import { loadStudyGroups } from '../../reducers/slice';
+import { getAuth, getGroup } from '../../util/utils';
+import { loadStudyGroups } from '../../reducers/groupSlice';
 
 import StudyGroups from '../../components/main/StudyGroups';
 
@@ -17,8 +17,8 @@ const StudyGroupsContainer = () => {
 
   const dispatch = useDispatch();
 
-  const groups = useSelector(get('groups'));
-  const user = useSelector(get('user'));
+  const groups = useSelector(getGroup('groups'));
+  const user = useSelector(getAuth('user'));
 
   useInterval(() => {
     setRealTime(Date.now());

src/containers/groups/StudyGroupsContainer.test.jsx

@@ -15,7 +15,12 @@ describe('StudyGroupsContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((selector) => selector({
-      groups: given.groups,
+      groupReducer: {
+        groups: given.groups,
+      },
+      authReducer: {
+        user: 'user1',
+      },
     }));
   });
 

src/containers/introduce/IntroduceContainer.jsx

@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useInterval } from 'react-use';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { get } from '../../util/utils';
-import { loadStudyGroup, updateStudyGroup } from '../../reducers/slice';
+import { getAuth, getGroup } from '../../util/utils';
+import { loadStudyGroup, updateStudyGroup } from '../../reducers/groupSlice';
 
 import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
 
@@ -13,8 +13,8 @@ const IntroduceContainer = ({ groupId }) => {
 
   const dispatch = useDispatch();
 
-  const group = useSelector(get('group'));
-  const user = useSelector(get('user'));
+  const group = useSelector(getGroup('group'));
+  const user = useSelector(getAuth('user'));
 
   useEffect(() => {
     dispatch(loadStudyGroup(groupId));

src/containers/introduce/IntroduceContainer.test.jsx

@@ -19,8 +19,12 @@ describe('IntroduceContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((state) => state({
-      group: given.group,
-      user: given.user,
+      authReducer: {
+        user: given.user,
+      },
+      groupReducer: {
+        group: given.group,
+      },
     }));
   });
 

src/containers/write/TagsFormContainer.jsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import { get } from '../../util/utils';
+import { getGroup } from '../../util/utils';
 import TagsForm from '../../components/write/TagsForm';
 
-import { changeWriteField } from '../../reducers/slice';
+import { changeWriteField } from '../../reducers/groupSlice';
 
 const TagsFormContainer = () => {
   const dispatch = useDispatch();
 
-  const { tags } = useSelector(get('writeField'));
+  const { tags } = useSelector(getGroup('writeField'));
 
   const onChangeTags = (nextTags) => {
     dispatch(

src/containers/write/TagsFormContainer.test.jsx

@@ -15,8 +15,10 @@ describe('TagsFormContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((state) => state({
-      writeField: {
-        tags: [],
+      groupReducer: {
+        writeField: {
+          tags: [],
+        },
       },
     }));
   });
@@ -49,7 +51,7 @@ describe('TagsFormContainer', () => {
         expect(input).toHaveValue('');
       });
       expect(dispatch).toBeCalledWith({
-        type: 'application/changeWriteField',
+        type: 'group/changeWriteField',
         payload: { name: 'tags', value: tags },
       });
     });

src/containers/write/WriteButtonsContainer.jsx

@@ -4,8 +4,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { ERROR_MESSAGE } from '../../util/messages';
-import { get, isCheckValidate } from '../../util/utils';
-import { writeStudyGroup } from '../../reducers/slice';
+import { getAuth, getGroup, isCheckValidate } from '../../util/utils';
+import { writeStudyGroup } from '../../reducers/groupSlice';
 
 import WriteButtons from '../../components/write/WriteButtons';
 
@@ -21,9 +21,9 @@ const WriteButtonsContainer = () => {
   const history = useHistory();
   const dispatch = useDispatch();
 
-  const writeField = useSelector(get('writeField'));
-  const groupId = useSelector(get('groupId'));
-  const user = useSelector(get('user'));
+  const writeField = useSelector(getGroup('writeField'));
+  const groupId = useSelector(getGroup('groupId'));
+  const user = useSelector(getAuth('user'));
 
   const {
     title, applyEndDate, personnel, tags,

src/containers/write/WriteButtonsContainer.test.jsx

@@ -28,9 +28,13 @@ describe('WriteButtonsContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((state) => state({
-      writeField: given.writeField,
-      groupId: given.groupId,
-      user: given.user,
+      groupReducer: {
+        writeField: given.writeField,
+        groupId: given.groupId,
+      },
+      authReducer: {
+        user: given.user,
+      },
     }));
   });
 

src/containers/write/WriteEditorContainer.jsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 
 import { useDispatch } from 'react-redux';
 
-import { changeWriteField } from '../../reducers/slice';
+import { changeWriteField } from '../../reducers/groupSlice';
 
 import WriteEditor from '../../components/write/WriteEditor';
 

src/containers/write/WriteEditorContainer.test.jsx

@@ -15,8 +15,10 @@ describe('WriteEditorContainer', () => {
     useDispatch.mockImplementation(() => dispatch);
 
     useSelector.mockImplementation((state) => state({
-      writeField: {
-        contents: '',
+      groupReducer: {
+        writeField: {
+          contents: '',
+        },
       },
     }));
   });