src/App.tsx

@@ -1,12 +1,27 @@
-import { createContext } from 'react'
+import { createContext, useEffect } from 'react'
 import RouterSetup from './RouterSetup'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import type { StoreType } from './stores'
 import Loading from './components/Loading'
+import { Apis } from './apis'
+import { userAction } from './stores/slices/user.slice'
 
 export default function App() {
   const userStore = useSelector((store: StoreType) => store.user)
+  const dipatch = useDispatch()
 
+  useEffect(() => {
+    if(userStore.data && !userStore.loading) {
+      try {
+        Apis.cart.getCartByUserId(userStore.data.id)
+        .then(res => {
+          dipatch(userAction.initCartData(res))
+        })
+      }catch(err) {
+
+      }
+    }
+  }, [userStore.data, userStore.loading])
   return (
     <>
       {

src/RouterSetup.tsx

@@ -8,10 +8,13 @@ import UserManagement from './pages/admin/User/UserManagement'
 import CategoryManagement from './pages/admin/Category/CategoryManagement'
 import ProductManagement from './pages/admin/Product/ProductManagement'
 import CreateProductForm from './pages/admin/Product/components/CreateProductForm'
+import Cart from './pages/home/cart/Cart'
 
 export default function RouterSetup() {
   return <Routes>
-    <Route path='/' element={<Home />}></Route>
+    <Route path='/' element={<Home />}>
+    <Route path='cart' element={<Cart />}></Route>
+    </Route>
     <Route path='/auth' element={<Auth />}></Route>
     <Route path='admin' element={
       <ProtectedAdmin>

src/pages/home/cart/Cart.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import type { StoreType } from '../../../stores'
+import type { CartItem } from '../../../types/cart.type'
+
+export default function Cart() {
+    const userStore = useSelector((store: StoreType) => store.user)
+
+
+  return (
+    <div>
+      Cart Page
+      <ul>
+        {
+            userStore.cart?.map((item: CartItem) => {
+                return <li key={item.id}>{item.productId} - {item.quantity}</li>
+            })
+        }
+      </ul>
+    </div>
+  )
+}

src/stores/slices/user.slice.ts

@@ -1,16 +1,19 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import type { User } from "../../types/user.type";
 import { Apis } from "../../apis";
+import type { CartItem } from "../../types/cart.type";
 
 
 interface UserState {
     data: User | null,
     loading: boolean;
+    cart: CartItem[] | []
 }
 
 const InitUserState: UserState = {
     data: null,
-    loading: false
+    loading: false,
+    cart: []
 }
 
 
@@ -18,7 +21,9 @@ const userSlice = createSlice({
     name: "user",
     initialState: InitUserState,
     reducers: {
-
+        initCartData: (state, action) =>{
+            state.cart = action.payload
+        }
     },
     extraReducers: (bd) => {
         bd.addCase(fetchUserData.pending, (state, action) => {