@simplysm/solid 13.0.72 → 13.0.74

package/src/components/layout/topbar/Topbar.tsx

@@ -5,7 +5,7 @@ import { Icon } from "../../display/Icon";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../form-control/Button";
 import { useSidebarContextOptional } from "../sidebar/SidebarContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { TopbarActions } from "./TopbarActions";
 import { TopbarContainer } from "./TopbarContainer";
 import { TopbarMenu } from "./TopbarMenu";
@@ -71,7 +71,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
 
   // Optional use of SidebarContext (toggle button not shown if Context doesn't exist)
   const sidebarContext = useSidebarContextOptional();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const handleToggle = () => {
     sidebarContext?.setToggle((v) => !v);
@@ -82,7 +82,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
   return (
     <header {...rest} data-topbar class={getClassName()}>
       <Show when={sidebarContext}>
-        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n?.t("topbar.toggleSidebar") ?? "Toggle sidebar"}>
+        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n.t("topbar.toggleSidebar")}>
           <Icon icon={IconMenu2} size="1.5em" />
         </Button>
       </Show>

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -16,7 +16,7 @@ import { Button } from "../../form-control/Button";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const desktopNavBaseClass = clsx("hidden sm:flex", "flex-row gap-1", "items-center");
 const mobileWrapperClass = clsx("flex sm:hidden");
