rails_modal_manager 1.0.9 → 1.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e9713f9fdbf22102fe25d256b8f63a9bc67f9bb9d72580a9299e6ea4288d39e
-  data.tar.gz: 8b5f42ba84a0e0c3afe0bbbbf6ccdebe026b8b0b17f466e3566e134aead82273
+  metadata.gz: 02b2719477c30526ae7b96cff7a9f494855477568ec11279bb48c6009370b3f7
+  data.tar.gz: d88ca69cd83c2db76f2b5c9132bb652aeacdddbcb2afdc69189b9688e35081ed
 SHA512:
-  metadata.gz: 933aad7d32e4ed154a72462879794128cfc93a517221165e64a7fdd91a7ffb49954dd64844088fe2ea27d2fd96a908a1a8c6dd536e6e3ec2c4a987c7cbba7fa1
-  data.tar.gz: c89c896fff7e3f584d304f6e803ab0a7cf7abec70709a39ca23869689b67ac7a6ae49d9c561d0389d3ea5f47be7b9b53fb6e8a5b1dad4a24a50df4ae8a95db1a
+  metadata.gz: f82434fb170f66af13e95d040dfaf4c381360c345d6cbf55e70022624733e808e2aa422eb9d4dcdd862428578f5cc217b232b5d7ecf2145493671c8b6cc02939
+  data.tar.gz: 5e1c4d5fe59746d264a1a99ae443f383943a30e31aa660eda90527eeff99cd81f60e120cc46eee5cf633e92c58d32e7a267cc52374a07623268fd54ebf562e11

data/README.md

@@ -3,7 +3,7 @@
 Rails 애플리케이션을 위한 고급 모달 매니저입니다.
 `@reshacs/react-modal-manager`에서 포팅되었습니다.
 
-**Version:** 1.0.6
+**Version:** 1.0.10
 
 ---
 
@@ -47,7 +47,7 @@ bundle install
 
 ```javascript
 import { Application } from "@hotwired/stimulus"
-import { registerRMMControllers, initHistoryStack } from "rails_modal_manager"
+import { registerRMMControllers, initHistoryStack, initGlobalClickHandler } from "rails_modal_manager"
 
 const application = Application.start()
 
@@ -56,6 +56,9 @@ registerRMMControllers(application)
 
 // 히스토리 스택 초기화 (브라우저 뒤로가기 지원)
 initHistoryStack()
+
+// 글로벌 클릭 핸들러 초기화 (data-rmm-modal-id 버튼 지원)
+initGlobalClickHandler()
 ```
 
 ### 4. CSS 설정
@@ -180,7 +183,7 @@ closeModal('my-modal')
 |------|------|--------|------|
 | `modal-id` | String | - | 모달 고유 ID (필수) |
 | `title` | String | "Modal" | 모달 제목 |
-| `size` | String | "md" | 크기 (xs, sm, md, lg, xl, full) |
+| `size` | String | "md" | 크기 (fit, xss, xs, sm, md, lg, xl, full) |
 | `position` | String | "center" | 위치 (center, top, bottom, top-left, top-right, bottom-left, bottom-right) |
 | `height` | String | "auto" | 높이 (auto, 300px, 50vh 등) |
 | `draggable` | Boolean | false | 드래그 가능 여부 |
@@ -202,14 +205,16 @@ closeModal('my-modal')
 
 ### 크기 (Size)
 
-| 값 | 너비 | 최소 너비 |
-|----|------|----------|
-| xs | 30% | 280px |
-| sm | 40% | 360px |
-| md | 50% | 480px |
-| lg | 60% | 600px |
-| xl | 70% | 720px |
-| full | 100% | 100% |
+| 값 | 너비 | 최소 너비 | 설명 |
+|----|------|----------|------|
+| fit | auto | 150px | 콘텐츠에 맞춰 자동 조절 |
+| xss | 20% | 200px | 매우 작은 크기 |
+| xs | 30% | 280px | 작은 크기 |
+| sm | 40% | 360px | 중소 크기 |
+| md | 50% | 480px | 중간 크기 (기본값) |
+| lg | 60% | 600px | 큰 크기 |
+| xl | 70% | 720px | 매우 큰 크기 |
+| full | 100% | 100% | 전체 화면 |
 
 ---
 

data/app/assets/stylesheets/rails_modal_manager.css

@@ -41,13 +41,13 @@
   --rmm-sidebar-item-active-text: #3b82f6;
 
   /* Submenu */
-  --rmm-submenu-bg: #f8fafc;
-  --rmm-submenu-border: rgba(0, 0, 0, 0.1);
-  --rmm-submenu-height: 48px;
+  --rmm-submenu-bg: #f1f5f9;
+  --rmm-submenu-container-bg: #ffffff;
+  --rmm-submenu-height: 56px;
   --rmm-submenu-item-text: #64748b;
