feat: 결제 완료 후 특정 페이지로 넘어가도록 수정

MU-Software · MU-Software · commit a4cb73bdd95a · 2025-06-11T19:48:09.000+09:00
diff --git a/packages/shop/src/components/features/cart.tsx b/packages/shop/src/components/features/cart.tsx
@@ -4,6 +4,7 @@ import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
+import { useNavigate } from "react-router-dom";
 import * as R from "remeda";
 
 import ShopHooks from "../../hooks";
@@ -65,130 +66,124 @@ type CartStatusStateType = {
   openBackdrop: boolean;
 };
 
-export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = Suspense.with(
-  { fallback: <CircularProgress /> },
-  ({ onPaymentCompleted }) => {
-    const queryClient = useQueryClient();
-    const { language, shopImpAccountId } = ShopHooks.useShopContext();
-    const shopAPIClient = ShopHooks.useShopClient();
-    const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation(shopAPIClient);
-    const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation(shopAPIClient);
-    const [state, setState] = React.useState<CartStatusStateType>({
-      openDialog: false,
-      openBackdrop: false,
-    });
+export const CartStatus: React.FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { language, shopImpAccountId } = ShopHooks.useShopContext();
+  const shopAPIClient = ShopHooks.useShopClient();
+  const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation(shopAPIClient);
+  const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation(shopAPIClient);
+  const [state, setState] = React.useState<CartStatusStateType>({
+    openDialog: false,
+    openBackdrop: false,
+  });
 
-    const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
-      enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
+  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+    enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
-    const cartIsEmptyStr = language === "ko" ? "장바구니가 비어있어요!" : "Your cart is empty!";
-    const totalPriceStr = language === "ko" ? "총 결제 금액" : "Total Payment Amount";
-    const orderCartStr = language === "ko" ? "장바구니에 담긴 상품 결제" : "Pay for Items in Cart";
-    const succeededToRemoveItemFromCartStr =
-      language === "ko" ? "장바구니에서 상품을 삭제했습니다." : "Item has been removed from the cart.";
-    const errorWhileLoadingCartStr =
-      language === "ko"
-        ? "장바구니 정보를 불러오는 중 문제가 발생했습니다."
-        : "An error occurred while loading the cart information.";
-    const errorWhilePreparingOrderStr =
-      language === "ko"
-        ? "장바구니 결제 준비 중 문제가 발생했습니다.\n잠시 후 다시 시도해주세요."
-        : "An error occurred while preparing the cart order.\nPlease try again later.";
-    const failedToOrderStr =
-      language === "ko"
-        ? "장바구니 결제에 실패했습니다.\n잠시 후 다시 시도해주세요.\n"
-        : "Failed to complete the cart order.\nPlease try again later.\n";
+  const cartIsEmptyStr = language === "ko" ? "장바구니가 비어있어요!" : "Your cart is empty!";
+  const totalPriceStr = language === "ko" ? "총 결제 금액" : "Total Payment Amount";
+  const orderCartStr = language === "ko" ? "장바구니에 담긴 상품 결제" : "Pay for Items in Cart";
+  const succeededToRemoveItemFromCartStr =
+    language === "ko" ? "장바구니에서 상품을 삭제했습니다." : "Item has been removed from the cart.";
+  const errorWhileLoadingCartStr =
+    language === "ko"
+      ? "장바구니 정보를 불러오는 중 문제가 발생했습니다."
+      : "An error occurred while loading the cart information.";
+  const errorWhilePreparingOrderStr =
+    language === "ko"
+      ? "장바구니 결제 준비 중 문제가 발생했습니다.\n잠시 후 다시 시도해주세요."
+      : "An error occurred while preparing the cart order.\nPlease try again later.";
+  const failedToOrderStr =
+    language === "ko"
+      ? "장바구니 결제에 실패했습니다.\n잠시 후 다시 시도해주세요.\n"
+      : "Failed to complete the cart order.\nPlease try again later.\n";
 
-    const removeItemFromCart = (cartProductId: string) =>
-      removeItemFromCartMutation.mutate(
-        { cartProductId },
-        {
-          onSuccess: () => addSnackbar(succeededToRemoveItemFromCartStr, "success"),
-          onError: (error) => addSnackbar(error.message || errorWhilePreparingOrderStr, "error"),
-        }
-      );
+  const removeItemFromCart = (cartProductId: string) =>
+    removeItemFromCartMutation.mutate(
+      { cartProductId },
+      {
+        onSuccess: () => addSnackbar(succeededToRemoveItemFromCartStr, "success"),
+        onError: (error) => addSnackbar(error.message || errorWhilePreparingOrderStr, "error"),
+      }
+    );
 
-    const openDialog = () => setState((ps) => ({ ...ps, openDialog: true }));
-    const closeDialog = () => setState((ps) => ({ ...ps, openDialog: false }));
-    const openBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: true }));
-    const closeBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: false }));
+  const openDialog = () => setState((ps) => ({ ...ps, openDialog: true }));
+  const closeDialog = () => setState((ps) => ({ ...ps, openDialog: false }));
+  const openBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: true }));
+  const closeBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: false }));
 
