@team-monolith/cds 1.8.5 → 1.8.6

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.d.ts

@@ -1,9 +1,9 @@
-import { Answer } from "./ProblemInputNode";
+import { Solution } from "./ProblemInputNode";
 import { NodeKey } from "lexical";
 export declare function InputComponent(props: {
-    answers: Answer[];
+    solutions: Solution[];
     showCharacterCount: boolean;
     placeholder: string;
-    response: string;
+    answer: string;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,179 +1,70 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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 { css, useTheme } from "@emotion/react";
-import { Suspense, useState } from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+import { css } from "@emotion/react";
+import { useState } from "react";
 import Input from "../../../../components/Input";
 import SquareButton from "../../../../components/SquareButton";
-import { AddFillIcon, AlarmWarningFillIcon, InputMethodLineIcon, QuestionFillIcon, Settings3FillIcon, } from "../../../../icons";
+import { Settings3FillIcon } from "../../../../icons";
 import styled from "@emotion/styled";
-import shadows from "../../../../foundation/shadows";
-import Button from "../../../../components/Button";
-import Tooltip from "../../../../components/Tooltip";
-import { FormAnswer, FormCharacterCount, FormPlaceholder } from "./Form";
+import SettingForm from "./SettingForm";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { $isProblemInputNode, } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
 export function InputComponent(props) {
-    const theme = useTheme();
-    const { answers, showCharacterCount, placeholder, response, nodeKey } = props;
+    const { answer } = props, settingFormProps = __rest(props, ["answer"]);
+    const { placeholder, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
-    const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
     const isEditable = useLexicalEditable();
-    const { control, handleSubmit } = useForm({
-        defaultValues: {
-            answers,
-            showCharacterCount,
-            placeholder,
-        },
-    });
-    const { fields, append, remove, update } = useFieldArray({
-        control,
-        name: "answers",
-        keyName: "uid",
-    });
-    const onSettingSubmit = (data) => {
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if (!$isProblemInputNode(node)) {
-                return;
-            }
-            node.setAnswers(data.answers);
-            node.setShowCharacterCount(data.showCharacterCount);
-            node.setPlaceholder(data.placeholder);
-        });
-        setSettingOpen(false);
-    };
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: response, onChange: (e) => {
+        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answer, onChange: (e) => {
                 editor.update(() => {
                     const node = $getNodeByKey(nodeKey);
                     if (!$isProblemInputNode(node)) {
                         return;
                     }
-                    node.setResponse(e.target.value);
+                    node.setAnswer(e.target.value);
                 });
             }, color: "default", css: css `
           width: 300px;
         ` }));
     }
     // 교사 edit view
