@iyulab/modern-app 0.2.4 → 0.3.0

package/dist/layouts/SidebarLayout.js

@@ -1,86 +1,105 @@
-import { nothing as p, html as i } from "lit";
-import { query as h, state as g, property as b, customElement as f } from "lit/decorators.js";
+import { nothing as h, html as a } from "lit";
+import { query as b, state as g, property as p, customElement as f } from "lit/decorators.js";
 import { unsafeHTML as m } from "lit/directives/unsafe-html.js";
-import { repeat as n } from "lit/directives/repeat.js";
-import { autorun as $ } from "mobx";
-import { UIconButton as v } from "@iyulab/components/dist/components/icon-button/UIconButton.component.js";
+import { repeat as l } from "lit/directives/repeat.js";
+import { UIcon as v } from "@iyulab/components/dist/components/icon/UIcon.component.js";
+import { UButton as $ } from "@iyulab/components/dist/components/button/UButton.component.js";
 import { UProgressBar as y } from "@iyulab/components/dist/components/progress-bar/UProgressBar.component.js";
-import { screen as u } from "../internals/observables.js";
-import { ExtendedBaseElement as S } from "../internals/ExtendedBaseElement.js";
-import { SidebarLogo as _ } from "../components/SidebarLogo.js";
-import { SidebarSection as w } from "../components/SidebarSection.js";
-import { SidebarGroup as k } from "../components/SidebarGroup.js";
-import { SidebarLink as E } from "../components/SidebarLink.js";
-import { SidebarButton as B } from "../components/SidebarButton.js";
-import { styles as L } from "./SidebarLayout.styles.js";
-var R = Object.defineProperty, I = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, C = Reflect.get, l = (e, t, s, a) => {
-  for (var r = a > 1 ? void 0 : a ? I(t, s) : t, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (r = (a ? c(t, s, r) : c(r)) || r);
-  return a && r && R(t, s, r), r;
-}, O = (e, t, s) => C(P(e), s, t);
-let o = class extends S {
+import { app as u } from "../App.js";
+import { StyledElement as w } from "../internals/StyledElement.js";
+import { SidebarSection as k } from "../components/SidebarSection.js";
+import { SidebarGroup as B } from "../components/SidebarGroup.js";
+import { SidebarLink as L } from "../components/SidebarLink.js";
+import { SidebarButton as _ } from "../components/SidebarButton.js";
+import { styles as C } from "./SidebarLayout.styles.js";
+import { IconRegistry as R } from "@iyulab/components/dist/utilities/IconRegistry.js";
+var S = Object.defineProperty, z = Object.getOwnPropertyDescriptor, E = Object.getPrototypeOf, x = Reflect.get, n = (e, t, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? z(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (o = (r ? c(t, s, o) : c(o)) || o);
+  return r && o && S(t, s, o), o;
+}, M = (e, t, s) => x(E(e), s, t);
+R.register("sidebar-app", (e) => e === "layout-sidebar" ? '<svg viewBox="0 0 16 16"><path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"/></svg>' : e === "list" ? '<svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1 m0 5a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1 m0 5a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1"/></svg>' : e === "x-lg" ? '<svg viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>' : "");
+let i = class extends w {
   constructor() {
-    super(...arguments), this.disposers = [], this.state = "docked", this.toggleState = () => {
-      const e = u.get();
-      e === "large" ? this.state = this.state === "docked" ? "slim" : "docked" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "closed" ? "modal" : "closed" : console.warn("Unknown screen size:", e);
-    }, this.toggleStateIfModalState = () => {
-      const e = u.get();
-      this.state === "modal" && (e === "medium" ? this.state = "slim" : e === "small" && (this.state = "closed"));
+    super(...arguments), this.context = null, this.state = "default", this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = () => {
+      u.navigate("");
+    }, this.handleToggleButtonClick = () => {
+      const e = u.screen ?? "large";
+      e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", e);
+    }, this.handleBackdropClick = () => {
+      this.state = "slim";
     }, this.handleRouteBegin = (e) => {
-      this.progressBarEl.value = 0, this.toggleStateIfModalState();
+      this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.context = e.context;
     }, this.handleRouteProgress = (e) => {
       this.progressBarEl.value = e.progress;
     }, this.handleRouteDone = (e) => {
       this.progressBarEl.value = 100;
+    }, this.handleScreenResize = (e) => {
+      const t = e.detail.size;
+      t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.disposers.push($(() => {
-      const e = u.get();
-      this.updateState(e);
-    })), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress);
+    super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("screen-resize", this.handleScreenResize);
   }
   disconnectedCallback() {
-    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), super.disconnectedCallback();
+    window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("screen-resize", this.handleScreenResize), super.disconnectedCallback();
   }
   updated(e) {
     super.updated(e), e.has("config") && (this.styles = this.config?.styles);
   }
   render() {
-    return this.config ? i`
+    return this.config ? a`
+      <!-- Mobile Header -->
+      <div class="mobile-header" part="mobile-header" ?hidden="${!this.state.startsWith("mobile")}">
+        <u-icon class="logo"
+          .name="${this.config.logo}"
+          @click=${this.handleBrandLogoClick}
+        ></u-icon>
+        <span class="title">
+          ${this.config.title}
+        </span>
+        <u-button class="toggler"
+          @click=${this.handleToggleButtonClick}>
+          <u-icon 
+            lib="sidebar-app" 
+            name=${this.state === "mobile-open" ? "x-lg" : "list"}
+          ></u-icon>
+        </u-button>
+      </div>
+
       <!-- Sidebar -->
-      <aside class="sidebar" part="sidebar" state=${this.state}>
+      <aside class="sidebar" part="sidebar" state="${this.state}">
         <!-- Sidebar Header -->
         <div class="sidebar-header" part="sidebar-header">
-          <u-sidebar-logo
-            .compact="${this.state === "slim"}"
-            .type=${this.config.logo?.type || "icon"}
-            .image="${this.config.logo?.image}"
-            .icon="${this.config.logo?.icon}"
-            .label="${this.config.logo?.label}"
-            .styles="${this.config.logo?.styles}"
-            @click="${this.config.logo?.onClick}"
-          ></u-sidebar-logo>
-          <u-icon-button class="sidebar-toggler" part="sidebar-toggler"
-            lib="internal"
-            name=${this.state === "closed" ? "chevron-right" : "layout-sidebar"}
-            @click="${this.toggleState}"
-          ></u-icon-button>
+          <u-icon class="logo"
+            .name="${this.config.logo}"
+            @click=${this.handleBrandLogoClick}
+          ></u-icon>
+          <span class="title" ?hidden=${this.state === "slim"}>
+            ${this.config.title}
+          </span>
+          <u-button class="toggler"
+            @click=${this.handleToggleButtonClick}>
+            <u-icon 
+              lib="sidebar-app" 
+              name="layout-sidebar"
+            ></u-icon>
+          </u-button>
         </div>
 
         <!-- Sidebar Navigation Menu -->
-        <nav class="sidebar-menu" part="sidebar-menu">
-          ${n(
-      this.config.menu ?? [],
+        <nav class="sidebar-main" part="sidebar-main" scrollable>
+          ${l(
+      this.config.main ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
     )}
         </nav>
 
         <!-- Sidebar Footer -->
-        <div class="sidebar-footer" part="sidebar-footer"
-          ?hidden="${!this.config.footer || this.config.footer.length === 0}">
-          ${n(
+        <div class="sidebar-footer" part="sidebar-footer">
+          ${l(
       this.config.footer ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
@@ -89,26 +108,27 @@ let o = class extends S {
       </aside>
 
       <!-- Main Content -->
-      <div class="main" part="main">
+      <div class="main" part="main" scrollable>
         <u-progress-bar part="progress"></u-progress-bar>
 
         <u-outlet></u-outlet>
       </div>
 
       <!-- Backdrop for modal state -->
-      <div class="backdrop"
-        ?hidden="${this.state !== "modal"}"
-        @click="${this.toggleStateIfModalState}"
+      <div class="backdrop" ?hidden="${this.state !== "modal"}"
+        @click="${this.handleBackdropClick}"
       ></div>
-    ` : p;
+    ` : h;
   }
   /** 사이드바 아이템 렌더링 */
   renderItem(e) {
-    if (!e) return p;
-    if (e.type === "innerHtml") {
+    if (!e) return h;
+    if (e.type === "html") {
       const t = e.render(this.state);
-      return typeof t == "string" ? m(t) : i`${t}`;
-    } else return e.type === "button" ? i`
+      return typeof t == "string" ? m(t) : a`${t}`;
+    } else {
+      if (e.type === "button")
+        return a`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -116,71 +136,83 @@ let o = class extends S {
           .styles="${e.styles}"
           @click="${e.onClick}"
         ></u-sidebar-button>
-      ` : e.type === "section" ? i`
+      `;
+      if (e.type === "link") {
+        const t = this.isMatchedLink(e.pattern || e.href);
+        return a`
+        <u-sidebar-link
+          ?compact=${this.state === "slim"}
+          ?selected=${t}
+          .icon="${e.icon}"
+          .label="${e.label}"
+          .href="${e.href}"
+          .pattern="${e.pattern}"
+          .styles="${e.styles}"
+        ></u-sidebar-link>
+      `;
+      } else {
+        if (e.type === "section")
+          return a`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
-          .items="${e.items}"
           .styles="${e.styles}">
-          ${n(
-      e.items,
-      (t, s) => s,
-      (t, s) => this.renderItem(t)
-    )}
+          ${l(
+            e.items,
+            (t, s) => s,
+            (t, s) => this.renderItem(t)
+          )}
         </u-sidebar-section>
-      ` : e.type === "group" ? i`
+      `;
+        if (e.type === "group") {
+          const t = e.items.some((s) => this.isMatchedLink(s.pattern || s.href));
+          return a`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
+          ?selected=${t}
           ?collapsed="${e.collapsed ?? !1}"
           .icon="${e.icon}"
           .label="${e.label}"
-          .items="${e.items}"
           .styles="${e.styles}">
-          ${n(
-      e.items,
-      (t, s) => s,
-      (t, s) => this.renderItem(t)
-    )}
+          ${l(
+            e.items,
+            (s, r) => r,
+            (s, r) => this.renderItem(s)
+          )}
         </u-sidebar-group>
-      ` : i`
-        <u-sidebar-link
-          ?compact=${this.state === "slim"}
-          .icon="${e.icon}"
-          .label="${e.label}"
-          .href="${e.href}"
-          .pattern="${e.pattern}"
-          .styles="${e.styles}"
-        ></u-sidebar-link>
       `;
-  }
-  /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
-  updateState(e) {
-    e === "large" ? this.state = "docked" : e === "medium" ? this.state = "slim" : e === "small" ? this.state = "closed" : console.warn("Unknown screen size:", e);
+        } else
+          return h;
+      }
+    }
   }
 };
-o.styles = [O(o, o, "styles"), L];
-o.dependencies = {
-  "u-icon-button": v,
+i.styles = [M(i, i, "styles"), C];
+i.dependencies = {
+  "u-icon": v,
+  "u-button": $,
   "u-progress-bar": y,
-  "u-sidebar-logo": _,
-  "u-sidebar-section": w,
-  "u-sidebar-group": k,
-  "u-sidebar-link": E,
-  "u-sidebar-button": B
+  "u-sidebar-section": k,
+  "u-sidebar-group": B,
+  "u-sidebar-link": L,
+  "u-sidebar-button": _
 };
-l([
-  h("u-progress-bar")
-], o.prototype, "progressBarEl", 2);
-l([
+n([
+  b("u-progress-bar")
+], i.prototype, "progressBarEl", 2);
+n([
   g()
-], o.prototype, "state", 2);
-l([
-  b({ type: Object })
-], o.prototype, "config", 2);
-o = l([
+], i.prototype, "context", 2);
+n([
+  p({ type: String, reflect: !0 })
+], i.prototype, "state", 2);
+n([
+  p({ type: Object })
+], i.prototype, "config", 2);
+i = n([
   f("u-sidebar-layout")
-], o);
+], i);
 export {
-  o as SidebarLayout
+  i as SidebarLayout
 };

package/dist/layouts/SidebarLayout.styles.js

@@ -1,13 +1,49 @@
-import { css as o } from "lit";
-const r = o`
+import { css as e } from "lit";
+const r = e`
   :host {
     position: relative;
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 100%;
+    font-family: var(--u-font-base);
     overflow: hidden;
   }
+  :host([state="mobile"]),
+  :host([state="mobile-open"]) {
+    flex-direction: column;
+  }
+
+  .logo {
+    color: var(--u-txt-color);
+    font-size: 24px;
+    cursor: pointer;
+  }
+  .logo:hover {
+    color: var(--u-txt-color-hover);
+  }
+
+  .title {
+    flex: 1;
+    color: var(--u-txt-color);
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .toggler {
+    color: inherit;
+    font-size: 20px;
+    padding: 0px;
+    border: none;
+    background: transparent;
+  }
+  .toggler:hover {
+    color: var(--u-txt-color-hover);
+  }
 
   /* Sidebar Container */
   .sidebar {
@@ -17,53 +53,57 @@ const r = o`
     flex-direction: column;
     justify-content: space-between;
     gap: 8px;
-    width: 260px;
-    height: 100vh;
+    height: 100%;
     background: var(--u-panel-bg-color);
     border-right: 1px solid var(--u-border-color);
-    box-shadow: 0 2px 8px var(--u-shadow-color-weak);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.3s ease;
   }
   /* Sidebar states */
+  .sidebar[state="default"] {
+    width: 260px;
+  }
   .sidebar[state="slim"] {
     width: 64px;
   }
   .sidebar[state="slim"] .sidebar-header {
     flex-direction: column;
+    gap: 16px;
+    padding: 16px;
   }
-  .sidebar[state="closed"] {
-    position: fixed;
-    top: 0;
-    left: -260px;
-    bottom: 0;
+  .sidebar[state="modal"] {
     width: 260px;
-  }
-  .sidebar[state="closed"] .sidebar-toggler {
     position: absolute;
-    z-index: 1000;
-    top: 16px;
-    left: calc(100% - 16px);
-    background-color: var(--u-panel-bg-color);
-    border: 1px solid var(--u-border-color-strong);
-    border-radius: 4px 8px 8px 4px;
+    top: 0;
+    left: 0;
   }
-  .sidebar[state="closed"] .sidebar-toggler:hover {
-    transform: translateX(24px);
+  .sidebar[state="mobile"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-100%);
   }
-  .sidebar[state="modal"] {
-    position: fixed;
+  .sidebar[state="mobile-open"] {
+    position: absolute;
     top: 0;
     left: 0;
-    bottom: 0;
-    width: 260px;
+    right: 0;
+    transform: translateY(0);
   }
 
-  /* Sidebar Toggler Button */
-  .sidebar-toggler {
-    font-size: 20px;
-    border: none;
-    background: transparent;
-    cursor: col-resize;
+  /* Mobile Header */
+  .mobile-header {
+    position: relative;
+    z-index: 1001;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px;
+    background: var(--u-panel-bg-color);
+    border-bottom: 1px solid var(--u-border-color-weak);
+    user-select: none;
   }
 
   /* Sidebar Header */
@@ -72,23 +112,21 @@ const r = o`
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    padding: 16px 12px;
+    gap: 12px;
+    padding: 16px;
     border-bottom: 1px solid var(--u-border-color-weak);
+    user-select: none;
   }
 
-  /* Sidebar Menu */
-  .sidebar-menu {
+  /* Sidebar Main Menu */
+  .sidebar-main {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 8px;
-    overflow-y: auto;
     overflow-x: hidden;
-
-    scrollbar-width: thin;
-    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+    overflow-y: auto;
   }
 
   /* Sidebar Footer */
@@ -99,14 +137,16 @@ const r = o`
     padding: 8px;
     border-top: 1px solid var(--u-border-color-weak);
   }
+  .sidebar-footer:empty {
+    display: none;
+  }
 
   /* Main Content */
   .main {
     position: relative;
     flex: 1;
-    display: block;
-    overflow: hidden;
     background: var(--u-bg-color);
+    overflow: auto;
   }
 
   .main u-progress-bar {
@@ -114,6 +154,7 @@ const r = o`
     z-index: 100;
     top: 0;
     left: 0;
+    right: 0;
     height: 4px;
     border-radius: 0;
     background-color: transparent;
@@ -121,7 +162,6 @@ const r = o`
 
   /* Backdrop for modal mode */
   .backdrop {
-    content: '';
     position: absolute;
     z-index: 100;
     top: 0;

package/dist/layouts/SidebarLayout.types.d.ts

@@ -1,27 +1,29 @@
-import { StyleMap } from '../types/AppTypes';
-import { SidebarLogoConfig } from '../components/SidebarLogo';
+import { TemplateResult } from 'lit';
+import { StyleMap } from '../internals/StyledElement';
 import { SidebarLinkConfig } from '../components/SidebarLink';
 import { SidebarSectionConfig } from '../components/SidebarSection';
 import { SidebarGroupConfig } from '../components/SidebarGroup';
 import { SidebarButtonConfig } from '../components/SidebarButton';
 /** 사이드바 레이아웃 컴포넌트의 요소(part) 타입 */
-export type SidebarParts = 'host' | 'sidebar' | 'sidebar-toggler' | 'sidebar-header' | 'sidebar-menu' | 'sidebar-footer' | 'main' | 'progress';
+export type SidebarParts = 'host' | 'mobile-header' | 'sidebar' | 'sidebar-header' | 'sidebar-main' | 'sidebar-footer' | 'main' | 'progress';
 /** 사이드바 상태 타입 */
-export type SidebarState = 'docked' | 'modal' | 'slim' | 'closed';
+export type SidebarState = 'default' | 'slim' | 'modal' | 'mobile' | 'mobile-open';
 /** 사이드바 안에 HTML 또는 엘리먼트를 직접 렌더링하는 설정 */
-export interface SidebarInnerHtmlConfig {
-    type: 'innerHtml';
-    render: (state: SidebarState) => HTMLElement | string;
+export interface SidebarHtmlConfig {
+    type: 'html';
+    render: (state: SidebarState) => TemplateResult<1> | HTMLElement | string;
 }
 /** union: section | group | link | button */
-export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | SidebarInnerHtmlConfig);
-/** 사이드바 전체 설정 (루트) */
+export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | SidebarHtmlConfig);
+/** 사이드바 레이아웃 전체 설정 */
 export interface SidebarLayoutConfig {
     type: 'sidebar';
     /** 최상단 앱 로고 */
-    logo?: SidebarLogoConfig;
-    /** 상단/메인 메뉴 항목들 */
-    menu?: SidebarItem[];
+    logo?: string;
+    /** 앱 제목 */
+    title?: string;
+    /** 상단/메인 메뉴 아이템 항목들 */
+    main?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */
     footer?: SidebarItem[];
     /** 사이드바 스타일 맵 */

package/dist/types/AppConfigs.d.ts

@@ -5,7 +5,7 @@ import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 /**
  * i18next의 초기화 옵션과 플러그인 배열을 포함한 다국어 설정
  */
-export type LocalizationInitOptions = InitOptions & {
+export type I18nInitOptions = InitOptions & {
     /**
      * i18next 플러그인 배열
      * @description i18next.use() 메서드에 전달되는 플러그인들의 배열입니다.
@@ -28,10 +28,15 @@ export type LayoutConfig = (SidebarLayoutConfig) & {
  */
 export interface AppConfig {
     /**
-     * 현재 애플리케이션의 기본 경로 설정
+     * 현재 애플리케이션의 기본 라우팅 경로 설정
      * @default '/'
      */
     basepath?: string;
+    /**
+     * 현재 애플리케이션의 기본 아이콘 경로 설정
+     * @default '/assets/icons/'
+     */
+    iconBasepath?: string;
     /**
      * 클라이언트 사이드 라우팅을 위한 설정 배열
      */
@@ -42,11 +47,12 @@ export interface AppConfig {
     fallback?: FallbackRouteConfig;
     /**
      * 애플리케이션이 렌더링될 루트 HTML 요소
-     * @description 지정하지 않을 경우 document.body가 사용됩니다.
+     * @default document.body
      */
     root?: Element;
     /**
      * 애플리케이션을 구성하기 위한 레이아웃 설정
+     *
      * @description 현재는 사이드바 레이아웃만 지원합니다.
      */
     layout: LayoutConfig;
@@ -55,9 +61,8 @@ export interface AppConfig {
      */
     theme?: ThemeInitOptions;
     /**
-     * i18next를 사용하는 다국어 설정
-     * @description i18next의 InitOptions와 플러그인 배열을 포함합니다. i18next를 사용하지 않는 경우 이 설정은 생략할 수 있습니다.
+     * i18next의 InitOptions와 플러그인 배열을 포함합니다. i18next를 사용하지 않는 경우 이 설정은 생략할 수 있습니다.
      * @see 설정에 대한 자세한 내용은 {@link https://www.i18next.com/overview/configuration-options} 참조하십시오.
      */
-    localization?: LocalizationInitOptions;
+    i18n?: I18nInitOptions;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on react, lit-element",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -34,20 +34,19 @@
     }
   },
   "scripts": {
-    "start": "vite",
+    "test": "vite",
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.1.10",
-    "@iyulab/router": "^0.5.3",
-    "lit": "^3.3.1",
-    "mobx": "^6.15.0",
-    "i18next": "^25.7.3"
+    "@iyulab/components": "^0.2.0",
+    "@iyulab/router": "^0.6.2",
+    "lit": "^3.3.2",
+    "i18next": "^25.8.0"
   },
   "devDependencies": {
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.9",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
 }