@tipp/ui 2.2.7 → 2.2.9

package/dist/molecules/dynamic-form.cjs

@@ -80,14 +80,13 @@ var __async = (__this, __arguments, generator) => {
 var dynamic_form_exports = {};
 __export(dynamic_form_exports, {
   DynamicForm: () => DynamicForm,
-  convertJsonToFields: () => convertJsonToFields,
   createYupValidation: () => createYupValidation
 });
 module.exports = __toCommonJS(dynamic_form_exports);
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_formik = require("formik");
 var Yup = __toESM(require("yup"), 1);
-var import_themes51 = require("@radix-ui/themes");
+var import_themes52 = require("@radix-ui/themes");
 
 // src/atoms/alert-dialog.tsx
 var import_themes = require("@radix-ui/themes");
@@ -1401,66 +1400,117 @@ var Form = {
 };
 
 // src/atoms/auto-sizing-input.tsx
+var import_themes51 = require("@radix-ui/themes");
 var import_react23 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var useTextWidth = (text, font) => {
+  const [textWidth, setTextWidth] = (0, import_react23.useState)(0);
+  (0, import_react23.useEffect)(() => {
+    if (!text) {
+      setTextWidth(0);
+      return;
+    }
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+      setTextWidth(0);
+      return;
+    }
+    context.font = font;
+    const width = Math.ceil(context.measureText(text).width);
+    setTextWidth(width);
+  }, [text, font]);
+  return textWidth;
+};
+var getFontString = (element) => {
+  if (!element) return "14px sans-serif";
+  if (typeof window === "undefined") return "14px sans-serif";
+  const computedStyle = window.getComputedStyle(element);
+  const fontSize = computedStyle.fontSize || "14px";
+  const fontFamily = computedStyle.fontFamily || "sans-serif";
+  const fontWeight = computedStyle.fontWeight || "normal";
+  const fontStyle = computedStyle.fontStyle || "normal";
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+};
 var AutoSizingInput = (0, import_react23.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
-    const [value, setValue] = (0, import_react23.useState)(_value);
-    const [width, setWidth] = (0, import_react23.useState)(0);
-    const span = (0, import_react23.useRef)(null);
+    var _b = _a, {
+      value: externalValue,
+      onChangeValue,
+      onChange,
+      maxWidth,
+      minWidth
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "onChangeValue",
+      "onChange",
+      "maxWidth",
+      "minWidth"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react23.useState)(externalValue || "");
+    const value = isControlled ? externalValue : internalValue;
     const defaultRef = (0, import_react23.useRef)(null);
     const inputRef = ref || defaultRef;
+    const [fontString, setFontString] = (0, import_react23.useState)("14px sans-serif");
+    const displayValue = (0, import_react23.useMemo)(
+      () => value || rest.placeholder || "",
+      [value, rest.placeholder]
+    );
+    const textWidth = useTextWidth(displayValue, fontString);
+    const dynamicWidth = (0, import_react23.useMemo)(
+      () => `${Math.max(textWidth + 16, 24)}px`,
+      [textWidth]
+    );
     (0, import_react23.useEffect)(() => {
-      span.current && setWidth(span.current.offsetWidth);
-    }, [value]);
-    const changeHandler = (0, import_react23.useCallback)(
+      if (!("current" in inputRef) || !inputRef.current) return;
+      const element = inputRef.current;
+      const updateFont = () => {
+        const font = getFontString(element);
+        setFontString(font);
+      };
+      updateFont();
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && (mutation.attributeName === "style" || mutation.attributeName === "class")) {
+            updateFont();
+          }
+        });
+      });
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, [inputRef]);
+    const handleChange = (0, import_react23.useCallback)(
       (evt) => {
+        const newValue = evt.target.value;
         onChange == null ? void 0 : onChange(evt);
-        setValue(evt.target.value);
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChangeValue == null ? void 0 : onChangeValue(newValue);
       },
-      [onChange]
+      [onChange, onChangeValue, isControlled]
     );
