@team-monolith/cds 1.9.8 → 1.9.10

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/ProblemSelectNode.d.ts

@@ -7,7 +7,7 @@ export interface ImageProps {
 export interface Selection {
     isAnswer: boolean;
     show: {
-        image?: ImageProps;
+        image?: ImageProps | null;
         text: string;
     };
     value: string;
@@ -31,7 +31,7 @@ export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     static getType(): string;
     getSelections(): Selection[];
     getSelected(): string[];
-    setSolutions(selections: Selection[]): void;
+    setSelections(selections: Selection[]): void;
     setSelected(selected: string[]): void;
     static clone(node: ProblemSelectNode): ProblemSelectNode;
     constructor(selections: Selection[], selected: string[], hasMultipleAnswers?: boolean, key?: NodeKey);

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

@@ -19,7 +19,7 @@ export class ProblemSelectNode extends DecoratorNode {
     getSelected() {
         return this.__selected;
     }
-    setSolutions(selections) {
+    setSelections(selections) {
         const self = this.getWritable();
         self.__selections = selections;
     }

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox.d.ts

@@ -3,7 +3,7 @@ export interface SelectBoxProps {
     index: number;
     isSelected?: boolean;
     isAnswer?: boolean;
-    image?: ImageProps;
+    image?: ImageProps | null;
     text: string;
     onClick?: () => void;
     fullWidth?: boolean;

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

@@ -12,7 +12,7 @@ export default function SelectBox(props) {
             ` })) : (index) })), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-              max-width: min(328px, 100%);
+              max-width: 100%;
               width: fit-content;
               border-radius: 6px;
             ` })), text] }), isAnswer && (_jsx(CheckboxCircleFillIcon, { color: theme.color.foreground.success, css: css `

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

@@ -1,11 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
-import { $isProblemSelectNode, } from "./ProblemSelectNode";
+import { $isProblemSelectNode } from "./ProblemSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
-import { useFieldArray, useForm } from "react-hook-form";
 import SelectBox from "./SelectBox";
 import { css } from "@emotion/react";
 import SquareButton from "../../../../components/SquareButton";
@@ -14,46 +24,28 @@ import SettingForm from "./SettingForm";
 import styled from "@emotion/styled";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function SelectComponent(props) {
-    const { selections, selected, hasMultipleAnswers, nodeKey } = props;
+    const { selected, hasMultipleAnswers } = props, settingFormProps = __rest(props, ["selected", "hasMultipleAnswers"]);
+    const { selections, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
-    const { control, handleSubmit } = useForm({
-        mode: "all",
-        defaultValues: {
-            selections,
-            selected,
-        },
-    });
-    const { fields, append, remove, update } = useFieldArray({
-        control,
-        name: "selections",
-        keyName: "uid",
-    });
     const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     if (!isEditable) {
-        if (lexicalCustomConfig.freezeProblemNode) {
-            return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
-                  width: 14px;
-                  height: 14px;
-                ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, fullWidth: true }, index)))] }));
-        }
         return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, onClick: () => {
-                        const isSelected = selected.includes(field.value);
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
+                        if (lexicalCustomConfig.freezeProblemNode)
+                            return;
+                        const isSelected = selected.includes(selection.value);
                         if (isSelected) {
                             editor.update(() => {
                                 const node = $getNodeByKey(nodeKey);
                                 if (!$isProblemSelectNode(node)) {
                                     return;
                                 }
-                                const newSelected = [...selected];
-                                const index = newSelected.indexOf(field.value);
-                                newSelected.splice(index, 1);
-                                node.setSelected(newSelected);
+                                node.setSelected(selected.filter((v) => v !== selection.value));
                             });
                         }
                         else {
@@ -62,9 +54,7 @@ export function SelectComponent(props) {
                                 if (!$isProblemSelectNode(node)) {
                                     return;
                                 }
-                                const newSelected = [...selected];
-                                newSelected.push(field.value);
-                                node.setSelected(newSelected);
+                                node.setSelected([...selected, selection.value]);
                             });
                         }
                     }, fullWidth: true }, index)))] }));
@@ -77,9 +67,9 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: field.isAnswer, image: field.show.image, text: field.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
-                        } })] })), settingOpen && (_jsx(SettingForm, { control: control, handleSubmit: handleSubmit, fields: fields, append: append, remove: remove, update: update, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+                        } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
 const Alert = styled.div(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.d.ts

@@ -1,10 +1,13 @@
-import { ProblemSelectPayload } from "../ProblemSelectNode";
-import { Control, FieldArrayWithId, UseFieldArrayUpdate } from "react-hook-form";
+import { Selection } from "../ProblemSelectNode";
+import { Control, UseFormWatch } from "react-hook-form";
 export interface FormSelectionProps {
     index: number;
-    control: Control<ProblemSelectPayload, any>;
-    field: FieldArrayWithId<ProblemSelectPayload, "selections", "uid">;
-    update: UseFieldArrayUpdate<ProblemSelectPayload, "selections">;
+    control: Control<{
+        selections: Selection[];
+    }, any>;
+    watch: UseFormWatch<{
+        selections: Selection[];
+    }>;
     rules?: any;
     onDelete?: () => void;
 }

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
-import { Controller, } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { css } from "@emotion/react";
 import Input from "../../../../../components/Input";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, } from "../../../../../icons";
@@ -10,53 +10,43 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "./InsertImageDialog";
 export function FormSelection(props) {
-    const { index, control, field, update, rules, onDelete } = props;
+    const { index, control, watch, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: field.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
-                    update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: props }) }));
-                }, deleteImg: field.show.image
-                    ? () => {
-                        update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: undefined }) }));
-                    }
-                    : undefined }), _jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            gap: 4px;
-          ` }, { children: [field.show.image && field.show.image.src && (_jsx("img", { src: field.show.image.src, alt: field.show.image.altText, css: css `
-                height: auto;
-                // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                max-width: min(400px, 100%);
-                width: fit-content;
-                border-radius: 6px;
-              `, draggable: "false" })), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
-                                        ? "activeDanger"
-                                        : inputFocused
-                                            ? "activePrimary"
-                                            : "default", value: value, onChange: onChange, inputProps: {
-                                        onFocus: (_e) => {
-                                            setInputFocused(true);
-                                        },
-                                        onBlur: (_e) => {
-                                            setInputFocused(false);
-                                            // onBlur시에 선택지 미리보기에 반영합니다.
-                                            update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { text: value }) }));
-                                        },
-                                    }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
-                  flex: 1;
-                ` })) })] })), _jsxs("div", Object.assign({ css: css `
-            display: flex;
-            height: 36px;
-            gap: 8px;
-            align-items: center;
-          ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: field.show.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
-                                    setImageOpen(true);
-                                } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
-                                        onChange(!value);
-                                        // 선택지 미리보기에 정답여부를 반영합니다.
-                                        update(index, Object.assign(Object.assign({}, field), { isAnswer: !value }));
-                                    } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: value, size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] })] }));
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          gap: 4px;
+        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(props), deleteButton: Boolean(value) }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
+                    height: auto;
+                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                    max-width: min(400px, 100%);
+                    width: fit-content;
+                    border-radius: 6px;
+                  `, draggable: "false" }))] })) }), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+                                ? "activeDanger"
+                                : inputFocused
+                                    ? "activePrimary"
+                                    : "default", value: value, onChange: onChange, inputProps: {
+                                onFocus: (_e) => {
+                                    setInputFocused(true);
+                                },
+                                onBlur: (_e) => {
+                                    setInputFocused(false);
+                                },
+                            }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
+                flex: 1;
+              ` })) })] })), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          height: 36px;
+          gap: 8px;
+          align-items: center;
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+                            setImageOpen(true);
+                        } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
+                                onChange(!value);
+                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: value, size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageDialog.d.ts

