@farmzone/fz-react-ui 0.0.7 → 0.0.9

package/dist/index.d.cts

@@ -1200,6 +1200,14 @@ interface DetailModalFrameProps<T, S extends z.ZodTypeAny = z.ZodTypeAny> {
     mode?: UseDetailControllerParams["mode"];
     onModeChange?: UseDetailControllerParams["onModeChange"];
     contentClassName?: string;
+    /** ModalBody 내 DetailContent 하단 추가 컨텐츠 (프로필 사진 등) */
+    renderExtraContent?: (ctx: {
+        isEditMode: boolean;
+    }) => ReactNode;
+    /** read 모드 footer 추가 버튼 — 닫기 앞에 삽입 */
+    renderFooterExtra?: ReactNode;
+    /** isDirty 상태 외부 노출 — 라우터 blocker 등에서 활용 */
+    onDirtyChange?: (isDirty: boolean) => void;
 }
 declare function DetailModalFrame<T, S extends z.ZodTypeAny = z.ZodTypeAny>(props: DetailModalFrameProps<T, S>): React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -1200,6 +1200,14 @@ interface DetailModalFrameProps<T, S extends z.ZodTypeAny = z.ZodTypeAny> {
     mode?: UseDetailControllerParams["mode"];
     onModeChange?: UseDetailControllerParams["onModeChange"];
     contentClassName?: string;
+    /** ModalBody 내 DetailContent 하단 추가 컨텐츠 (프로필 사진 등) */
+    renderExtraContent?: (ctx: {
+        isEditMode: boolean;
+    }) => ReactNode;
+    /** read 모드 footer 추가 버튼 — 닫기 앞에 삽입 */
+    renderFooterExtra?: ReactNode;
+    /** isDirty 상태 외부 노출 — 라우터 blocker 등에서 활용 */
+    onDirtyChange?: (isDirty: boolean) => void;
 }
 declare function DetailModalFrame<T, S extends z.ZodTypeAny = z.ZodTypeAny>(props: DetailModalFrameProps<T, S>): React$1.JSX.Element;
 

package/dist/index.js

@@ -3060,46 +3060,36 @@ function EmptyContent(props) {
   const hasHeader = icon || title || description;
   const isPage = layout === "page";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasHeader && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex flex-col items-center gap-2",
-          isPage && "mt-14 mb-10 gap-3",
-          !isPage && "max-w-sm"
-        ),
-        children: [
-          icon && /* @__PURE__ */ jsx("div", { className: cn(emptyIconVariants({ iconVariant }), iconClassName), children: icon }),
-          title && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                isPage && "text-2xl font-bold",
-                !isPage && "text-lg font-medium tracking-tight text-foreground",
-                titleClassName
-              ),
-              children: title
-            }
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-2", isPage && "mt-14 mb-10 gap-3", !isPage && "max-w-sm"), children: [
+      icon && /* @__PURE__ */ jsx("div", { className: cn(emptyIconVariants({ iconVariant }), iconClassName), children: icon }),
+      title && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            isPage && "text-2xl font-bold",
+            !isPage && "text-lg font-medium tracking-tight text-foreground",
+            titleClassName
           ),
-          description && /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                isPage && "text-lg text-gray-500",
-                !isPage && "text-sm leading-relaxed text-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          )
-        ]
-      }
-    ),
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            isPage && "text-lg text-gray-500",
+            !isPage && "text-sm leading-relaxed text-muted-foreground",
+            descriptionClassName
+          ),
+          children: description
+        }
+      )
+    ] }),
     action && /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
-          isPage && "flex-center w-full",
+          isPage && "flex items-center justify-center w-full",
           !isPage && "flex w-full max-w-sm flex-col items-center gap-3",
           actionClassName
         ),
@@ -8870,9 +8860,15 @@ function DetailModalFrame(props) {
     renderEditBody,
     mode,
     onModeChange,
-    contentClassName
+    contentClassName,
+    renderExtraContent,
+    renderFooterExtra,
+    onDirtyChange
   } = props;
   const controller = useDetailController({ mode, onModeChange });
+  useEffect(() => {
+    onDirtyChange?.(controller.isDirty);
+  }, [controller.isDirty, onDirtyChange]);
   const handleClose = useCallback(async () => {
     if (controller.isDirty) {
       const confirmed = await new Promise((resolve) => {
@@ -8910,24 +8906,31 @@ function DetailModalFrame(props) {
       /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: title }),
       !isEditMode && canEdit && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleEdit, children: "\uC218\uC815" })
     ] }),
-    /* @__PURE__ */ jsx(ModalBody, { className: "p-0", children: /* @__PURE__ */ jsx(
-      DetailContent,
-      {
-        controller,
-        data,
-        readFields,
-        editSchema,
-        editFields,
-        onSave,
-        renderReadBody,
-        renderEditBody,
-        layout: "compact"
-      }
-    ) }),
+    /* @__PURE__ */ jsxs(ModalBody, { className: "flex-1 min-h-0 p-0", children: [
+      /* @__PURE__ */ jsx(
+        DetailContent,
+        {
+          controller,
+          data,
+          readFields,
+          editSchema,
+          editFields,
+          onSave,
+          renderReadBody,
+          renderEditBody,
+          layout: "compact",
+          className: "overflow-visible max-h-none"
+        }
+      ),
+      renderExtraContent?.({ isEditMode })
+    ] }),
     /* @__PURE__ */ jsx(ModalFooter, { className: "flex justify-end gap-2", children: isEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleCancelEdit, disabled: controller.isSaving, children: "\uCDE8\uC18C" }),
       /* @__PURE__ */ jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: controller.isSaving ? "\uC800\uC7A5 \uC911..." : "\uC800\uC7A5" })
-    ] }) : /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClose, children: "\uB2EB\uAE30" }) })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderFooterExtra,
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClose, children: "\uB2EB\uAE30" })
+    ] }) })
   ] });
 }
 function useBlockModalConfirm() {