@team-monolith/cds 1.117.20 → 1.118.0

package/dist/CdsProvider.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from "@emotion/react";
-import { i18nextOption } from "./i18n/i18n";
+import { i18n } from "i18next";
 export declare const light: Theme;
 export declare const dark: Theme;
 interface CdsContext {
@@ -8,11 +8,11 @@ interface CdsContext {
         uploadByFile: (file: File) => Promise<string>;
         showFileError: (type: "upload" | "download", message: string) => void;
     };
-    i18nextOption?: i18nextOption;
 }
 export declare const CdsContext: import("react").Context<CdsContext>;
 export declare function CdsProvider(props: {
     children: React.ReactNode;
     fontFamily?: string;
+    i18n: i18n;
 } & CdsContext): React.ReactElement;
 export {};

package/dist/CdsProvider.js

@@ -5,7 +5,6 @@ import { COLOR } from "./foundation/color";
 import { FONT } from "./foundation/font";
 import { createTheme } from "@mui/material";
 import { createContext } from "react";
-import { initI18nInstance, i18n } from "./i18n/i18n";
 import { I18nextProvider } from "react-i18next";
 export const light = {
     fontFamily: {
@@ -311,15 +310,6 @@ export const dark = {
 };
 export const CdsContext = createContext({});
 export function CdsProvider(props) {
-    // AIDEV-NOTE:
-    // CdsProvider가 렌더링 될 때 i18n 인스턴스가 초기화되지 않았다면, 초기화합니다.
-    // 여기에 useEffect를 사용한다면, 마운트 시에 i18n 초기화가 되어있지 않을 때
-    // react-i18next가 suspense를 사용하게 되어 컴포넌트가 언마운트 되므로,
-    // useEffect가 실행이 되지 않는 문제가 있습니다.
-    // 따라서 useEffect를 사용하지 않고, 동기적으로 i18n 초기화를 수행합니다.
-    if (!i18n.isInitialized && !i18n.isInitializing) {
-        initI18nInstance(props.i18nextOption);
-    }
     const muiTheme = createTheme({
         typography: {
             fontFamily: props.fontFamily,
@@ -332,7 +322,7 @@ export function CdsProvider(props) {
             },
         },
     });
-    const { theme = light } = props;
+    const { theme = light, i18n } = props;
     return (
     /**
      * AIDEV-NOTE:

package/dist/i18n/i18n.d.ts

@@ -1,8 +1,18 @@
-export type i18nextOption = {
+import { i18n, TFunction } from "i18next";
+type i18nextOption = {
     environment: string;
     mainLanguage: string;
     projectId: string;
     apiKey?: string;
 };
-export declare const i18n: import("i18next").i18n;
-export declare function initI18nInstance(option: i18nextOption | undefined): Promise<import("i18next").TFunction<"translation", undefined>>;
+/**
+ * i18n 인스턴스를 생성하고 초기화합니다.
+ * @returns
+ * - i18n: i18n 인스턴스
+ * - ready: i18n 초기화가 완료된 후에 resolve 되는 Promise
+ */
+export declare function createAndInitI18n(option?: i18nextOption): {
+    i18n: i18n;
+    ready: Promise<TFunction>;
+};
+export {};

package/dist/i18n/i18n.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-locize-backend";
@@ -24,28 +15,35 @@ const CONTAINS_KOREAN = typeof DETECTED_LANGUAGE === "string"
     : Array.isArray(DETECTED_LANGUAGE)
         ? DETECTED_LANGUAGE.some((lang) => lang.startsWith("ko"))
         : false;
-// AIDEV-NOTE:
-// i18next 싱글톤 인스턴스를 사용하는 대신, CDS가 호스트 애플리케이션과 독립적으로
-// i18n 인스턴스를 관리할 수 있도록 createInstance()를 사용합니다.
-export const i18n = i18next
-    .createInstance()
-    .use(languageDetector)
-    .use(initReactI18next);
-export function initI18nInstance(option) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (!option) {
-            // option이 없는 경우, backend 플러그인 없이 기본 i18next 설정을 사용하여,
-            // fallbackValue(=key)를 항상 사용하게 됩니다.
-            return i18n.init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { fallbackLng: false }));
-        }
-        /**
-         * AIDEV-NOTE:
-         * Locize의 사용량을 최적화하기 위해, Locize를 다음과 같은 상황에서만 활성화합니다:
-         * 1. 프로덕션 환경이 아닐 때 (개발 or 로컬 환경) 또는,
-         * 2. 언어 설정이 한국어가 아닐 때
-         */
-        const LOCIZE_ENABLED = option.environment !== "production" || !CONTAINS_KOREAN;
-        return (LOCIZE_ENABLED ? i18n.use(Backend).use(locizePlugin) : i18n).init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { debug: option.environment !== "production", 
+/**
+ * i18n 인스턴스를 생성하고 초기화합니다.
+ * @returns
+ * - i18n: i18n 인스턴스
+ * - ready: i18n 초기화가 완료된 후에 resolve 되는 Promise
+ */
+export function createAndInitI18n(option) {
+    const i18n = i18next
+        .createInstance()
+        .use(languageDetector)
+        .use(initReactI18next);
+    if (!option) {
+        // option이 없는 경우, backend 플러그인 없이 기본 i18next 설정을 사용하여,
+        // fallbackValue(=key)를 항상 사용하게 됩니다.
+        return {
+            i18n,
+            ready: i18n.init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { fallbackLng: false })),
+        };
+    }
+    /**
+     * AIDEV-NOTE:
+     * Locize의 사용량을 최적화하기 위해, Locize를 다음과 같은 상황에서만 활성화합니다:
+     * 1. 프로덕션 환경이 아닐 때 (개발 or 로컬 환경) 또는,
+     * 2. 언어 설정이 한국어가 아닐 때
+     */
+    const LOCIZE_ENABLED = option.environment !== "production" || !CONTAINS_KOREAN;
+    return {
+        i18n,
+        ready: (LOCIZE_ENABLED ? i18n.use(Backend).use(locizePlugin) : i18n).init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { debug: option.environment !== "production", 
             // AIDEV-NOTE:
             // - 유저의 언어가 Korean인 경우:
             //   fallbackLng를 false로 설정하여, 번역이 없는 경우 key 자체를 반환하도록 합니다.
@@ -58,6 +56,6 @@ export function initI18nInstance(option) {
                 projectId: option.projectId,
                 apiKey: option.apiKey,
                 referenceLng: "ko",
-            } }));
-    });
+            } })),
+    };
 }

