@simplysm/solid 13.0.69 → 13.0.71

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

@@ -2,12 +2,15 @@ import {
   children,
   createMemo,
   createSignal,
+  createUniqueId,
   type JSX,
+  onCleanup,
   onMount,
   Show,
   splitProps,
   useContext,
 } from "solid-js";
+import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry";
 import { reconcile, unwrap } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
 import { objClone, objEqual } from "@simplysm/core-common";
@@ -19,6 +22,7 @@ import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarCo
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import { Dialog } from "../../disclosure/Dialog";
 import { createEventListener } from "@solid-primitives/event-listener";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import clsx from "clsx";
 import {
   IconCheck,
@@ -60,6 +64,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   ]);
 
   const noti = useNotification();
+  const i18n = useI18nOptional();
   const topbarCtx = useContext(TopbarContext);
   const dialogInstance = useDialogInstance<boolean>();
 
@@ -80,6 +85,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
   let formRef: HTMLFormElement | undefined;
 
+  const crudId = createUniqueId();
+
   // -- Load --
   async function doLoad() {
     setBusyCount((c) => c + 1);
@@ -89,7 +96,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       originalData = objClone(result.data);
       setInfo(result.info);
     } catch (err) {
-      noti.error(err, "조회실패");
+      noti.error(err, i18n?.t("crudDetail.lookupFailed") ?? "Lookup failed");
     }
     setBusyCount((c) => c - 1);
     setReady(true);
@@ -98,6 +105,10 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   onMount(() => {
     void doLoad();
   });
+  onCleanup(() => unregisterCrud(crudId));
+
+  createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
+  createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
 
   // -- Change Detection --
   function hasChanges(): boolean {
@@ -108,7 +119,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Refresh --
   async function handleRefresh() {
     if (hasChanges()) {
-      if (!confirm("변경사항을 무시하시겠습니까?")) return;
+      if (!confirm(i18n?.t("crudDetail.discardChanges") ?? "Discard changes?")) return;
     }
     await doLoad();
   }
@@ -120,7 +131,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
     const currentInfo = info();
     if (currentInfo && !currentInfo.isNew && !hasChanges()) {
-      noti.info("안내", "변경사항이 없습니다.");
+      noti.info(i18n?.t("crudDetail.notice") ?? "Notice", i18n?.t("crudDetail.noChanges") ?? "No changes to save.");
       return;
     }
 
@@ -128,7 +139,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.submit(objClone(unwrap(data)));
       if (result) {
-        noti.success("저장 완료", "저장되었습니다.");
+        noti.success(i18n?.t("crudDetail.saveCompleted") ?? "Save completed", i18n?.t("crudDetail.saveSuccess") ?? "Saved successfully.");
         if (dialogInstance) {
           dialogInstance.close(true);
         } else {
@@ -136,7 +147,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         }
       }
     } catch (err) {
-      noti.error(err, "저장 실패");
+      noti.error(err, i18n?.t("crudDetail.saveFailed") ?? "Save failed");
     }
     setBusyCount((c) => c - 1);
   }
@@ -160,7 +171,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.toggleDelete(del);
       if (result) {
-        noti.success(del ? "삭제 완료" : "복구 완료", del ? "삭제되었습니다." : "복구되었습니다.");
+        noti.success(del ? (i18n?.t("crudDetail.deleteCompleted") ?? "Delete completed") : (i18n?.t("crudDetail.restoreCompleted") ?? "Restore completed"), del ? (i18n?.t("crudDetail.deleteSuccess") ?? "Deleted successfully.") : (i18n?.t("crudDetail.restoreSuccess") ?? "Restored successfully."));
         if (dialogInstance) {
           dialogInstance.close(true);
         } else {
@@ -168,20 +179,22 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         }
       }
     } catch (err) {
-      noti.error(err, del ? "삭제 실패" : "복구 실패");
+      noti.error(err, del ? (i18n?.t("crudDetail.deleteFailed") ?? "Delete failed") : (i18n?.t("crudDetail.restoreFailed") ?? "Restore failed"));
     }
     setBusyCount((c) => c - 1);
   }
 
   // -- Keyboard Shortcuts --
   createEventListener(document, "keydown", (e: KeyboardEvent) => {
-    if (!formRef?.contains(document.activeElement)) return;
+    if (!isActiveCrud(crudId)) return;
     if (e.ctrlKey && e.key === "s") {
       e.preventDefault();
-      formRef.requestSubmit();
+      e.stopImmediatePropagation();
+      formRef?.requestSubmit();
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
+      e.stopImmediatePropagation();
       void handleRefresh();
     }
   });
@@ -198,7 +211,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             onClick={() => formRef?.requestSubmit()}
           >
             <Icon icon={IconDeviceFloppy} class="mr-1" />
-            저장
+            {i18n?.t("crudDetail.save") ?? "Save"}
           </Button>
         </Show>
         <Show
@@ -214,13 +227,13 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
               onClick={() => void handleToggleDelete()}
             >
               <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-              {info()!.isDeleted ? "복구" : "삭제"}
+              {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
             </Button>
           )}
         </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
-          새로고침
+          {i18n?.t("crudDetail.refresh") ?? "Refresh"}
         </Button>
       </>
     ));
