@simplysm/solid 13.0.55 → 13.0.56

package/src/components/form-control/select/Select.tsx

@@ -5,6 +5,7 @@ import {
   For,
   type JSX,
   type ParentComponent,
+  onCleanup,
   Show,
   splitProps,
 } from "solid-js";
@@ -15,17 +16,18 @@ import { Icon } from "../../display/Icon";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
 import { SelectContext, type SelectContextValue } from "./SelectContext";
+import { useSelectContext } from "./SelectContext";
 import { SelectItem } from "./SelectItem";
 import { ripple } from "../../../directives/ripple";
-import { splitSlots } from "../../../helpers/splitSlots";
 import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createItemTemplate } from "../../../hooks/createItemTemplate";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
 
 void ripple;
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
 // Select 전용 스타일
 const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
@@ -37,8 +39,9 @@ interface SelectActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>
 
 const SelectAction: ParentComponent<SelectActionProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  const ctx = useSelectContext();
 
-  return (
+  ctx.setAction(() => (
     <button
       {...rest}
       type="button"
@@ -63,17 +66,31 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
     >
       {local.children}
     </button>
-  );
+  ));
+  onCleanup(() => ctx.setAction(undefined));
+  return null;
 };
 
 /**
  * 드롭다운 상단 커스텀 영역 서브 컴포넌트
  */
-const SelectHeader: ParentComponent = (props) => <div data-select-header>{props.children}</div>;
+const SelectHeader: ParentComponent = (props) => {
+  const ctx = useSelectContext();
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setHeader(() => props.children);
+  onCleanup(() => ctx.setHeader(undefined));
+  return null;
+};
 
-const { TemplateSlot: SelectItemTemplate, getTemplate: getSelectItemTemplate } = createItemTemplate<
-  [item: unknown, index: number, depth: number]
->("data-select-item-template");
+const SelectItemTemplate = <TArgs extends unknown[]>(props: {
+  children: (...args: TArgs) => JSX.Element;
+}) => {
+  const ctx = useSelectContext();
+  // eslint-disable-next-line solid/reactivity -- 렌더 함수를 signal에 저장, JSX tracked scope에서 호출됨
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
 
 // Props 정의
 
@@ -214,8 +231,6 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "touchMode",
   ]);
 
-  let triggerRef!: HTMLDivElement;
-
   const [open, setOpen] = createSignal(false);
 
   // 선택된 값 관리 (controlled/uncontrolled 패턴)
@@ -256,18 +271,26 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     setOpen(false);
   };
 
+  // 슬롯 signals
+  const [header, _setHeader] = createSignal<SlotAccessor>();
+  const setHeader = (content: SlotAccessor) => _setHeader(() => content);
+  const [action, _setAction] = createSignal<SlotAccessor>();
+  const setAction = (content: SlotAccessor) => _setAction(() => content);
+  const [itemTemplate, _setItemTemplate] = createSignal<
+    ((...args: unknown[]) => JSX.Element) | undefined
+  >();
+  const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
+    _setItemTemplate(() => fn);
+
   // Context 값
   const contextValue: SelectContextValue<T> = {
     multiple: () => local.multiple ?? false,
     isSelected,
     toggleValue,
     closeDropdown,
-  };
-
-  // 트리거 클릭
-  const handleTriggerClick = () => {
-    if (local.disabled) return;
-    setOpen((v) => !v);
+    setHeader,
+    setAction,
+    setItemTemplate,
   };
 
   // 트리거 키보드 처리 (Enter/Space만 처리, ArrowUp/Down은 Dropdown이 처리)
@@ -297,32 +320,26 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       class: local.class,
     });
 
