[Feature] Membership authentication error handling

package.json

@@ -26,9 +26,12 @@
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",
+    "@material-ui/core": "^4.11.3",
+    "axios": "^0.21.1",
     "emotion": "^11.0.0",
     "facepaint": "^1.2.1",
     "lodash": "^4.17.20",
+    "notistack": "^1.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-responsive": "^8.2.0",

src/App.test.jsx

@@ -4,16 +4,20 @@ import { render, fireEvent } from '@testing-library/react';
 
 import { RecoilRoot } from 'recoil';
 
+import { SnackbarProvider } from 'notistack';
+
 import App from './App';
 import InjectTestingRecoilState from './components/common/InjectTestingRecoilState';
 
 describe('App', () => {
   const renderApp = ({ todos }) => render((
     <RecoilRoot>
-      <InjectTestingRecoilState
-        todos={todos}
-      />
-      <App />
+      <SnackbarProvider>
+        <InjectTestingRecoilState
+          todos={todos}
+        />
+        <App />
+      </SnackbarProvider>
     </RecoilRoot>
   ));
 

src/components/auth/AuthModalForm.jsx

@@ -5,8 +5,12 @@ import { useRecoilValue, useResetRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
-import { FORM_TYPE } from '../../utils/constants/constants';
-import authFieldsAtom, { authStatusAtom } from '../../recoil/auth';
+import { useSnackbar } from 'notistack';
+
+import { isCheckValidate } from '../../utils/utils';
+import { FORM_TYPE, EMPTY_AUTH_INPUT } from '../../utils/constants/constants';
+
+import authFieldsAtom, { authStatusAtom, authWithFields } from '../../recoil/auth';
 
 import AuthInput from './AuthInput';
 
@@ -61,13 +65,22 @@ const AuthFormWrapper = styled.form`
 `;
 
 const AuthModalForm = () => {
+  const { enqueueSnackbar } = useSnackbar();
+
   const { type, visible } = useRecoilValue(authStatusAtom);
+  const authFieldsState = useRecoilValue(authWithFields);
 
   const resetAuthStatusState = useResetRecoilState(authStatusAtom);
   const resetAuthFieldsState = useResetRecoilState(authFieldsAtom);
 
   const handleSubmit = (e) => {
     e.preventDefault();
+
+    if (!isCheckValidate(authFieldsState)) {
+      enqueueSnackbar(EMPTY_AUTH_INPUT, {
+        variant: 'error',
+      });
+    }
   };
 
   const onCloseAuthModal = () => {

src/components/auth/AuthModalForm.test.jsx

@@ -4,6 +4,8 @@ import { RecoilRoot } from 'recoil';
 
 import { render, fireEvent } from '@testing-library/react';
 
+import { SnackbarProvider } from 'notistack';
+
 import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 import AuthModalForm from './AuthModalForm';
 
@@ -22,11 +24,13 @@ const authFieldsState = {
 describe('AuthModalForm', () => {
   const renderAuthForm = ({ auth, fields = authFieldsState }) => render((
     <RecoilRoot>
-      <InjectTestingRecoilState
-        auth={auth}
-        authFields={fields}
-      />
-      <AuthModalForm />
+      <SnackbarProvider>
+        <InjectTestingRecoilState
+          auth={auth}
+          authFields={fields}
+        />
+        <AuthModalForm />
+      </SnackbarProvider>
     </RecoilRoot>
   ));
 
@@ -62,17 +66,53 @@ describe('AuthModalForm', () => {
       });
     });
 
-    it('When click Submit button, listen event', () => {
-      const props = {
-        auth: {
-          type: 'register',
-          visible: true,
-        },
-      };
+    context('Is Submit error', () => {
+      describe('When click Submit button, listen event', () => {
+        it('Renders error message "입력이 안된 사항이 있습니다."', () => {
+          const props = {
+            auth: {
+              type: 'register',
+              visible: true,
+            },
+          };
+
+          const { container, getByTestId } = renderAuthForm(props);
+
+          fireEvent.submit(getByTestId('auth-submit-button'));
 
-      const { getByTestId } = renderAuthForm(props);
+          expect(container).toHaveTextContent('입력이 안된 사항이 있습니다.');
+        });
+      });
+    });
 
-      fireEvent.submit(getByTestId('auth-submit-button'));
+    context("Isn't Submit error", () => {
+      describe('When click Submit button, listen event', () => {
+        it('Success submit', () => {
+          const props = {
+            auth: {
+              type: 'register',
+              visible: true,
+            },
+            fields: {
+              register: {
+                userId: 'test',
+                password: 'test',
+                passwordConfirm: 'test',
+              },
+              login: {
+                userId: '',
+                password: '',
+              },
+            },
+          };
+
+          const { container, getByTestId } = renderAuthForm(props);
+
+          fireEvent.submit(getByTestId('auth-submit-button'));
+
+          expect(container).not.toHaveTextContent('입력이 안된 사항이 있습니다.');
+        });
+      });
     });
 
     it('When click Close button, the modal window is closed.', () => {

src/index.jsx

@@ -4,14 +4,25 @@ import ReactDOM from 'react-dom';
 
 import { RecoilRoot } from 'recoil';
 
+import { SnackbarProvider } from 'notistack';
+
 import App from './App';
 
 import './assets/css/global.css';
 
 ReactDOM.render(
   (
     <RecoilRoot>
-      <App />
+      <SnackbarProvider
+        maxSnack={3}
+        preventDuplicate
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <App />
+      </SnackbarProvider>
     </RecoilRoot>
   ),
   document.getElementById('app'),

src/utils/constants/constants.js

@@ -22,3 +22,5 @@ export const FORM_TYPE = {
   register: 'Sign up',
   logout: 'Sign out',
 };
+
+export const EMPTY_AUTH_INPUT = '입력이 안된 사항이 있습니다.';

src/utils/utils.js

@@ -21,3 +21,7 @@ export const filteredTodos = {
   ACTIVE: (state) => (state.filter(isActive)),
   COMPLETED: (state) => (state.filter(isCompleted)),
 };
+
+export const isCheckValidate = (inputValue) => Object
+  .entries(inputValue)
+  .every((value) => _.trim(value[1]));