rails_modal_manager 1.0.48 → 1.0.50

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee19f493f83594ff6e4ff8c8d6ed72ce1015290dfe73b90c7064b8fc589ec516
-  data.tar.gz: 3442fbef22b38eb2f2f8bcf7dacf7328d221de6c7dead4f9e6c10b3ff75cdda1
+  metadata.gz: 1580c0dddb5b53633cfdb943d27eab017b23498563308a4c7b163ce9654dfe2c
+  data.tar.gz: 498e99470357e2d5afc2b7efab7ff8f36af5e5edaad6d8d51e7a3128936e83ca
 SHA512:
-  metadata.gz: 8d809ba871b2859b7eaa62eb0cb9dac68b634ba675d5e5966879846a0caea647db95205bef602ac90fecc944d4391e5dd9bf671d71c5aa3cb36c8dd28f6645b3
-  data.tar.gz: 54d1785b5431878ae0ed8c7aaa075543a89dc3caf0a0636978d883a10b07332b37025b1ea9ef2c8754332770c5662565b28de02b2cd93ea078c18ab00aba6724
+  metadata.gz: f44e97638772289ca3c96c664f980d70795a1248656ff45ab408201881a04bf7e5570932d45d67f35c5980b7a7e42a6ec5dfc51cb419a0f10e663171952a063c
+  data.tar.gz: fb456bdde62080b5f5165c34ace756b6d13f79cdb8bedc82e8696a11a864ed61bc94531579097741d75c096bca891444db23376fd56d4f3d0478deaa2a346325

data/app/assets/stylesheets/rails_modal_manager.css

@@ -1866,38 +1866,40 @@
 }
 
 /* Position-aware transform — scale/translateY 를 transform 체인 **내부**에
-   포함시켜 중심점 쏠림 방지. :not() 필터로 드래그/커스텀위치 상태 제외. */
-.rmm-modal.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+   포함시켜 중심점 쏠림 방지. :not() 필터로 드래그/커스텀위치/최소화/size-full 제외.
+   size-full 은 transform: none !important 를 유지하고 엔트리는 `translate` 개별
+   프로퍼티(sheet 모션)가 담당. */
+.rmm-modal.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: translate(-50%, -50%) scale(0.94) translateY(14px);
 }
-.rmm-modal.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: translate(-50%, -50%) scale(1) translateY(0);
 }
 
-.rmm-modal.rmm-position-top:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-top:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: translateX(-50%) scale(0.94) translateY(-14px);
 }
-.rmm-modal.rmm-position-top.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-top.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: translateX(-50%) scale(1) translateY(0);
 }
 
-.rmm-modal.rmm-position-bottom:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-bottom:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: translateX(-50%) scale(0.94) translateY(14px);
 }
-.rmm-modal.rmm-position-bottom.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-bottom.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: translateX(-50%) scale(1) translateY(0);
 }
 
-.rmm-modal.rmm-position-top-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
-.rmm-modal.rmm-position-top-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
-.rmm-modal.rmm-position-bottom-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
-.rmm-modal.rmm-position-bottom-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-top-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
+.rmm-modal.rmm-position-top-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
+.rmm-modal.rmm-position-bottom-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
+.rmm-modal.rmm-position-bottom-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: scale(0.94) translateY(14px);
 }
-.rmm-modal.rmm-position-top-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
-.rmm-modal.rmm-position-top-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
-.rmm-modal.rmm-position-bottom-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
-.rmm-modal.rmm-position-bottom-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+.rmm-modal.rmm-position-top-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
+.rmm-modal.rmm-position-top-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
+.rmm-modal.rmm-position-bottom-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
+.rmm-modal.rmm-position-bottom-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
   transform: scale(1) translateY(0);
 }
 
@@ -1960,3 +1962,197 @@
     display: none !important;
   }
 }
