[Feature] Change form action setting of login page and register page

.eslintrc.js

@@ -52,5 +52,6 @@ module.exports = {
     'react/prop-types': 'off',
     'linebreak-style': 'off',
     'no-proto': 'off',
+    'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['draft'] }],
   },
 };

package.json

@@ -31,18 +31,19 @@
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "firebase": "^8.1.1",
+    "immer": "^8.0.0",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.32",
     "qs": "^6.9.4",
     "react": "^17.0.1",
-    "redux-devtools-extension": "^2.13.8",
     "react-dom": "^17.0.1",
     "react-draft-wysiwyg": "^1.14.5",
-    "redux-logger": "^3.0.6",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-logger": "^3.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",

src/App.test.jsx

@@ -27,6 +27,15 @@ describe('App', () => {
       writeField: {
         tags: [],
       },
+      register: {
+        userEmail: '',
+        password: '',
+        passwordConfirm: '',
+      },
+      login: {
+        userEmail: '',
+        password: '',
+      },
     }));
   });
 
@@ -67,15 +76,15 @@ describe('App', () => {
     it('renders the study login page', () => {
       const { container } = renderApp({ path: '/login' });
 
-      expect(container).toHaveTextContent('Login');
+      expect(container).toHaveTextContent('로그인');
     });
   });
 
   context('with path /register', () => {
     it('renders the study register page', () => {
       const { container } = renderApp({ path: '/register' });
 
-      expect(container).toHaveTextContent('Register');
+      expect(container).toHaveTextContent('회원가입');
     });
   });
 });

src/components/auth/AuthForm.jsx

@@ -1,20 +1,58 @@
 import React from 'react';
 
 import styled from '@emotion/styled';
+
 import Responsive from '../../styles/Responsive';
 
 const AuthFormWrapper = styled(Responsive)``;
 
-const AuthForm = ({ type }) => (
-  <AuthFormWrapper>
-    <h2>{type}</h2>
-    <input type="text" placeholder="이메일" />
-    <input type="password" placeholder="비밀번호" />
-    {type === 'Register' && (
-      <input type="password" placeholder="비밀번호 확인" />
-    )}
-
-  </AuthFormWrapper>
-);
+const FORM_TYPE = {
+  login: '로그인',
+  register: '회원가입',
+};
+
+const AuthForm = ({ type, onChange, fields }) => {
+  const formType = FORM_TYPE[type];
+
+  const { userEmail, password } = fields;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    onChange({ name, value });
+  };
+
+  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' && (
+        <input
+          type="password"
+          value={fields.passwordConfirm}
+          name="passwordConfirm"
+          placeholder="비밀번호 확인"
+          autoComplete="new-password"
+          onChange={handleChange}
+        />
+      )}
+    </AuthFormWrapper>
+  );
+};
 
 export default AuthForm;

src/components/auth/AuthForm.test.jsx

