feat: API에 언어 지원을 추가

Author: MU-Software

packages/common/src/apis/client.ts

@@ -59,6 +59,8 @@ export class BackendAPIClientError extends Error {
   }
 }
 
+type supportedLanguages = "ko" | "en";
+
 type AxiosRequestWithoutPayload = <T = unknown, R = AxiosResponse<T>, D = unknown>(
   url: string,
   config?: AxiosRequestConfig<D>
@@ -70,6 +72,7 @@ type AxiosRequestWithPayload = <T = unknown, R = AxiosResponse<T>, D = unknown>(
 ) => Promise<R>;
 
 export class BackendAPIClient {
+  readonly language: supportedLanguages;
   readonly baseURL: string;
   protected readonly csrfCookieName: string;
   private readonly backendAPI: AxiosInstance;
@@ -78,9 +81,14 @@ export class BackendAPIClient {
     baseURL: string,
     timeout: number,
     csrfCookieName: string = "csrftoken",
-    withCredentials: boolean = false
+    withCredentials: boolean = false,
+    language: supportedLanguages = "ko"
   ) {
-    const headers = { "Content-Type": "application/json" };
+    const headers = {
+      "Content-Type": "application/json",
+      "Accept-Language": language,
+    };
+    this.language = language;
     this.baseURL = baseURL;
     this.csrfCookieName = csrfCookieName;
     this.backendAPI = axios.create({

packages/common/src/apis/index.ts

@@ -1,7 +1,8 @@
-import { BackendAPIClient } from "./client";
+import { BackendAPIClient, BackendAPIClientError as _BackendAPIClientError } from "./client";
 import BackendAPISchemas from "../schemas/backendAPI";
 
 namespace BackendAPIs {
+  export const BackendAPIClientError = _BackendAPIClientError;
   export const listSiteMaps = (client: BackendAPIClient) => () =>
     client.get<BackendAPISchemas.FlattenedSiteMapSchema[]>("v1/cms/sitemap/");
   export const retrievePage = (client: BackendAPIClient) => (id: string) =>

packages/common/src/components/mdx_components/map.tsx

@@ -2,13 +2,14 @@ import { Box, Button, Stack, Tab, Tabs } from "@mui/material";
 import * as React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
+import { useCommonContext } from "../../hooks/useCommonContext";
+
 type SupportedMapType = "kakao" | "google" | "naver";
 const MAP_TYPES: SupportedMapType[] = ["kakao", "google", "naver"];
 
 type LangType = "ko" | "en";
 
 export type MapPropType = {
-  language: LangType;
   geo: {
     lat: number;
     lng: number;
@@ -54,7 +55,8 @@ const MapData: { [key in SupportedMapType]: MapDataType } = {
   },
 };
 
-export const Map: React.FC<MapPropType> = ({ language, geo, placeName, placeCode, googleMapIframeSrc }) => {
+export const Map: React.FC<MapPropType> = ({ geo, placeName, placeCode, googleMapIframeSrc }) => {
+  const { language } = useCommonContext();
   const kakaoMapRef = React.useRef<HTMLDivElement>(null);
   const [mapState, setMapState] = React.useState<MapStateType>({ tab: 0 });
   const selectedMapType = MAP_TYPES[mapState.tab] || "kakao";

packages/common/src/contexts/index.ts

@@ -3,6 +3,7 @@ import * as React from "react";
 
 namespace GlobalContext {
   export type ContextOptions = {
+    language: "ko" | "en";
     frontendDomain?: string;
     baseUrl: string;
     debug?: boolean;
@@ -13,6 +14,7 @@ namespace GlobalContext {
   };
 
   export const context = React.createContext<ContextOptions>({
+    language: "ko",
     frontendDomain: "",
     baseUrl: "",
     debug: false,

packages/common/src/hooks/useAPI.ts

@@ -18,19 +18,19 @@ namespace BackendAPIHooks {
   };
 
   export const useBackendClient = () => {
-    const { backendApiDomain, backendApiTimeout } = useBackendContext();
-    return new BackendAPIClient(backendApiDomain, backendApiTimeout);
+    const { language, backendApiDomain, backendApiTimeout } = useBackendContext();
+    return new BackendAPIClient(backendApiDomain, backendApiTimeout, "", false, language);
   };
 
   export const useFlattenSiteMapQuery = (client: BackendAPIClient) =>
     useSuspenseQuery({
-      queryKey: QUERY_KEYS.SITEMAP_LIST,
+      queryKey: [client.language, ...QUERY_KEYS.SITEMAP_LIST],
       queryFn: BackendAPIs.listSiteMaps(client),
     });
 
   export const usePageQuery = (client: BackendAPIClient, id: string) =>
     useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.PAGE, id],
+      queryKey: [client.language, ...QUERY_KEYS.PAGE, id],
       queryFn: () => BackendAPIs.retrievePage(client)(id),
     });
 }