@simplysm/solid 13.0.57 → 13.0.59

package/docs/feedback.md

@@ -24,14 +24,15 @@ function MyComponent() {
     });
   };
 
-  // Automatic error handling with try
+  // Error handling with error()
   const handleLoad = async () => {
-    const data = await notification.try(
-      async () => await fetchData(),
-      "Failed to load data", // optional header
-    );
-    // On error: shows danger notification with header + err.message,
-    // logs err.stack, returns undefined
+    try {
+      const data = await fetchData();
+    } catch (err) {
+      notification.error(err, "Failed to load data"); // optional header
+      // Shows danger notification with header + err.message,
+      // logs err.stack via useLogger
+    }
   };
 
   return <Button onClick={handleSave}>Save</Button>;
@@ -49,7 +50,7 @@ function MyComponent() {
 | `success` | `(title: string, message?: string, options?: NotificationOptions) => string` | Success notification |
 | `warning` | `(title: string, message?: string, options?: NotificationOptions) => string` | Warning notification |
 | `danger` | `(title: string, message?: string, options?: NotificationOptions) => string` | Error notification |
-| `try` | `<TResult>(fn: () => Promise<TResult> \| TResult, header?: string) => Promise<TResult \| undefined>` | Execute function with automatic error handling (shows danger notification + logs to `useLogger`) |
+| `error` | `(err?: any, header?: string) => void` | Show error notification from caught error (shows danger notification + logs to `useLogger`). Re-throws if `err` is not an `Error` instance. |
 | `update` | `(id: string, updates: Partial<NotificationItem>, options?: { renotify?: boolean }) => void` | Update notification |
 | `remove` | `(id: string) => void` | Remove notification |
 | `markAsRead` | `(id: string) => void` | Mark as read |
@@ -58,8 +59,14 @@ function MyComponent() {
 | `clear` | `() => void` | Clear all |
 
 **Components:**
-- `NotificationBanner` -- Top-of-screen notification banner (add inside `NotificationProvider`)
-- `NotificationBell` -- Notification bell icon (shows unread count, add to your layout as needed)
+- `NotificationBanner` -- Top-of-screen notification banner. Automatically included by `SystemProvider`.
+- `NotificationBell` -- Notification bell icon (shows unread count badge; click to view history). Add to your layout as needed. By default includes its own `NotificationBanner` instance via `showBanner` prop — set `showBanner={false}` when using with `SystemProvider` to avoid a duplicate banner.
+
+**NotificationBell Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showBanner` | `boolean` | `true` | Render a `NotificationBanner` alongside the bell. Set to `false` when `SystemProvider` already provides one. |
 
 ---
 

package/docs/helpers.md

@@ -28,3 +28,27 @@ void ripple;
 - Creates internal ripple container, operates without affecting parent element
 - Automatically disabled when `prefers-reduced-motion: reduce` is set
 - Single ripple mode: removes previous ripple on new click
+
+---
+
+## createAppStructure
+
+See [createAppStructure](hooks.md#createappstructure) in the Hooks documentation for full API details.
+
+Exports the following types:
+
+```typescript
+import {
+  createAppStructure,
+  type AppStructure,
+  type AppStructureItem,
+  type AppStructureGroupItem,
+  type AppStructureLeafItem,
+  type AppStructureSubPerm,
+  type AppRoute,
+  type AppMenu,
+  type AppFlatMenu,
+  type AppPerm,
+  type AppFlatPerm,
+} from "@simplysm/solid";
+```

package/docs/hooks.md

@@ -30,13 +30,22 @@ Local-only persistent storage hook. Always uses `localStorage` regardless of `sy
 ```tsx
 import { useLocalStorage } from "@simplysm/solid";
 
-const [token, setToken] = useLocalStorage<string | undefined>("auth-token", undefined);
+const [token, setToken] = useLocalStorage<string>("auth-token");
+
+// Set value
+setToken("abc123");
+
+// Remove value
+setToken(undefined);
+
+// Functional update
+setToken((prev) => prev + "-refreshed");
 ```
 
 | Return value | Type | Description |
 |--------------|------|-------------|
-| `[0]` | `Accessor<T>` | Value getter |
-| `[1]` | `Setter<T>` | Value setter |
+| `[0]` | `Accessor<T \| undefined>` | Value getter |
+| `[1]` | `StorageSetter<T>` | Value setter (accepts value, `undefined` to remove, or updater function) |
 
 ---
 
@@ -66,21 +75,24 @@ const [theme, setTheme, ready] = useSyncConfig("theme", "light");
 Logging hook. If `LoggerProvider` is present, logs are sent to the adapter only. Otherwise, logs fall back to `consola`.
 
 ```tsx
-import { useLogger } from "@simplysm/solid";
+import { useLogger, type Logger } from "@simplysm/solid";
 
-const logger = useLogger();
+const logger: Logger = useLogger();
 logger.log("user action", { userId: 123 });
 logger.info("app started");
 logger.error("something failed", errorObj);
 logger.warn("deprecation notice");
 ```
 
+**Logger interface:**
+
 | Method | Signature | Description |
 |--------|-----------|-------------|
 | `log` | `(...args: unknown[]) => void` | Log message (general) |
 | `info` | `(...args: unknown[]) => void` | Log message (informational) |
 | `warn` | `(...args: unknown[]) => void` | Log message (warning) |
 | `error` | `(...args: unknown[]) => void` | Log message (error) |
+| `configure` | `(fn: (origin: LogAdapter) => LogAdapter) => void` | Set or wrap the log adapter (inside `LoggerProvider` only) |
 
 **Configuring a custom adapter (decorator pattern):**
 
@@ -222,13 +234,44 @@ const { mounted, animating, unmount } = createMountTransition(() => open());
 
 ## createIMEHandler
 
-Hook that delays `onValueChange` calls during IME (Korean, etc.) composition to prevent interrupted input.
+Hook that delays `setValue` calls during IME (Korean, CJK, etc.) composition to prevent interrupted input. Use inside contenteditable or custom input components.
+
+```tsx
+import { createIMEHandler } from "@simplysm/solid";
+
+const {
+  composingValue,
+  handleCompositionStart,
+  handleInput,
+  handleCompositionEnd,
+  flushComposition,
+} = createIMEHandler((value) => {
+  // called only when composition is complete
+  setMyValue(value);
+});
+
+// Wire up to DOM element events:
+<div
+  contentEditable
+  onCompositionStart={handleCompositionStart}
+  onCompositionEnd={(e) => handleCompositionEnd(e.currentTarget.textContent ?? "")}
+  onInput={(e) => handleInput(e.currentTarget.textContent ?? "", e.isComposing)}
+/>
+```
+
+| Return value | Type | Description |
+|--------------|------|-------------|
+| `composingValue` | `Accessor<string \| null>` | Current composing value (for display); `null` when not composing |
+| `handleCompositionStart` | `() => void` | Call on `compositionstart` event |
+| `handleInput` | `(value: string, isComposing: boolean) => void` | Call on `input` event |
+| `handleCompositionEnd` | `(value: string) => void` | Call on `compositionend` event |
+| `flushComposition` | `() => void` | Immediately commit any pending composition |
 
 ---
 
 ## useRouterLink
 
-`@solidjs/router`-based navigation hook. Automatically handles Ctrl/Alt + click (new tab), Shift + click (new window).
+`@solidjs/router`-based navigation hook. Automatically handles Ctrl/Alt + click (new tab), Shift + click (new window), and regular click (SPA routing).
 
 ```tsx
 import { useRouterLink } from "@simplysm/solid";
@@ -239,112 +282,146 @@ const navigate = useRouterLink();
   Dashboard
 </List.Item>
 
-// Pass state
+// Pass state (not visible in URL)
 <List.Item onClick={navigate({ href: "/users/123", state: { from: "list" } })}>
   User
 </List.Item>
+
+// Custom new window size on Shift+click
+<List.Item onClick={navigate({ href: "/reports/pdf", window: { width: 1200, height: 900 } })}>
+  Report
+</List.Item>
 ```
 
+**Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `href` | `string` | (required) | Navigation path (fully-formed URL, e.g., `"/home/dashboard?tab=1"`) |
+| `state` | `Record<string, unknown>` | - | State to pass to the route (not exposed in URL) |
+| `window.width` | `number` | `800` | New window width (Shift+click) |
+| `window.height` | `number` | `800` | New window height (Shift+click) |
+
 ---
 
 ## createAppStructure
 
-Utility for declaratively defining app structure (routing, menus, permissions). Takes a single options object.
+Utility for declaratively defining app structure (routing, menus, permissions). Takes a factory function and returns `{ AppStructureProvider, useAppStructure }` for Context-based access with full `InferPerms` type preservation.
 
 ```tsx
-import { createAppStructure, type AppStructureItem } from "@simplysm/solid";
+// appStructure.ts
+import { createAppStructure } from "@simplysm/solid";
 import { IconHome, IconUsers } from "@tabler/icons-solidjs";
-
-const items: AppStructureItem<string>[] = [
-  {
-    code: "home",
-    title: "Home",
-    icon: IconHome,
-    component: HomePage,
-    perms: ["use"],
-  },
-  {
-    code: "admin",
-    title: "Admin",
-    icon: IconUsers,
-    children: [
-      { code: "users", title: "User Management", component: UsersPage, perms: ["use", "edit"] },
-      { code: "roles", title: "Role Management", component: RolesPage, perms: ["use"], isNotMenu: true },
+import { useAuth } from "./AuthProvider";
+
+export const { AppStructureProvider, useAppStructure } = createAppStructure(() => {
+  const auth = useAuth();
+  return {
+    items: [
+      {
+        code: "home",
+        title: "Home",
+        icon: IconHome,
+        component: HomePage,
+        perms: ["use"],
+      },
+      {
+        code: "admin",
+        title: "Admin",
+        icon: IconUsers,
+        children: [
+          { code: "users", title: "User Management", component: UsersPage, perms: ["use", "edit"] },
+          { code: "roles", title: "Role Management", component: RolesPage, perms: ["use"], isNotMenu: true },
+        ],
+      },
     ],
-  },
-];
-
-const structure = createAppStructure({
-  items,
-  usableModules: () => activeModules(),  // optional: filter by active modules
-  permRecord: () => userPermissions(),   // optional: Record<string, boolean> permission state
+    usableModules: () => activeModules(),          // optional: filter by active modules
+    permRecord: () => auth.authInfo()?.permissions, // optional: Record<string, boolean>
+  };
 });
-
-// structure.allRoutes           -- AppRoute[] - all routes with permCode + module info (static)
-// structure.usableMenus()       -- Accessor<AppMenu[]> - filtered menu array for Sidebar.Menu
-// structure.usableFlatMenus()   -- Accessor<AppFlatMenu[]> - flat filtered menu list
-// structure.usablePerms()       -- Accessor<AppPerm[]> - filtered permission tree
-// structure.allFlatPerms        -- AppFlatPerm[] - all flat perm entries (static)
-// structure.checkRouteAccess(r) -- boolean - check if route is accessible
 ```
 
-**Routing integration with `@solidjs/router`:**
+The factory function (`getOpts`) is called inside `AppStructureProvider` at render time, so context hooks like `useAuth()` can be used. The `const TItems` generic preserves item literal types for full `InferPerms` type inference.
+
+**Provider setup:**
 
 ```tsx
-import { render } from "solid-js/web";
-import { HashRouter, Navigate, Route } from "@solidjs/router";
-import { appStructure } from "./appStructure";
+// main.tsx or App.tsx
+import { AppStructureProvider } from "./appStructure";
 
 render(
   () => (
-    <HashRouter>
-      <Route path="/" component={App}>
-        <Route path="/home" component={Home}>
-          <Route path="/" component={() => <Navigate href="/home/main" />} />
-          {appStructure.allRoutes.map((r) => (
-            <Route
-              path={r.path}
-              component={() => {
-                if (!appStructure.checkRouteAccess(r)) {
-                  return <Navigate href="/login" />;
-                }
-                return <r.component />;
-              }}
-            />
-          ))}
-          <Route path="/*" component={NotFoundPage} />
-        </Route>
-        <Route path="/" component={() => <Navigate href="/home" />} />
-      </Route>
-    </HashRouter>
+    <AppStructureProvider>
+      <HashRouter>
+        {/* ... */}
+      </HashRouter>
+    </AppStructureProvider>
   ),
   document.getElementById("root")!,
 );
 ```
 
-`allRoutes` is a static (non-reactive) array containing all routes with `permCode` and module chain information. Use `checkRouteAccess(route)` to reactively verify access based on `permRecord` and `usableModules` signals.
+**Using the hook in components:**
+
+```tsx
+import { useAppStructure } from "./appStructure";
+
+function Home(props: RouteSectionProps) {
+  const appStructure = useAppStructure();
+
+  // appStructure.usableRoutes()      -- Accessor<AppRoute[]>
+  // appStructure.usableMenus()       -- Accessor<AppMenu[]>
+  // appStructure.usableFlatMenus()   -- Accessor<AppFlatMenu[]>
+  // appStructure.usablePerms()       -- Accessor<AppPerm[]>
+  // appStructure.allFlatPerms        -- AppFlatPerm[]
+  // appStructure.getTitleChainByHref(href) -- string[]
+  // appStructure.perms               -- typed permission accessor
+
+  return <Sidebar.Menu menus={appStructure.usableMenus()} />;
+}
+```
+
+**Routing integration with `@solidjs/router`:**
+
+```tsx
+import { useAppStructure } from "./appStructure";
+
+function HomeRoutes() {
+  const appStructure = useAppStructure();
+  return (
+    <For each={appStructure.usableRoutes()}>
+      {(r) => <Route path={r.path} component={r.component} />}
+    </For>
+  );
+}
+
+// In your router setup (inside AppStructureProvider):
+<Route path="/home" component={Home}>
+  <Route path="/" component={() => <Navigate href="/home/main" />} />
+  <HomeRoutes />
+  <Route path="/*" component={NotFoundPage} />
+</Route>
+```
+
+`usableRoutes()` is a reactive accessor returning routes filtered by `usableModules` and `permRecord`. Items with `perms: ["use"]` are excluded from routes when the user lacks the `use` permission.
 
 **AppStructure return type:**
 
 ```typescript
 interface AppStructure<TModule> {
   items: AppStructureItem<TModule>[];
-  allRoutes: AppRoute<TModule>[];                // static, all routes with perm/module info
+  usableRoutes: Accessor<AppRoute[]>;            // reactive, filtered by modules + permRecord
   usableMenus: Accessor<AppMenu[]>;              // reactive, filtered by modules + permRecord
   usableFlatMenus: Accessor<AppFlatMenu[]>;      // reactive, flat version of usableMenus
   usablePerms: Accessor<AppPerm<TModule>[]>;     // reactive, filtered permission tree
-  allFlatPerms: AppFlatPerm<TModule>[];           // static, all perm entries (not reactive)
-  checkRouteAccess(route: AppRoute<TModule>): boolean; // reactive access check
+  allFlatPerms: AppFlatPerm<TModule>[];          // static, all perm entries (not reactive)
   getTitleChainByHref(href: string): string[];
   perms: InferPerms<TItems>;                     // typed permission accessor (getter-based reactive booleans)
 }
 
-interface AppRoute<TModule = string> {
+interface AppRoute {
   path: string;
   component: Component;
-  permCode?: string;
-  modulesChain: TModule[][];
-  requiredModulesChain: TModule[][];
 }
 
 interface AppMenu {
@@ -418,18 +495,18 @@ type AppStructureItem<TModule> = AppStructureGroupItem<TModule> | AppStructureLe
 Retrieves the breadcrumb title chain for a given href path. Works on raw items (including `isNotMenu` items).
 
 ```tsx
-import { createAppStructure } from "@simplysm/solid";
-
-const appStructure = createAppStructure({ items });
+import { useLocation } from "@solidjs/router";
+import { useAppStructure } from "./appStructure";
 
-// Returns ["Sales", "Invoice"] for /home/sales/invoice
-const titles = appStructure.getTitleChainByHref("/home/sales/invoice");
+function Breadcrumb() {
+  const appStructure = useAppStructure();
+  const location = useLocation();
 
-// Use with router for dynamic breadcrumb
-import { useLocation } from "@solidjs/router";
+  // Returns ["Sales", "Invoice"] for /home/sales/invoice
+  const breadcrumb = () => appStructure.getTitleChainByHref(location.pathname);
 
-const location = useLocation();
-const breadcrumb = () => appStructure.getTitleChainByHref(location.pathname);
+  return <span>{breadcrumb().join(" > ")}</span>;
+}
 ```
 
 #### perms
@@ -439,7 +516,10 @@ Typed permission accessor providing dot-notation access with TypeScript autocomp
 **Important:** For type inference to work, pass items inline to `createAppStructure`. Declaring items as a separate variable with explicit `AppStructureItem[]` type annotation widens literal types, losing autocompletion.
 
 ```typescript
-const appStructure = createAppStructure({
+// appStructure.ts
+import { createAppStructure } from "@simplysm/solid";
+
+export const { AppStructureProvider, useAppStructure } = createAppStructure(() => ({
   items: [
     {
       code: "home",
@@ -457,7 +537,10 @@ const appStructure = createAppStructure({
     },
   ],
   permRecord: () => userPermissions(),
-});
+}));
+
+// In a component (inside AppStructureProvider):
+const appStructure = useAppStructure();
 
 // Typed access with autocompletion:
 appStructure.perms.home.user.use        // boolean (reactive)

package/docs/styling.md

@@ -40,6 +40,7 @@
 | `z-dropdown` | 1000 | Dropdown popup |
 | `z-modal-backdrop` | 1999 | Modal backdrop |
 | `z-modal` | 2000 | Modal dialog |
+| `z-notification` | 3000 | Notification banner |
 
 ## Dark Mode
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.57",
+  "version": "13.0.59",
   "description": "심플리즘 패키지 - SolidJS 라이브러리",
   "author": "김석래",
   "license": "Apache-2.0",
@@ -50,8 +50,8 @@
     "solid-tiptap": "^0.8.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.57",
-    "@simplysm/core-common": "13.0.57"
+    "@simplysm/core-browser": "13.0.59",
+    "@simplysm/core-common": "13.0.59"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

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

@@ -15,18 +15,24 @@ import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { useNotification } from "../../feedback/notification/NotificationContext";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
-import { TopbarContext, createTopbarActions } from "../../layout/topbar/TopbarContext";
+import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext";
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import { Dialog } from "../../disclosure/Dialog";
 import { createEventListener } from "@solid-primitives/event-listener";
 import clsx from "clsx";
-import { IconDeviceFloppy, IconRefresh, IconTrash, IconTrashOff } from "@tabler/icons-solidjs";
-import { isCrudDetailToolsDef, CrudDetailTools } from "./CrudDetailTools";
-import { isCrudDetailBeforeDef, CrudDetailBefore } from "./CrudDetailBefore";
-import { isCrudDetailAfterDef, CrudDetailAfter } from "./CrudDetailAfter";
+import {
+  IconCheck,
+  IconDeviceFloppy,
+  IconRefresh,
+  IconTrash,
+  IconTrashOff,
+} from "@tabler/icons-solidjs";
+import { CrudDetailTools, isCrudDetailToolsDef } from "./CrudDetailTools";
+import { CrudDetailBefore, isCrudDetailBeforeDef } from "./CrudDetailBefore";
+import { CrudDetailAfter, isCrudDetailAfterDef } from "./CrudDetailAfter";
 import type {
-  CrudDetailBeforeDef,
   CrudDetailAfterDef,
+  CrudDetailBeforeDef,
   CrudDetailContext,
   CrudDetailInfo,
   CrudDetailProps,
@@ -77,13 +83,14 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Load --
   async function doLoad() {
     setBusyCount((c) => c + 1);
-    // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 호출
-    await noti.try(async () => {
+    try {
       const result = await local.load();
       setData(reconcile(result.data) as any);
       originalData = objClone(result.data);
       setInfo(result.info);
-    }, "조회 실패");
+    } catch (err) {
+      noti.error(err, "조회실패");
+    }
     setBusyCount((c) => c - 1);
     setReady(true);
   }
@@ -118,9 +125,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     }
 
     setBusyCount((c) => c + 1);
-    // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 호출
-    await noti.try(async () => {
-      const result = await local.submit!(objClone(unwrap(data)));
+    try {
+      const result = await local.submit(objClone(unwrap(data)));
       if (result) {
         noti.success("저장 완료", "저장되었습니다.");
         if (dialogInstance) {
@@ -129,7 +135,9 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
           await doLoad();
         }
       }
-    }, "저장 실패");
+    } catch (err) {
+      noti.error(err, "저장 실패");
+    }
     setBusyCount((c) => c - 1);
   }
 
@@ -149,25 +157,19 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     const del = !currentInfo.isDeleted;
 
     setBusyCount((c) => c + 1);
-    /* eslint-disable solid/reactivity -- noti.try 내부에서 비동기 호출 */
-    await noti.try(
-      async () => {
-        const result = await local.toggleDelete!(del);
-        if (result) {
-          noti.success(
-            del ? "삭제 완료" : "복구 완료",
-            del ? "삭제되었습니다." : "복구되었습니다.",
-          );
-          if (dialogInstance) {
-            dialogInstance.close(true);
-          } else {
-            await doLoad();
-          }
+    try {
+      const result = await local.toggleDelete(del);
+      if (result) {
+        noti.success(del ? "삭제 완료" : "복구 완료", del ? "삭제되었습니다." : "복구되었습니다.");
+        if (dialogInstance) {
+          dialogInstance.close(true);
+        } else {
+          await doLoad();
         }
-      },
-      del ? "삭제 실패" : "복구 실패",
-    );
-    /* eslint-enable solid/reactivity */
+      }
+    } catch (err) {
+      noti.error(err, del ? "삭제 실패" : "복구 실패");
+    }
     setBusyCount((c) => c - 1);
   }
 
@@ -242,12 +244,9 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       {/* Modal mode: Dialog.Action (refresh button in header) */}
       <Show when={isModal}>
         <Dialog.Action>
-          <button
-            class="flex items-center px-2 text-base-400 hover:text-base-600"
-            onClick={() => void handleRefresh()}
-          >
+          <Button size={"sm"} variant={"ghost"} onClick={() => void handleRefresh()}>
             <Icon icon={IconRefresh} />
-          </button>
+          </Button>
         </Dialog.Action>
       </Show>
 
@@ -297,7 +296,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-2" onSubmit={handleFormSubmit}>
+        <form ref={formRef} class="flex-1 overflow-auto p-4" onSubmit={handleFormSubmit}>
           {formContent()}
         </form>
 
@@ -316,20 +315,26 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
         {/* Modal mode: bottom bar */}
         <Show when={isModal && canEdit()}>
-          <div class="flex gap-2 border-t border-base-200 p-2">
+          <div class="flex gap-2 border-t border-base-200 px-3 py-1.5">
             <div class="flex-1" />
             <Show
               when={local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)}
             >
               {(_) => (
-                <Button size="sm" theme="danger" onClick={() => void handleToggleDelete()}>
+                <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
                   <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
                   {info()!.isDeleted ? "복구" : "삭제"}
                 </Button>
               )}
             </Show>
             <Show when={local.submit}>
-              <Button size="sm" theme="primary" onClick={() => formRef?.requestSubmit()}>
+              <Button
+                variant={"solid"}
+                theme="primary"
+                onClick={() => formRef?.requestSubmit()}
+                class={"gap-1"}
+              >
+                <Icon icon={IconCheck} />
                 확인
               </Button>
             </Show>