@@ -1,40 +1,98 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 import AuthForm from './AuthForm';
 
 describe('AuthForm', () => {
-  const renderAuthForm = ({ type }) => render((
-    <AuthForm type={type} />
+  const handleChange = jest.fn();
+
+  beforeEach(() => {
+    handleChange.mockClear();
+  });
+
+  const renderAuthForm = ({ type, fields }) => render((
+    <AuthForm
+      type={type}
+      fields={fields}
+      onChange={handleChange}
+    />
   ));
 
   context('when type is login', () => {
     const login = {
-      type: 'Login',
+      type: 'login',
+      fields: {
+        userEmail: 'tktmdals@naver.com',
+        password: '1234',
+      },
     };
 
     it('renders login form text', () => {
       const { container, getByPlaceholderText } = renderAuthForm(login);
 
-      expect(container).toHaveTextContent('Login');
+      expect(container).toHaveTextContent('로그인');
       expect(getByPlaceholderText('이메일')).not.toBeNull();
       expect(getByPlaceholderText('비밀번호')).not.toBeNull();
     });
+
+    it('listens event call change', () => {
+      const { getByPlaceholderText } = renderAuthForm(login);
+
+      const inputs = [
+        { value: 'seungmin@naver.com', name: 'userEmail', placeholder: '이메일' },
+        { value: '345', name: 'password', placeholder: '비밀번호' },
+      ];
+
+      inputs.forEach(({ name, value, placeholder }) => {
+        const field = getByPlaceholderText(placeholder);
+
+        expect(field).not.toBeNull();
+
+        fireEvent.change(field, { target: { value, name } });
+
+        expect(handleChange).toBeCalled();
+      });
+    });
   });
 
   context('when type is register', () => {
     const register = {
-      type: 'Register',
+      type: 'register',
+      fields: {
+        userEmail: 'tktmdals@naver.com',
+        password: '1234',
+        passwordConfirm: '1234',
+      },
     };
 
     it('renders register form text', () => {
       const { container, getByPlaceholderText } = renderAuthForm(register);
 
-      expect(container).toHaveTextContent('Register');
+      expect(container).toHaveTextContent('회원가입');
       expect(getByPlaceholderText('이메일')).not.toBeNull();
       expect(getByPlaceholderText('비밀번호')).not.toBeNull();
       expect(getByPlaceholderText('비밀번호 확인')).not.toBeNull();
     });
+
+    it('listens event call change', () => {
+      const { getByPlaceholderText } = renderAuthForm(register);
+
+      const inputs = [
+        { value: 'seungmin@naver.com', name: 'userEmail', placeholder: '이메일' },
+        { value: '345', name: 'password', placeholder: '비밀번호' },
+        { value: '345', name: 'passwordConfirm', placeholder: '비밀번호 확인' },
+      ];
+
+      inputs.forEach(({ name, value, placeholder }) => {
+        const field = getByPlaceholderText(placeholder);
+
+        expect(field).not.toBeNull();
+
+        fireEvent.change(field, { target: { value, name } });
+
+        expect(handleChange).toBeCalled();
+      });
+    });
   });
 });

src/containers/auth/LoginFormContainer.jsx

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+
+import { get } from '../../util/utils';
+import { changeAuthField } from '../../reducers/slice';
+
+import AuthForm from '../../components/auth/AuthForm';
+
+const LoginFormContainer = () => {
+  const dispatch = useDispatch();
+
+  const login = useSelector(get('login'));
+
+  const onChangeLoginField = useCallback(({ name, value }) => {
+    dispatch(
+      changeAuthField({
+        form: 'login',
+        name,
+        value,
+      }),
+    );
+  });
+
+  return (
+    <AuthForm
+      type="login"
+      fields={login}
+      onChange={onChangeLoginField}
+    />
+  );
+};
+
+export default LoginFormContainer;

src/containers/auth/LoginFormContainer.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { render, fireEvent } from '@testing-library/react';
+
+import LoginFormContainer from './LoginFormContainer';
+
+describe('LoginFormContainer', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    dispatch.mockClear();
+    useDispatch.mockImplementation(() => dispatch);
+
+    useSelector.mockImplementation((selector) => selector({
+      login: {
+        userEmail: '',
+        password: '',
+      },
+    }));
+  });
+
+  const renderLoginFormContainer = () => render((
+    <LoginFormContainer />
+  ));
+
+  it('renders login form text', () => {
+    const { container, getByPlaceholderText } = renderLoginFormContainer();
+
+    expect(container).toHaveTextContent('로그인');
+    expect(getByPlaceholderText('이메일')).not.toBeNull();
+    expect(getByPlaceholderText('비밀번호')).not.toBeNull();
+  });
+
+  describe('action dispatch in login page', () => {
+    it('change event calls dispatch', () => {
+      const { getByPlaceholderText } = renderLoginFormContainer();
+
+      const inputs = [
+        { value: 'seungmin@naver.com', name: 'userEmail', placeholder: '이메일' },
+        { value: '345', name: 'password', placeholder: '비밀번호' },
+      ];
+
+      inputs.forEach(({ name, value, placeholder }) => {
+        const field = getByPlaceholderText(placeholder);
+
+        expect(field).not.toBeNull();
+
+        fireEvent.change(field, { target: { value, name } });
+
+        expect(dispatch).toBeCalledWith({
+          type: 'application/changeAuthField',
+          payload: {
+            form: 'login',
+            name,
+            value,
+          },
+        });
+      });
+    });
+  });
+});