@team-monolith/cds 1.8.5 → 1.8.7

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,71 @@
-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 { $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);
-    };
+    const [answerInput, setAnswerInput] = useState(answer);
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: response, onChange: (e) => {
-                editor.update(() => {
-                    const node = $getNodeByKey(nodeKey);
-                    if (!$isProblemInputNode(node)) {
-                        return;
-                    }
-                    node.setResponse(e.target.value);
-                });
-            }, color: "default", css: css `
-          width: 300px;
-        ` }));
+        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), inputProps: {
+                onBlur: (_e) => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isProblemInputNode(node)) {
+                            return;
+                        }
+                        node.setAnswer(answerInput);
+                    });
+                },
+            }, color: "default", fullWidth: true }));
     }
     // 교사 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,43 +1,43 @@
 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;
 }
 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 → SettingForm}/FormCharacterCount.d.ts

@@ -1,8 +1,7 @@
-import { Control } from "react-hook-form";
-import React from "react";
+import { Control, UseFormTrigger } from "react-hook-form";
 import { ProblemInputPayload } from "../ProblemInputNode";
 export interface FormCharacterCountProps {
     control: Control<ProblemInputPayload, any>;
-    setMultiAnswerDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+    trigger: UseFormTrigger<ProblemInputPayload>;
 }
 export declare function FormCharacterCount(props: FormCharacterCountProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../SegmentedControl";
 export function FormCharacterCount(props) {
-    const { control, setMultiAnswerDisabled } = props;
+    const { control, trigger } = props;
     return (_jsx(Controller, { name: "showCharacterCount", control: control, render: ({ field: { value, onChange } }) => {
             return (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value.toString(), onChange: (value) => {
                     onChange(value === "true");
-                    setMultiAnswerDisabled(value === "true");
+                    trigger("solutions");
                 }, fullWidth: true }, { children: [_jsx(SegmentedControlButton, { value: "false", label: "\uD55C \uCE78\uC73C\uB85C" }), _jsx(SegmentedControlButton, { value: "true", label: "\uAE00\uC790 \uC218\uB300\uB85C" })] })));
         } }));
 }

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

@@ -3,7 +3,7 @@ import { ProblemInputPayload } from "../ProblemInputNode";
 export interface FormAnswerProps {
     index: number;
     control: Control<ProblemInputPayload, any>;
+    rules?: any;
     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/SettingForm/FormSolution.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { Controller } from "react-hook-form";
+import Dropdown from "../../../../Dropdown";
+import DropdownItem from "../../../../Dropdown/DropdownItem";
+import Input from "../../../../../components/Input";
+import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../../../../icons";
+import SquareButton from "../../../../../components/SquareButton";
+import Tooltip from "../../../../../components/Tooltip";
+export function FormSolution(props) {
+    const { index, control, rules, onDelete } = props;
+    const theme = useTheme();
+    const TextTypeDropdown = (disabled) => (_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;
+            }
+          `, menuProps: {
+                anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "center",
+                },
+                transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                },
+            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
+                    onChange(value === "normal" ? "code" : "normal");
+                } }) }))) }));
+    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) === "multiAnswerDisabled";
+            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 `
+              > div {
+                padding: 4px 12px;
+              }
+            `, startIcon: TextTypeDropdown(disabled), endIcon: _jsxs("div", Object.assign({ css: css `
+                  display: flex;
+                  gap: 4px;
+                ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete })), disabled && (_jsx(Tooltip, Object.assign({ 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 }) })))] })) }));
+        } }));
+}

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,145 @@
+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";
+export default function SettingForm(props) {
+    const { solutions, showCharacterCount, placeholder, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit, watch, trigger } = useForm({
+        mode: "all",
+        defaultValues: {
+            solutions,
+            showCharacterCount,
+            placeholder,
+        },
+    });
+    const theme = useTheme();
+    const { fields, append, remove } = 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();
+    };
+    const multiAnswerDisabled = watch("showCharacterCount");
+    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) => (_jsx(FormSolution, { index: index, control: control, rules: {
+                                            validate: {
+                                                // required 옵션보다 먼저 검증되어야 하는데 priority 옵션이 없어서 validate에서 통합해서 검증합니다.
+                                                multiAnswerDisabled: () => index === 0 ||
+                                                    !multiAnswerDisabled ||
+                                                    "복수 정답이 불가능합니다.",
+                                                required: (value) => value !== "" || "정답을 입력해주세요.",
+                                            },
+                                        }, 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: 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, trigger: trigger })] }), _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/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -22,7 +22,7 @@ import ReactDOM, { createPortal } from "react-dom";
 import { LexicalNodeMenuPlugin } from "@lexical/react/LexicalNodeMenuPlugin";
 import { useDraggableBlockMenu } from "./useDraggableBlockMenu";
 import { css as cssToClassName } from "@emotion/css";
-import { ComponentPickerMenuList, getBaseOptions, } from "../ComponentPickerMenuPlugin";
+import { ComponentPickerMenuList, getBaseOptions, ComponentDrawerOption, } from "../ComponentPickerMenuPlugin";
 import { useFloatingMenu } from "./useFloatingMenu";
 import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