+
+/* ============================================
+   v1.0.48 — size=full 전환 플래시 제거 + 모바일 sheet 애니메이션
+   ============================================
+   문제: mobile_default_maximized: true 모달은 JS 가 열릴 때 size-md → size-full
+         로 클래스를 바꿈. 이 순간 transition 이 걸려 있어서 top/left/transform 이
+         `translate(-50%,-50%) scale(0.94) translateY(14px)` → `none` 으로 보간되면서
+         **모달이 중앙에서 좌상단으로 스르륵 미끄러지는 현상** 발생.
+
+   해결:
+   (A) size-full 상태에서는 top/left/transform 의 transition 을 끊음.
+       → 중앙→좌상단 슬라이드 차단. opacity 만 페이드.
+   (B) 모바일 + size-full 은 v2 의 `:sheet` variant 처럼 바닥에서 살짝
+       올라오는 모션으로 대체. translate 개별 프로퍼티를 써서 기존
+       `transform: none !important` 와 충돌 없음.
+*/
+
+/* (A) size-full: 레이아웃 속성(top/left/transform) 전환 차단.
+   opacity / box-shadow 만 전환되도록 transition 축소. */
+.rmm-modal.rmm-size-full {
+  transition: opacity    var(--rmm-dur-fast) var(--rmm-ease-in),
+              visibility var(--rmm-dur-fast) var(--rmm-ease-in),
+              box-shadow var(--rmm-dur-base) var(--rmm-ease-out) !important;
+}
+.rmm-modal.rmm-size-full.rmm-active {
+  transition-duration: var(--rmm-dur-base) !important;
+  transition-timing-function: var(--rmm-ease-emphasized) !important;
+}
+
+/* (B) 모바일(≤768px) + size-full: translate 개별 프로퍼티로 sheet 느낌 엔트리.
+       transform: none !important 는 그대로 두고 translate 만 보간. */
+@media (max-width: 768px) {
+  .rmm-modal.rmm-size-full {
+    translate: 0 24px;
+    transition: opacity    var(--rmm-dur-fast) var(--rmm-ease-in),
+                visibility var(--rmm-dur-fast) var(--rmm-ease-in),
+                translate  var(--rmm-dur-fast) var(--rmm-ease-in),
+                box-shadow var(--rmm-dur-base) var(--rmm-ease-out) !important;
+  }
+  .rmm-modal.rmm-size-full.rmm-active {
+    translate: 0 0;
+    transition-duration: var(--rmm-dur-base) !important;
+    transition-timing-function: var(--rmm-ease-emphasized) !important;
+  }
+  /* 최소화/드래그 상태는 translate 개별 프로퍼티 초기화 (기존 로직 간섭 방지) */
+  .rmm-modal.rmm-size-full.rmm-minimized,
+  .rmm-modal.rmm-size-full.rmm-dragging {
+    translate: 0 0;
+  }
+
+  /* (C) v1.0.50: 모바일+full 모달 여백은 JS inline !important 가 직접 담당 (rmm_modal_controller.js).
+         CSS !important 규칙들(라인 1569/1574/1577)과의 specificity 싸움을 피하기 위해 CSS 규칙은 두지 않음.
+         overflow:hidden 이 모달 본체에 이미 있어 내부 사이드바(absolute)도 둥근 모서리에 맞게 클리핑됨. */
+
+  /* (D) v1.0.50: 모바일에서는 모달 라운드 제거 (size 무관). PC 에서는 기본 radius 유지. */
+  .rmm-modal {
+    border-radius: 0 !important;
+  }
+}
+
+/* ============================================
+   v1.0.50 — 모달 외곽선 제거 + 폰트 선명도
+   ============================================
+   v2 처럼 깔끔한 edge (box-shadow 만으로 구분).
+   + 한글 전용 폰트 stack 을 `.rmm-modal` 에 명시해 host 앱 (ORDARS 포함)이
+     별도 폰트 지정을 안 해도 모달 내부는 한글이 선명하게 렌더되도록. */
+.rmm-modal {
+  border: 0 !important;
+  font-family:
+    -apple-system, BlinkMacSystemFont,
+    "Apple SD Gothic Neo",
+    "Pretendard",
+    "Noto Sans KR",
+    "Malgun Gothic",
+    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+.rmm-overlay,
+.rmm-taskbar {
+  font-family:
+    -apple-system, BlinkMacSystemFont,
+    "Apple SD Gothic Neo",
+    "Pretendard",
+    "Noto Sans KR",
+    "Malgun Gothic",
+    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================
+   v1.0.50 — 탭별 푸터 전환 애니메이션
+   ============================================
+   submenu selectItem 시 setModalFooter() 가 .rmm-footer-left / -right 의
+   innerHTML 을 교체. 교체 순간 미세한 fade 트랜지션을 주어 "딸깍" 느낌 제거. */
+.rmm-footer-left,
+.rmm-footer-right {
+  transition: opacity var(--rmm-dur-fast) var(--rmm-ease-out);
+}
+
+/* ============================================
+   v1.0.50 — 모바일 사이드바 단순화 (v2 스타일 peek)
+   ============================================
+   모바일+최대화 상태에서의 사이드바:
+   - 기본 hidden(완전 숨김). 토글 버튼으로 expanded drawer 오픈 (2상태).
+   - 모달 오픈 시 1회 peek 애니메이션: 얇은 drawer(아이콘만 표시)가 좌측에서
+     0 → 100% → 100% → -100% 로 슬라이드해 "사이드바가 여기 있다" 라는 힌트만 줌.
+   - 이전의 'icons'(64px inline) 단계는 제거. 관련 CSS(.rmm-sidebar-collapsed)는
+     PC 의 접힘 기능용으로 유지되므로 삭제하지 않음.
+*/
+@keyframes rmm-sidebar-peek {
+  0%   { transform: translateX(-100%); }
+  30%  { transform: translateX(0); }
+  55%  { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+@media (max-width: 768px) {
+  /* ── peek 중인 사이드바: 얇은 폭(아이콘 너비) + 오버레이 + 1회 animation ── */
+  .rmm-modal.rmm-size-full .rmm-sidebar[data-peek="true"] {
+    position: absolute !important;
+    top: var(--rmm-header-height) !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    z-index: 11 !important;
+    width: var(--rmm-sidebar-collapsed-width) !important;
+    min-width: var(--rmm-sidebar-collapsed-width) !important;
+    padding: 8px 6px !important;
+    pointer-events: none; /* peek 중엔 클릭 불가 — 단순 힌트 */
+    box-shadow: var(--rmm-elev-drag);
+    animation: rmm-sidebar-peek 1000ms var(--rmm-ease-out) forwards;
+    transition: none !important; /* animation 과 transition 충돌 방지 */
+  }
+  .rmm-modal.rmm-size-full .rmm-sidebar[data-peek="true"] .rmm-sidebar-item-label,
+  .rmm-modal.rmm-size-full .rmm-sidebar[data-peek="true"] .rmm-sidebar-item-badge {
+    display: none;
+  }
+  .rmm-modal.rmm-size-full .rmm-sidebar[data-peek="true"] .rmm-sidebar-item {
+    justify-content: center;
+    padding: 10px 8px;
+  }
+
+  /* ── 모바일+full 사이드바 일반 상태: transform translateX 기반 drawer + 부드러운 transition ──
+     기존 width:0 / width:64px 스냅 방식(__라인 906~945__)을 덮어써 전환을 부드럽게 만든다.
+     peek 중에는 이 규칙이 비활성(:not([data-peek="true"])). */
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) {
+    position: absolute !important;
+    top: var(--rmm-header-height) !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    z-index: 10 !important;
+    width: var(--rmm-sidebar-width) !important;
+    min-width: var(--rmm-sidebar-width) !important;
+    padding: 8px 6px !important;
+    overflow-y: auto;
+    border-right: 1px solid var(--rmm-sidebar-border) !important;
+    transform: translateX(-100%);
+    transition: transform var(--rmm-dur-base) var(--rmm-ease-emphasized),
+                box-shadow var(--rmm-dur-base) var(--rmm-ease-out);
+    box-shadow: none;
+  }
+  /* expanded = hidden 도 collapsed 도 없을 때 → drawer 펼침 */
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]):not(.rmm-sidebar-hidden):not(.rmm-sidebar-collapsed) {
+    transform: translateX(0);
+    box-shadow: var(--rmm-elev-drag);
+  }
+  /* hidden 과 legacy collapsed 모두 동일하게 숨김 (v1.0.50 에선 icons 단계 제거됨) */
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-hidden,
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-collapsed {
+    transform: translateX(-100%) !important;
+    box-shadow: none !important;
+  }
+  /* expanded 일 때 라벨/배지 확실히 표시 (peek 스타일이 섞여 있을 수 있으므로 복원) */
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) .rmm-sidebar-item-label,
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) .rmm-sidebar-item-badge {
+    display: inline-block;
+  }
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) .rmm-sidebar-item {
+    justify-content: flex-start;
+  }
+
+  /* 오버레이: expanded 일 때 표시, 나머진 숨김 (transform 전환과 동기) */
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]):not(.rmm-sidebar-hidden):not(.rmm-sidebar-collapsed) ~ .rmm-sidebar-overlay {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-hidden ~ .rmm-sidebar-overlay,
+  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-collapsed ~ .rmm-sidebar-overlay {
+    opacity: 0 !important;
+    visibility: hidden !important;
+  }
+}

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

