Fixed Login&Register Add Homepage

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
     "immer": "^7.0.1",
     "include-media": "^1.4.9",
     "open-color": "^1.7.0",
@@ -17,6 +18,7 @@
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-saga": "^1.1.3",
     "styled-components": "^5.1.1"
   },
   "scripts": {
@@ -39,5 +41,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:4000"
 }

 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)
-*/
+import Button from '../common/Button';
 
 const AuthFormBlock = styled.div`
   h3 {
@@ -47,9 +44,6 @@ const ButtonWithMarginTop = styled(Button)`
   margin-top: 1rem;
 `;
 
-/**
- * Show Error message
- */
 const ErrorMessage = styled.div`
   color: red;
   text-align: center;

@@ -38,7 +38,7 @@ const AuthTemplate = ({ children }) => {
     <AuthTemplateBlock>
       <WhiteBox>
         <div className="logo-area">
-          <Link to="/">Jaksimsamil</Link>
+          <Link to="/">작심삼일</Link>
         </div>
         {children}
       </WhiteBox>

+import React from 'react';
+import styled from 'styled-components';
+import Responsive from './Responsive';
+import Button from './Button';
+import { Link } from 'react-router-dom';
+
+const HeaderBlock = styled.div`
+  position: fixed;
+  width: 100%;
+  background: white;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+`;
+
+const Wrapper = styled(Responsive)`
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .logo {
+    font-size: 1.125rem;
+    font-weight: 800;
+    letter-spacing: 2px;
+  }
+  .right {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const Spacer = styled.div`
+  height: 4rem;
+`;
+const UserInfo = styled.div`
+  font-weight: 800;
+  margin-right: 1rem;
+`;
+
+const Header = ({ user, onLogout }) => {
+  return (
+    <>
+      <HeaderBlock>
+        <Wrapper>
+          <Link to="/" className="logo">
+            작심삼일
+          </Link>
+          {user ? (
+            <div className="right">
+              <UserInfo>{user.username}</UserInfo>
+              <Button onClick={onLogout}>로그아웃</Button>
+            </div>
+          ) : (
+            <div className="right">
+              <Button to="/login">로그인</Button>
+            </div>
+          )}
+        </Wrapper>
+      </HeaderBlock>
+      <Spacer />
+    </>
+  );
+};
+
+export default Header;

+import React from 'react';
+import styled from 'styled-components';
+
+const ResponsiveBlock = styled.div`
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 1024px;
+  margin: 0 auto;
+
+  @media (max-width: 1024px) {
+    width: 768px;
+  }
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;
+
+const Responsive = ({ children, ...rest }) => {
+  return <ResponsiveBlock {...rest}>{children}</ResponsiveBlock>;
+};
+
+export default Responsive;

@@ -2,7 +2,8 @@ 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';
+import AuthForm from '../../components/auth/AuthForm';
+import { check } from '../../modules/user';
 
 const LoginForm = ({ history }) => {
   const dispatch = useDispatch();
@@ -59,8 +60,15 @@ const LoginForm = ({ history }) => {
       console.log(user);
     }
   }, [history, user]);
-
-  return <AuthForm type="login"></AuthForm>;
+  return (
+    <AuthForm
+      type="login"
+      form={form}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      error={error}
+    ></AuthForm>
+  );
 };
 
 export default withRouter(LoginForm);

 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { changeField, initializeForm, register } from '../../modules/auth';
 import AuthForm from '../../components/auth/AuthForm';
+import { check } from '../../modules/user';
 import { withRouter } from 'react-router-dom';
 
 const RegisterForm = ({ history }) => {
@@ -32,7 +34,6 @@ const RegisterForm = ({ history }) => {
       return;
     }
     if (password !== passwordConfirm) {
-      //Todo Handle Error
       setError('비밀번호가 일치하지 않습니다.');
       changeField({ form: 'register', key: 'password', value: '' });
       changeField({ form: 'register', key: 'passwordConfirm', value: '' });
@@ -72,8 +73,15 @@ const RegisterForm = ({ history }) => {
       }
     }
   }, [history, user]);
-
-  return <AuthForm type="register" form={form}></AuthForm>;
+  return (
+    <AuthForm
+      type="register"
+      form={form}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      error={error}
+    ></AuthForm>
+  );
 };
 
 export default withRouter(RegisterForm);

+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import Header from '../../components/common/Header';
+import { logout } from '../../modules/user';
+const HeaderContainer = () => {
+  const { user } = useSelector(({ user }) => ({ user: user.user }));
+  const dispatch = useDispatch();
+  const onLogout = () => {
+    dispatch(logout());
+  };
+  return <Header user={user} onLogout={onLogout} />;
+};
+export default HeaderContainer;

