툴킷에서 SSR적용하는 부분 질문있습니다.

강의 들은 부분을 툴킷으로 다시 만들어보는중 SSR 적용하는 부분 질문있습니다.

초기 로딩후

로그인은 정상적으로 동작하는데요

새로고침하고 로그인 풀린 화면이 나오고

다시 로그인하면 로그인되지 않습니다.

코드는 다음과 같이 작성했습니다.

// toolkit/index.ts

import axios from 'axios';
import userSlice, { UserInitialState } from './user';
import postSlice, { PostState } from './post';
import { AnyAction, CombinedState } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import { HYDRATE } from 'next-redux-wrapper';

axios.defaults.baseURL = 'http://localhost:3065';
axios.defaults.withCredentials = true;

export interface IState {
  user: UserInitialState;
  post: PostState;
}

const rootReducer = (
  state: IState,
  action: AnyAction
): CombinedState<IState> => {
  switch (action.type) {
    case HYDRATE:
      return action.payload;
    default: {
      const combinedReducer = combineReducers({
        user: userSlice.reducer,
        post: postSlice.reducer,
      });
      return combinedReducer(state, action);
    }
  }
};

export default rootReducer;

툴킷에 HYDRATE를 적용하고

// store/configureStore.ts

import { AnyAction, Reducer, configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import rootReducer, { IState } from '../toolkit';

const makeStore = () =>
  configureStore({
    reducer: rootReducer as Reducer<IState, AnyAction>,
    devTools: true,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
  });

export default createWrapper<AppStore>(makeStore, {
  debug: process.env.NODE_ENV !== 'production',
});

export type AppStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = AppStore['dispatch'];

리덕스 래퍼 부분은 저렇게 만들고

//pages/index.tsx

export const getServerSideProps: GetServerSideProps =
  wrapper.getServerSideProps((store) => async ({ req }) => {
    const cookie = req ? req.headers.cookie : '';
    axios.defaults.headers.Cookie = '';

    if (req && cookie) {
      axios.defaults.headers.Cookie = cookie;
    }

    await store.dispatch(loadPostAction());
    await store.dispatch(loadUserAction());
  });

export default Home;

// toolkit/user.ts


export const loadUserAction = createAsyncThunk(
  'user/loadUser',
  async (data) => {
    const response = await axios.get(`/user/${data}`);
    return response.data;
  }
);


.addCase(loadUserAction.fulfilled, (draft, action) => {
   draft.loadUserLoading = false;
   draft.loadUserDone = true;
   draft.me = action.payload || null;
   })

툴킷쪽은 이런식으로 작성했습니다.