@simplysm/solid 13.0.69 → 13.0.70

package/src/components/disclosure/Dropdown.tsx

@@ -41,53 +41,53 @@ const DropdownContent = createSlotComponent(DropdownContext, (ctx) => ctx.setCon
 
 export interface DropdownProps {
   /**
-   * 절대 위치 (컨텍스트 메뉴 등, minWidth 없음)
-   * Trigger와 함께 사용 시 Trigger 기준 위치 계산
+   * Absolute position (for context menus, no minWidth)
+   * When used with Trigger, calculates position relative to Trigger
    */
   position?: { x: number; y: number };
 
   /**
-   * 팝업 열림 상태
+   * Popup open state
    */
   open?: boolean;
 
   /**
-   * 열림 상태 변경 시 콜백
+   * Callback when open state changes
    */
   onOpenChange?: (open: boolean) => void;
 
   /**
-   * 팝업 최대 높이 (기본값: 300px), 초과 시 내부 스크롤
+   * Popup max height (default: 300px), scrolls internally if exceeded
    */
   maxHeight?: number;
 
   /**
-   * 비활성화 (Trigger 클릭 무시)
+   * Disabled (Trigger click ignored)
    */
   disabled?: boolean;
 
   /**
-   * 키보드 네비게이션 활성화 (Select 등에서 사용)
+   * Enable keyboard navigation (used in Select, etc)
    *
-   * direction=down일 때:
-   * - 트리거에서 ArrowDown -> 첫 focusable 아이템 포커스
-   * - 첫 아이템에서 ArrowUp -> 트리거 포커스
-   * - 트리거에서 ArrowUp -> 닫기
+   * When direction=down:
+   * - ArrowDown from trigger -> focus first focusable item
+   * - ArrowUp from first item -> focus trigger
+   * - ArrowUp from trigger -> close
    *
-   * direction=up일 때:
-   * - 트리거에서 ArrowUp -> 마지막 focusable 아이템 포커스
-   * - 마지막 아이템에서 ArrowDown -> 트리거 포커스
-   * - 트리거에서 ArrowDown -> 닫기
+   * When direction=up:
+   * - ArrowUp from trigger -> focus last focusable item
+   * - ArrowDown from last item -> focus trigger
+   * - ArrowDown from trigger -> close
    */
   keyboardNav?: boolean;
 
   /**
-   * 팝업에 적용할 커스텀 class
+   * Custom class for popup
    */
   class?: string;
 
   /**
-   * 팝업에 적용할 커스텀 style
+   * Custom style for popup
    */
   style?: JSX.CSSProperties;
 
@@ -103,28 +103,28 @@ interface DropdownComponent extends ParentComponent<DropdownProps> {
 }
 
 /**
- * 드롭다운 팝업 컴포넌트
+ * Dropdown popup component
  *
- * Trigger/Content 슬롯 패턴으로 트리거와 컨텐츠를 분리합니다.
- * Trigger 클릭 시 auto-toggle되며, disabled prop으로 비활성화할 수 있습니다.
+ * Separates trigger and content using Trigger/Content slot pattern.
+ * Auto-toggles on Trigger click, can be disabled with disabled prop.
  *
  * @example
  * ```tsx
  * <Dropdown>
  *   <Dropdown.Trigger>
- *     <Button>열기</Button>
+ *     <Button>Open</Button>
  *   </Dropdown.Trigger>
  *   <Dropdown.Content>
- *     <div>팝업 내용</div>
+ *     <div>Popup content</div>
  *   </Dropdown.Content>
  * </Dropdown>
  * ```
  *
- * @example Context menu (Trigger 없이 position 사용)
+ * @example Context menu (position without Trigger)
  * ```tsx
  * <Dropdown position={{ x: 300, y: 200 }} open={true}>
  *   <Dropdown.Content>
- *     <div>메뉴</div>
+ *     <div>Menu</div>
  *   </Dropdown.Content>
  * </Dropdown>
  * ```
@@ -147,32 +147,32 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onChange: () => local.onOpenChange,
   });
 
-  // toggle 함수 (disabled 체크 포함)
+  // Toggle function (includes disabled check)
   const toggle = () => {
     if (local.disabled) return;
     setOpen(!open());
   };
 
-  // 슬롯 등록 시그널
+  // Slot registration signals
   const [triggerSlot, setTrigger] = createSlotSignal();
   const [contentSlot, setContent] = createSlotSignal();
 
-  // Trigger wrapper ref (위치 계산에 필요)
+  // Trigger wrapper ref (needed for position calculation)
   let triggerRef: HTMLDivElement | undefined;
 
-  // 팝업 ref
+  // Popup ref
   const [popupRef, setPopupRef] = createSignal<HTMLDivElement>();
 
-  // 애니메이션 상태 (mount transition)
+  // Animation state (mount transition)
   const { mounted, animating, unmount } = createMountTransition(open);
 
-  // 계산된 위치
+  // Computed position
   const [computedStyle, setComputedStyle] = createSignal<JSX.CSSProperties>({});
 
-  // 방향 (위/아래)
+  // Direction (up/down)
   const [direction, setDirection] = createSignal<"down" | "up">("down");
 
-  // 위치 계산 함수 추출
+  // Extract position calculation function
   const updatePosition = () => {
     const popup = popupRef();
     if (!popup) return;
@@ -184,13 +184,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
 
-      // 위/아래 방향 결정 (화면 중앙 기준)
+      // Determine up/down direction (based on viewport center)
       const spaceBelow = viewportHeight - rect.bottom;
       const spaceAbove = rect.top;
       const openDown = spaceBelow >= spaceAbove;
       setDirection(openDown ? "down" : "up");
 
-      // 좌/우 조정 (화면 밖으로 나가지 않도록) - 뷰포트 기준
+      // Adjust left/right (prevent off-screen) - relative to viewport
       const adjustedLeft = Math.min(rect.left, viewportWidth - popup.offsetWidth);
 
       style.left = `${Math.max(0, adjustedLeft)}px`;
@@ -205,13 +205,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
 
-      // 위/아래 방향 결정
+      // Determine up/down direction
       const spaceBelow = viewportHeight - local.position.y;
       const spaceAbove = local.position.y;
       const openDown = spaceBelow >= spaceAbove;
       setDirection(openDown ? "down" : "up");
 
-      // 좌/우 조정 - 뷰포트 기준
+      // Adjust left/right - relative to viewport
       const adjustedLeft = Math.min(local.position.x, viewportWidth - (popup.offsetWidth || 200));
       style.left = `${Math.max(0, adjustedLeft)}px`;
 
@@ -225,7 +225,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     setComputedStyle(style);
   };
 
-  // 마운트 시 위치 계산 + popup 크기 변경 시 재계산
+  // Calculate position on mount + recalculate when popup size changes
   createEffect(() => {
     if (!mounted()) return;
 
@@ -239,7 +239,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     }
   });
 
-  // 외부 클릭 감지 (pointerdown)
+  // Detect outside click (pointerdown)
   createEffect(() => {
     if (!open()) return;
 
@@ -247,13 +247,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const popup = popupRef();
       const target = e.target as Node;
 
-      // 팝업 내부 클릭은 무시
+      // Ignore clicks inside popup
       if (popup?.contains(target)) return;
 
-      // Trigger 내부 클릭도 무시
+      // Ignore clicks inside trigger
       if (triggerRef?.contains(target)) return;
 
-      // 외부 클릭 -> 닫기
+      // Outside click -> close
       setOpen(false);
     };
 
@@ -261,7 +261,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
   });
 
-  // Tab 키 포커스 이동 감지 (focusout)
+  // Detect Tab key focus movement (focusout)
   createEffect(() => {
     if (!open()) return;
 
@@ -269,16 +269,16 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const popup = popupRef();
       const relatedTarget = e.relatedTarget as Node | null;
 
-      // relatedTarget이 null이면 무시 (pointerdown이 처리)
+      // Ignore if relatedTarget is null (pointerdown handles it)
       if (!relatedTarget) return;
 
-      // 팝업 내부로 이동은 무시
+      // Ignore movement to popup
       if (popup?.contains(relatedTarget)) return;
 
-      // Trigger 내부로 이동도 무시
+      // Ignore movement to trigger
       if (triggerRef?.contains(relatedTarget)) return;
 
-      // 외부로 포커스 이동 -> 닫기
+      // Focus moved outside -> close
       setOpen(false);
     };
 
@@ -286,7 +286,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => document.removeEventListener("focusout", handleFocusOut));
   });
 
-  // Escape 키 감지
+  // Detect Escape key
   createEffect(() => {
     if (!open()) return;
 
@@ -301,11 +301,11 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
   });
 
-  // 키보드 네비게이션: 트리거용 핸들러
+  // Keyboard navigation: handler for trigger
   const handleTriggerKeyDown = (e: KeyboardEvent) => {
     if (!local.keyboardNav) return;
 
-    // 닫혀있을 때: ArrowUp/ArrowDown으로 열기
+    // When closed: open with ArrowUp/ArrowDown
     if (!open()) {
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
@@ -314,7 +314,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       return;
     }
 
-    // 열려있을 때: direction에 따른 처리
+    // When open: handle based on direction
     const popup = popupRef();
     if (!popup) return;
 
@@ -345,19 +345,19 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     }
   };
 
-  // 키보드 네비게이션: 팝업용 핸들러
+  // Keyboard navigation: handler for popup
   const handlePopupKeyDown = (e: KeyboardEvent) => {
     if (!local.keyboardNav) return;
 
-    // List 등에서 이미 처리된 이벤트는 무시
+    // Ignore events already handled (e.g., by List)
     if (e.defaultPrevented) return;
 
     if (!triggerRef) return;
 
     const dir = direction();
 
-    // 팝업에서 ArrowUp/ArrowDown이 처리되지 않았다면 (첫/마지막 아이템)
-    // 트리거로 포커스 이동
+    // If ArrowUp/ArrowDown not handled in popup (first/last item)
+    // Move focus to trigger
     if (dir === "down" && e.key === "ArrowUp") {
       e.preventDefault();
       triggerRef.focus();
@@ -367,24 +367,24 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     }
   };
 
-  // 스크롤 감지
+  // Detect scroll
   createEffect(() => {
     if (!open()) return;
 
     const handleScroll = (e: Event) => {
-      // 팝업 내부 스크롤은 무시
+      // Ignore scroll inside popup
       const popup = popupRef();
       if (popup?.contains(e.target as Node)) return;
 
       setOpen(false);
     };
 
-    // capture로 모든 스크롤 감지
+    // Detect all scroll events with capture
     document.addEventListener("scroll", handleScroll, { capture: true });
     onCleanup(() => document.removeEventListener("scroll", handleScroll, { capture: true }));
   });
 
-  // resize 감지 (뷰포트 크기 변경 시 닫기)
+  // Detect resize (close when viewport size changes)
   createEffect(() => {
     if (!open()) return;
 
@@ -396,20 +396,20 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => window.removeEventListener("resize", handleResize));
   });
 
-  // transitionend 이벤트 처리
+  // Handle transitionend event
   const handleTransitionEnd = (e: TransitionEvent) => {
-    // opacity 전환 완료 시에만 처리
+    // Only handle when opacity transition completes
     if (e.propertyName !== "opacity") return;
 
     if (!open()) {
-      // 닫힘 애니메이션 완료 -> DOM에서 제거
+      // Closing animation complete -> remove from DOM
       unmount();
     }
   };
 
   const maxHeight = () => local.maxHeight ?? 300;
 
-  // 애니메이션 클래스 (opacity와 transform만 transition, 위치 속성은 제외)
+  // Animation class (only transition opacity and transform, not position properties)
   const animationClass = () => {
     const base = "transition-[opacity,transform] duration-150 ease-out";
     const visible = animating();
@@ -426,7 +426,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     <DropdownContext.Provider value={{ toggle, setTrigger, setContent }}>
       {local.children}
 
-      {/* Trigger 슬롯 렌더링 (wrapper div에 click/keyboard handler 부착) */}
+      {/* Render trigger slot (attach click/keyboard handlers to wrapper div) */}
       <Show when={triggerSlot()}>
         <div
           ref={(el) => {
@@ -440,7 +440,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
         </div>
       </Show>
 
-      {/* Content 슬롯: Portal + 팝업 */}
+      {/* Content slot: Portal + popup */}
       <Show when={mounted()}>
         <Portal>
           <div

package/src/components/disclosure/Tabs.tsx

@@ -25,7 +25,7 @@ interface TabsTabProps {
 
 function TabsTabInner(props: TabsTabProps) {
   const ctx = useContext(TabsContext);
-  if (!ctx) throw new Error("Tabs.Tab은 Tabs 내부에서만 사용할 수 있습니다");
+  if (!ctx) throw new Error("Tabs.Tab can only be used inside Tabs");
 
   const isSelected = () => ctx.value() === props.value;
 

package/src/components/disclosure/dialogZIndex.ts

@@ -1,24 +1,24 @@
 /**
- * Dialog z-index 레지스트리
+ * Dialog z-index registry
  *
- * 열린 Dialog의 z-index를 관리하여 무한 증가를 방지한다.
- * 기본 시작값 2000 (tailwind z-modal과 동일), 최대 열린 Dialog 수만큼만 사용.
+ * Manages z-index of open Dialogs to prevent infinite increase.
+ * Base starting value is 2000 (same as tailwind z-modal), uses only as many as there are open Dialogs.
  */
 
 const BASE_Z = 2000;
 
-// 열린 Dialog wrapper 요소 목록 (순서 = z-index 순서)
+// List of open Dialog wrapper elements (order = z-index order)
 const stack: HTMLElement[] = [];
 
-/** Dialog 등록 — 스택 최상위에 추가하고 z-index 할당 */
+/** Register Dialog — add to top of stack and assign z-index */
 export function registerDialog(el: HTMLElement): void {
   const idx = stack.indexOf(el);
-  if (idx >= 0) return; // 이미 등록됨
+  if (idx >= 0) return; // Already registered
   stack.push(el);
   el.style.zIndex = (BASE_Z + stack.length - 1).toString();
 }
 
-/** Dialog 해제 — 스택에서 제거하고 나머지 재정렬 */
+/** Unregister Dialog — remove from stack and reorder rest */
 export function unregisterDialog(el: HTMLElement): void {
   const idx = stack.indexOf(el);
   if (idx < 0) return;
@@ -26,23 +26,23 @@ export function unregisterDialog(el: HTMLElement): void {
   reindex();
 }
 
-/** Dialog를 최상위로 올림 (포커스 시) */
+/** Bring Dialog to front (on focus) */
 export function bringToFront(el: HTMLElement): void {
   const idx = stack.indexOf(el);
-  if (idx < 0 || idx === stack.length - 1) return; // 이미 최상위
+  if (idx < 0 || idx === stack.length - 1) return; // Already at front
   stack.splice(idx, 1);
   stack.push(el);
   reindex();
 }
 
-/** 스택 순서대로 z-index 재할당 */
+/** Reassign z-index in stack order */
 function reindex(): void {
   for (let i = 0; i < stack.length; i++) {
     stack[i].style.zIndex = (BASE_Z + i).toString();
   }
 }
 
-/** 해당 Dialog가 스택 최상위인지 확인 */
+/** Check if Dialog is at top of stack */
 export function isTopmost(el: HTMLElement): boolean {
   return stack.length > 0 && stack[stack.length - 1] === el;
 }

package/src/components/display/Echarts.tsx

@@ -24,7 +24,7 @@ export const Echarts: Component<EchartsProps> = (props) => {
   let chart: echartsType.EChartsType | undefined;
   const [ready, setReady] = createSignal(false);
 
-  // 마운트 시 echarts 동적 로드 + 차트 초기화
+  // On mount, dynamically load echarts + initialize chart
   createEffect(() => {
     void import("echarts").then((echarts) => {
       chart = echarts.init(containerRef, null, { renderer: "svg" });
@@ -34,13 +34,13 @@ export const Echarts: Component<EchartsProps> = (props) => {
     onCleanup(() => chart?.dispose());
   });
 
-  // option 변경 감지
+  // Detect option changes
   createEffect(() => {
     if (!ready()) return;
     chart!.setOption(local.option);
   });
 
-  // busy 상태 변경 감지
+  // Detect busy state changes
   createEffect(() => {
     if (!ready()) return;
     if (local.busy) {
@@ -50,7 +50,7 @@ export const Echarts: Component<EchartsProps> = (props) => {
     }
   });
 
-  // 컨테이너 크기 변경 감지
+  // Detect container size changes
   createResizeObserver(containerRef, () => {
     chart?.resize();
   });

package/src/components/features/address/AddressSearch.tsx

@@ -22,7 +22,7 @@ export const AddressSearchContent: Component = () => {
         scriptEl.setAttribute("id", "daum_address");
 
         scriptEl.onload = (): void => {
-          // @ts-expect-error -- Daum Postcode 글로벌 API
+          // @ts-expect-error -- Daum Postcode global API
           daum.postcode.load(() => {
             resolve();
           });
@@ -31,7 +31,7 @@ export const AddressSearchContent: Component = () => {
       });
     }
 
-    // @ts-expect-error -- Daum Postcode 글로벌 API
+    // @ts-expect-error -- Daum Postcode global API
     new daum.Postcode({
       oncomplete: (data: any): void => {
         const addr = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress;

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

@@ -19,6 +19,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 +61,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   ]);
 
   const noti = useNotification();
+  const i18n = useI18nOptional();
   const topbarCtx = useContext(TopbarContext);
   const dialogInstance = useDialogInstance<boolean>();
 
@@ -89,7 +91,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);
@@ -108,7 +110,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 +122,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 +130,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 +138,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 +162,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,7 +170,7 @@ 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);
   }
@@ -198,7 +200,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 +216,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>
       </>
     ));
@@ -285,7 +287,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 +307,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>
@@ -330,7 +332,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 +351,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 +363,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",