diff --git a/src/pages/history-page/HistoryPage.tsx b/src/pages/history-page/HistoryPage.tsx
index b5f46fe7a51983ab11d7453848ce48f1b07298f6..2dae433b7d70b5136517ca190bfead987e6c7794 100644
--- a/src/pages/history-page/HistoryPage.tsx
+++ b/src/pages/history-page/HistoryPage.tsx
@@ -24,13 +24,14 @@ const HistoryPage: GFC = ({ connector }) => {
}
})();
}, []);
+
return (
<div>
{
model && model.map((d, i) => (
- <OrderBox waitingCount={d.waitingCount} name={'menu_name'}
- price={d.totalPrice} status={d.status} shop={'shop_name'}
- takeout={d.takeout} key={`orderbox-${i}`}
+ <OrderBox waitingCount={d.waitingCount} items={d.items}
+ price={d.totalPrice} status={d.status} shop={d.shop.name}
+ takeout={d.takeout} key={`orderbox-${i}`} connector={connector}
/>
))
}
diff --git a/src/pages/history-page/config/dummy.ts b/src/pages/history-page/config/dummy.ts
index d95d7fb17b9078fa5ecaf328271027874ab322de..eddfdfe1366ef4c91f2f69f579cb07a3e89decba 100644
--- a/src/pages/history-page/config/dummy.ts
+++ b/src/pages/history-page/config/dummy.ts
@@ -2,10 +2,10 @@ import type { HistoryPageModel } from "./type";
const HISTORY_PAGE_DUMMY: HistoryPageModel = [
{
- _id: "656bb8c3fd1861cb6fa562fa",
- userId: "656b8ec725f8b6df24ab910c",
- shopId: 3,
- items: [
+ "_id": "656bb8c3fd1861cb6fa562fa",
+ "userId": "656b8ec725f8b6df24ab910c",
+ "shopId": 3,
+ "items": [
{
"menuId": "6562292377dd1a645a7e960a",
"quantity": 2
@@ -15,12 +15,20 @@ const HISTORY_PAGE_DUMMY: HistoryPageModel = [
"quantity": 1
}
],
- paymentMethod: "MONEY",
- waitingCount: 39,
- takeout: true,
- totalPrice: 22000,
- createdTime: "2023-12-02T23:07:47.000Z",
- status: "Pending"
+ "paymentMethod": "MONEY",
+ "waitingCount": 39,
+ "takeout": true,
+ "totalPrice": 22000,
+ "createdTime": "2023-12-02T23:07:47.000Z",
+ "status": "Pending",
+ "shop": {
+ "_id": "3",
+ "name": "행복돈까스",
+ "icon": "https://git.ajou.ac.kr/ajou-pay/jj-s3/-/raw/main/logo/%ED%96%89%EB%B3%B5%EB%8F%88%EA%B9%8C%EC%8A%A4.png?ref_type=heads",
+ "location": "구학생회관 1층",
+ "openStatus": true,
+ "waitingOrderCount": 56
+ }
},
{
"_id": "656bb9dafd1861cb6fa56304",
@@ -41,7 +49,15 @@ const HISTORY_PAGE_DUMMY: HistoryPageModel = [
"takeout": true,
"totalPrice": 36500,
"createdTime": "2023-12-02T23:12:26.000Z",
- "status": "Ready"
+ "status": "Pending",
+ "shop": {
+ "_id": "3",
+ "name": "행복돈까스",
+ "icon": "https://git.ajou.ac.kr/ajou-pay/jj-s3/-/raw/main/logo/%ED%96%89%EB%B3%B5%EB%8F%88%EA%B9%8C%EC%8A%A4.png?ref_type=heads",
+ "location": "구학생회관 1층",
+ "openStatus": true,
+ "waitingOrderCount": 56
+ }
}
];
diff --git a/src/pages/history-page/config/type.ts b/src/pages/history-page/config/type.ts
index ffd9580f83d942c774b9c6ddd2bb73ee6e0662c7..4b6fc06fbe3d5d04cc9ba3c937a37853c2d2a3b6 100644
--- a/src/pages/history-page/config/type.ts
+++ b/src/pages/history-page/config/type.ts
@@ -1,15 +1,10 @@
-enum StatusType {
- "Pending",
- "Preparing",
- "Ready",
- "Completed"
-
-}
+import type { MainPageData } from "../../main-page/config/type";
interface HistoryPageData {
_id : string;
userId : string;
shopId : number;
+ shop : MainPageData;
items : Array<{
menuId: string;
quantity: number;
@@ -22,6 +17,18 @@ interface HistoryPageData {
status: string;
}
+interface ItemData {
+ menuId: string;
+ quantity: number;
+}
+
type HistoryPageModel = HistoryPageData[];
+type ItemModel = ItemData[];
+
-export type { HistoryPageModel, HistoryPageData };
+export type {
+ HistoryPageModel,
+ HistoryPageData,
+ ItemModel,
+ ItemData
+};
diff --git a/src/pages/history-page/modules/order-box/OrderBox.tsx b/src/pages/history-page/modules/order-box/OrderBox.tsx
index 66ec662f49957e315e42e1a4cf8be61a4eade1aa..c8c695bd60761fe97e241fb2c65744172b542234 100644
--- a/src/pages/history-page/modules/order-box/OrderBox.tsx
+++ b/src/pages/history-page/modules/order-box/OrderBox.tsx
@@ -1,20 +1,46 @@
+import { useEffect, useState } from "react";
+
+import { ALERT } from "../../../../common/constants";
import { moneyFormatter } from "../../../../common/utils/fomat";
import S from "./OrderBox.module.css";
+import type Connector from "../../../../common/instances/Connector";
+import type { MenuPageData } from "../../../menu-page/config/type";
import type { HistoryPageData } from "../../config/type";
import type { FC } from "react";
interface Props {
- name : string;
shop : string;
+ items : HistoryPageData['items'];
waitingCount : HistoryPageData['waitingCount'];
price : HistoryPageData['totalPrice'];
takeout : HistoryPageData['takeout'];
status : HistoryPageData['status'];
+ connector : Connector;
}
-const OrderBox : FC<Props> = ({ name, shop, waitingCount, price, takeout, status }) => {
+const OrderBox : FC<Props> = ({ shop, items, waitingCount, price, takeout, status, connector }) => {
+ const [_name, setName] = useState<string>('');
+
+ useEffect(() => {
+ void (async () => {
+ try{
+ const response = await connector.get<MenuPageData>(`/menu/${items[0].menuId}`);
+ setName(response.name);
+ } catch {
+ alert(ALERT.REQ_FAIL);
+ }
+ })();
+ }, []);
+
+ const title = () => {
+ let quantity = 0;
+ items?.forEach((d) => {
+ quantity += d.quantity;
+ });
+ return`${_name} 포함 ${quantity}개`;
+ };
const setStatus = () => {
switch (status) {
@@ -34,12 +60,12 @@ const OrderBox : FC<Props> = ({ name, shop, waitingCount, price, takeout, status
<div className={S['container']}>
<span className={S['number']}>{waitingCount}</span>
<div className={S['text-box']}>
- <span className={S['title']}>{name}</span>
+ <span className={S['title']}>{title()}</span>
<span>{shop}</span>
<span className={S['pickup']}>{takeout ? '포장' : '매장'}</span>
<span>{_status}</span>
- <span className={S['price']}>{moneyFormatter(price)}</span>
</div>
+ <span className={S['price']}>{moneyFormatter(price)}</span>
</div>
);
};
diff --git a/src/pages/order-page/cancel-page/CancelPage.tsx b/src/pages/order-page/cancel-page/CancelPage.tsx
index 4d303d7754ccc515f22fcecbd425d8d161df7687..4cc37ef3781d55ec1d25971afe0a78e5ddfef0e4 100644
--- a/src/pages/order-page/cancel-page/CancelPage.tsx
+++ b/src/pages/order-page/cancel-page/CancelPage.tsx
@@ -1,11 +1,17 @@
import { useEffect } from "react";
+import ExitButton from "../module/ExitButton";
+
const CancelPage = () => {
useEffect(() => {
localStorage.removeItem('payment_id');
}, []);
- return (<div>cancel</div>);
+ return (
+ <div>
+ <ExitButton text="결제를 취소하셨습니다"/>
+ </div>
+ );
};
export default CancelPage;
diff --git a/src/pages/order-page/fail-page/FailPage.tsx b/src/pages/order-page/fail-page/FailPage.tsx
index 39e3a4de09de594608b3827a1f1258e6b9205ede..ae648f972fc8aa5e16e3903b0be99dff8d30f5c5 100644
--- a/src/pages/order-page/fail-page/FailPage.tsx
+++ b/src/pages/order-page/fail-page/FailPage.tsx
@@ -1,12 +1,16 @@
import { useEffect } from "react";
+import ExitButton from "../module/ExitButton";
+
const FailPage = () => {
useEffect(() => {
localStorage.removeItem('payment_id');
}, []);
return (
- <div>fail</div>
+ <div>
+ <ExitButton text="결제가 실패했습니다."/>
+ </div>
);
};
diff --git a/src/pages/order-page/module/ExitButton.module.css b/src/pages/order-page/module/ExitButton.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..798dac9f6a609bd629b4bc77a30153d55809ad5c
--- /dev/null
+++ b/src/pages/order-page/module/ExitButton.module.css
@@ -0,0 +1,35 @@
+.container {
+ width: 100vw;
+ height: 100vh;
+ margin-top: calc(-1*var(--header-height));
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+}
+
+.text {
+ font-size: 20px;
+ margin: 30px;
+}
+
+.btn-area {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+}
+
+.btn-area button {
+ width: calc(40% - 8px);
+ height: 36px;
+ border-radius: 8px;
+}
+
+.btn {
+ border: none;
+ background-color: var(--brand-color);
+ color: white;
+}
diff --git a/src/pages/order-page/module/ExitButton.tsx b/src/pages/order-page/module/ExitButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..715ef736601ed3eb0e77148ba7127dd7a12c4650
--- /dev/null
+++ b/src/pages/order-page/module/ExitButton.tsx
@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router-dom";
+
+import APP_ROUTE from "../../../_app/config/route";
+
+import S from './ExitButton.module.css';
+
+import type { FC } from "react";
+
+interface props {
+ text: string;
+}
+
+const ExitButton: FC<props> = ({ text }) => {
+ const navigate = useNavigate();
+
+ const handleGotoMain = () => {
+ navigate(APP_ROUTE.MAIN);
+ };
+
+ const handleGotoHistory = () => {
+ navigate(APP_ROUTE.HISTORY);
+ };
+
+
+ return (
+ <div className={S['container']} >
+ <span className={S['text']}>{text}</span>
+ <div className={S['btn-area']}>
+ <button className={S['btn']} onClick={handleGotoMain}>홈 화면으로</button>
+ <button className={S['btn']} onClick={handleGotoHistory}>주문 내역으로</button>
+ </div>
+ </div>
+ );
+};
+
+export default ExitButton;
diff --git a/src/pages/order-page/success-page/SuccessPage.tsx b/src/pages/order-page/success-page/SuccessPage.tsx
index 4a01131c077c45e8f04c4ee7a2b13f7f4d60282e..cda477eeb9e722f601ec16fd467e62ff6b302d3e 100644
--- a/src/pages/order-page/success-page/SuccessPage.tsx
+++ b/src/pages/order-page/success-page/SuccessPage.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { getQueryStrings } from "../../../common/utils/query";
+import ExitButton from "../module/ExitButton";
import type { OrderApprovePostModel } from "./config/type";
import type { GFC } from "../../../common/types/fc";
@@ -31,7 +32,7 @@ const SuccessPage: GFC = ({ connector }) => {
return (
<div>
- Success!
+ <ExitButton text="결제가 완료되었습니다."/>
</div>
);
};