feat(flow): login state management with redux

.eslintrc.json

@@ -7,6 +7,7 @@
   ],
   "rules": {
     "import/extensions": "off",
+    "no-param-reassign": "off",
     "prettier/prettier": [
       "error",
       {
@@ -66,7 +67,9 @@
         "unused-imports/no-unused-vars": [
           "error",
           { "argsIgnorePattern": "^_" }
-        ]
+        ],
+        // Custom Options:
+        "no-param-reassign": "off"
       }
     },
     // Configuration for testing

src/components/flow/flow-nav.tsx

@@ -5,8 +5,9 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 
-import { useAuthDispatch, useAuthState } from '@/contexts/AuthContextProvider';
-import type { LnbSubLiProps } from '@/types/props';
+import { toggleLogin } from '@/libs/features';
+import { useAppDispatch, useAppSelector } from '@/libs/hooks';
+import type { LnbSubLiProps } from '@/types';
 
 import { Li } from './components';
 import styles from './flow-nav.module.css';
@@ -90,15 +91,11 @@ export default function Nav({
   isOpen: boolean;
   setIsOpen: Function;
 }) {
-  const { isLoggedIn, userName } = useAuthState();
+  const { isLoggedIn, userName } = useAppSelector((state) => state.auth);
   const [isSideMenuActive, setIsSideMenuActive] = useState(false);
   const [isLnbMenuOn, setIsLnbMenuOn] = useState(false);
 
-  const authDispatch = useAuthDispatch();
-
-  const onLoginClick = () => {
-    authDispatch({ type: 'TOGGLE_LOGIN', isLoggedIn: !isLoggedIn });
-  };
+  const dispatch = useAppDispatch();
 
   const onSideMenuClick = () => {
     setIsSideMenuActive(!isSideMenuActive);
@@ -300,25 +297,37 @@ export default function Nav({
         {isLoggedIn ? (
           <>
             <li>
-              <a href="/portfolio/flow" onClick={onLoginClick}>
+              <a
+                href="/portfolio/flow"
+                onClick={(e) => {
+                  e.preventDefault();
+                  dispatch(toggleLogin());
+                }}
+              >
                 로그아웃
               </a>
             </li>
             <li>
-              <button type="button" onClick={onLoginClick}>
+              <button type="button" onClick={() => dispatch(toggleLogin())}>
                 {userName}
               </button>
             </li>
           </>
         ) : (
           <>
             <li>
-              <a href="/portfolio/flow" onClick={onLoginClick}>
+              <a
+                href="/portfolio/flow"
+                onClick={(e) => {
+                  e.preventDefault();
+                  dispatch(toggleLogin());
+                }}
+              >
                 로그인
               </a>
             </li>
             <li>
-              <button type="button" onClick={onLoginClick}>
+              <button type="button" onClick={() => dispatch(toggleLogin())}>
                 무료 회원가입
               </button>
             </li>
@@ -328,7 +337,7 @@ export default function Nav({
 
       <ul className={styles.lnbSide}>
         <li>
-          <button type="button" onClick={onLoginClick}>
+          <button type="button" onClick={() => dispatch(toggleLogin())}>
             {isLoggedIn ? userName : '무료시작'}
           </button>
         </li>

src/contexts/AuthContextProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, type Dispatch, useContext, useReducer } from 'react';
 
-import type { UserAction, UserState } from '@/types/user';
+import type { UserAction, UserState } from '@/types';
 
 type UserDispatch = Dispatch<UserAction>;
 

src/libs/features/api/AsyncReducers.ts → src/libs/api/AsyncReducers.ts

@@ -7,7 +7,7 @@ import type {
 } from '@reduxjs/toolkit';
 import type { AsyncThunkConfig } from '@reduxjs/toolkit/dist/createAsyncThunk';
 
-import type { AsyncState } from '../../types';
+import type { AsyncState } from '@/types';
 
 export class AsyncReducers {
   /**

src/libs/features/auth/authSlice.ts

@@ -0,0 +1,36 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import type { UserState } from '@/types';
+
+const initialState: UserState = {
+  isLoggedIn: false,
+  userName: 'Test User',
+  userId: 'testId',
+  userInfo: 'test information',
+  authorization: 'test authorization',
+};
+
+const slice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    toggleLogin: (state) => {
+      state.isLoggedIn = !state.isLoggedIn;
+    },
+    setName: (state, action) => {
+      state.userName = action.payload;
+    },
+    setId: (state, action) => {
+      state.userId = action.payload;
+    },
+    setInfo: (state, action) => {
+      state.userInfo = action.payload;
+    },
+    setAuth: (state, action) => {
+      state.authorization = action.payload;
+    },
+  },
+});
+
+export const { toggleLogin, setName, setId, setInfo, setAuth } = slice.actions;
+export const authReducer = slice.reducer;

src/libs/features/catFacts/catFactsSlice.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-import { AsyncReducers, AsyncThunk } from '@/libs/features/api';
-import type { AsyncState } from '@/libs/types';
+import { AsyncReducers, AsyncThunk } from '@/libs/api';
+import type { AsyncState } from '@/types';
 
 const initialState: AsyncState<any> = {
   data: null,

src/libs/features/counter/counterSlice.ts

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-import type { AsyncState } from '@/libs/types';
+import type { AsyncState } from '@/types';
 
 const initialState: AsyncState<any> = {
   data: 0,

src/libs/features/index.ts

@@ -1,2 +1,3 @@
+export * from './auth/authSlice';
 export * from './catFacts/catFactsSlice';
 export * from './counter/counterSlice';

src/libs/store.ts

@@ -1,12 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 
-import { catFactsReducer, counterReducer } from '@/libs/features';
+import { authReducer, catFactsReducer, counterReducer } from '@/libs/features';
 
 export const makeStore = () => {
   return configureStore({
     reducer: {
       counter: counterReducer,
       catFacts: catFactsReducer,
+      auth: authReducer,
     },
   });
 };

src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './redux';
+export * from './user';