viewlogic 1.1.2 → 1.2.0

package/dist/viewlogic-router.js

@@ -42,6 +42,8 @@ var I18nManager = class {
         await this.loadMessages(this.currentLanguage);
       } catch (error) {
         this.log("error", "Failed to load initial language file:", error);
+        this.messages.set(this.currentLanguage, {});
+        this.log("info", "Using empty message object as fallback");
       }
     } else {
       this.log("debug", "Language messages already loaded:", this.currentLanguage);
@@ -98,9 +100,17 @@ var I18nManager = class {
       this.log("info", "Language changed successfully", { from: oldLanguage, to: language });
       return true;
     } catch (error) {
-      this.currentLanguage = oldLanguage;
-      this.log("error", "Failed to change language:", error);
-      return false;
+      this.log("error", "Failed to load messages for language change, using empty messages:", error);
+      this.messages.set(language, {});
+      this.saveLanguageToCache(language);
+      this.emit("languageChanged", {
+        from: oldLanguage,
+        to: language,
+        messages: {},
+        error: true
+      });
+      this.log("warn", "Language changed with empty messages", { from: oldLanguage, to: language });
+      return true;
     }
   }
   /**
@@ -136,7 +146,10 @@ var I18nManager = class {
       return messages;
     } catch (error) {
       this.loadPromises.delete(language);
-      throw error;
+      this.log("error", "Failed to load messages, using empty fallback for:", language, error);
+      const emptyMessages = {};
+      this.messages.set(language, emptyMessages);
+      return emptyMessages;
     }
   }
   /**
@@ -165,9 +178,15 @@ var I18nManager = class {
       this.log("error", "Failed to load messages file for:", language, error);
       if (language !== this.config.fallbackLanguage) {
         this.log("info", "Trying fallback language:", this.config.fallbackLanguage);
-        return await this._loadMessagesFromFile(this.config.fallbackLanguage);
+        try {
+          return await this._loadMessagesFromFile(this.config.fallbackLanguage);
+        } catch (fallbackError) {
+          this.log("error", "Fallback language also failed:", fallbackError);
+          return {};
+        }
       }
-      throw new Error(`Failed to load messages for language: ${language}`);
+      this.log("warn", `No messages available for language: ${language}, using empty fallback`);
+      return {};
     }
   }
   /**
@@ -352,7 +371,8 @@ var I18nManager = class {
       return true;
     } catch (error) {
       this.log("error", "I18n initialization failed:", error);
-      return false;
+      this.log("info", "I18n system ready with fallback behavior");
+      return true;
     }
   }
   /**
@@ -413,7 +433,8 @@ var I18nManager = class {
       return true;
     } catch (error) {
       this.log("error", "Failed to initialize I18n system:", error);
-      return false;
+      this.log("info", "I18n system will continue with fallback behavior");
+      return true;
     }
   }
 };
@@ -972,6 +993,7 @@ var CacheManager = class {
     this.cacheTimestamps.clear();
     this.lruOrder = [];
     this.log(`\u{1F525} Cleared all cache (${size} entries)`);
+    return size;
   }
   /**
    * 만료된 캐시 항목들 정리
@@ -1460,449 +1482,884 @@ var QueryManager = class {
   }
 };
 
-// src/core/RouteLoader.js
-var RouteLoader = class {
+// src/core/FormHandler.js
+var FormHandler = class {
   constructor(router, options = {}) {
+    this.router = router;
     this.config = {
-      basePath: options.basePath || "/src",
-      routesPath: options.routesPath || "/routes",
-      environment: options.environment || "development",
-      useLayout: options.useLayout !== false,
-      defaultLayout: options.defaultLayout || "default",
-      useComponents: options.useComponents !== false,
-      debug: options.debug || false
+      debug: options.debug || false,
+      ...options
     };
-    this.router = router;
-    this.log("debug", "RouteLoader initialized with config:", this.config);
+    this.log("debug", "FormHandler initialized");
   }
   /**
-   * 스크립트 파일 로드
+   * 로깅 래퍼 메서드
    */