@@ -536,33 +536,49 @@ export default class extends Controller {
 
     // For full size, explicitly set full screen styles
     if (config.size === 'full' || config.isMaximized) {
-      // 최소화된 모달이 있는지 store에서 확인하여 taskbar 높이 계산
+      const isMobile = window.innerWidth <= 768
       const minimizedGroups = modalStore.getMinimizedModalGroups()
       const hasMinimizedModals = minimizedGroups.length > 0
-      // CSS 변수에서 taskbar 높이 가져오기 (기본값 48px)
       const taskbarHeight = hasMinimizedModals
         ? parseInt(getComputedStyle(document.documentElement).getPropertyValue('--rmm-taskbar-height') || '48', 10)
         : 0
 
-      // CSS !important를 덮어쓰기 위해 setProperty 사용
-      modal.style.setProperty('width', '100%', 'important')
-      modal.style.setProperty('min-width', '100%', 'important')
-      modal.style.setProperty('top', '0', 'important')
-      modal.style.setProperty('left', '0', 'important')
-      modal.style.setProperty('right', '0', 'important')
-      modal.style.setProperty('transform', 'none', 'important')
-      modal.style.setProperty('border-radius', '0', 'important')
-      modal.style.setProperty('margin', '0', 'important')
-
-      if (taskbarHeight > 0) {
-        // taskbar가 있으면 그 위까지만 표시
-        modal.style.setProperty('height', `calc(100% - ${taskbarHeight}px)`, 'important')
-        modal.style.setProperty('max-height', `calc(100% - ${taskbarHeight}px)`, 'important')
-        modal.style.setProperty('bottom', `${taskbarHeight}px`, 'important')
+      if (isMobile) {
+        // v1.0.50: 모바일 full 은 뷰포트에 딱 붙이지 않고 8px 여백 + border-radius 유지.
+        // JS inline !important 로 직접 설정해 기존 CSS !important 규칙들과의 specificity 싸움 원천 차단.
+        const bottomTaskbar = taskbarHeight > 0 ? 8 + taskbarHeight : 8
+        modal.style.setProperty('top', '8px', 'important')
+        modal.style.setProperty('left', '8px', 'important')
+        modal.style.setProperty('right', '8px', 'important')
+        modal.style.setProperty('bottom', `${bottomTaskbar}px`, 'important')
+        modal.style.setProperty('width', 'calc(100vw - 16px)', 'important')
+        modal.style.setProperty('min-width', 'calc(100vw - 16px)', 'important')
+        modal.style.setProperty('max-width', 'calc(100vw - 16px)', 'important')
+        modal.style.setProperty('height', `calc(100dvh - ${8 + bottomTaskbar}px)`, 'important')
+        modal.style.setProperty('max-height', `calc(100dvh - ${8 + bottomTaskbar}px)`, 'important')
+        modal.style.setProperty('border-radius', '0', 'important')
+        modal.style.setProperty('transform', 'none', 'important')
+        modal.style.setProperty('margin', '0', 'important')
       } else {
-        modal.style.setProperty('height', '100%', 'important')
-        modal.style.setProperty('max-height', '100%', 'important')
-        modal.style.setProperty('bottom', '0', 'important')
+        // 데스크톱: 기존대로 전체 덮기
+        modal.style.setProperty('width', '100%', 'important')
+        modal.style.setProperty('min-width', '100%', 'important')
+        modal.style.setProperty('top', '0', 'important')
+        modal.style.setProperty('left', '0', 'important')
+        modal.style.setProperty('right', '0', 'important')
+        modal.style.setProperty('transform', 'none', 'important')
+        modal.style.setProperty('border-radius', '0', 'important')
+        modal.style.setProperty('margin', '0', 'important')
+
+        if (taskbarHeight > 0) {
+          modal.style.setProperty('height', `calc(100% - ${taskbarHeight}px)`, 'important')
+          modal.style.setProperty('max-height', `calc(100% - ${taskbarHeight}px)`, 'important')
+          modal.style.setProperty('bottom', `${taskbarHeight}px`, 'important')
+        } else {
+          modal.style.setProperty('height', '100%', 'important')
+          modal.style.setProperty('max-height', '100%', 'important')
+          modal.style.setProperty('bottom', '0', 'important')
+        }
       }
     } else {
       // Reset full-size specific styles

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

@@ -26,27 +26,35 @@ export default class extends Controller {
   static values = {
     modalId: String,
     collapsed: { type: Boolean, default: false },
-    // 모바일+최대화 상태에서의 사이드바 모드: 'expanded' | 'icons' | 'hidden'
-    sidebarMode: { type: String, default: 'icons' },
+    // v1.0.50+: 모바일+최대화 상태에서의 사이드바 모드.
+    // 예전에는 'expanded' | 'icons' | 'hidden' 3단계였으나, v2 스타일에 맞춰
+    // 2단계(expanded | hidden)로 단순화. 기본은 hidden(숨김) + 오픈 직후 peek.
+    sidebarMode: { type: String, default: 'hidden' },
     // 이미 선택된 항목을 다시 클릭했을 때 이벤트 발생 여부
     refreshOnReselect: { type: Boolean, default: true },
   }
 
   connect() {
     this.currentItemId = null
+    this._peekDone = false
 
     // 모바일 사이즈(768px 미만)에서는 기본적으로 사이드바를 닫힌 상태로 시작
     if (window.innerWidth < 768) {
       this.collapsedValue = true
-      // 모바일+최대화 상태 체크하여 초기 모드 설정
-      if (this.isMobileMaximized()) {
-        this.sidebarModeValue = 'icons'
-        this.applySidebarMode()
-      }
     }
 
-    if (this.collapsedValue) {
-      this.element.classList.add('rmm-sidebar-collapsed')
+    // v1.0.50+: 모바일+최대화 가 **현재** 또는 **나중에** 성립하면 peek + hidden 으로 전환.
+    // 섹션 2 처럼 동적 모달이 size-md → size-full 로 뒤늦게 바뀌는 경우도 대응하기 위해
+    // MutationObserver 로 modal 의 class 변경을 감시.
+    this._setupMobilePeekObserver()
+
+    // 첫 렌더 기준으로 이미 peek 조건을 만족하면 즉시 실행, 아니면 fallback
+    // (collapsed 클래스 부여는 peek 발동 여부에 따라 분기)
+    if (!this._runPeekIfReady()) {
+      // 모바일이지만 아직 mobile+maximized 가 아님 → 일반 collapsed 로 시작
+      if (this.collapsedValue) {
+        this.element.classList.add('rmm-sidebar-collapsed')
+      }
     }
 
     // Find initial active item
@@ -67,6 +75,39 @@ export default class extends Controller {
   disconnect() {
     this.element.removeEventListener('rmm-sidebar:toggle', this.handleToggleEvent)
     this.element.removeEventListener('rmm-sidebar:closeOverlay', this.handleCloseOverlayEvent)
+    this._peekObserver?.disconnect()
+  }
+
+  /**
+   * v1.0.50+ 모바일 peek 준비. modal 의 class 가 나중에 rmm-size-full / rmm-active 로
+   * 바뀌는 경우도 대응. 조건 성립 즉시 peek 실행 후 observer 해제.
+   */
+  _setupMobilePeekObserver() {
+    if (window.innerWidth >= 768) return
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+    this._peekObserver = new MutationObserver(() => this._runPeekIfReady())
+    this._peekObserver.observe(modal, { attributes: true, attributeFilter: ['class'] })
+  }
+
+  _runPeekIfReady() {
+    if (this._peekDone) return true
+    if (window.innerWidth >= 768) return false
+    if (!this.isMobileMaximized()) return false
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return false
+    // rmm-active 가 붙은(= 실제로 보이는) 타이밍까지 기다린다
+    if (!modal.classList.contains('rmm-active')) return false
+
+    // 기존 legacy collapsed 클래스 정리 후 hidden 으로 진입
+    this.element.classList.remove('rmm-sidebar-collapsed')
+    this.sidebarModeValue = 'hidden'
+    this.applySidebarMode()
+    this._triggerMobilePeek()
+    this._peekDone = true
+    this._peekObserver?.disconnect()
+    this._peekObserver = null
+    return true
   }
 
   toggle() {
@@ -112,12 +153,14 @@ export default class extends Controller {
   }
 
   /**
-   * 모바일+최대화 상태에서의 3단계 토글
-   * expanded (펼침) → icons (아이콘) → hidden (숨김) → expanded
+   * 모바일+최대화 상태에서의 토글 (v1.0.50+: 2단계로 단순화)
+   * expanded (펼침) ↔ hidden (숨김) — 과거 'icons' 단계 제거
    */
   toggleMobileMaximized() {
-    const modes = ['expanded', 'icons', 'hidden']
-    const currentIndex = modes.indexOf(this.sidebarModeValue)
+    const modes = ['expanded', 'hidden']
+    // 이전 'icons' 값이 어떤 경로로 들어온 경우도 hidden 과 같게 취급
+    const current = this.sidebarModeValue === 'expanded' ? 'expanded' : 'hidden'
+    const currentIndex = modes.indexOf(current)
     const nextIndex = (currentIndex + 1) % modes.length
     this.sidebarModeValue = modes[nextIndex]
 
@@ -183,10 +226,12 @@ export default class extends Controller {
     const hiddenIcon = toggleBtn.querySelector('.rmm-icon-hidden')
 
     if (this.isMobileMaximized()) {
-      // 모바일+최대화: 3단계 아이콘
-      if (collapseIcon) collapseIcon.style.display = this.sidebarModeValue === 'expanded' ? 'block' : 'none'
-      if (expandIcon) expandIcon.style.display = this.sidebarModeValue === 'icons' ? 'block' : 'none'
-      if (hiddenIcon) hiddenIcon.style.display = this.sidebarModeValue === 'hidden' ? 'block' : 'none'
+      // v1.0.50+: 모바일+최대화도 2단계 아이콘 (expanded ↔ hidden).
+      // expanded 시 접힘 아이콘(◂), hidden 시 펼침 아이콘(☰/▸)
+      const isExpanded = this.sidebarModeValue === 'expanded'
+      if (collapseIcon) collapseIcon.style.display = isExpanded ? 'block' : 'none'
+      if (expandIcon) expandIcon.style.display = isExpanded ? 'none' : 'block'
+      if (hiddenIcon) hiddenIcon.style.display = 'none'
     } else {
       // 일반: 2단계 아이콘
       if (collapseIcon) collapseIcon.style.display = this.collapsedValue ? 'none' : 'block'
@@ -195,6 +240,31 @@ export default class extends Controller {
     }
   }
 
+  /**
+   * v1.0.50+: 모바일+최대화 모달이 열릴 때 사이드바가 있다는 힌트로
+   * 얇은 drawer(아이콘만 보이는 폭)가 한 번 미끄러졌다 사라지는 peek 애니메이션.
+   * CSS @keyframes rmm-sidebar-peek 이 실제 모션을 담당하고, 여기서는 data-peek
+   * 속성 토글 + animationend 후 자동 제거만 처리.
+   */
+  _triggerMobilePeek() {
+    // 이미 peek 중이면 중복 트리거 방지
+    if (this.element.dataset.peek === 'true') return
+    requestAnimationFrame(() => {
+      this.element.dataset.peek = 'true'
+      const onEnd = (ev) => {
+        if (ev.animationName && ev.animationName.indexOf('rmm-sidebar-peek') !== -1) {
+          delete this.element.dataset.peek
+          this.element.removeEventListener('animationend', onEnd)
+        }
+      }
+      this.element.addEventListener('animationend', onEnd)
+      // 안전장치: 1.5초 후에도 속성이 남아있으면 강제 제거 (reduced-motion 등)
+      setTimeout(() => {
+        if (this.element.dataset.peek === 'true') delete this.element.dataset.peek
+      }, 1500)
+    })
+  }
+
   selectItem(e) {
     e.preventDefault()
     e.stopPropagation()
@@ -242,13 +312,11 @@ export default class extends Controller {
     // On mobile, close sidebar after selection
     if (window.innerWidth < 768) {
       if (this.isMobileMaximized()) {
-        // expanded 상태에서 클릭하면 hidden으로 전환
-        // icons 상태에서 클릭하면 icons 상태 유지
+        // v1.0.50+: 2상태 — expanded 에서 클릭 시 hidden 으로 닫힘 (icons 단계 제거됨)
         if (this.sidebarModeValue === 'expanded') {
           this.sidebarModeValue = 'hidden'
           this.applySidebarMode()
         }
-        // icons 상태면 그대로 유지
       } else {
         this.collapsedValue = true
         this.element.classList.add('rmm-sidebar-collapsed')

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

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { setModalFooter } from "rails_modal_manager/footer_renderer"
 
 /**
  * Rails Modal Manager - Submenu Controller
@@ -50,6 +51,9 @@ export default class extends Controller {
     const activeItem = this.element.querySelector('.rmm-submenu-item.rmm-active')
     if (activeItem) {
       this.currentItemId = activeItem.dataset.itemId
+      // v1.0.50+: 초기 active 탭에 탭별 footer 가 지정돼 있으면 바로 반영
+      // (모달 레벨 footer_buttons 로 렌더된 기본값을 override)
+      this._applyFooterFromItem(activeItem)
     }
   }
 
@@ -94,6 +98,10 @@ export default class extends Controller {
       this.switchPanel(item)
     }
 
+    // v1.0.50+: opt-in 탭별 footer — data-rmm-footer 가 있을 때만 교체.
+    // 없으면 기존 정적 footer 가 그대로 유지됨 (기존 동작 보존).
+    this._applyFooterFromItem(item)
+
     // Dispatch event
     this.dispatch('itemSelect', {
       detail: {
@@ -105,6 +113,25 @@ export default class extends Controller {
     })
   }
 
+  /**
+   * submenu item 의 data-rmm-footer JSON 을 읽어 해당 탭의 footer 로 교체.
+   * 속성이 없으면 아무 일도 안 함 (opt-in).
+   */
+  _applyFooterFromItem(item) {
+    const raw = item.dataset.rmmFooter
+    if (!raw) return
+    let payload
+    try {
+      payload = JSON.parse(raw)
+    } catch (err) {
+      console.warn('[rmm-submenu] invalid data-rmm-footer JSON:', err)
+      return
+    }
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+    setModalFooter(modal, payload.buttons || [], payload.message || null)
+  }
+
   /**
    * Force reload the active submenu item's content
    * Called by sidebar controller when switching sidebar items
@@ -120,6 +147,9 @@ export default class extends Controller {
         this.switchPanel(activeItem)
       }
 
+      // v1.0.50+: sidebar 전환으로 active submenu 세트가 바뀐 경우에도 footer 동기화
+      this._applyFooterFromItem(activeItem)
+
       // Dispatch event so custom controllers can also handle the content load
       this.dispatch('itemSelect', {
         detail: {

data/app/javascript/rails_modal_manager/footer_renderer.js

@@ -0,0 +1,74 @@
+/**
+ * Rails Modal Manager — Footer Renderer (v1.0.50+)
+ *
+ * 탭별로 모달 푸터(하단 버튼 영역)를 동적으로 교체하기 위한 헬퍼.
+ * opt-in: submenu item 에 `data-rmm-footer='{"buttons":[...],"message":"..."}'`
+ * 속성이 있을 때만 submenu controller 가 이 함수를 호출.
+ *
+ * DOM 구조는 _footer.html.erb 와 완전히 동일하게 생성해 기존 CSS 가 그대로 먹음.
+ * 모달에 .rmm-footer 요소가 없으면 아무것도 하지 않음(no-op).
+ */
+
+function escapeHtml(str) {
+  if (str == null) return ""
+  return String(str)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+}
+
+function renderButtonHtml(btn) {
+  const classes = ["rmm-btn", `rmm-btn-${btn.variant || "secondary"}`]
+  if (btn.loading) classes.push("rmm-btn-loading")
+
+  const attrs = [`class="${classes.join(" ")}"`]
+  if (btn.disabled || btn.loading) attrs.push("disabled")
+  if (btn.action) attrs.push(`data-action="${escapeHtml(btn.action)}"`)
+  if (btn.id) attrs.push(`data-button-id="${escapeHtml(btn.id)}"`)
+
+  return `<button type="button" ${attrs.join(" ")}>${escapeHtml(btn.label || "")}</button>`
+}
+
+/**
+ * 모달의 footer 영역을 주어진 buttons / message 로 교체.
+ *
+ * @param {HTMLElement|string} modal - `.rmm-modal` 엘리먼트 또는 modal id
+ * @param {Array<Object>} buttons - [{id, label, variant, disabled, loading, action}]
+ * @param {string} [message] - footer 좌측 메시지 (optional)
+ * @returns {boolean} 실제로 교체되었는지
+ */
+export function setModalFooter(modal, buttons = [], message = null) {
+  const modalEl = typeof modal === "string" ? document.getElementById(modal) : modal
+  if (!modalEl) return false
+
+  const footer = modalEl.querySelector(".rmm-footer")
+  if (!footer) return false
+
+  const left = footer.querySelector(".rmm-footer-left")
+  const right = footer.querySelector(".rmm-footer-right")
+  if (!left || !right) return false
+
+  // 좌측 메시지 영역
+  if (message && String(message).length > 0) {
+    left.innerHTML = `<span class="rmm-footer-message">${escapeHtml(message)}</span>`
+  } else {
+    left.innerHTML = ""
+  }
+
+  // 우측 버튼 영역
+  right.innerHTML = (buttons || []).map(renderButtonHtml).join("")
+
+  // 교체 이벤트 dispatch (앱에서 후처리 원할 경우용)
+  footer.dispatchEvent(
+    new CustomEvent("rmm-footer:updated", {
+      bubbles: true,
+      detail: { modalId: modalEl.id, buttons, message }
+    })
+  )
+
+  return true
+}
+
+export default setModalFooter

data/app/javascript/rails_modal_manager/index.js

@@ -13,10 +13,13 @@ export const VERSION = "1.0.34"
 // Import core modules for internal use
 import modalStore, { MODAL_CONSTANTS, SIZE_CONFIG, POSITION_CONFIG, CASCADE_OFFSET, modalSizeStorage, modalUtils } from "rails_modal_manager/modal_store"
 import historyStackManager from "rails_modal_manager/history_stack_manager"
+import { setModalFooter } from "rails_modal_manager/footer_renderer"
 
 // Re-export core modules
 export { modalStore, MODAL_CONSTANTS, SIZE_CONFIG, POSITION_CONFIG, CASCADE_OFFSET, modalSizeStorage, modalUtils }
 export { historyStackManager }
+// v1.0.50+: 탭별 footer 교체 API (opt-in). 외부에서 수동 제어 시에도 사용 가능.
+export { setModalFooter }
 
 // Stimulus controllers
 export { default as RmmModalController } from "rails_modal_manager/controllers/rmm_modal_controller"

data/app/views/rails_modal_manager/_submenu.html.erb

@@ -33,6 +33,25 @@
         item_classes << "rmm-active" if item[:active]
         item_classes << "rmm-disabled" if item[:disabled]
       %>
+      <%
+        # v1.0.50+: opt-in 탭별 footer — footer_buttons/footer_message 가 있으면
+        # JSON 으로 직렬화해 data-rmm-footer 속성에 실어 보냄. submenu controller 가
+        # selectItem 시 이 값을 읽어 setModalFooter() 로 footer 를 교체.
+        submenu_footer_payload = if item[:footer_buttons].present? || item[:footer_message].present?
+          {
+            buttons: (item[:footer_buttons] || []).map { |b|
+              {
+                id: b[:id], label: b[:label],
+                variant: b[:variant] || "secondary",
+                disabled: b[:disabled] || false,
+                loading: b[:loading] || false,
+                action: b[:action]
+              }.compact
+            },
+            message: item[:footer_message]
+          }.to_json
+        end
+      %>
       <button type="button"
               class="<%= item_classes.join(' ') %>"
               data-item-id="<%= item[:id] %>"
@@ -40,6 +59,7 @@
               <% if item[:panel_id].present? %>data-panel-id="<%= item[:panel_id] %>"<% end %>
               <% if item[:url].present? %>data-url="<%= item[:url] %>"<% end %>
               <% if item[:title].present? %>title="<%= item[:title] %>"<% end %>
+              <% if submenu_footer_payload %>data-rmm-footer="<%= submenu_footer_payload %>"<% end %>
               data-action="click->rmm-submenu#selectItem"
               <% if item[:disabled] %>disabled<% end %>>
         <% if item[:icon_svg].present? %>

data/config/importmap.rb

@@ -6,6 +6,7 @@
 pin "rails_modal_manager", to: "rails_modal_manager/index.js"
 pin "rails_modal_manager/modal_store", to: "rails_modal_manager/modal_store.js"
 pin "rails_modal_manager/history_stack_manager", to: "rails_modal_manager/history_stack_manager.js"
+pin "rails_modal_manager/footer_renderer", to: "rails_modal_manager/footer_renderer.js"
 pin "rails_modal_manager/controllers/rmm_modal_controller", to: "rails_modal_manager/controllers/rmm_modal_controller.js"
 pin "rails_modal_manager/controllers/rmm_overlay_controller", to: "rails_modal_manager/controllers/rmm_overlay_controller.js"
 pin "rails_modal_manager/controllers/rmm_header_controller", to: "rails_modal_manager/controllers/rmm_header_controller.js"

data/lib/rails_modal_manager/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.48
+  version: 1.0.50
 platform: ruby
 authors:
 - reshacs
@@ -56,6 +56,7 @@ files:
 - app/javascript/rails_modal_manager/controllers/rmm_sidebar_controller.js
 - app/javascript/rails_modal_manager/controllers/rmm_submenu_controller.js
 - app/javascript/rails_modal_manager/controllers/rmm_taskbar_controller.js
+- app/javascript/rails_modal_manager/footer_renderer.js
 - app/javascript/rails_modal_manager/history_stack_manager.js
 - app/javascript/rails_modal_manager/index.js
 - app/javascript/rails_modal_manager/modal_store.js