refactor(api_homepage): fetch data from api for home page

src/components/common/AppNavigation.tsx

@@ -36,7 +36,7 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
         )}
         <div className='flex items-center'>
           <div className='flex items-center w-18.25 lg:w-26 h-6 lg:h-9 bg-[#FEECDC] pl-4 pr-6 lg:pl-6 lg:pr-9 rounded-lg -mr-5 font-bold text-[#9F580A] lg:font-semibold lg:text-2xl select-none text-base'>
-            {userInfoData.coins}
+            {userInfoData}
           </div>
           <img className='w-7 h-7 lg:w-10 lg:h-10' src={coin}></img>
           <UserCircleIcon className='w-10 h-10 hidden lg:block lg:opacity-40 lg:ml-6 lg:cursor-pointer' />

src/components/home/Orders.tsx

@@ -32,13 +32,16 @@ export const Orders: Component<{ orders: OrderData[] }> = ({ orders }) => {
       </div>
       <div className='flex gap-2 lg:gap-6 slider-container' ref={sliderRef}>
         {orders.map((order, index) => (
-          <Card key={index} className='grow shrink-0 flex flex-col rounded-lg shadow-md'>
+          <Card
+            key={index}
+            className='grow shrink-0 flex flex-col rounded-lg shadow-md lg:min-w-[240px] sm:min-w-[184px]'
+          >
             <CardBody className='p-2 lg:p-4'>
-              <div className='flex items-center justify-between font-semibold text-xs lg:text-base mb-2 lg:mb-4'>
-                <span>{order.id}</span>
+              <div className='flex flex-col items-start justify-between font-semibold text-xs lg:text-base mb-2 lg:mb-4'>
                 <span className={`capitalize text-${ORDER_STATUS[order.status]}-500`}>
                   {order.status}
                 </span>
+                <span>{order.id.slice(8, order.id.length)}</span>
               </div>
               <div>
                 <span className='text-blue/1 mr-1'>{order.fileName}</span>

src/services/home/order.ts

@@ -1,5 +1,5 @@
-import { mockServer, invoke } from '@services/common';
+import { server, invoke } from '@services/common';
 
 export const orderService = {
-  getOrder: () => invoke<OrderData[]>(mockServer.get('/orders'))
+  getOrder: () => invoke<OrderData[]>(server.get('/api/printRequest'))
 };

src/services/home/slide.ts

@@ -1,5 +1,5 @@
-import { mockServer, invoke } from '@services/common';
+import { invoke, server } from '@services/common';
 
 export const slideService = {
-  getSlide: () => invoke<SlideData[]>(mockServer.get('/slides'))
+  getSlide: () => invoke<SlideData[]>(server.get('/api/home/slides'))
 };

src/services/home/userInfo.ts

@@ -1,5 +1,5 @@
-import { mockServer, invoke } from '@services/common';
+import { server, invoke } from '@services/common';
 
 export const userInfoService = {
-  getUserInfo: () => invoke<UserInfoData>(mockServer.get('/user'))
+  getUserInfo: () => invoke<number>(server.get('/api/user/remain-coins'))
 };

src/states/home/userInfo.ts

@@ -3,9 +3,7 @@ import { userInfoService } from '@services/home';
 
 export const useUserInfoStore = create<UserInfoStore>()((set) => ({
   userInfoStatus: 'UNINIT',
-  userInfoData: {
-    coins: 0
-  },
+  userInfoData: 0,
   getUserInfoData: async () => {
     set(() => ({ userInfoStatus: 'PENDING' }));
     try {

src/types/home/userInfo.d.ts

@@ -1,9 +1,5 @@
-type UserInfoData = {
-  coins: number;
-};
-
 type UserInfoStore = {
   userInfoStatus: StoreStatus;
-  userInfoData: UserInfoData;
+  userInfoData: number;
   getUserInfoData: () => Promise<void>;
 };