@simplysm/solid 13.0.58 → 13.0.60

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.58",
+  "version": "13.0.60",
   "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.58",
-    "@simplysm/core-common": "13.0.58"
+    "@simplysm/core-browser": "13.0.60",
+    "@simplysm/core-common": "13.0.60"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

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

@@ -168,8 +168,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setLastFilter(() => objClone(filter));
   }
 
-  function handleRefresh() {
-    setLastFilter(() => ({ ...lastFilter() }));
+  async function handleRefresh() {
+    await doRefresh();
   }
 
   // -- Inline Edit --
@@ -309,14 +309,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   // -- Keyboard Shortcuts --
-  createEventListener(document, "keydown", (e: KeyboardEvent) => {
+  createEventListener(document, "keydown", async (e: KeyboardEvent) => {
     if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
       e.preventDefault();
       formRef?.requestSubmit();
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
-      handleRefresh();
+      await doRefresh();
     }
   });
 
@@ -356,8 +356,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     },
     save: handleSave,
     refresh: async () => {
-      handleRefresh();
-      await Promise.resolve();
+      await doRefresh();
     },
     addItem: handleAddRow,
     setPage,
@@ -501,9 +500,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             onSortsChange={setSorts}
             selectMode={
               isSelectMode()
-                ? local.selectMode === "multi"
-                  ? "multiple"
-                  : "single"
+                ? local.selectMode
                 : local.modalEdit?.deleteItems != null
                   ? "multiple"
                   : undefined
@@ -605,10 +602,10 @@ 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 === "multi" ? "모두" : "선택"} 해제
+                {local.selectMode === "multiple" ? "모두" : "선택"} 해제
               </Button>
             </Show>
-            <Show when={local.selectMode === "multi"}>
+            <Show when={local.selectMode === "multiple"}>
               <Button size="sm" theme="primary" onClick={handleSelectConfirm}>
                 확인({selectedItems().length})
               </Button>

package/src/components/data/crud-sheet/types.ts

@@ -85,7 +85,7 @@ interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
   items?: TItem[];
   onItemsChange?: (items: TItem[]) => void;
   excel?: ExcelConfig<TItem>;
-  selectMode?: "single" | "multi";
+  selectMode?: "single" | "multiple";
   onSelect?: (result: SelectResult<TItem>) => void;
   hideAutoTools?: boolean;
   class?: string;

package/src/components/data/kanban/Kanban.tsx

@@ -18,6 +18,7 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Icon } from "../../display/Icon";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import "./Kanban.css";
 import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
@@ -386,11 +387,8 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   };
 
   // Slot signals
