feat: verifying order

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
         "semi": ["error", "always"],
         "object-curly-spacing": ["error", "always"],
         "space-infix-ops": ["error", { "int32Hint": false }],
+        "prefer-const": "off",
 
         // react.js
         "react/react-in-jsx-scope": "off",

src/_app/App.tsx

@@ -59,7 +59,7 @@ function App() {
                                     <Route path={APP_ROUTE.MENU} element={<MenuPage connector={connector} setHeaderName={setHeaderName}  />} />
                                     <Route path={APP_ROUTE.CART} element={<CartPage connector={connector} />} />
                                     <Route path={APP_ROUTE.HISTORY} element={<HistoryPage connector={connector} />} />
-                                    <Route path={APP_ROUTE.ORDER.SUCCESS} element={<SuccessPage />} />
+                                    <Route path={APP_ROUTE.ORDER.SUCCESS} element={<SuccessPage connector={connector} />} />
                                     <Route path={APP_ROUTE.ORDER.FAIL} element={<FailPage />} />
                                     <Route path={APP_ROUTE.ORDER.CANCEL} element={<CancelPage />} />
                                 </Routes>

src/common/utils/query.ts

+function getQueryStrings(search: string, str: string): string {
+    const queryStrings: any = {};
+    const urlParams = new URLSearchParams(search);
+    urlParams.forEach((value, key) => {
+        queryStrings[key] = value;
+    });
+    return queryStrings[str];
+}
+
+export { getQueryStrings };

src/pages/cart-page/CartPage.tsx

@@ -23,9 +23,6 @@ const CartPage: FC<Props> = ({ connector }) => {
     const [quantities, setQuantities] = useState<number[]>([]);
     const [totalPrice, setTotalPrice] = useState(0);
     
-    const a = 1;
-    const b = 1;
-    
     
     useEffect(() => {
         setQuantities(cartItem?.menus.map((d) => d.quantity) ?? []);
@@ -54,6 +51,7 @@ const CartPage: FC<Props> = ({ connector }) => {
         if (!cartItem?.shop) return;
     
         void (async () => {
+            try {
                 const _device = detectDeviceType();
     
                 const orderRequest = await connector.post<OrderPostModel>('/order', {
@@ -62,8 +60,14 @@ const CartPage: FC<Props> = ({ connector }) => {
                     takeout: cartItem.takeout
                 });
     
+                localStorage.setItem('payment_id', orderRequest.payment_id);
+    
                 if (_device === DEVICE.MOBILE) window.location.href = orderRequest.next_redirect_mobile_url;
                 else if (_device === DEVICE.PC) window.location.href = orderRequest.next_redirect_pc_url;
+            } catch (e) {
+                alert('결제요청에 실패하였습니다');
+                console.error(e);
+            }
         })();
     };
     

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

+import { useEffect } from "react";
+
 const CancelPage = () => {
+    useEffect(() => {
+        localStorage.removeItem('payment_id');
+    }, []);
+    
     return (<div>cancel</div>);
 };
 

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

+import { useEffect } from "react";
+
 const FailPage = () => {
-    return (<div>fail</div>);
+    useEffect(() => {
+        localStorage.removeItem('payment_id');
+    }, []);
+    
+    return (
+        <div>fail</div>
+    );
 };
 
 export default FailPage;

src/pages/order-page/success-page/SuccessPage.tsx

-const SuccessPage = () => {
-    return (<div>suc</div>);
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+import { getQueryStrings } from "../../../common/utils/query";
+
+import type { OrderApprovePostModel } from "./config/type";
+import type Connector from "../../../common/instances/Connector";
+import type { FC } from "react";
+
+interface Props {
+    connector: Connector;
+}
+
+const SuccessPage: FC<Props> = ({ connector }) => {
+    const location = useLocation();
+    
+    useEffect(() => {
+        if (!location.search) return;
+        
+        void (async () => {
+            try {
+                await connector.post<OrderApprovePostModel>('/order/approve', {
+                    pg_token: getQueryStrings(location.search, 'pg_token'),
+                    payment_id: localStorage.getItem('payment_id'),
+                });
+            } catch (e) {
+                alert("결제에 실패하였습니다");
+                console.error(e);
+            } finally {
+                localStorage.removeItem('payment_id');
+            }
+        })();
+    }, [location]);
+    
+    
+    return (
+        <div>
+            Success!
+        </div>
+    );
 };
 
 export default SuccessPage;

src/pages/order-page/success-page/config/type.ts

+import type { CartItemPostModel } from "../../../cart-page/config/type";
+
+interface OrderApprovePostModel {
+	"_id": string;
+	"userId": CartItemPostModel['userId'],
+	"shopId": CartItemPostModel['shopId'],
+	"items": CartItemPostModel['items'],
+	"paymentMethod": CartItemPostModel['paymentMethod']
+	"waitingCount": CartItemPostModel['waitingCount']
+	"takeout": CartItemPostModel['takeout']
+	"totalPrice": CartItemPostModel['totalPrice']
+	"createdTime": CartItemPostModel['createdTime']
+}
+
+export type { OrderApprovePostModel };