위젯 추가 팝업 수정

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"
+        onPointerDown={floating ? onHeaderPointerDown : undefined}
+        style={floating ? { cursor: headerCursor, ...headerTouchStyle } : undefined}
       >
-      <div className="wd-picker-native-header">
         <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"

frontend/src/styles/widgetDashboard.css

@@ -1298,11 +1298,15 @@
 /* 위젯 선택 팝업 — 웹·대시보드 (서버와 동일한 넓은 목록) */
 .app-popup-shell--widget-picker {
   width: min(720px, 96vw) !important;
+  height: min(860px, 92vh);
   max-height: min(860px, 92vh);
 }
 
 .app-popup-shell--widget-picker .wd-picker-popup-body {
+  flex: 1 1 auto;
+  min-height: 0;
   max-height: none;
+  overflow-y: auto;
 }
 
 /* Tauri 위젯 선택 전용 OS 창 (720×860) — 서버 AppPopup과 동일 */
@@ -1344,11 +1348,14 @@ html.fw-native-picker-window .app-popup-overlay {
 
 html.fw-native-picker-window .app-popup-shell--widget-picker {
   width: min(720px, calc(100vw - 16px)) !important;
+  height: min(860px, calc(100vh - 16px));
   max-height: min(860px, calc(100vh - 16px));
 }
 
 html.fw-native-picker-window .app-popup-shell--widget-picker .wd-picker-popup-body {
-  max-height: min(760px, calc(100vh - 120px));
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -1371,11 +1378,14 @@ html.fw-native-widget.fw-native-picker-mode .app-popup-overlay {
 
 html.fw-native-widget.fw-native-picker-mode .app-popup-shell--widget-picker {
   width: min(720px, calc(100vw - 16px)) !important;
+  height: min(860px, calc(100vh - 16px));
   max-height: min(860px, calc(100vh - 16px));
 }
 
 html.fw-native-widget.fw-native-picker-mode .app-popup-shell--widget-picker .wd-picker-popup-body {
-  max-height: min(760px, calc(100vh - 120px));
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -1403,6 +1413,13 @@ html.fw-native-widget .wd-picker-native-overlay {
   background: rgba(0, 0, 0, 0.5);
 }
 
+html.fw-native-widget .wd-picker-native-overlay--floating {
+  display: block;
+  padding: 0;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.45);
+}
+
 html.fw-native-widget .wd-picker-native-shell {
   flex: 1;
   min-height: 0;
@@ -1415,6 +1432,14 @@ html.fw-native-widget .wd-picker-native-shell {
   overflow: hidden;
 }
 
+html.fw-native-widget .wd-picker-native-shell--floating {
+  flex: none;
+  width: min(720px, 96vw);
+  height: min(860px, 92vh);
+  max-height: min(860px, 92vh);
+  pointer-events: auto;
+}
+
 html.fw-native-widget .wd-picker-native-header {
   flex-shrink: 0;
   display: flex;
@@ -1428,6 +1453,13 @@ html.fw-native-widget .wd-picker-native-header {
     color-mix(in srgb, var(--accent, #3f7ef5) 14%, var(--bg2)) 0%,
     var(--bg2, #1e222d) 100%
   );
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+
+html.fw-native-widget .wd-picker-native-header:active {
+  cursor: grabbing;
 }
 
 html.fw-native-widget .wd-picker-native-title {