@team-monolith/cds 1.56.1 → 1.56.2

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/Form/FormInput.d.ts

@@ -0,0 +1,11 @@
+import { DistributiveOmit } from "@emotion/react";
+import { InputProps } from "../../../..";
+export type FormInputProps = DistributiveOmit<InputProps, "color" | "onChange" | "value" | "hintIcon" | "hintText"> & {
+    name: string;
+    control: any;
+    baseColor?: "default" | "base";
+    rules?: any;
+    /** html event에서 얻은 value를 form에 주입하기 전에 변환합니다. */
+    transform?: (value: string) => any;
+};
+export declare function FormInput(props: FormInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -0,0 +1,51 @@
+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 } from "react/jsx-runtime";
+import { ErrorWarningFillIcon, Input } from "../../../..";
+import { Controller } from "react-hook-form";
+import { useState } from "react";
+export function FormInput(props) {
+    const { name, control, rules, baseColor = "default", transform = (value) => value } = props, inputComponentProps = __rest(props, ["name", "control", "rules", "baseColor", "transform"]);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
+            const onChangeHandler = (e) => {
+                onChange(transform(e.target.value));
+            };
+            // multiline 여부에 따라 inputProps의 type이 변경되므로 (union type)
+            // type-safety를 보장하기 위해 if 문을 분기하여 inputProps에 `name` 을 추가합니다.
+            // 코드 반복 없이 가능할까요?
+            if (inputComponentProps.multiline) {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+            else {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+        } }));
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ToggleButtonDatum } from "../../../../../ToggleButtonGroup";
+import { EvaluationItem } from "../../SelfEvaluationNode";
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export declare function Evaluation(props: {
+    className?: string;
+    /** 자기 평가 항목들 */
+    evaluations: EvaluationItem[];
+    /** ToggleButton의 데이터 배열 */
+    data: ToggleButtonDatum[];
+    /** 블럭을 클릭했을 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+    /** 전달하지 않으면 ToggleButtonGroup 호버, 클릭 동작이 없습니다. (pointer-events: none) */
+    onChange?: (evaluations: EvaluationItem[]) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,103 @@
+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";
+import _ from "lodash";
+const TOGGLE_BUTTON_GROUP_WIDTH = 320;
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export function Evaluation(props) {
+    const { className, evaluations, data, onClick, onChange } = props;
+    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Header, { children: _jsx(LabelArea, { children: data.map(({ label }, index) => (_jsx(Label, { children: label }, index))) }) }), evaluations.map(({ question, selectedLabelIndex }, index) => (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Question, { children: question.text }), _jsx(StyledToggleButtonGroup, { data: data, activeIndex: selectedLabelIndex, setActiveIndex: !onChange
+                            ? undefined
+                            : (activeIndex) => {
+                                const newEvaluations = _.cloneDeep(evaluations);
+                                newEvaluations[index].selectedLabelIndex = activeIndex;
+                                onChange(newEvaluations);
+                            } })] }, 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 Question = 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/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,52 @@
+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 })] }, 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,7 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 레이블을 설정하는 Form입니다. */
+export declare function FormLabel(props: {
+    control: Control<SettingFormData, any>;
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useController } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { FormInput } from "../../../../../Form";
+const LABEL_RULES = {
+    required: "필수 입력 항목입니다.",
+    maxLength: 12,
+};
+/** 레이블을 설정하는 Form입니다. */
+export function FormLabel(props) {
+    const { control, index } = props;
+    // endIcon에 들어갈 value, error를 사용하기 위해 useController를 사용합니다.
+    const { field: { value }, fieldState: { error }, } = useController({
+        control,
+        name: `labels.${index}`,
+        rules: LABEL_RULES,
+    });
+    return (_jsx(FormInput, { control: control, name: `labels.${index}`, rules: LABEL_RULES, size: "small", endIcon: _jsx(Counter, Object.assign({ error: Boolean(error) }, { children: value.length + "/" + LABEL_RULES.maxLength })), 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/FormQuestion.d.ts

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { DeleteBinLineIcon, SquareButton } from "../../../../../../..";
+import { FormInput } from "../../../../Form";
+/** 평가 항목을 설정하는 Form입니다. */
+export function FormQuestion(props) {
+    const { control, index, onDelete } = props;
+    return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: {
+                    required: "필수 입력 항목입니다.",
+                }, size: "small", placeholder: `${index + 1}번 평가 항목`, 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/SettingForm.d.ts

@@ -0,0 +1,17 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { EvaluationItem, IconType } from "../../../SelfEvaluationNode";
+export interface SettingFormData {
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+}
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    className?: string;
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+    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,110 @@
+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 { FormQuestion } from "./FormQuestion";
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { className, iconType, labels, evaluations, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            iconType,
+            labels,
+            evaluations,
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "evaluations",
+        keyName: "uid",
+    });
+    const onSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSelfEvaluationNode(node)) {
+                return;
+            }
+            node.setIconType(data.iconType);
+            node.setLabels(data.labels);
+            node.setEvaluations(data.evaluations);
+        });
+        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(FormQuestion, { index: index, control: control, 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({
+                                        question: { text: "평가 항목을 입력하세요." },
+                                        selectedLabelIndex: null,
+                                    });
+                                } })] }), _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,10 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { EvaluationItem, IconType } from "../SelfEvaluationNode";
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export declare function EvaluationComponent(props: {
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,57 @@
+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";
+import _ from "lodash";
+const EVALUATION_EDIT_WIDTH = 620;
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export function EvaluationComponent(props) {
+    const { iconType, labels, evaluations, 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];
+    // label과 icons를 매핑하여 ToggelButtonData로 변환합니다.
+    // 만약 둘의 길이가 같지 않다면 짧은 길이에 맞춰집니다.
+    const data = _.zipWith(labels, icons, (label, { onIcon, offIcon }) => ({
+        label,
+        onIcon,
+        offIcon,
+    }));
+    // view
+    if (!isEditable) {
+        return (_jsx(Evaluation, { data: data, evaluations: evaluations, onChange: freezeProblemNode
+                ? undefined
+                : (evaluations) => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isSelfEvaluationNode(node)) {
+                            return;
+                        }
+                        node.setEvaluations(evaluations);
+                    });
+                } }));
+    }
+    // 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;
+          `, data: data, evaluations: evaluations, 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, evaluations: evaluations, 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,45 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export type IconType = "emoji" | "ascendingNumber" | "descendingNumber";
+/** 자기 평가 항목 */
+export interface EvaluationItem {
+    question: {
+        text: string;
+    };
+    selectedLabelIndex: number | null;
+}
+export interface SelfEvaluationPayload {
+    /** 아이콘 프리셋 타입 */
+    iconType: IconType;
+    /** 자기평가 레이블 */
+    labels: string[];
+    /** 자기평가 항목들 */
+    evaluations: EvaluationItem[];
+    key?: NodeKey;
+}
+export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, SerializedLexicalNode>;
+/** 3단계 평가 입력칸을 나타내는 노드입니다.
+ * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
+ */
+export declare class SelfEvaluationNode extends DecoratorNode<ReactNode> {
+    __iconType: IconType;
+    __labels: string[];
+    __evaluations: EvaluationItem[];
+    isInline(): boolean;
+    static getType(): string;
+    getIconType(): IconType;
+    getLabels(): string[];
+    getEvaluations(): EvaluationItem[];
+    setIconType(iconType: IconType): void;
+    setLabels(labels: string[]): void;
+    setEvaluations(evaluations: EvaluationItem[]): void;
+    static clone(node: SelfEvaluationNode): SelfEvaluationNode;
+    constructor(iconType: IconType, labels: string[], evaluations: EvaluationItem[], 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,81 @@
+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;
+    }
+    getEvaluations() {
+        return this.__evaluations;
+    }
+    setIconType(iconType) {
+        const self = this.getWritable();
+        self.__iconType = iconType;
+    }
+    setLabels(labels) {
+        const self = this.getWritable();
+        self.__labels = labels;
+    }
+    setEvaluations(evaluations) {
+        const self = this.getWritable();
+        self.__evaluations = evaluations;
+    }
+    static clone(node) {
+        return new SelfEvaluationNode(node.__iconType, node.__labels, node.__evaluations);
+    }
+    constructor(iconType, labels, evaluations, key) {
+        super(key);
+        this.__iconType = iconType;
+        this.__labels = labels;
+        this.__evaluations = evaluations;
+    }
+    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,
+            evaluations: serializedNode.evaluations,
+        });
+    }
+    exportJSON() {
+        return {
+            type: "self-evaluation",
+            version: 1,
+            iconType: this.__iconType,
+            labels: this.__labels,
+            evaluations: this.__evaluations,
+        };
+    }
+    decorate() {
+        return (_jsx(EvaluationComponent, { iconType: this.__iconType, labels: this.__labels, evaluations: this.__evaluations, nodeKey: this.getKey() }));
+    }
+}
+export function $createSelfEvaluationNode(payload) {
+    const { iconType, labels, evaluations, key } = payload;
+    return $applyNodeReplacement(new SelfEvaluationNode(iconType, labels, evaluations, 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,22 @@ 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: ["아주 잘했어요!", "보통이에요.", "잘 모르겠어요."],
+                evaluations: [
+                    {
+                        question: {
+                            text: "평가 항목을 입력하세요.",
+                        },
+                        selectedLabelIndex: 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/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -24,6 +24,6 @@ export declare function ToggleButtonGroup(props: {
     data: ToggleButtonDatum[];
     /** 활성화될 ToggleButton의 index */
     activeIndex: number | null;
-    /** activeIndex set 함수 */
-    setActiveIndex: (index: number | null) => void;
-}): import("react/jsx-runtime").JSX.Element;
+    /** activeIndex set 함수. 전달하지 않으면 pointer-events: none이 됩니다. */
+    setActiveIndex?: (index: number | null) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { ToggleButton } from "./ToggleButton";
+import { css } from "@emotion/react";
 export const toggleButtonGroupClasses = {
     container: "ToggleButtonGroup-container",
     toggleButton: {
@@ -14,13 +16,16 @@ export const toggleButtonGroupClasses = {
  */
 export function ToggleButtonGroup(props) {
     const { className, data, activeIndex, setActiveIndex } = props;
-    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}` }, { children: data.map((datum, index) => {
+    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}`, css: !setActiveIndex &&
+            css `
+          pointer-events: none;
+        ` }, { children: data.map((datum, index) => {
             const isFirst = index === 0;
             const isLast = index === data.length - 1;
             const isFirstAndLast = isFirst && isLast;
             const isActive = activeIndex === index;
             return (_jsx(ToggleButton, { isActive: isActive, onClick: () => {
-                    setActiveIndex(isActive ? null : index);
+                    setActiveIndex === null || setActiveIndex === void 0 ? void 0 : setActiveIndex(isActive ? null : index);
                 }, datum: datum, placement: isFirstAndLast
                     ? "bottom"
                     : isFirst

package/package.json

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