위젯 추가 팝업 수정

frontend/src/components/widgetDashboard/WidgetPickerModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import AppPopup from '../AppPopup';
+import { useDraggablePanel } from '../../hooks/useDraggablePanel';
 import type { WidgetCategory } from '../../types/widgetDashboard';
 import { widgetsByGroup, widgetsByGroupAll } from '../../widgets/widgetRegistry';
 
@@ -73,17 +74,39 @@ const NativeWidgetPicker: React.FC<Props> = ({
   onSelect,
   nativeFullRoot = false,
 }) => {
+  const floating = !nativeFullRoot;
+  const {
+    panelRef,
+    dragging,
+    onHeaderPointerDown,
+    panelStyle,
+    headerCursor,
+    headerTouchStyle,
+  } = useDraggablePanel({ centerOnMount: floating, recenterOnResize: floating });
+
   if (!open) return null;
   const { title } = pickerMeta(category);
 
   const shell = (
     <div
-      className="wd-picker-native-shell"
+      ref={floating ? panelRef : undefined}
+      className={[
+        'wd-picker-native-shell',
+        floating ? 'wd-picker-native-shell--floating' : '',
+      ].filter(Boolean).join(' ')}
       role="dialog"
       aria-modal="true"
       aria-labelledby="wd-picker-native-title"
+      style={floating ? {
+        ...panelStyle,
+        cursor: dragging ? 'grabbing' : undefined,
+      } : undefined}
     >
-      <div className="wd-picker-native-header">
+      <div
+        className="wd-picker-native-header"
+        onPointerDown={floating ? onHeaderPointerDown : undefined}
+        style={floating ? { cursor: headerCursor, ...headerTouchStyle } : undefined}
+      >
         <h2 id="wd-picker-native-title" className="wd-picker-native-title">
           {title}
           <span className="wd-picker-native-title-ko"> (Widget)</span>
@@ -91,6 +114,7 @@ const NativeWidgetPicker: React.FC<Props> = ({
         <button
           type="button"
           className="wd-picker-native-close"
+          onMouseDown={e => e.stopPropagation()}
           onClick={onClose}
           aria-label="닫기"
         >
@@ -108,7 +132,7 @@ const NativeWidgetPicker: React.FC<Props> = ({
   }
 
   return (
-    <div className="wd-picker-native-overlay" role="presentation">
+    <div className="wd-picker-native-overlay wd-picker-native-overlay--floating" role="presentation">
       {shell}
     </div>
   );
@@ -147,6 +171,8 @@ const WidgetPickerModal: React.FC<Props> = ({
       maxWidth="96vw"
       backdrop
       closeOnBackdrop
+      centered
+      recenterOnResize
       zIndex={13200}
       shellClassName="app-popup-shell--widget-picker"
       bodyClassName="wd-picker-popup-body"