package/dist/index.d.ts

@@ -37,3 +37,4 @@ export * from "./patterns/LexicalEditor";
 export * from "./patterns/Accordion";
 export * from "./patterns/ToggleButtonGroup";
 export * from "./patterns/Tabs";
+export { createAndInitI18n } from "./i18n/i18n";

package/dist/index.js

@@ -37,3 +37,4 @@ export * from "./patterns/LexicalEditor";
 export * from "./patterns/Accordion";
 export * from "./patterns/ToggleButtonGroup";
 export * from "./patterns/Tabs";
+export { createAndInitI18n } from "./i18n/i18n";

package/dist/patterns/LexicalEditor/components/FileSelectInput.js

@@ -16,20 +16,19 @@ import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import moment from "moment";
 import { useTranslation } from "react-i18next";
-import { i18n } from "../../../i18n/i18n";
 import { getTexts } from "../../../texts";
-const getFileType = (fileType) => ({
+const getFileType = (fileType, t) => ({
     image: {
         accept: "image/*",
-        errorStr: i18n.t("업로드할 수 없는 파일입니다. 이미지 파일을 업로드해주세요."),
+        errorStr: t("업로드할 수 없는 파일입니다. 이미지 파일을 업로드해주세요."),
     },
     pdf: {
         accept: ".pdf",
-        errorStr: i18n.t("업로드할 수 없는 파일입니다. PDF 파일을 업로드해주세요."),
+        errorStr: t("업로드할 수 없는 파일입니다. PDF 파일을 업로드해주세요."),
     },
     file: {
         accept: "*",
-        errorStr: i18n.t("업로드할 수 없는 파일입니다. 모든 파일을 업로드해주세요."),
+        errorStr: t("업로드할 수 없는 파일입니다. 모든 파일을 업로드해주세요."),
     },
 })[fileType];
 const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
@@ -42,17 +41,17 @@ export function FileSelectInput(props) {
     const { onChange, fileType, onFileSubmit, bold = false } = props;
     const [errorMessage, setErrorMessage] = useState(null);
     const inputRef = useRef(null);
+    const { t } = useTranslation();
+    const { accept, errorStr } = getFileType(fileType, t);
     const cdsContext = useContext(CdsContext);
-    const { accept, errorStr } = getFileType(fileType);
     const theme = useTheme();
-    const { t } = useTranslation();
     const handleFileChange = (event) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
         const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
         if (!file)
             return;
         if (file.size >= MAX_FILE_SIZE) {
-            setErrorMessage(getTexts("errorFileTooLarge"));
+            setErrorMessage(getTexts(t, "errorFileTooLarge"));
             event.target.value = "";
             return;
         }

package/dist/patterns/LexicalEditor/components/UploadFileDialog/UploadFileDialog.js

@@ -14,12 +14,14 @@ import moment from "moment";
 import { CdsContext } from "../../../../CdsProvider";
 import styled from "@emotion/styled";
 import { getTexts } from "../../../../texts";
+import { useTranslation } from "react-i18next";
 /**
  * OS 파일 다이얼로그를 열어 파일을 선택하고 업로드하는 컴포넌트입니다.
  */
 export function UploadFileDialog({ open, onClose, onChange, }) {
     const inputRef = useRef(null);
     const cdsContext = useContext(CdsContext);
+    const { t } = useTranslation();
     const handleFileChange = (event) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
         const showFileError = (_a = cdsContext.lexical) === null || _a === void 0 ? void 0 : _a.showFileError;
@@ -30,7 +32,7 @@ export function UploadFileDialog({ open, onClose, onChange, }) {
         }
         const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
         if (file.size >= MAX_FILE_SIZE) {
-            showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", getTexts("errorFileTooLarge"));
+            showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", getTexts(t, "errorFileTooLarge"));
             event.target.value = "";
             onClose();
             return;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -54,9 +54,9 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            return (_jsx(SegmentedInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || getTexts("placeholderEnterHere"), value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || getTexts(t, "placeholderEnterHere"), value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || getTexts("placeholderEnterHere"), value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || getTexts(t, "placeholderEnterHere"), value: answerInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormPlaceholder.js

@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import { Input } from "../../../../../components/Input";
 import { getTexts } from "../../../../../texts";
+import { useTranslation } from "react-i18next";
 export function FormPlaceholder(props) {
     const { control } = props;
-    return (_jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts("exampleEnterHere") })) }));
+    const { t } = useTranslation();
+    return (_jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts(t, "exampleEnterHere") })) }));
 }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/SettingForm.js

