chore: BackendAdminAPI 추가를 위한 준비 작업

MU-Software · MU-Software · commit 6064155bde5b · 2025-05-31T23:30:11.000+09:00
diff --git a/packages/common/src/apis/client.ts b/packages/common/src/apis/client.ts
@@ -1,7 +1,8 @@
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
 import * as R from "remeda";
 
-import CommonSchemas from "../schemas";
+import BackendAPISchemas from '../schemas/backendAPI';
+import { getCookie } from '../utils/cookie';
 
 const DEFAULT_ERROR_MESSAGE = "알 수 없는 문제가 발생했습니다, 잠시 후 다시 시도해주세요.";
 const DEFAULT_ERROR_RESPONSE = {
@@ -12,20 +13,20 @@ const DEFAULT_ERROR_RESPONSE = {
 export class BackendAPIClientError extends Error {
   readonly name = "BackendAPIClientError";
   readonly status: number;
-  readonly detail: CommonSchemas.ErrorResponseSchema;
+  readonly detail: BackendAPISchemas.ErrorResponseSchema;
   readonly originalError: unknown;
 
   constructor(error?: unknown) {
     let message: string = DEFAULT_ERROR_MESSAGE;
-    let detail: CommonSchemas.ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
+    let detail: BackendAPISchemas.ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
     let status = -1;
 
     if (axios.isAxiosError(error)) {
       const response = error.response;
 
       if (response) {
         status = response.status;
-        detail = CommonSchemas.isObjectErrorResponseSchema(response.data)
+        detail = BackendAPISchemas.isObjectErrorResponseSchema(response.data)
           ? response.data
           : {
               type: "axios_error",
@@ -39,6 +40,7 @@ export class BackendAPIClientError extends Error {
                 },
               ],
             };
+        message = detail.errors[0].detail || DEFAULT_ERROR_MESSAGE;
       }
     } else if (error instanceof Error) {
       message = error.message;
@@ -71,12 +73,33 @@ type AxiosRequestWithPayload = <T = any, R = AxiosResponse<T>, D = any>(
 
 export class BackendAPIClient {
   readonly baseURL: string;
+  protected readonly csrfCookieName: string;
   private readonly backendAPI: AxiosInstance;
 
-  constructor(baseURL: string, timeout: number) {
+  constructor(
+    baseURL: string,
+    timeout: number,
+    csrfCookieName: string = "csrftoken",
+    withCredentials: boolean = false,
+  ) {
     const headers = { "Content-Type": "application/json" };
     this.baseURL = baseURL;
-    this.backendAPI = axios.create({ baseURL, timeout, headers });
+    this.csrfCookieName = csrfCookieName;
+    this.backendAPI = axios.create({ baseURL, timeout, headers, withCredentials});
+
+    if (withCredentials) {
+      this.backendAPI.interceptors.request.use(
+        (config) => {
+          config.headers["x-csrftoken"] = this.getCSRFToken();
+          return config;
+        },
+        (error) => Promise.reject(error)
+      );
+    }
+  }
+
+  getCSRFToken(): string | undefined {
+    return getCookie(this.csrfCookieName);
   }
 
   _safe_request_without_payload(
diff --git a/packages/common/src/apis/index.ts b/packages/common/src/apis/index.ts
@@ -1,9 +1,9 @@
-import CommonSchemas from "../schemas";
+import BackendAPISchemas from "../schemas/backendAPI";
 import { BackendAPIClient } from "./client";
 
 namespace BackendAPIs {
-  export const listSiteMaps = (client: BackendAPIClient) => () => client.get<CommonSchemas.FlattenedSiteMapSchema[]>("v1/cms/sitemap/");
-  export const retrievePage = (client: BackendAPIClient) => (id: string) => client.get<CommonSchemas.PageSchema>(`v1/cms/page/${id}/`);
+  export const listSiteMaps = (client: BackendAPIClient) => () => client.get<BackendAPISchemas.FlattenedSiteMapSchema[]>("v1/cms/sitemap/");
+  export const retrievePage = (client: BackendAPIClient) => (id: string) => client.get<BackendAPISchemas.PageSchema>(`v1/cms/page/${id}/`);
 }
 
 export default BackendAPIs;
diff --git a/packages/common/src/components/dynamic_route.tsx b/packages/common/src/components/dynamic_route.tsx
@@ -1,14 +1,14 @@
+import { AxiosError, AxiosResponse } from 'axios';
 import * as React from "react";
 import { useLocation, useParams } from 'react-router-dom';
 import * as R from "remeda";
 
 import { CircularProgress } from '@mui/material';
 import { ErrorBoundary, Suspense } from '@suspensive/react';
 
-import { AxiosError, AxiosResponse } from 'axios';
 import { BackendAPIClientError } from '../apis/client';
 import Hooks from "../hooks";
-import Schemas from "../schemas";
+import BackendAPISchemas from '../schemas/backendAPI';
 import Utils from '../utils';
 import { ErrorFallback } from './error_handler';
 import { MDXRenderer } from './mdx';
@@ -29,7 +29,7 @@ const LoginRequired: React.FC = () => <>401 Login Required</>;
 const PermissionDenied: React.FC = () => <>403 Permission Denied</>;
 const PageNotFound: React.FC = () => <>404 Not Found</>;
 
-const throwPageNotFound = (message: string) => {
+const throwPageNotFound: (message: string) => never = (message) => {
   const errorStr = `RouteRenderer: ${message}`;
   const axiosError = new AxiosError(errorStr, errorStr, undefined, undefined, { status: 404 } as AxiosResponse);
   throw new BackendAPIClientError(axiosError);
@@ -80,7 +80,7 @@ export const RouteRenderer: React.FC = ErrorBoundary.with(
       const nestedSiteMap = Utils.buildNestedSiteMap(data);
 
       const currentRouteCodes = ['', ...location.pathname.split('/').filter((code) => !R.isEmpty(code))];
-      let currentSitemap: Schemas.NestedSiteMapSchema | undefined = nestedSiteMap[currentRouteCodes[0]];
+      let currentSitemap: BackendAPISchemas.NestedSiteMapSchema | undefined = nestedSiteMap[currentRouteCodes[0]];
       if (currentSitemap === undefined) throwPageNotFound(`Route ${location} not found`);
 
       for (const routeCode of currentRouteCodes.slice(1))
diff --git a/packages/common/src/schemas/backendAPI.ts b/packages/common/src/schemas/backendAPI.ts
@@ -0,0 +1,70 @@
+import * as R from "remeda";
+
+namespace BackendAPISchemas {
+  export type EmptyObject = Record<string, never>;
+
+  export type DetailedErrorSchema = {
+    code: string;
+    detail: string;
+    attr: string | null;
+  };
+
+  export type ErrorResponseSchema = {
+    type: string;
+    errors: DetailedErrorSchema[];
+  };
+
+  export type FlattenedSiteMapSchema = {
+    id: string;
+    route_code: string;
+    name: string;
+    order: number;
+    parent_sitemap: string | null;
+    page: string;
+  };
+
+  export type NestedSiteMapSchema = {
+    id: string;
+    route_code: string;
+    name: string;
+    order: number;
+    page: string;
+    children: { [key: string]: NestedSiteMapSchema };
+  };
+
+  export type SectionSchema = {
+    id: string;
+    css: string;
+
+    order: number;
+    body: string;
+  };
+
+  export type PageSchema = {
+    id: string;
+    css: string;
+    title: string;
+    subtitle: string;
+    sections: SectionSchema[];
+  };
+
+export const isObjectErrorResponseSchema = (
+    obj?: unknown
+  ): obj is BackendAPISchemas.ErrorResponseSchema => {
+    return (
+      R.isPlainObject(obj) &&
+      R.isString(obj.type) &&
+      R.isArray(obj.errors) &&
+      obj.errors.every((error) => {
+        return (
+          R.isPlainObject(error) &&
+          R.isString(error.code) &&
+          R.isString(error.detail) &&
+          (error.attr === null || R.isString(error.attr))
+        );
+      })
+    );
+  };
+}
+
+export default BackendAPISchemas;
diff --git a/packages/common/src/schemas/index.ts b/packages/common/src/schemas/index.ts
@@ -1,70 +1,8 @@
-import * as R from "remeda";
+import * as _BackendAPISchemas from "./backendAPI";
+import * as _BackendAdminAPISchemas from "./backendAdminAPI";
 
-namespace BackendAPISchemas {
-  export type EmptyObject = Record<string, never>;
-
-  export type DetailedErrorSchema = {
-    code: string;
-    detail: string;
-    attr: string | null;
-  };
-
-  export type ErrorResponseSchema = {
-    type: string;
-    errors: DetailedErrorSchema[];
-  };
-
-  export type FlattenedSiteMapSchema = {
-    id: string;
-    route_code: string;
-    name: string;
-    order: number;
-    parent_sitemap: string | null;
-    page: string;
-  };
-
-  export type NestedSiteMapSchema = {
-    id: string;
-    route_code: string;
-    name: string;
-    order: number;
-    page: string;
-    children: { [key: string]: NestedSiteMapSchema };
-  };
-
-  export type SectionSchema = {
-    id: string;
-    css: string;
-
-    order: number;
-    body: string;
-  };
-
-  export type PageSchema = {
-    id: string;
-    css: string;
-    title: string;
-    subtitle: string;
-    sections: SectionSchema[];
-  };
-
-  export const isObjectErrorResponseSchema = (
-    obj?: unknown
-  ): obj is BackendAPISchemas.ErrorResponseSchema => {
-    return (
-      R.isPlainObject(obj) &&
-      R.isString(obj.type) &&
-      R.isArray(obj.errors) &&
-      obj.errors.every((error) => {
-        return (
-          R.isPlainObject(error) &&
-          R.isString(error.code) &&
-          R.isString(error.detail) &&
-          (error.attr === null || R.isString(error.attr))
-        );
-      })
-    );
-  };
+namespace CommonSchemas {
+  export const BackendAPI = _BackendAPISchemas;
 }
 
-export default BackendAPISchemas;
+export default CommonSchemas;
diff --git a/packages/common/src/utils/api.ts b/packages/common/src/utils/api.ts
@@ -1,6 +1,6 @@
 import * as R from "remeda";
 
-import BackendAPISchemas from "../schemas";
+import BackendAPISchemas from "../schemas/backendAPI";
 
 export const buildNestedSiteMap: (
   flattened: BackendAPISchemas.FlattenedSiteMapSchema[]
