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

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 {

frontend/src/hooks/useIndicatorSettings.ts

@@ -67,6 +67,9 @@ let _loadPromise: Promise<AllSettings> | null = null;
 let _visualCache: VisualCache | null = null;
 let _visualLoadPromise: Promise<VisualCache> | null = null;
 
+/** 로그인 세션별 1회만 DB 로드 — 페이지 전환 시 캐시 유지 */
+let _loadedSessionKey: number | null = null;
+
 function ensureLoaded(): Promise<AllSettings> {
   if (_cache !== null) return Promise.resolve(_cache);
   if (_loadPromise) return _loadPromise;
@@ -110,6 +113,7 @@ export function invalidateIndicatorSettingsCache() {
   _loadPromise = null;
   _visualCache = null;
   _visualLoadPromise = null;
+  _loadedSessionKey = null;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -120,11 +124,24 @@ export function useIndicatorSettings(sessionKey = 0) {
     () => _cache !== null && _visualCache !== null,
   );
 
-  // 로그인/로그아웃 시 지표 설정 재로드
+  // 로그인/로그아웃 시 지표 설정 재로드 (페이지 전환만으로는 캐시 유지)
   useEffect(() => {
-    setSettingsLoaded(false);
-    invalidateIndicatorSettingsCache();
     const unsub = subscribeIndicatorSettings(() => setSettingsRevision(r => r + 1));
+
+    const cacheWarm = _loadedSessionKey === sessionKey
+      && _cache !== null
+      && _visualCache !== null;
+
+    if (cacheWarm) {
+      setSettingsLoaded(true);
+      return unsub;
+    }
+
+    if (_loadedSessionKey !== sessionKey) {
+      invalidateIndicatorSettingsCache();
+    }
+
+    setSettingsLoaded(false);
     Promise.all([
       ensureLoaded().catch(err =>
         console.error('[useIndicatorSettings] params load failed', err),
@@ -133,6 +150,7 @@ export function useIndicatorSettings(sessionKey = 0) {
         console.error('[useIndicatorSettings] visual load failed', err),
       ),
     ]).then(() => {
+      _loadedSessionKey = sessionKey;
       setSettingsLoaded(true);
       setSettingsRevision(r => r + 1);
     });