Merge pull request #73 from INFP-Study/feature/axios-api-template

[FEATURE] E4-S3 회원가입 Store 생성 #25

frontend/src/pages/home/index.js

@@ -4,6 +4,7 @@ import { Button, Card, Input, Space } from 'antd';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { getDecrement, getIncrement } from '../../store/counter';
 import SiteLayout from '../../components/common/layout';
+import { getGoogleLogin } from '../../store/auth';
 
 function Home() {
   const count = useSelector((state) => state.counter.value);
@@ -28,6 +29,12 @@ function Home() {
             >
               <PlusOutlined />
             </Button>
+            <Button
+              type="primary"
+              onClick={() => dispatch({ type: getGoogleLogin.type })}
+            >
+              <PlusOutlined />
+            </Button>
           </Space>
         </Card>
       </Space>

frontend/src/saga/auth.js

@@ -0,0 +1,33 @@
+import { put } from 'redux-saga/effects';
+import * as authStore from '../store/auth';
+import { authAPI } from '../utils/api/auth';
+import axios from 'axios';
+
+import { INNER_ERROR } from '../constants';
+import { finishLoading, startLoading } from '../store/loding';
+
+function* googleLoginSaga(action) {
+  try {
+    yield put(startLoading(authStore.getGoogleLogin));
+    const { data } = yield axios.get(authAPI.GOOGLE_LOGIN(params.payload));
+    console.log(data);
+    yield put({ type: authStore.getGoogleLoginSuccess, payload: data });
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      const { errorMessage } = e.response.data;
+      yield put({
+        type: authStore.getGoogleLoginFail,
+        payload: errorMessage,
+      });
+    } else {
+      console.log(e);
+      yield put({
+        type: authStore.getGoogleLoginFail,
+        payload: INNER_ERROR,
+      });
+    }
+  } finally {
+    yield put(finishLoading(authStore.getGoogleLogin));
+  }
+}
+export { googleLoginSaga };

frontend/src/store/auth.js

@@ -0,0 +1,36 @@
+import { takeLatest } from 'redux-saga/effects';
+import { createSlice } from '@reduxjs/toolkit';
+import { googleLoginSaga } from '../saga/auth';
+
+const initialState = {
+  googleSignup: {
+    error: null,
+  },
+};
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    getGoogleLogin: (state) => state,
+    getGoogleLoginSuccess: (state, action) => {
+      state.user.userId = action.payload.userId;
+      localStorage.setItem('user', action.payload.accessToken);
+      return state;
+    },
+    getGoogleLoginFail: (state, action) => {
+      state.googleSignup.error = action.payload;
+      return state;
+    },
+  },
+});
+
+const { actions, reducer: authReducer } = authSlice;
+
+export const { getGoogleLogin, getGoogleLoginSuccess, getGoogleLoginFail } =
+  actions;
+
+export { authReducer, initialState };
+
+export function* authSaga() {
+  yield takeLatest(getGoogleLogin.type, googleLoginSaga);
+}

frontend/src/store/index.js

@@ -2,17 +2,19 @@ import { all } from 'redux-saga/effects';
 import { combineReducers } from 'redux';
 import { counterReducer, counterSaga } from './counter';
 import { loadingReducer } from './loding';
+import { authReducer, authSaga } from './auth';
 
 //리듀서 모음
 const rootReducer = combineReducers({
   loading: loadingReducer,
   counter: counterReducer,
+  auth: authReducer,
 });
 
 //사가 모음
 export function* rootSaga() {
   try {
-    yield all([counterSaga()]);
+    yield all([counterSaga(), authSaga()]);
   } catch (e) {
     throw new Error(e);
   }

frontend/src/utils/api/auth.js

@@ -0,0 +1,12 @@
+const isDev = window.location.origin.includes('localhost');
+const SERVER_ORIGIN = isDev
+  ? 'http://localhost:3000'
+  : 'https://ciat-bakend.choicloudlab.com';
+
+export const API_DOMAIN = SERVER_ORIGIN;
+export const API_END_POINT = `${SERVER_ORIGIN}/api`;
+
+export const authAPI = {
+  GOOGLE_LOGIN: `${API_END_POINT}/test`,
+  GET_POST: (id) => `${API_END_POINT}/board/${id}`,
+};