Menu Store (useMenu)

import { useMenu } from "@vortex/ui-icignal"

// 필요한 값만 구독 (권장)
const tabs = useMenu((state) => state.tabs)
const push = useMenu((state) => state.push)
 
// 여러 값 동시 구독
const { tabs, push, pop } = useMenu((state) => ({
  tabs: state.tabs,
  push: state.push,
  pop: state.pop,
}))

import { useMenu, type MenuItem } from "@vortex/ui-icignal"
 
const menuItems: MenuItem[] = [
  {
    type: "link",
    title: "대시보드",
    url: "/dashboard",
    items: [
      { title: "개요", url: "/dashboard/overview" },
      { title: "분석", url: "/dashboard/analytics" },
    ],
  },
  {
    type: "page",
    title: "사용자 관리",
    url: "/users",
  },
]
 
function AppLayout() {
  const setMenuItems = useMenu((state) => state.setMenuItems)
 
  useEffect(() => {
    setMenuItems(menuItems)
  }, [setMenuItems])
 
  return <>{/* ... */}</>
}

const push = useMenu((state) => state.push)
 
// 탭 추가 (이미 열린 URL이면 무시)
push({ title: "대시보드", url: "/dashboard" })

const pop = useMenu((state) => state.pop)
 
// 특정 인덱스의 탭 닫기
pop(2)
 
// 마지막 탭 닫기 (인덱스 생략)
pop()

const closeOthers = useMenu((state) => state.closeOthers)
 
// 인덱스 1번 탭만 남기고 나머지 닫기
closeOthers(1)

const closeAll = useMenu((state) => state.closeAll)
 
closeAll()

const setMaxTabs = useMenu((state) => state.setMaxTabs)
 
// 최대 15개 탭까지 허용 (기본값: 10)
setMaxTabs(15)

const findByUrl = useMenu((state) => state.findByUrl)
 
const menuItem = findByUrl("/dashboard/analytics")
// → { title: "분석", url: "/dashboard/analytics" } 또는 undefined

const searchQuery = useMenu((state) => state.searchQuery)
const setSearchQuery = useMenu((state) => state.setSearchQuery)
 
<Input
  value={searchQuery}
  onChange={(e) => setSearchQuery(e.target.value)}
  placeholder="메뉴 검색..."
/>

import { useMenu } from "@vortex/ui-icignal"
import { Breadcrumb } from "@vortex/ui-icignal"
 
function AppBreadcrumb() {
  const getBreadcrumbItems = useMenu((state) => state.getBreadcrumbItems)
  const pathname = usePathname()
 
  const items = getBreadcrumbItems(pathname)
  // 예: pathname="/dashboard/analytics"
  // → [
  //     { label: "대시보드", href: "/dashboard", type: "link" },
  //     { label: "분석", href: "/dashboard/analytics", type: "page" },
  //   ]
 
  return <Breadcrumb items={items} />
}

const addBookmark = useMenu((state) => state.addBookmark)
const removeBookmark = useMenu((state) => state.removeBookmark)
 
// 북마크 추가
addBookmark({ title: "대시보드", url: "/dashboard" })
 
// 북마크 제거
removeBookmark("/dashboard")

const toggleBookmark = useMenu((state) => state.toggleBookmark)
 
// 있으면 제거, 없으면 추가
toggleBookmark({ title: "대시보드", url: "/dashboard" })

const toggleBookmarkByUrl = useMenu((state) => state.toggleBookmarkByUrl)
 
// 메뉴에서 자동으로 title을 찾아서 토글
toggleBookmarkByUrl("/dashboard")

const isBookmarked = useMenu((state) => state.isBookmarked)
 
<Button
  variant={isBookmarked("/dashboard") ? "filled" : "outlined"}
  onClick={() => toggleBookmarkByUrl("/dashboard")}
>
  {isBookmarked("/dashboard") ? "★" : "☆"}
</Button>

import { CachedOutlet } from "@vortex/ui-icignal"
 
// 라우트 맵 기반 (Next.js)
const routes = {
  "/dashboard": DashboardPage,
  "/users": UsersPage,
  "/settings": SettingsPage,
}
 
function MainContent() {
  return <CachedOutlet routes={routes} fallback={NotFoundPage} />
}

import { useMenu, TabNavigation } from "@vortex/ui-icignal"
import { useRouter, usePathname } from "next/navigation"
 
function AppTabs() {
  const tabs = useMenu((state) => state.tabs)
  const pop = useMenu((state) => state.pop)
  const router = useRouter()
  const pathname = usePathname()
 
  const tabItems = tabs.map((tab) => ({
    value: tab.url,
    label: tab.title,
  }))
 
  return (
    <TabNavigation
      items={tabItems}
      value={[pathname]}
      onValueChange={([url]) => router.push(url)}
      closable
      onClose={(url) => {
        const index = tabs.findIndex((t) => t.url === url)
        if (index !== -1) pop(index)
      }}
    />
  )
}