feat: historypage connect api

src/pages/history-page/HistoryPage.tsx

 import { useEffect, useState } from "react";
 
+import { ALERT } from "../../common/constants";
 
-import { HISTORY_PAGE_DUMMY } from "./config/dummy";
 import OrderBox from "./modules/order-box/OrderBox";
 
 import type { HistoryPageModel } from "./config/type";
@@ -13,19 +13,26 @@ interface Props {
     connector: Connector;
 }
 
-const HistoryPage: FC<Props> = () => {
+const HistoryPage: FC<Props> = ({ connector }) => {
     const [model, setModel] = useState<HistoryPageModel|null>(null);
     
     useEffect(() => {
-        setModel(() => HISTORY_PAGE_DUMMY);
+        void (async () => {
+            try {
+                const response = await connector.get<HistoryPageModel>('/order');
+                setModel(response);
+            } catch {
+                alert(ALERT.REQ_FAIL);
+            }
+        })();
     }, []);
     return (
         <div>
             {
                 model && model.map((d, i) => (
-                    <OrderBox waitingCount={d.waitingCount}
-                        name={d.name} price={d.price}
-                        pickup={d.pickup} key={`orderbox-${i}`}
+                    <OrderBox waitingCount={d.waitingCount} name={'menu_name'} 
+                        price={d.totalPrice} status={d.status} shop={'shop_name'}
+                        takeout={d.takeout} key={`orderbox-${i}`}
                     />
                 ))
             }

src/pages/history-page/config/dummy.ts

@@ -2,26 +2,47 @@ import type { HistoryPageModel } from "./type";
 
 const HISTORY_PAGE_DUMMY: HistoryPageModel = [
     {
-        _id : '1',
-        waitingCount : 188,
-        name : '김밥',
-        price : 2500,
-        pickup : true,
+        _id: "656bb8c3fd1861cb6fa562fa",
+        userId: "656b8ec725f8b6df24ab910c",
+        shopId: 3,
+        items: [
+            {
+                "menuId": "6562292377dd1a645a7e960a",
+                "quantity": 2
             },
             {
-        _id : '2',
-        waitingCount : 189,
-        name : '라면',
-        price : 3000,
-        pickup : false,
+                "menuId": "6562292377dd1a645a7e9609",
+                "quantity": 1
+            }
+        ],
+        paymentMethod: "MONEY",
+        waitingCount: 39,
+        takeout: true,
+        totalPrice: 22000,
+        createdTime: "2023-12-02T23:07:47.000Z",
+        status: "Pending"
     },
     {
-        _id : '3',
-        waitingCount : 190,
-        name : '라면',
-        price : 3000,
-        pickup : false,
+        "_id": "656bb9dafd1861cb6fa56304",
+        "userId": "656b8ec725f8b6df24ab910c",
+        "shopId": 3,
+        "items": [
+            {
+                "menuId": "6562292377dd1a645a7e960a",
+                "quantity": 3
             },
+            {
+                "menuId": "6562292377dd1a645a7e9609",
+                "quantity": 2
+            }
+        ],
+        "paymentMethod": "MONEY",
+        "waitingCount": 40,
+        "takeout": true,
+        "totalPrice": 36500,
+        "createdTime": "2023-12-02T23:12:26.000Z",
+        "status": "Ready"
+    }
 ];
 
 export { HISTORY_PAGE_DUMMY };

src/pages/history-page/config/type.ts

+enum StatusType {
+    "Pending",
+    "Preparing",
+    "Ready",
+    "Completed"
+
+}
+
 interface HistoryPageData {
     _id : string;
+    userId : string;
+    shopId : number;
+    items : Array<{
+        menuId: string;
+        quantity: number;
+    }>
     waitingCount : number;
-    name : string;
-    price : number;
-    pickup : boolean;
+    totalPrice : number;
+    takeout : boolean;
+    paymentMethod: string;
+    createdTime: string;
+    status: string;
 }
 
 type HistoryPageModel = HistoryPageData[];

src/pages/history-page/modules/order-box/OrderBox.module.css

@@ -3,12 +3,6 @@
     border-bottom: 1px solid var(--gray-2);
 }
 
-.img {
-    width: 80px;
-    height: 80px;
-    margin-right: 8px;
-    display: inline-block;
-}
 
 .text-box {
     display: inline-flex;
@@ -30,16 +24,12 @@
 }
 
 .price {
-    position: relative;
+    position: absolute;
     float: right;
-    bottom: 16px;
     right: 16px;
+    font-size: 20px;
 }
 
 .pickup {
-    position: relative;
-    float: right;
-    top: 16px;
-    right: 16px;
-    
+    display: block;
 }
\ No newline at end of file

src/pages/history-page/modules/order-box/OrderBox.tsx

@@ -6,21 +6,39 @@ import type { HistoryPageData } from "../../config/type";
 import type { FC } from "react";
 
 interface Props {
+    name : string;
+    shop : string;
     waitingCount : HistoryPageData['waitingCount'];
-    name : HistoryPageData['name'];
-    price : HistoryPageData['price'];
-    pickup : HistoryPageData['pickup'];
+    price : HistoryPageData['totalPrice'];
+    takeout : HistoryPageData['takeout'];
+    status : HistoryPageData['status'];
 }
 
-const OrderBox : FC<Props> = ({ waitingCount, name, price, pickup }) => {
+const OrderBox : FC<Props> = ({ name, shop, waitingCount, price, takeout, status }) => {
+
+    const setStatus = () => {
+        switch (status) {
+        case 'Pending':
+            return '주문 대기중';
+        case 'Preparing':
+            return '상품 준비중';
+        case 'Ready':
+            return '수령 대기중';
+        case 'Completed':
+            return '수령 완료';
+        }
+    };
+    const _status = setStatus();
 
     return (
         <div className={S['container']}>
-            <div>
             <span className={S['number']}>{waitingCount}</span>
+            <div className={S['text-box']}>
                 <span className={S['title']}>{name}</span>
+                <span>{shop}</span>
+                <span className={S['pickup']}>{takeout ? '포장' : '매장'}</span>
+                <span>{_status}</span>
                 <span className={S['price']}>{moneyFormatter(price)}</span>
-                <span className={S['pickup']}>{pickup ? '픽업 완료' : '픽업 대기'}</span>
             </div>
         </div>
     );