-    return (_jsxs(Suspense, Object.assign({ fallback: null }, { children: [_jsxs("div", Object.assign({ css: css `
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
           display: flex;
           align-items: center;
           gap: 4px;
-        ` }, { children: [_jsx(Input, { size: "small", placeholder: "주관식 입력 칸", value: "", onChange: () => {
-                            // 수정모드에서는 입력칸 수정을 허용하지 않습니다.
-                        }, color: "default", css: css `
-            width: 300px;
-          ` }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+        ` }, { children: [_jsx(VirtualInput, Object.assign({ onClick: () => setSettingOpen(true) }, { children: "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
-                        } })] })), settingOpen && (_jsxs(SettingForm, Object.assign({ 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) => ({
-                                                field,
-                                                index,
-                                            }))
-                                                .filter(({ field }) => !field.destroyed)
-                                                .map(({ field, index }) => (_jsx(FormAnswer, { index: index, control: control, disabled: index !== 0 && multiAnswerDisabled, onDelete: index !== 0
-                                                    ? () => {
-                                                        if (field.value) {
-                                                            update(index, Object.assign(Object.assign({}, field), { destroyed: true }));
-                                                        }
-                                                        else {
-                                                            remove(index);
-                                                        }
-                                                    }
-                                                    : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multiAnswerDisabled, onClick: () => {
-                                            append({
-                                                textType: "normal",
-                                                value: "",
-                                            });
-                                        } }), _jsxs("div", Object.assign({ css: css `
-                  display: flex;
-                  gap: 4px;
-                ` }, { children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
-                    width: 14px;
-                    height: 14px;
-                  ` }), _jsxs(Label, { children: ["\uB744\uC5B4\uC4F0\uAE30, \uC54C\uD30C\uBCB3\uC758 \uB300\uC18C\uBB38\uC790 \uAD6C\uBD84\uAE4C\uC9C0 \uC77C\uCE58\uD574\uC57C \uC815\uB2F5\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.", _jsx("br", {}), "\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, Object.assign({ text: _jsxs("span", { children: ["\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0", _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), "\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4."] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
-                        width: 12px;
-                        height: 12px;
-                      ` }) }))] }), _jsx(FormCharacterCount, { control: control, setMultiAnswerDisabled: setMultiAnswerDisabled })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ 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 `
-                        width: 12px;
-                        height: 12px;
-                      ` }) }))] }), _jsx(FormPlaceholder, { control: control })] })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: () => {
-                                    setSettingOpen(false);
-                                } }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })))] })));
+                        } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
-const SettingForm = styled.form(({ theme }) => css `
-    display: flex;
-    width: 620px;
-    flex-direction: column;
-    border-radius: 6px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow08};
-  `);
-const Title = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 8px 12px;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
-  `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    border-top: 1px solid ${theme.color.background.neutralAltActive};
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
-  `);
-const Left = styled.div `
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
-  flex: 1;
-`;
-const FormArea = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-const Right = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  width: 240px;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
-`;
-const Label = styled.div(({ theme }) => css `
-    display: flex;
-    gap: 4px;
+const VirtualInput = styled.div(({ theme }) => css `
+    box-sizing: border-box;
+    height: 36px;
+    width: 300px;
+    padding: 8px 16px;
     align-items: center;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+    cursor: pointer;
     color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
     font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
   `);
-const Buttons = styled.div `
-  display: flex;
-  padding: 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-`;

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

@@ -1,6 +1,6 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
-export interface Answer {
+export interface Solution {
     textType: "normal" | "code";
     value: string;
     destroyed?: boolean;
@@ -8,36 +8,37 @@ export interface Answer {
 export interface ProblemInputPayload {
     showCharacterCount: boolean;
     placeholder: string;
-    answers: Answer[];
-    response: string;
+    solutions: Solution[];
+    answer: string;
     key?: NodeKey;
 }
 export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
 /**
- * answers는 Answer타입의 배열로서 정답을 담고 있습니다. (교사용)
- * response는 학생이 입력한 답을 담고 있습니다.(학생용)
+ * solutions는 Solution타입의 배열로서 정답을 담고 있습니다. (교사용)
+ * answer는 학생이 입력한 답을 담고 있습니다.(학생용)
  */
 export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
-    __answers: Answer[];
+    __solutions: Solution[];
     __showCharacterCount: boolean;
     __placeholder: string;
-    __response: string;
+    __answer: string;
+    isInline(): boolean;
     static getType(): string;
-    getAnswers(): Answer[];
+    getSolutions(): Solution[];
     getShowCharacterCount(): boolean;
     getPlaceholder(): string;
-    getResponse(): string;
-    setAnswers(answers: Answer[]): void;
+    getAnswer(): string;
+    setSolutions(solutions: Solution[]): void;
     setShowCharacterCount(showCharacterCount: boolean): void;
     setPlaceholder(placeholder: string): void;
-    setResponse(response: string): void;
+    setAnswer(answer: string): void;
     static clone(node: ProblemInputNode): ProblemInputNode;
-    constructor(showCharacterCount: boolean, placeholder: string, answers: Answer[], response: string, key?: NodeKey);
+    constructor(showCharacterCount: boolean, placeholder: string, solutions: Solution[], answer: string, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemInputNode): ProblemInputNode;
     exportJSON(): SerializedProblemInputNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemInputNode({ showCharacterCount, placeholder, answers, response, key, }: ProblemInputPayload): ProblemInputNode;
+export declare function $createProblemInputNode({ showCharacterCount, placeholder, solutions, answer, key, }: ProblemInputPayload): ProblemInputNode;
 export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -3,15 +3,18 @@ import { $applyNodeReplacement, DecoratorNode, } from "lexical";
 import { addClassNamesToElement } from "@lexical/utils";
 import { InputComponent } from "./InputComponent";
 /**
- * answers는 Answer타입의 배열로서 정답을 담고 있습니다. (교사용)
- * response는 학생이 입력한 답을 담고 있습니다.(학생용)
+ * solutions는 Solution타입의 배열로서 정답을 담고 있습니다. (교사용)
+ * answer는 학생이 입력한 답을 담고 있습니다.(학생용)
  */
 export class ProblemInputNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
     static getType() {
         return "problem-input";
     }
-    getAnswers() {
-        return this.__answers;
+    getSolutions() {
+        return this.__solutions;
     }
     getShowCharacterCount() {
         return this.__showCharacterCount;
@@ -19,12 +22,12 @@ export class ProblemInputNode extends DecoratorNode {
     getPlaceholder() {
         return this.__placeholder;
     }
-    getResponse() {
-        return this.__response;
+    getAnswer() {
+        return this.__answer;
     }
-    setAnswers(answers) {
+    setSolutions(solutions) {
         const self = this.getWritable();
-        self.__answers = answers;
+        self.__solutions = solutions;
     }
     setShowCharacterCount(showCharacterCount) {
         const self = this.getWritable();
@@ -34,25 +37,19 @@ export class ProblemInputNode extends DecoratorNode {
         const self = this.getWritable();
         self.__placeholder = placeholder;
     }
-    setResponse(response) {
+    setAnswer(answer) {
         const self = this.getWritable();
-        self.__response = response;
+        self.__answer = answer;
     }
     static clone(node) {
-        return $createProblemInputNode({
-            showCharacterCount: node.__showCharacterCount,
-            placeholder: node.__placeholder,
-            answers: node.__answers,
-            response: node.__response,
-            key: node.__key,
-        });
+        return new ProblemInputNode(node.__showCharacterCount, node.__placeholder, node.__solutions, node.__answer, node.__key);
     }
-    constructor(showCharacterCount, placeholder, answers, response, key) {
+    constructor(showCharacterCount, placeholder, solutions, answer, key) {
         super(key);
-        this.__answers = answers;
         this.__showCharacterCount = showCharacterCount;
         this.__placeholder = placeholder;
-        this.__response = response;
+        this.__solutions = solutions;
+        this.__answer = answer;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -66,10 +63,10 @@ export class ProblemInputNode extends DecoratorNode {
     static importJSON(serializedNode) {
         const node = $createProblemInputNode({
             key: serializedNode.key,
-            answers: serializedNode.answers,
+            solutions: serializedNode.solutions,
             showCharacterCount: serializedNode.showCharacterCount,
             placeholder: serializedNode.placeholder,
-            response: serializedNode.response,
+            answer: serializedNode.answer,
         });
         return node;
     }
@@ -79,16 +76,16 @@ export class ProblemInputNode extends DecoratorNode {
             type: "problem-input",
             showCharacterCount: this.__showCharacterCount,
             placeholder: this.__placeholder,
-            answers: this.__answers,
-            response: this.__response,
+            solutions: this.__solutions,
+            answer: this.__answer,
         };
     }
     decorate() {
-        return (_jsx(InputComponent, { answers: this.__answers, showCharacterCount: this.__showCharacterCount, placeholder: this.__placeholder, response: this.__response, nodeKey: this.getKey() }));
+        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterCount: this.__showCharacterCount, placeholder: this.__placeholder, answer: this.__answer, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemInputNode({ showCharacterCount, placeholder, answers, response, key, }) {
-    return $applyNodeReplacement(new ProblemInputNode(showCharacterCount, placeholder, answers, response, key));
+export function $createProblemInputNode({ showCharacterCount, placeholder, solutions, answer, key, }) {
+    return $applyNodeReplacement(new ProblemInputNode(showCharacterCount, placeholder, solutions, answer, key));
 }
 export function $isProblemInputNode(node) {
     return node instanceof ProblemInputNode;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/{Form/FormAnswer.d.ts → SettingForm/FormSolution.d.ts}

@@ -6,4 +6,4 @@ export interface FormAnswerProps {
     onDelete?: () => void;
     disabled?: boolean;
 }
-export declare function FormAnswer(props: FormAnswerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FormSolution(props: FormAnswerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/{Form/FormAnswer.js → SettingForm/FormSolution.js}

@@ -8,10 +8,10 @@ import Input from "../../../../../components/Input";
 import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../../../../icons";
 import SquareButton from "../../../../../components/SquareButton";
 import Tooltip from "../../../../../components/Tooltip";
-export function FormAnswer(props) {
+export function FormSolution(props) {
     const { index, control, onDelete, disabled } = props;
     const theme = useTheme();
-    const TextTypeDropdown = (_jsx(Controller, { name: `answers.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+    const TextTypeDropdown = (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
             ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
             > span {
               font-weight: 700;
@@ -28,7 +28,7 @@ export function FormAnswer(props) {
             } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
                     onChange(value === "normal" ? "code" : "normal");
                 } }) }))) }));
-    return (_jsx(Controller, { name: `answers.${index}.value`, control: control, rules: {
+    return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: {
             required: "정답을 입력해주세요.",
         }, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
             > div {

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

@@ -0,0 +1,10 @@
+import { Solution } from "../ProblemInputNode";
+import { NodeKey } from "lexical";
+export interface SettingFormProps {
+    solutions: Solution[];
+    showCharacterCount: boolean;
+    placeholder: string;
+    nodeKey: NodeKey;
+    onClose: () => void;
+}
+export default function SettingForm(props: SettingFormProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import shadows from "../../../../../foundation/shadows";
+import { AddFillIcon, AlarmWarningFillIcon, InputMethodLineIcon, QuestionFillIcon, } from "../../../../../icons";
+import { useFieldArray, useForm, } from "react-hook-form";
+import { $isProblemInputNode, } from "../ProblemInputNode";
+import { FormSolution } from "./FormSolution";
+import Button from "../../../../../components/Button";
+import Tooltip from "../../../../../components/Tooltip";
+import { FormCharacterCount } from "./FormCharacterCount";
+import { FormPlaceholder } from "./FormPlaceholder";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey } from "lexical";
+import { useState } from "react";
+export default function SettingForm(props) {
+    const { solutions, showCharacterCount, placeholder, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    //fixme: multiAnswerDisabled 삭제
+    const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
+    const { control, handleSubmit } = useForm({
+        defaultValues: {
+            solutions,
+            showCharacterCount,
+            placeholder,
+        },
+    });
+    const theme = useTheme();
+    const { fields, append, remove, update } = useFieldArray({
+        control,
+        name: "solutions",
+        keyName: "uid",
+    });
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isProblemInputNode(node)) {
+                return;
+            }
+            node.setSolutions(data.solutions);
+            node.setShowCharacterCount(data.showCharacterCount);
+            node.setPlaceholder(data.placeholder);
+        });
+        onClose();
+    };
+    return (_jsxs(Form, Object.assign({ 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) => ({
+                                        field,
+                                        index,
+                                    }))
+                                        .filter(({ field }) => !field.destroyed)
+                                        .map(({ field, index }) => (_jsx(FormSolution, { index: index, control: control, disabled: index !== 0 && multiAnswerDisabled, onDelete: index !== 0
+                                            ? () => {
+                                                if (field.value) {
+                                                    update(index, Object.assign(Object.assign({}, field), { destroyed: true }));
+                                                }
+                                                else {
+                                                    remove(index);
+                                                }
+                                            }
+                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multiAnswerDisabled, onClick: () => {
+                                    append({
+                                        textType: "normal",
+                                        value: "",
+                                    });
+                                } }), _jsxs("div", Object.assign({ css: css `
+              display: flex;
+              gap: 4px;
+            ` }, { children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
+                width: 14px;
+                height: 14px;
+              ` }), _jsxs(Label, { children: ["\uB744\uC5B4\uC4F0\uAE30, \uC54C\uD30C\uBCB3\uC758 \uB300\uC18C\uBB38\uC790 \uAD6C\uBD84\uAE4C\uC9C0 \uC77C\uCE58\uD574\uC57C \uC815\uB2F5\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.", _jsx("br", {}), "\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, Object.assign({ text: _jsxs("span", { children: ["\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0", _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), "\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4."] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                    width: 12px;
+                    height: 12px;
+                  ` }) }))] }), _jsx(FormCharacterCount, { control: control, setMultiAnswerDisabled: setMultiAnswerDisabled })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ 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 `
+                    width: 12px;
+                    height: 12px;
+                  ` }) }))] }), _jsx(FormPlaceholder, { control: control })] })] })] }), _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" })] })] })));
+}
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
+  `);
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Left = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+  flex: 1;
+`;
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const Right = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  width: 240px;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+`;
+const Label = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/{Form → SettingForm}/index.d.ts

@@ -1,3 +1,4 @@
-export * from "./FormAnswer";
+export * from "./FormSolution";
 export * from "./FormCharacterCount";
 export * from "./FormPlaceholder";
+export { default } from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/{Form → SettingForm}/index.js

@@ -1,3 +1,4 @@
-export * from "./FormAnswer";
+export * from "./FormSolution";
 export * from "./FormCharacterCount";
 export * from "./FormPlaceholder";
+export { default } from "./SettingForm";

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

@@ -71,7 +71,7 @@ function getQuizContextOptions(editor, theme) {
             icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
             keywords: ["short answer", "short answer input", "주관식", "주관식 입력"],
             onSelect: () => editor.dispatchCommand(INSERT_SHORT_ANSWER_COMMAND, {
-                answers: [
+                solutions: [
                     {
                         textType: "normal",
                         value: "",
@@ -79,7 +79,7 @@ function getQuizContextOptions(editor, theme) {
                 ],
                 showCharacterCount: false,
                 placeholder: "",
-                response: "",
+                answer: "",
             }),
         }),
         new ComponentPickerOption("객관식 입력 칸", {

package/package.json

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