share job

frontend/src/components/layout/Breadcrumb.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useAuthStore } from '@/lib/store/authStore'
+import { buildTree, type TreeNode } from './Sidebar'
+
+function findTrail(nodes: TreeNode[], targetMenuNo: string | null): TreeNode[] {
+  if (!targetMenuNo) return []
+  for (const node of nodes) {
+    if (node.menuNo === targetMenuNo) return [node]
+    const childTrail = findTrail(node.children, targetMenuNo)
+    if (childTrail.length > 0) return [node, ...childTrail]
+  }
+  return []
+}
+
+export function Breadcrumb() {
+  const menuList      = useAuthStore((s) => s.menuList)
+  const selectedMenuNo = useAuthStore((s) => s.selectedMenuNo)
+
+  const tree  = buildTree(menuList)
+  const trail = findTrail(tree, selectedMenuNo)
+
+  if (trail.length === 0) return null
+
+  const current = trail[trail.length - 1]
+
+  return (
+    <div className="bg-white border-b px-6 py-2.5 flex items-center gap-3 shrink-0">
+      <h1 className="text-sm font-semibold text-gray-800">{current.menuNm}</h1>
+      {trail.length > 1 && (
+        <>
+          <span className="text-gray-200">|</span>
+          <nav className="flex items-center gap-1 text-xs text-gray-400">
+            {trail.map((item, i) => (
+              <span key={item.menuNo} className="flex items-center gap-1">
+                {i > 0 && <span className="text-gray-300">›</span>}
+                <span className={i === trail.length - 1 ? 'text-blue-600 font-medium' : ''}>
+                  {item.menuNm}
+                </span>
+              </span>
+            ))}
+          </nav>
+        </>
+      )}
+    </div>
+  )
+}