From 049c6da61d7f937a565d88e5a1acf2446dceb5b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=95=9C=EC=84=B1=EC=9E=AC?= <nicola1928@ajou.ac.kr>
Date: Thu, 7 Dec 2023 10:35:55 +0900
Subject: [PATCH] feat: historypage connect api

---
 src/pages/history-page/HistoryPage.tsx        | 19 +++++--
 src/pages/history-page/config/dummy.ts        | 57 +++++++++++++------
 src/pages/history-page/config/type.ts         | 22 ++++++-
 .../modules/order-box/OrderBox.module.css     | 16 +-----
 .../modules/order-box/OrderBox.tsx            | 32 ++++++++---
 5 files changed, 99 insertions(+), 47 deletions(-)

diff --git a/src/pages/history-page/HistoryPage.tsx b/src/pages/history-page/HistoryPage.tsx
index 156a15a..f74ce27 100644
--- a/src/pages/history-page/HistoryPage.tsx
+++ b/src/pages/history-page/HistoryPage.tsx
@@ -1,7 +1,7 @@
 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}`}
                     />
                 ))
             }
diff --git a/src/pages/history-page/config/dummy.ts b/src/pages/history-page/config/dummy.ts
index 628292b..d95d7fb 100644
--- a/src/pages/history-page/config/dummy.ts
+++ b/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
+            },
+            {
+                "menuId": "6562292377dd1a645a7e9609",
+                "quantity": 1
+            }
+        ],
+        paymentMethod: "MONEY",
+        waitingCount: 39,
+        takeout: true,
+        totalPrice: 22000,
+        createdTime: "2023-12-02T23:07:47.000Z",
+        status: "Pending"
     },
     {
-        _id : '2',
-        waitingCount : 189,
-        name : '라면',
-        price : 3000,
-        pickup : false,
-    },
-    {
-        _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 };
diff --git a/src/pages/history-page/config/type.ts b/src/pages/history-page/config/type.ts
index 66c9b8b..ffd9580 100644
--- a/src/pages/history-page/config/type.ts
+++ b/src/pages/history-page/config/type.ts
@@ -1,9 +1,25 @@
+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[];
diff --git a/src/pages/history-page/modules/order-box/OrderBox.module.css b/src/pages/history-page/modules/order-box/OrderBox.module.css
index 6dbb37b..5678c4f 100644
--- a/src/pages/history-page/modules/order-box/OrderBox.module.css
+++ b/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
diff --git a/src/pages/history-page/modules/order-box/OrderBox.tsx b/src/pages/history-page/modules/order-box/OrderBox.tsx
index f3cfcb5..66ec662 100644
--- a/src/pages/history-page/modules/order-box/OrderBox.tsx
+++ b/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>
+            <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>
     );
-- 
GitLab