@uniai-fe/uds-templates 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/modal/components/core/Container.tsx

@@ -52,7 +52,11 @@ export function ModalContainer({
 
   return (
     <ContextProvider>
-      <div className={clsx("uds-modal-container", className)}>
+      <div
+        className={clsx("uds-modal-container", className)}
+        // 변경 설명: Dialog 기본 submit 동작에서 현재 스택의 form을 조회하기 위한 식별자다.
+        data-modal-stack-key={stackKey}
+      >
         {header ? <ModalHeaderContainer>{header}</ModalHeaderContainer> : null}
         <ModalBody style={bodyStyle}>{body}</ModalBody>
         {footer ? <div className="uds-modal-footer">{footer}</div> : null}

package/src/modal/components/dialog/Header.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import clsx from "clsx";
+import { useModal } from "../../hooks/useModal";
+import { ModalHeaderCloseButton } from "../core/header/CloseButton";
 
 import type { DialogHeaderProps } from "../../types";
 
@@ -13,6 +15,8 @@ import type { DialogHeaderProps } from "../../types";
  * @param {"center" | "split"} [props.layout] 헤더 레이아웃
  * @param {React.ReactNode} [props.leadingContent] 타이틀 왼쪽 콘텐츠
  * @param {React.ReactNode} [props.trailingContent] 우측 액션 콘텐츠
+ * @param {string} [props.stackKey] 모달 스택 키(기본 닫기 버튼 동작 연결용)
+ * @param {boolean} [props.activeCloseButton] 우측 기본 닫기 버튼 활성화 여부
  * @param {string} [props.className] 헤더 className
  * @example
  * <DialogHeader title="제목" description="설명" />
@@ -23,10 +27,22 @@ export function DialogHeader({
   layout = "center",
   leadingContent,
   trailingContent,
+  stackKey,
+  activeCloseButton = false,
   className,
 }: DialogHeaderProps) {
+  const { closeModal } = useModal();
   const hasRight = Boolean(trailingContent);
   const hasDescription = Boolean(description);
+  const shouldRenderDefaultCloseButton =
+    activeCloseButton && !hasRight && Boolean(stackKey);
+  const resolvedTrailingContent = shouldRenderDefaultCloseButton ? (
+    <ModalHeaderCloseButton
+      onClick={() => closeModal({ stackKey: String(stackKey) })}
+    />
+  ) : (
+    trailingContent
+  );
   // 변경: title/description은 string | number일 때만 래핑한다.
   const shouldWrapTitleAsText = ["string", "number"].includes(typeof title);
   const shouldWrapDescriptionAsText = ["string", "number"].includes(
@@ -56,9 +72,9 @@ export function DialogHeader({
               {shouldWrapTitleAsText ? <h3>{title}</h3> : title}
             </div>
           </div>
-          {hasRight ? (
+          {resolvedTrailingContent ? (
             <div className="uds-modal-dialog-header-trailing">
-              {trailingContent}
+              {resolvedTrailingContent}
             </div>
           ) : null}
         </div>

package/src/modal/components/dialog/Template.tsx

@@ -10,6 +10,30 @@ import {
 import type { DialogTemplateOptions, ModalState } from "../../types";
 import type { FieldValues } from "react-hook-form";
 
+/**
+ * Dialog 기본 submit 핸들러 생성기
+ * - formContextOptions가 활성화되고 confirm.onClick이 비어 있을 때에만 사용한다.
+ */
+function createDialogFormSubmitHandler(stackKey: string): () => void {
+  return () => {
+    const modalContainers = document.querySelectorAll<HTMLElement>(
+      "[data-modal-stack-key]",
+    );
+    const targetContainer = Array.from(modalContainers).find(
+      container => container.dataset.modalStackKey === stackKey,
+    );
+
+    if (!targetContainer) {
+      return;
+    }
+
+    const formElement = targetContainer.querySelector("form");
+    if (formElement instanceof HTMLFormElement) {
+      formElement.requestSubmit();
+    }
+  };
+}
+
 /**
  * Modal Dialog Template; Dialog 모달 상태 생성기
  * @component
@@ -20,6 +44,7 @@ import type { FieldValues } from "react-hook-form";
  * @param {"center" | "split"} [options.headerLayout] 헤더 레이아웃
  * @param {React.ReactNode} [options.headerLeadingContent] 타이틀 왼쪽 콘텐츠
  * @param {React.ReactNode} [options.headerTrailingContent] 우측 액션 콘텐츠
+ * @param {boolean} [options.activeCloseButton] 우측 기본 닫기 버튼 표시 여부
  * @param {string} [options.headerClassName] 헤더 className
  * @param {React.ReactNode} [options.customHeader] 완전 커스텀 header
  * @param {React.ReactNode} options.content 본문 콘텐츠
@@ -42,6 +67,7 @@ export function createDialogModal<FormContext extends FieldValues>({
   headerLayout,
   headerLeadingContent,
   headerTrailingContent,
+  activeCloseButton,
   headerClassName,
   customHeader,
   content,
@@ -55,6 +81,16 @@ export function createDialogModal<FormContext extends FieldValues>({
   formContextOptions,
 }: DialogTemplateOptions<FormContext>): ModalState<FormContext> {
   const primary = resolveDialogPrimaryButton(confirm);
+  const hasFormContext = typeof formContextOptions !== "undefined";
+  const resolvedPrimary =
+    hasFormContext && typeof primary.onClick === "undefined"
+      ? {
+          ...primary,
+          // 변경 설명: Form.Provider가 있는 Dialog는 confirm 기본동작을 submit으로 연결하고 자동 close는 비활성화한다.
+          closeOnClick: primary.closeOnClick ?? false,
+          onClick: createDialogFormSubmitHandler(stackKey),
+        }
+      : primary;
 
   const headerNode =
     customHeader ??
@@ -65,13 +101,19 @@ export function createDialogModal<FormContext extends FieldValues>({
         layout={headerLayout}
         leadingContent={headerLeadingContent}
         trailingContent={headerTrailingContent}
+        stackKey={stackKey}
+        activeCloseButton={activeCloseButton}
         className={headerClassName}
       />
     ) : null);
 
   const footerButtons = footer
     ? undefined
-    : createDialogFooterButtons({ stackKey, primary, cancel });
+    : createDialogFooterButtons({
+        stackKey,
+        primary: resolvedPrimary,
+        cancel,
+      });
 
   return {
     stackKey,

package/src/modal/types/components.ts

@@ -256,6 +256,8 @@ export type AlertContentsProps = {
  * @property {ModalDialogHeaderLayout} [layout] 레이아웃 정보
  * @property {ReactNode} [leadingContent] 타이틀 왼쪽 콘텐츠
  * @property {ReactNode} [trailingContent] 우측 액션 콘텐츠
+ * @property {string} [stackKey] 모달 스택 키(기본 닫기 버튼 동작 연결용)
+ * @property {boolean} [activeCloseButton] 우측 기본 닫기 버튼 활성화 여부
  * @property {string} [className] 추가 className
  */
 export interface DialogHeaderProps {
@@ -279,6 +281,14 @@ export interface DialogHeaderProps {
    * 우측 액션 콘텐츠
    */
   trailingContent?: ReactNode;
+  /**
+   * 모달 스택 키(기본 닫기 버튼 동작 연결용)
+   */
+  stackKey?: string;
+  /**
+   * 우측 기본 닫기 버튼 활성화 여부
+   */
+  activeCloseButton?: boolean;
   /**
    * 추가 className
    */

package/src/modal/types/templates.ts

@@ -135,6 +135,7 @@ export type AlertTemplateOptions<
  * @property {ModalDialogHeaderLayout} [headerLayout] 헤더 레이아웃
  * @property {ReactNode} [headerLeadingContent] 타이틀 왼쪽 콘텐츠
  * @property {ReactNode} [headerTrailingContent] 우측 액션 콘텐츠
+ * @property {boolean} [activeCloseButton] 우측 기본 닫기 버튼 표시 여부
  * @property {string} [headerClassName] header 추가 className
  * @property {ReactNode} [customHeader] 완전 커스텀 header
  * @property {ReactNode} content 본문 콘텐츠
@@ -169,6 +170,10 @@ export type DialogTemplateOptions<
    * 우측 액션 콘텐츠
    */
   headerTrailingContent?: ReactNode;
+  /**
+   * 우측 기본 닫기 버튼 표시 여부
+   */
+  activeCloseButton?: boolean;
   /**
    * header 추가 className
    */