전략편집기 기준값 보조지표 설정값 동기화

frontend/src/hooks/useDraggablePanel.ts

@@ -14,6 +14,17 @@ export interface UseDraggablePanelOptions {
 }
 
 const DEFAULT_POS: DraggablePosition = { x: 80, y: 72 };
+const DEFAULT_CENTER_ESTIMATE = { width: 520, height: 560 };
+
+function estimateCenterPosition(
+  width = DEFAULT_CENTER_ESTIMATE.width,
+  height = DEFAULT_CENTER_ESTIMATE.height,
+): DraggablePosition {
+  return {
+    x: Math.max(8, (window.innerWidth - width) / 2),
+    y: Math.max(8, (window.innerHeight - height) / 2),
+  };
+}
 
 /**
  * 팝업 패널 타이틀바 드래그 이동 (마우스·터치·펜)
@@ -27,7 +38,10 @@ export function useDraggablePanel(options: UseDraggablePanelOptions = {}) {
 
   const internalRef = useRef<HTMLDivElement>(null);
   const panelRef = (externalRef ?? internalRef) as RefObject<HTMLDivElement | null>;
-  const [pos, setPos] = useState<DraggablePosition>(initialPosition);
+  const [pos, setPos] = useState<DraggablePosition>(() =>
+    centerOnMount ? estimateCenterPosition() : initialPosition,
+  );
+  const [positionReady, setPositionReady] = useState(!centerOnMount);
   const [dragging, setDragging] = useState(false);
   const dragOrigin = useRef({ mx: 0, my: 0, px: 0, py: 0 });
   const centeredOnce = useRef(false);
@@ -39,13 +53,14 @@ export function useDraggablePanel(options: UseDraggablePanelOptions = {}) {
     if (!el) return;
 
     const placeCenter = () => {
-      const w = el.offsetWidth || 400;
-      const h = el.offsetHeight || 320;
+      const w = el.offsetWidth || DEFAULT_CENTER_ESTIMATE.width;
+      const h = el.offsetHeight || DEFAULT_CENTER_ESTIMATE.height;
       setPos({
         x: Math.max(8, (window.innerWidth - w) / 2),
         y: Math.max(8, (window.innerHeight - h) / 2),
       });
       centeredOnce.current = true;
+      setPositionReady(true);
     };
 
     placeCenter();
@@ -95,6 +110,7 @@ export function useDraggablePanel(options: UseDraggablePanelOptions = {}) {
     position: 'fixed',
     left: pos.x,
     top: pos.y,
+    ...(centerOnMount && !positionReady ? { visibility: 'hidden' as const } : null),
   };
 
   return {