@@ -83,7 +83,7 @@ export function SettingForm(props) {
                   ` }) })] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
                                             { value: false, label: t("한 칸으로") },
                                             { value: true, label: numCharOptionStr },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: [t("자리 표시자", { context: "렉시컬 주관식 설정창" }), _jsx(Tooltip, { text: getTexts("descriptionDefaultInputText"), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: [t("자리 표시자", { context: "렉시컬 주관식 설정창" }), _jsx(Tooltip, { text: getTexts(t, "descriptionDefaultInputText"), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
                   ` }) })] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: t("띄어쓰기") }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -6,7 +6,6 @@ import { SelectBoxComponent } from "./SelectBoxComponent";
 import { Tag } from "../../../../../components/Tag";
 import { useRef } from "react";
 import { useEventListener } from "usehooks-ts";
-import { i18n } from "../../../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
 const TYPE_TO_INDEX_ICON = (type) => ({
     primary: (_jsx(CheckFillIcon, { css: css `
@@ -26,40 +25,42 @@ const TYPE_TO_INDEX_ICON = (type) => ({
  * isSelected, isAnswer, onClick에 따른 type, description 내용
  * /images/2025-05-05-01-25-06.png
  */
-function getTypeAndDescription(isSelected, isAnswer, onClick) {
+function getTypeAndDescription(isSelected, isAnswer, onClick, t) {
     if (isAnswer === undefined) {
         return {
             type: isSelected ? "primary" : undefined,
-            description: isSelected
-                ? i18n.t("선택됨")
-                : onClick
-                    ? i18n.t("선택하기")
-                    : "",
+            description: isSelected ? t("선택됨") : onClick ? t("선택하기") : "",
         };
     }
     if (isAnswer) {
         return {
             type: isSelected ? "success" : undefined,
             description: isSelected
-                ? i18n.t("선택됨, 정답", { context: "렉시컬 선택지 하나의 상태" })
+                ? t("선택됨, 정답", {
+                    context: "렉시컬 선택지 하나의 상태",
+                })
                 : onClick
-                    ? i18n.t("선택하기, 정답", { context: "렉시컬 선택지 하나의 상태" })
-                    : i18n.t("정답", { context: "렉시컬 선택지 하나의 상태" }),
+                    ? t("선택하기, 정답", {
+                        context: "렉시컬 선택지 하나의 상태",
+                    })
+                    : t("정답", { context: "렉시컬 선택지 하나의 상태" }),
         };
     }
     return {
         type: isSelected ? "danger" : undefined,
         description: isSelected
-            ? i18n.t("선택됨, 오답", { context: "렉시컬 선택지 하나의 상태" })
+            ? t("선택됨, 오답", { context: "렉시컬 선택지 하나의 상태" })
             : onClick
-                ? i18n.t("선택하기, 오답", { context: "렉시컬 선택지 하나의 상태" })
-                : i18n.t("오답", { context: "렉시컬 선택지 하나의 상태" }),
+                ? t("선택하기, 오답", {
+                    context: "렉시컬 선택지 하나의 상태",
+                })
+                : t("오답", { context: "렉시컬 선택지 하나의 상태" }),
     };
 }
 export function SelectBoxView(props) {
     const { multipleSelectionsEnabled, index, isSelected, isAnswer, image, text, onClick, } = props;
     const { t } = useTranslation();
-    const { type, description } = getTypeAndDescription(isSelected, isAnswer, onClick);
+    const { type, description } = getTypeAndDescription(isSelected, isAnswer, onClick, t);
     const boxRef = useRef(null);
     const handleKeyDown = (e) => {
         // onClick이 없으면 아무것도 하지 않음.

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.js

@@ -13,6 +13,7 @@ import { SettingForm } from "./SettingForm";
 import styled from "@emotion/styled";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 import { useTranslation } from "react-i18next";
+import { getTexts } from "../../../../texts";
 export function SelectComponent(props) {
     const { selected, hasMultipleSolutions, selections, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
@@ -35,7 +36,7 @@ export function SelectComponent(props) {
         `, children: [multipleSelectionsEnabled && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), t("질문에 해당하는 답을 모두 고르는 문제입니다.")] })), selections.map((selection, index) => (_jsx(SelectBoxView, { multipleSelectionsEnabled: multipleSelectionsEnabled, index: index + 1, isAnswer: showQuizSolution && "isAnswer" in selection
+              ` }), getTexts(t, "multipleChoicesProblem")] })), selections.map((selection, index) => (_jsx(SelectBoxView, { multipleSelectionsEnabled: multipleSelectionsEnabled, index: index + 1, isAnswer: showQuizSolution && "isAnswer" in selection
                         ? selection.isAnswer
                         : undefined, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
                         ? undefined

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.js

@@ -44,7 +44,7 @@ export function SettingForm(props) {
     function validateRequired(value) {
         if (value.show.image || value.show.text)
             return true;
-        return getTexts("errorRequiredField");
+        return getTexts(t, "errorRequiredField");
     }
     function validateDuplicated(value, formValues) {
         const shows = formValues.selections.map((selection) => selection.show);
@@ -57,7 +57,7 @@ export function SettingForm(props) {
         });
         if (duplicatedIndexes.length < 2)
             return true;
-        return getTexts("errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
+        return getTexts(t, "errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
     }
     const answersCount = watch("selections").filter((selection) => selection.isAnswer).length;
     const hasMultipleAnswers = answersCount > 1;
@@ -76,7 +76,7 @@ export function SettingForm(props) {
                                     }
                                     : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: fields.length < 9
                             ? t("선택지 추가", { context: "버튼, 렉시컬 도구 설정창" })
-                            : getTexts("errorMaxChoicesExceeded"), onClick: () => {
+                            : getTexts(t, "errorMaxChoicesExceeded"), onClick: () => {
                             if (fields.length >= 9)
                                 return;
                             append({

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormIconAndLabel.js

@@ -13,7 +13,7 @@ export function FormIconAndLabel(props) {
     const theme = useTheme();
     const { t } = useTranslation();
     return (_jsx(Controller, { control: control, name: "iconType", render: ({ field: { value, onChange } }) => {
-            const { startIcon, title, icons } = getIconData(value, theme);
+            const { startIcon, title, icons } = getIconData(value, theme, t);
             return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { label: t("아이콘: {{title}}", { title }), size: "small", color: "grey", closeOnItemClick: true, bold: true, startIcon: startIcon, endIcon: _jsx(ArrowDownSFillIcon, {}), menuProps: {
                             menuCss: css `
                   width: 216px;
@@ -27,7 +27,7 @@ export function FormIconAndLabel(props) {
                                 horizontal: "center",
                             },
                         }, children: ICON_TYPES.map((type, index) => {
-                            const { title, startIcon } = getIconData(type, theme);
+                            const { title, startIcon } = getIconData(type, theme, t);
                             return (_jsx(DropdownItem, { index: index, label: title, preserveIconColor: true, startIcon: startIcon, onClick: () => {
                                     onChange(type);
                                 } }, index));

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormLabel.js

@@ -4,14 +4,16 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { FormInput } from "../../../../../Form";
 import { getTexts } from "../../../../../../../../texts";
-const getLabelRules = () => ({
-    required: getTexts("errorRequiredField"),
+import { useTranslation } from "react-i18next";
+const getLabelRules = (t) => ({
+    required: getTexts(t, "errorRequiredField"),
     maxLength: 12,
 });
 /** 레이블을 설정하는 Form입니다. */
 export function FormLabel(props) {
     const { control, index } = props;
-    const labelRules = getLabelRules();
+    const { t } = useTranslation();
+    const labelRules = getLabelRules(t);
     // endIcon에 들어갈 value, error를 사용하기 위해 useController를 사용합니다.
     const { field: { value }, fieldState: { error }, } = useController({
         control,

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.js

@@ -10,7 +10,7 @@ export function FormQuestion(props) {
     const { control, index, onDelete } = props;
     const { t } = useTranslation();
     return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: {
-                    required: getTexts("errorRequiredField"),
+                    required: getTexts(t, "errorRequiredField"),
                 }, size: "small", placeholder: t("{{index}}번 평가 항목", { index: index + 1 }), multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, "aria-label": t("삭제", {
                     context: "스퀘어버튼, 렉시컬 3단계 평가 입력칸 도구 설정창",
                 }) }))] }));

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.js

@@ -50,7 +50,7 @@ export function SettingForm(props) {
                                     }
                                     : undefined }, field.uid))), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: t("평가 항목 추가"), onClick: () => {
                                     append({
-                                        question: { text: getTexts("placeholderEvaluationItem") },
+                                        question: { text: getTexts(t, "placeholderEvaluationItem") },
                                         selectedLabelIndex: null,
                                     });
                                 } })] }), _jsxs(Right, { children: [_jsx(Label, { children: t("아이콘, 레이블") }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), bold: true, type: "submit" })] })] }));

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js