@@ -64,7 +64,7 @@ export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
 export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
   const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   return (
     <>
@@ -79,7 +79,7 @@ export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
           <Dropdown.Trigger>
             <Button
               variant="ghost"
-              aria-label={i18n?.t("topbarMenu.menu") ?? "Menu"}
+              aria-label={i18n.t("topbarMenu.menu")}
               aria-haspopup="menu"
               aria-expanded={mobileMenuOpen()}
             >

package/src/hooks/createSelectionGroup.tsx

@@ -10,6 +10,7 @@ import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "./createControllableSignal";
 import { Invalid } from "../components/form-control/Invalid";
 import type { CheckboxSize } from "../components/form-control/checkbox/Checkbox.styles";
+import { useI18n } from "../providers/i18n/I18nContext";
 
 interface SelectionItemComponentProps {
   value: boolean;
@@ -42,14 +43,14 @@ interface MultiGroupConfig {
   mode: "multiple";
   contextName: string;
   ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
-  emptyErrorMsg: string;
+  emptyErrorMsgKey: string;
 }
 
 interface SingleGroupConfig {
   mode: "single";
   contextName: string;
   ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
-  emptyErrorMsg: string;
+  emptyErrorMsgKey: string;
 }
 
 interface SelectionGroupItemProps<TValue> {
@@ -148,6 +149,9 @@ export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfi
   }
 
   const GroupInner: ParentComponent<MultiGroupProps<unknown>> = (props) => {
+    const i18n = useI18n();
+    const resolvedErrorMsg = () => i18n.t(config.emptyErrorMsgKey);
+
     const [local, rest] = splitProps(props, [
       "value",
       "onValueChange",
@@ -205,11 +209,11 @@ export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfi
     const errorMsg = createMemo(() => {
       if (config.mode === "multiple") {
         const v = local.value ?? [];
-        if (local.required && v.length === 0) return config.emptyErrorMsg;
+        if (local.required && v.length === 0) return resolvedErrorMsg();
         return (local.validate as ((v: unknown[]) => string | undefined) | undefined)?.(v);
       } else {
         const v = local.value as unknown | undefined;
-        if (local.required && (v === undefined || v === null)) return config.emptyErrorMsg;
+        if (local.required && (v === undefined || v === null)) return resolvedErrorMsg();
         return (local.validate as ((v: unknown | undefined) => string | undefined) | undefined)?.(
           v,
         );

package/src/providers/i18n/I18nContext.tsx

@@ -38,13 +38,6 @@ export function useI18n(): I18nContextValue {
   return context;
 }
 
-/**
- * Get i18n context value (optional, returns undefined if not in provider)
- */
-export function useI18nOptional(): I18nContextValue | undefined {
-  return useContext(I18nContext);
-}
-
 /**
  * I18n Provider component
  *

package/src/providers/i18n/locales/en.ts

@@ -144,6 +144,7 @@ export default {
   },
   sharedDataSelectList: {
     searchPlaceholder: "Search...",
+    unspecified: "Unspecified",
   },
   dataSelectButton: {
     deselect: "Deselect",
@@ -158,4 +159,41 @@ export default {
   topbarMenu: {
     menu: "Menu",
   },
+  notificationBell: {
+    notifications: "Notifications",
+    clearAll: "Clear All",
+    noNotifications: "No notifications",
+    unreadCount: "{{count}} notifications",
+  },
+  notificationProvider: {
+    prefix: "Notification:",
+  },
+  themeToggle: {
+    light: "Light mode",
+    system: "System settings",
+    dark: "Dark mode",
+  },
+  combobox: {
+    searching: "Searching...",
+    noResults: "No results found",
+  },
+  numpad: {
+    enter: "ENT",
+  },
+  sidebarMenu: {
+    menu: "MENU",
+  },
+  validation: {
+    required: "This is a required field",
+    requiredField: "Required field",
+    requiredSelection: "This is a required selection",
+    selectItem: "Please select an item",
+    minLength: "Enter at least {{min}} characters",
+    maxLength: "Enter up to {{max}} characters",
+    invalidFormat: "The input format is invalid",
+    minValue: "Minimum value is {{min}}",
+    maxValue: "Maximum value is {{max}}",
+    minDate: "Must be greater than or equal to {{min}}",
+    maxDate: "Must be less than or equal to {{max}}",
+  },
 };

package/src/providers/i18n/locales/ko.ts

@@ -144,6 +144,7 @@ export default {
   },
   sharedDataSelectList: {
     searchPlaceholder: "검색...",
+    unspecified: "미지정",
   },
   dataSelectButton: {
     deselect: "선택 해제",
@@ -158,4 +159,41 @@ export default {
   topbarMenu: {
     menu: "메뉴",
   },
+  notificationBell: {
+    notifications: "알림",
+    clearAll: "모두 지우기",
+    noNotifications: "알림 없음",
+    unreadCount: "{{count}}개의 알림",
+  },
+  notificationProvider: {
+    prefix: "알림:",
+  },
+  themeToggle: {
+    light: "라이트 모드",
+    system: "시스템 설정",
+    dark: "다크 모드",
+  },
+  combobox: {
+    searching: "검색 중...",
+    noResults: "결과 없음",
+  },
+  numpad: {
+    enter: "입력",
+  },
+  sidebarMenu: {
+    menu: "메뉴",
+  },
+  validation: {
+    required: "필수 입력 항목입니다",
+    requiredField: "필수 항목",
+    requiredSelection: "필수 선택 항목입니다",
+    selectItem: "항목을 선택해 주세요",
+    minLength: "{{min}}자 이상 입력해 주세요",
+    maxLength: "{{max}}자 이하로 입력해 주세요",
+    invalidFormat: "입력 형식이 올바르지 않습니다",
+    minValue: "최솟값은 {{min}}입니다",
+    maxValue: "최댓값은 {{max}}입니다",
+    minDate: "{{min}} 이상이어야 합니다",
+    maxDate: "{{max}} 이하이어야 합니다",
+  },
 };

package/tailwind.config.ts

@@ -50,8 +50,8 @@ export default {
         "sidebar-backdrop": "99",
         "busy": "500",
         "dropdown": "1000",
-        "modal-backdrop": "1999",
-        "modal": "2000",
+        "dialog-backdrop": "1999",
+        "dialog": "2000",
         "notification": "3000",
       },
     },

package/tests/components/data/kanban/Kanban.selection.spec.tsx

@@ -1,38 +1,48 @@
 import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { Kanban } from "../../../../src/components/data/kanban/Kanban";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Kanban selection system", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   function renderKanban(options?: {
     selectedValues?: unknown[];
     onSelectedValuesChange?: (v: unknown[]) => void;
     selectable?: boolean;
   }) {
     return render(() => (
-      <Kanban
-        selectedValues={options?.selectedValues}
-        onSelectedValuesChange={options?.onSelectedValuesChange}
-        class="h-[400px]"
-      >
-        <Kanban.Lane value="lane-1">
-          <Kanban.LaneTitle>Lane 1</Kanban.LaneTitle>
-          <Kanban.Card value={1} selectable={options?.selectable ?? true} contentClass="p-2">
-            Card 1
-          </Kanban.Card>
-          <Kanban.Card value={2} selectable={options?.selectable ?? true} contentClass="p-2">
-            Card 2
-          </Kanban.Card>
-          <Kanban.Card value={3} selectable={false} contentClass="p-2">
-            Card 3 (not selectable)
-          </Kanban.Card>
-        </Kanban.Lane>
-        <Kanban.Lane value="lane-2">
-          <Kanban.LaneTitle>Lane 2</Kanban.LaneTitle>
-          <Kanban.Card value={4} selectable contentClass="p-2">
-            Card 4
-          </Kanban.Card>
-        </Kanban.Lane>
-      </Kanban>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <Kanban
+            selectedValues={options?.selectedValues}
+            onSelectedValuesChange={options?.onSelectedValuesChange}
+            class="h-[400px]"
+          >
+            <Kanban.Lane value="lane-1">
+              <Kanban.LaneTitle>Lane 1</Kanban.LaneTitle>
+              <Kanban.Card value={1} selectable={options?.selectable ?? true} contentClass="p-2">
+                Card 1
+              </Kanban.Card>
+              <Kanban.Card value={2} selectable={options?.selectable ?? true} contentClass="p-2">
+                Card 2
+              </Kanban.Card>
+              <Kanban.Card value={3} selectable={false} contentClass="p-2">
+                Card 3 (not selectable)
+              </Kanban.Card>
+            </Kanban.Lane>
+            <Kanban.Lane value="lane-2">
+              <Kanban.LaneTitle>Lane 2</Kanban.LaneTitle>
+              <Kanban.Card value={4} selectable contentClass="p-2">
+                Card 4
+              </Kanban.Card>
+            </Kanban.Lane>
+          </Kanban>
+        </I18nProvider>
+      </ConfigProvider>
     ));
   }
 

package/tests/components/disclosure/Dialog.spec.tsx

@@ -34,7 +34,7 @@ describe("Dialog", () => {
       expect(content).toBeNull();
     });
 
-    it("sets data-modal attribute", async () => {
+    it("sets data-dialog attribute", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
           <Dialog open={true}>
@@ -44,8 +44,8 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const modal = document.querySelector("[data-modal]");
-        expect(modal).not.toBeNull();
+        const dialog = document.querySelector("[data-dialog]");
+        expect(dialog).not.toBeNull();
       });
     });
 
@@ -60,7 +60,7 @@ describe("Dialog", () => {
       ));
 
       await waitFor(() => {
-        const header = document.querySelector("[data-modal-header]");
+        const header = document.querySelector("[data-dialog-header]");
         expect(header?.textContent).toContain("테스트 제목");
       });
     });
@@ -80,7 +80,7 @@ describe("Dialog", () => {
         const content = document.querySelector('[data-testid="content"]');
         expect(content).not.toBeNull();
       });
-      const header = document.querySelector("[data-modal-header]");
+      const header = document.querySelector("[data-dialog-header]");
       expect(header).toBeNull();
     });
 
@@ -112,9 +112,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
-      const closeBtn = document.querySelector("[data-modal-close]");
+      const closeBtn = document.querySelector("[data-dialog-close]");
       expect(closeBtn).toBeNull();
     });
   });
@@ -131,9 +131,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-close]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-close]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-close]")!);
+      fireEvent.click(document.querySelector("[data-dialog-close]")!);
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
@@ -148,9 +148,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-backdrop]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-backdrop]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-backdrop]")!);
+      fireEvent.click(document.querySelector("[data-dialog-backdrop]")!);
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
@@ -165,9 +165,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-backdrop]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-backdrop]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-backdrop]")!);
+      fireEvent.click(document.querySelector("[data-dialog-backdrop]")!);
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
 
@@ -182,7 +182,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       fireEvent.keyDown(document, { key: "Escape" });
       expect(handleOpenChange).toHaveBeenCalledWith(false);
@@ -199,7 +199,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       fireEvent.keyDown(document, { key: "Escape" });
       expect(handleOpenChange).toHaveBeenCalledWith(false);
@@ -216,7 +216,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       fireEvent.keyDown(document, { key: "Escape" });
       expect(handleOpenChange).not.toHaveBeenCalled();
@@ -233,9 +233,9 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal-close]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog-close]")).not.toBeNull();
       });
-      fireEvent.click(document.querySelector("[data-modal-close]")!);
+      fireEvent.click(document.querySelector("[data-dialog-close]")!);
       expect(handleOpenChange).not.toHaveBeenCalled();
     });
   });
@@ -251,7 +251,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.getAttribute("role")).toBe("dialog");
         expect(dialog.getAttribute("aria-modal")).toBe("true");
@@ -269,7 +269,7 @@ describe("Dialog", () => {
       ));
 
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         const headerId = dialog.getAttribute("aria-labelledby");
         expect(headerId).toBeTruthy();
         const header = document.getElementById(headerId!);
@@ -287,7 +287,7 @@ describe("Dialog", () => {
       ));
 
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.hasAttribute("aria-labelledby")).toBe(false);
       });
@@ -303,7 +303,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.getAttribute("role")).toBe("dialog");
         expect(dialog.hasAttribute("aria-modal")).toBe(false);
@@ -324,7 +324,7 @@ describe("Dialog", () => {
       await waitFor(() => {
         expect(document.querySelector('[data-testid="content"]')).not.toBeNull();
       });
-      const backdrop = document.querySelector("[data-modal-backdrop]");
+      const backdrop = document.querySelector("[data-dialog-backdrop]");
       expect(backdrop).toBeNull();
     });
   });
@@ -340,7 +340,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.style.width).toBe("100%");
         expect(dialog.style.height).toBe("100%");
@@ -359,7 +359,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.style.width).toBe("400px");
         expect(dialog.style.height).toBe("300px");
@@ -376,7 +376,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.style.minWidth).toBe("300px");
         expect(dialog.style.minHeight).toBe("200px");
@@ -410,7 +410,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        expect(document.querySelector("[data-modal]")).not.toBeNull();
+        expect(document.querySelector("[data-dialog]")).not.toBeNull();
       });
       const bars = document.querySelectorAll("[data-resize-bar]");
       expect(bars.length).toBe(0);
@@ -428,7 +428,7 @@ describe("Dialog", () => {
         </I18nProvider></ConfigProvider>
       ));
       await waitFor(() => {
-        const dialog = document.querySelector("[data-modal-dialog]") as HTMLElement;
+        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
         expect(dialog).not.toBeNull();
         expect(dialog.classList.contains("transition-[opacity,transform]")).toBe(true);
         expect(dialog.classList.contains("duration-200")).toBe(true);

package/tests/components/disclosure/DialogProvider.spec.tsx

@@ -1,15 +1,17 @@
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
 import { DialogProvider } from "../../../src/components/disclosure/DialogProvider";
 import { useDialog } from "../../../src/components/disclosure/DialogContext";
 import { useDialogInstance } from "../../../src/components/disclosure/DialogInstanceContext";
+import { I18nProvider } from "../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../src/providers/ConfigContext";
 
 // dialog content component for testing
 function TestContent() {
   const dialog = useDialogInstance<string>();
   return (
     <div>
-      <span data-testid="modal-content">다이얼로그 내용</span>
+      <span data-testid="dialog-content">다이얼로그 내용</span>
       <button data-testid="close-btn" onClick={() => dialog?.close("result")}>
         닫기
       </button>
@@ -53,25 +55,37 @@ function TestAppNoHeader() {
 }
 
 describe("DialogProvider", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   it("displays dialog via show()", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
 
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).not.toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).not.toBeNull();
     });
   });
 
   it("closes dialog when close is called via useDialogInstance", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
@@ -84,15 +98,19 @@ describe("DialogProvider", () => {
 
     // dialog content is removed after close animation fallback timer (200ms)
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).toBeNull();
     });
   });
 
   it("closes dialog when close() is called", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
@@ -104,39 +122,47 @@ describe("DialogProvider", () => {
     fireEvent.click(document.querySelector('[data-testid="close-no-result"]')!);
 
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).toBeNull();
     });
   });
 
   it("displays dialog header", async () => {
     render(() => (
-      <DialogProvider>
-        <TestApp />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestApp />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
 
     await waitFor(() => {
-      const modal = document.querySelector("[data-modal]");
-      expect(modal).not.toBeNull();
-      expect(modal!.textContent).toContain("테스트 다이얼로그");
+      const dialog = document.querySelector("[data-dialog]");
+      expect(dialog).not.toBeNull();
+      expect(dialog!.textContent).toContain("테스트 다이얼로그");
     });
   });
 
   it("does not render header when header is not provided", async () => {
     render(() => (
-      <DialogProvider>
-        <TestAppNoHeader />
-      </DialogProvider>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <DialogProvider>
+            <TestAppNoHeader />
+          </DialogProvider>
+        </I18nProvider>
+      </ConfigProvider>
     ));
 
     fireEvent.click(document.querySelector('[data-testid="open-btn"]')!);
 
     await waitFor(() => {
-      expect(document.querySelector('[data-testid="modal-content"]')).not.toBeNull();
+      expect(document.querySelector('[data-testid="dialog-content"]')).not.toBeNull();
     });
-    const header = document.querySelector("[data-modal-header]");
+    const header = document.querySelector("[data-dialog-header]");
     expect(header).toBeNull();
   });
 });