viewlogic 1.0.4 → 1.1.1

package/dist/viewlogic-router.js

@@ -1123,6 +1123,7 @@ var QueryManager = class {
     };
     this.router = router;
     this.currentQueryParams = {};
+    this.currentRouteParams = {};
     this.log("info", "QueryManager initialized with config:", this.config);
   }
   /**
@@ -1326,8 +1327,9 @@ var QueryManager = class {
   /**
    * 특정 쿼리 파라미터 가져오기
    */
-  getQueryParam(key) {
-    return this.currentQueryParams ? this.currentQueryParams[key] : void 0;
+  getQueryParam(key, defaultValue = void 0) {
+    const value = this.currentQueryParams ? this.currentQueryParams[key] : void 0;
+    return value !== void 0 ? value : defaultValue;
   }
   /**
    * 쿼리 파라미터 설정
@@ -1391,6 +1393,42 @@ var QueryManager = class {
   setCurrentQueryParams(params) {
     this.currentQueryParams = params || {};
   }
+  /**
+   * 현재 라우팅 파라미터 설정 (navigateTo에서 호출)
+   */
+  setCurrentRouteParams(params) {
+    this.currentRouteParams = params || {};
+    this.log("debug", "Route params set:", this.currentRouteParams);
+  }
+  /**
+   * 통합된 파라미터 반환 (라우팅 파라미터 + 쿼리 파라미터)
+   */
+  getAllParams() {
+    return {
+      ...this.currentRouteParams,
+      ...this.currentQueryParams
+    };
+  }
+  /**
+   * 통합된 파라미터에서 특정 키 값 반환
+   */
+  getParam(key, defaultValue = void 0) {
+    const value = this.currentQueryParams[key] !== void 0 ? this.currentQueryParams[key] : this.currentRouteParams[key];
+    return value !== void 0 ? value : defaultValue;
+  }
+  /**
+   * 라우팅 파라미터만 반환
+   */
+  getRouteParams() {
+    return { ...this.currentRouteParams };
+  }
+  /**
+   * 라우팅 파라미터에서 특정 키 값 반환
+   */
+  getRouteParam(key, defaultValue = void 0) {
+    const value = this.currentRouteParams[key];
+    return value !== void 0 ? value : defaultValue;
+  }
   /**
    * URL 업데이트 (라우터의 updateURL 메소드 호출)
    */
@@ -1416,6 +1454,7 @@ var QueryManager = class {
    */
   destroy() {
     this.currentQueryParams = {};
+    this.currentRouteParams = {};
     this.router = null;
     this.log("debug", "QueryManager destroyed");
   }
@@ -1558,20 +1597,26 @@ ${template}`;
         template = this.mergeLayoutWithTemplate(routeName, layout, template);
       }
     }
+    let loadedComponents = {};
+    if (this.config.useComponents && router.componentLoader) {
+      try {
+        loadedComponents = await router.componentLoader.loadAllComponents();
+        this.log("debug", `Components loaded successfully for route: ${routeName}`);
+      } catch (error) {
+        this.log("warn", `Component loading failed for route '${routeName}', continuing without components:`, error.message);
+        loadedComponents = {};
+      }
+    }
     const component = {
       ...script,
       name: script.name || this.toPascalCase(routeName),
       template,
-      components: this.config.useComponents && router.componentLoader ? await router.componentLoader.loadAllComponents() : {},
+      components: loadedComponents,
       data() {
         const originalData = script.data ? script.data() : {};
         const commonData = {
           ...originalData,
           currentRoute: routeName,
-          pageTitle: script.pageTitle || router.routeLoader.generatePageTitle(routeName),
-          showHeader: script.showHeader !== false,
-          headerTitle: script.headerTitle || router.routeLoader.generatePageTitle(routeName),
-          headerSubtitle: script.headerSubtitle,
           $query: router.queryManager?.getQueryParams() || {},
           $lang: router.i18nManager?.getCurrentLanguage() || router.config.i18nDefaultLanguage,
           $dataLoading: false
@@ -1580,8 +1625,9 @@ ${template}`;
       },
       computed: {
         ...script.computed || {},
+        // 하위 호환성을 위해 params는 유지하되 getAllParams 사용
         params() {
-          return router.queryManager?.getQueryParams() || {};
+          return router.queryManager?.getAllParams() || {};
         }
       },
       async mounted() {
@@ -1589,21 +1635,25 @@ ${template}`;
           await script.mounted.call(this);
         }
         if (script.dataURL) {
-          await this.$fetchData();
+          if (typeof script.dataURL === "string") {
+            await this.$fetchData();
+          } else if (typeof script.dataURL === "object") {
+            await this.$fetchMultipleData();
+          }
         }
+        await this.$nextTick();
+        this.$bindAutoForms();
       },
       methods: {
         ...script.methods,
         // 라우팅 관련
         navigateTo: (route, params) => router.navigateTo(route, params),
         getCurrentRoute: () => router.getCurrentRoute(),
-        getQueryParams: () => router.queryManager?.getQueryParams() || {},
-        getQueryParam: (key) => router.queryManager?.getQueryParam(key),
-        setQueryParams: (params, replace) => router.queryManager?.setQueryParams(params, replace),
-        removeQueryParams: (keys) => router.queryManager?.removeQueryParams(keys),
+        // 통합된 파라미터 관리 (라우팅 + 쿼리 파라미터)
+        getParams: () => router.queryManager?.getAllParams() || {},
+        getParam: (key, defaultValue) => router.queryManager?.getParam(key, defaultValue),
         // i18n 관련
         $t: (key, params) => router.i18nManager?.t(key, params) || key,
-        $i18n: () => router.i18nManager || null,
         // 인증 관련
         $isAuthenticated: () => router.authManager?.isUserAuthenticated() || false,
         $logout: () => router.authManager ? router.navigateTo(router.authManager.handleLogout()) : null,
@@ -1614,21 +1664,245 @@ ${template}`;
         $removeToken: (storage) => router.authManager?.removeAccessToken(storage) || null,
         $getAuthCookie: () => router.authManager?.getAuthCookie() || null,
         $getCookie: (name) => router.authManager?.getCookieValue(name) || null,
-        // 데이터 fetch
-        async $fetchData() {
+        // 데이터 fetch (단일 API 또는 특정 API)
+        async $fetchData(apiName) {
           if (!script.dataURL) return;
           this.$dataLoading = true;
           try {
-            const data = await router.routeLoader.fetchComponentData(script.dataURL);
-            if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Data fetched for ${routeName}:`, data);
-            Object.assign(this, data);
-            this.$emit("data-loaded", data);
+            if (typeof script.dataURL === "string") {
+              const data = await router.routeLoader.fetchComponentData(script.dataURL);
+              if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Data fetched for ${routeName}:`, data);
+              Object.assign(this, data);
+              this.$emit("data-loaded", data);
+            } else if (typeof script.dataURL === "object" && apiName) {
+              const url = script.dataURL[apiName];
+              if (url) {
+                const data = await router.routeLoader.fetchComponentData(url);
+                if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Data fetched for ${routeName}.${apiName}:`, data);
+                this[apiName] = data;
+                this.$emit("data-loaded", { [apiName]: data });
+              }
+            } else {
+              await this.$fetchMultipleData();
+            }
           } catch (error) {
             if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Failed to fetch data for ${routeName}:`, error);
             this.$emit("data-error", error);
           } finally {
             this.$dataLoading = false;
           }
+        },
+        // 다중 API 데이터 fetch
+        async $fetchMultipleData() {
+          if (!script.dataURL || typeof script.dataURL !== "object") return;
+          const dataURLs = script.dataURL;
+          this.$dataLoading = true;
+          try {
+            const promises = Object.entries(dataURLs).map(async ([key, url]) => {
+              try {
+                const data = await router.routeLoader.fetchComponentData(url);
+                return { key, data, success: true };
+              } catch (error) {
+                if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Failed to fetch ${key} for ${routeName}:`, error);
+                return { key, error, success: false };
+              }
+            });
+            const results = await Promise.all(promises);
+            const successfulResults = {};
+            const errors = {};
+            results.forEach(({ key, data, error, success }) => {
+              if (success) {
+                this[key] = data;
+                successfulResults[key] = data;
+              } else {
+                errors[key] = error;
+              }
+            });
+            if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Multiple data fetched for ${routeName}:`, successfulResults);
+            if (Object.keys(successfulResults).length > 0) {
+              this.$emit("data-loaded", successfulResults);
+            }
+            if (Object.keys(errors).length > 0) {
+              this.$emit("data-error", errors);
+            }
+          } catch (error) {
+            if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Failed to fetch multiple data for ${routeName}:`, error);
+            this.$emit("data-error", error);
+          } finally {
+            this.$dataLoading = false;
+          }
+        },
+        // 전체 데이터 새로고침 (명시적 메서드)
+        async $fetchAllData() {
+          if (typeof script.dataURL === "string") {
+            await this.$fetchData();
+          } else if (typeof script.dataURL === "object") {
+            await this.$fetchMultipleData();
+          }
+        },
+        // 🆕 자동 폼 바인딩 메서드
+        $bindAutoForms() {
+          const forms = document.querySelectorAll("form.auto-form, form[action]");
+          forms.forEach((form) => {
+            form.removeEventListener("submit", form._boundSubmitHandler);
+            const boundHandler = (e) => this.$handleFormSubmit(e);
+            form._boundSubmitHandler = boundHandler;
+            form.addEventListener("submit", boundHandler);
+            if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Form auto-bound: ${form.getAttribute("action")}`);
+          });
+        },
+        // 🆕 폼 서브밋 핸들러
+        async $handleFormSubmit(event) {
+          event.preventDefault();
+          const form = event.target;
+          let action = form.getAttribute("action");
+          const method = form.getAttribute("method") || "POST";
+          const successHandler = form.getAttribute("data-success-handler");
+          const errorHandler = form.getAttribute("data-error-handler");
+          const loadingHandler = form.getAttribute("data-loading-handler");
+          const redirectTo = form.getAttribute("data-redirect");
+          try {
+            if (loadingHandler && this[loadingHandler]) {
+              this[loadingHandler](true, form);
+            }
+            action = this.$processActionParams(action);
+            if (!this.$validateForm(form)) {
+              return;
+            }
+            const formData = new FormData(form);
+            const data = Object.fromEntries(formData.entries());
+            if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Form submitting to: ${action}`, data);
+            const response = await this.$submitFormData(action, method, data, form);
+            if (successHandler && this[successHandler]) {
+              this[successHandler](response, form);
+            }
+            if (redirectTo) {
+              setTimeout(() => {
+                this.navigateTo(redirectTo);
+              }, 1e3);
+            }
+          } catch (error) {
+            if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Form submission error:`, error);
+            if (errorHandler && this[errorHandler]) {
+              this[errorHandler](error, form);
+            } else {
+              console.error("Form submission error:", error);
+            }
+          } finally {
+            if (loadingHandler && this[loadingHandler]) {
+              this[loadingHandler](false, form);
+            }
+          }
+        },
+        // 🆕 액션 파라미터 처리 메서드 (간단한 템플릿 치환)
+        $processActionParams(actionTemplate) {
+          let processedAction = actionTemplate;
+          const paramMatches = actionTemplate.match(/\{([^}]+)\}/g);
+          if (paramMatches) {
+            paramMatches.forEach((match) => {
+              const paramName = match.slice(1, -1);
+              try {
+                let paramValue = null;
+                paramValue = this.getParam(paramName);
+                if (paramValue === null || paramValue === void 0) {
+                  paramValue = this[paramName];
+                }
+                if (paramValue === null || paramValue === void 0) {
+                  if (this.$options.computed && this.$options.computed[paramName]) {
+                    paramValue = this[paramName];
+                  }
+                }
+                if (paramValue !== null && paramValue !== void 0) {
+                  processedAction = processedAction.replace(
+                    match,
+                    encodeURIComponent(paramValue)
+                  );
+                  if (router.errorHandler) router.errorHandler.debug("RouteLoader", `Parameter resolved: ${paramName} = ${paramValue}`);
+                } else {
+                  if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Parameter '${paramName}' not found in component data, computed, or route params`);
+                }
+              } catch (error) {
+                if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Error processing parameter '${paramName}':`, error);
+              }
+            });
+          }
+          return processedAction;
+        },
+        // 🆕 폼 데이터 서브밋
+        async $submitFormData(action, method, data, form) {
+          const hasFile = Array.from(form.elements).some((el) => el.type === "file" && el.files.length > 0);
+          const headers = {
+            "Accept": "application/json",
+            // 인증 토큰 자동 추가
+            ...this.$getToken() && {
+              "Authorization": `Bearer ${this.$getToken()}`
+            }
+          };
+          let body;
+          if (hasFile) {
+            body = new FormData(form);
+          } else {
+            headers["Content-Type"] = "application/json";
+            body = JSON.stringify(data);
+          }
+          const response = await fetch(action, {
+            method: method.toUpperCase(),
+            headers,
+            body
+          });
+          if (!response.ok) {
+            let error;
+            try {
+              error = await response.json();
+            } catch (e) {
+              error = { message: `HTTP ${response.status}: ${response.statusText}` };
+            }
+            throw new Error(error.message || `HTTP ${response.status}`);
+          }
+          try {
+            return await response.json();
+          } catch (e) {
+            return { success: true };
+          }
+        },
+        // 🆕 클라이언트 사이드 폼 검증
+        $validateForm(form) {
+          let isValid = true;
+          const inputs = form.querySelectorAll("input, textarea, select");
+          inputs.forEach((input) => {
+            if (!input.checkValidity()) {
+              isValid = false;
+              input.classList.add("error");
+              return;
+            }
+            const validationFunction = input.getAttribute("data-validation");
+            if (validationFunction) {
+              const isInputValid = this.$validateInput(input, validationFunction);
+              if (!isInputValid) {
+                isValid = false;
+                input.classList.add("error");
+              } else {
+                input.classList.remove("error");
+              }
+            } else {
+              input.classList.remove("error");
+            }
+          });
+          return isValid;
+        },
+        // 🆕 개별 입력 검증
+        $validateInput(input, validationFunction) {
+          const value = input.value;
+          if (typeof this[validationFunction] === "function") {
+            try {
+              return this[validationFunction](value, input);
+            } catch (error) {
+              if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Validation function '${validationFunction}' error:`, error);
+              return false;
+            }
+          }
+          if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Validation function '${validationFunction}' not found`);
+          return true;
         }
       },
       _routeName: routeName
