@simplysm/solid 13.0.69 → 13.0.70

package/src/components/features/crud-detail/CrudDetailBefore.tsx

@@ -9,7 +9,7 @@ export function isCrudDetailBeforeDef(value: unknown): value is CrudDetailBefore
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
 export function CrudDetailBefore(props: { children: JSX.Element }): JSX.Element {
   return {
     __type: "crud-detail-before",

package/src/components/features/crud-detail/CrudDetailTools.tsx

@@ -9,7 +9,7 @@ export function isCrudDetailToolsDef(value: unknown): value is CrudDetailToolsDe
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
 export function CrudDetailTools(props: { children: JSX.Element }): JSX.Element {
   return {
     __type: "crud-detail-tools",

package/src/components/features/crud-sheet/CrudSheet.tsx

@@ -19,6 +19,7 @@ import { DataSheet } from "../../data/sheet/DataSheet";
 import { DataSheetColumn } from "../../data/sheet/DataSheetColumn";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { useNotification } from "../../feedback/notification/NotificationContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
 import { FormGroup } from "../../layout/FormGroup";
@@ -91,6 +92,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   ]);
 
   const noti = useNotification();
+  const i18n = useI18nOptional();
   const topbarCtx = useContext(TopbarContext);
   const dialogInstance = useDialogInstance();
   const isModal = dialogInstance !== undefined;
@@ -116,7 +118,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
   let originalItems: TItem[] = [];
 
-  // eslint-disable-next-line solid/reactivity -- filterInitial은 초기값으로만 사용
+  // eslint-disable-next-line solid/reactivity -- filterInitial is used only for initial value
   const [filter, setFilter] = createStore<TFilter>((local.filterInitial ?? {}) as TFilter);
   const [lastFilter, setLastFilter] = createSignal<TFilter>(objClone(filter));
 
@@ -158,7 +160,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     try {
       await refresh();
     } catch (err) {
-      noti.error(err, "조회 실패");
+      noti.error(err, i18n?.t("crudSheet.lookupFailed") ?? "Lookup failed");
     }
     setBusyCount((c) => c - 1);
     setReady(true);
@@ -171,7 +173,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setTotalPageCount(result.pageCount ?? 0);
   }
 
-  /* eslint-disable solid/reactivity -- 이벤트 핸들러에서만 호출, store 즉시 읽기 */
+  /* eslint-disable solid/reactivity -- called only in event handlers, immediate store read */
   function getItemDiffs() {
     return items.oneWayDiffs(originalItems, (item) => local.getItemKey(item), {
       excludes: local.inlineEdit?.diffsExcludes,
@@ -182,7 +184,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   function checkIgnoreChanges(): boolean {
     if (!local.inlineEdit) return true;
     if (getItemDiffs().length === 0) return true;
-    return confirm("변경사항이 있습니다. 무시하시겠습니까?");
+    return confirm(i18n?.t("crudSheet.discardChanges") ?? "You have unsaved changes. Discard them?");
   }
 
   // -- Filter --
@@ -233,18 +235,18 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     const diffs = getItemDiffs();
 
     if (diffs.length === 0) {
-      noti.info("안내", "변경사항이 없습니다.");
+      noti.info(i18n?.t("crudSheet.notice") ?? "Notice", i18n?.t("crudSheet.noChanges") ?? "No changes to save.");
       return;
     }
 
     setBusyCount((c) => c + 1);
     try {
       await local.inlineEdit.submit(diffs);
-      noti.success("저장 완료", "저장되었습니다.");
+      noti.success(i18n?.t("crudSheet.saveCompleted") ?? "Save completed", i18n?.t("crudSheet.saveSuccess") ?? "Saved successfully.");
       await refresh();
       local.onSubmitted?.();
     } catch (err) {
-      noti.error(err, "저장 실패");
+      noti.error(err, i18n?.t("crudSheet.saveFailed") ?? "Save failed");
     }
     setBusyCount((c) => c - 1);
   }
@@ -264,7 +266,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     try {
       await refresh();
     } catch (err) {
-      noti.error(err, "조회 실패");
+      noti.error(err, i18n?.t("crudSheet.lookupFailed") ?? "Lookup failed");
     }
     setBusyCount((c) => c - 1);
   }
@@ -277,9 +279,9 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setBusyCount((c) => c + 1);
     try {
       await refresh();
-      noti.success("삭제 완료", "삭제되었습니다.");
+      noti.success(i18n?.t("crudSheet.deleteCompleted") ?? "Delete completed", i18n?.t("crudSheet.deleteSuccess") ?? "Deleted successfully.");
     } catch (err) {
-      noti.error(err, "삭제 실패");
+      noti.error(err, i18n?.t("crudSheet.deleteFailed") ?? "Delete failed");
     }
     setBusyCount((c) => c - 1);
   }
@@ -292,9 +294,9 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setBusyCount((c) => c + 1);
     try {
       await refresh();
-      noti.success("복구 완료", "복구되었습니다.");
+      noti.success(i18n?.t("crudSheet.restoreCompleted") ?? "Restore completed", i18n?.t("crudSheet.restoreSuccess") ?? "Restored successfully.");
     } catch (err) {
-      noti.error(err, "복구 실패");
+      noti.error(err, i18n?.t("crudSheet.restoreFailed") ?? "Restore failed");
     }
     setBusyCount((c) => c - 1);
   }
