From 8ebb6eaedcf1e409f10c7112a592c1763a622cb5 Mon Sep 17 00:00:00 2001
From: MUsoftware <musoftware@daum.net>
Date: Sun, 17 May 2026 17:31:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20payment=20=EC=8B=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9C=EC=9D=98=20backend=20=EB=B3=91=ED=95=A9=20=EC=9D=B4?=
 =?UTF-8?q?=EA=B4=80=EC=97=90=20=EB=94=B0=EB=A5=B8=20shop=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/Header/Mobile/MobileNavigation.tsx |   2 -
 .../src/components/layout/Header/index.tsx    |   2 -
 .../layout/UserScanCodeButton/index.tsx       |  56 --------
 apps/pyconkr-2025/src/main.tsx                |   3 -
 apps/pyconkr-2025/vite-env.d.ts               |   2 -
 .../layout/UserScanCodeButton/index.tsx       |  56 --------
 apps/pyconkr-2026/src/main.tsx                |   3 -
 apps/pyconkr-2026/vite-env.d.ts               |   2 -
 apps/pyconkr-admin/src/main.tsx               |   3 -
 apps/pyconkr-admin/src/vite-env.d.ts          |   2 -
 dotenv/.env.development                       |   2 -
 dotenv/.env.production                        |   2 -
 packages/shop/src/apis/client.ts              | 132 ------------------
 packages/shop/src/apis/index.ts               |  54 ++++---
 .../shop/src/components/features/cart.tsx     |   4 +-
 .../shop/src/components/features/order.tsx    |   6 +-
 .../shop/src/components/features/product.tsx  |   8 +-
 packages/shop/src/contexts/index.ts           |   7 +-
 packages/shop/src/hooks/index.ts              |  46 +++---
 packages/shop/src/schemas/index.ts            |   6 -
 20 files changed, 54 insertions(+), 344 deletions(-)
 delete mode 100644 apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx
 delete mode 100644 apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx
 delete mode 100644 packages/shop/src/apis/client.ts

diff --git a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx
index 2bed3ec..9203179 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx
@@ -10,7 +10,6 @@ import { SignInButton } from "@apps/pyconkr-2025/components/layout/SignInButton"
 
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileLanguageToggle } from "./MobileLanguageToggle";
-// import { ScanCodeButton } from "@apps/pyconkr-2025/components/layout/UserScanCodeButton";
 
 type MenuType = NestedSiteMapSchema;
 
@@ -201,7 +200,6 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ isOpen, onClose, s
           <Stack alignItems="center" justifyContent="center" sx={{ flex: 1 }}>
             <MobileLanguageToggle isMainPath={isMainPath} />
           </Stack>
-          {/* <ScanCodeButton /> */}
           <Stack alignItems="center" justifyContent="center" sx={{ flex: 1 }}>
             <SignInButton isMobile isMainPath={isMainPath} onClose={handleClose} />
           </Stack>
diff --git a/apps/pyconkr-2025/src/components/layout/Header/index.tsx b/apps/pyconkr-2025/src/components/layout/Header/index.tsx
index a91e50d..8c67f7c 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/index.tsx
@@ -12,7 +12,6 @@ import LanguageSelector from "@apps/pyconkr-2025/components/layout/LanguageSelec
 import { SignInButton } from "@apps/pyconkr-2025/components/layout/SignInButton";
 import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
-// import { ScanCodeIconButton } from "@apps/pyconkr-2025/components/layout/UserScanCodeButton";
 import { MobileHeader } from "./Mobile/MobileHeader";
 
 type MenuType = NestedSiteMapSchema;
