diff --git a/desktop/src/widget-main.tsx b/desktop/src/widget-main.tsx index 268c9ec..87db751 100644 --- a/desktop/src/widget-main.tsx +++ b/desktop/src/widget-main.tsx @@ -1,5 +1,5 @@ import './forceServerApi'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import { getCurrentWindow } from '@tauri-apps/api/window'; import { LogicalSize } from '@tauri-apps/api/dpi'; @@ -8,6 +8,7 @@ import { ensureDesktopApiBase } from './ensureDesktopApiBase'; import FloatingWidgetWindow from '@frontend/components/floatingWidgets/FloatingWidgetWindow'; import { defaultGridFr, + NATIVE_WIDGET_PICKER_WINDOW, type FloatingWidgetInstance, } from '@frontend/types/floatingWidget'; import type { Theme } from '@frontend/types'; @@ -134,6 +135,27 @@ const WidgetApp: React.FC = () => { void getCurrentWindow().close(); }, []); + const sizeBeforePickerRef = useRef<{ width: number; height: number } | null>(null); + + const handlePickerOpenChange = useCallback(async (open: boolean) => { + const win = getCurrentWindow(); + if (open) { + const size = await win.innerSize(); + sizeBeforePickerRef.current = { width: size.width, height: size.height }; + const maxW = Math.max(480, window.screen.availWidth - 48); + const maxH = Math.max(520, window.screen.availHeight - 48); + const w = Math.min(NATIVE_WIDGET_PICKER_WINDOW.width, maxW); + const h = Math.min(NATIVE_WIDGET_PICKER_WINDOW.height, maxH); + await win.setSize(new LogicalSize(w, h)); + await win.center(); + return; + } + const prev = sizeBeforePickerRef.current; + if (!prev) return; + sizeBeforePickerRef.current = null; + await win.setSize(new LogicalSize(prev.width, prev.height)); + }, []); + if (!instance) { return
위젯 정보를 불러올 수 없습니다.
; } @@ -161,6 +183,7 @@ const WidgetApp: React.FC = () => { nativeShell onClose={handleClose} onFocus={() => {}} + onPickerOpenChange={open => { void handlePickerOpenChange(open); }} onUpdateSlots={slots => setInstance(prev => (prev ? { ...prev, slots } : prev))} onUpdateSize={(width, height) => { setInstance(prev => (prev ? { ...prev, width, height } : prev)); diff --git a/frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx b/frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx index 6c16abd..65b027b 100644 --- a/frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx +++ b/frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx @@ -24,6 +24,8 @@ interface Props { onUpdateGridFr: (rowFr: number[], colFr: number[]) => void; /** Tauri OS 창 — 네이티브 타이틀·리사이즈 사용, 내부 플로팅 크롬 숨김 */ nativeShell?: boolean; + /** 위젯 선택 팝업 열림/닫힘 (네이티브 창 크기 조절용) */ + onPickerOpenChange?: (open: boolean) => void; } const FloatingWidgetWindow: React.FC{intro}
diff --git a/frontend/src/styles/widgetDashboard.css b/frontend/src/styles/widgetDashboard.css index 51601ef..5f46a80 100644 --- a/frontend/src/styles/widgetDashboard.css +++ b/frontend/src/styles/widgetDashboard.css @@ -1231,6 +1231,29 @@ line-height: 1.45; } +/* 위젯 선택 팝업 — 웹·대시보드 (서버와 동일한 넓은 목록) */ +.app-popup-shell--widget-picker { + width: min(720px, 96vw) !important; + max-height: min(860px, 92vh); +} + +.app-popup-shell--widget-picker .wd-picker-popup-body { + max-height: none; +} + +/* Tauri 네이티브 위젯 창 — OS 창 확대 후 팝업이 거의 전체를 채움 */ +html.fw-native-widget .app-popup-shell--widget-picker-native { + width: calc(100vw - 12px) !important; + max-width: calc(100vw - 12px) !important; + max-height: calc(100vh - 12px); + min-height: calc(100vh - 16px); +} + +html.fw-native-widget .app-popup-shell--widget-picker-native .wd-picker-popup-body { + flex: 1; + min-height: 0; +} + .bps-page--wd-no-left .bps-side-wrap--left, .bps-page--wd-no-left .bps-side-wrap--left + .bps-splitter { display: none !important; diff --git a/frontend/src/types/floatingWidget.ts b/frontend/src/types/floatingWidget.ts index fe13f99..34d877a 100644 --- a/frontend/src/types/floatingWidget.ts +++ b/frontend/src/types/floatingWidget.ts @@ -25,6 +25,9 @@ export const FLOATING_WIDGET_CELL_MIN_W = 140; export const FLOATING_WIDGET_CELL_MIN_H = 100; export const FLOATING_WIDGET_GRID_GAP = 1; +/** Tauri 네이티브 위젯 창 — 위젯 선택 팝업 표시용 OS 창 크기 */ +export const NATIVE_WIDGET_PICKER_WINDOW = { width: 740, height: 860 } as const; + export interface FloatingWidgetInstance { id: string; rows: number;