-  async loadScript(routeName) {
-    let script;
+  log(level, ...args) {
+    if (this.router?.errorHandler) {
+      this.router.errorHandler.log(level, "FormHandler", ...args);
+    }
+  }
+  /**
+   * 자동 폼 바인딩
+   */
+  bindAutoForms(component) {
+    const forms = document.querySelectorAll("form.auto-form, form[action]");
+    forms.forEach((form) => {
+      form.removeEventListener("submit", form._boundSubmitHandler);
+      const boundHandler = (e) => this.handleFormSubmit(e, component);
+      form._boundSubmitHandler = boundHandler;
+      form.addEventListener("submit", boundHandler);
+      this.log("debug", `Form auto-bound: ${form.getAttribute("action")}`);
+    });
+  }
+  /**
+   * 폼 서브밋 핸들러
+   */
+  async handleFormSubmit(event, component) {
+    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 (this.config.environment === "production") {
-        const importPath = `${this.config.routesPath}/${routeName}.js`;
-        this.log("debug", `Loading production route: ${importPath}`);
-        const module = await import(importPath);
-        script = module.default;
-      } else {
-        const importPath = `${this.config.basePath}/logic/${routeName}.js`;
-        this.log("debug", `Loading development route: ${importPath}`);
-        const module = await import(importPath);
-        script = module.default;
+      if (loadingHandler && component[loadingHandler]) {
+        component[loadingHandler](true, form);
       }
-      if (!script) {
-        throw new Error(`Route '${routeName}' not found - no default export`);
+      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);
+      if (successHandler && component[successHandler]) {
+        component[successHandler](response, form);
+      }
+      if (redirectTo) {
+        setTimeout(() => {
+          component.navigateTo(redirectTo);
+        }, 1e3);
       }
     } catch (error) {
-      if (error.message.includes("Failed to resolve") || error.message.includes("Failed to fetch") || error.message.includes("not found") || error.name === "TypeError") {
-        throw new Error(`Route '${routeName}' not found - 404`);
+      this.log("warn", `Form submission error:`, error);
+      if (errorHandler && component[errorHandler]) {
+        component[errorHandler](error, form);
+      } else {
+        console.error("Form submission error:", error);
+      }
+    } finally {
+      if (loadingHandler && component[loadingHandler]) {
+        component[loadingHandler](false, form);
       }
-      throw error;
     }
-    return script;
   }
   /**
-   * 템플릿 파일 로드 (실패시 기본값 반환)
+   * 액션 파라미터 처리 (ApiHandler 재사용)
    */
-  async loadTemplate(routeName) {
-    try {
-      const templatePath = `${this.config.basePath}/views/${routeName}.html`;
-      const response = await fetch(templatePath);
-      if (!response.ok) throw new Error(`Template not found: ${response.status}`);
-      const template = await response.text();
-      this.log("debug", `Template '${routeName}' loaded successfully`);
-      return template;
-    } catch (error) {
-      this.log("warn", `Template '${routeName}' not found, using default:`, error.message);
-      return this.generateDefaultTemplate(routeName);
-    }
+  processActionParams(actionTemplate, component) {
+    return this.router.routeLoader.apiHandler.processURLParameters(actionTemplate, component);
   }
   /**
-   * 스타일 파일 로드 (실패시 빈 문자열 반환)
+   * 폼 데이터 서브밋 (ApiHandler 활용)
    */
-  async loadStyle(routeName) {
-    try {
-      const stylePath = `${this.config.basePath}/styles/${routeName}.css`;
-      const response = await fetch(stylePath);
-      if (!response.ok) throw new Error(`Style not found: ${response.status}`);
-      const style = await response.text();
-      this.log("debug", `Style '${routeName}' loaded successfully`);
-      return style;
-    } catch (error) {
-      this.log("debug", `Style '${routeName}' not found, no styles applied:`, error.message);
-      return "";
+  async submitFormData(action, method, data, form, component) {
+    const hasFile = Array.from(form.elements).some((el) => el.type === "file" && el.files.length > 0);
+    const options = {
+      method: method.toUpperCase(),
+      headers: {}
+    };
+    if (hasFile) {
+      options.data = new FormData(form);
+    } else {
+      options.data = data;
+      options.headers["Content-Type"] = "application/json";
     }
+    return await this.router.routeLoader.apiHandler.fetchData(action, component, options);
   }
   /**
-   * 레이아웃 파일 로드 (실패시 null 반환)
+   * 클라이언트 사이드 폼 검증
    */
-  async loadLayout(layoutName) {
-    try {
-      const layoutPath = `${this.config.basePath}/layouts/${layoutName}.html`;
-      const response = await fetch(layoutPath);
-      if (!response.ok) throw new Error(`Layout not found: ${response.status}`);
-      const layout = await response.text();
-      this.log("debug", `Layout '${layoutName}' loaded successfully`);
-      return layout;
-    } catch (error) {
-      this.log("debug", `Layout '${layoutName}' not found, no layout applied:`, error.message);
-      return null;
-    }
+  validateForm(form, component) {
+    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, component);
+        if (!isInputValid) {
+          isValid = false;
+          input.classList.add("error");
+        } else {
+          input.classList.remove("error");
+        }
+      } else {
+        input.classList.remove("error");
+      }
+    });
+    return isValid;
   }
   /**
-   * 레이아웃과 템플릿 병합
+   * 개별 입력 검증
    */
-  mergeLayoutWithTemplate(routeName, layout, template) {
-    let result;
-    if (layout.includes("{{ content }}")) {
-      result = layout.replace(
-        /{{ content }}/s,
-        template
-      );
-    } else if (layout.includes('class="main-content"')) {
-      this.log("debug", "Using main-content replacement");
-      result = layout.replace(
-        /(<div class="container">).*?(<\/div>\s*<\/main>)/s,
-        `$1${template}$2`
-      );
-    } else {
-      this.log("debug", "Wrapping template with layout");
-      result = `${layout}
-${template}`;
+  validateInput(input, validationFunction, component) {
+    const value = input.value;
+    if (typeof component[validationFunction] === "function") {
+      try {
+        return component[validationFunction](value, input);
+      } catch (error) {
+        this.log("warn", `Validation function '${validationFunction}' error:`, error);
+        return false;
+      }
     }
-    return result;
+    this.log("warn", `Validation function '${validationFunction}' not found`);
+    return true;
   }
   /**
-   * Vue 컴포넌트 생성
+   * 정리 (메모리 누수 방지)
    */
-  async createVueComponent(routeName) {
-    const cacheKey = `component_${routeName}`;
-    const cached = this.router.cacheManager?.getFromCache(cacheKey);
-    if (cached) {
-      return cached;
-    }
-    const script = await this.loadScript(routeName);
-    const router = this.router;
-    const isProduction = this.config.environment === "production";
-    let template, style = "", layout = null;
-    if (isProduction) {
-      template = script.template || this.generateDefaultTemplate(routeName);
-    } else {
-      template = await this.loadTemplate(routeName);
-      style = await this.loadStyle(routeName);
-      layout = this.config.useLayout && script.layout !== null ? await this.loadLayout(script.layout || this.config.defaultLayout) : null;
-      if (layout) {
-        template = this.mergeLayoutWithTemplate(routeName, layout, template);
+  destroy() {
+    const forms = document.querySelectorAll("form.auto-form, form[action]");
+    forms.forEach((form) => {
+      if (form._boundSubmitHandler) {
+        form.removeEventListener("submit", form._boundSubmitHandler);
+        delete form._boundSubmitHandler;
       }
+    });
+    this.log("debug", "FormHandler destroyed");
+    this.router = null;
+  }
+};
+
+// src/core/ApiHandler.js
+var ApiHandler = class {
+  constructor(router, options = {}) {
+    this.router = router;
+    this.config = {
+      debug: options.debug || false,
+      timeout: options.timeout || 1e4,
+      retries: options.retries || 1,
+      ...options
+    };
+    this.log("debug", "ApiHandler initialized");
+  }
+  /**
+   * 로깅 래퍼 메서드
+   */
+  log(level, ...args) {
+    if (this.router?.errorHandler) {
+      this.router.errorHandler.log(level, "ApiHandler", ...args);
     }
-    let loadedComponents = {};
-    if (this.config.useComponents && router.componentLoader) {
+  }
+  /**
+   * 컴포넌트 데이터 가져오기 (파라미터 치환 지원)
+   */
+  async fetchData(dataURL, component = null, options = {}) {
+    try {
+      let processedURL = this.processURLParameters(dataURL, component);
+      const queryString = this.router.queryManager?.buildQueryString(this.router.queryManager?.getQueryParams()) || "";
+      const fullURL = queryString ? `${processedURL}?${queryString}` : processedURL;
+      this.log("debug", `Fetching data from: ${fullURL}`);
+      const requestOptions = {
+        method: options.method || "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json",
+          ...options.headers
+        },
+        ...options
+      };
+      if (component?.$getToken && component.$getToken()) {
+        requestOptions.headers["Authorization"] = `Bearer ${component.$getToken()}`;
+      }
+      if (options.data && ["POST", "PUT", "PATCH"].includes(requestOptions.method.toUpperCase())) {
+        if (options.data instanceof FormData) {
+          requestOptions.body = options.data;
+          delete requestOptions.headers["Content-Type"];
+        } else {
+          requestOptions.body = JSON.stringify(options.data);
+        }
+      }
+      const response = await fetch(fullURL, requestOptions);
+      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 {
-        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 data = await response.json();
+        if (typeof data !== "object" || data === null) {
+          throw new Error("Invalid data format: expected object");
+        }
+        return data;
+      } catch (e) {
+        return { success: true };
       }
+    } catch (error) {
+      this.log("error", "Failed to fetch data:", error);
+      throw error;
     }
-    const component = {
-      ...script,
-      name: script.name || this.toPascalCase(routeName),
-      template,
-      components: loadedComponents,
-      data() {
-        const originalData = script.data ? script.data() : {};
-        const commonData = {
-          ...originalData,
-          currentRoute: routeName,
-          $query: router.queryManager?.getQueryParams() || {},
-          $lang: router.i18nManager?.getCurrentLanguage() || router.config.i18nDefaultLanguage,
-          $dataLoading: false
-        };
-        return commonData;
-      },
-      computed: {
-        ...script.computed || {},
-        // 하위 호환성을 위해 params는 유지하되 getAllParams 사용
-        params() {
-          return router.queryManager?.getAllParams() || {};
+  }
+  /**
+   * 여러 API 엔드포인트에서 데이터 가져오기
+   */
+  async fetchMultipleData(dataConfig, component = null) {
+    if (!dataConfig || typeof dataConfig !== "object") {
+      return {};
+    }
+    const results = {};
+    const errors = {};
+    const promises = Object.entries(dataConfig).map(async ([key, config]) => {
+      try {
+        let url, options = {};
+        if (typeof config === "string") {
+          url = config;
+        } else if (typeof config === "object") {
+          url = config.url;
+          options = { ...config };
+          delete options.url;
         }
-      },
-      async mounted() {
-        if (script.mounted) {
-          await script.mounted.call(this);
+        if (url) {
+          const data = await this.fetchData(url, component, options);
+          results[key] = data;
         }
-        if (script.dataURL) {
-          if (typeof script.dataURL === "string") {
-            await this.$fetchData();
-          } else if (typeof script.dataURL === "object") {
-            await this.$fetchMultipleData();
+      } catch (error) {
+        errors[key] = error;
+        this.log("warn", `Failed to fetch data for '${key}':`, error);
+      }
+    });
+    await Promise.all(promises);
+    return { results, errors };
+  }
+  /**
+   * URL에서 파라미터 치환 처리 ({param} 형식)
+   */
+  processURLParameters(url, component = null) {
+    if (!url || typeof url !== "string") return url;
+    let processedURL = url;
+    const paramMatches = url.match(/\{([^}]+)\}/g);
+    if (paramMatches && component) {
+      paramMatches.forEach((match) => {
+        const paramName = match.slice(1, -1);
+        try {
+          let paramValue = null;
+          if (component.getParam) {
+            paramValue = component.getParam(paramName);
           }
-        }
-        await this.$nextTick();
-        this.$bindAutoForms();
-      },
-      methods: {
-        ...script.methods,
-        // 라우팅 관련
-        navigateTo: (route, params) => router.navigateTo(route, params),
-        getCurrentRoute: () => router.getCurrentRoute(),
-        // 통합된 파라미터 관리 (라우팅 + 쿼리 파라미터)
-        getParams: () => router.queryManager?.getAllParams() || {},
-        getParam: (key, defaultValue) => router.queryManager?.getParam(key, defaultValue),
-        // i18n 관련
-        $t: (key, params) => router.i18nManager?.t(key, params) || key,
-        // 인증 관련
-        $isAuthenticated: () => router.authManager?.isUserAuthenticated() || false,
-        $logout: () => router.authManager ? router.navigateTo(router.authManager.handleLogout()) : null,
-        $loginSuccess: (target) => router.authManager ? router.navigateTo(router.authManager.handleLoginSuccess(target)) : null,
-        $checkAuth: (route) => router.authManager ? router.authManager.checkAuthentication(route) : Promise.resolve({ allowed: true, reason: "auth_disabled" }),
-        $getToken: () => router.authManager?.getAccessToken() || null,
-        $setToken: (token, options) => router.authManager?.setAccessToken(token, options) || false,
-        $removeToken: (storage) => router.authManager?.removeAccessToken(storage) || null,
-        $getAuthCookie: () => router.authManager?.getAuthCookie() || null,
-        $getCookie: (name) => router.authManager?.getCookieValue(name) || null,
-        // 데이터 fetch (단일 API 또는 특정 API)
-        async $fetchData(apiName) {
-          if (!script.dataURL) return;
-          this.$dataLoading = true;
-          try {
-            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();
+          if (paramValue === null || paramValue === void 0) {
+            paramValue = component[paramName];
+          }
+          if (paramValue === null || paramValue === void 0) {
+            if (component.$options?.computed?.[paramName]) {
+              paramValue = component[paramName];
             }
+          }
+          if (paramValue === null || paramValue === void 0) {
+            paramValue = this.router.queryManager?.getParam(paramName);
+          }
+          if (paramValue !== null && paramValue !== void 0) {
+            processedURL = processedURL.replace(
+              match,
+              encodeURIComponent(paramValue)
+            );
+            this.log("debug", `URL parameter resolved: ${paramName} = ${paramValue}`);
+          } else {
+            this.log("warn", `URL parameter '${paramName}' not found, keeping original: ${match}`);
+          }
+        } catch (error) {
+          this.log("warn", `Error processing URL parameter '${paramName}':`, error);
+        }
+      });
+    }
+    return processedURL;
+  }
+  /**
+   * HTTP 메서드별 헬퍼 함수들
+   */
+  async get(url, component = null, options = {}) {
+    return this.fetchData(url, component, { ...options, method: "GET" });
+  }
+  async post(url, data, component = null, options = {}) {
+    return this.fetchData(url, component, { ...options, method: "POST", data });
+  }
+  async put(url, data, component = null, options = {}) {
+    return this.fetchData(url, component, { ...options, method: "PUT", data });
+  }
+  async patch(url, data, component = null, options = {}) {
+    return this.fetchData(url, component, { ...options, method: "PATCH", data });
+  }
+  async delete(url, component = null, options = {}) {
+    return this.fetchData(url, component, { ...options, method: "DELETE" });
+  }
+  /**
+   * 정리 (메모리 누수 방지)
+   */
+  destroy() {
+    this.log("debug", "ApiHandler destroyed");
+    this.router = null;
+  }
+};
+
+// src/core/ComponentLoader.js
+var ComponentLoader = class {
+  constructor(router = null, options = {}) {
+    this.config = {
+      componentsPath: options.componentsPath || "/components",
+      // srcPath 기준 상대 경로
+      debug: options.debug || false,
+      environment: options.environment || "development",
+      ...options
+    };
+    this.router = router;
+    this.loadingPromises = /* @__PURE__ */ new Map();
+    this.unifiedComponents = null;
+  }
+  /**
+   * 로깅 래퍼 메서드
+   */
+  log(level, ...args) {
+    if (this.router?.errorHandler) {
+      this.router.errorHandler.log(level, "ComponentLoader", ...args);
+    }
+  }
+  /**
+   * 컴포넌트를 비동기로 로드 (캐시 지원)
+   */
+  async loadComponent(componentName) {
+    if (!componentName || typeof componentName !== "string") {
+      throw new Error("Component name must be a non-empty string");
+    }
+    const cacheKey = `component_${componentName}`;
+    const cachedComponent = this.router?.cacheManager?.getFromCache(cacheKey);
+    if (cachedComponent) {
+      this.log("debug", `Component '${componentName}' loaded from cache`);
+      return cachedComponent;
+    }
+    if (this.loadingPromises.has(componentName)) {
+      return this.loadingPromises.get(componentName);
+    }
+    const loadPromise = this._loadComponentFromFile(componentName);
+    this.loadingPromises.set(componentName, loadPromise);
+    try {
+      const component = await loadPromise;
+      if (component && this.router?.cacheManager) {
+        this.router.cacheManager.setCache(cacheKey, component);
+        this.log("debug", `Component '${componentName}' cached successfully`);
+      }
+      return component;
+    } catch (error) {
+      throw error;
+    } finally {
+      this.loadingPromises.delete(componentName);
+    }
+  }
+  /**
+   * 파일에서 컴포넌트 로드
+   */
+  async _loadComponentFromFile(componentName) {
+    const componentRelativePath = `${this.config.componentsPath}/${componentName}.js`;
+    let componentPath;
+    if (this.router && this.router.config.srcPath) {
+      const srcPath = this.router.config.srcPath;
+      if (srcPath.startsWith("http")) {
+        const cleanSrcPath = srcPath.endsWith("/") ? srcPath.slice(0, -1) : srcPath;
+        const cleanComponentPath = componentRelativePath.startsWith("/") ? componentRelativePath : `/${componentRelativePath}`;
+        componentPath = `${cleanSrcPath}${cleanComponentPath}`;
+      } else {
+        componentPath = this.router.resolvePath(`${srcPath}${componentRelativePath}`);
+      }
+    } else {
+      componentPath = this.router ? this.router.resolvePath(`/src${componentRelativePath}`) : `/src${componentRelativePath}`;
+    }
+    try {
+      const module = await import(componentPath);
+      const component = module.default;
+      if (!component) {
+        throw new Error(`Component '${componentName}' has no default export`);
+      }
+      if (!component.name) {
+        component.name = componentName;
+      }
+      this.log("debug", `Component '${componentName}' loaded successfully`);
+      return component;
+    } catch (error) {
+      this.log("error", `Failed to load component '${componentName}':`, error);
+      throw new Error(`Component '${componentName}' not found: ${error.message}`);
+    }
+  }
+  /**
+   * 컴포넌트 모듈 클리어
+   */
+  clearComponents() {
+    this.loadingPromises.clear();
+    this.unifiedComponents = null;
+    this.log("debug", "All components cleared");
+  }
+  /**
+   * 환경에 따른 모든 컴포넌트 로딩 (캐싱 지원)
+   */
+  async loadAllComponents(componentNames = null) {
+    let components;
+    if (this.config.environment === "production") {
+      if (this.unifiedComponents) {
+        this.log("debug", "Using existing unified components");
+        return this.unifiedComponents;
+      }
+      components = await this._loadProductionComponents();
+    } else {
+      components = await this._loadDevelopmentComponents(componentNames);
+    }
+    return components;
+  }
+  /**
+   * 운영 모드: 통합 컴포넌트 로딩
+   */
+  async _loadProductionComponents() {
+    try {
+      const componentsPath = `${this.router?.config?.routesPath || "/routes"}/_components.js`;
+      this.log("info", "[PRODUCTION] Loading unified components from:", componentsPath);
+      const componentsModule = await import(componentsPath);
+      if (typeof componentsModule.registerComponents === "function") {
+        this.unifiedComponents = componentsModule.components || {};
+        this.log("info", `[PRODUCTION] Unified components loaded: ${Object.keys(this.unifiedComponents).length} components`);
+        return this.unifiedComponents;
+      } else {
+        throw new Error("registerComponents function not found in components module");
+      }
+    } catch (error) {
+      this.log("warn", "[PRODUCTION] Failed to load unified components:", error.message);
+      this.unifiedComponents = {};
+      return {};
+    }
+  }
+  /**
+   * 개발 모드: 개별 컴포넌트 로딩
+   */
+  async _loadDevelopmentComponents(componentNames = null) {
+    const namesToLoad = componentNames || [];
+    const components = {};
+    if (namesToLoad.length === 0) {
+      this.log("info", "[DEVELOPMENT] No components to load");
+      return components;
+    }
+    this.log("info", `[DEVELOPMENT] Loading individual components: ${namesToLoad.join(", ")}`);
+    for (const name of namesToLoad) {
+      try {
+        const component = await this.loadComponent(name);
+        if (component) {
+          components[name] = component;
+        }
+      } catch (loadError) {
+        this.log("warn", `[DEVELOPMENT] Failed to load component ${name}:`, loadError.message);
+      }
+    }
+    this.log("info", `[DEVELOPMENT] Individual components loaded: ${Object.keys(components).length} components`);
+    return components;
+  }
+  /**
+   * 템플릿과 레이아웃에서 사용된 컴포넌트 추출
+   */
+  getComponentNames(template, layout = null, layoutName = null) {
+    const componentSet = layout ? this._getLayoutComponents(layout, layoutName) : /* @__PURE__ */ new Set();
+    if (template) {
+      this._extractComponentsFromContent(template, componentSet);
+    }
+    const components = Array.from(componentSet);
+    this.log("debug", `Discovered ${components.length} components:`, components);
+    return components;
+  }
+  /**
+   * 레이아웃에서 컴포넌트 추출 (캐시 활용)
+   */
+  _getLayoutComponents(layout, layoutName) {
+    if (!layout || typeof layout !== "string") return /* @__PURE__ */ new Set();
+    if (!layoutName || typeof layoutName !== "string") return /* @__PURE__ */ new Set();
+    const cacheKey = `layout_components_${layoutName}`;
+    const cachedComponents = this.router?.cacheManager?.getFromCache(cacheKey);
+    if (cachedComponents) {
+      this.log("debug", `Using cached layout components for '${layoutName}'`);
+      return cachedComponents;
+    }
+    const componentSet = /* @__PURE__ */ new Set();
+    this._extractComponentsFromContent(layout, componentSet);
+    if (this.router?.cacheManager) {
+      this.router.cacheManager.setCache(cacheKey, componentSet);
+      this.log("debug", `Cached layout components for '${layoutName}': ${Array.from(componentSet).join(", ")}`);
+    }
+    return componentSet;
+  }
+  /**
+   * HTML 컨텐츠에서 Vue 컴포넌트 추출
+   */
+  _extractComponentsFromContent(content, componentSet) {
+    if (!content || typeof content !== "string") return;
+    const componentPattern = /<([A-Z][a-zA-Z0-9]*)(?:\s[^>]*)?\/?>|<\/([A-Z][a-zA-Z0-9]*)\s*>/gs;
+    let match;
+    while ((match = componentPattern.exec(content)) !== null) {
+      const componentName = match[1] || match[2];
+      if (componentName && !this._isHtmlTag(componentName)) {
+        componentSet.add(componentName);
+        this.log("debug", `Found component: ${componentName}`);
+      }
+    }
+  }
+  /**
+   * HTML 기본 태그인지 확인
+   */
+  _isHtmlTag(tagName) {
+    const htmlTags = [
+      "div",
+      "span",
+      "p",
+      "a",
+      "img",
+      "ul",
+      "ol",
+      "li",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "table",
+      "tr",
+      "td",
+      "th",
+      "form",
+      "select",
+      "option",
+      "textarea",
+      "nav",
+      "header",
+      "footer",
+      "main",
+      "section",
+      "article",
+      "aside",
+      "figure",
+      "figcaption",
+      "video",
+      "audio",
+      "canvas",
+      "svg",
+      "iframe",
+      "script",
+      "style",
+      "link",
+      "meta",
+      "title",
+      "body",
+      "html",
+      "head",
+      "template",
+      "slot"
+    ];
+    return htmlTags.includes(tagName);
+  }
+  /**
+   * 메모리 정리
+   */
+  dispose() {
+    this.clearComponents();
+    this.log("debug", "ComponentLoader disposed");
+    this.router = null;
+  }
+};
+
+// src/core/RouteLoader.js
+var RouteLoader = class {
+  constructor(router, options = {}) {
+    this.config = {
+      srcPath: options.srcPath || router.config.srcPath || "/src",
+      // 소스 파일 경로
+      routesPath: options.routesPath || router.config.routesPath || "/routes",
+      // 프로덕션 라우트 경로
+      environment: options.environment || "development",
+      useLayout: options.useLayout !== false,
+      defaultLayout: options.defaultLayout || "default",
+      debug: options.debug || false
+    };
+    this.router = router;
+    this.formHandler = new FormHandler(router, this.config);
+    this.apiHandler = new ApiHandler(router, this.config);
+    this.componentLoader = new ComponentLoader(router, this.config);
+    this.log("debug", "RouteLoader initialized with config:", this.config);
+  }
+  /**
+   * 스크립트 파일 로드
+   */
+  async loadScript(routeName) {
+    let script;
+    try {
+      if (this.config.environment === "production") {
+        const importPath = `${this.config.routesPath}/${routeName}.js`;
+        this.log("debug", `Loading production route: ${importPath}`);
+        const module = await import(importPath);
+        script = module.default;
+      } else {
+        const importPath = `${this.config.srcPath}/logic/${routeName}.js`;
+        this.log("debug", `Loading development route: ${importPath}`);
+        const module = await import(importPath);
+        script = module.default;
+      }
+      if (!script) {
+        throw new Error(`Route '${routeName}' not found - no default export`);
+      }
+    } catch (error) {
+      if (error.message.includes("Failed to resolve") || error.message.includes("Failed to fetch") || error.message.includes("not found") || error.name === "TypeError") {
+        throw new Error(`Route '${routeName}' not found - 404`);
+      }
+      throw error;
+    }
+    return script;
+  }
+  /**
+   * 템플릿 파일 로드 (실패시 기본값 반환)
+   */
+  async loadTemplate(routeName) {
+    try {
+      const templatePath = `${this.config.srcPath}/views/${routeName}.html`;
+      const response = await fetch(templatePath);
+      if (!response.ok) throw new Error(`Template not found: ${response.status}`);
+      const template = await response.text();
+      this.log("debug", `Template '${routeName}' loaded successfully`);
+      return template;
+    } catch (error) {
+      this.log("warn", `Template '${routeName}' not found, using default:`, error.message);
+      return this.generateDefaultTemplate(routeName);
+    }
+  }
+  /**
+   * 스타일 파일 로드 (실패시 빈 문자열 반환)
+   */
+  async loadStyle(routeName) {
+    try {
+      const stylePath = `${this.config.srcPath}/styles/${routeName}.css`;
+      const response = await fetch(stylePath);
+      if (!response.ok) throw new Error(`Style not found: ${response.status}`);
+      const style = await response.text();
+      this.log("debug", `Style '${routeName}' loaded successfully`);
+      return style;
+    } catch (error) {
+      this.log("debug", `Style '${routeName}' not found, no styles applied:`, error.message);
+      return "";
+    }
+  }
+  /**
+   * 레이아웃 파일 로드 (실패시 null 반환)
+   */
+  async loadLayout(layoutName) {
+    try {
+      const layoutPath = `${this.config.srcPath}/layouts/${layoutName}.html`;
+      const response = await fetch(layoutPath);
+      if (!response.ok) throw new Error(`Layout not found: ${response.status}`);
+      const layout = await response.text();
+      this.log("debug", `Layout '${layoutName}' loaded successfully`);
+      return layout;
+    } catch (error) {
+      this.log("debug", `Layout '${layoutName}' not found, no layout applied:`, error.message);
+      return null;
+    }
+  }
+  /**
+   * 레이아웃과 템플릿 병합
+   */
+  mergeLayoutWithTemplate(routeName, layout, template) {
+    let result;
+    if (layout.includes("{{ content }}")) {
+      result = layout.replace(
+        /{{ content }}/s,
+        template
+      );
+    } else if (layout.includes('class="main-content"')) {
+      this.log("debug", "Using main-content replacement");
+      result = layout.replace(
+        /(<div class="container">).*?(<\/div>\s*<\/main>)/s,
+        `$1${template}$2`
+      );
+    } else {
+      this.log("debug", "Wrapping template with layout");
+      result = `${layout}
+${template}`;
+    }
+    return result;
+  }
+  /**
+   * Vue 컴포넌트 생성
+   */
+  async createVueComponent(routeName) {
+    const cacheKey = `component_${routeName}`;
+    const cached = this.router.cacheManager?.getFromCache(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const script = await this.loadScript(routeName);
+    const router = this.router;
+    const isProduction = this.config.environment === "production";
+    let template, style = "", layout = null;
+    if (isProduction) {
+      template = script.template || this.generateDefaultTemplate(routeName);
+    } else {
+      const loadPromises = [
+        this.loadTemplate(routeName),
+        this.loadStyle(routeName)
+      ];
+      if (this.config.useLayout && script.layout !== null) {
+        loadPromises.push(this.loadLayout(script.layout || this.config.defaultLayout));
+      } else {
+        loadPromises.push(Promise.resolve(null));
+      }
+      const [loadedTemplate, loadedStyle, loadedLayout] = await Promise.all(loadPromises);
+      template = loadedTemplate;
+      style = loadedStyle;
+      layout = loadedLayout;
+      if (layout) {
+        template = this.mergeLayoutWithTemplate(routeName, layout, template);
+      }
+    }
+    let loadedComponents = {};
+    if (this.componentLoader) {
+      try {
+        let componentNames = null;
+        if (!isProduction) {
+          const layoutName = script.layout || this.config.defaultLayout;
+          componentNames = this.componentLoader.getComponentNames(template, layout, layoutName);
+          this.log("info", `[DEVELOPMENT] Discovered components for route '${routeName}':`, componentNames);
+        }
+        loadedComponents = await this.componentLoader.loadAllComponents(componentNames);
+        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: loadedComponents,
+      data() {
+        const originalData = script.data ? script.data() : {};
+        const commonData = {
+          ...originalData,
+          currentRoute: routeName,
+          $query: router.queryManager?.getQueryParams() || {},
+          $lang: (() => {
+            try {
+              return router.i18nManager?.getCurrentLanguage() || router.config.i18nDefaultLanguage || router.config.defaultLanguage || "ko";
+            } catch (error) {
+              if (router.errorHandler) router.errorHandler.warn("RouteLoader", "Failed to get current language:", error);
+              return router.config.defaultLanguage || "ko";
+            }
+          })(),
+          $dataLoading: false
+        };
+        return commonData;
+      },
+      computed: {
+        ...script.computed || {},
+        // 하위 호환성을 위해 params는 유지하되 getAllParams 사용
+        params() {
+          return router.queryManager?.getAllParams() || {};
+        }
+      },
+      async mounted() {
+        if (script.mounted) {
+          await script.mounted.call(this);
+        }
+        if (script.dataURL) {
+          await this.$fetchData();
+        }
+        await this.$nextTick();
+        router.routeLoader.formHandler.bindAutoForms(this);
+      },
+      methods: {
+        ...script.methods,
+        // 라우팅 관련
+        navigateTo: (route, params) => router.navigateTo(route, params),
+        getCurrentRoute: () => router.getCurrentRoute(),
+        // 통합된 파라미터 관리 (라우팅 + 쿼리 파라미터)
+        getParams: () => router.queryManager?.getAllParams() || {},
+        getParam: (key, defaultValue) => router.queryManager?.getParam(key, defaultValue),
+        // i18n 관련 (resilient - i18n 실패해도 key 반환)
+        $t: (key, params) => {
+          try {
+            return router.i18nManager?.t(key, params) || key;
           } 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;
+            if (router.errorHandler) router.errorHandler.warn("RouteLoader", "i18n translation failed, returning key:", error);
+            return key;
           }
         },
-        // 다중 API 데이터 fetch
-        async $fetchMultipleData() {
-          if (!script.dataURL || typeof script.dataURL !== "object") return;
-          const dataURLs = script.dataURL;
+        // 인증 관련
+        $isAuthenticated: () => router.authManager?.isUserAuthenticated() || false,
+        $logout: () => router.authManager ? router.navigateTo(router.authManager.handleLogout()) : null,
+        $loginSuccess: (target) => router.authManager ? router.navigateTo(router.authManager.handleLoginSuccess(target)) : null,
+        $checkAuth: (route) => router.authManager ? router.authManager.checkAuthentication(route) : Promise.resolve({ allowed: true, reason: "auth_disabled" }),
+        $getToken: () => router.authManager?.getAccessToken() || null,
+        $setToken: (token, options) => router.authManager?.setAccessToken(token, options) || false,
+        $removeToken: (storage) => router.authManager?.removeAccessToken(storage) || null,
+        $getAuthCookie: () => router.authManager?.getAuthCookie() || null,
+        $getCookie: (name) => router.authManager?.getCookieValue(name) || null,
+        // 데이터 fetch (ApiHandler 래퍼)
+        async $fetchData(dataConfig = null) {
+          const configToUse = dataConfig || script.dataURL;
+          if (!configToUse) return null;
           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 };
+            if (typeof configToUse === "string") {
+              const data = await router.routeLoader.apiHandler.fetchData(configToUse, this);
+              Object.assign(this, data);
+              this.$emit("data-loaded", data);
+              return data;
+            } else if (typeof configToUse === "object") {
+              const { results, errors } = await router.routeLoader.apiHandler.fetchMultipleData(configToUse, this);
+              Object.assign(this, results);
+              if (Object.keys(results).length > 0) {
+                this.$emit("data-loaded", results);
               }
-            });
-            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 (Object.keys(errors).length > 0) {
+                this.$emit("data-error", errors);
               }
-            });
-            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);
+              return results;
             }
+            return null;
           } catch (error) {
-            if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Failed to fetch multiple data for ${routeName}:`, error);
+            if (router.errorHandler) router.errorHandler.warn("RouteLoader", `Failed to fetch data for ${routeName}:`, error);
             this.$emit("data-error", error);
+            throw 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);
-            }
-          }
+        // HTTP 메서드 래퍼들 (ApiHandler 직접 접근)
+        async $get(url, options = {}) {
+          return await router.routeLoader.apiHandler.get(url, this, options);
         },
-        // 🆕 액션 파라미터 처리 메서드 (간단한 템플릿 치환)
-        $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 $post(url, data, options = {}) {
+          return await router.routeLoader.apiHandler.post(url, data, this, options);
         },
-        // 🆕 폼 데이터 서브밋
-        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 };
-          }
+        async $put(url, data, options = {}) {
+          return await router.routeLoader.apiHandler.put(url, data, this, options);
         },
-        // 🆕 클라이언트 사이드 폼 검증
-        $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;
+        async $patch(url, data, options = {}) {
+          return await router.routeLoader.apiHandler.patch(url, data, this, options);
         },
-        // 🆕 개별 입력 검증
-        $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;
+        async $delete(url, options = {}) {
+          return await router.routeLoader.apiHandler.delete(url, this, options);
         }
       },
       _routeName: routeName
@@ -1925,61 +2382,6 @@ ${template}`;
   generateDefaultTemplate(routeName) {
     return `<div class="route-${routeName}"><h1>Route: ${routeName}</h1></div>`;
   }
-  /**
-   * 컴포넌트 데이터 가져오기
-   */
-  async fetchComponentData(dataURL) {
-    try {
-      const queryString = this.router.queryManager?.buildQueryString(this.router.queryManager?.getQueryParams()) || "";
-      const fullURL = queryString ? `${dataURL}?${queryString}` : dataURL;
-      this.log("debug", `Fetching data from: ${fullURL}`);
-      const response = await fetch(fullURL, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "Accept": "application/json"
-        }
-      });
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const data = await response.json();
-      if (typeof data !== "object" || data === null) {
-        throw new Error("Invalid data format: expected object");
-      }
-      return data;
-    } catch (error) {
-      this.log("error", "Failed to fetch component data:", error);
-      throw error;
-    }
-  }
-  /**
-   * 캐시 무효화
-   */
-  invalidateCache(routeName) {
-    if (this.router.cacheManager) {
-      this.router.cacheManager.invalidateComponentCache(routeName);
-    }
-    this.log("debug", `Cache invalidated for route: ${routeName}`);
-  }
-  /**
-   * 통계 정보 반환
-   */
-  getStats() {
-    return {
-      environment: this.config.environment,
-      basePath: this.config.basePath,
-      routesPath: this.config.routesPath,
-      useLayout: this.config.useLayout,
-      useComponents: this.config.useComponents
-    };
-  }
-  /**
-   * 페이지 제목 생성
-   */
-  generatePageTitle(routeName) {
-    return this.toPascalCase(routeName).replace(/([A-Z])/g, " $1").trim();
-  }
   /**
    * 로깅 래퍼 메서드
    */
@@ -1992,6 +2394,18 @@ ${template}`;
    * 정리 (메모리 누수 방지)
    */
   destroy() {
+    if (this.formHandler) {
+      this.formHandler.destroy();
+      this.formHandler = null;
+    }
+    if (this.apiHandler) {
+      this.apiHandler.destroy();
+      this.apiHandler = null;
+    }
+    if (this.componentLoader) {
+      this.componentLoader.dispose();
+      this.componentLoader = null;
+    }
     this.log("debug", "RouteLoader destroyed");
     this.router = null;
   }
@@ -2268,162 +2682,6 @@ var ErrorHandler = class {
   }
 };
 
-// src/core/ComponentLoader.js
-var ComponentLoader = class {
-  constructor(router = null, options = {}) {
-    this.config = {
-      basePath: options.basePath || "/src/components",
-      debug: options.debug || false,
-      environment: options.environment || "development",
-      ...options
-    };
-    this.router = router;
-    this.loadingPromises = /* @__PURE__ */ new Map();
-    this.unifiedComponents = null;
-  }
-  /**
-   * 로깅 래퍼 메서드
-   */
-  log(level, ...args) {
-    if (this.router?.errorHandler) {
-      this.router.errorHandler.log(level, "ComponentLoader", ...args);
-    }
-  }
-  /**
-   * 컴포넌트를 비동기로 로드
-   */
-  async loadComponent(componentName) {
-    if (!componentName || typeof componentName !== "string") {
-      throw new Error("Component name must be a non-empty string");
-    }
-    if (this.loadingPromises.has(componentName)) {
-      return this.loadingPromises.get(componentName);
-    }
-    const loadPromise = this._loadComponentFromFile(componentName);
-    this.loadingPromises.set(componentName, loadPromise);
-    try {
-      const component = await loadPromise;
-      return component;
-    } catch (error) {
-      throw error;
-    } finally {
-      this.loadingPromises.delete(componentName);
-    }
-  }
-  /**
-   * 파일에서 컴포넌트 로드
-   */
-  async _loadComponentFromFile(componentName) {
-    const componentPath = `${this.config.basePath}/${componentName}.js`;
-    try {
-      const module = await import(componentPath);
-      const component = module.default;
-      if (!component) {
-        throw new Error(`Component '${componentName}' has no default export`);
-      }
-      if (!component.name) {
-        component.name = componentName;
-      }
-      this.log("debug", `Component '${componentName}' loaded successfully`);
-      return component;
-    } catch (error) {
-      this.log("error", `Failed to load component '${componentName}':`, error);
-      throw new Error(`Component '${componentName}' not found: ${error.message}`);
-    }
-  }
-  /**
-   * 컴포넌트 모듈 클리어
-   */
-  clearComponents() {
-    this.loadingPromises.clear();
-    this.unifiedComponents = null;
-    this.log("debug", "All components cleared");
-  }
-  /**
-   * 환경에 따른 모든 컴포넌트 로딩 (캐싱 지원)
-   */
-  async loadAllComponents() {
-    if (this.unifiedComponents) {
-      this.log("debug", "Using existing unified components");
-      return this.unifiedComponents;
-    }
-    if (this.config.environment === "production") {
-      return await this._loadProductionComponents();
-    }
-    return await this._loadDevelopmentComponents();
-  }
-  /**
-   * 운영 모드: 통합 컴포넌트 로딩
-   */
-  async _loadProductionComponents() {
-    try {
-      const componentsPath = `${this.config.routesPath}/_components.js`;
-      this.log("info", "[PRODUCTION] Loading unified components from:", componentsPath);
-      const componentsModule = await import(componentsPath);
-      if (typeof componentsModule.registerComponents === "function") {
-        this.unifiedComponents = componentsModule.components || {};
-        this.log("info", `[PRODUCTION] Unified components loaded: ${Object.keys(this.unifiedComponents).length} components`);
-        return this.unifiedComponents;
-      } else {
-        throw new Error("registerComponents function not found in components module");
-      }
-    } catch (error) {
-      this.log("warn", "[PRODUCTION] Failed to load unified components:", error.message);
-      this.unifiedComponents = {};
-      return {};
-    }
-  }
-  /**
-   * 개발 모드: 개별 컴포넌트 로딩
-   */
-  async _loadDevelopmentComponents() {
-    const componentNames = this._getComponentNames();
-    const components = {};
-    this.log("info", `[DEVELOPMENT] Loading individual components: ${componentNames.join(", ")}`);
-    for (const name of componentNames) {
-      try {
-        const component = await this.loadComponent(name);
-        if (component) {
-          components[name] = component;
-        }
-      } catch (loadError) {
-        this.log("warn", `[DEVELOPMENT] Failed to load component ${name}:`, loadError.message);
-      }
-    }
-    this.unifiedComponents = components;
-    this.log("info", `[DEVELOPMENT] Individual components loaded: ${Object.keys(components).length} components`);
-    return components;
-  }
-  /**
-   * 컴포넌트 이름 목록 가져오기
-   */
-  _getComponentNames() {
-    if (Array.isArray(this.config.componentNames) && this.config.componentNames.length > 0) {
-      return [...this.config.componentNames];
-    }
-    return [
-      "Button",
-      "Modal",
-      "Card",
-      "Toast",
-      "Input",
-      "Tabs",
-      "Checkbox",
-      "Alert",
-      "DynamicInclude",
-      "HtmlInclude"
-    ];
-  }
-  /**
-   * 메모리 정리
-   */
-  dispose() {
-    this.clearComponents();
-    this.log("debug", "ComponentLoader disposed");
-    this.router = null;
-  }
-};
-
 // src/viewlogic-router.js
 var ViewLogicRouter = class {
   constructor(options = {}) {
@@ -2432,7 +2690,6 @@ var ViewLogicRouter = class {
     this.currentHash = "";
     this.currentVueApp = null;
     this.previousVueApp = null;
-    this.componentLoader = null;
     this.transitionInProgress = false;
     this.isReady = false;
     this.readyPromise = null;
@@ -2445,7 +2702,10 @@ var ViewLogicRouter = class {
   _buildConfig(options) {
     const currentOrigin = window.location.origin;
     const defaults = {
-      basePath: `${currentOrigin}/src`,
+      basePath: "/",
+      // 애플리케이션 기본 경로 (서브폴더 배포용)
+      srcPath: "/src",
+      // 소스 파일 경로
       mode: "hash",
       cacheMode: "memory",
       cacheTTL: 3e5,
@@ -2453,13 +2713,13 @@ var ViewLogicRouter = class {
       useLayout: true,
       defaultLayout: "default",
       environment: "development",
-      routesPath: `${currentOrigin}/routes`,
+      routesPath: "/routes",
+      // 프로덕션 라우트 경로
       enableErrorReporting: true,
-      useComponents: true,
-      componentNames: ["Button", "Modal", "Card", "Toast", "Input", "Tabs", "Checkbox", "Alert", "DynamicInclude", "HtmlInclude"],
-      useI18n: true,
+      useI18n: false,
       defaultLanguage: "ko",
-      i18nPath: `${currentOrigin}/i18n`,
+      i18nPath: "/i18n",
+      // 다국어 파일 경로
       logLevel: "info",
       authEnabled: false,
       loginRoute: "login",
@@ -2481,17 +2741,56 @@ var ViewLogicRouter = class {
       logSecurityWarnings: true
     };
     const config = { ...defaults, ...options };
-    if (options.basePath && !options.basePath.startsWith("http")) {
-      config.basePath = `${currentOrigin}${options.basePath}`;
-    }
-    if (options.routesPath && !options.routesPath.startsWith("http")) {
-      config.routesPath = `${currentOrigin}${options.routesPath}`;
-    }
-    if (options.i18nPath && !options.i18nPath.startsWith("http")) {
-      config.i18nPath = `${currentOrigin}${options.i18nPath}`;
-    }
+    config.srcPath = this.resolvePath(config.srcPath, config.basePath);
+    config.routesPath = this.resolvePath(config.routesPath, config.basePath);
+    config.i18nPath = this.resolvePath(config.i18nPath, config.basePath);
     return config;
   }
+  /**
+   * 통합 경로 해결 - 서브폴더 배포 및 basePath 지원
+   */
+  resolvePath(path, basePath = null) {
+    const currentOrigin = window.location.origin;
+    if (path.startsWith("http")) {
+      return path;
+    }
+    if (path.startsWith("/")) {
+      if (basePath && basePath !== "/") {
+        const cleanBasePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
+        const cleanPath = path.startsWith("/") ? path : `/${path}`;
+        const fullPath = `${cleanBasePath}${cleanPath}`;
+        const fullUrl2 = `${currentOrigin}${fullPath}`;
+        return fullUrl2.replace(/([^:])\/{2,}/g, "$1/");
+      }
+      return `${currentOrigin}${path}`;
+    }
+    const currentPathname = window.location.pathname;
+    const currentBase = currentPathname.endsWith("/") ? currentPathname : currentPathname.substring(0, currentPathname.lastIndexOf("/") + 1);
+    const resolvedPath = this.normalizePath(currentBase + path);
+    const fullUrl = `${currentOrigin}${resolvedPath}`;
+    return fullUrl.replace(/([^:])\/{2,}/g, "$1/");
+  }
+  /**
+   * URL 경로 정규화 (이중 슬래시 제거 및 ../, ./ 처리)
+   */
+  normalizePath(path) {
+    path = path.replace(/\/+/g, "/");
+    const parts = path.split("/").filter((part) => part !== "" && part !== ".");
+    const stack = [];
+    for (const part of parts) {
+      if (part === "..") {
+        if (stack.length > 0 && stack[stack.length - 1] !== "..") {
+          stack.pop();
+        } else if (!path.startsWith("/")) {
+          stack.push(part);
+        }
+      } else {
+        stack.push(part);
+      }
+    }
+    const normalized = "/" + stack.join("/");
+    return normalized === "/" ? "/" : normalized;
+  }
   /**
    * 로깅 래퍼 메서드
    */
@@ -2510,29 +2809,21 @@ var ViewLogicRouter = class {
       this.queryManager = new QueryManager(this, this.config);
       this.errorHandler = new ErrorHandler(this, this.config);
       if (this.config.useI18n) {
-        this.i18nManager = new I18nManager(this, this.config);
-        if (this.i18nManager.initPromise) {
-          await this.i18nManager.initPromise;
+        try {
+          this.i18nManager = new I18nManager(this, this.config);
+          if (this.i18nManager.initPromise) {
+            await this.i18nManager.initPromise;
+          }
+          this.log("info", "I18nManager initialized successfully");
+        } catch (i18nError) {
+          this.log("warn", "I18nManager initialization failed, continuing without i18n:", i18nError.message);
+          this.i18nManager = null;
+          this.config.useI18n = false;
         }
       }
       if (this.config.authEnabled) {
         this.authManager = new AuthManager(this, this.config);
       }
-      if (this.config.useComponents) {
-        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();
     } catch (error) {
@@ -2596,8 +2887,17 @@ var ViewLogicRouter = class {
         queryParams: this.queryManager?.parseQueryString(queryPart || window.location.search.slice(1)) || {}
       };
     } else {
+      const fullPath = window.location.pathname;
+      const basePath = this.config.basePath || "/";
+      let route = fullPath;
+      if (basePath !== "/" && fullPath.startsWith(basePath)) {
+        route = fullPath.slice(basePath.length);
+      }
+      if (route.startsWith("/")) {
+        route = route.slice(1);
+      }
       return {
-        route: window.location.pathname.slice(1) || "home",
+        route: route || "home",
         queryParams: this.queryManager?.parseQueryString(window.location.search.slice(1)) || {}
       };
     }
@@ -2730,7 +3030,10 @@ var ViewLogicRouter = class {
     const queryParams = params || this.queryManager?.getQueryParams() || {};
     const queryString = this.queryManager?.buildQueryString(queryParams) || "";
     const buildURL = (route2, queryString2, isHash = true) => {
-      const base = route2 === "home" ? "/" : `/${route2}`;
+      let base = route2 === "home" ? "/" : `/${route2}`;
+      if (!isHash && this.config.basePath && this.config.basePath !== "/") {
+        base = `${this.config.basePath}${base}`;
+      }
       const url = queryString2 ? `${base}?${queryString2}` : base;
       return isHash ? `#${url}` : url;
     };
@@ -2741,7 +3044,11 @@ var ViewLogicRouter = class {
       }
     } else {
       const newPath = buildURL(route, queryString, false);
-      const isSameRoute = window.location.pathname === (route === "home" ? "/" : `/${route}`);
+      let expectedPath = route === "home" ? "/" : `/${route}`;
+      if (this.config.basePath && this.config.basePath !== "/") {
+        expectedPath = `${this.config.basePath}${expectedPath}`;
+      }
+      const isSameRoute = window.location.pathname === expectedPath;
       if (isSameRoute) {
         window.history.replaceState({}, "", newPath);
       } else {