-  --rmm-submenu-item-hover: rgba(0, 0, 0, 0.05);
-  --rmm-submenu-item-active-bg: #ffffff;
-  --rmm-submenu-item-active-text: #3b82f6;
+  --rmm-submenu-item-hover-bg: rgba(0, 0, 0, 0.04);
+  --rmm-submenu-item-active-bg: #3b82f6;
+  --rmm-submenu-item-active-text: #ffffff;
 
   /* Content */
   --rmm-content-bg: #ffffff;
@@ -121,11 +121,12 @@
   --rmm-sidebar-item-hover: rgba(255, 255, 255, 0.05);
   --rmm-sidebar-item-active-bg: rgba(59, 130, 246, 0.2);
 
-  --rmm-submenu-bg: #0f172a;
-  --rmm-submenu-border: rgba(255, 255, 255, 0.1);
+  --rmm-submenu-bg: #1e293b;
+  --rmm-submenu-container-bg: #0f172a;
   --rmm-submenu-item-text: #94a3b8;
-  --rmm-submenu-item-hover: rgba(255, 255, 255, 0.05);
-  --rmm-submenu-item-active-bg: #1e293b;
+  --rmm-submenu-item-hover-bg: rgba(255, 255, 255, 0.08);
+  --rmm-submenu-item-active-bg: #3b82f6;
+  --rmm-submenu-item-active-text: #ffffff;
 
   --rmm-content-bg: #1e293b;
   --rmm-content-text: #f1f5f9;
@@ -201,11 +202,12 @@
   transform: scale(1) translateY(0);
 }
 
-/* Minimized state with fade animation */
+/* Minimized state with fade animation - animates to bottom-left */
 .rmm-modal.rmm-minimized {
   opacity: 0 !important;
   visibility: hidden !important;
-  transform: scale(0.8) translateY(20px) !important;
+  transform: scale(0.2) !important;
+  transform-origin: 0% 100% !important;
   pointer-events: none !important;
 }
 
@@ -217,6 +219,8 @@
 }
 
 /* Size variants */
+.rmm-modal.rmm-size-fit { width: auto; min-width: 150px; }
+.rmm-modal.rmm-size-xss { width: 20%; min-width: 200px; }
 .rmm-modal.rmm-size-xs { width: 30%; min-width: 280px; }
 .rmm-modal.rmm-size-sm { width: 40%; min-width: 360px; }
 .rmm-modal.rmm-size-md { width: 50%; min-width: 480px; }
@@ -685,6 +689,7 @@
     transition: opacity var(--rmm-animation-duration) var(--rmm-animation-timing),
                 visibility var(--rmm-animation-duration) var(--rmm-animation-timing);
     z-index: 9;
+    cursor: pointer;
   }
 
   .rmm-sidebar:not(.rmm-sidebar-collapsed) ~ .rmm-sidebar-overlay {
@@ -694,20 +699,29 @@
 }
 
 /* ============================================
-   Modal Submenu
+   Modal Submenu (Pill/Tab Style)
    ============================================ */
 .rmm-submenu {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 16px;
-  height: var(--rmm-submenu-height);
-  background: var(--rmm-submenu-bg);
-  border-bottom: 1px solid var(--rmm-submenu-border);
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 8px 12px;
+  min-height: var(--rmm-submenu-height);
+  background: var(--rmm-submenu-container-bg);
   overflow-x: auto;
   flex-shrink: 0;
 }
 
+.rmm-submenu-inner {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  background: var(--rmm-submenu-bg);
+  border-radius: 8px;
+}
+
 .rmm-submenu::-webkit-scrollbar {
   height: 4px;
 }
@@ -724,9 +738,10 @@
 .rmm-submenu-item {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  padding: 8px 12px;
-  font-size: 13px;
+  padding: 8px 16px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--rmm-submenu-item-text);
   background: transparent;
@@ -734,16 +749,23 @@
   border-radius: 6px;
   cursor: pointer;
   white-space: nowrap;
