Update Login/Register

+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import Button from '../common/Button';
+import palette from '../../lib/styles/palette';
+/*
+Display Auth Form(Register, Login)
+*/
+
+const AuthFormBlock = styled.div`
+  h3 {
+    margin: 0;
+    color: ${palette.gray[8]};
+    margin-bottom: 1rem;
+  }
+`;
+
+const StyledInput = styled.input`
+  font-size: 1rem;
+  border: none;
+  border-bottom: 1px solid ${palette.gray[5]};
+  padding-bottom: 0.5rem;
+  outline: none;
+  width: 100%;
+  &:focus {
+    color: $oc-teal-7;
+    border-bottom: 1px solid ${palette.gray[7]};
+  }
+  & + & {
+    margin-top: 1rem;
+  }
+`;
+
+const Footer = styled.div`
+  margin-top: 2rem;
+  text-align: right;
+  a {
+    color: ${palette.gray[6]};
+    text-decoration: underline;
+    &:hover {
+      color: ${palette.gray[9]};
+    }
+  }
+`;
+
+const ButtonWithMarginTop = styled(Button)`
+  margin-top: 1rem;
+`;
+
+/**
+ * Show Error message
+ */
+const ErrorMessage = styled.div`
+  color: red;
+  text-align: center;
+  font-size: 0.875rem;
+  margin-top: 1rem;
+`;
+
+const textMap = {
+  login: '로그인',
+  register: '회원가입',
+};
+
+const AuthForm = ({ type, form, onChange, onSubmit, error }) => {
+  const text = textMap[type];
+  return (
+    <AuthFormBlock>
+      <h3>{text}</h3>
+      <form onSubmit={onSubmit}>
+        <StyledInput
+          autoComplete="username"
+          name="username"
+          placeholder="아이디"
+          onChange={onChange}
+          value={form.username}
+        />
+        <StyledInput
+          autoComplete="new-password"
+          name="password"
+          placeholder="비밀번호"
+          type="password"
+          onChange={onChange}
+          value={form.password}
+        />
+        {type === 'register' && (
+          <StyledInput
+            autoComplete="new-password"
+            name="passwordConfirm"
+            placeholder="비밀번호 확인"
+            type="password"
+            onChange={onChange}
+            value={form.passwordConfirm}
+          />
+        )}
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+        <ButtonWithMarginTop cyan fullWidth>
+          {text}
+        </ButtonWithMarginTop>
+      </form>
+      <Footer>
+        {type === 'login' ? (
+          <Link to="/register">회원가입</Link>
+        ) : (
+          <Link to="/login">로그인</Link>
+        )}
+      </Footer>
+    </AuthFormBlock>
+  );
+};
+
+export default AuthForm;

+import React from 'react';
+import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
+import { Link } from 'react-router-dom';
+/*
+register/login Layout
+*/
+const AuthTemplateBlock = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: ${palette.gray[2]};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const WhiteBox = styled.div`
+  .logo-area {
+    display: block;
+    padding-bottom: 2rem;
+    text-align: center;
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.025);
+  padding: 2rem;
+  width: 360px;
+  background: white;
+  border-radius: 2px;
+`;
+
+const AuthTemplate = ({ children }) => {
+  return (
+    <AuthTemplateBlock>
+      <WhiteBox>
+        <div className="logo-area">
+          <Link to="/">Jaksimsamil</Link>
+        </div>
+        {children}
+      </WhiteBox>
+    </AuthTemplateBlock>
+  );
+};
+
+export default AuthTemplate;

 import React from 'react';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
 import palette from '../../lib/styles/palette';
+import { withRouter } from 'react-router-dom';
 
 
 const StyledButton = styled.button`
 const StyledButton = styled.button`
   border: none;
   border: none;