@@ -308,7 +310,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       const result = await local.search(lastFilter(), undefined, sorts());
       await local.excel.download(result.items);
     } catch (err) {
-      noti.error(err, "엑셀 다운로드 실패");
+      noti.error(err, i18n?.t("crudSheet.excelDownloadFailed") ?? "Excel download failed");
     }
     setBusyCount((c) => c - 1);
   }
@@ -326,10 +328,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       setBusyCount((c) => c + 1);
       try {
         await local.excel!.upload!(file);
-        noti.success("완료", "엑셀 업로드가 완료되었습니다.");
+        noti.success(i18n?.t("crudSheet.excelCompleted") ?? "Completed", i18n?.t("crudSheet.excelUploadSuccess") ?? "Excel upload completed successfully.");
         await refresh();
       } catch (err) {
-        noti.error(err, "엑셀 업로드 실패");
+        noti.error(err, i18n?.t("crudSheet.excelUploadFailed") ?? "Excel upload failed");
       }
       setBusyCount((c) => c - 1);
     };
@@ -338,7 +340,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Select Mode --
   function handleSelectedItemsChange(newSelectedItems: TItem[]) {
-    // 현재 페이지 아이템들의 key Set
+    // Current page items key Set
     const currentItems = items as unknown as TItem[];
     const currentKeys = new Set<string | number>();
     for (const item of currentItems) {
@@ -346,22 +348,22 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       if (key != null) currentKeys.add(key);
     }
 
-    // 새로 선택된 아이템들의 key
+    // Newly selected items key
     const newSelectedKeys = new Set<string | number>();
     for (const item of newSelectedItems) {
       const key = local.getItemKey(item);
       if (key != null) newSelectedKeys.add(key);
     }
 
-    // 다른 페이지 key 보존 + 현재 페이지 key 갱신
+    // Preserve other page keys + update current page keys
     const merged = new Set<string | number>();
     for (const key of selectedKeys()) {
       if (!currentKeys.has(key)) {
-        merged.add(key); // 다른 페이지 key 보존
+        merged.add(key); // Preserve other page keys
       }
     }
     for (const key of newSelectedKeys) {
-      merged.add(key); // 현재 페이지 선택 추가
+      merged.add(key); // Add current page selection
     }
 
     setSelectedKeys(merged);
@@ -400,7 +402,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
 
   // -- Route Leave Guard --
-  // eslint-disable-next-line solid/reactivity -- inlineEdit는 초기 설정값으로만 사용
+  // eslint-disable-next-line solid/reactivity -- inlineEdit is used only for initial value
   if (!isModal && local.inlineEdit) {
     try {
       useBeforeLeave((e) => {
@@ -409,7 +411,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         }
       });
     } catch {
-      // Router context 없으면 skip
+      // Skip if no Router context
     }
   }
 