-  transition: background-color 0.15s, color 0.15s;
+  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.rmm-submenu-item:hover {
-  background: var(--rmm-submenu-item-hover);
+.rmm-submenu-item:hover:not(.rmm-active):not(.rmm-disabled) {
+  background: var(--rmm-submenu-item-hover-bg);
+  color: var(--rmm-content-text);
 }
 
 .rmm-submenu-item.rmm-active {
   background: var(--rmm-submenu-item-active-bg);
   color: var(--rmm-submenu-item-active-text);
+  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
+}
+
+.rmm-submenu-item.rmm-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .rmm-submenu-item-icon {
@@ -754,6 +776,90 @@
   height: 16px;
 }
 
+/* ============================================
+   Tab Panels (Submenu Content)
+   ============================================ */
+.rmm-tab-panel {
+  display: none;
+}
+
+.rmm-tab-panel.rmm-tab-panel-active {
+  display: block;
+}
+
+/* AJAX Content Container */
+.rmm-tab-content {
+  min-height: 100px;
+  position: relative;
+}
+
+.rmm-tab-content.rmm-tab-loading {
+  min-height: 150px;
+}
+
+/* Loading State */
+.rmm-tab-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 20px;
+  color: var(--rmm-submenu-item-text);
+  font-size: 14px;
+}
+
+.rmm-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--rmm-modal-border);
+  border-top-color: var(--rmm-btn-primary-bg);
+  border-radius: 50%;
+  animation: rmm-spin 0.8s linear infinite;
+}
+
+/* Error State */
+.rmm-tab-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 40px 20px;
+  color: var(--rmm-btn-danger-bg);
+  font-size: 14px;
+  text-align: center;
+}
+
+/* ============================================
+   Sidebar Panels (Sidebar Content Switching)
+   ============================================ */
+.rmm-sidebar-panel {
+  display: none;
+}
+
+.rmm-sidebar-panel.rmm-sidebar-panel-active {
+  display: block;
+}
+
+/* ============================================
+   Submenu Groups (Sidebar-linked Submenus)
+   ============================================ */
+.rmm-submenu-group {
+  display: none;
+  flex-shrink: 0;
+}
+
+.rmm-submenu-group.rmm-submenu-group-active {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* Wrapper for submenu groups - contains multiple submenus */
+.rmm-submenu-container {
+  display: contents;
+}
+
 /* ============================================
    Modal Footer
    ============================================ */

data/app/helpers/rails_modal_manager/modal_helper.rb

@@ -94,12 +94,18 @@ module RailsModalManager
     # @param items [Array<Hash>] Array of item definitions
     # @return [Array<Hash>] Formatted sidebar items
     #
-    # @example
+    # @example Basic sidebar
     #   rmm_sidebar_items([
     #     { id: "home", label: "Home", icon: "home", active: true },
     #     { id: "settings", label: "Settings", icon: "settings", badge: "3" }
     #   ])
     #
+    # @example With panel and submenu linking
+    #   rmm_sidebar_items([
+    #     { id: "home", label: "Home", panel_id: "home-panel", submenu_id: "home-submenu", active: true },
+    #     { id: "settings", label: "Settings", panel_id: "settings-panel" }
+    #   ])
+    #
     def rmm_sidebar_items(items)
       items.map do |item|
         {
@@ -107,6 +113,8 @@ module RailsModalManager
           label: item[:label],
           icon_svg: item[:icon_svg] || item[:icon],
           badge: item[:badge],
+          panel_id: item[:panel_id],
+          submenu_id: item[:submenu_id],
           active: item[:active] || false,
           disabled: item[:disabled] || false
         }
@@ -137,6 +145,38 @@ module RailsModalManager
       end
     end
 
+    # Helper to create submenu items array
+    #
+    # @param items [Array<Hash>] Array of item definitions
+    # @return [Array<Hash>] Formatted submenu items
+    #
+    # @example Preload mode (with panel_id)
+    #   rmm_submenu_items([
+    #     { id: "tab1", label: "Tab 1", panel_id: "panel-1", active: true },
+    #     { id: "tab2", label: "Tab 2", panel_id: "panel-2" },
+    #     { id: "tab3", label: "Tab 3", panel_id: "panel-3", disabled: true }
+    #   ])
+    #
+    # @example AJAX mode (with url)
+    #   rmm_submenu_items([
+    #     { id: "tab1", label: "Tab 1", url: "/content/tab1", active: true },
+    #     { id: "tab2", label: "Tab 2", url: "/content/tab2" }
+    #   ])
+    #
+    def rmm_submenu_items(items)
+      items.map do |item|
+        {
+          id: item[:id],
+          label: item[:label],
+          icon_svg: item[:icon_svg] || item[:icon],
+          panel_id: item[:panel_id],
+          url: item[:url],
+          active: item[:active] || false,
+          disabled: item[:disabled] || false
+        }
+      end
+    end
+
     # Common icon SVGs for sidebar/submenu
     module Icons
       def self.home

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

@@ -11,10 +11,22 @@ export default class extends Controller {
     defaultSize: { type: String, default: "md" },
   }
 
-  static targets = ["maximizeBtn"]
+  static targets = ["maximizeBtn", "sidebarToggle"]
 
   connect() {
-    // Header controller connected
+    // Listen for sidebar toggled event to update icon
+    this.handleSidebarToggled = this.handleSidebarToggled.bind(this)
+    const modal = this.element.closest('.rmm-modal')
+    if (modal) {
+      modal.addEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
+    }
+  }
+
+  disconnect() {
+    const modal = this.element.closest('.rmm-modal')
+    if (modal) {
+      modal.removeEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
+    }
   }
 
   // Helper method to find the modal element
@@ -123,4 +135,27 @@ export default class extends Controller {
       controller.changeSize(newSize)
     }
   }
+
+  // Toggle sidebar and dispatch event
+  toggleSidebar() {
+    const modal = this.getModalElement()
+    if (!modal) return
+
+    const sidebar = modal.querySelector('.rmm-sidebar')
+    if (sidebar) {
+      sidebar.dispatchEvent(new CustomEvent('rmm-sidebar:toggle', { bubbles: false }))
+    }
+  }
+
+  // Handle sidebar toggled event to update icon
+  handleSidebarToggled(e) {
+    if (!this.hasSidebarToggleTarget) return
+
+    const isCollapsed = e.detail.collapsed
+    const collapseIcon = this.sidebarToggleTarget.querySelector('.rmm-icon-collapse')
+    const expandIcon = this.sidebarToggleTarget.querySelector('.rmm-icon-expand')
+
+    if (collapseIcon) collapseIcon.style.display = isCollapsed ? 'none' : 'block'
+    if (expandIcon) expandIcon.style.display = isCollapsed ? 'block' : 'none'
+  }
 }

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