-    (0, import_react23.useEffect)(() => {
-      setValue(_value || "");
-    }, [_value]);
-    (0, import_react23.useEffect)(() => {
-      onChangeValue == null ? void 0 : onChangeValue(value || "");
-    }, [value, onChangeValue]);
     const onClick = (0, import_react23.useCallback)(() => {
       var _a2;
       if ("current" in inputRef) {
         (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     }, [inputRef]);
-    const onKeyDown = (0, import_react23.useCallback)(
-      (evt) => {
-        if (evt.key === "Enter") {
-          onClick();
-        }
-      },
-      [onClick]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_themes51.Box,
       {
         className: "auto-sizing-input wrapper",
+        maxWidth,
+        minWidth,
         onClick,
-        onKeyDown,
-        role: "button",
-        style: { width: `${width + 24}px` },
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", ref: span, style: rest.style, children: value || rest.placeholder || "" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            "input",
-            __spreadValues({
-              onChange: changeHandler,
-              ref: inputRef,
-              value
-            }, rest)
-          )
-        ]
+        style: { width: dynamicWidth },
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", __spreadValues({ onChange: handleChange, ref: inputRef, value }, rest))
       }
     );
   }
@@ -1478,89 +1528,138 @@ var ListContext = (0, import_react24.createContext)({
   size: "large"
 });
 
-// src/molecules/dynamic-field.tsx
+// src/context/dynamic-form-context.tsx
+var import_react25 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function DynamicFormField({
-  field,
+var DynamicFormContext = (0, import_react25.createContext)(null);
+function DynamicFormProvider({
+  children,
+  fields,
   formik
 }) {
-  const { name, type, placeholder, options, orientation = "vertical" } = field;
-  const { value, error, touched } = formik.getFieldMeta(name);
+  const contextValue = {
+    formik,
+    fields,
+    getFieldValue: (name) => formik.values[name],
+    getFieldError: (name) => {
+      const error = formik.errors[name];
+      const touched = formik.touched[name];
+      return touched && error ? String(error) : void 0;
+    },
+    getFieldTouched: (name) => Boolean(formik.touched[name]),
+    setFieldValue: (field, value) => __async(null, null, function* () {
+      yield formik.setFieldValue(field, value);
+    }),
+    handleChange: formik.handleChange,
+    handleBlur: formik.handleBlur
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Form.Root, { onSubmit: formik.handleSubmit, children }) });
+}
+function useDynamicForm() {
+  const context = (0, import_react25.useContext)(DynamicFormContext);
+  if (!context) {
+    throw new Error("useDynamicForm must be used within a DynamicFormProvider");
+  }
+  return context;
+}
+
+// src/molecules/dynamic-field.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function DynamicFormField({
+  field
+}) {
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur
+  } = useDynamicForm();
+  const { name, type } = field;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
   const hasError = Boolean(error && touched);
   const commonProps = {
     name,
     value: String(value || ""),
-    onChange: formik.handleChange,
-    onBlur: formik.handleBlur,
-    placeholder,
+    onChange: handleChange,
+    onBlur: handleBlur,
     error: hasError
   };
   switch (type) {
-    case "text":
+    case "short_text":
     case "email":
-    case "password":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TextField.Root, __spreadProps(__spreadValues({}, commonProps), { type }));
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: type === "short_text" ? "text" : type
+        })
+      );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           inputMode: "numeric",
           pattern: "[0-9]*",
+          placeholder: field.placeholder,
           type: "number"
         })
       );
-    case "textarea":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TextArea, __spreadProps(__spreadValues({}, commonProps), { rows: 4 }));
-    case "select":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    case "long_text":
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TextArea, __spreadProps(__spreadValues({}, commonProps), { placeholder: field.placeholder, rows: 4 }));
+    case "dropdown":
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         Select.Root,
         {
           onValueChange: (newValue) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           },
           value,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Select.Trigger, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Select.Content, { children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select.Trigger, { placeholder: field.placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
       );
-    case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         import_themes34.RadioGroup.Root,
         {
           onValueChange: (newValue) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           },
-          orientation,
+          orientation: field.orientation,
           value: String(value || ""),
-          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_themes34.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
-    case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    case "choices":
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         CheckboxGroup.Root,
         {
           onValueChange: (newValue) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           },
-          orientation,
+          orientation: field.orientation,
           value: Array.isArray(value) ? value.map(String) : [],
-          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
-    case "single-checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    case "yes_no":
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           Checkbox,
           {
             checked: Boolean(value),
             onCheckedChange: (checked) => {
-              void formik.setFieldValue(name, checked);
+              void setFieldValue(name, checked);
             }
           }
         ),
