Merge branch 'order' into 'main'

feat: order exitbtn add

See merge request ajou-pay/client-user!6

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}
                     />
                 ))
             }

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
+        }
     }
 ];
 

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

-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
+};

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

+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>
     );
 };

src/pages/order-page/cancel-page/CancelPage.tsx

 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;

src/pages/order-page/fail-page/FailPage.tsx

 import { useEffect } from "react";
 
+import ExitButton from "../module/ExitButton";
+
 const FailPage = () => {
     useEffect(() => {
         localStorage.removeItem('payment_id');
     }, []);
     
     return (
-        <div>fail</div>
+        <div>
+            <ExitButton text="결제가 실패했습니다."/>
+        </div>
     );
 };
 

src/pages/order-page/module/ExitButton.module.css

+.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;
+}

src/pages/order-page/module/ExitButton.tsx

+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;

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>
     );
 };