@@ -369,7 +369,7 @@ export default class extends Controller {
     const posConfig = POSITION_CONFIG[config.position] || POSITION_CONFIG.center
 
     // Update size CSS class
-    const sizeClasses = ['xs', 'sm', 'md', 'lg', 'xl', 'full']
+    const sizeClasses = ['fit', 'xss', 'xs', 'sm', 'md', 'lg', 'xl', 'full']
     sizeClasses.forEach(s => modal.classList.remove(`rmm-size-${s}`))
     modal.classList.add(`rmm-size-${config.size}`)
 

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

@@ -3,6 +3,23 @@ import modalStore from "rails_modal_manager/modal_store"
 
 /**
  * Rails Modal Manager - Sidebar Controller
+ *
+ * Supports content panel switching and submenu integration.
+ *
+ * Usage:
+ * ```html
+ * <div class="rmm-sidebar" data-controller="rmm-sidebar">
+ *   <button data-item-id="home" data-panel-id="home-panel" data-submenu-id="home-submenu">Home</button>
+ *   <button data-item-id="settings" data-panel-id="settings-panel">Settings (no submenu)</button>
+ * </div>
+ *
+ * <!-- Panels -->
+ * <div id="home-panel" class="rmm-sidebar-panel rmm-sidebar-panel-active">...</div>
+ * <div id="settings-panel" class="rmm-sidebar-panel">...</div>
+ *
+ * <!-- Submenus -->
+ * <div id="home-submenu" class="rmm-submenu-group rmm-submenu-group-active">...</div>
+ * ```
  */
 export default class extends Controller {
   static targets = ["nav", "overlay"]
@@ -12,10 +29,18 @@ export default class extends Controller {
   }
 
   connect() {
+    this.currentItemId = null
+
     if (this.collapsedValue) {
       this.element.classList.add('rmm-sidebar-collapsed')
     }
 
+    // Find initial active item
+    const activeItem = this.element.querySelector('.rmm-sidebar-item.rmm-active')
+    if (activeItem) {
+      this.currentItemId = activeItem.dataset.itemId
+    }
+
     // Listen for toggle event from header button
     this.handleToggleEvent = () => this.toggle()
     this.element.addEventListener('rmm-sidebar:toggle', this.handleToggleEvent)
@@ -33,20 +58,43 @@ export default class extends Controller {
     modalStore.updateModal(this.modalIdValue, {
       sidebarOpen: !this.collapsedValue,
     })
+
+    // Dispatch toggled event so toggle button can update its icon
+    const modal = this.element.closest('.rmm-modal')
+    if (modal) {
+      modal.dispatchEvent(new CustomEvent('rmm-sidebar:toggled', {
+        detail: { collapsed: this.collapsedValue },
+        bubbles: false
+      }))
+    }
   }
 
   selectItem(e) {
     e.preventDefault()
     e.stopPropagation()
 
+    const item = e.currentTarget
+    const itemId = item.dataset.itemId
+
+    // Skip if already active
+    if (itemId === this.currentItemId) {
+      return
+    }
+
     // Remove active from all items
-    this.element.querySelectorAll('.rmm-sidebar-item').forEach(item => {
-      item.classList.remove('rmm-active')
+    this.element.querySelectorAll('.rmm-sidebar-item').forEach(el => {
+      el.classList.remove('rmm-active')
     })
 
     // Add active to clicked item
-    const item = e.currentTarget
     item.classList.add('rmm-active')
+    this.currentItemId = itemId
+
+    // Switch content panel
+    this.switchPanel(item)
+
+    // Switch submenu group
+    this.switchSubmenuGroup(item)
 
     // On mobile, close sidebar after selection
     if (window.innerWidth < 768) {
@@ -60,10 +108,75 @@ export default class extends Controller {
         modalId: this.modalIdValue,
         itemId: item.dataset.itemId,
         itemLabel: item.dataset.itemLabel,
+        hasSubmenu: !!item.dataset.submenuId,
       }
     })
   }
 
+  /**
+   * Switch content panel based on sidebar selection
+   */
+  switchPanel(item) {
+    const panelId = item.dataset.panelId
+    if (!panelId) return
+
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+
+    // Hide all sidebar panels
+    modal.querySelectorAll('.rmm-sidebar-panel').forEach(panel => {
+      panel.classList.remove('rmm-sidebar-panel-active')
+    })
+
+    // Show target panel
+    const targetPanel = modal.querySelector(`#${panelId}`)
+    if (targetPanel) {
+      targetPanel.classList.add('rmm-sidebar-panel-active')
+    }
+  }
+
+  /**
+   * Switch submenu group based on sidebar selection
+   */
+  switchSubmenuGroup(item) {
+    const submenuId = item.dataset.submenuId
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+
+    // Hide all submenu groups
+    modal.querySelectorAll('.rmm-submenu-group').forEach(group => {
+      group.classList.remove('rmm-submenu-group-active')
+    })
+
+    // Show target submenu group (if exists)
+    if (submenuId) {
+      const targetSubmenu = modal.querySelector(`#${submenuId}`)
+      if (targetSubmenu) {
+        targetSubmenu.classList.add('rmm-submenu-group-active')
+
+        // Auto-select first submenu item if none is active
+        const submenuController = targetSubmenu.querySelector('[data-controller="rmm-submenu"]')
+        if (submenuController) {
+          const activeSubmenuItem = submenuController.querySelector('.rmm-submenu-item.rmm-active')
+          if (!activeSubmenuItem) {
+            const firstItem = submenuController.querySelector('.rmm-submenu-item')
+            if (firstItem) {
+              firstItem.click()
+            }
+          } else {
+            // Ensure the panel for active submenu item is shown
+            const panelId = activeSubmenuItem.dataset.panelId
+            if (panelId) {
+              modal.querySelectorAll('.rmm-tab-panel').forEach(p => p.classList.remove('rmm-tab-panel-active'))
+              const panel = modal.querySelector(`#${panelId}`)
+              if (panel) panel.classList.add('rmm-tab-panel-active')
+            }
+          }
+        }
+      }
+    }
+  }
+
   // Mobile overlay click
   closeOverlay() {
     this.collapsedValue = true

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

@@ -2,21 +2,80 @@ import { Controller } from "@hotwired/stimulus"
 
 /**
  * Rails Modal Manager - Submenu Controller
+ *
+ * Supports two content loading modes:
+ * 1. preload (default): All panels are pre-rendered, show/hide on tab switch
+ * 2. ajax: Load content from URL when tab is selected
+ *
+ * Usage:
+ *
+ * Preload mode (default):
+ * ```html
+ * <div class="rmm-submenu" data-controller="rmm-submenu">
+ *   <button data-item-id="tab1" data-panel-id="panel-1">Tab 1</button>
+ *   <button data-item-id="tab2" data-panel-id="panel-2">Tab 2</button>
+ * </div>
+ * <div class="rmm-content">
+ *   <div id="panel-1" class="rmm-tab-panel rmm-tab-panel-active">Content 1</div>
+ *   <div id="panel-2" class="rmm-tab-panel">Content 2</div>
+ * </div>
+ * ```
+ *
+ * AJAX mode:
+ * ```html
+ * <div class="rmm-submenu" data-controller="rmm-submenu" data-rmm-submenu-load-mode-value="ajax">
+ *   <button data-item-id="tab1" data-url="/content/tab1">Tab 1</button>
+ *   <button data-item-id="tab2" data-url="/content/tab2">Tab 2</button>
+ * </div>
+ * <div class="rmm-content">
+ *   <div class="rmm-tab-content"></div>
+ * </div>
+ * ```
  */
 export default class extends Controller {
   static values = {
     modalId: String,
+    loadMode: { type: String, default: 'preload' }, // 'preload' or 'ajax'
+    cacheAjax: { type: Boolean, default: true },    // Cache AJAX responses
+  }
+
+  static targets = ['content']
+
+  connect() {
+    this.ajaxCache = new Map()
+    this.currentItemId = null
+
+    // Find initial active item
+    const activeItem = this.element.querySelector('.rmm-submenu-item.rmm-active')
+    if (activeItem) {
+      this.currentItemId = activeItem.dataset.itemId
+    }
   }
 
   selectItem(e) {
+    const item = e.currentTarget
+    const itemId = item.dataset.itemId
+
+    // Skip if already active
+    if (itemId === this.currentItemId) {
+      return
+    }
+
     // Remove active from all items
-    this.element.querySelectorAll('.rmm-submenu-item').forEach(item => {
-      item.classList.remove('rmm-active')
+    this.element.querySelectorAll('.rmm-submenu-item').forEach(el => {
+      el.classList.remove('rmm-active')
     })
 
     // Add active to clicked item
-    const item = e.currentTarget
     item.classList.add('rmm-active')
+    this.currentItemId = itemId
+
+    // Handle content switching based on load mode
+    if (this.loadModeValue === 'ajax') {
+      this.loadAjaxContent(item)
+    } else {
+      this.switchPanel(item)
+    }
 
     // Dispatch event
     this.dispatch('itemSelect', {
@@ -24,7 +83,133 @@ export default class extends Controller {
         modalId: this.modalIdValue,
         itemId: item.dataset.itemId,
         itemLabel: item.dataset.itemLabel,
+        loadMode: this.loadModeValue,
       }
     })
   }
+
+  /**
+   * Preload mode: Switch between pre-rendered panels
+   */
+  switchPanel(item) {
+    const panelId = item.dataset.panelId
+    if (!panelId) return
+
+    // Find the content container (modal's content area)
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+
+    // Hide all panels
+    modal.querySelectorAll('.rmm-tab-panel').forEach(panel => {
+      panel.classList.remove('rmm-tab-panel-active')
+    })
+
+    // Show target panel
+    const targetPanel = modal.querySelector(`#${panelId}`)
+    if (targetPanel) {
+      targetPanel.classList.add('rmm-tab-panel-active')
+    }
+  }
+
+  /**
+   * AJAX mode: Load content from URL
+   */
+  async loadAjaxContent(item) {
+    const url = item.dataset.url
+    if (!url) return
+
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+
+    // Find content container
+    const contentContainer = modal.querySelector('.rmm-tab-content')
+    if (!contentContainer) return
+
+    // Check cache
+    if (this.cacheAjaxValue && this.ajaxCache.has(url)) {
+      contentContainer.innerHTML = this.ajaxCache.get(url)
+      this.dispatch('contentLoaded', {
+        detail: { modalId: this.modalIdValue, itemId: item.dataset.itemId, fromCache: true }
+      })
+      return
+    }
+
+    // Show loading state
+    contentContainer.classList.add('rmm-tab-loading')
+    contentContainer.innerHTML = '<div class="rmm-tab-loader"><div class="rmm-spinner"></div><span>로딩 중...</span></div>'
+
+    try {
+      const response = await fetch(url, {
+        headers: {
+          'Accept': 'text/html',
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const html = await response.text()
+
+      // Cache the response
+      if (this.cacheAjaxValue) {
+        this.ajaxCache.set(url, html)
+      }
+
+      // Update content
+      contentContainer.innerHTML = html
+      contentContainer.classList.remove('rmm-tab-loading')
+
+      this.dispatch('contentLoaded', {
+        detail: { modalId: this.modalIdValue, itemId: item.dataset.itemId, fromCache: false }
+      })
+    } catch (error) {
+      console.error('RMM Submenu: Failed to load content', error)
+      contentContainer.innerHTML = `
+        <div class="rmm-tab-error">
+          <span>컨텐츠를 불러오는데 실패했습니다.</span>
+          <button type="button" class="rmm-btn rmm-btn-secondary" onclick="this.closest('.rmm-modal').querySelector('.rmm-submenu-item.rmm-active').click()">
+            다시 시도
+          </button>
+        </div>
+      `
+      contentContainer.classList.remove('rmm-tab-loading')
+
+      this.dispatch('contentError', {
+        detail: { modalId: this.modalIdValue, itemId: item.dataset.itemId, error: error.message }
+      })
+    }
+  }
+
+  /**
+   * Clear AJAX cache (can be called programmatically)
+   */
+  clearCache() {
+    this.ajaxCache.clear()
+  }
+
+  /**
+   * Clear cache for specific URL
+   */
+  clearCacheFor(url) {
+    this.ajaxCache.delete(url)
+  }
+
+  /**
+   * Reload current tab content (useful for AJAX mode)
+   */
+  reloadCurrentTab() {
+    const activeItem = this.element.querySelector('.rmm-submenu-item.rmm-active')
+    if (activeItem) {
+      if (this.loadModeValue === 'ajax') {
+        // Clear cache for this URL and reload
+        const url = activeItem.dataset.url
+        if (url) {
+          this.ajaxCache.delete(url)
+        }
+        this.loadAjaxContent(activeItem)
+      }
+    }
+  }
 }

data/app/javascript/rails_modal_manager/index.js

@@ -8,7 +8,7 @@
  * @license MIT
  */
 
-export const VERSION = "1.0.3"
+export const VERSION = "1.0.10"
 
 // Import core modules for internal use
 import modalStore, { MODAL_CONSTANTS, SIZE_CONFIG, POSITION_CONFIG, CASCADE_OFFSET, modalSizeStorage, modalUtils } from "rails_modal_manager/modal_store"
@@ -59,6 +59,25 @@ export function initHistoryStack() {
   return historyStackManager.init()
 }
 
+/**
+ * Initialize global click handler for modal open buttons
+ * Handles clicks on elements with data-rmm-modal-id attribute
+ * Should be called once on page load
+ */
+export function initGlobalClickHandler() {
+  document.addEventListener('click', (e) => {
+    // Find the closest element with data-rmm-modal-id
+    const trigger = e.target.closest('[data-rmm-modal-id]')
+    if (!trigger) return
+
+    const modalId = trigger.dataset.rmmModalId
+    if (!modalId) return
+
+    e.preventDefault()
+    openModal(modalId)
+  })
+}
+
 /**
  * Open a modal by ID
  * @param {string} modalId - The modal's ID

data/app/javascript/rails_modal_manager/modal_store.js

@@ -24,6 +24,8 @@ export const CASCADE_OFFSET = { x: 30, y: 30 };
 
 // Size configurations (matching React version)
 export const SIZE_CONFIG = {
+  fit: { width: 'auto', minWidth: '150px', height: 'auto' },
+  xss: { width: '20%', minWidth: '200px', height: 'auto' },
   xs: { width: '30%', minWidth: '280px', height: 'auto' },
   sm: { width: '40%', minWidth: '360px', height: 'auto' },
   md: { width: '50%', minWidth: '480px', height: 'auto' },
@@ -330,8 +332,10 @@ class ModalStore {
   // ============================================
 
   minimizeAll() {
+    const minimizedAt = Date.now();
     Object.keys(this.activeModals).forEach(modalId => {
       this.activeModals[modalId].isMinimized = true;
+      this.activeModals[modalId].minimizedAt = minimizedAt;
     });
     this.updateBodyScroll();
     this.notify();
@@ -443,10 +447,12 @@ class ModalStore {
     const rootId = this.getRootModal(modalId);
     const descendants = this.getAllDescendants(rootId);
     const allModalIds = [rootId, ...descendants];
+    const minimizedAt = Date.now();
 
     allModalIds.forEach(id => {
       if (this.activeModals[id]) {
         this.activeModals[id].isMinimized = true;
+        this.activeModals[id].minimizedAt = minimizedAt;
       }
     });
 
@@ -489,7 +495,7 @@ class ModalStore {
         [rootId, ...descendants].forEach(id => processedModals.add(id));
       });
 
-    return Array.from(minimizedRoots).map(rootId => {
+    const groups = Array.from(minimizedRoots).map(rootId => {
       const descendants = this.getAllDescendants(rootId);
       const allModalIds = [rootId, ...descendants];
 
@@ -499,6 +505,7 @@ class ModalStore {
 
       const leafModalId = sortedByOrder[sortedByOrder.length - 1] || rootId;
       const leafConfig = this.activeModals[leafModalId];
+      const rootConfig = this.activeModals[rootId];
 
       return {
         rootModalId: rootId,
@@ -507,8 +514,12 @@ class ModalStore {
         groupSize: allModalIds.length,
         zIndex: leafConfig?.zIndex || 0,
         modalIds: allModalIds,
+        minimizedAt: rootConfig?.minimizedAt || 0,
       };
     });
+
+    // Sort by minimizedAt timestamp (oldest first)
+    return groups.sort((a, b) => a.minimizedAt - b.minimizedAt);
   }
 }
 

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

@@ -64,12 +64,14 @@
     <% if show_sidebar_toggle %>
       <button type="button"
               class="rmm-header-btn rmm-sidebar-toggle"
-              data-action="click->rmm-sidebar#toggle"
-              title="Toggle Sidebar">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="3" y1="12" x2="21" y2="12"></line>
-          <line x1="3" y1="6" x2="21" y2="6"></line>
-          <line x1="3" y1="18" x2="21" y2="18"></line>
+              data-rmm-header-target="sidebarToggle"
+              data-action="click->rmm-header#toggleSidebar"
+              title="사이드바 토글">
+        <svg class="rmm-icon-collapse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+        <svg class="rmm-icon-expand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+          <polyline points="9 18 15 12 9 6"></polyline>
         </svg>
       </button>
     <% end %>
@@ -77,6 +79,17 @@
   </div>
 
   <div class="rmm-header-controls">
+    <% if minimizable %>
+      <button type="button"
+              class="rmm-header-btn"
+              data-action="click->rmm-header#minimize"
+              title="최소화">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+      </button>
+    <% end %>
+
     <% if show_size_controls %>
       <%# Default size button - restores to original size %>
       <button type="button"
@@ -109,17 +122,6 @@
       </button>
     <% end %>
 
-    <% if minimizable %>
-      <button type="button"
-              class="rmm-header-btn"
-              data-action="click->rmm-header#minimize"
-              title="최소화">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="5" y1="12" x2="19" y2="12"></line>
-        </svg>
-      </button>
-    <% end %>
-
     <%# Custom header buttons %>
     <% header_buttons.each do |btn| %>
       <%

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

@@ -27,6 +27,7 @@
     min_height: Number - Minimum height in px (default: 150)
     max_width: Number - Maximum width in px (default: nil)
     max_height: Number - Maximum height in px (default: nil)
+    height: String - Modal height (default: "auto", e.g. "400px", "50vh")
     animation_duration: Number - Animation duration in ms (default: 200)
     show_header: Boolean - Show header (default: true)
     show_footer: Boolean - Show footer (default: false)
@@ -67,6 +68,7 @@
   min_height ||= 150
   max_width ||= nil
   max_height ||= nil
+  height ||= "auto"
   animation_duration ||= 200
   show_header = true if local_assigns[:show_header].nil?
   show_footer ||= false
@@ -108,6 +110,7 @@
     rmm_modal_prevent_body_scroll_value: prevent_body_scroll,
     rmm_modal_min_width_value: min_width,
     rmm_modal_min_height_value: min_height,
+    rmm_modal_height_value: height,
     rmm_modal_animation_duration_value: animation_duration,
     action: "click->rmm-modal#handleClick"
   }
@@ -158,9 +161,9 @@
         items: sidebar_items,
         collapsed: sidebar_collapsed
       %>
+      <!-- Mobile overlay: closes sidebar when tapped (dispatches toggle event) -->
       <div class="rmm-sidebar-overlay"
-           data-controller="rmm-sidebar"
-           data-action="click->rmm-sidebar#closeOverlay"></div>
+           onclick="const sidebar = this.previousElementSibling; if(sidebar && sidebar.classList.contains('rmm-sidebar') && !sidebar.classList.contains('rmm-sidebar-collapsed')) { sidebar.dispatchEvent(new CustomEvent('rmm-sidebar:toggle', { bubbles: false })); }"></div>
     <% end %>
 
     <div class="rmm-content-wrapper">

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

@@ -3,8 +3,12 @@
 
   Locals:
     modal_id: String - The modal ID
-    items: Array - Menu items [{id:, label:, icon_svg:, badge:, active:, disabled:}]
+    items: Array - Menu items [{id:, label:, icon_svg:, badge:, active:, disabled:, panel_id:, submenu_id:}]
     collapsed: Boolean - Initially collapsed (default: false)
+
+  Item options:
+    - panel_id: ID of the content panel to show when selected
+    - submenu_id: ID of the submenu group to show when selected
 %>
 <%
   modal_id ||= ""
@@ -29,6 +33,8 @@
          class="<%= item_classes.join(' ') %>"
          data-item-id="<%= item[:id] %>"
          data-item-label="<%= item[:label] %>"
+         <% if item[:panel_id].present? %>data-panel-id="<%= item[:panel_id] %>"<% end %>
+         <% if item[:submenu_id].present? %>data-submenu-id="<%= item[:submenu_id] %>"<% end %>
          data-action="click->rmm-sidebar#selectItem"
          <% if item[:disabled] %>aria-disabled="true"<% end %>>
         <% if item[:icon_svg].present? %>

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

@@ -1,33 +1,51 @@
 <%#
-  Rails Modal Manager - Submenu Component
+  Rails Modal Manager - Submenu Component (Pill/Tab Style)
 
   Locals:
     modal_id: String - The modal ID
-    items: Array - Menu items [{id:, label:, icon_svg:, active:, disabled:}]
+    items: Array - Menu items [{id:, label:, icon_svg:, active:, disabled:, panel_id:, url:}]
+    load_mode: String - 'preload' (default) or 'ajax'
+    cache_ajax: Boolean - Cache AJAX responses (default: true)
+
+  Preload mode:
+    - Use panel_id to link to pre-rendered content panels
+    - Panels should have class="rmm-tab-panel" and matching id
+
+  AJAX mode:
+    - Use url to specify content endpoint
+    - Content container should have class="rmm-tab-content"
 %>
 <%
   modal_id ||= ""
   items ||= []
+  load_mode ||= "preload"
+  cache_ajax = cache_ajax.nil? ? true : cache_ajax
 %>
 <div class="rmm-submenu"
      data-controller="rmm-submenu"
-     data-rmm-submenu-modal-id-value="<%= modal_id %>">
-  <% items.each do |item| %>
-    <%
-      item_classes = ["rmm-submenu-item"]
-      item_classes << "rmm-active" if item[:active]
-      item_classes << "rmm-disabled" if item[:disabled]
-    %>
-    <button type="button"
-            class="<%= item_classes.join(' ') %>"
-            data-item-id="<%= item[:id] %>"
-            data-item-label="<%= item[:label] %>"
-            data-action="click->rmm-submenu#selectItem"
-            <% if item[:disabled] %>disabled<% end %>>
-      <% if item[:icon_svg].present? %>
-        <span class="rmm-submenu-item-icon"><%= item[:icon_svg].html_safe %></span>
-      <% end %>
-      <span><%= item[:label] %></span>
-    </button>
-  <% end %>
+     data-rmm-submenu-modal-id-value="<%= modal_id %>"
+     data-rmm-submenu-load-mode-value="<%= load_mode %>"
+     data-rmm-submenu-cache-ajax-value="<%= cache_ajax %>">
+  <div class="rmm-submenu-inner">
+    <% items.each do |item| %>
+      <%
+        item_classes = ["rmm-submenu-item"]
+        item_classes << "rmm-active" if item[:active]
+        item_classes << "rmm-disabled" if item[:disabled]
+      %>
+      <button type="button"
+              class="<%= item_classes.join(' ') %>"
+              data-item-id="<%= item[:id] %>"
+              data-item-label="<%= item[:label] %>"
+              <% if item[:panel_id].present? %>data-panel-id="<%= item[:panel_id] %>"<% end %>
+              <% if item[:url].present? %>data-url="<%= item[:url] %>"<% end %>
+              data-action="click->rmm-submenu#selectItem"
+              <% if item[:disabled] %>disabled<% end %>>
+        <% if item[:icon_svg].present? %>
+          <span class="rmm-submenu-item-icon"><%= item[:icon_svg].html_safe %></span>
+        <% end %>
+        <span><%= item[:label] %></span>
+      </button>
+    <% end %>
+  </div>
 </div>

data/lib/rails_modal_manager/version.rb

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

metadata

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