@@ -150,7 +149,6 @@ const Header: FC = () => {
           <Stack direction="row" alignItems="center" gap={1} sx={{ marginLeft: "auto" }}>
             <LanguageSelector />
             <CartBadgeButton />
-            {/* <ScanCodeIconButton /> */}
             <SignInButton />
           </Stack>
         </NavSideElementContainer>
diff --git a/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx b/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx
deleted file mode 100644
index 03c2961..0000000
--- a/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useShopClient, useUserInfo } from "@frontend/shop/hooks";
-import { QrCode2 } from "@mui/icons-material";
-import { Button, IconButton, IconButtonProps } from "@mui/material";
-import { ErrorBoundary, Suspense } from "@suspensive/react";
-import { FC, Fragment } from "react";
-
-import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
-
-export const ScanCodeIconButton: FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
-  { fallback: <Fragment /> },
-  ErrorBoundary.with({ fallback: <Fragment /> }, ({ sx }) => {
-    const shopAPIClient = useShopClient();
-    const { data } = useUserInfo(shopAPIClient);
-
-    const iconBtnStyle: IconButtonProps["sx"] = (theme) => ({
-      color: theme.palette.primary.nonFocus,
-      "&:hover": { color: theme.palette.primary.dark },
-      "&:active": { color: theme.palette.primary.main },
-      transition: "color 0.4s ease, background-color 0.4s ease",
-    });
-
-    return (
-      <a href={data.scancode_url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
-        <IconButton children={<QrCode2 />} sx={sx ?? iconBtnStyle} />
-      </a>
-    );
-  })
-);
-
-export const ScanCodeButton: FC = Suspense.with(
-  { fallback: null },
-  ErrorBoundary.with({ fallback: null }, () => {
-    const { language } = useAppContext();
-    const shopAPIClient = useShopClient();
-    const { data } = useUserInfo(shopAPIClient);
-
-    const buttonText = language === "ko" ? "등록 코드" : "Entrance QR Code";
-
-    return (
-      <a
-        href={data.scancode_url}
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{
-          textDecoration: "none",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flex: 1,
-        }}
-      >
-        <Button startIcon={<QrCode2 />} sx={{ color: "white", p: 0, textTransform: "none", lineHeight: 1 }} children={buttonText} />
-      </a>
-    );
-  })
-);
diff --git a/apps/pyconkr-2025/src/main.tsx b/apps/pyconkr-2025/src/main.tsx
index c0c0d3b..9fde86e 100644
--- a/apps/pyconkr-2025/src/main.tsx
+++ b/apps/pyconkr-2025/src/main.tsx
@@ -59,9 +59,6 @@ const CommonOptions: ContextOptions = {
 
 const ShopOptions: ShopContextOptions = {
   language: "ko",
-  shopApiDomain: import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN,
-  shopApiCSRFCookieName: import.meta.env.VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME,
-  shopApiTimeout: 10000,
   shopImpAccountId: import.meta.env.VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID,
 };
 
diff --git a/apps/pyconkr-2025/vite-env.d.ts b/apps/pyconkr-2025/vite-env.d.ts
index f89a311..4cd9592 100644
--- a/apps/pyconkr-2025/vite-env.d.ts
+++ b/apps/pyconkr-2025/vite-env.d.ts
@@ -6,8 +6,6 @@ interface ViteTypeOptions {
 
 interface ImportMetaEnv {
   readonly VITE_PYCONKR_BACKEND_API_DOMAIN: string;
-  readonly VITE_PYCONKR_SHOP_API_DOMAIN: string;
-  readonly VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME: string;
   readonly VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID: string;
 }
 
diff --git a/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx b/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx
deleted file mode 100644
index 83af57f..0000000
--- a/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useShopClient, useUserInfo } from "@frontend/shop/hooks";
-import { QrCode2 } from "@mui/icons-material";
-import { Button, IconButton, IconButtonProps } from "@mui/material";
-import { ErrorBoundary, Suspense } from "@suspensive/react";
-import { FC, Fragment } from "react";
-
-import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
-
-export const ScanCodeIconButton: FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
-  { fallback: <Fragment /> },
-  ErrorBoundary.with({ fallback: <Fragment /> }, ({ sx }) => {
-    const shopAPIClient = useShopClient();
-    const { data } = useUserInfo(shopAPIClient);
-
-    const iconBtnStyle: IconButtonProps["sx"] = (theme) => ({
-      color: theme.palette.primary.nonFocus,
-      "&:hover": { color: theme.palette.primary.dark },
-      "&:active": { color: theme.palette.primary.main },
-      transition: "color 0.4s ease, background-color 0.4s ease",
-    });
-
-    return (
-      <a href={data.scancode_url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
-        <IconButton children={<QrCode2 />} sx={sx ?? iconBtnStyle} />
-      </a>
-    );
-  })
-);
-
-export const ScanCodeButton: FC = Suspense.with(
-  { fallback: null },
-  ErrorBoundary.with({ fallback: null }, () => {
-    const { language } = useAppContext();
-    const shopAPIClient = useShopClient();
-    const { data } = useUserInfo(shopAPIClient);
-
-    const buttonText = language === "ko" ? "등록 코드" : "Entrance QR Code";
-
-    return (
-      <a
-        href={data.scancode_url}
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{
-          textDecoration: "none",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flex: 1,
-        }}
-      >
-        <Button startIcon={<QrCode2 />} sx={{ color: "white", p: 0, textTransform: "none", lineHeight: 1 }} children={buttonText} />
-      </a>
-    );
-  })
-);
diff --git a/apps/pyconkr-2026/src/main.tsx b/apps/pyconkr-2026/src/main.tsx
index 0703388..e4c2632 100644
--- a/apps/pyconkr-2026/src/main.tsx
+++ b/apps/pyconkr-2026/src/main.tsx
@@ -59,9 +59,6 @@ const CommonOptions: ContextOptions = {
 
 const ShopOptions: ShopContextOptions = {
   language: "ko",
-  shopApiDomain: import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN,
-  shopApiCSRFCookieName: import.meta.env.VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME,
-  shopApiTimeout: 10000,
   shopImpAccountId: import.meta.env.VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID,
 };
 
diff --git a/apps/pyconkr-2026/vite-env.d.ts b/apps/pyconkr-2026/vite-env.d.ts
index f89a311..4cd9592 100644
--- a/apps/pyconkr-2026/vite-env.d.ts
+++ b/apps/pyconkr-2026/vite-env.d.ts
@@ -6,8 +6,6 @@ interface ViteTypeOptions {
 
 interface ImportMetaEnv {
   readonly VITE_PYCONKR_BACKEND_API_DOMAIN: string;
-  readonly VITE_PYCONKR_SHOP_API_DOMAIN: string;
-  readonly VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME: string;
   readonly VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID: string;
 }
 
diff --git a/apps/pyconkr-admin/src/main.tsx b/apps/pyconkr-admin/src/main.tsx
index 4efe2c1..118208c 100644
--- a/apps/pyconkr-admin/src/main.tsx
+++ b/apps/pyconkr-admin/src/main.tsx
@@ -53,9 +53,6 @@ const CommonOptions: ContextOptions = {
 
 const ShopOptions: ShopContextOptions = {
   language: "ko",
-  shopApiDomain: import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN,
-  shopApiCSRFCookieName: import.meta.env.VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME,
-  shopApiTimeout: 10000,
   shopImpAccountId: import.meta.env.VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID,
 };
 
diff --git a/apps/pyconkr-admin/src/vite-env.d.ts b/apps/pyconkr-admin/src/vite-env.d.ts
index 1ba6712..8e34b4d 100644
--- a/apps/pyconkr-admin/src/vite-env.d.ts
+++ b/apps/pyconkr-admin/src/vite-env.d.ts
@@ -12,8 +12,6 @@ interface ViteTypeOptions {
 interface ImportMetaEnv {
   readonly VITE_PYCONKR_FRONTEND_DOMAIN: string;
   readonly VITE_PYCONKR_BACKEND_API_DOMAIN: string;
-  readonly VITE_PYCONKR_SHOP_API_DOMAIN: string;
-  readonly VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME: string;
   readonly VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID: string;
 }
 
diff --git a/dotenv/.env.development b/dotenv/.env.development
index 5609cde..1a35d9c 100644
--- a/dotenv/.env.development
+++ b/dotenv/.env.development
@@ -1,6 +1,4 @@
 VITE_PYCONKR_FRONTEND_DOMAIN=https://dev.pycon.kr
 VITE_PYCONKR_BACKEND_API_DOMAIN=https://rest-api-dev.pycon.kr
 VITE_PYCONKR_BACKEND_CSRF_COOKIE_NAME=DEBUG_PYCONKR_BACKEND_csrftoken
-VITE_PYCONKR_SHOP_API_DOMAIN=https://shop-api.dev.pycon.kr
-VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME=DEBUG_csrftoken
 VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID=imp80859147
diff --git a/dotenv/.env.production b/dotenv/.env.production
index d6489b7..06736f9 100644
--- a/dotenv/.env.production
+++ b/dotenv/.env.production
@@ -1,6 +1,4 @@
 VITE_PYCONKR_FRONTEND_DOMAIN=https://2025.pycon.kr
 VITE_PYCONKR_BACKEND_API_DOMAIN=https://rest-api.pycon.kr
 VITE_PYCONKR_BACKEND_CSRF_COOKIE_NAME=PYCONKR_BACKEND_csrftoken
-VITE_PYCONKR_SHOP_API_DOMAIN=https://shop-api.pycon.kr
-VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME=csrftoken
 VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID=imp96676915
diff --git a/packages/shop/src/apis/client.ts b/packages/shop/src/apis/client.ts
deleted file mode 100644
index 2daf53c..0000000
--- a/packages/shop/src/apis/client.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { getCookie } from "@frontend/common/utils";
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
-import { isString } from "remeda";
-
-import { isObjectErrorResponseSchema, type ErrorResponseSchema } from "@frontend/shop/schemas";
-
-const DEFAULT_ERROR_MESSAGE = "알 수 없는 문제가 발생했습니다, 잠시 후 다시 시도해주세요.";
-const DEFAULT_ERROR_RESPONSE = {
-  type: "unknown",
-  errors: [{ code: "unknown", detail: DEFAULT_ERROR_MESSAGE, attr: null }],
-};
-
-export class ShopAPIClientError extends Error {
-  readonly name = "ShopAPIError";
-  readonly status: number;
-  readonly detail: ErrorResponseSchema;
-  readonly originalError: unknown;
-
-  constructor(error?: unknown) {
-    let message: string = DEFAULT_ERROR_MESSAGE;
-    let detail: ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
-    let status = -1;
-
-    if (axios.isAxiosError(error)) {
-      const response = error.response;
-
-      if (response) {
-        status = response.status;
-        detail = isObjectErrorResponseSchema(response.data)
-          ? response.data
-          : {
-              type: "axios_error",
-              errors: [
-                {
-                  code: "unknown",
-                  detail: isString(response.data) ? response.data : DEFAULT_ERROR_MESSAGE,
-                  attr: null,
-                },
-              ],
-            };
-      }
-    } else if (error instanceof Error) {
-      message = error.message;
-      detail = {
-        type: error.name || typeof error || "unknown",
-        errors: [{ code: "unknown", detail: error.message, attr: null }],
-      };
-    }
-
-    super(message);
-    this.originalError = error || null;
-    this.status = status;
-    this.detail = detail;
-  }
-
-  isRequiredAuth(): boolean {
-    return this.status === 401 || this.status === 403;
-  }
-}
-
-type AxiosRequestWithoutPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => Promise<Resp>;
-type AxiosRequestWithPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(
-  url: string,
-  data?: D,
-  config?: AxiosRequestConfig<D>
-) => Promise<Resp>;
-
-export class ShopAPIClient {
-  readonly baseURL: string;
-  readonly language: "ko" | "en";
-  protected readonly csrfCookieName: string;
-  private readonly shopAPI: AxiosInstance;
-
-  constructor(baseURL: string, csrfCookieName: string, timeout: number, language: "ko" | "en") {
-    this.baseURL = baseURL;
-    this.language = language;
-    this.csrfCookieName = csrfCookieName;
-    this.shopAPI = axios.create({
-      baseURL,
-      timeout,
-      withCredentials: true,
-      headers: { "Content-Type": "application/json", "Accept-Language": language },
-    });
-    this.shopAPI.interceptors.request.use(
-      (config) => {
-        config.headers["x-csrftoken"] = this.getCSRFToken();
-        return config;
-      },
-      (error) => Promise.reject(error)
-    );
-  }
-
-  _safe_request_without_payload(requestFunc: AxiosRequestWithoutPayload): AxiosRequestWithoutPayload {
-    return async <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => {
-      try {
-        return await requestFunc<T, Resp, D>(url, config);
-      } catch (error) {
-        throw new ShopAPIClientError(error);
-      }
-    };
-  }
-
-  _safe_request_with_payload(requestFunc: AxiosRequestWithPayload): AxiosRequestWithPayload {
-    return async <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, data: D, config?: AxiosRequestConfig<D>) => {
-      try {
-        return await requestFunc<T, Resp, D>(url, data, config);
-      } catch (error) {
-        throw new ShopAPIClientError(error);
-      }
-    };
-  }
-
-  getCSRFToken(): string | undefined {
-    return getCookie(this.csrfCookieName);
-  }
-
-  async get<T, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<T> {
-    return (await this._safe_request_without_payload(this.shopAPI.get)<T, AxiosResponse<T>, D>(url, config)).data;
-  }
-  async post<T, D>(url: string, data: D, config?: AxiosRequestConfig<D>): Promise<T> {
-    return (await this._safe_request_with_payload(this.shopAPI.post)<T, AxiosResponse<T>, D>(url, data, config)).data;
-  }
-  async put<T, D>(url: string, data: D, config?: AxiosRequestConfig<D>): Promise<T> {
-    return (await this._safe_request_with_payload(this.shopAPI.put)<T, AxiosResponse<T>, D>(url, data, config)).data;
-  }
-  async patch<T, D>(url: string, data: D, config?: AxiosRequestConfig<D>): Promise<T> {
-    return (await this._safe_request_with_payload(this.shopAPI.patch)<T, AxiosResponse<T>, D>(url, data, config)).data;
-  }
-  async delete<T, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<T> {
-    return (await this._safe_request_without_payload(this.shopAPI.delete)<T, AxiosResponse<T>, D>(url, config)).data;
-  }
-}
diff --git a/packages/shop/src/apis/index.ts b/packages/shop/src/apis/index.ts
index 732546e..e6dac16 100644
--- a/packages/shop/src/apis/index.ts
+++ b/packages/shop/src/apis/index.ts
@@ -1,3 +1,5 @@
+import { BackendAPIClient } from "@frontend/common/apis/client";
+
 import type {
   CartItemAppendRequest,
   CustomerInfo,
@@ -11,18 +13,15 @@ import type {
   Product,
   ProductListQueryParams,
   SocialSignInRequest,
-  UserRow,
   UserSignedInStatus,
 } from "@frontend/shop/schemas";
 
-import { ShopAPIClient } from "./client";
-
-export { ShopAPIClient, ShopAPIClientError } from "./client";
+export { BackendAPIClient, BackendAPIClientError } from "@frontend/common/apis/client";
 
 /**
  * 로그인합니다.
  */
-export const signInWithEmail = (client: ShopAPIClient) => (data: EmailSignInRequest) => {
+export const signInWithEmail = (client: BackendAPIClient) => (data: EmailSignInRequest) => {
   const requestPayload = {
     ...data,
     csrfmiddlewaretoken: client.getCSRFToken() ?? "",
@@ -33,7 +32,7 @@ export const signInWithEmail = (client: ShopAPIClient) => (data: EmailSignInRequ
 /**
  * SNS로 로그인합니다.
  */
-export const signInWithSNS = (client: ShopAPIClient) => async (socialSignInInfo: SocialSignInRequest) => {
+export const signInWithSNS = (client: BackendAPIClient) => async (socialSignInInfo: SocialSignInRequest) => {
   const form = document.createElement("form");
   form.method = "POST";
   form.action = `${client.baseURL}/authn/social/browser/v1/auth/provider/redirect`;
@@ -57,7 +56,7 @@ export const signInWithSNS = (client: ShopAPIClient) => async (socialSignInInfo:
 /**
  * 로그아웃합니다.
  */
-export const signOut = (client: ShopAPIClient) => async () => {
+export const signOut = (client: BackendAPIClient) => async () => {
   try {
     await client.delete<void>("authn/social/browser/v1/auth/session");
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -70,7 +69,7 @@ export const signOut = (client: ShopAPIClient) => async () => {
  * 로그인 정보를 조회합니다.
  * @returns 로그인 정보
  */
-export const retrieveUserInfo = (client: ShopAPIClient) => async () => {
+export const retrieveUserInfo = (client: BackendAPIClient) => async () => {
   try {
     const response = await client.get<UserSignedInStatus>("authn/social/browser/v1/auth/session");
     if (response.meta.is_authenticated) {
@@ -84,78 +83,73 @@ export const retrieveUserInfo = (client: ShopAPIClient) => async () => {
   }
 };
 
-/**
- * 현재 사용자의 row 정보를 가져옵니다.
- * @returns 로그인 정보
- */
-export const retrieveUserRowInfo = (client: ShopAPIClient) => async () => client.get<UserRow>("v1/users/");
-
 /**
  * 노출 중인 모든 상품의 목록을 가져옵니다.
  * @returns 노출 중인 모든 상품의 목록
  */
-export const listProducts = (client: ShopAPIClient) => (qs?: ProductListQueryParams) => client.get<Product[]>("v1/products/", { params: qs });
+export const listProducts = (client: BackendAPIClient) => (qs?: ProductListQueryParams) => client.get<Product[]>("v1/shop/products/", { params: qs });
 
 /**
  * 현재 사용자의 장바구니에 담긴 상품의 목록을 가져옵니다.
  * @returns 현재 장바구니 상태
  */
-export const retrieveCart = (client: ShopAPIClient) => () => client.get<Order | EmptyObject>("v1/orders/cart/");
+export const retrieveCart = (client: BackendAPIClient) => () => client.get<Order | EmptyObject>("v1/shop/orders/cart/");
 
 /**
  * 장바구니에 상품을 추가합니다.
  * @returns 현재 장바구니 상태
  */
-export const appendItemToCart = (client: ShopAPIClient) => (data: CartItemAppendRequest) =>
-  client.post<Order, CartItemAppendRequest>("v1/orders/cart/products/", data);
+export const appendItemToCart = (client: BackendAPIClient) => (data: CartItemAppendRequest) =>
+  client.post<Order, CartItemAppendRequest>("v1/shop/orders/cart/products/", data);
 
 /**
  * 장바구니에서 특정 상품을 제거합니다.
  * @returns 현재 장바구니 상태
  */
-export const removeItemFromCart = (client: ShopAPIClient) => (data: { cartProductId: string }) =>
-  client.delete<Order>(`v1/orders/cart/products/${data.cartProductId}/`);
+export const removeItemFromCart = (client: BackendAPIClient) => (data: { cartProductId: string }) =>
+  client.delete<Order>(`v1/shop/orders/cart/products/${data.cartProductId}/`);
 
 /**
  * 단일 상품 즉시 결제를 PortOne에 등록합니다.
  * @returns PortOne에 등록된 주문 정보
  */
-export const prepareOneItemOrder = (client: ShopAPIClient) => (data: OneItemOrderRequest) =>
-  client.post<Order, OneItemOrderRequest>("v1/orders/single/", data);
+export const prepareOneItemOrder = (client: BackendAPIClient) => (data: OneItemOrderRequest) =>
+  client.post<Order, OneItemOrderRequest>("v1/shop/orders/single/", data);
 
 /**
  * 고객의 장바구니에 담긴 전체 상품 결제를 PortOne에 등록합니다.
  * @returns PortOne에 등록된 주문 정보
  */
-export const prepareCartOrder = (client: ShopAPIClient) => (data: CustomerInfo) => client.post<Order, CustomerInfo>("v1/orders/", data);
+export const prepareCartOrder = (client: BackendAPIClient) => (data: CustomerInfo) => client.post<Order, CustomerInfo>("v1/shop/orders/", data);
 
 /**
  * 고객의 모든 결제 내역을 가져옵니다.
  * @returns 고객의 모든 결제 내역
  */
-export const listOrders = (client: ShopAPIClient) => () => client.get<Order[]>("v1/orders/");
+export const listOrders = (client: BackendAPIClient) => () => client.get<Order[]>("v1/shop/orders/");
 
 /**
  * 결제 완료된 주문 내역에서 특정 상품을 환불 시도합니다.
  */
-export const refundOneItemFromOrder = (client: ShopAPIClient) => (data: OneItemRefundRequest) =>
-  client.delete<void>(`v1/orders/${data.order_id}/products/${data.order_product_relation_id}/`);
+export const refundOneItemFromOrder = (client: BackendAPIClient) => (data: OneItemRefundRequest) =>
+  client.delete<void>(`v1/shop/orders/${data.order_id}/products/${data.order_product_relation_id}/`);
 
 /**
  * 결제 완료된 주문 내역을 환불 시도합니다.
  */
-export const refundAllItemsInOrder = (client: ShopAPIClient) => (data: { order_id: string }) => client.delete<void>(`v1/orders/${data.order_id}/`);
+export const refundAllItemsInOrder = (client: BackendAPIClient) => (data: { order_id: string }) =>
+  client.delete<void>(`v1/shop/orders/${data.order_id}/`);
 
 /**
  * 결제 완료된 주문의 사용자 정의 응답용 상품 옵션을 수정합니다.
  */
-export const patchOrderOptions = (client: ShopAPIClient) => async (data: OrderOptionsPatchRequest) =>
+export const patchOrderOptions = (client: BackendAPIClient) => async (data: OrderOptionsPatchRequest) =>
   client.patch<Order, OrderOptionsPatchRequest["options"]>(
-    `v1/orders/${data.order_id}/products/${data.order_product_relation_id}/options/`,
+    `v1/shop/orders/${data.order_id}/products/${data.order_product_relation_id}/options/`,
     data.options
   );
 
 /**
  * 후원자 목록을 가져옵니다.
  */
-export const listPatrons = (client: ShopAPIClient, year: number) => () => client.get<Patron[]>("v1/ext/patron/", { params: { year } });
+export const listPatrons = (client: BackendAPIClient, year: number) => () => client.get<Patron[]>("v1/shop/patron/", { params: { year } });
diff --git a/packages/shop/src/components/features/cart.tsx b/packages/shop/src/components/features/cart.tsx
index fae1819..7d802bd 100644
--- a/packages/shop/src/components/features/cart.tsx
+++ b/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 { ShopAPIClientError } from "@frontend/shop/apis/client";
+import { BackendAPIClientError } 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";
@@ -133,7 +133,7 @@ export const CartStatus: FC = Suspense.with({ fallback: <CircularProgress /> },
       },
       onError: (error) =>
         alert(
-          (error instanceof ShopAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
+          (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
             errorWhilePreparingOrderStr
         ),
     });
diff --git a/packages/shop/src/components/features/order.tsx b/packages/shop/src/components/features/order.tsx
index 1de9786..aacb1bb 100644
--- a/packages/shop/src/components/features/order.tsx
+++ b/packages/shop/src/components/features/order.tsx
@@ -1,4 +1,5 @@
 import { OneDetailsOpener, PrimaryStyledDetails } from "@frontend/common/components/mdx_components";
+import { useBackendContext } from "@frontend/common/hooks/useAPI";
 import {
   AccordionProps,
   Button,
@@ -182,7 +183,8 @@ const OrderProductRelationItem: FC<OrderProductRelationItemProps> = ({
 type OrderItemProps = Omit<AccordionProps, "children"> & { order: Order; disabled?: boolean };
 
 const OrderItem: FC<OrderItemProps> = ({ order, disabled, ...props }) => {
-  const { language, shopApiDomain } = useShopContext();
+  const { language } = useShopContext();
+  const { backendApiDomain } = useBackendContext();
   const shopAPIClient = useShopClient();
   const orderRefundMutation = useOrderRefundMutation(shopAPIClient);
   const oneItemRefundMutation = useOneItemRefundMutation(shopAPIClient);
@@ -212,7 +214,7 @@ const OrderItem: FC<OrderItemProps> = ({ order, disabled, ...props }) => {
         onError: () => addSnackbar(failedToRefundFullOrderStr, "error"),
       }
     );
-  const openReceipt = () => window.open(`${shopApiDomain}/v1/orders/${order.id}/receipt/`, "_blank");
+  const openReceipt = () => window.open(`${backendApiDomain}/v1/shop/orders/${order.id}/receipt/`, "_blank");
 
   const isPending = disabled || orderRefundMutation.isPending || oneItemRefundMutation.isPending || optionsOfOneItemInOrderPatchMutation.isPending;
   const refundBtnDisabled = isPending || !isNullish(order.not_fully_refundable_reason);
diff --git a/packages/shop/src/components/features/product.tsx b/packages/shop/src/components/features/product.tsx
index 0745254..bc14b18 100644
--- a/packages/shop/src/components/features/product.tsx
+++ b/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 { ShopAPIClientError } from "@frontend/shop/apis/client";
+import { BackendAPIClientError } 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";
@@ -248,7 +248,7 @@ const ProductItem: FC<ProductItemPropType> = ({ disabled: rootDisabled, language
       },
       onError: (error) =>
         alert(
-          (error instanceof ShopAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
+          (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
             failedToAddOneItemToCartStr
         ),
     });
@@ -487,7 +487,7 @@ export const ProductList: FC<ProductListQueryParams> = (qs) => {
           },
           onError: (error) =>
             alert(
-              (error instanceof ShopAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
+              (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
                 orderErrorStr
             ),
         }
@@ -586,7 +586,7 @@ export const ProductImageCardList: FC<ProductListQueryParams> = (qs) => {
           },
           onError: (error) =>
             alert(
-              (error instanceof ShopAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
+              (error instanceof BackendAPIClientError ? error.detail.errors.map((errDetail) => errDetail.detail).join("\n") : error.message) ||
                 orderErrorStr
             ),
         }
diff --git a/packages/shop/src/contexts/index.ts b/packages/shop/src/contexts/index.ts
index e1a1651..efb5f94 100644
--- a/packages/shop/src/contexts/index.ts
+++ b/packages/shop/src/contexts/index.ts
@@ -1,16 +1,11 @@
 import { createContext } from "react";
+
 export type ContextOptions = {
   language: "ko" | "en";
-  shopApiDomain: string;
-  shopApiCSRFCookieName: string;
-  shopApiTimeout: number;
   shopImpAccountId: string;
 };
 
 export const context = createContext<ContextOptions>({
   language: "ko",
-  shopApiDomain: "",
-  shopApiCSRFCookieName: "",
-  shopApiTimeout: 10000,
   shopImpAccountId: "",
 });
diff --git a/packages/shop/src/hooks/index.ts b/packages/shop/src/hooks/index.ts
index e8baf4a..a1fb6f6 100644
--- a/packages/shop/src/hooks/index.ts
+++ b/packages/shop/src/hooks/index.ts
@@ -1,8 +1,10 @@
+import { useBackendContext } from "@frontend/common/hooks/useAPI";
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { useContext } from "react";
 
 import {
   appendItemToCart,
+  BackendAPIClient,
   listOrders,
   listPatrons,
   listProducts,
@@ -14,19 +16,16 @@ import {
   removeItemFromCart,
   retrieveCart,
   retrieveUserInfo,
-  retrieveUserRowInfo,
   signInWithEmail,
   signInWithSNS,
   signOut,
 } from "@frontend/shop/apis";
-import { ShopAPIClient } from "@frontend/shop/apis/client";
 import { context as shopContext } from "@frontend/shop/contexts";
 import type { ProductListQueryParams } from "@frontend/shop/schemas";
 
 const QUERY_KEYS = {
   BASE: ["query", "shop"],
   USER: ["query", "shop", "user"],
-  USER_ROW: ["query", "shop", "user_row"],
   PRODUCT_LIST: ["query", "shop", "products"],
   CART_INFO: ["query", "shop", "cart"],
   ORDER_LIST: ["query", "shop", "orders"],
@@ -54,39 +53,32 @@ export const useShopContext = () => {
 };
 
 export const useShopClient = () => {
-  const { shopApiDomain, shopApiCSRFCookieName, shopApiTimeout, language } = useShopContext();
-  return new ShopAPIClient(shopApiDomain, shopApiCSRFCookieName, shopApiTimeout, language);
+  const { backendApiDomain, backendApiTimeout, backendApiCSRFCookieName, language } = useBackendContext();
+  return new BackendAPIClient(backendApiDomain, backendApiTimeout, backendApiCSRFCookieName, true, language);
 };
 
-export const useUserStatus = (client: ShopAPIClient) =>
+export const useUserStatus = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.USER, client.language],
     queryFn: retrieveUserInfo(client),
     retry: 3,
   });
 
-export const useUserInfo = (client: ShopAPIClient) =>
-  useSuspenseQuery({
-    queryKey: [...QUERY_KEYS.USER_ROW, client.language],
-    queryFn: retrieveUserRowInfo(client),
-    retry: 3,
-  });
-
-export const useSignInWithEmailMutation = (client: ShopAPIClient) =>
+export const useSignInWithEmailMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.USER_SIGN_IN_EMAIL,
     mutationFn: signInWithEmail(client),
     meta: { invalidates: [QUERY_KEYS.BASE] },
   });
 
-export const useSignInWithSNSMutation = (client: ShopAPIClient) =>
+export const useSignInWithSNSMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.USER_SIGN_IN_SNS,
     mutationFn: signInWithSNS(client),
     meta: { invalidates: [QUERY_KEYS.BASE] },
   });
 
-export const useSignOutMutation = (client: ShopAPIClient) =>
+export const useSignOutMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.USER_SIGN_OUT,
     mutationFn: signOut(client),
@@ -94,74 +86,74 @@ export const useSignOutMutation = (client: ShopAPIClient) =>
     meta: { invalidates: [QUERY_KEYS.BASE] },
   });
 
-export const useProducts = (client: ShopAPIClient, qs?: ProductListQueryParams) =>
+export const useProducts = (client: BackendAPIClient, qs?: ProductListQueryParams) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PRODUCT_LIST, qs ? JSON.stringify(qs) : "", client.language],
     queryFn: () => listProducts(client)(qs),
   });
 
-export const useCart = (client: ShopAPIClient) =>
+export const useCart = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.CART_INFO, client.language],
     queryFn: retrieveCart(client),
   });
 
-export const useAddItemToCartMutation = (client: ShopAPIClient) =>
+export const useAddItemToCartMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
     mutationFn: appendItemToCart(client),
     meta: { invalidates: [QUERY_KEYS.CART_INFO] },
   });
 
-export const useRemoveItemFromCartMutation = (client: ShopAPIClient) =>
+export const useRemoveItemFromCartMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.CART_ITEM_REMOVE,
     mutationFn: removeItemFromCart(client),
     meta: { invalidates: [QUERY_KEYS.CART_INFO] },
   });
 
-export const usePrepareOneItemOrderMutation = (client: ShopAPIClient) =>
+export const usePrepareOneItemOrderMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.ONE_ITEM_ORDER_START,
     mutationFn: prepareOneItemOrder(client),
     meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
   });
 
-export const usePrepareCartOrderMutation = (client: ShopAPIClient) =>
+export const usePrepareCartOrderMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.CART_ORDER_START,
     mutationFn: prepareCartOrder(client),
     meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
   });
 
-export const useOrders = (client: ShopAPIClient) =>
+export const useOrders = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ORDER_LIST, client.language],
     queryFn: listOrders(client),
   });
 
