[GILJOB-130] feat: 로그인 RTK 설정

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<Response<Auth>, PostRegister>({
+      query: (body) => ({
+        url: 'sign-up',
+        method: 'POST',
+        body,
+      }),
+    }),
     // 로그인: POST /sign-in
-    // TODO
+    postLogin: builder.mutation<Response<Auth>, PostLogin>({
+      query: (body) => ({
+        url: 'sign-in',
+        method: 'POST',
+        body,
+      }),
+    }),
     // 인증된 유저 정보 조회: GET /users/me
     getUsersMe: builder.query<Response<Writer>, 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;

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;
 }

src/services/types/response.ts

@@ -70,3 +70,8 @@ export interface UsersProfile {
     questAchieve: number;
   };
 }
+
+export interface Auth {
+  isSignedUp?: boolean;
+  accessToken: string;
+}

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<boolean>) => {
+      state.isAuth = action.payload;
+    },
+    setKakaoToken: (state, action: PayloadAction<string>) => {
+      state.kakaoAccessToken = action.payload;
+    },
+    setAccessToken: (state, action: PayloadAction<string>) => {
+      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;

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<string>) => {
+      state.nickname = action.payload;
+    },
+    setPosition: (state, action: PayloadAction<DropdownListType>) => {
+      const { type, value } = action.payload;
+      return {
+        ...state,
+        [type as string]: value,
+      };
+    },
+    setIntro: (state, action: PayloadAction<string>) => {
+      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;

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,