알림목록 화면오류 수정

frontend/src/utils/ChartManager.ts

@@ -258,13 +258,23 @@ export class ChartManager {
   /** applyPaneLayout / resetPaneHeights 에서 측정한 마지막 가용 높이(px) */
   private _lastLayoutAvailableHeight?: number;
 
-  constructor(container: HTMLElement, theme: Theme) {
+  /** 알림 목록 미니 차트 등 고정 높이 — pane 최소 px·비율 완화 */
+  private _compactPaneLayout = false;
+
+  constructor(
+    container: HTMLElement,
+    theme: Theme,
+    options?: { autoSize?: boolean; compactPaneLayout?: boolean },
+  ) {
     this.container = container;
+    this._compactPaneLayout = options?.compactPaneLayout ?? false;
+    const autoSize = options?.autoSize ?? !this._compactPaneLayout;
     const t = getTheme(theme);
     this.chart = createChart(container, {
       /* autoSize: true → LWC가 내부적으로 ResizeObserver를 사용해 컨테이너 크기 변경을 자동으로 처리.
-         멀티 레이아웃에서 초기 렌더 시 컨테이너가 0 크기일 때도 차트가 정상 표시됨. */
-      autoSize: true,
+         멀티 레이아웃에서 초기 렌더 시 컨테이너가 0 크기일 때도 차트가 정상 표시됨.
+         compact(미니) 차트는 autoSize:false + syncLayout() 으로 피드백 루프 방지. */
+      autoSize,
       layout: {
         background: { type: ColorType.Solid, color: t.bgColor },
         textColor:  t.textColor,
@@ -764,10 +774,39 @@ export class ChartManager {
 
   /** 지표 추가·제거 후 pane index 동기화 + stretch 재배분 */
   private _finalizeIndicatorPaneLayout(): void {
-    if (this._activeIndicatorPaneIndices().size === 0) return;
     this._removeOrphanSubPanes();
-    this._resyncIndicatorPaneIndices();
-    this.resetPaneHeights(this._lastLayoutAvailableHeight);
+    if (this._activeIndicatorPaneIndices().size > 0) {
+      this._resyncIndicatorPaneIndices();
+    } else {
+      this._trimTrailingEmptySubPanes();
+    }
+    const H = this._lastLayoutAvailableHeight ?? this.container.clientHeight;
+    this.resetPaneHeights(H > 0 ? H : undefined);
+    if (this._compactPaneLayout && H > 0) {
+      try {
+        const w = this.container.clientWidth;
+        if (w > 0) this.chart.resize(w, H);
+      } catch { /* ok */ }
+    }
+    this._notifyPaneLayout();
+  }
+
+  /**
+   * 고정 높이 미니 차트 — pane 비율 재계산 + LWC resize 를 한 번에 수행.
+   * (autoSize:false 일 때 외부 ResizeObserver 가 호출)
+   */
+  syncLayout(width: number, height: number): void {
+    if (height > 0) this._lastLayoutAvailableHeight = height;
+    this._removeOrphanSubPanes();
+    if (this._activeIndicatorPaneIndices().size > 0) {
+      this._resyncIndicatorPaneIndices();
+    } else {
+      this._trimTrailingEmptySubPanes();
+    }
+    this.resetPaneHeights(height);
+    try {
+      if (width > 0 && height > 0) this.chart.resize(width, height);
+    } catch { /* ok */ }
     this._notifyPaneLayout();
   }
 
@@ -3530,7 +3569,7 @@ export class ChartManager {
 
     const volumeShown = this._volumeVisible && !this._candleOnlyLayout;
     const VOL_FRAC = this._volumeFrac(H);
-    const MIN_IND_PX = 80;
+    const MIN_IND_PX = this._minIndPx(H);
     const ORPHAN_STRETCH = 0.0001;
     /** 보조지표 pane 은 동일 stretch weight → 항상 같은 높이 */
     const IND_EQUAL_WEIGHT = 1;
@@ -3569,14 +3608,26 @@ export class ChartManager {
     return totalRequired;
   }
 
+  private _minIndPx(H: number): number {
+    if (this._compactPaneLayout) {
+      return Math.min(56, Math.max(28, Math.round(H * 0.2)));
+    }
+    return 80;
+  }
+
   private _paneHeightFractions(
     indicatorPaneCount: number,
     volFrac: number,
+    availableHeight?: number,
   ): { mainFrac: number; eachIndFrac: number } {
     const N = indicatorPaneCount;
     if (N === 0) {
       return { mainFrac: 1 - volFrac, eachIndFrac: 0 };
     }
+    if (this._compactPaneLayout && N === 1 && availableHeight != null && availableHeight < 400) {
+      const mainFrac = 0.52;
+      return { mainFrac, eachIndFrac: Math.max(0.28, 1 - mainFrac - volFrac) };
+    }
     if (N <= 3) {
       return { mainFrac: 0.5, eachIndFrac: (0.5 - volFrac) / N };
     }
@@ -3621,7 +3672,7 @@ export class ChartManager {
         ? this._lastLayoutAvailableHeight
         : this.container.clientHeight);
     const N = this._activeIndicatorPaneIndices().size;
-    const { mainFrac } = this._paneHeightFractions(N, this._volumeFrac(H));
+    const { mainFrac } = this._paneHeightFractions(N, this._volumeFrac(H), H);
 
     return this._applyPaneStretchFactors(mainFrac, availableHeight);
   }