@team-monolith/cds 1.117.0 → 1.117.2

package/README.md

@@ -30,6 +30,8 @@
 
 `npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
 
-패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run compile` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
+패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run build` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
 
 이때 npm team-monolith 에 소속되어 있어야 합니다.
+
+빌드 시에 번역 관련 환경변수가 필요합니다. (.locize 파일)

package/dist/{CdsProvider.d.ts → cds/CdsProvider.d.ts}

@@ -1,4 +1,5 @@
 import { Theme } from "@emotion/react";
+import { i18nextConfig } from "../i18n/i18n";
 export declare const light: Theme;
 export declare const dark: Theme;
 interface CdsContext {
@@ -7,6 +8,7 @@ interface CdsContext {
         uploadByFile: (file: File) => Promise<string>;
         showFileError: (type: "upload" | "download", message: string) => void;
     };
+    i18nextConfig?: i18nextConfig;
 }
 export declare const CdsContext: import("react").Context<CdsContext>;
 export declare function CdsProvider(props: {

package/dist/{CdsProvider.js → cds/CdsProvider.js}

@@ -1,10 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Global, ThemeProvider, css } from "@emotion/react";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material";
 import { COLOR } from "./foundation/color";
 import { FONT } from "./foundation/font";
 import { createTheme } from "@mui/material";
-import { createContext } from "react";
+import { createContext, useMemo } from "react";
+import { getI18nInstance } from "../i18n/i18n";
+import { I18nextProvider } from "react-i18next";
 export const light = {
     fontFamily: {
         ui: FONT.pretendard,
@@ -309,6 +311,7 @@ export const dark = {
 };
 export const CdsContext = createContext({});
 export function CdsProvider(props) {
+    const i18nInstance = useMemo(() => getI18nInstance(props.i18nextConfig), []);
     const muiTheme = createTheme({
         typography: {
             fontFamily: props.fontFamily,
@@ -322,7 +325,7 @@ export function CdsProvider(props) {
         },
     });
     const { theme = light } = props;
-    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
+    return (_jsxs(I18nextProvider, { i18n: i18nInstance, children: [_jsx(Global, { styles: css `
           body {
             font-family: ${FONT.pretendard};
           }

package/dist/{index.d.ts → cds/index.d.ts}

@@ -1,4 +1,4 @@
-/// <reference path="../@types/emotion.d.ts" preserve="true" />
+/// <reference path="../../@types/emotion.d.ts" preserve="true" />
 export * from "./components/AlertDialog";
 export * from "./components/DecoratedNumber";
 export * from "./components/Banner";

package/dist/i18n/i18n.d.ts

@@ -0,0 +1,7 @@
+export type i18nextConfig = {
+    environment: string;
+    mainLanguage: string;
+    projectId: string;
+    apiKey?: string;
+};
+export declare function getI18nInstance(config: i18nextConfig | undefined): import("i18next").i18n;

package/dist/i18n/i18n.js

@@ -0,0 +1,48 @@
+import i18next from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-locize-backend";
+import { COOKIE_NAME, I18N_COMMON_CONFIGS, QUERYSTRING_NAME, } from "./i18nConfigs";
+const languageDetector = new LanguageDetector(null, {
+    lookupCookie: COOKIE_NAME,
+    lookupQuerystring: QUERYSTRING_NAME,
+    caches: [], // 사용자의 language 설정을 저장하지 않습니다.
+});
+const DETECTED_LANGUAGE = languageDetector.detect();
+const CONTAINS_KOREAN = typeof DETECTED_LANGUAGE === "string"
+    ? DETECTED_LANGUAGE.startsWith("ko")
+    : Array.isArray(DETECTED_LANGUAGE)
+        ? DETECTED_LANGUAGE.some((lang) => lang.startsWith("ko"))
+        : false;
+export function getI18nInstance(config) {
+    const i18nextInstance = i18next.createInstance();
+    if (!config) {
+        // config가 없는 경우, backend 플러그인 없이 기본 i18next 설정을 사용하여,
+        // fallbackValue(=key)를 항상 사용하게 됩니다.
+        i18nextInstance.init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { fallbackLng: false }));
+        return i18nextInstance;
+    }
+    /**
+     * AIDEV-NOTE:
+     * Locize의 사용량을 최적화하기 위해, Locize를 다음과 같은 상황에서만 활성화합니다:
+     * 1. 프로덕션 환경이 아닐 때 (개발 or 로컬 환경) 또는,
+     * 2. 언어 설정이 한국어가 아닐 때
+     */
+    const LOCIZE_ENABLED = config.environment !== "production" || !CONTAINS_KOREAN;
+    (LOCIZE_ENABLED && config.projectId
+        ? i18nextInstance.use(Backend)
+        : i18nextInstance).init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { debug: config.environment !== "production", 
+        // AIDEV-NOTE:
+        // - 유저의 언어가 Korean인 경우:
+        //   fallbackLng를 false로 설정하여, 번역이 없는 경우 key 자체를 반환하도록 합니다.
+        //   이 값을 설정하지 않는다면 i18next가 'dev'(=i18next 기본값)라는 언어를 찾으려고 시도할 것이므로,
+        //   이 동작을 방지합니다.
+        // - 유저의 언어가 Korean이 아닌 경우:
+        //   fallbackLng를 env.REACT_APP_MAIN_LANGUAGE로 설정하여,
+        //   유저 언어의 번역이 없을 경우, 메인 언어로 fallback합니다.
+        fallbackLng: CONTAINS_KOREAN ? false : config.mainLanguage, saveMissing: LOCIZE_ENABLED, backend: {
+            projectId: config.projectId,
+            apiKey: config.apiKey,
+            referenceLng: "ko",
+        } }));
+    return i18nextInstance;
+}