-    const onFormSubmit = (formData: ShopSchemas.CustomerInfo) => {
-      closeDialog();
-      openBackdrop();
-      cartOrderStartMutation.mutate(formData, {
-        onSuccess: (order: ShopSchemas.Order) => {
-          ShopUtils.startPortOnePurchase(
-            shopImpAccountId,
-            order,
-            () => {
-              queryClient.invalidateQueries();
-              queryClient.resetQueries();
-              onPaymentCompleted?.();
-            },
-            (response) => alert(failedToOrderStr + response.error_msg),
-            closeBackdrop
-          );
-        },
-        onError: (error) => alert(error.message || errorWhilePreparingOrderStr),
-      });
-    };
+  const onFormSubmit = (formData: ShopSchemas.CustomerInfo) => {
+    closeDialog();
+    openBackdrop();
+    cartOrderStartMutation.mutate(formData, {
+      onSuccess: (order: ShopSchemas.Order) => {
+        ShopUtils.startPortOnePurchase(
+          shopImpAccountId,
+          order,
+          () => {
+            queryClient.invalidateQueries();
+            queryClient.resetQueries();
+            navigate("/store/thank-you-for-your-purchase");
+          },
+          (response) => alert(failedToOrderStr + response.error_msg),
+          closeBackdrop
+        );
+      },
+      onError: (error) => alert(error.message || errorWhilePreparingOrderStr),
+    });
+  };
 
-    const disabled = removeItemFromCartMutation.isPending || cartOrderStartMutation.isPending;
+  const disabled = removeItemFromCartMutation.isPending || cartOrderStartMutation.isPending;
 