@@ -115,6 +115,9 @@ export function ComponentAdderPlugin(props) {
         };
     }, [editor, nodeKey, plusOrMenu]);
     const onSelectOption = useCallback((selectedOption, textNodeContainingQuery, closeMenu, matchingString) => {
+        if (selectedOption instanceof ComponentDrawerOption) {
+            return;
+        }
         editor.update(() => {
             selectedOption.onSelect(matchingString);
             setNodeKey(null);
@@ -130,10 +133,13 @@ export function ComponentAdderPlugin(props) {
     });
     const getContextMenuOptions = useContextMenuOptions();
     const filteredOptions = options.filter((option) => {
+        if (!query) {
+            return true;
+        }
         const regex = new RegExp(query, "i");
-        return (option.component ||
-            regex.test(option.title) ||
-            option.keywords.some((keyword) => regex.test(keyword)));
+        return (option.keywords &&
+            (regex.test(option.title) ||
+                option.keywords.some((keyword) => regex.test(keyword))));
     });
     const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
     return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, activeEditor: editor, onClose: () => setImageOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.d.ts

@@ -2,5 +2,5 @@
  * Context Menu (:: 버튼)
  */
 import { LexicalEditor, LexicalNode } from "lexical";
-import { ComponentPickerOption } from "../ComponentPickerMenuPlugin";
-export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => ComponentPickerOption[];
+import { ComponentDrawerOption, ComponentPickerOption } from "../ComponentPickerMenuPlugin";
+export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuList.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
+import { ComponentDrawerOption, ComponentPickerOption } from "./ComponentPickerMenuPlugin";
 export interface ComponentPickerMenuListProps {
-    options: ComponentPickerOption[];
+    options: (ComponentPickerOption | ComponentDrawerOption)[];
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: ComponentPickerOption) => void;
     setHighlightedIndex: (index: number) => void;

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
+import { ComponentDrawerOption, } from "./ComponentPickerMenuPlugin";
 import { ComponentPickerMenuItem } from "./ComponentPickerMenuItem";
 import React from "react";
 export function ComponentPickerMenuList(props) {
     const { options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex, } = props;
     return (_jsx(Container, { children: _jsx(ListContainer, { children: options.map((option, i) => {
-                if ("component" in option) {
+                if (option instanceof ComponentDrawerOption) {
                     return (_jsx(React.Fragment, { children: option.component }, option.key));
                 }
                 return (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.d.ts

@@ -10,8 +10,13 @@ import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { LexicalEditor } from "lexical";
 import { ReactElement } from "react";
 import { Theme } from "@emotion/react";
+export declare class ComponentDrawerOption extends MenuOption {
+    title: string;
+    component: ReactElement;
+    keywords?: Array<string>;
+    constructor(title: string, component: ReactElement, keywords?: Array<string>);
+}
 export declare class ComponentPickerOption extends MenuOption {
-    component?: ReactElement;
     title: string;
     icon?: ReactElement;
     iconContainerClassName?: string;
@@ -24,9 +29,7 @@ export declare class ComponentPickerOption extends MenuOption {
         keywords?: Array<string>;
         keyboardShortcut?: string;
         onSelect: (queryString: string) => void;
-    } | {
-        component: ReactElement;
     });
 }
-export declare function getBaseOptions(editor: LexicalEditor, theme: Theme, setImageOpen: (open: boolean) => void): ComponentPickerOption[];
+export declare function getBaseOptions(editor: LexicalEditor, theme: Theme, setImageOpen: (open: boolean) => void): (ComponentPickerOption | ComponentDrawerOption)[];
 export declare function ComponentPickerMenuPlugin(): JSX.Element;

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

@@ -24,20 +24,21 @@ import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
-import { INSERT_SHORT_ANSWER_COMMAND } from "../ProblemInputPlugin";
+import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
+export class ComponentDrawerOption extends MenuOption {
+    constructor(title, component, keywords) {
+        super(title);
+        this.title = title;
+        this.component = component;
+        this.keywords = keywords;
+    }
+}
 export class ComponentPickerOption extends MenuOption {
     constructor(title, options) {
         super(title);
-        if ("component" in options) {
-            this.title = title;
-            this.component = options.component;
-            this.keywords = [];
-            this.onSelect = () => { };
-            return;
-        }
         this.title = title;
         this.keywords = options.keywords || [];
         this.icon = options.icon;
@@ -69,9 +70,9 @@ function getQuizContextOptions(editor, theme) {
     return [
         new ComponentPickerOption("주관식 입력 칸", {
             icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
-            keywords: ["short answer", "short answer input", "주관식", "주관식 입력"],
-            onSelect: () => editor.dispatchCommand(INSERT_SHORT_ANSWER_COMMAND, {
-                answers: [
+            keywords: ["problem input", "주관식 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_PROBLEM_INPUT_COMMAND, {
+                solutions: [
                     {
                         textType: "normal",
                         value: "",
@@ -79,29 +80,22 @@ function getQuizContextOptions(editor, theme) {
                 ],
                 showCharacterCount: false,
                 placeholder: "",
-                response: "",
+                answer: "",
             }),
         }),
         new ComponentPickerOption("객관식 입력 칸", {
             icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
-            keywords: [
-                "multiple select",
-                "multiple select input",
-                "객관식",
-                "객관식 입력",
-            ],
+            keywords: ["problem select", "객관식 입력"],
             onSelect: () => {
                 // TODO: 객관식 입력 칸 추가
             },
         }),
-        new ComponentPickerOption("메뉴구분선", {
-            component: (_jsx("div", { css: css `
+        new ComponentDrawerOption("메뉴구분선", (_jsx("div", { css: css `
             width: 100%;
             height: 1px;
             background: ${theme.color.background.neutralAltActive};
             margin: 4px 0;
-          ` })),
-        }),
+          ` }))),
     ];
 }
 export function getBaseOptions(editor, theme, setImageOpen) {
@@ -211,11 +205,15 @@ export function ComponentPickerMenuPlugin() {
         const regex = new RegExp(queryString, "i");
         return [
             ...getDynamicOptions(editor, queryString),
-            ...baseOptions.filter((option) => regex.test(option.title) ||
-                option.keywords.some((keyword) => regex.test(keyword))),
+            ...baseOptions.filter((option) => option.keywords &&
+                (regex.test(option.title) ||
+                    option.keywords.some((keyword) => regex.test(keyword)))),
         ];
     }, [editor, queryString, setOpen]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
+        if (selectedOption instanceof ComponentDrawerOption) {
+            return;
+        }
         editor.update(() => {
             nodeToRemove === null || nodeToRemove === void 0 ? void 0 : nodeToRemove.remove();
             selectedOption.onSelect(matchingString);

package/dist/patterns/LexicalEditor/plugins/ProblemInputPlugin/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { LexicalCommand } from "lexical";
 import { ProblemInputPayload } from "../../nodes/ProblemInputNode";
-export declare const INSERT_SHORT_ANSWER_COMMAND: LexicalCommand<ProblemInputPayload>;
+export declare const INSERT_PROBLEM_INPUT_COMMAND: LexicalCommand<ProblemInputPayload>;
 export default function ProblemInputPlugin(): JSX.Element | null;

package/dist/patterns/LexicalEditor/plugins/ProblemInputPlugin/index.js

@@ -1,19 +1,18 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection, COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
 import { useEffect } from "react";
 import { $createProblemInputNode, ProblemInputNode, } from "../../nodes/ProblemInputNode";
-export const INSERT_SHORT_ANSWER_COMMAND = createCommand("INSERT_SHORT_ANSWER_COMMAND");
+export const INSERT_PROBLEM_INPUT_COMMAND = createCommand("INSERT_PROBLEM_INPUT_COMMAND");
 export default function ProblemInputPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([ProblemInputNode])) {
             throw new Error("ProblemInputNode: ProblemInputNode not registered on editor");
         }
-        editor.registerCommand(INSERT_SHORT_ANSWER_COMMAND, (payload) => {
-            var _a;
+        editor.registerCommand(INSERT_PROBLEM_INPUT_COMMAND, (payload) => {
             const problemInputNode = $createProblemInputNode(payload);
-            const currentNode = (_a = $getSelection()) === null || _a === void 0 ? void 0 : _a.getNodes()[0];
-            currentNode === null || currentNode === void 0 ? void 0 : currentNode.replace(problemInputNode);
+            $insertNodeToNearestRoot(problemInputNode);
             return true;
         }, COMMAND_PRIORITY_EDITOR);
     }, [editor]);

package/dist/patterns/LexicalEditor/theme.js

@@ -249,8 +249,9 @@ export function getTheme(theme) {
         problemInput: css `
       display: flex;
       flex-direction: column;
-      flex: 1; 
+      flex: 1;
       gap: 4px;
+      margin-bottom: 8px;
     `,
     };
 }

package/package.json

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

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

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import { Controller } from "react-hook-form";
-import Dropdown from "../../../../Dropdown";
-import DropdownItem from "../../../../Dropdown/DropdownItem";
-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) {
-    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 `
-            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
-            > span {
-              font-weight: 700;
-            }
-          `, menuProps: {
-                anchorOrigin: {
-                    vertical: "bottom",
-                    horizontal: "center",
-                },
-                transformOrigin: {
-                    vertical: "top",
-                    horizontal: "center",
-                },
-            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
-                    onChange(value === "normal" ? "code" : "normal");
-                } }) }))) }));
-    return (_jsx(Controller, { name: `answers.${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 {
-              padding: 4px 12px;
-            }
-          `, startIcon: TextTypeDropdown, endIcon: _jsxs("div", Object.assign({ css: css `
-                display: flex;
-                gap: 4px;
-              ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete })), disabled && (_jsx(Tooltip, Object.assign({ 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 }) })))] })) })) }));
-}