From 4a67bace413c29c28b1e59bb01f1295594fe8b9b Mon Sep 17 00:00:00 2001 From: kyoung-jnn Date: Sat, 25 Dec 2021 03:28:47 +0900 Subject: [PATCH] =?UTF-8?q?[GILJOB-130]=20feat:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20RTK=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/giljob.ts | 22 +++++++++++++++--- src/services/types/request.ts | 10 +++++++++ src/services/types/response.ts | 5 +++++ src/slices/authSlice.ts | 36 +++++++++++++++++++++++++++++ src/slices/registerSlice.ts | 41 ++++++++++++++++++++++++++++++++++ src/store/index.ts | 26 ++++++++++++++++----- 6 files changed, 132 insertions(+), 8 deletions(-) create mode 100644 src/slices/authSlice.ts create mode 100644 src/slices/registerSlice.ts diff --git a/src/services/giljob.ts b/src/services/giljob.ts index 284e2cd..a84dfb0 100644 --- a/src/services/giljob.ts +++ b/src/services/giljob.ts @@ -5,6 +5,8 @@ import { ProvideRoadmapId, ProvideUserId, ProvideIntro, + PostLogin, + PostRegister, PostQuests, GetQuests, GetQuestsSearch, @@ -20,6 +22,7 @@ import { Roadmap, RoadmapListItem, UsersProfile, + Auth, } from './types/response'; export const giljobApi = createApi({ @@ -121,9 +124,21 @@ export const giljobApi = createApi({ query: ({ userId }) => `users/${userId}/roadmaps/scrap`, }), // 회원가입: POST /sign-up - // TODO + postRegister: builder.mutation, PostRegister>({ + query: (body) => ({ + url: 'sign-up', + method: 'POST', + body, + }), + }), // 로그인: POST /sign-in - // TODO + postLogin: builder.mutation, PostLogin>({ + query: (body) => ({ + url: 'sign-in', + method: 'POST', + body, + }), + }), // 인증된 유저 정보 조회: GET /users/me getUsersMe: builder.query, void>({ query: () => `users/me`, @@ -138,7 +153,6 @@ export const giljobApi = createApi({ query: (body) => ({ url: `users/me/intro`, method: 'PATCH', - body, }), }), // 업로드: POST /upload @@ -162,4 +176,6 @@ export const { useGetUsersMeQuery, useGetUsersProfileQuery, usePatchUsersMeIntroMutation, + usePostLoginMutation, + usePostRegisterMutation, } = giljobApi; diff --git a/src/services/types/request.ts b/src/services/types/request.ts index a61361f..a13f6f4 100644 --- a/src/services/types/request.ts +++ b/src/services/types/request.ts @@ -1,3 +1,13 @@ +export interface PostLogin { + kakaoAccessToken: string; +} + +export interface PostRegister extends PostLogin { + position: string; + nickname: string; + intro: string; +} + export interface ProvideQuestId { questId: number; } diff --git a/src/services/types/response.ts b/src/services/types/response.ts index a103a41..ba8e5ae 100644 --- a/src/services/types/response.ts +++ b/src/services/types/response.ts @@ -70,3 +70,8 @@ export interface UsersProfile { questAchieve: number; }; } + +export interface Auth { + isSignedUp?: boolean; + accessToken: string; +} diff --git a/src/slices/authSlice.ts b/src/slices/authSlice.ts new file mode 100644 index 0000000..7c4c79f --- /dev/null +++ b/src/slices/authSlice.ts @@ -0,0 +1,36 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { RootState } from '@src/store'; + +export interface authState { + isAuth: boolean; + kakaoAccessToken: string; + accessToken: string; +} + +const initialState: authState = { + isAuth: false, + kakaoAccessToken: '', + accessToken: '', +}; + +export const authSlice = createSlice({ + name: 'auth', + initialState, + reducers: { + setAuth: (state, action: PayloadAction) => { + state.isAuth = action.payload; + }, + setKakaoToken: (state, action: PayloadAction) => { + state.kakaoAccessToken = action.payload; + }, + setAccessToken: (state, action: PayloadAction) => { + state.accessToken = action.payload; + }, + resetAuth: () => initialState, + }, +}); + +export const authSelector = (state: RootState) => state.auth; +export const { setAuth, setKakaoToken, setAccessToken, resetAuth } = + authSlice.actions; +export default authSlice.reducer; diff --git a/src/slices/registerSlice.ts b/src/slices/registerSlice.ts new file mode 100644 index 0000000..a8f0dc1 --- /dev/null +++ b/src/slices/registerSlice.ts @@ -0,0 +1,41 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { DropdownListType } from '@src/components/atoms/Dropdown'; +import { RootState } from '@src/store'; + +export interface registerState { + position: string; + nickname: string; + intro: string; +} + +const initialState: registerState = { + nickname: '', + position: '', + intro: '', +}; + +export const registerSlice = createSlice({ + name: 'register', + initialState, + reducers: { + setNickname: (state, action: PayloadAction) => { + state.nickname = action.payload; + }, + setPosition: (state, action: PayloadAction) => { + const { type, value } = action.payload; + return { + ...state, + [type as string]: value, + }; + }, + setIntro: (state, action: PayloadAction) => { + state.intro = action.payload; + }, + resetRegister: () => initialState, + }, +}); + +export const registerSelector = (state: RootState) => state.register; +export const { setPosition, setNickname, setIntro, resetRegister } = + registerSlice.actions; +export default registerSlice.reducer; diff --git a/src/store/index.ts b/src/store/index.ts index 9af5dd7..8cc2b2a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,14 +1,30 @@ import { configureStore } from '@reduxjs/toolkit'; +import { combineReducers } from 'redux'; +import { persistReducer } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; import createQusetReducer from '@src/slices/createQuestSlice'; import createRoadmapReducer from '@src/slices/createRoadmapSlice'; +import registerReducer from '@src/slices/registerSlice'; +import authReducer from '@src/slices/authSlice'; import { giljobApi } from '@src/services/giljob'; +const persistConfig = { + key: 'root', + storage, + whitelist: ['auth'], // auth Reducer를 Local Storage에 저장합니다. +}; + export const store = configureStore({ - reducer: { - createQuest: createQusetReducer, - createRoadmap: createRoadmapReducer, - [giljobApi.reducerPath]: giljobApi.reducer, - }, + reducer: persistReducer( + persistConfig, + combineReducers({ + auth: authReducer, + register: registerReducer, + createQuest: createQusetReducer, + createRoadmap: createRoadmapReducer, + [giljobApi.reducerPath]: giljobApi.reducer, + }), + ), middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false,