fix(desktop): Windows 위젯 추가 팝업 즉시 표시

창 크기 조절 완료를 기다리지 않고 picker를 먼저 열고, body portal·
resize 타임아웃으로 WebView2에서 팝업이 뜨지 않던 문제를 해결합니다.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx

@@ -40,29 +40,36 @@ const FloatingWidgetWindow: React.FC<Props> = ({
   onPickerOpenChange,
 }) => {
   const [pickSlotId, setPickSlotId] = useState<string | null>(null);
-  const [pickerOpening, setPickerOpening] = useState(false);
 
-  const openPicker = useCallback(async (slotId: string) => {
-    if (nativeShell && onPickerOpenChange) {
-      setPickerOpening(true);
-      try {
-        await onPickerOpenChange(true);
-        await new Promise<void>(resolve => {
-          requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-        });
-      } finally {
-        setPickerOpening(false);
-      }
-    }
+  const openPicker = useCallback((slotId: string) => {
     setPickSlotId(slotId);
+    if (nativeShell) {
+      document.documentElement.classList.add('fw-native-picker-open');
+    }
+    if (nativeShell && onPickerOpenChange) {
+      void onPickerOpenChange(true).catch(err => {
+        console.warn('[FloatingWidgetWindow] picker window resize failed', err);
+      });
+    }
   }, [nativeShell, onPickerOpenChange]);
 
   const closePicker = useCallback(async () => {
     setPickSlotId(null);
+    if (nativeShell) {
+      document.documentElement.classList.remove('fw-native-picker-open');
+    }
     if (nativeShell && onPickerOpenChange) {
-      await onPickerOpenChange(false);
+      try {
+        await onPickerOpenChange(false);
+      } catch (err) {
+        console.warn('[FloatingWidgetWindow] picker window restore failed', err);
+      }
     }
   }, [nativeShell, onPickerOpenChange]);
+  useEffect(() => () => {
+    document.documentElement.classList.remove('fw-native-picker-open');
+  }, []);
+
   const bodyWrapRef = useRef<HTMLDivElement>(null);
   const bodyRef = useRef<HTMLDivElement>(null);
   const [bodySize, setBodySize] = useState({ width: 0, height: 0 });
@@ -312,23 +319,35 @@ const FloatingWidgetWindow: React.FC<Props> = ({
           </div>
         )}
       </div>
-
-      {(pickerOpening || pickSlotId != null) && (
-        <WidgetPickerModal
-          open={pickSlotId != null}
-          category="all"
-          nativeCompact={nativeShell}
-          onClose={() => { void closePicker(); }}
-          onSelect={applyWidgetType}
-        />
-      )}
-      {pickerOpening && pickSlotId == null && nativeShell && (
-        <div className="wd-picker-native-loading" aria-live="polite">위젯 목록 준비 중…</div>
-      )}
     </>
   );
 
-  return nativeShell ? content : createPortal(content, document.body);
+  const pickerModal = pickSlotId != null ? (
+    <WidgetPickerModal
+      open
+      category="all"
+      nativeCompact={nativeShell}
+      onClose={() => { void closePicker(); }}
+      onSelect={applyWidgetType}
+    />
+  ) : null;
+
+  if (nativeShell) {
+    return (
+      <>
+        {content}
+        {pickerModal && createPortal(pickerModal, document.body)}
+      </>
+    );
+  }
+
+  return createPortal(
+    <>
+      {content}
+      {pickerModal}
+    </>,
+    document.body,
+  );
 };
 
 export default FloatingWidgetWindow;

frontend/src/styles/widgetDashboard.css

@@ -1329,6 +1329,16 @@ html.fw-native-widget .wd-picker-native-loading {
   font-size: 13px;
 }
 
+html.fw-native-widget.fw-native-picker-open .fw-widget-native-root .fw-window {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+html.fw-native-widget.fw-native-picker-open .wd-picker-native-overlay {
+  padding: 0;
+  background: var(--bg, #1a1b26);
+}
+
 .bps-page--wd-no-left .bps-side-wrap--left,
 .bps-page--wd-no-left .bps-side-wrap--left + .bps-splitter {
   display: none !important;