@uniai-fe/uds-templates 0.3.12 → 0.3.14

package/package.json

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

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

@@ -42,33 +42,30 @@ export function ModalContainer({
           "--modal-dialog-body-padding": stylePaddingSize("rem", padding),
         } as CSSProperties)
       : undefined;
+  // 변경: 인라인 함수 컴포넌트 대신 조건부 JSX wrapper로 감싸 form subtree 리마운트를 막는다.
+  const container = (
+    <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}
+      {!footer && footerButtons && footerButtons.length ? (
+        <div className="uds-modal-footer">
+          <ModalFooterButtonWrapper
+            stackKey={stackKey}
+            buttons={footerButtons}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
 
-  const ContextProvider = ({ children }: { children: React.ReactNode }) =>
-    typeof formContextOptions !== "undefined" ? (
-      <Form.Provider options={formContextOptions}>{children}</Form.Provider>
-    ) : (
-      children
-    );
-
-  return (
-    <ContextProvider>
-      <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}
-        {!footer && footerButtons && footerButtons.length ? (
-          <div className="uds-modal-footer">
-            <ModalFooterButtonWrapper
-              stackKey={stackKey}
-              buttons={footerButtons}
-            />
-          </div>
-        ) : null}
-      </div>
-    </ContextProvider>
+  return typeof formContextOptions !== "undefined" ? (
+    <Form.Provider options={formContextOptions}>{container}</Form.Provider>
+  ) : (
+    container
   );
 }

package/src/modal/hooks/useModal.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 import { useAtom } from "jotai";
 
@@ -28,6 +28,12 @@ const ensureDelay = (value?: number): number =>
  */
 export function useModal(): UseModalReturn {
   const [modalStacks, updateModalStack] = useAtom(modalStackAtom);
+  const modalStacksRef = useRef(modalStacks);
+
+  useEffect(() => {
+    // 변경 설명: closeModal이 최신 stack 상태를 기준으로 대상을 찾도록 현재 스냅샷 ref를 동기화한다.
+    modalStacksRef.current = modalStacks;
+  }, [modalStacks]);
 
   const newModal = useCallback(
     <FormContext extends FieldValues>(newStack: ModalState<FormContext>) => {
@@ -87,7 +93,7 @@ export function useModal(): UseModalReturn {
 
   const closeModal = useCallback(
     ({ stackKey, callback }: ModalCloseRequest) => {
-      const targetStack = modalStacks.find(
+      const targetStack = modalStacksRef.current.find(
         stack => stack.stackKey === stackKey,
       );
 
@@ -121,7 +127,7 @@ export function useModal(): UseModalReturn {
         callback?.();
       }, resolvedDelay);
     },
-    [modalStacks, updateModalStack],
+    [updateModalStack],
   );
 
   return { modalStacks, newModal, updateModal, closeModal };