@@ -3,8 +3,8 @@ export interface InsertImageDialogProps {
     title: string;
     open: boolean;
     onClose: () => void;
-    updateImg: (props: ImageProps) => void;
+    updateImg: (props: ImageProps | null) => void;
     /** 전달하면 "이미지 삭제하기" 버튼이 생깁니다. */
-    deleteImg?: () => void;
+    deleteButton?: boolean;
 }
 export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -18,25 +18,30 @@ import Button from "../../../../../components/Button";
 import { CodleDesignSystemContext } from "../../../../../CodleDesignSystemProvider";
 import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
 import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
+import { useForm } from "react-hook-form";
 export function InsertImageDialog(props) {
-    const { title, open, onClose, updateImg, deleteImg } = props;
+    const { title, open, onClose, updateImg, deleteButton } = props;
     const theme = useTheme();
     const [mode, setMode] = useState(null);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
-    const onClick = (props) => {
-        updateImg(props);
-        handleOnClose();
-    };
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
+        defaultValues: { src: "", altText: "" },
+    });
     const handleOnClose = () => {
         setMode(null);
-        setSrc("");
-        setAltText("");
+        reset();
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
+    const onSubmit = (data) => {
+        updateImg(data);
+        handleOnClose();
+    };
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
+            // nested form 구조라서 submit이벤트 전파를 막습니다.
+            e.stopPropagation();
+            handleSubmit(onSubmit)();
+        }, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
               display: flex;
               flex-direction: column;
               gap: 16px;
