rails_modal_manager 1.0.57 → 1.0.59

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91f46719ac2c4bf2aa6b8b33d883b85ee97f8dbc3490c7162441855ff6701e42
-  data.tar.gz: 881b2327c4fa56fa3fa4199655d26b3bb360b8e79ebdab4efec31db5d3368188
+  metadata.gz: 65777a92905a2ad64ca23a3d2a571c52c9cea95ac6797eb56eba7a567651053e
+  data.tar.gz: 418078c26f467088fa6dcac03042c67458a0238722648ba79ecbe5b8ec297520
 SHA512:
-  metadata.gz: 97bfd7a727035f23b11cc926911f1fb0465a9df3b48e0cec2cf73b69c06983d9b0fbf329732c10eec541ade3c5943f209cd2e30ddb79dd3aa38816a8ea6be503
-  data.tar.gz: 2f7b805a605d217f0af8a4ef98745b3f2204baed44ee6aa15ab839c703afcd025b73363b6dfe83072b09d06cc93f3396e6298f87f50750b6d7bfbde45e3c940e
+  metadata.gz: a3ae6da5585652a3229d2c876cc3cc667a86f4169e8abf949ec80408d5e8cb198d4d6cef83bbff4c89f311f19700a55bc8a69ca8d0f449f31d49116925e3db70
+  data.tar.gz: b225ccbff9262aaa54d130f0190d7a945dd5cb43206dcea1992cf34d74d6b26f73011c7b78032501bbcfa607996a7d3f1494cb4cda046b7e80bb7fa73b3fa9f9

data/README.md

@@ -3,7 +3,15 @@
 Rails 애플리케이션을 위한 고급 모달 매니저입니다.
 `@reshacs/react-modal-manager`에서 포팅되었습니다.
 
-**Version:** 1.0.37
+**Version:** 1.0.59
+
+> ⚠️ **이 README 의 본문 설명은 v1.0.37 기준입니다.** v1.0.38 이후의 변경(디자인 개편, 푸터 버튼 패턴, z-index 계층 등)은
+> **[OPTIONS.md](OPTIONS.md) 최상단**이 최신 기준입니다. 두 문서가 어긋나면 OPTIONS.md 를 따르세요.
+>
+> 특히 아래 항목은 README 본문이 오래됐습니다:
+> - **헤더 색상** — 본문의 `#3b82f6` 파란색 → v1.0.57 부터 `#3e6187` 블루 차콜
+> - **푸터 버튼** — `onclick` 은 v1.0.55 에서 deprecated. `type: "submit"` + `form:` 패턴 사용
+> - **z-index** — v1.0.58 에서 계층 재배치 (overlay 1400 < modal 1500~8000 < taskbar 9000 < confirm 10000)
 
 ---
 
@@ -798,6 +806,19 @@ MIT License
 
 ## 변경 이력
 
+> v1.0.38 ~ v1.0.58 의 상세 변경 이력은 **[OPTIONS.md](OPTIONS.md)** 참조. 아래는 주요 항목만.
+
+### v1.0.59
+
+- **submenu_groups 초기 footer 버그 픽스** — 여러 서브메뉴 그룹 사용 시 마지막 그룹의 active 탭 `footer_buttons` 가 초기 footer 를 덮어쓰던 문제. connect 시 초기 footer 반영을 활성 그룹(`rmm-submenu-group-active`)으로 한정.
+
+### v1.0.58
+
+- **z-index 계층 재배치** — v1.0.57 의 `modal > taskbar` 배치가 모달이 태스크바를 덮어 최소화 항목을 클릭할 수 없게 만든 문제 수정
+  - `overlay 1400 < modal 1500~8000 < taskbar 9000 < 내장 confirm 10000`
+- **`MAX_Z_INDEX` (8000) 상한 도입** — 모달을 반복해서 앞으로 가져올 때 z-index 가 무한 증가해 태스크바를 다시 덮던 근본 원인 제거. 상한 도달 시 쌓임 순서를 보존한 채 재할당
+- ⚠️ 호스트 앱의 `position: fixed` 요소는 **1500~8000 대역을 비워두고**, 모달 위에 떠야 하는 전역 UI(스낵바·토스트·컨텍스트 메뉴)는 9000 초과로 배치 권장
+
 ### v1.0.37
 
 - **커스텀 헤더 색상 옵션 추가**:

data/app/assets/stylesheets/rails_modal_manager.css

@@ -133,11 +133,16 @@
   --rmm-animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
   /* Z-index */
