@team-monolith/cds 1.52.1 → 1.52.2

package/dist/components/InputBase.d.ts

@@ -45,6 +45,8 @@ interface InputBaseInputProps {
 }
 interface InputBaseTextAreaProps {
     multiline: true;
+    /** MUI TextareaAutosize 사용 여부. 전달하지 않으면 사용합니다. */
+    disableAutosize?: boolean;
     /** HTML input 태그에 전달될 ref */
     inputRef?: ForwardedRef<HTMLTextAreaElement>;
     /** HTML input 태그에 전달될 props */

package/dist/components/InputBase.js

@@ -62,7 +62,7 @@ const SIZE_TO_STYLES = (size, fullWidth) => ({
       padding-bottom: 12px;
       ${!fullWidth && "max-width: 375px"};
     `,
-}[size]);
+})[size];
 function InputComponent(props) {
     const { placeholder, disabled = false, defaultValue, value } = props;
     const theme = useTheme();
@@ -86,6 +86,9 @@ function InputComponent(props) {
   `;
     // Type Safety 때문에 코드의 중복을 허용합니다.
     if (props.multiline) {
+        if (props.disableAutosize) {
+            return (_jsx("textarea", Object.assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
+        }
         return (_jsx(TextareaAutosize, Object.assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
     }
     else {

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

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

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

@@ -65,8 +65,9 @@ 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 ||
-                                (selection.show.image ? null : `${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}번 선택지`
+                                : selection.show.text, 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.d.ts

@@ -1,14 +1,9 @@
-import { Selection } from "../ProblemSelectNode";
-import { Control, UseFormWatch } from "react-hook-form";
+import { Control, RegisterOptions } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
 export interface FormSelectionProps {
     index: number;
-    control: Control<{
-        selections: Selection[];
-    }, any>;
-    watch: UseFormWatch<{
-        selections: Selection[];
-    }>;
-    rules?: any;
+    control: Control<SettingFormData, any>;
+    rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }
 export declare function FormSelection(props: FormSelectionProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 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";
+import { useController } from "react-hook-form";
 import { css } from "@emotion/react";
 import Input from "../../../../../components/Input";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, } from "../../../../../icons";
@@ -10,43 +10,48 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "../../insertImageDialog";
 export function FormSelection(props) {
-    const { index, control, watch, rules, onDelete } = props;
+    const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    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.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
-                                onFocus: (_e) => {
-                                    setInputFocused(true);
-                                },
-                                onBlur: (_e) => {
-                                    setInputFocused(false);
-                                },
-                            }, 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 `
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `selections.${index}`,
+        rules,
+    });
+    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(InsertImageDialog, { title: value.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { image: props }) })), deleteButton: Boolean(value.show.image) }), value.show.image && (_jsx("img", { src: value.show.image.src, alt: value.show.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.show.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { text: e.target.value }) })), inputProps: {
+                            onFocus: (_e) => {
+                                setInputFocused(true);
+                            },
+                            onBlur: (_e) => {
+                                setInputFocused(false);
+                            },
+                        }, 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 `
           display: flex;
           height: 36px;
           gap: 8px;
           align-items: center;
-        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.show.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
-                        } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
-                                onChange(!value);
-                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value), size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+                        } }), _jsxs(Answer, Object.assign({ onClick: () => {
+                            onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
+                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

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

@@ -5,4 +5,7 @@ export interface SettingFormProps {
     nodeKey: NodeKey;
     onClose: () => void;
 }
+export interface SettingFormData {
+    selections: Selection[];
+}
 export default function SettingForm(props: SettingFormProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -38,33 +38,25 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    function validateRequiredSelection(index) {
-        const selections = watch("selections");
-        const selection = selections[index];
-        if (selection.show.image || selection.show.text)
+    function validateRequired(value) {
+        if (value.show.image || value.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) => {
-            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;
+    function validateDuplicated(value, formValues) {
+        const shows = formValues.selections.map((selection) => selection.show);
+        const duplicatedIndexes = shows.flatMap((show, i) => {
+            var _a, _b;
+            if (show.text === value.show.text &&
+                ((_a = show.image) === null || _a === void 0 ? void 0 : _a.src) === ((_b = value.show.image) === null || _b === void 0 ? void 0 : _b.src))
+                return [i];
+            return [];
         });
-        if (duplicatedIndex < 0)
+        if (duplicatedIndexes.length < 2)
             return true;
-        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+        return `${duplicatedIndexes
+            .map((i) => i + 1)
+            .join(",")}번 선택지가 같은 내용입니다.`;
     }
     const answersCount = watch("selections").filter((selection) => selection.isAnswer).length;
     const hasMultipleAnswers = answersCount > 1;
@@ -72,13 +64,10 @@ export default function SettingForm(props) {
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             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: {
-                                    validate: () => {
-                                        const required = validateRequiredSelection(index);
-                                        if (required !== true) {
-                                            return required;
-                                        }
-                                        return validateDuplicatedSelection(index);
+          ` }), "\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, rules: {
+                                    validate: {
+                                        validateRequired,
+                                        validateDuplicated,
                                     },
                                 }, onDelete: index !== 0
                                     ? () => {

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

@@ -37,15 +37,9 @@ export function InputComponent(props) {
     };
     // view
     if (!isEditable) {
-        return (_jsx(Input, { multiline: multiline, css: css `
+        return (_jsx(Input, { multiline: multiline, disableAutosize: true, 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;
+            height: ${TEXTAREA_HEIGHT}px;
           }
         `, inputProps: freezeProblemNode
                 ? { readOnly: true }

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { ImageProps } from "../../../insertImageDialog";
 /** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
 export declare function SelectBoxEdit(props: {
     index: number;
     image?: ImageProps | null;
-    text: React.ReactNode;
+    text: string;
     onClick: () => void;
 }): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.d.ts

@@ -1,11 +1,10 @@
 /** @jsxImportSource @emotion/react */
-import { Control, UseFormWatch } from "react-hook-form";
+import { Control, RegisterOptions } from "react-hook-form";
 import { SettingFormData } from "./SettingForm";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props: {
     index: number;
     control: Control<SettingFormData, any>;
-    watch: UseFormWatch<SettingFormData>;
-    rules?: any;
+    rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}.show`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { Controller } from "react-hook-form";
+import { useController } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { useState } from "react";
@@ -8,40 +8,45 @@ import { InsertImageDialog } from "../../../insertImageDialog";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../../..";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props) {
-    const { index, control, watch, rules, onDelete } = props;
+    const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    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.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
-                                onFocus: (_e) => {
-                                    setInputFocused(true);
-                                },
-                                onBlur: (_e) => {
-                                    setInputFocused(false);
-                                },
-                            }, 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 `
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `selections.${index}.show`,
+        rules,
+    });
+    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(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.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
+                            onFocus: (_e) => {
+                                setInputFocused(true);
+                            },
+                            onBlur: (_e) => {
+                                setInputFocused(false);
+                            },
+                        }, 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 `
           display: flex;
           // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
           height: 36px;
           gap: 8px;
           align-items: center;
-        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
                         } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
@@ -70,17 +75,3 @@ const Index = styled.div(({ theme }) => css `
     font-weight: 800;
     line-height: 16px;
   `);
-const Answer = styled.div(({ theme }) => css `
-    display: flex;
-    align-items: center;
-    padding-right: 4px;
-    gap: 8px;
-    color: ${theme.color.foreground.neutralBase};
-    cursor: pointer;
-    /* Default/Label/14px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 114.286% */
-  `);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/SettingForm.js

@@ -38,44 +38,32 @@ export function SettingForm(props) {
         });
         onClose();
     };
-    function validateRequiredSelection(index) {
-        const selections = watch("selections");
-        const selection = selections[index];
-        if (selection.show.image || selection.show.text)
+    function validateRequired(value) {
+        if (value.image || value.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) => {
-            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;
+    function validateDuplicated(value, formValues) {
+        const shows = formValues.selections.map((selection) => selection.show);
+        const duplicatedIndexes = shows.flatMap((show, i) => {
+            var _a, _b;
+            if (show.text === value.text && ((_a = show.image) === null || _a === void 0 ? void 0 : _a.src) === ((_b = value.image) === null || _b === void 0 ? void 0 : _b.src))
+                return [i];
+            return [];
         });
-        if (duplicatedIndex < 0)
+        if (duplicatedIndexes.length < 2)
             return true;
-        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+        return `${duplicatedIndexes
+            .map((i) => i + 1)
+            .join(",")}번 선택지가 같은 내용입니다.`;
     }
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), "\uC120\uD0DD\uD615 \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC120\uD0DD\uC9C0" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
-                                            validate: () => {
-                                                const required = validateRequiredSelection(index);
-                                                if (required !== true) {
-                                                    return required;
-                                                }
-                                                return validateDuplicatedSelection(index);
+          ` }), "\uC120\uD0DD\uD615 \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC120\uD0DD\uC9C0" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, rules: {
+                                            validate: {
+                                                validateRequired,
+                                                validateDuplicated,
                                             },
                                         }, onDelete: index !== 0
                                             ? () => {

package/package.json

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