@@ -52,10 +57,13 @@ export function InsertImageDialog(props) {
                                                     return;
                                                 const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                                 if (uploadByFile) {
-                                                    setSrc(yield uploadByFile(file));
+                                                    setValue("src", yield uploadByFile(file));
                                                     setMode("file");
                                                 }
-                                            }) })] })] }), deleteImg && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: deleteImg })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
+                                            }) })] })] }), deleteButton && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: () => {
+                                        updateImg(null);
+                                        handleOnClose();
+                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageUploadedDialogBody.d.ts

@@ -1,9 +1,8 @@
 import { ImageProps } from "../ProblemSelectNode";
+import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 export interface InsertImageUploadedDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
-    onClick: (props: ImageProps) => void;
+    control: Control<ImageProps, any>;
+    watch: UseFormWatch<ImageProps>;
+    setValue: UseFormSetValue<ImageProps>;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,11 +15,12 @@ import { AlertDialogActions, AlertDialogContent, } from "../../../../../componen
 import Button from "../../../../../components/Button";
 import { RefreshLineIcon } from "../../../../../icons";
 import Input from "../../../../../components/Input";
+import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
+    const { control, watch, setValue } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const isDisabled = src === "";
+    const isDisabled = watch("src") === "";
     return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
                                 var _a;
                                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
@@ -30,11 +31,9 @@ export function InsertImageUploadedDialogBody(props) {
                                     return;
                                 const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                 if (uploadByFile) {
-                                    setSrc(yield uploadByFile(file));
+                                    setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: src, alt: altText })] }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageUriDialogBody.d.ts

@@ -1,9 +1,7 @@
 import { ImageProps } from "../ProblemSelectNode";
+import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
-    onClick: (props: ImageProps) => void;
+    control: Control<ImageProps, any>;
+    watch: UseFormWatch<ImageProps>;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,14 +4,11 @@ import { AlertDialogActions, AlertDialogContent, } from "../../../../../componen
 import Input from "../../../../../components/Input";
 import { LinkIcon } from "../../../../../icons";
 import Button from "../../../../../components/Button";
+import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
-    const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: (e) => {
-                                setSrc(e.target.value);
-                            }, value: src, startIcon: _jsx(LinkIcon, {}) }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+    const { control, watch } = props;
+    const isDisabled = watch("src") === "";
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.d.ts

@@ -1,14 +1,7 @@
-/** @jsxImportSource @emotion/react */
-import { Control, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFieldArrayUpdate, UseFormHandleSubmit } from "react-hook-form";
-import { ProblemSelectPayload } from "../ProblemSelectNode";
+import { Selection } from "../ProblemSelectNode";
 import { NodeKey } from "lexical";
 export interface SettingFormProps {
-    control: Control<ProblemSelectPayload, any>;
-    handleSubmit: UseFormHandleSubmit<ProblemSelectPayload, undefined>;
-    fields: FieldArrayWithId<ProblemSelectPayload, "selections", "uid">[];
-    append: UseFieldArrayAppend<ProblemSelectPayload, "selections">;
-    remove: UseFieldArrayRemove;
-    update: UseFieldArrayUpdate<ProblemSelectPayload, "selections">;
+    selections: Selection[];
     nodeKey: NodeKey;
     onClose: () => void;
 }

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { $isProblemSelectNode, } from "../ProblemSelectNode";
+/** @jsxImportSource @emotion/react */
+import { useFieldArray, useForm, } from "react-hook-form";
+import { $isProblemSelectNode } from "../ProblemSelectNode";
 import { $getNodeByKey } from "lexical";
 import { css } from "@emotion/react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
@@ -11,37 +13,59 @@ import { FormSelection } from "./FormSelection";
 import Tooltip from "../../../../../components/Tooltip";
 import { useState } from "react";
 export default function SettingForm(props) {
-    const { control, handleSubmit, fields, append, remove, update, nodeKey, onClose, } = props;
+    const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
+    const { control, handleSubmit, watch } = useForm({
+        mode: "all",
+        defaultValues: {
+            selections: selections.map((selection) => {
+                var _a;
+                return ({
+                    isAnswer: selection.isAnswer,
+                    show: {
+                        image: (_a = selection.show.image) !== null && _a !== void 0 ? _a : null,
+                        text: selection.show.text,
+                    },
+                });
+            }),
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "selections",
+        keyName: "uid",
+    });
     const onSettingSubmit = (data) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
             if (!$isProblemSelectNode(node)) {
                 return;
             }
-            node.setSolutions(data.selections);
+            node.setSelections(data.selections);
         });
         onClose();
     };