@@ -2245,13 +2519,19 @@ var ViewLogicRouter = class {
         this.authManager = new AuthManager(this, this.config);
       }
       if (this.config.useComponents) {
-        this.componentLoader = new ComponentLoader(this, {
-          ...this.config,
-          basePath: `${this.config.basePath}/components`,
-          cache: true,
-          componentNames: this.config.componentNames
-        });
-        await this.componentLoader.loadAllComponents();
+        try {
+          this.componentLoader = new ComponentLoader(this, {
+            ...this.config,
+            basePath: `${this.config.basePath}/components`,
+            cache: true,
+            componentNames: this.config.componentNames
+          });
+          await this.componentLoader.loadAllComponents();
+          this.log("info", "ComponentLoader initialized successfully");
+        } catch (componentError) {
+          this.log("warn", "ComponentLoader initialization failed, continuing without components:", componentError.message);
+          this.componentLoader = null;
+        }
       }
       this.isReady = true;
       this.init();
@@ -2336,8 +2616,11 @@ var ViewLogicRouter = class {
             originalRoute: routeName,
             loginRoute: this.config.loginRoute
           });
-          const redirectUrl = routeName !== this.config.loginRoute ? `${this.config.loginRoute}?redirect=${encodeURIComponent(routeName)}` : this.config.loginRoute;
-          this.navigateTo(redirectUrl);
+          if (routeName !== this.config.loginRoute) {
+            this.navigateTo(this.config.loginRoute, { redirect: routeName });
+          } else {
+            this.navigateTo(this.config.loginRoute);
+          }
         }
         return;
       }