package/dist/i18n/i18nConfigs.d.ts

@@ -0,0 +1,10 @@
+import { InitOptions } from "i18next";
+/**
+ * i18next-parser의 출력 경로
+ */
+export declare const PARSER_OUTPUT = "locales/$LOCALE/$NAMESPACE.json";
+export declare const SUPPORTED_LANGUAGES: string[];
+export declare const DEFAULT_NS = "cds";
+export declare const QUERYSTRING_NAME = "lng";
+export declare const COOKIE_NAME = "i18next";
+export declare const I18N_COMMON_CONFIGS: Partial<InitOptions>;

package/dist/i18n/i18nConfigs.js

@@ -0,0 +1,23 @@
+// i18n 관련 공통으로 사용되는 전역 상수 및 설정입니다.
+/**
+ * i18next-parser의 출력 경로
+ */
+export const PARSER_OUTPUT = "locales/$LOCALE/$NAMESPACE.json";
+export const SUPPORTED_LANGUAGES = ["ko", "en"];
+export const DEFAULT_NS = "cds";
+export const QUERYSTRING_NAME = "lng";
+export const COOKIE_NAME = "i18next";
+export const I18N_COMMON_CONFIGS = {
+    ns: DEFAULT_NS,
+    supportedLngs: SUPPORTED_LANGUAGES,
+    nonExplicitSupportedLngs: true,
+    // AIDEV-NOTE:
+    // 이 프로젝트에서 key를 한국어 문장 그대로로 사용하기 때문에,
+    // keySeparator와 nsSeparator를 false로 설정하여
+    // 불필요한 구분자를 사용하지 않도록 합니다.
+    keySeparator: false,
+    nsSeparator: false,
+    interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+    },
+};

package/dist/i18n/i18nTest.d.ts

@@ -0,0 +1,2 @@
+import i18n from "i18next";
+export default i18n;

package/dist/i18n/i18nTest.js

@@ -0,0 +1,18 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+// i18nTest는 jest.setup.ts 및 스토리북에서 사용되는 mocking i18n 모듈입니다.
+// 각각 다음과 같은 문제가 있어 mocking을 사용합니다:
+// 1. jest 환경에서는 브라우저 API가 없어 i18next 초기화 과정에서 문제가 발생합니다.
+// 2. 스토리북에서는 i18next가 초기화되지 않아 번역이 정상적으로 작동하지 않습니다.
+// 따라서 불필요한 번역과 초기화 과정 오류를 피하기 위해 i18nTest를 사용합니다.
+i18n.use(initReactI18next).init({
+    debug: false, // 디버그 모드 옵션입니다. 프로덕션용 i18n에서는 true로 설정하여 콘솔에 번역 관련 로그를 출력할 수 있습니다.
+    supportedLngs: ["ko", "en"],
+    fallbackLng: "ko",
+    resources: {
+        en: {},
+        ko: {},
+    },
+});
+// eslint-disable-next-line import/no-default-export
+export default i18n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.117.0",
+  "version": "1.117.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -15,27 +15,28 @@
     "@types/react-dom": "^18.2.13",
     "framer-motion": "^11.3.19",
     "hex-to-css-filter": "^5.4.0",
+    "i18next": "^25.5.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-locize-backend": "^7.0.4",
     "lexical": "^0.32.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.55.0",
+    "react-i18next": "^15.7.3",
     "react-player": "^2.16.0",
     "remixicon": "^4.3.0",
     "typescript": "~5.5.4",
     "uid": "^2.0.2",
     "usehooks-ts": "^2.9.1"
   },
-  "peerDependencies": {
-    "i18next": "^25.5.2",
-    "react-i18next": "^15.7.3"
-  },
   "files": [
     "dist/**/*",
     "@types/**/*"
   ],
   "scripts": {
+    "build": "npm run compile && npm run i18n",
     "clean": "rimraf dist",
     "compile": "npm i && npm run clean && mkdir dist && npm run iconconvert && npm run svgr-customicon && tsc && npm run postbundle",
     "postbundle": "copyfiles -u 2 src/cds/**/*.{svg,jpg,png} dist/",
@@ -93,6 +94,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.8.0",
     "i18next-parser": "^9.3.0",
+    "locize-cli": "^10.3.2",
     "pascalcase": "^2.0.0",
     "prettier": "^3.0.2",
     "prop-types": "^15.8.1",
@@ -100,5 +102,6 @@
     "storybook": "^7.4.6",
     "tsx": "^4.20.5",
     "typescript-eslint": "^8.4.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }