@simplysm/solid 13.0.69 → 13.0.71

package/src/components/features/crudRegistry.ts

@@ -0,0 +1,60 @@
+/**
+ * Crud activation registry
+ *
+ * Tracks mounted CrudDetail/CrudSheet instances and determines which one
+ * should respond to keyboard shortcuts (Ctrl+S, Ctrl+Alt+L).
+ *
+ * Priority rules:
+ * 1. If a Dialog is open, only cruds inside the topmost Dialog are candidates.
+ * 2. Among candidates, the most recently activated (interacted) crud wins.
+ * 3. On mount, cruds are auto-activated (last mounted = active).
+ */
+
+import { getTopmostDialog } from "../disclosure/dialogZIndex";
+
+interface CrudEntry {
+  id: string;
+  formEl: HTMLFormElement;
+  lastActivatedAt: number;
+}
+
+const entries: CrudEntry[] = [];
+let _counter = 0;
+
+export function registerCrud(id: string, formEl: HTMLFormElement): void {
+  const existing = entries.find((e) => e.id === id);
+  if (existing) return;
+  entries.push({ id, formEl, lastActivatedAt: ++_counter });
+}
+
+export function unregisterCrud(id: string): void {
+  const idx = entries.findIndex((e) => e.id === id);
+  if (idx >= 0) entries.splice(idx, 1);
+}
+
+export function activateCrud(id: string): void {
+  const entry = entries.find((e) => e.id === id);
+  if (entry) entry.lastActivatedAt = ++_counter;
+}
+
+export function isActiveCrud(id: string): boolean {
+  const entry = entries.find((e) => e.id === id);
+  if (!entry) return false;
+
+  const topDialog = getTopmostDialog();
+
+  const candidates = topDialog
+    ? entries.filter((e) => topDialog.contains(e.formEl))
+    : entries;
+
+  if (candidates.length === 0) return false;
+
+  let best = candidates[0];
+  for (let i = 1; i < candidates.length; i++) {
+    if (candidates[i].lastActivatedAt > best.lastActivatedAt) {
+      best = candidates[i];
+    }
+  }
+
+  return best.id === id;
+}

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>

package/src/components/features/permission-table/PermissionTable.tsx

@@ -10,17 +10,17 @@ import {
   splitProps,
 } from "solid-js";
 import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
 import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
 import type { AppPerm } from "../../../helpers/createAppStructure";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 const titleCellClass = clsx("flex items-stretch", "px-2");
 const indentGuideWrapperClass = clsx("mr-1 flex w-3", "justify-center");
 const indentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
 