-    const WrappedShopCartList: React.FC = () => {
-      const { data } = ShopHooks.useCart(shopAPIClient);
+  const WrappedShopCartList: React.FC = () => {
+    const { data } = ShopHooks.useCart(shopAPIClient);
 
-      return !R.isArray(data.products) || data.products.length === 0 ? (
-        <Typography variant="body1" color="error">
-          {cartIsEmptyStr}
+    return !R.isArray(data.products) || data.products.length === 0 ? (
+      <Typography variant="body1" color="error">
+        {cartIsEmptyStr}
+      </Typography>
+    ) : (
+      <>
+        <Backdrop sx={(theme) => ({ zIndex: theme.zIndex.drawer + 1 })} open={state.openBackdrop} onClick={() => {}} />
+        <CommonComponents.CustomerInfoFormDialog
+          open={state.openDialog}
+          closeFunc={closeDialog}
+          onSubmit={onFormSubmit}
+          defaultValue={data.customer_info}
+        />
+        <Stack spacing={2}>
+          <Common.Components.MDX.OneDetailsOpener>
+            {data.products.map((prodRel) => (
+              <CartItem
+                language={language}
+                key={prodRel.id}
+                cartProdRel={prodRel}
+                disabled={disabled}
+                removeItemFromCartFunc={removeItemFromCart}
+              />
+            ))}
+          </Common.Components.MDX.OneDetailsOpener>
+        </Stack>
+        <br />
+        <Divider />
+        <Typography variant="h6" sx={{ textAlign: "end" }}>
+          {totalPriceStr}: <CommonComponents.PriceDisplay price={data.first_paid_price} />
         </Typography>
-      ) : (
-        <>
-          <Backdrop
-            sx={(theme) => ({ zIndex: theme.zIndex.drawer + 1 })}
-            open={state.openBackdrop}
-            onClick={() => {}}
-          />
-          <CommonComponents.CustomerInfoFormDialog
-            open={state.openDialog}
-            closeFunc={closeDialog}
-            onSubmit={onFormSubmit}
-            defaultValue={data.customer_info}
-          />
-          <Stack spacing={2}>
-            <Common.Components.MDX.OneDetailsOpener>
-              {data.products.map((prodRel) => (
-                <CartItem
-                  language={language}
-                  key={prodRel.id}
-                  cartProdRel={prodRel}
-                  disabled={disabled}
-                  removeItemFromCartFunc={removeItemFromCart}
-                />
-              ))}
-            </Common.Components.MDX.OneDetailsOpener>
-          </Stack>
-          <br />
-          <Divider />
-          <Typography variant="h6" sx={{ textAlign: "end" }}>
-            {totalPriceStr}: <CommonComponents.PriceDisplay price={data.first_paid_price} />
-          </Typography>
-          <Button variant="contained" color="secondary" onClick={openDialog} disabled={disabled}>
-            {orderCartStr}
-          </Button>
-        </>
-      );
-    };
-
-    return (
-      <CommonComponents.SignInGuard>
-        <ErrorBoundary fallback={errorWhileLoadingCartStr}>
-          <Suspense fallback={<CircularProgress />}>
-            <WrappedShopCartList />
-          </Suspense>
-        </ErrorBoundary>
-      </CommonComponents.SignInGuard>
+        <Button variant="contained" color="secondary" onClick={openDialog} disabled={disabled}>
+          {orderCartStr}
+        </Button>
+      </>
     );
-  }
-);
+  };
+
+  return (
+    <CommonComponents.SignInGuard>
+      <ErrorBoundary fallback={errorWhileLoadingCartStr}>
+        <Suspense fallback={<CircularProgress />}>
+          <WrappedShopCartList />
+        </Suspense>
+      </ErrorBoundary>
+    </CommonComponents.SignInGuard>
+  );
+});
diff --git a/packages/shop/src/components/features/product.tsx b/packages/shop/src/components/features/product.tsx
@@ -1,8 +1,10 @@
 import * as Common from "@frontend/common";
 import { AccordionProps, Button, ButtonProps, CircularProgress, Divider, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
+import { useNavigate } from "react-router-dom";
 import * as R from "remeda";
 
 import ShopHooks from "../../hooks";
@@ -82,6 +84,7 @@ const ProductItem: React.FC<ProductItemPropType> = ({
   startPurchaseProcess,
   ...props
 }) => {
+  const navigate = useNavigate();
   const optionFormRef = React.useRef<HTMLFormElement>(null);
   const shopAPIClient = ShopHooks.useShopClient();
   const addItemToCartMutation = ShopHooks.useAddItemToCartMutation(shopAPIClient);
@@ -101,6 +104,7 @@ const ProductItem: React.FC<ProductItemPropType> = ({
     language === "ko"
       ? "장바구니에 상품을 담는 중 문제가 발생했어요,\n잠시 후 다시 시도해주세요."
       : "An error occurred while adding the product to the cart,\nplease try again later.";
+  const gotoCartPageStr = language === "ko" ? "장바구니로 이동" : "Go to Cart";
 
   const formOnSubmit: React.FormEventHandler = (e) => {
     e.preventDefault();
@@ -113,8 +117,22 @@ const ProductItem: React.FC<ProductItemPropType> = ({
 
   const addItemToCart = () =>
     addItemToCartMutation.mutate(getCartAppendRequestPayload(product, optionFormRef), {
-      onSuccess: () => addSnackbar(succeededToAddOneItemToCartStr, "success"),
-      onError: () => addSnackbar(failedToAddOneItemToCartStr, "error"),
+      onSuccess: () =>
+        addSnackbar(
+          <Stack spacing={2} justifyContent="center" alignItems="center" sx={{ width: "100%", flexGrow: 1 }}>
+            <div>{succeededToAddOneItemToCartStr}</div>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => navigate("/store/cart")}
+              children={gotoCartPageStr}
+              sx={{ backgroundColor: "white" }}
+              fullWidth
+            />
+          </Stack>,
+          "success"
+        ),
+      onError: () => alert(failedToAddOneItemToCartStr),
     });
   const onOrderOneItemButtonClick = () => startPurchaseProcess(getCartAppendRequestPayload(product, optionFormRef));
   const actionButton = R.isNullish(notPurchasableReason) && (
@@ -170,6 +188,8 @@ type ProductStateType = {
 
 export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) => {
   const WrappedProductList: React.FC = () => {
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
     const { language, shopImpAccountId } = ShopHooks.useShopContext();
     const shopAPIClient = ShopHooks.useShopClient();
     const oneItemOrderStartMutation = ShopHooks.usePrepareOneItemOrderMutation(shopAPIClient);
@@ -210,7 +230,11 @@ export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) =>
             ShopUtils.startPortOnePurchase(
               shopImpAccountId,
               order,
-              () => {},
+              () => {
+                queryClient.invalidateQueries();
+                queryClient.resetQueries();
+                navigate("/store/thank-you-for-your-purchase");
+              },
               (response) => alert(failedToOrderStr + response.error_msg),
               closeBackdrop
             );
