Menu

계층 구조의 메뉴 데이터를 폴더/파일 아이콘과 함께 트리 형태로 표시하는 컴포넌트

개요

Menu는 계층 구조의 메뉴 데이터를 폴더/파일 아이콘이 포함된 트리로 표시하며, 키워드 검색과 헤더 툴바 액션 버튼을 내장한 메뉴 탐색 컴포넌트입니다. 전체 항목을 기본 확장 상태로 렌더링합니다.

주요 특징

• ✅ 트리 메뉴: 계층 데이터를 폴더/파일 아이콘과 함께 표시, 기본 전체 확장
• ✅ 키워드 필터링: 검색 입력란 내장, 대소문자 구분 없이 라벨 매칭
• ✅ 헤더 툴바: title + toolbarActions로 제목과 액션 버튼 표시
• ✅ 유연한 필드 매핑: labelKey / idKey / childrenKey로 데이터 필드명 지정
• ✅ 노드 클릭 콜백: onNodeClick에 원본 데이터 항목 전달
• ✅ 표시 제어: visible prop으로 전체 표시/숨김, emptyText로 빈 상태 메시지 지정

기본 사용

items에 계층 데이터를 전달합니다. 검색 입력란이 기본 포함되며, 키워드를 입력하면 일치하는 항목만 표시됩니다.

import { Menu } from "@vortex/ui-cals"
 
const menuItems = [
  {
    id: "1",
    label: "업무 관리",
    children: [
      { id: "1-1", label: "공지사항" },
      { id: "1-2", label: "일정 관리" },
    ],
  },
  {
    id: "2",
    label: "시스템",
    children: [{ id: "2-1", label: "사용자 관리" }],
  },
]
 
<Menu items={menuItems} />

헤더 제목 + 툴바 액션

title로 헤더 제목을, toolbarActions로 액션 버튼을 표시합니다.

<Menu
  title="메뉴 관리"
  items={menuItems}
  toolbarActions={[
    { label: "추가", icon: <Plus />, onClick: handleAdd },
    { label: "새로고침", icon: <RefreshCw />, onClick: handleRefresh },
  ]}
/>

노드 클릭 이벤트

onNodeClick 콜백에 클릭한 노드의 원본 데이터 항목이 전달됩니다.

const [selected, setSelected] = useState("없음")
 
<Menu
  items={menuItems}
  onNodeClick={(node) => setSelected(String(node.label))}
/>

커스텀 필드명

데이터의 필드명이 기본값(id/label/children)과 다르면 idKey, labelKey, childrenKey로 매핑합니다.

<Menu
  items={[
    {
      menuId: "m1",
      menuName: "대시보드",
      subMenus: [{ menuId: "m1-1", menuName: "현황판" }],
    },
  ]}
  idKey="menuId"
  labelKey="menuName"
  childrenKey="subMenus"
/>

빈 상태

데이터가 없거나 검색 결과가 없으면 emptyText 메시지를 표시합니다.

<Menu items={[]} emptyText="등록된 메뉴가 없습니다" />

API Reference

Props

MenuToolbarAction

Events

접근성

권장 사항

• ✅ 툴바 버튼에 label 기반 title 속성이 자동 적용됨
• ✅ 트리 컨테이너에 명확한 제목(title prop)을 제공해 영역을 식별할 수 있게 하기
• ❌ 깊이가 깊은 트리를 좁은 너비에 배치하지 않기 (들여쓰기로 라벨이 잘릴 수 있음)

관련 컴포넌트

• Tree: 계층 구조 데이터 표시 트리 컴포넌트
• ObjectExplorer: 객체 목록 트리 탐색 컴포넌트
• ContextMenu: 좌표 기반 컨텍스트 메뉴