diff --git a/src/pages/history-page/HistoryPage.tsx b/src/pages/history-page/HistoryPage.tsx
index 156a15a8a416ee8e9d376b6a0f4f00f6f3bc2c04..f74ce27e5609d0547251fc429d1444e52979e562 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 628292bb23d35b1ea99150893609a8980eae2f34..d95d7fb17b9078fa5ecaf328271027874ab322de 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 66c9b8b4d238a80c18e51b24157bec5c2c3f6bb7..ffd9580f83d942c774b9c6ddd2bb73ee6e0662c7 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 6dbb37b073b2696e0a03c0da7694ad18fc3489bc..5678c4fdc6430bcb20a32306e93474fd7d2c67cc 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 f3cfcb589bd426dd4c6ffb7058cb16a1c1429103..66ec662f49957e315e42e1a4cf8be61a4eade1aa 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>
);