@team-monolith/cds 1.51.2 → 1.52.1

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

@@ -14,6 +14,8 @@ export interface LexicalEditorProps {
     freezeProblemNode?: boolean;
     /** 퀴즈 정답이 공개되는지 여부. false가 default입니다. 공개하고자 하는곳에서 true로 설정해야 합니다. */
     showQuizSolution?: boolean;
+    /** 활동지 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
+    isSheetEnabled?: boolean;
     /** 퀴즈 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
     isQuizEnabled?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -16,6 +16,8 @@ import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 import { LayoutContainerNode } from "./nodes/LayoutContainerNode";
 import { LayoutItemNode } from "./nodes/LayoutItemNode";
 import _ from "lodash";
+import { SheetSelectNode } from "./nodes/SheetSelectNode";
+import { SheetInputNode } from "./nodes/SheetInputNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -52,7 +54,7 @@ function getCleanObject(obj) {
     return newObj;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isQuizEnabled = false, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isSheetEnabled = false, isQuizEnabled = false, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -76,6 +78,8 @@ export function LexicalEditor(props) {
             ColoredQuoteNode,
             LayoutContainerNode,
             LayoutItemNode,
+            SheetSelectNode,
+            SheetInputNode,
             {
                 replace: QuoteNode,
                 with: (_node) => {
@@ -100,5 +104,5 @@ export function LexicalEditor(props) {
             }
         }
         : undefined;
-    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -8,6 +8,7 @@ export interface PluginsProps {
     className?: string;
     contentEditableClassName?: string;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
+    isSheetEnabled: boolean;
     isQuizEnabled: boolean;
 }
 export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -30,8 +30,10 @@ import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 import { LayoutPlugin } from "./plugins/LayoutPlugin";
+import SheetSelectPlugin from "./plugins/SheetSelectPlugin";
+import SheetInputPlugin from "./plugins/SheetInputPlugin";
 export default function Plugins(props) {
-    const { className, contentEditableClassName, onChange, isQuizEnabled } = props;
+    const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -44,7 +46,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, { isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, 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, {})] }));
+                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, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -1,9 +1,6 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
-export interface ImageProps {
-    src: string;
-    altText: string;
-}
+import { ImageProps } from "../insertImageDialog";
 export interface SelectionWithoutSolution {
     show: {
         image: ImageProps | null;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ImageProps } from "../ProblemSelectNode";
+import { ImageProps } from "../../insertImageDialog";
 export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export declare function SelectBoxComponent(props: {

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

@@ -1,9 +1,10 @@
-import { ImageProps } from "../ProblemSelectNode";
+import { ImageProps } from "../../insertImageDialog";
+import React from "react";
 export interface SelectBoxEditProps {
     index: number;
     isAnswer: boolean;
     image?: ImageProps | null;
-    text: string;
+    text: React.ReactNode;
     onClick: () => void;
 }
 export declare function SelectBoxEdit(props: SelectBoxEditProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { ImageProps } from "../ProblemSelectNode";
+import { ImageProps } from "../../insertImageDialog";
 export interface SelectBoxViewProps {
     index: number;
     isSelected: boolean;

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

@@ -65,7 +65,8 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text ||
+                                (selection.show.image ? null : `${index + 1}번 선택지`), onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, { selections: selections, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { Controller } from "react-hook-form";
@@ -8,27 +8,27 @@ import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFil
 import SquareButton from "../../../../../components/SquareButton";
 import Switch from "../../../../../components/Switch";
 import { useState } from "react";
-import { InsertImageDialog } from "./InsertImageDialog";
+import { InsertImageDialog } from "../../insertImageDialog";
 export function FormSelection(props) {
     const { index, control, watch, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          gap: 4px;
-        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(props), deleteButton: Boolean(value) }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
-                    height: auto;
-                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                    max-width: min(400px, 100%);
-                    width: fit-content;
-                    border-radius: 6px;
-                  `, draggable: "false" }))] })) }), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsx(Controller, { name: `selections.${index}.show`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsxs("div", Object.assign({ css: css `
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              gap: 4px;
+            ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
+                  height: auto;
+                  // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                  max-width: min(400px, 100%);
+                  width: fit-content;
+                  border-radius: 6px;
+                `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
                                 ? "activeDanger"
                                 : inputFocused
                                     ? "activePrimary"
-                                    : "default", value: value, onChange: onChange, inputProps: {
+                                    : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
                                 onFocus: (_e) => {
                                     setInputFocused(true);
                                 },
@@ -37,7 +37,7 @@ export function FormSelection(props) {
                                 },
                             }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
                 flex: 1;
-              ` })) })] })), _jsxs("div", Object.assign({ css: css `
+              ` })] }))) }), _jsxs("div", Object.assign({ css: css `
           display: flex;
           height: 36px;
           gap: 8px;

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

@@ -38,13 +38,30 @@ export default function SettingForm(props) {
         });
         onClose();
     };
+    function validateRequiredSelection(index) {
+        const selections = watch("selections");
+        const selection = selections[index];
+        if (selection.show.image || selection.show.text)
+            return true;
+        return "필수 입력 항목입니다.";
+    }
     function validateDuplicatedSelection(index) {
         const selections = watch("selections");
         if (index === 0)
             return true;
+        const image = selections[index].show.image;
+        const text = selections[index].show.text;
         const duplicatedIndex = selections
             .slice(0, index)
-            .findIndex((selection) => selection.show.text === selections[index].show.text);
+            .findIndex((selection) => {
+            var _a;
+            // text를 비교하고, text가 같은 경우 image도 비교합니다.
+            if (selection.show.text !== text)
+                return false;
+            if (((_a = selection.show.image) === null || _a === void 0 ? void 0 : _a.src) !== (image === null || image === void 0 ? void 0 : image.src))
+                return false;
+            return true;
+        });
         if (duplicatedIndex < 0)
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
@@ -56,8 +73,13 @@ export default function SettingForm(props) {
             width: 12px;
             height: 12px;
           ` }), "\uAC1D\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uB2F5\uC548" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
-                                    required: "필수 입력 항목입니다.",
-                                    validate: () => validateDuplicatedSelection(index),
+                                    validate: () => {
+                                        const required = validateRequiredSelection(index);
+                                        if (required !== true) {
+                                            return required;
+                                        }
+                                        return validateDuplicatedSelection(index);
+                                    },
                                 }, onDelete: index !== 0
                                     ? () => {
                                         remove(index);

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

@@ -0,0 +1,7 @@
+import { NodeKey } from "lexical";
+export declare function InputComponent(props: {
+    multiline: boolean;
+    value: string;
+    placeholder: string;
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { $getNodeByKey } from "lexical";
+import { useContext, useState } from "react";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { Input, Settings3FillIcon, SquareButton } from "../../../..";
+import { SettingForm } from "./SettingForm";
+import { $isSheetInputNode } from "./SheetInputNode";
+const TEXTAREA_HEIGHT = 84;
+/** VirtualInput을 Input(size: small)처럼 만들기 위한 padding 값입니다. */
+const INPUT_VERTICAL_PADDING = 8;
+export function InputComponent(props) {
+    const { multiline, value, placeholder, nodeKey } = props;
+    const [editor] = useLexicalComposerContext();
+    const [settingOpen, setSettingOpen] = useState(false);
+    const isEditable = useLexicalEditable();
+    const [focus, setFocus] = useState(false);
+    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+    // 문제를 더 파악하고 추후 개선 필요.
+    const [valueInput, setValueInput] = useState(value);
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    const handleChange = (value) => {
+        setValueInput(value);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSheetInputNode(node)) {
+                return;
+            }
+            node.setValue(value);
+        });
+    };
+    // view
+    if (!isEditable) {
+        return (_jsx(Input, { multiline: multiline, css: css `
+          textarea {
+            // textarea의 height를 고정시키기 위해 max-height와 min-height를 설정합니다.
+            max-height: ${TEXTAREA_HEIGHT}px;
+            min-height: ${TEXTAREA_HEIGHT}px;
+            // https://github.com/mui/material-ui/blob/next/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+            // MUI TextareaAutoSize는 overflow를 hidden으로 설정하는 로직이 있습니다.
+            // 그래서 부득이하게 !important를 사용합니다.
+            overflow: auto !important;
+          }
+        `, inputProps: freezeProblemNode
+                ? { readOnly: true }
+                : {
+                    onFocus: () => setFocus(true),
+                    onBlur: () => setFocus(false),
+                }, size: "small", color: focus ? "activePrimary" : "default", placeholder: placeholder || "여기에 입력하세요.", value: valueInput, onChange: (e) => {
+                handleChange(e.target.value);
+            }, fullWidth: true }));
+    }
+    // edit
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        ` }, { children: [_jsx(VirtualInput, Object.assign({ onClick: () => setSettingOpen((open) => !open), css: multiline &&
+                            css `
+              height: ${TEXTAREA_HEIGHT + 2 * INPUT_VERTICAL_PADDING}px;
+            ` }, { children: multiline ? "서술형 입력 칸" : "단답형 입력 칸" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open) })] })), settingOpen && (_jsx(SettingForm, { multiline: multiline, placeholder: placeholder, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+}
+const VirtualInput = styled.div(({ theme }) => css `
+    box-sizing: border-box;
+    height: 36px;
+    width: 400px;
+    padding: ${INPUT_VERTICAL_PADDING}px 16px;
+    align-items: center;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+    cursor: pointer;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  `);

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

@@ -0,0 +1,11 @@
+import { NodeKey } from "lexical";
+export interface SettingFormData {
+    placeholder: string;
+}
+/** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    multiline: boolean;
+    placeholder: string;
+    nodeKey: NodeKey;
+    onClose: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey } from "lexical";
+import { Controller, useForm } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { InputMethodLineIcon, QuestionFillIcon } from "../../../../icons";
+import { Button, Input, shadows, Tooltip } from "../../../..";
+import { $isSheetInputNode } from "./SheetInputNode";
+/** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { multiline, placeholder, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            placeholder,
+        },
+    });
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSheetInputNode(node)) {
+                return;
+            }
+            node.setPlaceholder(data.placeholder);
+        });
+        onClose();
+    };
+    return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _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(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => {
+                                return (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." }));
+                            } })] }) }), _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;
+    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 FormArea = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 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/SheetInputNode/SheetInputNode.d.ts

@@ -0,0 +1,33 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export interface SheetInputPayload {
+    multiline: boolean;
+    value: string;
+    placeholder: string;
+    key?: NodeKey;
+}
+export type SerializedSheetInputNode = Spread<SheetInputPayload, SerializedLexicalNode>;
+/**
+ * 입력칸을 나타내는 노드입니다.
+ */
+export declare class SheetInputNode extends DecoratorNode<ReactNode> {
+    __multiline: boolean;
+    __value: string;
+    __placeholder: string;
+    isInline(): boolean;
+    static getType(): string;
+    getMultiline(): boolean;
+    getValue(): string;
+    getPlaceholder(): string;
+    setValue(value: string): void;
+    setPlaceholder(placeholder: string): void;
+    static clone(node: SheetInputNode): SheetInputNode;
+    constructor(multiline: boolean, value: string, placeholder: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedSheetInputNode): SheetInputNode;
+    exportJSON(): SerializedSheetInputNode;
+    decorate(): ReactNode;
+}
+export declare function $createSheetInputNode({ multiline, value, placeholder, key, }: SheetInputPayload): SheetInputNode;
+export declare function $isSheetInputNode(node: LexicalNode | null | undefined): node is SheetInputNode;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { InputComponent } from "./InputComponent";
+/**
+ * 입력칸을 나타내는 노드입니다.
+ */
+export class SheetInputNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
+    static getType() {
+        return "sheet-input";
+    }
+    getMultiline() {
+        return this.__multiline;
+    }
+    getValue() {
+        return this.__value;
+    }
+    getPlaceholder() {
+        return this.__placeholder;
+    }
+    setValue(value) {
+        const self = this.getWritable();
+        self.__value = value;
+    }
+    setPlaceholder(placeholder) {
+        const self = this.getWritable();
+        self.__placeholder = placeholder;
+    }
+    static clone(node) {
+        return new SheetInputNode(node.__multiline, node.__value, node.__placeholder, node.__key);
+    }
+    constructor(multiline, value, placeholder, key) {
+        super(key);
+        this.__multiline = multiline;
+        this.__value = value;
+        this.__placeholder = placeholder;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.sheetInput);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        const node = $createSheetInputNode({
+            key: serializedNode.key,
+            multiline: serializedNode.multiline,
+            value: serializedNode.value,
+            placeholder: serializedNode.placeholder,
+        });
+        return node;
+    }
+    exportJSON() {
+        return {
+            version: 1,
+            type: "sheet-input",
+            multiline: this.__multiline,
+            value: this.__value,
+            placeholder: this.__placeholder,
+        };
+    }
+    decorate() {
+        return (_jsx(InputComponent, { multiline: this.__multiline, value: this.__value, placeholder: this.__placeholder, nodeKey: this.getKey() }));
+    }
+}
+export function $createSheetInputNode({ multiline, value, placeholder, key, }) {
+    return $applyNodeReplacement(new SheetInputNode(multiline, value, placeholder, key));
+}
+export function $isSheetInputNode(node) {
+    return node instanceof SheetInputNode;
+}

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

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

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

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

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ImageProps } from "../../../insertImageDialog";
+export declare const SelectBoxClasses: {
+    readonly container: "SheetSelectNode-SelectBox-container";
+    readonly index: "SheetSelectNode-SelectBox-index";
+    readonly content: "SheetSelectNode-SelectBox-content";
+};
+export type SelectBoxType = "primary" | "normal";
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export declare function SelectBoxComponent(props: {
+    className?: string;
+    type: SelectBoxType;
+    index: React.ReactNode;
+    image?: ImageProps | null;
+    text: React.ReactNode;
+    /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;