@@ -425,12 +427,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             onClick={() => formRef?.requestSubmit()}
           >
             <Icon icon={IconDeviceFloppy} class="mr-1" />
-            저장
+            {i18n?.t("crudSheet.save") ?? "Save"}
           </Button>
         </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={handleRefresh}>
           <Icon icon={IconRefresh} class="mr-1" />
-          새로고침
+          {i18n?.t("crudSheet.refresh") ?? "Refresh"}
         </Button>
       </>
     ));
@@ -491,12 +493,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 onClick={() => formRef?.requestSubmit()}
               >
                 <Icon icon={IconDeviceFloppy} class="mr-1" />
-                저장
+                {i18n?.t("crudSheet.save") ?? "Save"}
               </Button>
             </Show>
             <Button size="sm" theme="info" variant="ghost" onClick={handleRefresh}>
               <Icon icon={IconRefresh} class="mr-1" />
-              새로고침
+              {i18n?.t("crudSheet.refresh") ?? "Refresh"}
             </Button>
           </div>
         </Show>
@@ -512,7 +514,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 <FormGroup.Item>
                   <Button type="submit" theme="info" variant="solid">
                     <Icon icon={IconSearch} class="mr-1" />
-                    조회
+                    {i18n?.t("crudSheet.search") ?? "Search"}
                   </Button>
                 </FormGroup.Item>
                 {filterDef().children(filter, setFilter)}
@@ -528,7 +530,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
               {/* Inline edit buttons */}
               <Show when={canEdit() && local.inlineEdit}>
                 <Button size="sm" theme="primary" variant="ghost" onClick={handleAddRow}>
-                  <Icon icon={IconPlus} class="mr-1" />행 추가
+                  <Icon icon={IconPlus} class="mr-1" />{i18n?.t("crudSheet.addRow") ?? "Add Row"}
                 </Button>
               </Show>
 
@@ -541,7 +543,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   onClick={() => void handleEditItem()}
                 >
                   <Icon icon={IconPlus} class="mr-1" />
-                  등록
+                  {i18n?.t("crudSheet.register") ?? "Register"}
                 </Button>
               </Show>
               <Show when={canEdit() && local.modalEdit?.deleteItems}>
@@ -560,7 +562,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   }
                 >
                   <Icon icon={IconTrash} class="mr-1" />
-                  선택 삭제
+                  {i18n?.t("crudSheet.deleteSelected") ?? "Delete Selected"}
                 </Button>
               </Show>
               <Show when={canEdit() && local.modalEdit?.restoreItems}>
@@ -575,7 +577,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   }
                 >
                   <Icon icon={IconTrashOff} class="mr-1" />
-                  선택 복구
+                  {i18n?.t("crudSheet.restoreSelected") ?? "Restore Selected"}
                 </Button>
               </Show>
 
@@ -583,13 +585,13 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
               <Show when={canEdit() && local.excel?.upload}>
                 <Button size="sm" theme="success" variant="ghost" onClick={handleExcelUpload}>
                   <Icon icon={IconUpload} class="mr-1" />
-                  엑셀 업로드
+                  {i18n?.t("crudSheet.excelUpload") ?? "Excel Upload"}
                 </Button>
               </Show>
               <Show when={local.excel}>
                 <Button size="sm" theme="success" variant="ghost" onClick={handleExcelDownload}>
                   <Icon icon={IconFileExcel} class="mr-1" />
-                  엑셀 다운로드
+                  {i18n?.t("crudSheet.excelDownload") ?? "Excel Download"}
                 </Button>
               </Show>
             </Show>
@@ -709,7 +711,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
             {/* Auto lastModified columns */}
             <Show when={local.lastModifiedAtProp}>