@@ -271,11 +284,11 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       <BusyContainer
         ready={ready()}
         busy={busyCount() > 0}
-        class={clsx("flex h-full flex-col", local.class)}
+        class={clsx("flex h-full flex-col gap-2", local.class)}
       >
         {/* Toolbar */}
         <Show when={(!isModal && !topbarCtx) || defs().tools}>
-          <div class="flex gap-2 p-2 pb-0">
+          <div class="flex gap-2 pb-0">
             <Show when={!topbarCtx && !isModal}>
               <Show when={canEdit() && local.submit}>
                 <Button
@@ -285,7 +298,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                   onClick={() => formRef?.requestSubmit()}
                 >
                   <Icon icon={IconDeviceFloppy} class="mr-1" />
-                  저장
+                  {i18n?.t("crudDetail.save") ?? "Save"}
                 </Button>
               </Show>
               <Show
@@ -305,13 +318,13 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                     onClick={() => void handleToggleDelete()}
                   >
                     <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                    {info()!.isDeleted ? "복구" : "삭제"}
+                    {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
                   </Button>
                 )}
               </Show>
               <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
                 <Icon icon={IconRefresh} class="mr-1" />
-                새로고침
+                {i18n?.t("crudDetail.refresh") ?? "Refresh"}
               </Button>
             </Show>
             <Show when={defs().tools}>{(toolsDef) => toolsDef().children}</Show>
@@ -322,7 +335,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={defs().before}>{(beforeDef) => beforeDef().children}</Show>
 
         {/* Form */}
-        <form ref={formRef} class="flex-1 overflow-auto p-4" onSubmit={handleFormSubmit}>
+        <form ref={(el) => { formRef = el; registerCrud(crudId, el); }} class="flex-1 overflow-auto" onSubmit={handleFormSubmit}>
           {formContent()}
         </form>
 
@@ -330,7 +343,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={info()?.lastModifiedAt}>
           {(_) => (
             <div class="px-2 pb-1 text-xs text-base-400">
-              최종 수정: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
+              {i18n?.t("crudDetail.lastModified") ?? "Last modified"}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
               <Show when={info()?.lastModifiedBy}> ({info()!.lastModifiedBy})</Show>
             </div>
           )}
@@ -349,7 +362,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
               {(_) => (
                 <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
                   <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                  {info()!.isDeleted ? "복구" : "삭제"}
+                  {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
                 </Button>
               )}
             </Show>
@@ -361,7 +374,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                 class={"gap-1"}
               >
                 <Icon icon={IconCheck} />
-                확인
+                {i18n?.t("crudDetail.confirm") ?? "Confirm"}
               </Button>
             </Show>
           </div>

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

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

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

@@ -3,8 +3,10 @@ import {
   createEffect,
   createMemo,
   createSignal,
+  createUniqueId,
   For,
   type JSX,
+  onCleanup,
   Show,
   splitProps,
   useContext,
@@ -19,6 +21,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";
@@ -40,6 +43,7 @@ import {
   IconTrashOff,
   IconUpload,
 } from "@tabler/icons-solidjs";
+import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry";
 import { CrudSheetColumn, isCrudSheetColumnDef } from "./CrudSheetColumn";
 import { CrudSheetFilter, isCrudSheetFilterDef } from "./CrudSheetFilter";
 import { CrudSheetTools, isCrudSheetToolsDef } from "./CrudSheetTools";
@@ -91,6 +95,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 +121,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));
 
@@ -132,6 +137,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   let formRef: HTMLFormElement | undefined;
 
+  const crudId = createUniqueId();
+  onCleanup(() => unregisterCrud(crudId));
+  createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
+  createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
+
   createEffect(() => {
     void doRefresh();
   });
@@ -158,7 +168,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 +181,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 +192,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 +243,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 +274,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 +287,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 +302,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 +318,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 +336,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 +348,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 +356,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);
@@ -387,20 +397,22 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Keyboard Shortcuts --
   createEventListener(document, "keydown", async (e: KeyboardEvent) => {
-    if (!formRef?.contains(document.activeElement)) return;
+    if (!isActiveCrud(crudId)) return;
     if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
       e.preventDefault();
-      formRef.requestSubmit();
+      e.stopImmediatePropagation();
+      formRef?.requestSubmit();
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
+      e.stopImmediatePropagation();
       if (!checkIgnoreChanges()) return;
       await doRefresh();
     }
   });
 
   // -- 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 +421,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         }
       });
     } catch {
-      // Router context 없으면 skip
+      // Skip if no Router context
     }
   }
 
@@ -425,12 +437,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 +503,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 +524,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 +540,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 +553,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 +572,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 +587,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 +595,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>
@@ -600,7 +612,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         </Show>
 
         {/* DataSheet */}
-        <form ref={formRef} class="flex-1 overflow-hidden p-2 pt-1" onSubmit={handleFormSubmit}>
+        <form ref={(el) => { formRef = el; registerCrud(crudId, el); }} class="flex-1 overflow-hidden p-2 pt-1" onSubmit={handleFormSubmit}>
           <DataSheet
             class="h-full"
             items={items}
@@ -709,7 +721,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 +735,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 +752,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 {