@@ -2378,10 +2661,17 @@ var ViewLogicRouter = class {
     newVueApp.config.globalProperties.$router = {
       navigateTo: (route, params) => this.navigateTo(route, params),
       getCurrentRoute: () => this.getCurrentRoute(),
+      // 통합된 파라미터 관리 (라우팅 + 쿼리 파라미터)
+      getParams: () => this.queryManager?.getAllParams() || {},
+      getParam: (key, defaultValue) => this.queryManager?.getParam(key, defaultValue),
+      // 쿼리 파라미터 전용 메서드 (하위 호환성)
       getQueryParams: () => this.queryManager?.getQueryParams() || {},
-      getQueryParam: (key) => this.queryManager?.getQueryParam(key),
+      getQueryParam: (key, defaultValue) => this.queryManager?.getQueryParam(key, defaultValue),
       setQueryParams: (params, replace) => this.queryManager?.setQueryParams(params, replace),
       removeQueryParams: (keys) => this.queryManager?.removeQueryParams(keys),
+      // 라우팅 파라미터 전용 메서드
+      getRouteParams: () => this.queryManager?.getRouteParams() || {},
+      getRouteParam: (key, defaultValue) => this.queryManager?.getRouteParam(key, defaultValue),
       currentRoute: this.currentHash,
       currentQuery: this.queryManager?.getQueryParams() || {}
     };
@@ -2428,6 +2718,9 @@ var ViewLogicRouter = class {
     if (routeName !== this.currentHash && this.queryManager) {
       this.queryManager.clearQueryParams();
     }
+    if (this.queryManager) {
+      this.queryManager.setCurrentRouteParams(params);
+    }
     this.updateURL(routeName, params);
   }
   getCurrentRoute() {