22

frontend/components/layout/AppLayout.tsx

@@ -622,15 +622,16 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           </div>
         )}
 
-        {/* 펼친 상태의 하위 메뉴 */}
-        {!sidebarCollapsed && menu.hasChildren && isExpanded && (
-          <div className="v5-si-child" style={{ paddingLeft: "1.5rem", display: "flex", flexDirection: "column", gap: "1px" }}>
-            {menu.children?.map((child: any) => (
+        {/* 하위 메뉴 — 항상 렌더링, CSS로 높이 제어 */}
+        {!sidebarCollapsed && menu.hasChildren && (
+          <div className={`v5-submenu ${isExpanded ? "expanded" : ""}`}>
+            {menu.children?.map((child: any, idx: number) => (
               <div
                 key={child.id}
                 draggable={!child.hasChildren}
                 onDragStart={(e) => handleMenuDragStart(e, child)}
-                className={`v5-si ${isMenuActive(child) ? "on" : ""}`}
+                className={`v5-si v5-sub-item ${isMenuActive(child) ? "on" : ""}`}
+                style={{ transitionDelay: isExpanded ? `${idx * 30}ms` : "0ms" }}
                 onClick={() => handleMenuClick(child)}
               >
                 <span className="ic">{child.icon}</span>