@@ -23,7 +23,7 @@ export function EvaluationComponent(props) {
     const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
     const { t } = useTranslation();
     const [settingOpen, setSettingOpen] = useState(false);
-    const { icons } = getIconData(iconType, theme);
+    const { icons } = getIconData(iconType, theme, t);
     // label과 icons를 매핑하여 ToggelButtonData로 변환합니다.
     // 만약 둘의 길이가 같지 않다면 짧은 길이에 맞춰집니다.
     const data = _.zipWith(labels, icons, (label, { onIcon, offIcon }) => ({

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/iconData.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { IconType } from "./SelfEvaluationNode";
 import { Theme } from "@emotion/react";
+import { TFunction } from "i18next";
 interface IconData {
     startIcon: React.ReactNode;
     title: string;
@@ -10,5 +11,5 @@ interface IconData {
     }[];
 }
 export declare const ICON_TYPES: IconType[];
-export declare const getIconData: (iconType: IconType, theme: Theme) => IconData;
+export declare const getIconData: (iconType: IconType, theme: Theme, t: TFunction) => IconData;
 export {};

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/iconData.js

@@ -2,16 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CustomEmoGoodIcon, CustomEmoGreatIcon, CustomEmoNeutralIcon, } from "../../../../icons/custom/default";
 import { CustomEmoGoodColorIcon, CustomEmoGreatColorIcon, CustomEmoNeutralColorIcon, } from "../../../../icons/custom/colored";
 import { Number1Icon, Number2Icon, Number3Icon } from "../../../../icons";
-import { i18n } from "../../../../i18n/i18n";
 export const ICON_TYPES = [
     "emoji",
     "ascendingNumber",
     "descendingNumber",
 ];
-export const getIconData = (iconType, theme) => ({
+export const getIconData = (iconType, theme, t) => ({
     emoji: {
         startIcon: _jsx(CustomEmoGreatColorIcon, {}),
-        title: i18n.t("이모지"),
+        title: t("이모지"),
         icons: [
             {
                 onIcon: _jsx(CustomEmoGreatColorIcon, {}),
@@ -26,7 +25,7 @@ export const getIconData = (iconType, theme) => ({
     },
     ascendingNumber: {
         startIcon: _jsx(Number1Icon, {}),
-        title: i18n.t("숫자, 1-2-3"),
+        title: t("숫자, 1-2-3"),
         icons: [
             {
                 onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
@@ -44,7 +43,7 @@ export const getIconData = (iconType, theme) => ({
     },
     descendingNumber: {
         startIcon: _jsx(Number3Icon, {}),
-        title: i18n.t("숫자, 3-2-1"),
+        title: t("숫자, 3-2-1"),
         icons: [
             {
                 onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/InputComponent.js

@@ -49,7 +49,7 @@ export function InputComponent(props) {
                 : {
                     onFocus: () => setFocus(true),
                     onBlur: () => setFocus(false),
-                }, size: "small", color: focus ? "activePrimary" : "default", placeholder: placeholder || getTexts("placeholderEnterHere"), value: valueInput, onChange: (e) => {
+                }, size: "small", color: focus ? "activePrimary" : "default", placeholder: placeholder || getTexts(t, "placeholderEnterHere"), value: valueInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.js

@@ -36,10 +36,10 @@ export function SettingForm(props) {
             height: 12px;
           ` }), multiline
                         ? t("서술형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })
-                        : t("단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: [t("자리 표시자", { context: "렉시컬 단답형/서술형 도구" }), _jsx(Tooltip, { text: getTexts("descriptionDefaultInputText"), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+                        : t("단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: [t("자리 표시자", { context: "렉시컬 단답형/서술형 도구" }), _jsx(Tooltip, { text: getTexts(t, "descriptionDefaultInputText"), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
                   width: 12px;
                   height: 12px;
-                ` }) })] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts("exampleEnterHere") })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), bold: true, type: "submit" })] })] }));
+                ` }) })] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts(t, "exampleEnterHere") })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), bold: true, type: "submit" })] })] }));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.js

@@ -13,6 +13,7 @@ import { SquareButton } from "../../../../../components/SquareButton";
 import { SettingForm } from "./SettingForm";
 import { SelectBoxEdit, SelectBoxView } from "./SelectBox";
 import { useTranslation } from "react-i18next";
+import { getTexts } from "../../../../../texts";
 export function SelectComponent(props) {
     const { selections, selected, allowMultipleAnswers, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
@@ -25,7 +26,7 @@ export function SelectComponent(props) {
         return (_jsxs(_Fragment, { children: [allowMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), t("질문에 해당하는 답을 모두 고르는 문제입니다.")] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
+              ` }), getTexts(t, "multipleChoicesProblem")] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
                         ? undefined
                         : () => {
                             const isSelected = selected.includes(selection.value);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/SettingForm.js

@@ -44,7 +44,7 @@ export function SettingForm(props) {
     function validateRequired(value) {
         if (value.image || value.text)
             return true;
-        return getTexts("errorRequiredField");
+        return getTexts(t, "errorRequiredField");
     }
     function validateDuplicated(value, formValues) {
         const shows = formValues.selections.map((selection) => selection.show);
@@ -56,7 +56,7 @@ export function SettingForm(props) {
         });
         if (duplicatedIndexes.length < 2)
             return true;
-        return getTexts("errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
+        return getTexts(t, "errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
     }
     return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
@@ -72,7 +72,7 @@ export function SettingForm(props) {
                                             }
                                             : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: fields.length < 9
                                     ? t("선택지 추가", { context: "버튼, 렉시컬 도구 설정창" })
-                                    : getTexts("errorMaxChoicesExceeded"), onClick: () => {
+                                    : getTexts(t, "errorMaxChoicesExceeded"), onClick: () => {
                                     if (fields.length >= 9)
                                         return;
                                     append({

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -219,6 +219,7 @@ export function ComponentAdderPlugin(props) {
                             const baseOptions = getBaseOptions({
                                 editor,
                                 theme,
+                                t,
                                 setImageOpen,
                                 setVideoOpen,
                                 isSheetEnabled,