viewlogic 1.2.0 → 1.2.1

package/dist/viewlogic-router.js

@@ -1488,6 +1488,7 @@ var FormHandler = class {
     this.router = router;
     this.config = {
       debug: options.debug || false,
+      requestTimeout: options.requestTimeout || 3e4,
       ...options
     };
     this.log("debug", "FormHandler initialized");
@@ -1500,6 +1501,48 @@ var FormHandler = class {
       this.router.errorHandler.log(level, "FormHandler", ...args);
     }
   }
+  /**
+   * 중복 요청 체크
+   */
+  isDuplicateRequest(form) {
+    if (form._isSubmitting) {
+      this.log("debug", "Duplicate request blocked");
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 폼 제출 시작
+   */
+  startFormSubmission(form) {
+    form._isSubmitting = true;
+    form._abortController = new AbortController();
+    form._timeoutId = setTimeout(() => {
+      if (form._isSubmitting) {
+        this.abortFormSubmission(form);
+      }
+    }, this.config.requestTimeout);
+  }
+  /**
+   * 폼 제출 완료
+   */
+  finishFormSubmission(form) {
+    form._isSubmitting = false;
+    if (form._timeoutId) {
+      clearTimeout(form._timeoutId);
+      delete form._timeoutId;
+    }
+    delete form._abortController;
+  }
+  /**
+   * 폼 제출 중단
+   */
+  abortFormSubmission(form) {
+    if (form._abortController) {
+      form._abortController.abort();
+    }
+    this.finishFormSubmission(form);
+  }
   /**
    * 자동 폼 바인딩
    */
@@ -1525,28 +1568,40 @@ var FormHandler = class {
     const errorHandler = form.getAttribute("data-error-handler");
     const loadingHandler = form.getAttribute("data-loading-handler");
     const redirectTo = form.getAttribute("data-redirect");
+    action = this.processActionParams(action, component);
+    if (!this.validateForm(form, component)) {
+      return;
+    }
+    if (this.isDuplicateRequest(form)) {
+      return;
+    }
+    this.startFormSubmission(form);
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
     try {
       if (loadingHandler && component[loadingHandler]) {
         component[loadingHandler](true, form);
       }
-      action = this.processActionParams(action, component);
-      if (!this.validateForm(form, component)) {
-        return;
-      }
-      const formData = new FormData(form);
-      const data = Object.fromEntries(formData.entries());
       this.log("debug", `Form submitting to: ${action}`, data);
-      const response = await this.submitFormData(action, method, data, form, component);
+      const response = await this.submitFormData(action, method, data, form, component, form._abortController.signal);
       if (successHandler && component[successHandler]) {
         component[successHandler](response, form);
       }
+      this.finishFormSubmission(form);
       if (redirectTo) {
-        setTimeout(() => {
-          component.navigateTo(redirectTo);
-        }, 1e3);
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            component.navigateTo(redirectTo);
+          }, 1e3);
+        });
       }
     } catch (error) {
-      this.log("warn", `Form submission error:`, error);
+      if (error.name === "AbortError") {
+        this.log("debug", "Form submission aborted");
+        return;
+      }
+      this.log("warn", "Form submission error:", error);
+      this.finishFormSubmission(form);
       if (errorHandler && component[errorHandler]) {
         component[errorHandler](error, form);
       } else {
@@ -1567,11 +1622,13 @@ var FormHandler = class {
   /**
    * 폼 데이터 서브밋 (ApiHandler 활용)
    */
-  async submitFormData(action, method, data, form, component) {
+  async submitFormData(action, method, data, form, component, signal = null) {
     const hasFile = Array.from(form.elements).some((el) => el.type === "file" && el.files.length > 0);
     const options = {
       method: method.toUpperCase(),
-      headers: {}
+      headers: {},
+      signal
+      // AbortController 신호 추가
     };
     if (hasFile) {
       options.data = new FormData(form);
@@ -1624,20 +1681,44 @@ var FormHandler = class {
     this.log("warn", `Validation function '${validationFunction}' not found`);
     return true;
   }
+  /**
+   * 모든 폼 요청 취소
+   */
+  cancelAllRequests() {
+    const forms = document.querySelectorAll("form");
+    forms.forEach((form) => {
+      if (form._isSubmitting) {
+        this.abortFormSubmission(form);
+      }
+    });
+  }
   /**
    * 정리 (메모리 누수 방지)
    */
   destroy() {
+    this.cancelAllRequests();
     const forms = document.querySelectorAll("form.auto-form, form[action]");
     forms.forEach((form) => {
       if (form._boundSubmitHandler) {
         form.removeEventListener("submit", form._boundSubmitHandler);
         delete form._boundSubmitHandler;
       }
+      this.cleanupFormState(form);
     });
     this.log("debug", "FormHandler destroyed");
     this.router = null;
   }
+  /**
+   * 폼 상태 정리
+   */
+  cleanupFormState(form) {
+    delete form._isSubmitting;
+    delete form._abortController;
+    if (form._timeoutId) {
+      clearTimeout(form._timeoutId);
+      delete form._timeoutId;
+    }
+  }
 };
 
 // src/core/ApiHandler.js