@team-monolith/cds 1.10.4 → 1.10.6

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

@@ -7,7 +7,7 @@ export interface ImageProps {
 export interface Selection {
     isAnswer: boolean;
     show: {
-        image?: ImageProps | null;
+        image: ImageProps | null;
         text: string;
     };
     value: string;

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

@@ -10,7 +10,7 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "./InsertImageDialog";
 export function FormSelection(props) {
-    const { index, control, rules, watch, onDelete } = 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 `
@@ -18,9 +18,7 @@ export function FormSelection(props) {
           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: value !== null }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
+        ` }, { 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%);

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

@@ -25,19 +25,23 @@ export function InsertImageDialog(props) {
     const [mode, setMode] = useState(null);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const { control, setValue, watch, reset } = useForm({
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
         defaultValues: { src: "", altText: "" },
     });
-    const onClick = (props) => {
-        updateImg(props);
-        handleOnClose();
-    };
     const handleOnClose = () => {
         setMode(null);
         reset();
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
+    const onSubmit = (data) => {
+        updateImg(data);
+        handleOnClose();
+    };
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
+            // nested form 구조라서 submit이벤트 전파를 막습니다.
+            e.stopPropagation();
+            handleSubmit(onSubmit)();
+        }, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
               display: flex;
               flex-direction: column;
               gap: 16px;
@@ -57,8 +61,9 @@ export function InsertImageDialog(props) {
                                                     setMode("file");
                                                 }
                                             }) })] })] }), deleteButton && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: () => {
-                                        onClick(null);
-                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue, onClick: onClick }))] })));
+                                        updateImg(null);
+                                        handleOnClose();
+                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

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

@@ -4,6 +4,5 @@ export interface InsertImageUploadedDialogBodyProps {
     control: Control<ImageProps, any>;
     watch: UseFormWatch<ImageProps>;
     setValue: UseFormSetValue<ImageProps>;
-    onClick: (props: ImageProps) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -17,7 +17,7 @@ import { RefreshLineIcon } from "../../../../../icons";
 import Input from "../../../../../components/Input";
 import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { control, watch, setValue, onClick } = props;
+    const { control, watch, setValue } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
     const isDisabled = watch("src") === "";
@@ -33,7 +33,7 @@ export function InsertImageUploadedDialogBody(props) {
                                 if (uploadByFile) {
                                     setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

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

@@ -3,6 +3,5 @@ import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
     control: Control<ImageProps, any>;
     watch: UseFormWatch<ImageProps>;
-    onClick: (props: ImageProps) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,9 +6,9 @@ import { LinkIcon } from "../../../../../icons";
 import Button from "../../../../../components/Button";
 import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { control, watch, onClick } = props;
+    const { control, watch } = props;
     const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

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

@@ -19,16 +19,7 @@ export default function SettingForm(props) {
     const { control, handleSubmit, watch } = useForm({
         mode: "all",
         defaultValues: {
-            selections: selections.map((selection) => {
-                var _a;
-                return ({
-                    isAnswer: selection.isAnswer,
-                    show: {
-                        image: (_a = selection.show.image) !== null && _a !== void 0 ? _a : null,
-                        text: selection.show.text,
-                    },
-                });
-            }),
+            selections,
         },
     });
     const { fields, append, remove } = useFieldArray({
@@ -46,12 +37,13 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    function validateDuplicatedSelection(fields, index) {
+    function validateDuplicatedSelection(index) {
+        const selections = watch("selections");
         if (index === 0)
             return true;
-        const duplicatedIndex = fields
+        const duplicatedIndex = selections
             .slice(0, index)
-            .findIndex((prevField) => prevField.show.text === fields[index].show.text);
+            .findIndex((selection) => selection.show.text === selections[index].show.text);
         if (duplicatedIndex < 0)
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
@@ -64,7 +56,7 @@ export default function SettingForm(props) {
             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(fields, index),
+                                    validate: () => validateDuplicatedSelection(index),
                                 }, onDelete: index !== 0
                                     ? () => {
                                         remove(index);
@@ -73,6 +65,7 @@ export default function SettingForm(props) {
                             append({
                                 isAnswer: false,
                                 show: {
+                                    image: null,
                                     text: "",
                                 },
                                 value: (fields.length + 1).toString(),

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

@@ -92,6 +92,7 @@ function getQuizContextOptions(editor, theme) {
                         {
                             isAnswer: false,
                             show: {
+                                image: null,
                                 text: "",
                             },
                             value: "1",

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -26,9 +26,13 @@ export function InsertImageDialog(props) {
     const hasModifier = useRef(false);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const { control, setValue, watch, reset } = useForm({
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
         defaultValues: { src: "", altText: "" },
     });
+    const onSubmit = (data) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+        handleOnClose();
+    };
     useEffect(() => {
         hasModifier.current = false;
         const handler = (e) => {
@@ -39,16 +43,12 @@ export function InsertImageDialog(props) {
             document.removeEventListener("keydown", handler);
         };
     }, [activeEditor]);
-    const onClick = (payload) => {
-        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-        handleOnClose();
-    };
     const handleOnClose = () => {
         setMode(null);
         reset();
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: handleSubmit(onSubmit), disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
                                         var _a;
                                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                                     } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
@@ -61,7 +61,7 @@ export function InsertImageDialog(props) {
                                             setValue("src", yield uploadByFile(file));
                                             setMode("file");
                                         }
-                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue, onClick: onClick }))] })));
+                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,4 +1,3 @@
-import { InsertImagePayload } from ".";
 import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 export interface InsertImageUploadedDialogBodyProps {
     control: Control<{
@@ -13,6 +12,5 @@ export interface InsertImageUploadedDialogBodyProps {
         src: string;
         altText: string;
     }>;
-    onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -17,7 +17,7 @@ import Input from "../../../../components/Input";
 import { RefreshLineIcon } from "../../../../icons";
 import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { control, watch, setValue, onClick } = props;
+    const { control, watch, setValue } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
     const isDisabled = watch("src") === "";
@@ -33,7 +33,7 @@ export function InsertImageUploadedDialogBody(props) {
                                 if (uploadByFile) {
                                     setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,4 +1,3 @@
-import { InsertImagePayload } from ".";
 import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
     control: Control<{
@@ -9,6 +8,5 @@ export interface InsertImageUriDialogBodyProps {
         src: string;
         altText: string;
     }>;
-    onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.js

@@ -6,9 +6,9 @@ import { LinkIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
 import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { control, watch, onClick } = props;
+    const { control, watch } = props;
     const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/package.json

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