@team-monolith/cds 1.117.12 → 1.117.13

package/dist/CdsProvider.d.ts

@@ -8,7 +8,7 @@ interface CdsContext {
         uploadByFile: (file: File) => Promise<string>;
         showFileError: (type: "upload" | "download", message: string) => void;
     };
-    i18nextOption?: i18nextOption;
+    i18nextConfig?: i18nextOption;
 }
 export declare const CdsContext: import("react").Context<CdsContext>;
 export declare function CdsProvider(props: {

package/dist/CdsProvider.js

@@ -318,7 +318,7 @@ export function CdsProvider(props) {
     // useEffect가 실행이 되지 않는 문제가 있습니다.
     // 따라서 useEffect를 사용하지 않고, 동기적으로 i18n 초기화를 수행합니다.
     if (!i18n.isInitialized && !i18n.isInitializing) {
-        initI18nInstance(props.i18nextOption);
+        initI18nInstance(props.i18nextConfig);
     }
     const muiTheme = createTheme({
         typography: {

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -17,6 +17,7 @@ import { SquareButton } from "../SquareButton";
 import { CloseFillIcon } from "../../icons";
 import { AlertDialogContext } from "./AlertDialogContext";
 import { MOBILE } from "../../foundation/breakpoints";
+import { useTranslation } from "react-i18next";
 export const alertDialogTitleClasses = {
     root: "AlertDialogTitle",
     content: "AlertDialogTitle-content",
@@ -26,6 +27,7 @@ export const alertDialogTitleClasses = {
 export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props, ref) {
     const { className, component: Component = "div", onClose, children } = props, other = __rest(props, ["className", "component", "onClose", "children"]);
     const { icon } = React.useContext(AlertDialogContext);
+    const { t } = useTranslation();
     const theme = useTheme();
     return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: [alertDialogTitleClasses.root, className]
                 .filter(Boolean)
@@ -63,5 +65,5 @@ export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props
                     height: 32px;
                   }
                 `)}
-              `, children: icon })), children] }), onClose && (_jsx(SquareButton, { className: alertDialogTitleClasses.closeButton, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })) }));
+              `, children: icon })), children] }), onClose && (_jsx(SquareButton, { className: alertDialogTitleClasses.closeButton, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": t("닫기", { context: "다이얼로그" }) }))] })) }));
 });

package/dist/components/FileTypeAlertDialog.js

@@ -4,6 +4,7 @@ import { css, useTheme } from "@emotion/react";
 import { AlertDialog, AlertDialogActions, AlertDialogContent, AlertDialogTitle, } from "./AlertDialog";
 import { AlertFillIcon } from "../icons";
 import { Button } from "./Button";
+import { useTranslation } from "react-i18next";
 export const fileTypeAlertDialogClasses = {
     root: "FileTypeAlertDialog",
     title: "FileTypeAlertDialog-title",
@@ -13,11 +14,12 @@ export const fileTypeAlertDialogClasses = {
 export function FileTypeAlertDialog(props) {
     const { className, open, onClose, content, openFileBrowser } = props;
     const theme = useTheme();
+    const { t } = useTranslation();
     return (_jsxs(AlertDialog, { className: [fileTypeAlertDialogClasses.root, className].filter(Boolean).join(" "), open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
             color: ${theme.color.background.danger};
           ` }), children: [_jsx(AlertDialogTitle, { className: fileTypeAlertDialogClasses.title, css: css `
           font-weight: 700;
-        `, onClose: onClose, children: "\uD30C\uC77C \uD615\uC2DD\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694." }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: "\uB2EB\uAE30", size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: "\uB2E4\uC2DC \uC5C5\uB85C\uB4DC", size: "medium", onClick: () => {
+        `, onClose: onClose, children: t("파일 형식을 확인해주세요.") }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: t("닫기", { context: "다이얼로그" }), size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: t("다시 업로드"), size: "medium", onClick: () => {
                             onClose();
                             openFileBrowser();
                         }, bold: true })] })] }));

package/dist/components/Pagination.js

@@ -16,6 +16,7 @@ import * as React from "react";
 import styled from "@emotion/styled";
 import { Pagination as MuiPagination } from "@mui/material";
 import { HOVER } from "../utils/hover";
+import { useTranslation } from "react-i18next";
 export const paginationClasses = {
     root: "Pagination",
 };
@@ -24,12 +25,15 @@ export const paginationClasses = {
  */
 export const Pagination = React.forwardRef(function Pagination(props, ref) {
     const { className } = props, other = __rest(props, ["className"]);
+    const { t } = useTranslation();
     return (_jsx(StyledPagination, Object.assign({ siblingCount: 2, shape: "rounded" }, other, { className: [paginationClasses.root, className].filter(Boolean).join(" "), ref: ref, getItemAriaLabel: (type, page, selected) => {
             if (type === "previous")
-                return "이전 페이지로 이동";
+                return t("이전 페이지로 이동");
             if (type === "next")
-                return "다음 페이지로 이동";
-            return `${page}페이지${selected ? " 선택됨" : ""}`;
+                return t("다음 페이지로 이동");
+            return selected
+                ? t("{{page}}페이지, 선택됨", { page })
+                : t("{{page}}페이지", { page });
         } })));
 });
 const StyledPagination = styled(MuiPagination)(({ theme }) => css `

package/dist/i18n/i18n.d.ts

@@ -5,4 +5,4 @@ export type i18nextOption = {
     apiKey?: string;
 };
 export declare const i18n: import("i18next").i18n;
-export declare function initI18nInstance(option: i18nextOption | undefined): Promise<import("i18next").TFunction<"translation", undefined>>;
+export declare function initI18nInstance(config: i18nextOption | undefined): Promise<import("i18next").TFunction<"translation", undefined>>;

package/dist/i18n/i18n.js

@@ -31,10 +31,10 @@ export const i18n = i18next
     .createInstance()
     .use(languageDetector)
     .use(initReactI18next);
-export function initI18nInstance(option) {
+export function initI18nInstance(config) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (!option) {
-            // option이 없는 경우, backend 플러그인 없이 기본 i18next 설정을 사용하여,
+        if (!config) {
+            // config가 없는 경우, backend 플러그인 없이 기본 i18next 설정을 사용하여,
             // fallbackValue(=key)를 항상 사용하게 됩니다.
             return i18n.init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { fallbackLng: false }));
         }
@@ -44,19 +44,19 @@ export function initI18nInstance(option) {
          * 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", 
+        const LOCIZE_ENABLED = config.environment !== "production" || !CONTAINS_KOREAN;
+        return (LOCIZE_ENABLED ? i18n.use(Backend).use(locizePlugin) : i18n).init(Object.assign(Object.assign({}, I18N_COMMON_CONFIGS), { debug: config.environment !== "production", 
             // AIDEV-NOTE:
             // - 유저의 언어가 Korean인 경우:
             //   fallbackLng를 false로 설정하여, 번역이 없는 경우 key 자체를 반환하도록 합니다.
             //   이 값을 설정하지 않는다면 i18next가 'dev'(=i18next 기본값)라는 언어를 찾으려고 시도할 것이므로,
             //   이 동작을 방지합니다.
             // - 유저의 언어가 Korean이 아닌 경우:
-            //   fallbackLng를 option.mainLanguage로 설정하여,
+            //   fallbackLng를 env.REACT_APP_MAIN_LANGUAGE로 설정하여,
             //   유저 언어의 번역이 없을 경우, 메인 언어로 fallback합니다.
-            fallbackLng: CONTAINS_KOREAN ? false : option.mainLanguage, saveMissing: LOCIZE_ENABLED, backend: {
-                projectId: option.projectId,
-                apiKey: option.apiKey,
+            fallbackLng: CONTAINS_KOREAN ? false : config.mainLanguage, saveMissing: LOCIZE_ENABLED, backend: {
+                projectId: config.projectId,
+                apiKey: config.apiKey,
                 referenceLng: "ko",
             } }));
     });

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

@@ -15,11 +15,23 @@ import { FileWarningLineIcon, UploadLineIcon } from "../../../icons";
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import moment from "moment";
-const fileTypeMap = {
-    image: { accept: "image/*", typeStr: "이미지 파일" },
-    pdf: { accept: ".pdf", typeStr: "PDF 파일" },
-    file: { accept: "*", typeStr: "모든 파일" },
-};
+import { useTranslation } from "react-i18next";
+import { i18n } from "../../../i18n/i18n";
+import { getTexts } from "../../../texts";
+const getFileType = (fileType) => ({
+    image: {
+        accept: "image/*",
+        errorStr: i18n.t("업로드할 수 없는 파일입니다. 이미지 파일을 업로드해주세요."),
+    },
+    pdf: {
+        accept: ".pdf",
+        errorStr: i18n.t("업로드할 수 없는 파일입니다. PDF 파일을 업로드해주세요."),
+    },
+    file: {
+        accept: "*",
+        errorStr: i18n.t("업로드할 수 없는 파일입니다. 모든 파일을 업로드해주세요."),
+    },
+})[fileType];
 const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
 /**
  * 파일 탐색기를 열어 특정 파일을 업로드 한 후, 그 경로를 onChange로 전달합니다.
@@ -31,15 +43,16 @@ export function FileSelectInput(props) {
     const [errorMessage, setErrorMessage] = useState(null);
     const inputRef = useRef(null);
     const cdsContext = useContext(CdsContext);
-    const { accept, typeStr } = fileTypeMap[fileType];
+    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("용량이 너무 큽니다. 1GB 이하의 파일을 선택해 주세요.");
+            setErrorMessage(getTexts("errorFileTooLarge"));
             event.target.value = "";
             return;
         }
@@ -49,7 +62,7 @@ export function FileSelectInput(props) {
                     ? accept.slice(1) === ((_b = file.name.split(".").pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase())
                     : new RegExp(accept.replace("*", ".*")).test(file.type));
             if (!isTypeValid) {
-                setErrorMessage(`업로드할 수 없는 파일입니다. ${typeStr}을 업로드해주세요.`);
+                setErrorMessage(errorStr);
                 event.target.value = "";
                 return;
             }
@@ -67,7 +80,7 @@ export function FileSelectInput(props) {
         }
         setErrorMessage(null);
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(Container, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Container, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: t("파일 선택하기"), onClick: () => {
                             var _a;
                             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                         }, startIcon: _jsx(UploadLineIcon, {}), bold: bold }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `

package/dist/patterns/LexicalEditor/components/InsertImageDialog/ImagePreview.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 export function ImagePreview(props) {
     const { src, alt, fallback } = props;
     const [erroredSrc, setErroredSrc] = useState(null);
-    return (_jsxs(Container, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", erroredSrc === src ? (fallback) : (_jsx("img", { src: src, alt: alt, onError: () => setErroredSrc(src) }))] }));
+    const { t } = useTranslation();
+    return (_jsxs(Container, { children: [t("이미지 미리보기"), erroredSrc === src ? (fallback) : (_jsx("img", { src: src, alt: alt, onError: () => setErroredSrc(src) }))] }));
 }
 const Container = styled.div `
   display: flex;

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

@@ -12,9 +12,11 @@ import { ImagePreview } from "./ImagePreview";
 import { ImageNotAvailable } from "../../nodes/ImageNode/ImageNotAvailable";
 import styled from "@emotion/styled";
 import { debounce } from "lodash";
+import { useTranslation } from "react-i18next";
 export function InsertImageDialog(props) {
     const { title, open, onClose, imageProps, onChange, onDelete, shouldReset } = props;
     const theme = useTheme();
+    const { t } = useTranslation();
     const { control, setValue, watch, reset, handleSubmit, subscribe } = useForm({
         defaultValues: imageProps !== null && imageProps !== void 0 ? imageProps : { src: "", altText: "" },
     });
@@ -49,7 +51,7 @@ export function InsertImageDialog(props) {
             handleSubmit(onSubmit)();
         }, disableIconPadding: true, children: [_jsx(StyledAlertDialogTitle, { onClose: handleOnClose, children: title }), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FileSelectInput, { onChange: (value) => {
                                 setValue("src", value);
-                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", size: "medium", label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: "\uC0AD\uC81C\uD558\uAE30", onClick: onDelete }))] })] }));
+                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: t("삽입하는 이미지에 관한 설명"), size: "medium", label: t("대체 텍스트"), fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: t("삽입하기"), size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: t("삭제하기"), onClick: onDelete }))] })] }));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

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

@@ -13,6 +13,7 @@ import { useContext, useEffect, useRef } from "react";
 import moment from "moment";
 import { CdsContext } from "../../../../CdsProvider";
 import styled from "@emotion/styled";
+import { getTexts } from "../../../../texts";
 /**
  * OS 파일 다이얼로그를 열어 파일을 선택하고 업로드하는 컴포넌트입니다.
  */
@@ -29,7 +30,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", "용량이 너무 큽니다. 1GB 이하의 파일을 선택해 주세요.");
+            showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", getTexts("errorFileTooLarge"));
             event.target.value = "";
             onClose();
             return;

package/dist/patterns/LexicalEditor/nodes/FileNode/FileDownloadButton.js

@@ -15,6 +15,7 @@ import { OverflowTooltip } from "../../../../components/OverflowTooltip";
 import { useContext } from "react";
 import { CdsContext } from "../../../../CdsProvider";
 import { HOVER } from "../../../../utils/hover";
+import { useTranslation } from "react-i18next";
 /**
  * 파일 업로드 블록 내에서 삽입하기를 통해 렉시컬에 삽입된 파일블록을 표시하는 컴포넌트입니다. (ReadOnly)
  * images/2025-02-05-10-53-19.png
@@ -22,18 +23,19 @@ import { HOVER } from "../../../../utils/hover";
 export function FileDownloadButton({ fileName, fileSize, fileUrl, }) {
     const cdsContext = useContext(CdsContext);
     const theme = useTheme();
+    const { t } = useTranslation();
     const handleDownload = () => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const showFileError = (_a = cdsContext.lexical) === null || _a === void 0 ? void 0 : _a.showFileError;
         try {
             if (!fileUrl) {
-                showFileError === null || showFileError === void 0 ? void 0 : showFileError("download", "다운로드 중 오류가 발생했어요");
+                showFileError === null || showFileError === void 0 ? void 0 : showFileError("download", t("다운로드 중 오류가 발생했어요"));
                 return;
             }
             // fileUrl에 대해 GET 요청을 보냅니다.
             const response = yield fetch(fileUrl, { method: "GET" });
             if (!response.ok) {
-                showFileError === null || showFileError === void 0 ? void 0 : showFileError("download", "파일이 삭제되어 다운로드할 수 없어요.");
+                showFileError === null || showFileError === void 0 ? void 0 : showFileError("download", t("파일이 삭제되어 다운로드할 수 없어요."));
                 return;
             }
             // 요청이 성공하면 응답 데이터를 Blob(파일 데이터)로 변환
@@ -52,7 +54,7 @@ export function FileDownloadButton({ fileName, fileSize, fileUrl, }) {
             URL.revokeObjectURL(blobUrl);
         }
         catch (_b) {
-            showFileError === null || showFileError === void 0 ? void 0 : showFileError("download", "다운로드 중 오류가 발생했어요");
+            showFileError === null || showFileError === void 0 ? void 0 : showFileError("download", t("다운로드 중 오류가 발생했어요"));
         }
     });
     return (_jsxs(ButtonContainer, { onClick: handleDownload, theme: theme, children: [_jsx(IconContainer, { children: getFileIcon(fileName) }), _jsx(FileNameLabel, { children: _jsx(OverflowTooltip, { text: fileName }) }), _jsxs(FileSize, { children: [(fileSize / (1024 * 1024)).toFixed(1), " MB"] })] }));

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -15,6 +15,7 @@ import { ImageResizer } from "./ImageResizer";
 import { css } from "@emotion/react";
 import { RESET_BUTTON } from "../../../../utils/reset";
 import { VISUALLY_HIDDEN } from "../../../../utils/visuallyHidden";
+import { useTranslation } from "react-i18next";
 const imageCache = new Set();
 export const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
 function useSuspenseImage(src) {
@@ -61,6 +62,7 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
     const [selection, setSelection] = useState(null);
     const activeEditorRef = useRef(null);
     const [isLoadError, setIsLoadError] = useState(false);
+    const { t } = useTranslation();
     const $onDelete = useCallback((payload) => {
         const deleteSelection = $getSelection();
         if (isSelected && $isNodeSelection(deleteSelection)) {
@@ -196,7 +198,7 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
                 cursor: pointer;
               `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), buttonProps: {
                         onClick: () => window.open(src, "_blank"),
-                    }, title: "\uD074\uB9AD\uD574\uC11C \uC6D0\uBCF8 \uC774\uBBF8\uC9C0 \uBCF4\uAE30.", addtionalInfoLabel: _jsx("span", { css: VISUALLY_HIDDEN, children: "(\uC0C8 \uCC3D)" }) })) }) }));
+                    }, title: t("클릭해서 원본 이미지 보기."), addtionalInfoLabel: _jsx("span", { css: VISUALLY_HIDDEN, children: t("(새 창)", { context: "렉시컬 이미지 도구" }) }) })) }) }));
     }
     return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, css: css `
               // ImageResizer를 위한 relative 설정입니다.
@@ -208,7 +210,7 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
                                         // maxWidth={maxWidth}
                                         onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: false }))] })) }) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setOpen(true);
-                        }, "aria-label": "\uC774\uBBF8\uC9C0 \uC218\uC815\uD558\uAE30" })] }), _jsx(InsertImageDialog, { open: open, title: "\uC774\uBBF8\uC9C0 \uC218\uC815\uD558\uAE30", onClose: () => setOpen(false), imageProps: {
+                        }, "aria-label": t("이미지 수정하기") })] }), _jsx(InsertImageDialog, { open: open, title: t("이미지 수정하기"), onClose: () => setOpen(false), imageProps: {
                     src,
                     altText,
                 }, onChange: (props) => {

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

@@ -24,10 +24,13 @@ import { $getNodeByKey } from "lexical";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 import { TextInput } from "./TextInput";
 import { SegmentedInput } from "./SegmentedInput";
+import { useTranslation } from "react-i18next";
+import { getTexts } from "../../../../texts";
 export function InputComponent(props) {
     const { answer, isCorrect } = props, settingFormProps = __rest(props, ["answer", "isCorrect"]);
     const { solutions, showCharacterNumber, placeholder, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
+    const { t } = useTranslation();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
@@ -51,9 +54,9 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            return (_jsx(SegmentedInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || getTexts("placeholderEnterHere"), value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || getTexts("placeholderEnterHere"), value: answerInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }
@@ -62,9 +65,9 @@ export function InputComponent(props) {
           display: flex;
           align-items: center;
           gap: 4px;
-        `, children: [_jsx(VirtualInput, { onClick: () => setSettingOpen(true), children: "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78" }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+        `, children: [_jsx(VirtualInput, { onClick: () => setSettingOpen(true), children: t("주관식 입력 칸", { context: "렉시컬 주관식 입력 도구" }) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
-                        }, "aria-label": "\uC785\uB825 \uCE78 \uC124\uC815" })] }), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
+                        }, "aria-label": t("입력 칸 설정", { context: "렉시컬 주관식 입력 도구" }) })] }), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
 const VirtualInput = styled.div(({ theme }) => css `
     box-sizing: border-box;

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import { Input } from "../../../../../components/Input";
+import { getTexts } from "../../../../../texts";
 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: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) }));
+    return (_jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts("exampleEnterHere") })) }));
 }

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

@@ -7,18 +7,20 @@ import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../.
 import { SquareButton } from "../../../../../components/SquareButton";
 import { Tooltip } from "../../../../../components/Tooltip";
 import { TextTypeDropdown } from "./TextTypeDropdown";
+import { Trans, useTranslation } from "react-i18next";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
+    const { t } = useTranslation();
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
             const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
-            return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
+            return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: t("안녕하세요"), fullWidth: true, css: css `
               > div {
                 padding: 4px 12px;
               }
             `, startIcon: _jsx(TextTypeDropdown, { index: index, control: control, disabled: disabled }), endIcon: _jsxs("div", { css: css `
                   display: flex;
                   gap: 4px;
-                `, children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, "aria-label": "\uC0AD\uC81C" })), disabled && (_jsx(Tooltip, { text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }), children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, "aria-label": "\uC815\uB2F5 \uB4F1\uB85D \uBD88\uAC00" }) }))] }) }));
+                `, children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, "aria-label": t("삭제", { context: "스퀘어버튼, 렉시컬 주관식 설정창" }) })), disabled && (_jsx(Tooltip, { text: _jsx(Trans, { i18nKey: "\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0<br/>\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }), children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, "aria-label": t("정답 등록 불가") }) }))] }) }));
         } }));
 }

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

@@ -13,9 +13,13 @@ import { FormSegmentedControl } from "./FormSegmentedControl";
 import { FormPlaceholder } from "./FormPlaceholder";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
+import { Trans, useTranslation } from "react-i18next";
+import { getTexts } from "../../../../../texts";
 export function SettingForm(props) {
     const { solutions, showCharacterNumber, placeholder, nodeKey, onClose, caseSensitive, ignoreWhitespace, } = props;
     const [editor] = useLexicalComposerContext();
+    const { t } = useTranslation();
+    const numCharOptionStr = t("글자 수대로");
     const { control, handleSubmit, watch, trigger } = useForm({
         mode: "all",
         defaultValues: {
@@ -50,19 +54,19 @@ export function SettingForm(props) {
     return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC815\uB2F5" }), fields.map((field, index) => (_jsx(FormSolution, { index: index, control: control, rules: {
+          ` }), t("주관식 입력 칸", { context: "렉시컬 주관식 설정창" })] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("정답", { context: "소제목, 렉시컬 주관식 설정창" }) }), fields.map((field, index) => (_jsx(FormSolution, { index: index, control: control, rules: {
                                             validate: {
                                                 // required 옵션보다 먼저 검증되어야 하는데 priority 옵션이 없어서 validate에서 통합해서 검증합니다.
                                                 enabled: () => index === 0 ||
                                                     !multipleSolutionsDisabled ||
-                                                    "복수 정답이 불가능합니다.",
-                                                required: (value) => value !== "" || "정답을 입력해주세요.",
+                                                    t("복수 정답이 불가능합니다."),
+                                                required: (value) => value !== "" || t("정답을 입력해주세요."),
                                             },
                                         }, onDelete: index !== 0
                                             ? () => {
                                                 remove(index);
                                             }
-                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multipleSolutionsDisabled, onClick: () => {
+                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: t("복수 정답 추가"), disabled: multipleSolutionsDisabled, onClick: () => {
                                     append({
                                         textType: "normal",
                                         value: "",
@@ -73,22 +77,22 @@ export function SettingForm(props) {
             `, children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
                 width: 14px;
                 height: 14px;
-              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, { text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+              ` }), _jsx(Label, { children: t("가능한 정답을 모두 추가해야 원활하게 자동 채점할 수 있어요.") })] })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: [t("입력 칸"), _jsx(Tooltip, { text: _jsx(Trans, { i18nKey: "\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0<br /><strong>{{numCharOptionStr}}</strong> \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74<br />\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4.", value: { numCharOptionStr } }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
                   ` }) })] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
-                                            { value: false, label: "한 칸으로" },
-                                            { value: true, label: "글자 수대로" },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, { text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+                                            { 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 `
                     width: 12px;
                     height: 12px;
-                  ` }) })] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
-                                            { value: true, label: "무시하기" },
-                                            { value: false, label: "포함하기" },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB300\uC18C\uBB38\uC790" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "caseSensitive", items: [
-                                            { value: false, label: "무시하기" },
-                                            { value: true, label: "포함하기" },
-                                        ] })] })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] }));
+                  ` }) })] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: t("띄어쓰기") }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
+                                            { value: true, label: t("무시하기") },
+                                            { value: false, label: t("포함하기") },
+                                        ] })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: t("대소문자") }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "caseSensitive", items: [
+                                            { value: false, label: t("무시하기") },
+                                            { value: true, label: t("포함하기") },
+                                        ] })] })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), type: "submit" })] })] }));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

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

@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import { css, useTheme } from "@emotion/react";
 import { Dropdown, DropdownItem } from "../../../../..";
+import { useTranslation } from "react-i18next";
 export function TextTypeDropdown(props) {
     const theme = useTheme();
     const { index, control, disabled } = props;
-    return (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, { label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+    const { t } = useTranslation();
+    const normalLabel = t("일반 텍스트");
+    const codeLabel = t("코드 텍스트");
+    return (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, { label: value === "normal" ? normalLabel : codeLabel, size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
             ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
             > span {
               font-weight: 700;
@@ -19,7 +23,7 @@ export function TextTypeDropdown(props) {
                     vertical: "top",
                     horizontal: "center",
                 },
-            }, children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
+            }, children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? codeLabel : normalLabel, onClick: () => {
                     onChange(value === "normal" ? "code" : "normal");
                 } }) })) }));
 }

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

@@ -6,6 +6,8 @@ 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 `
           width: 12px;
@@ -28,30 +30,35 @@ function getTypeAndDescription(isSelected, isAnswer, onClick) {
     if (isAnswer === undefined) {
         return {
             type: isSelected ? "primary" : undefined,
-            description: isSelected ? "선택됨" : onClick ? "선택하기" : "",
+            description: isSelected
+                ? i18n.t("선택됨")
+                : onClick
+                    ? i18n.t("선택하기")
+                    : "",
         };
     }
     if (isAnswer) {
         return {
             type: isSelected ? "success" : undefined,
             description: isSelected
-                ? "선택됨, 정답"
+                ? i18n.t("선택됨, 정답", { context: "렉시컬 선택지 하나의 상태" })
                 : onClick
-                    ? "선택하기, 정답"
-                    : "정답",
+                    ? i18n.t("선택하기, 정답", { context: "렉시컬 선택지 하나의 상태" })
+                    : i18n.t("정답", { context: "렉시컬 선택지 하나의 상태" }),
         };
     }
     return {
         type: isSelected ? "danger" : undefined,
         description: isSelected
-            ? "선택됨, 오답"
+            ? i18n.t("선택됨, 오답", { context: "렉시컬 선택지 하나의 상태" })
             : onClick
-                ? "선택하기, 오답"
-                : "오답",
+                ? i18n.t("선택하기, 오답", { context: "렉시컬 선택지 하나의 상태" })
+                : i18n.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 boxRef = useRef(null);
     const handleKeyDown = (e) => {
@@ -71,13 +78,15 @@ export function SelectBoxView(props) {
     };
     useEventListener("keydown", handleKeyDown);
     // text가 있으면 text, 없으면 image의 altText, 없으면 index를 aria-label로 사용
-    const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
+    const ariaText = text ||
+        (image && image.altText) ||
+        t("{{index}}번 선택지", { index, context: "렉시컬 선택지 도구" });
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
       `, ref: boxRef, role: multipleSelectionsEnabled ? "checkbox" : "radio", "aria-checked": isSelected, "aria-label": [ariaText, description].filter(Boolean).join(" "), tabIndex: onClick ? 0 : -1, type: type, index: type ? TYPE_TO_INDEX_ICON(type) : index, image: image, text: text, onClick: onClick, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시
         endIcon: isAnswer &&
-            !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `
+            !isSelected && (_jsx(Tag, { label: t("정답", { context: "태그, 렉시컬 선택지" }), icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `
               span {
                 font-weight: 700;
               }