@team-monolith/cds 1.54.2 → 1.55.1

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -18,6 +18,7 @@ import { LayoutItemNode } from "./nodes/LayoutItemNode";
 import _ from "lodash";
 import { SheetSelectNode } from "./nodes/SheetSelectNode";
 import { SheetInputNode } from "./nodes/SheetInputNode";
+import { SelfEvaluationNode } from "./nodes/SelfEvaluationNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -80,6 +81,7 @@ export function LexicalEditor(props) {
             LayoutItemNode,
             SheetSelectNode,
             SheetInputNode,
+            SelfEvaluationNode,
             {
                 replace: QuoteNode,
                 with: (_node) => {

package/dist/patterns/LexicalEditor/Plugins.js

@@ -32,6 +32,7 @@ import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 import { LayoutPlugin } from "./plugins/LayoutPlugin";
 import SheetSelectPlugin from "./plugins/SheetSelectPlugin";
 import SheetInputPlugin from "./plugins/SheetInputPlugin";
+import SelfEvaluationPlugin from "./plugins/SelfEvaluationPlugin";
 export default function Plugins(props) {
     const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, } = props;
     const isEditable = useLexicalEditable();
@@ -46,7 +47,7 @@ export default function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/Evaluation.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** 데이터를 받아 자기평가 항목과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export declare function Evaluation(props: {
+    className?: string;
+    icons: {
+        onIcon: React.ReactNode;
+        offIcon: React.ReactNode;
+    }[];
+    labels: string[];
+    descriptions: string[];
+    selectedLabelIndexes: (number | null)[];
+    /** 블럭을 클릭했을 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+    /** 전달하지 않으면 ToggleButtonGroup 호버, 클릭 동작이 없습니다. (pointer-events: none) */
+    onChange?: (selectedLabelIndexes: (number | null)[]) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { ToggleButtonGroup } from "../../../../../ToggleButtonGroup";
+const TOGGLE_BUTTON_GROUP_WIDTH = 320;
+/** 데이터를 받아 자기평가 항목과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export function Evaluation(props) {
+    const { className, icons, labels, descriptions, selectedLabelIndexes, onClick, onChange, } = props;
+    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Header, { children: _jsx(LabelArea, { children: labels.map((label, index) => (_jsx(Label, { children: label }, index))) }) }), descriptions.map((description, index) => {
+                var _a;
+                return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Description, { children: description }), _jsx(StyledToggleButtonGroup, { css: !onChange &&
+                                css `
+                pointer-events: none;
+              `, data: labels.map((label, index) => (Object.assign({ label }, icons[index]))), activeIndex: (_a = selectedLabelIndexes[index]) !== null && _a !== void 0 ? _a : null, setActiveIndex: (activeIndex) => {
+                                if (onChange) {
+                                    const newSelectedLabelIndexes = [...selectedLabelIndexes];
+                                    newSelectedLabelIndexes[index] = activeIndex;
+                                    onChange(newSelectedLabelIndexes);
+                                }
+                            } })] }, index));
+            })] })));
+}
+const Container = styled.div(({ onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  `);
+const Header = styled.div(({ theme }) => css `
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+    display: flex;
+    padding: 8px 0px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+  `);
+const LabelArea = styled.div `
+  display: flex;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+const Label = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: center;
+    /* Default/Label/12px-Md */
+    font-family: Pretendard;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 0px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Description = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 8px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Paragraph/16px-Rg */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  `);
+const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  flex: none;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+`;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormDescription.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import { Control } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
+/** 평가 항목을 설정하는 Form입니다. */
+export declare function FormDescription(props: {
+    index: number;
+    control: Control<SettingFormData, any>;
+    rules: any;
+    onDelete?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useController } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { useState } from "react";
+import { DeleteBinLineIcon, ErrorWarningFillIcon, Input, SquareButton, } from "../../../../../../..";
+/** 평가 항목을 설정하는 Form입니다. */
+export function FormDescription(props) {
+    const { control, index, rules, onDelete } = props;
+    const [inputFocused, setInputFocused] = useState(false);
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `descriptions.${index}.text`,
+        rules,
+    });
+    return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Input, { size: "small", color: invalid ? "activeDanger" : inputFocused ? "activePrimary" : "default", value: value, onChange: (e) => onChange(e.target.value), inputProps: {
+                    onFocus: () => {
+                        setInputFocused(true);
+                    },
+                    onBlur: () => {
+                        setInputFocused(false);
+                    },
+                }, placeholder: `${index + 1}번 평가 항목`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }));
+}
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);

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

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 아이콘, 레이블을 설정하는 Form입니다. */
+export declare function FormIconAndLabel(props: {
+    control: Control<SettingFormData, any>;
+    labelsLength: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { css, useTheme } from "@emotion/react";
+import { ICON_DATA, ICON_TYPES } from "../../../../iconData";
+import styled from "@emotion/styled";
+import { Dropdown, DropdownItem } from "../../../../../../../Dropdown";
+import { FormLabel } from "./FormLabel";
+import { ArrowDownSFillIcon } from "../../../../../../../..";
+/** 아이콘, 레이블을 설정하는 Form입니다. */
+export function FormIconAndLabel(props) {
+    const { control, labelsLength } = props;
+    const theme = useTheme();
+    const iconDataMap = ICON_DATA(theme);
+    return (_jsx(Controller, { control: control, name: "iconType", render: ({ field: { value, onChange } }) => {
+            const { startIcon, title, icons } = iconDataMap[value];
+            return (_jsxs(_Fragment, { children: [_jsx(Dropdown, Object.assign({ label: "아이콘: " + title, size: "small", color: "grey", closeOnItemClick: true, bold: true, startIcon: startIcon, endIcon: _jsx(ArrowDownSFillIcon, {}), menuProps: {
+                            menuCss: css `
+                  width: 216px;
+                `,
+                            anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "center",
+                            },
+                            transformOrigin: {
+                                vertical: "top",
+                                horizontal: "center",
+                            },
+                        } }, { children: ICON_TYPES.map((type, index) => {
+                            const { title, startIcon } = iconDataMap[type];
+                            return (_jsx(DropdownItem, { index: index, label: title, preserveIconColor: true, startIcon: startIcon, onClick: () => {
+                                    onChange(type);
+                                } }, index));
+                        }) })), Array.from({ length: labelsLength }).map((_, index) => (_jsxs(LabelLine, { children: [_jsx(Icon, { children: icons[index].onIcon }), _jsx(FormLabel, { control: control, index: index, rules: {
+                                    required: "필수 입력 항목입니다.",
+                                    maxLength: 12,
+                                } })] }, index)))] }));
+        } }));
+}
+const LabelLine = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+`;
+const Icon = styled.div(({ theme }) => css `
+    display: flex;
+    min-width: 36px;
+    min-height: 36px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    border-radius: 8px;
+    border: 0.5px solid ${theme.color.background.neutralAltActive};
+  `);

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

@@ -0,0 +1,8 @@
+import { Control, RegisterOptions } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 레이블을 설정하는 Form입니다. */
+export declare function FormLabel(props: {
+    control: Control<SettingFormData, any>;
+    index: number;
+    rules?: Omit<RegisterOptions<SettingFormData, `labels.${number}`>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { useState } from "react";
+import { ErrorWarningFillIcon, Input } from "../../../../../../../..";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+/** 레이블을 설정하는 Form입니다. */
+export function FormLabel(props) {
+    const { control, index, rules } = props;
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsx(Controller, { control: control, name: `labels.${index}`, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+                ? "activeDanger"
+                : inputFocused
+                    ? "activePrimary"
+                    : "default", value: value, endIcon: (rules === null || rules === void 0 ? void 0 : rules.maxLength) && (_jsx(Counter, Object.assign({ error: Boolean(error) }, { children: value.length + "/" + rules.maxLength }))), onChange: (e) => onChange(e.target.value), inputProps: {
+                onFocus: () => {
+                    setInputFocused(true);
+                },
+                onBlur: () => {
+                    setInputFocused(false);
+                },
+            }, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true })) }));
+}
+const Counter = styled.span(({ theme, error }) => css `
+    color: ${error
+    ? theme.color.foreground.dangerActive
+    : theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 142.857% */
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/index.d.ts

@@ -0,0 +1 @@
+export * from "./FormIconAndLabel";

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

@@ -0,0 +1 @@
+export * from "./FormIconAndLabel";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { IconType } from "../../../SelfEvaluationNode";
+export interface Description {
+    text: string;
+}
+export interface SettingFormData {
+    iconType: IconType;
+    labels: string[];
+    descriptions: Description[];
+}
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    className?: string;
+    iconType: IconType;
+    labels: string[];
+    descriptions: string[];
+    nodeKey: NodeKey;
+    onClose: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSelfEvaluationNode } from "../../../SelfEvaluationNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useFieldArray, useForm } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { AddFillIcon, Button, EmojiStickerLineIcon, shadows, } from "../../../../../../..";
+import { FormIconAndLabel } from "./FormIconAndLabel";
+import { FormDescription } from "./FormDescription";
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { className, iconType, labels, descriptions, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            iconType,
+            labels,
+            descriptions: descriptions.map((text) => ({ text })),
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "descriptions",
+        keyName: "uid",
+    });
+    const onSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSelfEvaluationNode(node)) {
+                return;
+            }
+            node.setIconType(data.iconType);
+            node.setLabels(data.labels);
+            node.setDescriptions(data.descriptions.map((description) => description.text));
+        });
+        onClose();
+    };
+    return (_jsxs(Form, Object.assign({ className: className, onSubmit: handleSubmit(onSubmit) }, { children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), "3\uB2E8\uACC4 \uD3C9\uAC00"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: "\uD3C9\uAC00 \uD56D\uBAA9" }), fields.map((field, index) => (_jsx(FormDescription, { index: index, control: control, rules: {
+                                    required: "필수 입력 항목입니다.",
+                                }, onDelete: index !== 0
+                                    ? () => {
+                                        remove(index);
+                                    }
+                                    : undefined }, field.uid))), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uD3C9\uAC00 \uD56D\uBAA9 \uCD94\uAC00", onClick: () => {
+                                    append({ text: "평가 항목을 입력하세요." });
+                                } })] }), _jsxs(Right, { children: [_jsx(Label, { children: "\uC544\uC774\uCF58, \uB808\uC774\uBE14" }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _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", bold: true, type: "submit" })] })] })));
+}
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    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 `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+`;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+`;
+const Label = styled.div(({ theme }) => css `
+    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/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/index.d.ts

@@ -0,0 +1 @@
+export * from "./SettingForm";

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

@@ -0,0 +1 @@
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Evaluation";
+export * from "./SettingForm";

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

@@ -0,0 +1,2 @@
+export * from "./Evaluation";
+export * from "./SettingForm";

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

@@ -0,0 +1,11 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { IconType } from "../SelfEvaluationNode";
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export declare function EvaluationComponent(props: {
+    iconType: IconType;
+    labels: string[];
+    descriptions: string[];
+    selectedLabelIndexes: (number | null)[];
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSelfEvaluationNode } from "../SelfEvaluationNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useContext, useState } from "react";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { LexicalCustomConfigContext } from "../../../LexicalCustomConfigContext";
+import { Evaluation, SettingForm } from "./Evaluation";
+import { ICON_DATA } from "../iconData";
+import { css, useTheme } from "@emotion/react";
+import SquareButton from "../../../../../components/SquareButton";
+import { Settings3FillIcon } from "../../../../../icons";
+const EVALUATION_EDIT_WIDTH = 620;
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export function EvaluationComponent(props) {
+    const { iconType, labels, descriptions, selectedLabelIndexes, nodeKey } = props;
+    const theme = useTheme();
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    const [settingOpen, setSettingOpen] = useState(false);
+    const { icons } = ICON_DATA(theme)[iconType];
+    // view
+    if (!isEditable) {
+        return (_jsx(Evaluation, { icons: icons, labels: labels, descriptions: descriptions, selectedLabelIndexes: selectedLabelIndexes, onChange: freezeProblemNode
+                ? undefined
+                : (indexes) => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isSelfEvaluationNode(node)) {
+                            return;
+                        }
+                        node.setSelectedLabelIndexes(indexes);
+                    });
+                } }));
+    }
+    // edit
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          gap: 4px;
+        ` }, { children: [_jsx(Evaluation, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
+          `, icons: icons, labels: labels, descriptions: descriptions, selectedLabelIndexes: selectedLabelIndexes, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setSettingOpen((open) => !open);
+                        } })] })), settingOpen && (_jsx(SettingForm, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
+          `, iconType: iconType, labels: labels, descriptions: descriptions, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+}

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/index.d.ts

@@ -0,0 +1 @@
+export * from "./EvaluationComponent";

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

@@ -0,0 +1 @@
+export * from "./EvaluationComponent";

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

@@ -0,0 +1,43 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export type IconType = "emoji" | "ascendingNumber" | "descendingNumber";
+export interface SelfEvaluationPayload {
+    /** 아이콘 프리셋 타입 */
+    iconType: IconType;
+    /** 자기평가 레이블 */
+    labels: string[];
+    /** 자기평가 항목들 */
+    descriptions: string[];
+    /** 선택된 레이블 인덱스 */
+    selectedLabelIndexes: (number | null)[];
+    key?: NodeKey;
+}
+export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, SerializedLexicalNode>;
+/** 3단계 평가 입력칸을 나타내는 노드입니다.
+ * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
+ */
+export declare class SelfEvaluationNode extends DecoratorNode<ReactNode> {
+    __iconType: IconType;
+    __labels: string[];
+    __descriptions: string[];
+    __selectedLabelIndexes: (number | null)[];
+    isInline(): boolean;
+    static getType(): string;
+    getIconType(): IconType;
+    getLabels(): string[];
+    getDescriptions(): string[];
+    getSelectedLabelIndexes(): (number | null)[];
+    setIconType(iconType: IconType): void;
+    setLabels(labels: string[]): void;
+    setDescriptions(descriptions: string[]): void;
+    setSelectedLabelIndexes(selectedLabelIndexes: (number | null)[]): void;
+    static clone(node: SelfEvaluationNode): SelfEvaluationNode;
+    constructor(iconType: IconType, labels: string[], descriptions: string[], selectedLabelIndexes: (number | null)[], key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedSelfEvaluationNode): SelfEvaluationNode;
+    exportJSON(): SerializedSelfEvaluationNode;
+    decorate(): ReactNode;
+}
+export declare function $createSelfEvaluationNode(payload: SelfEvaluationPayload): SelfEvaluationNode;
+export declare function $isSelfEvaluationNode(node: LexicalNode | null | undefined): node is SelfEvaluationNode;

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { EvaluationComponent } from "./EvaluationComponent";
+/** 3단계 평가 입력칸을 나타내는 노드입니다.
+ * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
+ */
+export class SelfEvaluationNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
+    static getType() {
+        return "self-evaluation";
+    }
+    getIconType() {
+        return this.__iconType;
+    }
+    getLabels() {
+        return this.__labels;
+    }
+    getDescriptions() {
+        return this.__descriptions;
+    }
+    getSelectedLabelIndexes() {
+        return this.__selectedLabelIndexes;
+    }
+    setIconType(iconType) {
+        const self = this.getWritable();
+        self.__iconType = iconType;
+    }
+    setLabels(labels) {
+        const self = this.getWritable();
+        self.__labels = labels;
+    }
+    setDescriptions(descriptions) {
+        const self = this.getWritable();
+        self.__descriptions = descriptions;
+    }
+    setSelectedLabelIndexes(selectedLabelIndexes) {
+        const self = this.getWritable();
+        self.__selectedLabelIndexes = selectedLabelIndexes;
+    }
+    static clone(node) {
+        return new SelfEvaluationNode(node.__iconType, node.__labels, node.__descriptions, node.__selectedLabelIndexes);
+    }
+    constructor(iconType, labels, descriptions, selectedLabelIndexes, key) {
+        super(key);
+        this.__iconType = iconType;
+        this.__labels = labels;
+        this.__descriptions = descriptions;
+        this.__selectedLabelIndexes = selectedLabelIndexes;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.selfEvaluation);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        return $createSelfEvaluationNode({
+            key: serializedNode.key,
+            iconType: serializedNode.iconType,
+            labels: serializedNode.labels,
+            descriptions: serializedNode.descriptions,
+            selectedLabelIndexes: serializedNode.selectedLabelIndexes,
+        });
+    }
+    exportJSON() {
+        return {
+            type: "self-evaluation",
+            version: 1,
+            iconType: this.__iconType,
+            labels: this.__labels,
+            descriptions: this.__descriptions,
+            selectedLabelIndexes: this.__selectedLabelIndexes,
+        };
+    }
+    decorate() {
+        return (_jsx(EvaluationComponent, { iconType: this.__iconType, labels: this.__labels, descriptions: this.__descriptions, selectedLabelIndexes: this.__selectedLabelIndexes, nodeKey: this.getKey() }));
+    }
+}
+export function $createSelfEvaluationNode(payload) {
+    const { iconType, labels, descriptions, selectedLabelIndexes, key } = payload;
+    return $applyNodeReplacement(new SelfEvaluationNode(iconType, labels, descriptions, selectedLabelIndexes, key));
+}
+export function $isSelfEvaluationNode(node) {
+    return node instanceof SelfEvaluationNode;
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { IconType } from "./SelfEvaluationNode";
+import { Theme } from "@emotion/react";
+interface IconData {
+    startIcon: React.ReactNode;
+    title: string;
+    icons: {
+        onIcon: React.ReactNode;
+        offIcon: React.ReactNode;
+    }[];
+}
+export declare const ICON_TYPES: IconType[];
+export declare const ICON_DATA: (theme: Theme) => Record<IconType, IconData>;
+export {};

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CustomEmoGoodColorIcon, CustomEmoGoodIcon, CustomEmoGreatColorIcon, CustomEmoGreatIcon, CustomEmoNeutralColorIcon, CustomEmoNeutralIcon, } from "../../../../icons/Custom";
+import { Number1Icon, Number2Icon, Number3Icon } from "../../../../icons";
+export const ICON_TYPES = [
+    "emoji",
+    "ascendingNumber",
+    "descendingNumber",
+];
+export const ICON_DATA = (theme) => ({
+    emoji: {
+        startIcon: _jsx(CustomEmoGreatColorIcon, {}),
+        title: "이모지",
+        icons: [
+            {
+                onIcon: _jsx(CustomEmoGreatColorIcon, {}),
+                offIcon: _jsx(CustomEmoGreatIcon, {}),
+            },
+            { onIcon: _jsx(CustomEmoGoodColorIcon, {}), offIcon: _jsx(CustomEmoGoodIcon, {}) },
+            {
+                onIcon: _jsx(CustomEmoNeutralColorIcon, {}),
+                offIcon: _jsx(CustomEmoNeutralIcon, {}),
+            },
+        ],
+    },
+    ascendingNumber: {
+        startIcon: _jsx(Number1Icon, {}),
+        title: "숫자, 1-2-3",
+        icons: [
+            {
+                onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number1Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number2Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number2Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number3Icon, {}),
+            },
+        ],
+    },
+    descendingNumber: {
+        startIcon: _jsx(Number3Icon, {}),
+        title: "숫자, 3-2-1",
+        icons: [
+            {
+                onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number3Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number2Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number2Icon, {}),
+            },
+            {
+                onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
+                offIcon: _jsx(Number1Icon, {}),
+            },
+        ],
+    },
+});

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

@@ -0,0 +1 @@
+export * from "./SelfEvaluationNode";

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

@@ -0,0 +1 @@
+export * from "./SelfEvaluationNode";

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

@@ -17,6 +17,7 @@ import { $isProblemInputNode } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 import { $isSheetInputNode } from "../../nodes/SheetInputNode";
 import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
+import { $isSelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
 function getParagraphContextMenuOptions(editor, node, setOpen) {
     return [
         new ComponentPickerOption("본문", {
@@ -221,6 +222,17 @@ function getSheetSelectContextMenuOptions(node) {
         }),
     ];
 }
+function getSelfEvaluationContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
 function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption("회색", {
@@ -310,6 +322,9 @@ export function useContextMenuOptions(props) {
         else if ($isSheetSelectNode(node)) {
             return getSheetSelectContextMenuOptions(node);
         }
+        else if ($isSelfEvaluationNode(node)) {
+            return getSelfEvaluationContextMenuOptions(node);
+        }
         else if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node, setImageOpen);
         }

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

@@ -21,7 +21,7 @@ import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
-import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
@@ -29,6 +29,7 @@ import { INSERT_PROBLEM_SELECT_COMMAND } from "../ProblemSelectPlugin";
 import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin";
 import { INSERT_SHEET_SELECT_COMMAND } from "../SheetSelectPlugin";
 import { INSERT_SHEET_INPUT_COMMAND } from "../SheetInputPlugin";
+import { INSERT_SELF_EVALUATION_COMMAND } from "../SelfEvaluationPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -88,6 +89,16 @@ function getSheetContextOptions(editor, theme) {
                 allowMultipleAnswers: false,
             }),
         }),
+        new ComponentPickerOption("3단계 평가 입력 칸", {
+            icon: _jsx(EmojiStickerLineIcon, { color: theme.color.foreground.primary }),
+            keywords: ["self evaluation", "3단계 평가 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_SELF_EVALUATION_COMMAND, {
+                iconType: "emoji",
+                labels: ["아주 잘했어요!", "보통이에요.", "잘 모르겠어요."],
+                descriptions: ["평가 항목을 입력하세요."],
+                selectedLabelIndexes: [null],
+            }),
+        }),
         new ComponentPickerOption("단답형 입력 칸", {
             icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
             keywords: ["sheet short input", "단답형 입력"],

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LexicalCommand } from "lexical";
+import { SelfEvaluationPayload } from "../../nodes/SelfEvaluationNode";
+export declare const INSERT_SELF_EVALUATION_COMMAND: LexicalCommand<SelfEvaluationPayload>;
+export default function SelfEvaluationPlugin(): JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createSelfEvaluationNode, SelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
+export const INSERT_SELF_EVALUATION_COMMAND = createCommand("INSERT_SELF_EVALUATION_COMMAND");
+export default function SelfEvaluationPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([SelfEvaluationNode])) {
+            throw new Error("SelfEvaluationNode: SelfEvaluationNode not registered on editor");
+        }
+        editor.registerCommand(INSERT_SELF_EVALUATION_COMMAND, (payload) => {
+            const selfEvaluationNode = $createSelfEvaluationNode(payload);
+            $insertNodeToNearestRoot(selfEvaluationNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/dist/patterns/LexicalEditor/theme.d.ts

@@ -35,4 +35,5 @@ export declare function getTheme(theme: Theme, editable: boolean): {
     sheetInput: string;
     layoutContainer: string;
     layoutItem: string | false;
+    selfEvaluation: string;
 };

package/dist/patterns/LexicalEditor/theme.js

@@ -285,5 +285,12 @@ export function getTheme(theme, editable) {
             css `
         border: 1px dashed ${theme.color.background.neutralAltActive};
       `,
+        selfEvaluation: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
+    `,
     };
 }

package/package.json

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