fix: shop 컴포넌트에서 backend 오류 메시지 포맷팅 함수 사용

Author: MU-Software

packages/common/src/apis/client.ts

@@ -59,6 +59,23 @@ export class BackendAPIClientError extends Error {
   }
 }
 
+export const formatBackendErrorMessage = (error: unknown, fallback: string): string => {
+  if (error instanceof BackendAPIClientError) {
+    const seen = new Set<string>();
+    const messages: string[] = [];
+    for (const detailedError of error.detail.errors) {
+      const detail = detailedError.detail;
+      if (detail && !seen.has(detail)) {
+        seen.add(detail);
+        messages.push(detail);
+      }
+    }
+    if (messages.length > 0) return messages.join("\n");
+  }
+  if (error instanceof Error && error.message) return error.message;
+  return fallback;
+};
+
 type supportedLanguages = "ko" | "en";
 
 type AxiosRequestWithoutPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => Promise<Resp>;

packages/shop/src/apis/index.ts

@@ -16,7 +16,7 @@ import type {
   UserSignedInStatus,
 } from "@frontend/shop/schemas";
 
-export { BackendAPIClient, BackendAPIClientError } from "@frontend/common/apis/client";
+export { BackendAPIClient, BackendAPIClientError, formatBackendErrorMessage } from "@frontend/common/apis/client";
 
 /**
  * 로그인합니다.

packages/shop/src/components/features/cart.tsx

@@ -8,7 +8,7 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { isArray } from "remeda";
 
-import { BackendAPIClientError } from "@frontend/shop/apis";
+import { formatBackendErrorMessage } from "@frontend/shop/apis";
 import { CustomerInfoFormDialog, OrderProductRelationOptionInput, PriceDisplay, SignInGuard } from "@frontend/shop/components/common";
 import { useCart, usePrepareCartOrderMutation, useRemoveItemFromCartMutation, useShopClient, useShopContext } from "@frontend/shop/hooks";
 import type { CustomerInfo, Order, OrderProductItem } from "@frontend/shop/schemas";
@@ -105,7 +105,7 @@ export const CartStatus: FC = Suspense.with({ fallback: <CircularProgress /> },
       { cartProductId },
       {
         onSuccess: () => addSnackbar(succeededToRemoveItemFromCartStr, "success"),
-        onError: (error) => addSnackbar(error.message || errorWhilePreparingOrderStr, "error"),
+        onError: (error) => addSnackbar(formatBackendErrorMessage(error, errorWhilePreparingOrderStr), "error"),
       }
     );
 
@@ -131,11 +131,7 @@ export const CartStatus: FC = Suspense.with({ fallback: <CircularProgress /> },
           closeBackdrop
         );
       },
-      onError: (error) =>
-        alert(
-          (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
-            errorWhilePreparingOrderStr
-        ),
+      onError: (error) => alert(formatBackendErrorMessage(error, errorWhilePreparingOrderStr)),
     });
   };
 

packages/shop/src/components/features/order.tsx

@@ -19,6 +19,7 @@ import { FC, ReactNode } from "react";
 import { useForm } from "react-hook-form";
 import { isNullish } from "remeda";
 
+import { formatBackendErrorMessage } from "@frontend/shop/apis";
 import { OrderProductRelationOptionInput, PriceDisplay, SignInGuard } from "@frontend/shop/components/common";
 import {
   useOneItemRefundMutation,
@@ -113,7 +114,7 @@ const OrderProductRelationItem: FC<OrderProductRelationItemProps> = ({
       { order_id: order.id, order_product_relation_id: prodRel.id },
       {
         onSuccess: () => addSnackbar(succeededToRefundOrderStr, "success"),
-        onError: () => addSnackbar(failedToRefundOrderStr, "error"),
+        onError: (error) => addSnackbar(formatBackendErrorMessage(error, failedToRefundOrderStr), "error"),
       }
     );
   const patchOneItemOptions = () => {
@@ -139,7 +140,7 @@ const OrderProductRelationItem: FC<OrderProductRelationItemProps> = ({
       },
       {
         onSuccess: () => addSnackbar(succeededToPatchOptionsStr, "success"),
-        onError: () => addSnackbar(failedToPatchOptionsStr, "error"),
+        onError: (error) => addSnackbar(formatBackendErrorMessage(error, failedToPatchOptionsStr), "error"),
       }
     );
   };
@@ -211,7 +212,7 @@ const OrderItem: FC<OrderItemProps> = ({ order, disabled, ...props }) => {
       { order_id: order.id },
       {
         onSuccess: () => addSnackbar(succeededToRefundFullOrderStr, "success"),
-        onError: () => addSnackbar(failedToRefundFullOrderStr, "error"),
+        onError: (error) => addSnackbar(formatBackendErrorMessage(error, failedToRefundFullOrderStr), "error"),
       }
     );
   const openReceipt = () => window.open(`${backendApiDomain}/v1/shop/orders/${order.id}/receipt/`, "_blank");

packages/shop/src/components/features/product.tsx

@@ -32,7 +32,7 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { isEmpty, isNullish, isNumber, isString } from "remeda";
 
-import { BackendAPIClientError } from "@frontend/shop/apis";
+import { formatBackendErrorMessage } from "@frontend/shop/apis";
 import { CustomerInfoFormDialog, OptionGroupInput, PriceDisplay, SignInGuard } from "@frontend/shop/components/common";
 import { useAddItemToCartMutation, usePrepareOneItemOrderMutation, useProducts, useShopClient, useShopContext } from "@frontend/shop/hooks";
 import type { CartItemAppendRequest, CustomerInfo, Order, Product, ProductListQueryParams } from "@frontend/shop/schemas";
@@ -246,11 +246,7 @@ const ProductItem: FC<ProductItemPropType> = ({ disabled: rootDisabled, language
         );
         onAddToCartSuccess?.();
       },
-      onError: (error) =>
-        alert(
-          (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
-            failedToAddOneItemToCartStr
-        ),
+      onError: (error) => alert(formatBackendErrorMessage(error, failedToAddOneItemToCartStr)),
     });
   };
   const onOrderOneItemButtonClick = () => {
@@ -485,11 +481,7 @@ export const ProductList: FC<ProductListQueryParams> = (qs) => {
               closeBackdrop
             );
           },
-          onError: (error) =>
-            alert(
-              (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
-                orderErrorStr
-            ),
+          onError: (error) => alert(formatBackendErrorMessage(error, orderErrorStr)),
         }
       );
     };
@@ -584,11 +576,7 @@ export const ProductImageCardList: FC<ProductListQueryParams> = (qs) => {
               closeBackdrop
             );
           },
-          onError: (error) =>
-            alert(
-              (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
-                orderErrorStr
-            ),
+          onError: (error) => alert(formatBackendErrorMessage(error, orderErrorStr)),
         }
       );
     };