-export const useOneItemRefundMutation = (client: ShopAPIClient) =>
+export const useOneItemRefundMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.ONE_ITEM_REFUND,
     mutationFn: refundOneItemFromOrder(client),
     meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
   });
 
-export const useOrderRefundMutation = (client: ShopAPIClient) =>
+export const useOrderRefundMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.ALL_ORDER_REFUND,
     mutationFn: refundAllItemsInOrder(client),
     meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
   });
 
-export const useOptionsOfOneItemInOrderPatchMutation = (client: ShopAPIClient) =>
+export const useOptionsOfOneItemInOrderPatchMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
     mutationFn: patchOrderOptions(client),
     meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
   });
 
-export const usePatrons = (client: ShopAPIClient, year: number) =>
+export const usePatrons = (client: BackendAPIClient, year: number) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PATRONS, year],
     queryFn: listPatrons(client, year),
diff --git a/packages/shop/src/schemas/index.ts b/packages/shop/src/schemas/index.ts
index 6ff652a..0dfd55f 100644
--- a/packages/shop/src/schemas/index.ts
+++ b/packages/shop/src/schemas/index.ts
@@ -72,12 +72,6 @@ export type UserNotSignedInStatus = {
   };
 };
 
-export type UserRow = {
-  id: string;
-  email: string;
-  scancode_url: string;
-};
-
 export type Option = {
   id: string;
   name: string;

From faec42ef23579d544b9b303178d02c4f5e2ea092 Mon Sep 17 00:00:00 2001
From: MUsoftware <musoftware@daum.net>
Date: Sun, 17 May 2026 20:44:07 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20shop=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=EC=84=9C=20backend=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/src/apis/client.ts            | 17 ++++++++++++++++
 packages/shop/src/apis/index.ts               |  2 +-
 .../shop/src/components/features/cart.tsx     | 10 +++-------
 .../shop/src/components/features/order.tsx    |  7 ++++---
 .../shop/src/components/features/product.tsx  | 20 ++++---------------
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/common/src/apis/client.ts b/packages/common/src/apis/client.ts
index 1577c99..e1bde74 100644
--- a/packages/common/src/apis/client.ts
+++ b/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>;
diff --git a/packages/shop/src/apis/index.ts b/packages/shop/src/apis/index.ts
index e6dac16..e403351 100644
--- a/packages/shop/src/apis/index.ts
+++ b/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";
 
 /**
  * 로그인합니다.
diff --git a/packages/shop/src/components/features/cart.tsx b/packages/shop/src/components/features/cart.tsx
index 7d802bd..3c0bd0f 100644
--- a/packages/shop/src/components/features/cart.tsx
+++ b/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)),
     });
   };
 
diff --git a/packages/shop/src/components/features/order.tsx b/packages/shop/src/components/features/order.tsx
index aacb1bb..997d001 100644
--- a/packages/shop/src/components/features/order.tsx
+++ b/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");
diff --git a/packages/shop/src/components/features/product.tsx b/packages/shop/src/components/features/product.tsx
index bc14b18..75d453f 100644
--- a/packages/shop/src/components/features/product.tsx
+++ b/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)),
         }
       );
     };