-        field.description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
       ] });
     default:
       return null;
@@ -1568,24 +1667,43 @@ function DynamicFormField({
 }
 
 // src/molecules/dynamic-form.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-function DynamicForm({
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function scrollToFirstError(errors, _fields) {
+  const firstErrorFieldName = Object.keys(errors)[0];
+  if (!firstErrorFieldName) return;
+  let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
+  if (!fieldElement) {
+    fieldElement = document.querySelector(`[data-field-name="${firstErrorFieldName}"]`);
+  }
+  if (!fieldElement) {
+    fieldElement = document.querySelector(`[data-error-field="${firstErrorFieldName}"]`);
+  }
+  if (fieldElement) {
+    fieldElement.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }
+}
+function DynamicFormRoot({
   fields,
   initialValues = {},
   onSubmit,
-  submitButtonText = "\uC81C\uCD9C",
-  labelVariant = "body",
-  className
+  children
 }) {
-  const fieldRefs = (0, import_react25.useRef)({});
-  const validationSchema = (0, import_react25.useMemo)(() => {
+  const validationSchema = (0, import_react26.useMemo)(() => {
     const schema = {};
     fields.forEach((field) => {
       if (field.validation) {
-        schema[field.name] = field.validation;
+        const validation = createYupValidation(field, field.validation);
+        if (validation) {
+          schema[field.name] = validation;
+        }
       } else if (field.required) {
-        if (field.type === "checkbox") {
+        if (field.type === "choices") {
           schema[field.name] = Yup.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
+        } else if (field.type === "yes_no") {
+          schema[field.name] = Yup.boolean().oneOf([true], `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
         } else {
           schema[field.name] = Yup.string().required(
             `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
@@ -1595,11 +1713,14 @@ function DynamicForm({
     });
     return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
   }, [fields]);
+  const handleSubmit = (0, import_react26.useCallback)((values) => __async(null, null, function* () {
+    yield onSubmit(values);
+  }), [onSubmit]);
   const formik = (0, import_formik.useFormik)({
     initialValues: fields.reduce((acc, field) => {
-      if (field.type === "checkbox") {
+      if (field.type === "choices") {
         acc[field.name] = initialValues[field.name] || [];
-      } else if (field.type === "single-checkbox") {
+      } else if (field.type === "yes_no") {
         acc[field.name] = initialValues[field.name] || false;
       } else {
         acc[field.name] = initialValues[field.name] || "";
@@ -1608,82 +1729,86 @@ function DynamicForm({
     }, {}),
     validationSchema,
     validateOnBlur: true,
-    onSubmit: (values, formikHelpers) => __async(null, null, function* () {
-      yield onSubmit(values);
-    })
+    validateOnChange: true,
+    onSubmit: handleSubmit
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Form.Root, { className, onSubmit: formik.handleSubmit, children: [
-    fields.map((field) => {
-      const errorMessage = formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_themes51.Box,
-        {
-          mb: "2",
-          ref: (el) => {
-            fieldRefs.current[field.name] = el;
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-            Form.FormItem,
-            {
-              errorMessage,
-              label: field.label,
-              labelVariant,
-              name: field.name,
-              required: field.required,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DynamicFormField, { field, formik }),
-                field.description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Typo, { children: field.description }) : null
-              ]
-            }
-          )
-        },
-        field.name
-      );
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { disabled: formik.isSubmitting, type: "submit", children: formik.isSubmitting ? "\uC81C\uCD9C \uC911..." : submitButtonText })
-  ] });
+  (0, import_react26.useEffect)(() => {
+    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formik.errors, fields);
+      }, 100);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [formik.submitCount, formik.errors, fields]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicFormProvider, { fields, formik, children });
 }
-function convertJsonToFields(jsonData) {
-  return jsonData.fields.map((field) => ({
-    name: field.name,
-    type: field.type,
-    label: field.label,
-    placeholder: field.placeholder,
-    description: field.description,
-    required: field.required,
-    orientation: field.orientation,
-    options: field.options,
-    validation: field.validation ? createYupValidation(field.validation) : void 0
-  }));
+function DynamicFormFieldList({
+  fields: fieldsProp,
+  labelVariant
+}) {
+  const { formik, fields: fieldsFromContext } = useDynamicForm();
+  const fields = fieldsProp || fieldsFromContext;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: fields.map((field) => {
+    const errorMessage = formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      import_themes52.Box,
+      {
+        "data-error-field": errorMessage ? field.name : void 0,
+        "data-field-name": field.name,
+        mb: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          Form.FormItem,
+          {
+            errorMessage,
+            label: field.label,
+            labelVariant,
+            name: field.name,
+            required: field.required,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicFormField, { field }),
+              field.description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Typo, { children: field.description }) : null
+            ]
+          }
+        )
+      },
+      field.name
+    );
+  }) });
 }
-function createYupValidation(validation) {
+var DynamicForm = {
+  Root: DynamicFormRoot,
+  FieldList: DynamicFormFieldList
+};
+function createYupValidation(field, validation) {
   if (!validation) return void 0;
   let schema;
-  if (validation.type === "number") {
+  if (field.type === "number") {
     schema = Yup.number();
-  } else if (validation.type === "email") {
+  } else if (field.type === "email") {
     schema = Yup.string().email(
       validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
     );
-  } else if (validation.type === "array") {
+  } else if (field.type === "choices") {
     schema = Yup.array();
+  } else if (field.type === "yes_no") {
+    schema = Yup.boolean();
   } else {
     schema = Yup.string();
   }
-  if (validation.required) {
-    schema = schema.required(validation.message || "\uD544\uC218 \uD56D\uBAA9\uC785\uB2C8\uB2E4");
-  }
   if (validation.min !== void 0) {
-    if (validation.type === "number") {
+    if (field.type === "number") {
       schema = schema.min(
         validation.min,
         validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
       );
-    } else if (validation.type === "array") {
+    } else if (field.type === "choices") {
       schema = schema.min(
         validation.min,
         validation.message || `\uCD5C\uC18C ${validation.min}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
       );
+    } else if (field.type === "yes_no") {
     } else {
       schema = schema.min(
         validation.min,
@@ -1692,16 +1817,17 @@ function createYupValidation(validation) {
     }
   }
   if (validation.max !== void 0) {
-    if (validation.type === "number") {
+    if (field.type === "number") {
       schema = schema.max(
         validation.max,
         validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
       );
-    } else if (validation.type === "array") {
+    } else if (field.type === "choices") {
       schema = schema.max(
         validation.max,
         validation.message || `\uCD5C\uB300 ${validation.max}\uAC1C\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5\uD569\uB2C8\uB2E4`
       );
+    } else if (field.type === "yes_no") {
     } else {
       schema = schema.max(
         validation.max,
@@ -1709,12 +1835,29 @@ function createYupValidation(validation) {
       );
     }
   }
+  if (validation.pattern) {
+    if (field.type === "yes_no") {
+    } else {
+      schema = schema.matches(
+        new RegExp(validation.pattern),
+        validation.message || "\uC62C\uBC14\uB978 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+      );
+    }
+  }
+  if (field.required) {
+    if (field.type === "yes_no") {
+      schema = schema.oneOf([true], validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
+    } else if (field.type === "choices") {
+      schema = schema.min(1, validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`);
+    } else {
+      schema = schema.required(validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
+    }
+  }
   return schema;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DynamicForm,
-  convertJsonToFields,
   createYupValidation
 });
 //# sourceMappingURL=dynamic-form.cjs.map