-  type SlotAccessor = (() => JSX.Element) | undefined;
-  const [title, _setTitle] = createSignal<SlotAccessor>();
-  const [tools, _setTools] = createSignal<SlotAccessor>();
-  const setTitle = (content: SlotAccessor) => _setTitle(() => content);
-  const setTools = (content: SlotAccessor) => _setTools(() => content);
+  const [title, setTitle] = createSlotSignal();
+  const [tools, setTools] = createSlotSignal();
 
   const laneContextValue: KanbanLaneContextValue = {
     value: () => local.value,

package/src/components/data/kanban/KanbanContext.ts

@@ -1,4 +1,5 @@
-import { createContext, useContext, type Accessor, type JSX, type Setter } from "solid-js";
+import { createContext, useContext, type Accessor, type Setter } from "solid-js";
+import type { SlotAccessor } from "../../../hooks/createSlotSignal";
 
 // ── 타입 ──────────────────────────────────────────────────────
 
@@ -50,8 +51,6 @@ export function useKanbanContext(): KanbanContextValue {
 
 // ── Lane Context ───────────────────────────────────────────────
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 export interface KanbanLaneContextValue<L = unknown, T = unknown> {
   value: Accessor<L | undefined>;
   dropTarget: Accessor<KanbanDropTarget<T> | undefined>;

package/src/components/data/list/ListItem.tsx

@@ -1,7 +1,6 @@
 import {
   type Component,
   createContext,
-  createSignal,
   type JSX,
   onCleanup,
   type ParentComponent,
@@ -16,6 +15,7 @@ import { twMerge } from "tailwind-merge";
 import { ripple } from "../../../directives/ripple";
 import { Collapse } from "../../disclosure/Collapse";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
 import { useListContext } from "./ListContext";
 import { List } from "./List";
 import {
@@ -32,8 +32,6 @@ import type { ComponentSize } from "../../../styles/tokens.styles";
 
 void ripple;
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface ListItemSlotsContextValue {
   setChildren: (content: SlotAccessor) => void;
 }
@@ -166,8 +164,7 @@ export const ListItem: ListItemComponent = (props) => {
     onChange: () => local.onOpenChange,
   });
 
-  const [childrenSlot, _setChildrenSlot] = createSignal<SlotAccessor>();
-  const setChildrenSlot = (content: SlotAccessor) => _setChildrenSlot(() => content);
+  const [childrenSlot, setChildrenSlot] = createSlotSignal();
   const hasChildren = () => childrenSlot() !== undefined;
 
   const useRipple = () => !(local.readonly || local.disabled);

package/src/components/disclosure/Dialog.tsx

@@ -16,6 +16,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconX } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { createPointerDrag } from "../../hooks/createPointerDrag";
 import { mergeStyles } from "../../helpers/mergeStyles";
@@ -25,8 +26,6 @@ import { DialogDefaultsContext } from "./DialogContext";
 import { bringToFront, registerDialog, unregisterDialog } from "./dialogZIndex";
 import { Button } from "../form-control/Button";
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface DialogSlotsContextValue {
   setHeader: (content: SlotAccessor) => void;
   setAction: (content: SlotAccessor) => void;
@@ -189,10 +188,8 @@ export const Dialog: DialogComponent = (props) => {
 
   const headerId = "dialog-header-" + createUniqueId();
 
-  const [header, _setHeader] = createSignal<SlotAccessor>();
-  const setHeader = (content: SlotAccessor) => _setHeader(() => content);
-  const [action, _setAction] = createSignal<SlotAccessor>();
-  const setAction = (content: SlotAccessor) => _setAction(() => content);
+  const [header, setHeader] = createSlotSignal();
+  const [action, setAction] = createSlotSignal();
   const hasHeader = () => header() !== undefined;
 
   const [open, setOpen] = createControllableSignal({

package/src/components/disclosure/Dropdown.tsx

@@ -10,6 +10,8 @@ import {
   splitProps,
 } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
+import { createControllableSignal } from "../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
@@ -19,8 +21,6 @@ import { borderSubtle } from "../../styles/tokens.styles";
 
 // --- DropdownContext (internal) ---
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface DropdownContextValue {
   toggle: () => void;
   setTrigger: (content: SlotAccessor) => void;
@@ -154,22 +154,11 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     "children",
   ]);
 
-  const [open, setOpenInternal] = createSignal(false);
-
-  // props.open 변경 시 내부 상태 동기화
-  createEffect(() => {
-    const propOpen = local.open;
-    if (propOpen !== undefined) {
-      setOpenInternal(propOpen);
-    }
+  const [open, setOpen] = createControllableSignal({
+    value: () => local.open ?? false,
+    onChange: () => local.onOpenChange,
   });
 
-  // 콜백 포함 setter
-  const setOpen = (value: boolean) => {
-    setOpenInternal(value);
-    local.onOpenChange?.(value);
-  };
-
   // toggle 함수 (disabled 체크 포함)
   const toggle = () => {
     if (local.disabled) return;
@@ -177,10 +166,8 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
   };
 
   // 슬롯 등록 시그널
-  const [triggerSlot, _setTriggerSlot] = createSignal<SlotAccessor>();
-  const setTrigger = (content: SlotAccessor) => _setTriggerSlot(() => content);
-  const [contentSlot, _setContentSlot] = createSignal<SlotAccessor>();
-  const setContent = (content: SlotAccessor) => _setContentSlot(() => content);
+  const [triggerSlot, setTrigger] = createSlotSignal();
+  const [contentSlot, setContent] = createSlotSignal();
 
   // Trigger wrapper ref (위치 계산에 필요)
   let triggerRef: HTMLDivElement | undefined;