-  // 내부 컴포넌트: Provider 안에서 children을 resolve
+  // 내부 컴포넌트: Provider 안에서 children을 resolve하여 슬롯 등록을 트리거
   const SelectInner: ParentComponent = (innerProps) => {
+    // children() resolve로 서브 컴포넌트 등록 트리거 (Header, Action, ItemTemplate은 null 반환)
     const resolved = children(() => innerProps.children);
-    const [slots, items] = splitSlots(resolved, [
-      "selectHeader",
-      "selectAction",
-      "selectItemTemplate",
-    ] as const);
 
     // itemTemplate 함수 추출
     const getItemTemplate = ():
       | ((item: T, index: number, depth: number) => JSX.Element)
       | undefined => {
-      return getSelectItemTemplate(slots().selectItemTemplate) as
-        | ((item: T, index: number, depth: number) => JSX.Element)
-        | undefined;
+      return itemTemplate() as ((item: T, index: number, depth: number) => JSX.Element) | undefined;
     };
 
     // items 재귀 렌더링
     const renderItems = (itemList: T[], depth: number): JSX.Element => {
-      const itemTemplate = getItemTemplate();
+      const tpl = getItemTemplate();
       return (
         <For each={itemList}>
           {(item, index) => (
             <SelectItem value={item}>
-              {itemTemplate ? itemTemplate(item, index(), depth) : String(item)}
+              {tpl ? tpl(item, index(), depth) : String(item)}
               <Show when={local.getChildren?.(item, index(), depth)} keyed>
                 {(itemChildren) => (
                   <Show when={itemChildren.length > 0}>
@@ -343,9 +360,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       if (local.renderValue) {
         return local.renderValue(value);
       }
-      const itemTemplate = getItemTemplate();
-      if (itemTemplate) {
-        return itemTemplate(value, 0, 0);
+      const tpl = getItemTemplate();
+      if (tpl) {
+        return tpl(value, 0, 0);
       }
       return <>{String(value)}</>;
     };
@@ -372,33 +389,43 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
 
     return (
       <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
-        <div
-          ref={triggerRef}
-          use:ripple={!local.disabled}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded={open()}
-          aria-disabled={local.disabled || undefined}
-          aria-required={local.required || undefined}
-          tabIndex={local.disabled ? -1 : 0}
-          class={twMerge(
-            getTriggerClassName(),
-            slots().selectAction.length > 0 &&
-              clsx(
-                "rounded-r-none border-r-0",
-                "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
-              ),
-          )}
-          style={local.style}
-          onClick={handleTriggerClick}
-          onKeyDown={handleTriggerKeyDown}
-        >
-          <div class={selectedValueClass}>{renderSelectedValue()}</div>
-          <div class={chevronWrapperClass}>
-            <Icon icon={IconChevronDown} size="1em" />
-          </div>
-        </div>
-        <Show when={slots().selectAction.length > 0}>
+        <Dropdown disabled={local.disabled} open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <div
+              use:ripple={!local.disabled}
+              role="combobox"
+              aria-haspopup="listbox"
+              aria-expanded={open()}
+              aria-disabled={local.disabled || undefined}
+              aria-required={local.required || undefined}
+              tabIndex={local.disabled ? -1 : 0}
+              class={twMerge(
+                getTriggerClassName(),
+                action() !== undefined &&
+                  clsx(
+                    "rounded-r-none border-r-0",
+                    "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
+                  ),
+              )}
+              style={local.style}
+              onKeyDown={handleTriggerKeyDown}
+            >
+              <div class={selectedValueClass}>{renderSelectedValue()}</div>
+              <div class={chevronWrapperClass}>
+                <Icon icon={IconChevronDown} size="1em" />
+              </div>
+            </div>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Show when={header()}>{header()!()}</Show>
+            <List inset role="listbox">
+              <Show when={local.items} fallback={resolved()}>
+                {renderItems(local.items!, 0)}
+              </Show>
+            </List>
+          </Dropdown.Content>
+        </Dropdown>
+        <Show when={action()}>
           <div
             class={clsx(
               "contents",
@@ -406,18 +433,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               "[&>[data-select-action]+[data-select-action]]:-ml-px",
             )}
           >
-            {slots().selectAction}
+            {action()!()}
           </div>
         </Show>
-
-        <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>
-          <Show when={slots().selectHeader.length > 0}>{slots().selectHeader.single()}</Show>
-          <List inset role="listbox">
-            <Show when={local.items} fallback={items()}>
-              {renderItems(local.items!, 0)}
-            </Show>
-          </List>
-        </Dropdown>
       </div>
     );
   };

package/src/components/form-control/select/SelectContext.ts

@@ -1,4 +1,6 @@
-import { createContext, useContext, type Accessor } from "solid-js";
+import { createContext, useContext, type Accessor, type JSX } from "solid-js";
+
+type SlotAccessor = (() => JSX.Element) | undefined;
 
 export interface SelectContextValue<TValue = unknown> {
   /** 다중 선택 모드 여부 */
@@ -12,6 +14,15 @@ export interface SelectContextValue<TValue = unknown> {
 
   /** 드롭다운 닫기 */
   closeDropdown: () => void;
+
+  /** 헤더 슬롯 등록 */
+  setHeader: (content: SlotAccessor) => void;
+
+  /** 액션 슬롯 등록 */
+  setAction: (content: SlotAccessor) => void;
+
+  /** 아이템 템플릿 등록 */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
 }
 
 export const SelectContext = createContext<SelectContextValue>();

package/src/components/form-control/select/SelectItem.tsx

@@ -1,4 +1,13 @@
-import { children, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import {
+  createContext,
+  createSignal,
+  type JSX,
+  onCleanup,
+  type ParentComponent,
+  Show,
+  splitProps,
+  useContext,
+} from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { IconCheck } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
@@ -6,7 +15,6 @@ import { useSelectContext } from "./SelectContext";
 import { ripple } from "../../../directives/ripple";
 import { List } from "../../data/list/List";
 import { Collapse } from "../../disclosure/Collapse";
-import { splitSlots } from "../../../helpers/splitSlots";
 import {
   listItemBaseClass,
   listItemSelectedClass,
@@ -18,17 +26,24 @@ import {
 
 void ripple;
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface SelectItemSlotsContextValue {
+  setChildren: (content: SlotAccessor) => void;
+}
+
+const SelectItemSlotsContext = createContext<SelectItemSlotsContextValue>();
+
 /**
  * 중첩 아이템을 담는 서브 컴포넌트
  */
-const SelectItemChildren: ParentComponent = (props) => (
-  <div class="flex" data-select-item-children>
-    <div class={listItemIndentGuideClass} />
-    <List inset class="flex-1">
-      {props.children}
-    </List>
-  </div>
-);
+const SelectItemChildren: ParentComponent = (props) => {
+  const ctx = useContext(SelectItemSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children is lazily read at render time
+  ctx.setChildren(() => props.children);
+  onCleanup(() => ctx.setChildren(undefined));
+  return null;
+};
 
 export interface SelectItemProps<TValue = unknown> extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -68,10 +83,9 @@ export const SelectItem: SelectItemComponent = <T,>(
 
   const context = useSelectContext<T>();
 
-  const resolved = children(() => local.children);
-  const [slots, content] = splitSlots(resolved, ["selectItemChildren"] as const);
-
-  const hasChildren = () => slots().selectItemChildren.length > 0;
+  const [childrenSlot, _setChildrenSlot] = createSignal<SlotAccessor>();
+  const setChildrenSlot = (content: SlotAccessor) => _setChildrenSlot(() => content);
+  const hasChildren = () => childrenSlot() !== undefined;
   const isSelected = () => context.isSelected(local.value);
   const useRipple = () => !local.disabled;
 
@@ -97,7 +111,7 @@ export const SelectItem: SelectItemComponent = <T,>(
   const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
 
   return (
-    <>
+    <SelectItemSlotsContext.Provider value={{ setChildren: setChildrenSlot }}>
       <button
         {...rest}
         type="button"
@@ -114,12 +128,19 @@ export const SelectItem: SelectItemComponent = <T,>(
         <Show when={context.multiple() && !hasChildren()}>
           <Icon icon={IconCheck} class={getCheckIconClass()} />
         </Show>
-        <span class={listItemContentClass}>{content()}</span>
+        <span class={listItemContentClass}>{local.children}</span>
       </button>
       <Show when={hasChildren()}>
-        <Collapse open={true}>{slots().selectItemChildren.single()}</Collapse>
+        <Collapse open={true}>
+          <div class="flex">
+            <div class={listItemIndentGuideClass} />
+            <List inset class="flex-1">
+              {childrenSlot()!()}
+            </List>
+          </div>
+        </Collapse>
       </Show>
-    </>
+    </SelectItemSlotsContext.Provider>
   );
 };
 

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -63,7 +63,6 @@ export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
 export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
   const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
-  let mobileButtonRef: HTMLButtonElement | undefined;
 
   return (
     <>
@@ -74,28 +73,26 @@ export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
 
       {/* 모바일 햄버거 (640px 미만에서만 표시) */}
       <div class={mobileWrapperClass}>
-        <Button
-          ref={mobileButtonRef}
-          variant="ghost"
-          onClick={() => setMobileMenuOpen((v) => !v)}
-          aria-label="메뉴"
-          aria-haspopup="menu"
-          aria-expanded={mobileMenuOpen()}
-        >
-          <Icon icon={IconDotsVertical} size="1.25em" />
-        </Button>
-        <Dropdown
-          triggerRef={() => mobileButtonRef}
-          open={mobileMenuOpen()}
-          onOpenChange={setMobileMenuOpen}
-        >
-          <List inset>
-            <For each={local.menus}>
-              {(menu) => (
-                <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
-              )}
-            </For>
-          </List>
+        <Dropdown open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
+          <Dropdown.Trigger>
+            <Button
+              variant="ghost"
+              aria-label="메뉴"
+              aria-haspopup="menu"
+              aria-expanded={mobileMenuOpen()}
+            >
+              <Icon icon={IconDotsVertical} size="1.25em" />
+            </Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <List inset>
+              <For each={local.menus}>
+                {(menu) => (
+                  <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
+                )}
+              </For>
+            </List>
+          </Dropdown.Content>
         </Dropdown>
       </div>
     </>
@@ -111,7 +108,6 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
   const navigate = useNavigate();
 
   const [open, setOpen] = createSignal(false);
-  let buttonRef: HTMLButtonElement | undefined;
 
   const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
   const isExternalLink = () => props.menu.href?.includes("://") ?? false;
@@ -133,10 +129,8 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
     return false;
   });
 
-  const handleClick = () => {
-    if (hasChildren()) {
-      setOpen((v) => !v);
-    } else if (props.menu.href !== undefined) {
+  const handleNavigate = () => {
+    if (props.menu.href !== undefined) {
       if (isExternalLink()) {
         window.open(props.menu.href, "_blank", "noopener,noreferrer");
       } else {
@@ -145,39 +139,42 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
     }
   };
 
-  return (
-    <>
-      <Button
-        ref={buttonRef}
-        variant={isSelected() ? "solid" : "ghost"}
-        theme={isSelected() ? "primary" : "base"}
-        onClick={handleClick}
-        class={menuButtonContentClass}
-        aria-haspopup={hasChildren() ? "menu" : undefined}
-        aria-expanded={hasChildren() ? open() : undefined}
-      >
-        <Show when={props.menu.icon}>
-          <Icon icon={props.menu.icon!} />
-        </Show>
-        <span>{props.menu.title}</span>
-        <Show when={hasChildren()}>
-          <Icon
-            icon={IconChevronDown}
-            size="1em"
-            class={clsx("transition-transform", open() && "rotate-180")}
-          />
-        </Show>
-      </Button>
+  const buttonContent = () => (
+    <Button
+      variant={isSelected() ? "solid" : "ghost"}
+      theme={isSelected() ? "primary" : "base"}
+      class={menuButtonContentClass}
+      aria-haspopup={hasChildren() ? "menu" : undefined}
+      aria-expanded={hasChildren() ? open() : undefined}
+      onClick={hasChildren() ? undefined : handleNavigate}
+    >
+      <Show when={props.menu.icon}>
+        <Icon icon={props.menu.icon!} />
+      </Show>
+      <span>{props.menu.title}</span>
       <Show when={hasChildren()}>
-        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
+        <Icon
+          icon={IconChevronDown}
+          size="1em"
+          class={clsx("transition-transform", open() && "rotate-180")}
+        />
+      </Show>
+    </Button>
+  );
+
+  return (
+    <Show when={hasChildren()} fallback={buttonContent()}>
+      <Dropdown open={open()} onOpenChange={setOpen}>
+        <Dropdown.Trigger>{buttonContent()}</Dropdown.Trigger>
+        <Dropdown.Content>
           <List inset>
             <For each={props.menu.children}>
               {(child) => <TopbarMenuDropdownItem menu={child} onClose={() => setOpen(false)} />}
             </For>
           </List>
-        </Dropdown>
-      </Show>
-    </>
+        </Dropdown.Content>
+      </Dropdown>
+    </Show>
   );
 };
 

package/src/components/layout/topbar/TopbarUser.tsx

@@ -50,16 +50,9 @@ export const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "menus"]);
 
   const [open, setOpen] = createSignal(false);
-  let buttonRef: HTMLButtonElement | undefined;
 
   const hasMenus = () => local.menus !== undefined && local.menus.length > 0;
 
-  const handleClick = () => {
-    if (hasMenus()) {
-      setOpen((v) => !v);
-    }
-  };
-
   const handleMenuClick = (menu: TopbarUserMenu) => {
     setOpen(false);
     menu.onClick();
@@ -67,32 +60,36 @@ export const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
 
   const getClassName = () => twMerge(wrapperBaseClass, local.class);
 
+  const buttonContent = () => (
+    <Button
+      variant="ghost"
+      class={buttonContentClass}
+      aria-haspopup={hasMenus() ? "menu" : undefined}
+      aria-expanded={hasMenus() ? open() : undefined}
+    >
+      {local.children}
+      <Show when={hasMenus()}>
+        <Icon
+          icon={IconChevronDown}
+          size="1em"
+          class={clsx("transition-transform", open() && "rotate-180")}
+        />
+      </Show>
+    </Button>
+  );
+
   return (
     <div {...rest} data-topbar-user class={getClassName()}>
-      <Button
-        ref={buttonRef}
-        variant="ghost"
-        onClick={handleClick}
-        class={buttonContentClass}
-        aria-haspopup={hasMenus() ? "menu" : undefined}
-        aria-expanded={hasMenus() ? open() : undefined}
-      >
-        {local.children}
-        <Show when={hasMenus()}>
-          <Icon
-            icon={IconChevronDown}
-            size="1em"
-            class={clsx("transition-transform", open() && "rotate-180")}
-          />
-        </Show>
-      </Button>
-      <Show when={hasMenus()}>
-        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
-          <List inset>
-            <For each={local.menus}>
-              {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}
-            </For>
-          </List>
+      <Show when={hasMenus()} fallback={buttonContent()}>
+        <Dropdown open={open()} onOpenChange={setOpen}>
+          <Dropdown.Trigger>{buttonContent()}</Dropdown.Trigger>
+          <Dropdown.Content>
+            <List inset>
+              <For each={local.menus}>
+                {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}
+              </For>
+            </List>
+          </Dropdown.Content>
         </Dropdown>
       </Show>
     </div>

package/src/hooks/createControllableStore.ts

@@ -0,0 +1,47 @@
+import { createEffect } from "solid-js";
+import { createStore, reconcile, unwrap } from "solid-js/store";
+import type { SetStoreFunction } from "solid-js/store";
+import { objClone } from "@simplysm/core-common";
+
+/**
+ * Controlled/Uncontrolled 패턴을 지원하는 store hook
+ *
+ * @remarks
+ * - `onChange`가 제공되면 controlled 모드: setter 호출 시 onChange로 변경 알림
+ * - `onChange`가 없으면 uncontrolled 모드: 내부 store만 사용
+ * - SetStoreFunction의 모든 overload 지원 (path 기반, produce, reconcile 등)
+ *
+ * @example
+ * ```tsx
+ * // Controlled 모드 (onItemsChange 제공)
+ * const [items, setItems] = createControllableStore<Item[]>({
+ *   value: () => props.items ?? [],
+ *   onChange: () => props.onItemsChange,
+ * });
+ *
+ * // Uncontrolled 모드 (onItemsChange 미제공)
+ * const [items, setItems] = createControllableStore<Item[]>({
+ *   value: () => [],
+ *   onChange: () => undefined,
+ * });
+ * ```
+ */
+export function createControllableStore<TValue extends object>(options: {
+  value: () => TValue;
+  onChange: () => ((value: TValue) => void) | undefined;
+}): [TValue, SetStoreFunction<TValue>] {
+  const [store, rawSet] = createStore<TValue>(objClone(options.value()));
+
+  // 외부 value 변경 → 내부 store 동기화
+  createEffect(() => {
+    rawSet(reconcile(options.value()) as any);
+  });
+
+  // 함수 래퍼로 setter 감싸서 onChange 알림 추가
+  const wrappedSet = ((...args: any[]) => {
+    (rawSet as any)(...args);
+    options.onChange()?.(objClone(unwrap(store)));
+  }) as SetStoreFunction<TValue>;
+
+  return [store, wrappedSet];
+}