-// --- 타입 ---
+// --- Types ---
 
 export interface PermissionTableProps<TModule = string> {
   items?: AppPerm<TModule>[];
@@ -32,9 +32,9 @@ export interface PermissionTableProps<TModule = string> {
   style?: JSX.CSSProperties;
 }
 
-// --- 유틸리티 (테스트에서도 사용) ---
+// --- Utilities (also used in tests) ---
 
-/** 트리에서 모든 고유 perm 타입을 수집 */
+/** Collect all unique perm types from the tree */
 export function collectAllPerms<TModule>(items: AppPerm<TModule>[]): string[] {
   const set = new Set<string>();
   const walk = (list: AppPerm<TModule>[]) => {
@@ -49,7 +49,7 @@ export function collectAllPerms<TModule>(items: AppPerm<TModule>[]): string[] {
   return [...set];
 }
 
-/** modules 필터: 활성 모듈과 교차가 있는 아이템만 남김 */
+/** Filter by modules: keep only items that have intersection with active modules */
 export function filterByModules<TModule>(
   items: AppPerm<TModule>[],
   modules: TModule[] | undefined,
@@ -72,7 +72,7 @@ export function filterByModules<TModule>(
   return result;
 }
 
-/** 체크 변경 시 cascading 처리 */
+/** Handle cascading when checkbox changes */
 export function changePermCheck<TModule>(
   value: Record<string, boolean>,
   item: AppPerm<TModule>,
@@ -112,9 +112,9 @@ export function changePermCheck<TModule>(
   return result;
 }
 
-// --- 내부 헬퍼 ---
+// --- Internal Helpers ---
 
-/** 모듈 필터에 의해 보이는지 확인 (객체 참조 유지) */
+/** Check if item is visible by module filter (preserve object reference) */
 function isItemVisible<TModule>(item: AppPerm<TModule>, modules: TModule[] | undefined): boolean {
   if (!modules || modules.length === 0) return true;
   if (item.modules && !item.modules.some((m) => modules.includes(m))) return false;
@@ -124,7 +124,7 @@ function isItemVisible<TModule>(item: AppPerm<TModule>, modules: TModule[] | und
   return true;
 }
 
-/** 보이는 아이템에서만 고유 perm 타입 수집 */
+/** Collect unique perm types from visible items only */
 function collectVisiblePerms<TModule>(
   items: AppPerm<TModule>[],
   modules: TModule[] | undefined,
@@ -145,7 +145,7 @@ function collectVisiblePerms<TModule>(
   return [...set];
 }
 
-/** 그룹 노드의 체크 상태: 하위 중 하나라도 체크면 true */
+/** Get check state of group node: true if any child is checked */
 function isGroupPermChecked<TModule>(
   item: AppPerm<TModule>,
   perm: string,
@@ -160,7 +160,7 @@ function isGroupPermChecked<TModule>(
   return false;
 }
 
-/** 하위에 특정 perm이 하나라도 있으면 true */
+/** Check if specific perm exists in subtree */
 function hasPermInTree<TModule>(item: AppPerm<TModule>, perm: string): boolean {
   if (item.perms?.includes(perm)) return true;
   if (item.children) {
@@ -169,7 +169,7 @@ function hasPermInTree<TModule>(item: AppPerm<TModule>, perm: string): boolean {
   return false;
 }
 
-/** 기본 권한(perms[0])이 꺼져 있어서 비활성화해야 하는지 */
+/** Check if perm should be disabled (base perm is off) */
 function isPermDisabled<TModule>(
   item: AppPerm<TModule>,
   perm: string,
@@ -181,7 +181,7 @@ function isPermDisabled<TModule>(
   return !(value[item.href + "/" + basePerm] ?? false);
 }
 
-/** 확장 가능한 모든 아이템 수집 (객체 참조 유지) */
+/** Collect all expandable items (preserve object reference) */
 function collectExpandable<TModule>(
   items: AppPerm<TModule>[],
   getChildren: (item: AppPerm<TModule>) => AppPerm<TModule>[] | undefined,
@@ -202,7 +202,7 @@ function collectExpandable<TModule>(
   return result;
 }
 
-// --- 컴포넌트 ---
+// --- Component ---
 
 export const PermissionTable: Component<PermissionTableProps> = (props) => {
   const [local] = splitProps(props, [
@@ -215,14 +215,16 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     "style",
   ]);
 
-  // 보이는 최상위 아이템 (객체 참조 유지)
+  const i18n = useI18nOptional();
+
+  // Visible top-level items (preserve object reference)
   const visibleItems = createMemo(() => {
     const items = local.items ?? [];
     if (!local.modules || local.modules.length === 0) return items;
     return items.filter((item) => isItemVisible(item, local.modules));
   });
 
-  // Sheet의 getChildren — 모듈 필터 적용, 객체 참조 유지
+  // Sheet's getChildren — apply module filter, preserve object reference
   const getChildren = (item: AppPerm): AppPerm[] | undefined => {
     if (!item.children || item.children.length === 0) return undefined;
     const modules = local.modules;
@@ -231,17 +233,17 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     return filtered.length > 0 ? filtered : undefined;
   };
 
-  // 보이는 아이템의 모든 고유 perm 타입
+  // All unique perm types from visible items
   const allPerms = createMemo(() => collectVisiblePerms(local.items ?? [], local.modules));
 
   const currentValue = createMemo(() => local.value ?? {});
 
-  // 확장 상태 — 기본적으로 모두 펼침
+  // Expanded state — all expanded by default
   const getAllExpandable = () => collectExpandable(visibleItems(), getChildren);
 
   const [expandedItems, setExpandedItems] = createSignal<AppPerm[]>(getAllExpandable());
 
-  // 트리 구조 변경 시 모두 다시 펼침 (모듈 필터 변경 등)
+  // Re-expand all when tree structure changes (e.g., module filter changed)
   createEffect(
     on(
       visibleItems,
@@ -258,51 +260,55 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
   };
 
   return (
-    <div data-permission-table class={twMerge(local.class)} style={local.style}>
-      <DataSheet
-        items={visibleItems()}
-        getChildren={getChildren}
-        expandedItems={expandedItems()}
-        onExpandedItemsChange={setExpandedItems}
-        hideConfigBar
+    <DataSheet
+      data-permission-table
+      items={visibleItems()}
+      getChildren={getChildren}
+      expandedItems={expandedItems()}
+      onExpandedItemsChange={setExpandedItems}
+      hideConfigBar
+    >
+      <DataSheet.Column
+        key="title"
+        header={i18n?.t("permissionTable.permissionItem") ?? "Permission Item"}
+        sortable={false}
+        resizable={false}
       >
-        <DataSheet.Column key="title" header="권한 항목" sortable={false} resizable={false}>
-          {(ctx) => {
-            const item = ctx.item as AppPerm;
-            return (
-              <div class={titleCellClass}>
-                <For each={Array.from({ length: ctx.depth })}>
-                  {() => (
-                    <div class={indentGuideWrapperClass}>
-                      <div class={indentGuideLineClass} />
-                    </div>
-                  )}
-                </For>
-                <span class="py-1">{item.title}</span>
-              </div>
-            );
-          }}
-        </DataSheet.Column>
-        <For each={allPerms()}>
-          {(perm) => (
-            <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
-              {(ctx) => {
-                const item = ctx.item as AppPerm;
-                return (
-                  <Show when={hasPermInTree(item, perm)}>
-                    <Checkbox
-                      value={isGroupPermChecked(item, perm, currentValue())}
-                      onValueChange={(checked) => handlePermChange(item, perm, checked)}
-                      disabled={local.disabled || isPermDisabled(item, perm, currentValue())}
-                      inset
-                    />
-                  </Show>
-                );
-              }}
-            </DataSheet.Column>
-          )}
-        </For>
-      </DataSheet>
-    </div>
+        {(ctx) => {
+          const item = ctx.item as AppPerm;
+          return (
+            <div class={titleCellClass}>
+              <For each={Array.from({ length: ctx.depth })}>
+                {() => (
+                  <div class={indentGuideWrapperClass}>
+                    <div class={indentGuideLineClass} />
+                  </div>
+                )}
+              </For>
+              <span class="py-1">{item.title}</span>
+            </div>
+          );
+        }}
+      </DataSheet.Column>
+      <For each={allPerms()}>
+        {(perm) => (
+          <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
+            {(ctx) => {
+              const item = ctx.item as AppPerm;
+              return (
+                <Show when={hasPermInTree(item, perm)}>
+                  <Checkbox
+                    value={isGroupPermChecked(item, perm, currentValue())}
+                    onValueChange={(checked) => handlePermChange(item, perm, checked)}
+                    disabled={local.disabled || isPermDisabled(item, perm, currentValue())}
+                    inset
+                  />
+                </Show>
+              );
+            }}
+          </DataSheet.Column>
+        )}
+      </For>
+    </DataSheet>
   );
 };

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -4,72 +4,74 @@ import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDa
 import { Select, type SelectProps } from "../../form-control/select/Select";
 import { Icon } from "../../display/Icon";
 import { useDialog } from "../../disclosure/DialogContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { type ComponentSize } from "../../../styles/tokens.styles";
 
 /** SharedDataSelect Props */
 export interface SharedDataSelectProps<TItem> {
-  /** 공유 데이터 접근자 */
+  /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** 현재 선택된 값 */
+  /** Currently selected value */
   value?: unknown;
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: unknown) => void;
-  /** 다중 선택 모드 */
+  /** Multiple selection mode */
   multiple?: boolean;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 항목 필터 함수 */
+  /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** 선택 모달 컴포넌트 팩토리 */
+  /** Selection modal component factory */
   modal?: () => JSX.Element;
-  /** 편집 모달 컴포넌트 팩토리 */
+  /** Edit modal component factory */
   editModal?: () => JSX.Element;
 
-  /** 아이템 렌더링 함수 */
+  /** Item rendering function */
   children: (item: TItem, index: number, depth: number) => JSX.Element;
 }
 
 export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JSX.Element {
   const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "editModal", "children"]);
 
+  const i18n = useI18nOptional();
   const dialog = useDialog();
 
-  // filterFn 적용된 items
+  // Items with filterFn applied
   const items = createMemo(() => {
     const allItems = local.data.items();
     if (!local.filterFn) return allItems;
     return allItems.filter(local.filterFn);
   });
 
-  // modal 열기
+  // Open modal
   const handleOpenModal = async () => {
     if (!local.modal) return;
     await dialog.show(local.modal, {});
   };
 
-  // editModal 열기
+  // Open edit modal
   const handleOpenEditModal = async () => {
     if (!local.editModal) return;
     await dialog.show(local.editModal, {});
   };
 
-  // Select의 discriminated union (multiple: true | false?)과 TItem → unknown 변환을 위해 mergeProps + as 사용
-  // getter로 래핑하여 SolidJS 반응성 lint 규칙 충족
+  // Use mergeProps + as for Select's discriminated union (multiple: true | false?) and TItem → unknown conversion
+  // Wrap with getter to satisfy SolidJS reactivity lint rules
   const selectProps = mergeProps(rest, {
     get items() {
       return items();
     },
     get getChildren() {
       if (!local.data.getParentKey) return undefined;
-      // eslint-disable-next-line solid/reactivity -- 반환 함수는 Select 내부 JSX tracked scope에서 호출됨
+      // eslint-disable-next-line solid/reactivity -- return function is called within Select's internal JSX tracked scope
       return (item: TItem) => {
         const key = local.data.getKey(item);
         return items().filter((child) => local.data.getParentKey!(child) === key);
@@ -87,13 +89,13 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
     <Select {...selectProps}>
       <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
       {local.modal && (
-        <Select.Action onClick={() => void handleOpenModal()} aria-label="검색">
-          <Icon icon={IconSearch} size="1em" />
+        <Select.Action onClick={() => void handleOpenModal()} aria-label={i18n?.t("sharedDataSelect.search") ?? "Search"}>
+          <Icon icon={IconSearch} />
         </Select.Action>
       )}
       {local.editModal && (
-        <Select.Action onClick={() => void handleOpenEditModal()} aria-label="편집">
-          <Icon icon={IconEdit} size="1em" />
+        <Select.Action onClick={() => void handleOpenEditModal()} aria-label={i18n?.t("sharedDataSelect.edit") ?? "Edit"}>
+          <Icon icon={IconEdit} />
         </Select.Action>
       )}
     </Select>

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -8,27 +8,27 @@ import { type ComponentSize } from "../../../styles/tokens.styles";
 
 /** SharedDataSelectButton Props */
 export interface SharedDataSelectButtonProps<TItem> {
-  /** 공유 데이터 접근자 */
+  /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** 현재 선택된 키 (단일 또는 다중) */
+  /** Currently selected key(s) (single or multiple) */
   value?: DataSelectButtonProps<TItem>["value"];
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: DataSelectButtonProps<TItem>["onValueChange"];
-  /** 다중 선택 모드 */
+  /** Multiple selection mode */
   multiple?: boolean;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 선택 모달 컴포넌트 팩토리 */
+  /** Selection modal component factory */
   modal: () => JSX.Element;
-  /** 아이템 렌더링 함수 */
+  /** Item rendering function */
   children: (item: TItem) => JSX.Element;
 }