@@ -12,13 +13,38 @@ const StyledButton = styled.button`
   outline: none;
   outline: none;
   cursor: pointer;
   cursor: pointer;
 
 
-  background: ${palette.gray[7]};
-
+  background: ${palette.gray[8]};
   &:hover {
   &:hover {
-    background: ${palette.gray[5]};
+    background: ${palette.gray[6]};
   }
   }
-`;
+  ${props =>
+    props.fullWidth &&
+    css`
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+      width: 100%;
+      font-size: 1.125rem;
+    `}
 
 
-const Button = (props) => <StyledButton {...props} />;
+  ${props =>
+    props.cyan &&
+    css`
+      background: ${palette.cyan[5]};
+      &:hover {
+        background: ${palette.cyan[4]};
+      }
+    `}
+`;
 
 
-export default Button;
+const Button = ({ to, history, ...rest }) => {
+  const onClick = e => {
+    if (to) {
+      history.push(to);
+    }
+    if (rest.onClick) {
+      rest.onClick(e);
+    }
+  };
+  return <StyledButton {...rest} onClick={onClick} />;
+};
+export default withRouter(Button);

-import React from 'react';
-import styled from 'styled-components';
-/*
-Display Auth Form(Register, Login)
-*/
-const AuthFormBlock = styled.div``;
-
-const AuthForm = () => {
-  return <AuthFormBlock>AuthForm</AuthFormBlock>;
-};
-
-export default AuthForm;

-import React from 'react';
-import styled from 'styled-components';
-/*
-register/login Layout
-*/
-
-const AuthTemplateBlock = styled.div``;
-
-const AuthTemplate = ({ children }) => {
-  return <AuthTemplateBlock>{children}</AuthTemplateBlock>;
-};
-
-export default AuthTemplate;

+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { changeField, initializeForm, login } from '../../modules/auth';
+import AuthForm from './AuthForm';
+
+const LoginForm = ({ history }) => {
+  const dispatch = useDispatch();
+  const [error, setError] = useState(null);
+  const { form, auth, authError, user } = useSelector(({ auth, user }) => ({
+    form: auth.login,
+    auth: auth.auth,
+    authError: auth.authError,
+    user: user.user,
+  }));
+
+  const onChange = (e) => {
+    const { value, name } = e.target;
+    dispatch(
+      changeField({
+        form: 'login',
+        key: name,
+        value,
+      }),
+    );
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const { username, password } = form;
+    dispatch(login({ username, password }));
+  };
+
+  useEffect(() => {
+    dispatch(initializeForm('login'));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (authError) {
+      console.log('Error Occured');
+      console.log(authError);
+      setError('로그인 실패');
+      return;
+    }
+    if (auth) {
+      console.log('Login Success');
+      dispatch(check());
+    }
+  }, [auth, authError, dispatch]);
+
+  useEffect(() => {
+    if (user) {
+      history.push('/');
+      try {
+        localStorage.setItem('user', JSON.stringify(user));
+      } catch (e) {
+        console.log('localStorage is not working');
+      }
+      console.log(user);
+    }
+  }, [history, user]);
+
+  return <AuthForm type="login"></AuthForm>;
+};
+
+export default withRouter(LoginForm);

+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AuthForm from '../../components/auth/AuthForm';
+import { withRouter } from 'react-router-dom';
+
+const RegisterForm = ({ history }) => {
+  const [error, setError] = useState(null);
+  const dispatch = useDispatch();
+  const { form, auth, authError, user } = useSelector(({ auth, user }) => ({
+    form: auth.register,
+    auth: auth.auth,
+    authError: auth.authError,
+    user: user.user,
+  }));
+
+  const onChange = (e) => {
+    const { value, name } = e.target;
+    dispatch(
+      changeField({
+        form: 'register',
+        key: name,
+        value,
+      }),
+    );
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const { username, password, passwordConfirm } = form;
+    if ([username, password, passwordConfirm].includes('')) {
+      setError('빈 칸을 모두 입력하세요');
+      return;
+    }
+    if (password !== passwordConfirm) {
+      //Todo Handle Error
+      setError('비밀번호가 일치하지 않습니다.');
+      changeField({ form: 'register', key: 'password', value: '' });
+      changeField({ form: 'register', key: 'passwordConfirm', value: '' });
+      return;
+    }
+    dispatch(register({ username, password }));
+  };
+
+  useEffect(() => {
+    dispatch(initializeForm('register'));
+  }, [dispatch]);
+  useEffect(() => {
+    if (authError) {
+      if (authError.response.status === 409) {
+        setError('이미 존재하는 계정명입니다.');
+        return;
+      }
+      setError('회원가입 실패');
+      return;
+    }
+
+    if (auth) {
+      console.log('Register Success!');
+      console.log(auth);
+      dispatch(check());
+    }
+  }, [auth, authError, dispatch]);
+
+  useEffect(() => {
+    if (user) {
+      console.log('SUCCESS check API');
+      history.push('/');
+      try {
+        localStorage.setItem('user', JSON.stringify(user));
+      } catch (e) {
+        console.log('localStorage is not working');
+      }
+    }
+  }, [history, user]);
+
+  return <AuthForm type="register" form={form}></AuthForm>;
+};
+
+export default withRouter(RegisterForm);

 import { createAction, handleActions } from 'redux-actions';
 import { createAction, handleActions } from 'redux-actions';
+import produce from 'immer';
 
 
-const SAMPLE_ACTION = 'auth/SAMPLE_ACTION';
+const CHANGE_FIELD = 'auth/CHANGE_FIELD';
+const INITIALIZE_FORM = 'auth/INITIALIZE_FORM';
 
 
 export const sampleAction = createAction(SAMPLE_ACTION);
 export const sampleAction = createAction(SAMPLE_ACTION);
+export const cahngeField = createAction(
+  CHANGE_FIELD,
+  ({ form, key, value }) => {
+    form, key, value;
+  },
+);
+export const initializeForm = createAction(INITIALIZE_FORM, (form) => form);
 
 
-const initialState = {};
+const initialState = {
+  register: {
+    username: '',
+    password: '',
+    passwordConfirm: '',
+  },
+  login: {
+    username: '',
+    password: '',
+  },
+};
 
 
 const auth = handleActions(
 const auth = handleActions(
   {
   {
-    [SAMPLE_ACTION]: (state, action) => state,
+    [CHANGE_FIELD]: (state, { payload: { form, key, value } }) =>
+      produce(state, (draft) => {
+        draft[form][key] = value;
+      }),
+    [INITIALIZE_FORM]: (state, { payload: form }) => ({
+      ...state,
+      [form]: initialState[form],
+    }),
   },
   },
   initialState,
   initialState,
 );
 );

 import React from 'react';
 import React from 'react';
 import AuthTemplate from '../components/auth/AuthTemplate';
 import AuthTemplate from '../components/auth/AuthTemplate';
-import AuthForm from '../components/auth/AuthForm';
+import LoginForm from '../containers/auth/LoginForm';
 
 
 const LoginPage = () => {
 const LoginPage = () => {
   return (
   return (
     <AuthTemplate>
     <AuthTemplate>
-      <AuthForm />
+      <LoginForm type="login" />
     </AuthTemplate>
     </AuthTemplate>
   );
   );
 };
 };

 import React from 'react';
 import React from 'react';
+import AuthTemplate from '../components/auth/AuthTemplate';
+import RegisterForm from '../containers/auth/RegisterForm';
 
 
 const RegisterPage = () => {
 const RegisterPage = () => {
   return (
   return (
     <AuthTemplate>
     <AuthTemplate>
-      <AuthForm />
+      <RegisterForm type="register" />
     </AuthTemplate>
     </AuthTemplate>
   );
   );
 };
 };