-    function validateDuplicatedSelection(fields, index) {
+    function validateDuplicatedSelection(index) {
+        const selections = watch("selections");
         if (index === 0)
             return true;
-        const duplicatedIndex = fields
+        const duplicatedIndex = selections
             .slice(0, index)
-            .findIndex((prevField) => prevField.show.text === fields[index].show.text);
+            .findIndex((selection) => selection.show.text === selections[index].show.text);
         if (duplicatedIndex < 0)
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
     }
-    const hasMultipleAnswers = fields.filter((field) => field.isAnswer).length > 1;
-    const hasAnswer = fields.some((field) => field.isAnswer);
+    const answersCount = watch("selections").filter((selection) => selection.isAnswer).length;
+    const hasMultipleAnswers = answersCount > 1;
+    const hasAnswer = answersCount > 0;
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), "\uAC1D\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uB2F5\uC548" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, field: field, update: update, rules: {
+          ` }), "\uAC1D\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uB2F5\uC548" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
                                     required: "필수 입력 항목입니다.",
-                                    validate: () => validateDuplicatedSelection(fields, index),
+                                    validate: () => validateDuplicatedSelection(index),
                                 }, onDelete: index !== 0
                                     ? () => {
                                         remove(index);

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -18,6 +18,7 @@ import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
 import { useTheme } from "@emotion/react";
 import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
+import { useForm } from "react-hook-form";
 export function InsertImageDialog(props) {
     const { open, activeEditor, onClose } = props;
     const theme = useTheme();
@@ -25,8 +26,13 @@ export function InsertImageDialog(props) {
     const hasModifier = useRef(false);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
+        defaultValues: { src: "", altText: "" },
+    });
+    const onSubmit = (data) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+        handleOnClose();
+    };
     useEffect(() => {
         hasModifier.current = false;
         const handler = (e) => {
@@ -37,17 +43,12 @@ export function InsertImageDialog(props) {
             document.removeEventListener("keydown", handler);
         };
     }, [activeEditor]);
-    const onClick = (payload) => {
-        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-        handleOnClose();
-    };
     const handleOnClose = () => {
         setMode(null);
-        setSrc("");
-        setAltText("");
+        reset();
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: handleSubmit(onSubmit), disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
                                         var _a;
                                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                                     } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
@@ -57,10 +58,10 @@ export function InsertImageDialog(props) {
                                             return;
                                         const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                         if (uploadByFile) {
-                                            setSrc(yield uploadByFile(file));
+                                            setValue("src", yield uploadByFile(file));
                                             setMode("file");
                                         }
-                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
+                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,9 +1,16 @@
-import { InsertImagePayload } from ".";
+import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 export interface InsertImageUploadedDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
-    onClick: (payload: InsertImagePayload) => void;
+    control: Control<{
+        src: string;
+        altText: string;
+    }, any>;
+    watch: UseFormWatch<{
+        src: string;
+        altText: string;
+    }>;
+    setValue: UseFormSetValue<{
+        src: string;
+        altText: string;
+    }>;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -15,11 +15,12 @@ import { AlertDialogContent, AlertDialogActions, } from "../../../../components/
 import Button from "../../../../components/Button";
 import Input from "../../../../components/Input";
 import { RefreshLineIcon } from "../../../../icons";
+import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
+    const { control, watch, setValue } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const isDisabled = src === "";
+    const isDisabled = watch("src") === "";
     return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
                                 var _a;
                                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
@@ -30,11 +31,9 @@ export function InsertImageUploadedDialogBody(props) {
                                     return;
                                 const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                 if (uploadByFile) {
-                                    setSrc(yield uploadByFile(file));
+                                    setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: src, alt: altText })] }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,9 +1,12 @@
-import { InsertImagePayload } from ".";
+import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
-    onClick: (payload: InsertImagePayload) => void;
+    control: Control<{
+        src: string;
+        altText: string;
+    }, any>;
+    watch: UseFormWatch<{
+        src: string;
+        altText: string;
+    }>;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.js

@@ -4,14 +4,11 @@ import { AlertDialogActions, AlertDialogContent, } from "../../../../components/
 import Input from "../../../../components/Input";
 import { LinkIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
+import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
-    const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: (e) => {
-                                setSrc(e.target.value);
-                            }, value: src, startIcon: _jsx(LinkIcon, {}) }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+    const { control, watch } = props;
+    const isDisabled = watch("src") === "";
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,