-  /* v1.0.57 — z-index 계층 재정렬: overlay < taskbar < modal
-     → 모달이 최소화 태스크바 위에 항상 노출, 태스크바는 여전히 overlay 위라 클릭 가능 */
-  --rmm-z-overlay: 2000;
-  --rmm-z-taskbar: 2100;
-  --rmm-z-modal: 2200;
+  /* v1.0.58 — taskbar 가 항상 최상위. v1.0.57 의 modal > taskbar 배치가
+     모달이 taskbar 영역을 가려 최소화 항목 클릭 불가 문제를 만들었음.
+     계층 (낮음→높음):
+       overlay  : 1400
+       modal    : 1500 ~ 8000 (modal_store 가 동적 증가, MAX_Z_INDEX 도달 시 reset)
+       taskbar  : 9000 (항상 모달 위 — 최소화 클릭 가능 보장)
+       confirm  : 10000 (모든 위) */
+  --rmm-z-overlay: 1400;
+  --rmm-z-modal:   1500;
+  --rmm-z-taskbar: 9000;
 }
 
 /* ============================================

data/app/javascript/rails_modal_manager/controllers/rmm_modal_controller.js

@@ -319,8 +319,8 @@ export default class extends Controller {
 
     // Create confirm modal HTML
     const confirmHtml = `
-      <div class="rmm-overlay rmm-active" id="${confirmId}-overlay" style="z-index: 3000;"></div>
-      <div id="${confirmId}" class="rmm-modal rmm-size-xs rmm-position-center rmm-active" style="z-index: 3001; min-width: 320px;" role="dialog" aria-modal="true">
+      <div class="rmm-overlay rmm-active" id="${confirmId}-overlay" style="z-index: 10000;"></div>
+      <div id="${confirmId}" class="rmm-modal rmm-size-xs rmm-position-center rmm-active" style="z-index: 10001; min-width: 320px;" role="dialog" aria-modal="true">
         <div class="rmm-header" style="background: var(--rmm-btn-warning-bg); border-bottom: none;">
           <div class="rmm-header-left">
             <h2 class="rmm-header-title" style="color: white;">확인</h2>

data/app/javascript/rails_modal_manager/controllers/rmm_submenu_controller.js

@@ -53,10 +53,24 @@ export default class extends Controller {
       this.currentItemId = activeItem.dataset.itemId
       // v1.0.50+: 초기 active 탭에 탭별 footer 가 지정돼 있으면 바로 반영
       // (모달 레벨 footer_buttons 로 렌더된 기본값을 override)
-      this._applyFooterFromItem(activeItem)
+      // v1.0.59: submenu_groups 사용 시 비활성 그룹은 초기 반영에서 제외.
+      // 모든 그룹의 controller 가 connect 되므로, 가드 없이는 DOM 상 마지막 그룹의
+      // active 탭 footer 가 실제 표시 중인 그룹의 footer 를 덮어쓴다.
+      if (this._isGroupActive()) {
+        this._applyFooterFromItem(activeItem)
+      }
     }
   }
 
+  /**
+   * 이 submenu 가 속한 그룹이 현재 표시 중인지 판정.
+   * 그룹 래퍼(.rmm-submenu-group)가 없으면 단일 submenu 이므로 항상 활성.
+   */
+  _isGroupActive() {
+    const group = this.element.closest('.rmm-submenu-group')
+    return !group || group.classList.contains('rmm-submenu-group-active')
+  }
+
   /**
    * Increment the shared request counter on the content container.
    * Called synchronously from selectItem/forceReloadActive BEFORE async loadAjaxContent.

data/app/javascript/rails_modal_manager/modal_store.js

@@ -11,8 +11,15 @@
 // ============================================
 
 export const MODAL_CONSTANTS = {
-  // v1.0.57 — 모달이 최소화 태스크바(2100) 위에 오도록 시작 z-index 상향
-  DEFAULT_Z_INDEX: 2200,
+  // v1.0.58 — 최소화 태스크바(9000) 가 항상 모달 위에 위치해 클릭 가능하도록
+  // 모달 z-index 시작값 1500 + 최대 cap 8000 (taskbar 9000 보다 낮게 유지).
+  // overlay/confirm 도 함께 재배치:
+  //   overlay      : 1400
+  //   modal        : 1500 ~ 8000 (동적 증가, 8000 도달 시 reset)
+  //   taskbar      : 9000 (항상 모달 위 — 최소화 항목 클릭 가능)
+  //   confirm 모달 : 10000 (모든 것 위)
+  DEFAULT_Z_INDEX: 1500,
+  MAX_Z_INDEX: 8000,
   ANIMATION_DURATION: 200,
   HEADER_HEIGHT: 56,
   FOOTER_HEIGHT: 64,
@@ -101,6 +108,15 @@ class ModalStore {
       return;
     }
 
+    // z-index cap — taskbar(9000) 보다 높지 못하도록 8000 도달 시 default 로 reset.
+    if (this.topZIndex >= MODAL_CONSTANTS.MAX_Z_INDEX) {
+      this.topZIndex = MODAL_CONSTANTS.DEFAULT_Z_INDEX;
+      // 기존 모달들 z-index 도 정렬 순서대로 재할당
+      this.modalOrder.forEach((id, idx) => {
+        if (this.activeModals[id]) this.activeModals[id].zIndex = MODAL_CONSTANTS.DEFAULT_Z_INDEX + idx * 10;
+      });
+      this.topZIndex = MODAL_CONSTANTS.DEFAULT_Z_INDEX + this.modalOrder.length * 10;
+    }
     const newZIndex = this.topZIndex + 10;
 
     this.activeModals[modalId] = { ...config, zIndex: newZIndex };
@@ -159,6 +175,18 @@ class ModalStore {
     if (!this.activeModals[modalId]) return;
     if (this.modalOrder[this.modalOrder.length - 1] === modalId) return;
 
+    // z-index cap — 8000 도달 시 정렬 순서로 재할당.
+    if (this.topZIndex >= MODAL_CONSTANTS.MAX_Z_INDEX) {
+      const reordered = [...this.modalOrder.filter(id => id !== modalId), modalId];
+      reordered.forEach((id, idx) => {
+        if (this.activeModals[id]) this.activeModals[id].zIndex = MODAL_CONSTANTS.DEFAULT_Z_INDEX + idx * 10;
+      });
+      this.modalOrder = reordered;
+      this.topZIndex = MODAL_CONSTANTS.DEFAULT_Z_INDEX + reordered.length * 10;
+      this.notify();
+      return;
+    }
+
     const newZIndex = this.topZIndex + 10;
 
     this.activeModals[modalId].zIndex = newZIndex;

data/lib/rails_modal_manager/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsModalManager
-  VERSION = "1.0.57"
+  VERSION = "1.0.59"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.57
+  version: 1.0.59
 platform: ruby
 authors:
 - reshacs