-              <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header="수정일시" hidden>
+              <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header={i18n?.t("crudSheet.lastModified") ?? "Last Modified"} hidden>
                 {(dsCtx) => (
                   <div class="px-2 py-1 text-center">
                     {(
@@ -723,7 +725,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             </Show>
 
             <Show when={local.lastModifiedByProp}>
-              <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header="수정자" hidden>
+              <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n?.t("crudSheet.modifiedBy") ?? "Modified By"} hidden>
                 {(dsCtx) => (
                   <div class="px-2 py-1 text-center">
                     {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
@@ -740,12 +742,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             <div class="flex-1" />
             <Show when={selectedItems().length > 0}>
               <Button size="sm" theme="danger" onClick={handleSelectCancel}>
-                {local.selectMode === "multiple" ? "모두" : "선택"} 해제
+                {local.selectMode === "multiple" ? (i18n?.t("crudSheet.deselectAll") ?? "Deselect All") : (i18n?.t("crudSheet.deselect") ?? "Deselect")}
               </Button>
             </Show>
             <Show when={local.selectMode === "multiple"}>
               <Button size="sm" theme="primary" onClick={handleSelectConfirm}>
-                확인({selectedItems().length})
+                {i18n?.t("crudSheet.confirm") ?? "Confirm"} ({selectedItems().length})
               </Button>
             </Show>
           </div>

package/src/components/features/crud-sheet/CrudSheetColumn.tsx

@@ -10,7 +10,7 @@ export function isCrudSheetColumnDef(value: unknown): value is CrudSheetColumnDe
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern, reactive context not needed */
 export function CrudSheetColumn<TItem>(props: CrudSheetColumnProps<TItem>): JSX.Element {
   return {
     __type: "crud-sheet-column",

package/src/components/features/crud-sheet/CrudSheetFilter.tsx

@@ -9,7 +9,7 @@ export function isCrudSheetFilterDef(value: unknown): value is CrudSheetFilterDe
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
 export function CrudSheetFilter<TFilter>(props: {
   children: (filter: TFilter, setFilter: any) => JSX.Element;
 }): JSX.Element {

package/src/components/features/crud-sheet/CrudSheetHeader.tsx

@@ -9,7 +9,7 @@ export function isCrudSheetHeaderDef(value: unknown): value is CrudSheetHeaderDe
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
 export function CrudSheetHeader(props: { children: JSX.Element }): JSX.Element {
   return {
     __type: "crud-sheet-header",

package/src/components/features/crud-sheet/CrudSheetTools.tsx

@@ -9,7 +9,7 @@ export function isCrudSheetToolsDef(value: unknown): value is CrudSheetToolsDef<
   );
 }
 
-/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
 export function CrudSheetTools<_TItem>(props: {
   children: (ctx: any) => JSX.Element;
 }): JSX.Element {

package/src/components/features/data-select-button/DataSelectButton.tsx

@@ -15,6 +15,7 @@ import { IconSearch, IconX } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import { Invalid } from "../../form-control/Invalid";
 import { useDialog, type DialogShowOptions } from "../../disclosure/DialogContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import {
@@ -24,46 +25,46 @@ import {
   triggerSizeClasses,
 } from "../../form-control/DropdownTrigger.styles";
 
-/** 모달에서 반환하는 결과 인터페이스 */
+/** Result interface returned from modal */
 export interface DataSelectModalResult<TKey> {
   selectedKeys: TKey[];
 }
 
 /** DataSelectButton Props */
 export interface DataSelectButtonProps<TItem, TKey = string | number> {
-  /** 현재 선택된 키 (단일 또는 다중) */
+  /** Currently selected key(s) (single or multiple) */
   value?: TKey | TKey[];
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: TKey | TKey[] | undefined) => void;
 
-  /** 키로 아이템을 로드하는 함수 */
+  /** Function to load items by key */
   load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
-  /** 선택 모달 컴포넌트 팩토리 */
+  /** Selection modal component factory */
   modal: () => JSX.Element;
-  /** 아이템 렌더링 함수 */
+  /** Item rendering function */
   renderItem: (item: TItem) => JSX.Element;
 
-  /** 다중 선택 모드 */
+  /** Multiple selection mode */
   multiple?: boolean;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: unknown) => string | undefined;
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show error only after focus is lost */
   touchMode?: boolean;
 
-  /** 다이얼로그 옵션 */
+  /** Dialog options */
   dialogOptions?: DialogShowOptions;
 }
 
-// 스타일
+// Styles
 const containerClass = clsx("inline-flex items-center", "group");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden", "text-ellipsis");
 const actionButtonClass = clsx(
@@ -111,27 +112,28 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "dialogOptions",
   ]);
 
+  const i18n = useI18nOptional();
   const dialog = useDialog();
 
-  // value를 항상 배열로 정규화
+  // Always normalize value to array
   const normalizeKeys = (value: TKey | TKey[] | undefined): TKey[] => {
     if (value === undefined || value === null) return [];
     if (Array.isArray(value)) return value;
     return [value];
   };
 
-  // controlled/uncontrolled 패턴
+  // Controlled/uncontrolled pattern
   type ValueType = TKey | TKey[] | undefined;
   const [getValue, setValue] = createControllableSignal<ValueType>({
     value: () => local.value,
     onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
   } as Parameters<typeof createControllableSignal<ValueType>>[0]);
 
-  // load를 위한 키 추적 signal
-  // eslint-disable-next-line solid/reactivity -- 초기값은 mount 시점에 한 번만 읽음
+  // Track keys for loading
+  // eslint-disable-next-line solid/reactivity -- initial value read once at mount time
   const [loadKeys, setLoadKeys] = createSignal<TKey[]>(normalizeKeys(local.value));
 
-  // value가 변경되면 loadKeys 업데이트
+  // Update loadKeys when value changes
   createEffect(
     on(
       () => getValue(),
@@ -141,33 +143,33 @@ export function DataSelectButton<TItem, TKey = string | number>(
     ),
   );
 
-  // createResource로 load 호출
-  // eslint-disable-next-line solid/reactivity -- createResource의 fetcher는 source 변경 시 호출됨
+  // Call load via createResource
+  // eslint-disable-next-line solid/reactivity -- createResource fetcher is called when source changes
   const [selectedItems] = createResource(loadKeys, async (keys) => {
     if (keys.length === 0) return [];
     return Promise.resolve(local.load(keys));
   });
 
-  // 값이 있는지 확인
+  // Check if has value
   const hasValue = createMemo(() => {
     const keys = normalizeKeys(getValue());
     return keys.length > 0;
   });
 
-  // 지우기 가능 여부
+  // Check if clearable
   const clearable = createMemo(() => !local.required && hasValue() && !local.disabled);
 
-  // 유효성 검사
+  // Validation
   const errorMsg = createMemo(() => {
     const v = getValue();
     if (local.required) {
       const keys = normalizeKeys(v);
-      if (keys.length === 0) return "필수 입력 항목입니다";
+      if (keys.length === 0) return "Required field";
     }
     return local.validate?.(v);
   });
 
-  // 모달 열기
+  // Open modal
   const handleOpenModal = async () => {
     if (local.disabled) return;
 
@@ -186,7 +188,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     }
   };
 
-  // 지우기
+  // Clear selection
   const handleClear = (e: MouseEvent) => {
     e.stopPropagation();
     if (local.multiple) {
@@ -196,7 +198,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     }
   };
 
-  // 선택된 값 표시
+  // Render selected value display
   const renderSelectedDisplay = (): JSX.Element => {
     const items = selectedItems();
     if (!items || items.length === 0) {
@@ -218,7 +220,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     );
   };
 
-  // 트리거 클래스 계산
+  // Calculate trigger class
   const triggerClassName = () =>
     getTriggerContainerClass({
       size: local.size,
@@ -254,7 +256,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
                 class={twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")}
                 onClick={handleClear}
                 tabIndex={-1}
-                aria-label="선택 해제"
+                aria-label={i18n?.t("dataSelectButton.deselect") ?? "Deselect"}
               >
                 <Icon icon={IconX} size="0.875em" />
               </button>
@@ -266,7 +268,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
                 class={twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")}
                 onClick={() => void handleOpenModal()}
                 tabIndex={-1}
-                aria-label="검색"
+                aria-label={i18n?.t("dataSelectButton.search") ?? "Search"}
               >
                 <Icon icon={IconSearch} size="0.875em" />
               </button>