@@ -5,11 +5,31 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import rootReducer from './modules';
+import createSagaMiddleware from 'redux-saga';
+import rootReducer, { rootSaga } from './modules';
+import { tempSetUser, check } from './modules/user';
 
-const store = createStore(rootReducer, composeWithDevTools());
+const sagaMiddleware = createSagaMiddleware();
+const store = createStore(
+  rootReducer,
+  composeWithDevTools(applyMiddleware(sagaMiddleware)),
+);
+
+function loadUser() {
+  try {
+    const user = localStorage.getItem('user');
+    if (!user) return;
+
+    store.dispatch(tempSetUser(user));
+    store.dispatch(check());
+  } catch (e) {
+    console.log('localStorage is not working');
+  }
+}
+sagaMiddleware.run(rootSaga);
+loadUser();
 
 ReactDOM.render(
   <Provider store={store}>

+import client from './client';
+
+export const login = ({ username, password }) =>
+  client.post('api/auth/login', { username, password });
+
+export const register = ({ username, password }) =>
+  client.post('api/auth/register', { username, password });
+
+export const check = () => client.get('api/auth/check');
+
+export const logout = () => client.post('/api/auth/logout');

+import axios from './axios';
+const client = axios.create();
+export default client;

+import { call, put } from 'redux-saga/effects';
+import { startLoading, finishLoading } from '../modules/loading';
+
+export const createRequestActionTypes = (type) => {
+  const SUCCESS = `${type}_SUCCESS`;
+  const FAILURE = `${type}_FAILURE`;
+  return [type, SUCCESS, FAILURE];
+};
+
+export default function createRequestSaga(type, request) {
+  const SUCCESS = `${type}_SUCCESS`;
+  const FAILURE = `${type}_FAILURE`;
+
+  return function* (action) {
+    yield put(startLoading(type));
+    try {
+      const response = yield call(request, action.payload);
+      yield put({
+        type: SUCCESS,
+        payload: response.data,
+      });
+    } catch (e) {
+      yield put({
+        type: FAILURE,
+        payload: e,
+        error: true,
+      });
+    }
+    yield put(finishLoading(type));
+  };
+}

 import { createAction, handleActions } from 'redux-actions';
 import produce from 'immer';
-
-const CHANGE_FIELD = 'auth/CHANGE_FIELD';
+import { takeLatest } from 'redux-saga/effects';
+import createRequestSaga, {
+  createRequestActionTypes,
+} from '../lib/createRequestSaga';
+import * as authAPI from '../lib/api/auth';
+const CHAGE_FIELD = 'auth/CHANGE_FIELD';
 const INITIALIZE_FORM = 'auth/INITIALIZE_FORM';
 
-export const sampleAction = createAction(SAMPLE_ACTION);
-export const cahngeField = createAction(
-  CHANGE_FIELD,
-  ({ form, key, value }) => {
-    form, key, value;
-  },
+const REGISTER = 'auth/REGISTER';
+const REGISTER_SUCCESS = 'auth/REGISTER_SUCCESS';
+const REGISTER_FAILURE = 'auth/REGISTER_FAILURE';
+
+const LOGIN = 'auth/LOGIN';
+const LOGIN_SUCCESS = 'auth/LOGIN_SUCCESS';
+const LOGIN_FAILURE = 'auth/LOGIN_FAILURE';
+
+export const changeField = createAction(
+  CHAGE_FIELD,
+  ({ form, key, value }) => ({
+    form,
+    key,
+    value,
+  }),
 );
 export const initializeForm = createAction(INITIALIZE_FORM, (form) => form);
 
-const initialState = {
+const initalState = {
   register: {
     username: '',
     password: '',
@@ -23,20 +36,58 @@ const initialState = {
     username: '',
     password: '',
   },
+  auth: null,
+  authError: null,
 };
 
+export const register = createAction(REGISTER, ({ username, password }) => ({
+  username,
+  password,
+}));
+export const login = createAction(LOGIN, ({ username, password }) => ({
+  username,
+  password,
+}));
+
+const registerSaga = createRequestSaga(REGISTER, authAPI.register);
+const loginSaga = createRequestSaga(LOGIN, authAPI.login);
+
+export function* authSaga() {
+  yield takeLatest(REGISTER, registerSaga);
+  yield takeLatest(LOGIN, loginSaga);
+}
+
 const auth = handleActions(
   {
-    [CHANGE_FIELD]: (state, { payload: { form, key, value } }) =>
+    [CHAGE_FIELD]: (state, { payload: { form, key, value } }) =>
       produce(state, (draft) => {
         draft[form][key] = value;
       }),
     [INITIALIZE_FORM]: (state, { payload: form }) => ({
       ...state,
-      [form]: initialState[form],
+      [form]: initalState[form],
+      authError: null,
+    }),
+    [REGISTER_SUCCESS]: (state, { payload: auth }) => ({
+      ...state,
+      authError: null,
+      auth,
+    }),
+    [REGISTER_FAILURE]: (state, { payload: error }) => ({
+      ...state,
+      authError: error,
+    }),
+    [LOGIN_SUCCESS]: (state, { payload: auth }) => ({
+      ...state,
+      authError: null,
+      auth,
+    }),
+    [LOGIN_FAILURE]: (state, { payload: error }) => ({
+      ...state,
+      authError: error,
     }),
   },
-  initialState,
+  initalState,
 );
 
 export default auth;

 import { combineReducers } from 'redux';
-import auth from './auth';
+import { all } from 'redux-saga/effects';
+import auth, { authSaga } from './auth';
+import loading from './loading';
+import user, { userSaga } from './user';
 
 const rootReducer = combineReducers({
   auth,
+  loading,
+  user,
 });
 
+export function* rootSaga() {
+  yield all([authSaga(), userSaga()]);
+}
+
 export default rootReducer;

+import { createAction, handleActions } from 'redux-actions';
+
+const START_LOADING = 'loading/START_LOADING';
+const FINISH_LOADING = 'loading/FINISH_LOADING';
+
+export const startLoading = createAction(
+  START_LOADING,
+  (requestType) => requestType,
+);
+
+export const finishLoading = createAction(
+  FINISH_LOADING,
+  (requestType) => requestType,
+);
+
+const initialState = {};
+
+const loading = handleActions(
+  {
+    [START_LOADING]: (state, action) => ({
+      ...state,
+      [action.payload]: true,
+    }),
+    [FINISH_LOADING]: (state, action) => ({
+      ...state,
+      [action.payload]: false,
+    }),
+  },
+  initialState,
+);
+
+export default loading;

+import { createAction, handleActions } from 'redux-actions';
+import { takeLatest, call } from 'redux-saga/effects';
+import * as authAPI from '../lib/api/auth';
+import createRequestSaga, {
+  createRequestActionTypes,
+} from '../lib/createRequestSaga';
+
+const TEMP_SET_USER = 'user/TEMP_SET_USER';
+const [CHECK, CHECK_SUCCESS, CHECK_FAILURE] = createRequestActionTypes(
+  'user/CHECK',
+);
+const LOGOUT = 'user/LOGOUT';
+
+export const tempSetUser = createAction(TEMP_SET_USER, (user) => user);
+export const check = createAction(CHECK);
+export const logout = createAction(LOGOUT);
+const checkSaga = createRequestSaga(CHECK, authAPI.check);
+function checkFailureSaga() {
+  try {
+    localStorage.removeItem('user');
+  } catch (e) {
+    console.log('localStroage is not working');
+  }
+}
+function* logoutSaga() {
+  try {
+    yield call(authAPI.logout);
+    console.log('logout');
+    localStorage.removeItem('user');
+  } catch (e) {
+    console.log(e);
+  }
+}
+export function* userSaga() {
+  yield takeLatest(CHECK, checkSaga);
+  yield takeLatest(CHECK_FAILURE, checkFailureSaga);
+  yield takeLatest(LOGOUT, logoutSaga);
+}
+
+const initialState = {
+  user: null,
+  checkError: null,
+};
+
+export default handleActions(
+  {
+    [TEMP_SET_USER]: (state, { payload: user }) => ({
+      ...state,
+      user,
+    }),
+    [CHECK_SUCCESS]: (state, { payload: user }) => ({
+      ...state,
+      user,
+      checkError: null,
+    }),
+    [CHECK_FAILURE]: (state, { payload: error }) => ({
+      ...state,
+      user: null,
+      checkError: error,
+    }),
+    [LOGOUT]: (state) => ({
+      ...state,
+      user: null,
+    }),
+  },
+  initialState,
+);

 import React from 'react';
+import HeaderContainer from '../containers/common/HeaderContainer';
 import Button from '../components/common/Button';
 
 const HomePage = () => {
   return (
     <div>
+      <HeaderContainer />
       <Button>test</Button>
     </div>
   );

@@ -1026,6 +1026,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.6.3":
+  version "7.10.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
+  integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
@@ -1344,6 +1351,50 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@redux-saga/core@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
+  integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@redux-saga/deferred" "^1.1.2"
+    "@redux-saga/delay-p" "^1.1.2"
+    "@redux-saga/is" "^1.1.2"
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+    redux "^4.0.4"
+    typescript-tuple "^2.2.1"
+
+"@redux-saga/deferred@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888"
+  integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==
+
+"@redux-saga/delay-p@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355"
+  integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+
+"@redux-saga/is@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e"
+  integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+
+"@redux-saga/symbols@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d"
+  integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==
+
+"@redux-saga/types@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
+  integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
+
 "@sheerun/mutationobserver-shim@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
@@ -2312,6 +2363,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 axobject-query@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
@@ -3852,7 +3910,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@3.1.0:
+debug@3.1.0, debug@=3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
@@ -5023,6 +5081,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
@@ -10295,7 +10360,14 @@ redux-devtools-extension@^2.13.8:
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
   integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
 
-redux@^4.0.5:
+redux-saga@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
+  integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
+  dependencies:
+    "@redux-saga/core" "^1.1.3"
+
+redux@^4.0.4, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -11866,6 +11938,25 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-compare@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
+  integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==
+  dependencies:
+    typescript-logic "^0.0.0"
+
+typescript-logic@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196"
+  integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
+
+typescript-tuple@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2"
+  integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==
+  dependencies:
+    typescript-compare "^0.0.2"
+
 uid-number@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"

@@ -32,6 +32,6 @@
 | profile | 추천 문제 조회              | GET    | api/profile/recommend:id | 바로가기 | None      |
 | notify  | 슬랙 메시지 전송 요청       | POST   | api/notify/slack         | 바로가기 | Jwt Token |
 | auth    | 로그인                      | POST   | api/auth/login           | 바로가기 | None      |
-| auth    | 로그아웃                    | GET    | api/auth/logout          | 바로가기 | JWT Token |
+| auth    | 로그아웃                    | POST   | api/auth/logout          | 바로가기 | JWT Token |
 | auth    | 회원가입                    | POST   | api/auth/register        | 바로가기 | None      |
 | auth    | 로그인 확인                 | GET    | api/auth/check           | 바로가기 | None      |

@@ -40,7 +40,7 @@ exports.register = async (ctx) => {
     ctx.body = user.serialize();
 
     const token = user.generateToken();
-    ctx.cookies.set("acces_token", token, {
+    ctx.cookies.set("access_token", token, {
       //3일동안 유효
       maxAge: 1000 * 60 * 60 * 24 * 3,
       httpOnly: true,
@@ -75,7 +75,7 @@ exports.login = async (ctx) => {
     }
     ctx.body = user.serialize();
     const token = user.generateToken();
-    ctx.cookies.set("acces_token", token, {
+    ctx.cookies.set("access_token", token, {
       //7일동안 유효
       maxAge: 1000 * 60 * 60 * 24 * 7,
       httpOnly: true,
@@ -88,6 +88,7 @@ exports.login = async (ctx) => {
 GET api/auth/check
 */
 exports.check = async (ctx) => {
+  console.log(ctx.state);
   const { user } = ctx.state;
   if (!user) {
     ctx.status = 401;

@@ -2,7 +2,8 @@ const Router = require("koa-router");
 const auth = new Router();
 const authCtrl = require("./auth.ctrl");
 auth.post("/login", authCtrl.login);
-auth.get("/logout", authCtrl.logout);
+auth.post("/logout", authCtrl.logout);
 auth.post("/register", authCtrl.register);
+auth.get("/check", authCtrl.check);
 
 module.exports = auth;

 const jwt = require("jsonwebtoken");
 const User = require("../models/user");
+
 const jwtMiddleware = async (ctx, next) => {
   const token = ctx.cookies.get("access_token");
+  console.log("1");
+  console.log(token);
   if (!token) {
-    //토큰이 없을 때
+    console.log("1");
     return next();
   }
   try {
-    const decoded = jwt.verify(token, process.env.JWT_TOKEN);
+    console.log("1");
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
     ctx.state.user = {
       _id: decoded._id,
       username: decoded.username,
     };
-    //토큰의 남은 유효 기간이 2일 이하라면 재발급
-    if (decoded.exp - Date.now() / 1000 < 60 * 60 * 24 * 2) {
+    const now = Math.floor(Date.now() / 1000);
+    if (decoded.exp - now < 60 * 60 * 24 * 3.5) {
       const user = await User.findById(decoded._id);
       const token = user.generateToken();
       ctx.cookies.set("access_token", token, {
-        maxAge: 1000 * 60 * 60 * 24 * 7,
+        maxAge: 1000 * 60 * 60 * 24 * 7, //7days
         httpOnly: true,
       });
     }
+    console.log(decoded);
     return next();
   } catch (e) {
     return next();
   }
 };
-
 module.exports = jwtMiddleware;