@j-solution/components 1.6.1 → 1.8.0

package/components/organisms/JHeader.vue.js

@@ -1,45 +1,45 @@
-import { defineComponent as ue, computed as T, ref as N, onMounted as me, onUnmounted as fe, createElementBlock as o, openBlock as t, normalizeClass as w, unref as C, createElementVNode as i, createBlock as v, createCommentVNode as c, withCtx as u, createVNode as g, toDisplayString as f, Fragment as x, renderList as E, createTextVNode as he, renderSlot as ve } from "vue";
-import k from "../atoms/JIcon.vue.js";
-import ge from "../atoms/JAvatar.vue.js";
+import { defineComponent as me, computed as _, ref as B, onMounted as fe, onUnmounted as he, createElementBlock as o, openBlock as t, normalizeClass as w, unref as C, createElementVNode as i, createBlock as g, createCommentVNode as c, withCtx as u, createVNode as k, toDisplayString as h, Fragment as y, renderList as N, createTextVNode as ve, renderSlot as ge } from "vue";
+import b from "../atoms/JIcon.vue.js";
+import ke from "../atoms/JAvatar.vue.js";
 import S from "../atoms/JButton.vue.js";
-import R from "../atoms/JPopover.vue.js";
+import V from "../atoms/JPopover.vue.js";
 import { cn as I } from "../../lib/utils.js";
-import { getDefaultTheme as V, detectThemeClasses as ke, ensureDefaultTheme as J, validateThemeExists as Y, getStoredTheme as be, applyTheme as P, setStoredTheme as W } from "../../lib/theme-utils.js";
-import H from "../../assets/images/logo-fallback.png.js";
-const xe = { class: "flex items-center gap-6 flex-1" }, ye = ["src"], pe = {
+import { getDefaultTheme as F, detectThemeClasses as be, ensureDefaultTheme as W, validateThemeExists as A, getStoredTheme as xe, applyTheme as J, setStoredTheme as H } from "../../lib/theme-utils.js";
+import q from "../../assets/images/logo-fallback.png.js";
+const ye = { class: "flex items-center gap-6 flex-1" }, pe = ["src"], Te = {
   key: 1,
-  class: "text-lg font-bold text-foreground"
+  class: "text-sm font-bold text-foreground"
 }, _e = {
   key: 2,
   class: "flex items-center gap-1"
-}, Te = { class: "flex items-center gap-3" }, we = { class: "p-2 min-w-[200px]" }, Ce = { class: "space-y-1" }, Se = ["onClick"], Ie = {
+}, we = { class: "flex items-center gap-3" }, Ce = { class: "p-2 min-w-[200px]" }, Se = { class: "space-y-1" }, Ie = ["onClick"], Le = {
   key: 1,
   class: "w-4"
-}, Oe = { class: "flex-1 capitalize" }, Le = {
+}, ze = { class: "flex-1 capitalize" }, Me = {
   key: 0,
   class: "absolute top-0 right-0 h-4 w-4 rounded-full bg-destructive text-destructive-foreground text-xs flex items-center justify-center"
-}, ze = { class: "p-2" }, Me = {
+}, Ee = { class: "p-2" }, Oe = {
   key: 0,
   class: "max-h-96 overflow-y-auto space-y-1"
-}, Ee = ["onClick"], Ne = { class: "flex items-start gap-2" }, Be = { class: "flex-1 min-w-0" }, Ae = { class: "text-sm font-medium text-foreground" }, De = {
+}, Ne = ["onClick"], Be = { class: "flex items-start gap-2" }, Ae = { class: "flex-1 min-w-0" }, De = { class: "text-xs font-medium text-foreground" }, $e = {
   key: 0,
   class: "text-xs text-muted-foreground mt-1"
-}, $e = {
+}, Ge = {
   key: 1,
   class: "text-xs text-muted-foreground/60 mt-1"
-}, Ge = {
+}, Ue = {
   key: 1,
-  class: "p-4 text-center text-sm text-muted-foreground"
-}, Ue = { class: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity" }, Re = { class: "text-sm text-foreground hidden sm:inline" }, Ve = { class: "w-full rounded-md overflow-hidden" }, Ye = { class: "px-3 py-2 border-b border-border" }, Fe = { class: "text-sm font-medium text-foreground" }, Ke = {
+  class: "p-4 text-center text-xs text-muted-foreground"
+}, Ve = { class: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity" }, Fe = { class: "text-xs text-foreground hidden sm:inline" }, Je = { class: "w-full rounded-md overflow-hidden" }, Re = { class: "px-3 py-1.5 border-b border-border" }, Ye = { class: "text-xs font-medium text-foreground" }, je = {
   key: 0,
   class: "text-xs text-muted-foreground mt-0.5"
-}, je = ["disabled", "onClick"], Je = { class: "flex-1 text-left truncate" }, Pe = {
+}, Ke = ["disabled", "onClick"], Pe = { class: "flex-1 text-left truncate" }, We = {
   key: 1,
   class: "h-px bg-muted my-1"
-}, We = {
+}, He = {
   key: 0,
   class: "h-px bg-muted my-1"
-}, ot = /* @__PURE__ */ ue({
+}, at = /* @__PURE__ */ me({
   __name: "JHeader",
   props: {
     logo: {},
@@ -60,323 +60,327 @@ const xe = { class: "flex items-center gap-6 flex-1" }, ye = ["src"], pe = {
     availableThemes: { default: void 0 }
   },
   emits: ["logoClick", "navClick", "notificationClick", "userMenuSelect", "sidebarToggle", "login"],
-  setup(n, { emit: q }) {
-    const h = n, y = q, F = {
+  setup(a, { emit: Q }) {
+    const v = a, p = Q, R = {
       default: {
-        containerClass: "h-14 px-4 border-b border-border bg-background",
-        navItemClass: "text-sm text-muted-foreground hover:text-foreground transition-colors px-3 py-2 rounded-md hover:bg-accent",
+        containerClass: "h-10 px-4 border-b border-border bg-muted dark:bg-card",
+        navItemClass: "text-xs text-muted-foreground hover:text-foreground transition-colors px-3 py-1.5 rounded-md hover:bg-accent",
         navItemActiveClass: "text-foreground font-medium bg-accent"
       },
       minimal: {
-        containerClass: "h-12 px-3 border-b border-border bg-background",
+        containerClass: "h-8 px-3 border-b border-border bg-muted dark:bg-card",
         navItemClass: "text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded-md hover:bg-accent",
         navItemActiveClass: "text-foreground font-medium bg-accent"
       }
-    }, B = T(() => F[h.styletype] ?? F.default), p = N(0), Q = T(() => {
-      if (h.logo)
-        return h.logo;
-    }), A = T(() => {
-      if (h.logo)
-        return p.value >= 1 && H ? H : Q.value;
-    }), X = () => {
-      p.value === 0 ? p.value = 1 : p.value === 1 && (p.value = 2);
-    }, D = T(() => h.notifications?.filter((s) => !s.read).length || 0), Z = [
+    }, D = _(() => R[v.styletype] ?? R.default), T = B(0), X = _(() => {
+      if (v.logo)
+        return v.logo;
+    }), $ = _(() => {
+      if (v.logo)
+        return T.value >= 1 && q ? q : X.value;
+    }), Z = () => {
+      T.value === 0 ? T.value = 1 : T.value === 1 && (T.value = 2);
+    }, G = _(() => v.notifications?.filter((s) => !s.read).length || 0), ee = [
       { id: "profile", label: "프로필", icon: "user" },
       { id: "settings", label: "설정", icon: "settings" },
       { id: "separator", label: "", separator: !0 },
       { id: "logout", label: "로그아웃", icon: "logOut" }
-    ], K = T(() => [{
-      items: Z
-    }]), ee = () => {
-      y("logoClick");
-    }, te = (s, l) => {
-      s.onClick?.(), y("navClick", s, l);
-    }, se = (s) => {
-      s.onClick?.(), y("notificationClick", s);
+    ], Y = _(() => [{
+      items: ee
+    }]), te = () => {
+      p("logoClick");
+    }, se = (s, n) => {
+      s.onClick?.(), p("navClick", s, n);
     }, oe = (s) => {
-      y("userMenuSelect", s);
+      s.onClick?.(), p("notificationClick", s);
+    }, ae = (s) => {
+      p("userMenuSelect", s);
     }, ne = () => {
-      y("login");
-    }, ae = () => {
-      y("sidebarToggle");
-    }, b = N(!1), _ = N(V()), O = N([]);
-    let L = !1, z = null, M = null;
-    const j = () => typeof window > "u" ? !1 : !!(window.location?.href?.includes("storybook") || window.__STORYBOOK_GLOBALS__), $ = () => {
-      const s = ke(), l = J(s);
-      if (h.availableThemes && h.availableThemes.length > 0) {
-        const e = l.filter((a) => h.availableThemes.includes(a));
-        O.value = J(e);
-      } else
-        O.value = l;
+      p("login");
     }, le = () => {
+      p("sidebarToggle");
+    }, m = B(!1), x = B(F()), L = B([]);
+    let z = !1, M = null, E = null;
+    const j = () => typeof window > "u" ? !1 : !!(window.location?.href?.includes("storybook") || window.__STORYBOOK_GLOBALS__), U = () => {
+      const s = be(), n = W(s);
+      if (v.availableThemes && v.availableThemes.length > 0) {
+        const e = n.filter((r) => v.availableThemes.includes(r));
+        L.value = W(e);
+      } else
+        L.value = n;
+    }, re = () => {
       if (typeof window > "u") return "light";
       const s = localStorage.getItem("theme");
       return s === "dark" || s === "light" ? s : window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }, G = (s) => {
-      L = !0;
-      const l = document.documentElement;
-      s === "dark" ? (l.classList.add("dark"), b.value = !0) : (l.classList.remove("dark"), b.value = !1), localStorage.setItem("theme", s), L = !1;
-    }, re = () => {
-      const s = b.value ? "light" : "dark";
-      G(s);
+    }, K = (s) => {
+      z = !0;
+      const n = document.documentElement;
+      s === "dark" ? (n.classList.add("dark"), m.value = !0) : (n.classList.remove("dark"), m.value = !1), localStorage.setItem("theme", s), z = !1;
     }, ie = () => {
-      if (h.defaultTheme)
-        return Y(h.defaultTheme);
-      const s = be("tweakcn-theme");
-      return s ? Y(s) : V();
-    }, U = (s) => {
-      L = !0;
-      const l = Y(s), e = P(l);
-      if (e) {
-        if (_.value = l, W(l, "tweakcn-theme"), j())
-          try {
-            const a = window.__STORYBOOK_GLOBALS__;
-            a && (a.theme = l);
-          } catch {
-          }
-      } else {
-        const a = V();
-        P(a), _.value = a, W(a, "tweakcn-theme");
+      const s = m.value ? "light" : "dark";
+      K(s);
+    }, ce = () => {
+      if (v.defaultTheme)
+        return A(v.defaultTheme);
+      const s = xe("tweakcn-theme");
+      return s ? A(s) : F();
+    }, P = (s) => {
+      z = !0;
+      const n = A(s), e = J(n);
+      if (e)
+        x.value = n, j() || H(n, "tweakcn-theme");
+      else {
+        const r = F();
+        J(r), x.value = r, H(r, "tweakcn-theme");
       }
-      return L = !1, e;
-    }, ce = (s) => {
-      U(String(s));
-    }, de = T(() => b.value ? "sun" : "moon");
-    return me(() => {
-      $();
-      const s = le();
-      G(s);
-      const l = ie();
-      U(l);
+      return z = !1, e;
+    }, de = (s) => {
+      P(String(s));
+    }, ue = _(() => m.value ? "sun" : "moon");
+    return fe(() => {
+      U();
+      const s = re();
+      K(s);
+      const n = ce();
+      P(n);
       const e = document.documentElement;
-      b.value = e.classList.contains("dark"), z = new MutationObserver(() => {
-        if (L) return;
-        const r = e.classList.contains("dark");
-        r !== b.value && (b.value = r, localStorage.setItem("theme", r ? "dark" : "light")), $();
-        const d = Array.from(e.classList).find((m) => m.startsWith("theme-"));
+      m.value = e.classList.contains("dark"), M = new MutationObserver(() => {
+        if (z) return;
+        const l = e.classList.contains("dark");
+        l !== m.value && (m.value = l, localStorage.setItem("theme", l ? "dark" : "light")), U();
+        const d = Array.from(e.classList).find((f) => f.startsWith("theme-"));
         if (d) {
-          const m = d.replace("theme-", "");
-          O.value.includes(m) && (_.value = m);
+          const f = d.replace("theme-", "");
+          L.value.includes(f) && (x.value = f);
         }
-      }), z.observe(document.documentElement, {
+      }), M.observe(document.documentElement, {
         attributes: !0,
         attributeFilter: ["class"]
-      }), M = new MutationObserver(() => {
-        $();
-      }), M.observe(document.head, {
+      }), E = new MutationObserver(() => {
+        U();
+      }), E.observe(document.head, {
         childList: !0,
         subtree: !0
       });
-      let a = null;
+      let r = null;
       if (j()) {
-        const r = () => {
+        const l = () => {
           try {
             const d = window.__STORYBOOK_GLOBALS__;
             if (d) {
               if (typeof d.darkMode < "u") {
-                const m = d.darkMode;
-                m !== b.value && G(m ? "dark" : "light");
+                const f = d.darkMode;
+                if (f !== m.value) {
+                  const O = document.documentElement;
+                  f ? (O.classList.add("dark"), m.value = !0) : (O.classList.remove("dark"), m.value = !1);
+                }
               }
-              if (d.theme && d.theme !== _.value) {
-                const m = String(d.theme);
-                O.value.includes(m) && U(m);
+              if (d.theme && d.theme !== x.value) {
+                const f = String(d.theme);
+                if (L.value.includes(f)) {
+                  const O = A(f);
+                  J(O), x.value = O;
+                }
               }
             }
           } catch {
           }
         };
-        r(), a = setInterval(r, 500);
+        l(), r = setInterval(l, 200);
       }
-      fe(() => {
-        z && (z.disconnect(), z = null), M && (M.disconnect(), M = null), a && clearInterval(a);
+      he(() => {
+        M && (M.disconnect(), M = null), E && (E.disconnect(), E = null), r && clearInterval(r);
       });
-    }), (s, l) => (t(), o("header", {
-      class: w(C(I)("flex items-center justify-between w-full", B.value.containerClass))
+    }), (s, n) => (t(), o("header", {
+      class: w(C(I)("flex items-center justify-between w-full", D.value.containerClass))
     }, [
-      i("div", xe, [
-        n.showSidebarToggle ? (t(), v(S, {
+      i("div", ye, [
+        a.showSidebarToggle ? (t(), g(S, {
           key: 0,
           variant: "ghost",
-          size: "icon",
-          class: "flex-shrink-0",
+          size: "sm",
+          class: "flex-shrink-0 w-8 h-8 p-0",
           "aria-label": "사이드바 토글",
-          onClick: ae
+          onClick: le
         }, {
           default: u(() => [
-            g(k, {
+            k(b, {
               name: "menu",
-              size: "md"
+              size: "sm"
             })
           ]),
           _: 1
         })) : c("", !0),
-        A.value || n.logoText ? (t(), o("div", {
+        $.value || a.logoText ? (t(), o("div", {
           key: 1,
           class: "flex items-center cursor-pointer",
-          onClick: ee
+          onClick: te
         }, [
-          A.value && p.value < 2 ? (t(), o("img", {
+          $.value && T.value < 2 ? (t(), o("img", {
             key: 0,
-            src: A.value,
+            src: $.value,
             alt: "로고",
-            class: "h-8 w-auto",
-            onError: X
-          }, null, 40, ye)) : n.logoText ? (t(), o("span", pe, f(n.logoText), 1)) : c("", !0)
+            class: "h-6 w-auto",
+            onError: Z
+          }, null, 40, pe)) : a.logoText ? (t(), o("span", Te, h(a.logoText), 1)) : c("", !0)
         ])) : c("", !0),
-        n.navItems && n.navItems.length > 0 ? (t(), o("nav", _e, [
-          (t(!0), o(x, null, E(n.navItems, (e, a) => (t(), v(S, {
-            key: a,
+        a.navItems && a.navItems.length > 0 ? (t(), o("nav", _e, [
+          (t(!0), o(y, null, N(a.navItems, (e, r) => (t(), g(S, {
+            key: r,
             variant: "ghost",
             class: w(C(I)(
-              B.value.navItemClass,
-              e.active && B.value.navItemActiveClass
+              D.value.navItemClass,
+              e.active && D.value.navItemActiveClass
             )),
-            onClick: (r) => te(e, a)
+            onClick: (l) => se(e, r)
           }, {
             default: u(() => [
-              e.icon ? (t(), v(k, {
+              e.icon ? (t(), g(b, {
                 key: 0,
                 name: e.icon,
                 size: "sm",
                 class: "mr-1.5"
               }, null, 8, ["name"])) : c("", !0),
-              he(" " + f(e.label), 1)
+              ve(" " + h(e.label), 1)
             ]),
             _: 2
           }, 1032, ["class", "onClick"]))), 128))
         ])) : c("", !0)
       ]),
-      i("div", Te, [
-        n.showThemeSelector ? (t(), v(R, {
+      i("div", we, [
+        a.showThemeSelector ? (t(), g(V, {
           key: 0,
           position: "bottom",
           align: "end",
           styletype: "default-sm"
         }, {
           trigger: u(() => [
-            g(S, {
+            k(S, {
               variant: "ghost",
-              size: "icon",
+              size: "sm",
+              class: "w-8 h-8 p-0",
               "aria-label": "테마 선택"
             }, {
               default: u(() => [
-                g(k, {
+                k(b, {
                   name: "palette",
-                  size: "md"
+                  size: "sm"
                 })
               ]),
               _: 1
             })
           ]),
           default: u(() => [
-            i("div", we, [
-              l[0] || (l[0] = i("div", { class: "text-xs font-medium text-muted-foreground px-2 py-1.5 mb-1" }, " 테마 선택 ", -1)),
-              i("div", Ce, [
-                (t(!0), o(x, null, E(O.value, (e) => (t(), o("button", {
+            i("div", Ce, [
+              n[0] || (n[0] = i("div", { class: "text-xs font-medium text-muted-foreground px-2 py-1.5 mb-1" }, " 테마 선택 ", -1)),
+              i("div", Se, [
+                (t(!0), o(y, null, N(L.value, (e) => (t(), o("button", {
                   key: e,
                   class: w(C(I)(
-                    "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors",
+                    "w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors",
                     "hover:bg-accent hover:text-accent-foreground",
                     "border-0 outline-none text-left",
-                    _.value === e && "bg-accent text-accent-foreground font-medium"
+                    x.value === e && "bg-accent text-accent-foreground font-medium"
                   )),
-                  onClick: (a) => ce(e)
+                  onClick: (r) => de(e)
                 }, [
-                  _.value === e ? (t(), v(k, {
+                  x.value === e ? (t(), g(b, {
                     key: 0,
                     name: "check",
                     size: "sm",
                     class: "flex-shrink-0"
-                  })) : (t(), o("span", Ie)),
-                  i("span", Oe, f(e), 1)
-                ], 10, Se))), 128))
+                  })) : (t(), o("span", Le)),
+                  i("span", ze, h(e), 1)
+                ], 10, Ie))), 128))
               ])
             ])
           ]),
           _: 1
         })) : c("", !0),
-        n.showNotifications ? (t(), v(R, {
+        a.showNotifications ? (t(), g(V, {
           key: 1,
           position: "bottom",
           align: "end",
           styletype: "default-sm"
         }, {
           trigger: u(() => [
-            g(S, {
+            k(S, {
               variant: "ghost",
-              size: "icon",
-              class: "relative",
+              size: "sm",
+              class: "relative w-8 h-8 p-0",
               "aria-label": "알림"
             }, {
               default: u(() => [
-                g(k, {
+                k(b, {
                   name: "circleAlert",
-                  size: "md"
+                  size: "sm"
                 }),
-                D.value > 0 ? (t(), o("span", Le, f(D.value > 9 ? "9+" : D.value), 1)) : c("", !0)
+                G.value > 0 ? (t(), o("span", Me, h(G.value > 9 ? "9+" : G.value), 1)) : c("", !0)
               ]),
               _: 1
             })
           ]),
           default: u(() => [
-            i("div", ze, [
-              n.notifications && n.notifications.length > 0 ? (t(), o("div", Me, [
-                (t(!0), o(x, null, E(n.notifications, (e) => (t(), o("div", {
+            i("div", Ee, [
+              a.notifications && a.notifications.length > 0 ? (t(), o("div", Oe, [
+                (t(!0), o(y, null, N(a.notifications, (e) => (t(), o("div", {
                   key: e.id,
                   class: w(C(I)(
                     "p-3 rounded-md cursor-pointer transition-colors",
                     e.read ? "hover:bg-accent/50" : "bg-accent"
                   )),
-                  onClick: (a) => se(e)
+                  onClick: (r) => oe(e)
                 }, [
-                  i("div", Ne, [
-                    e.icon ? (t(), v(k, {
+                  i("div", Be, [
+                    e.icon ? (t(), g(b, {
                       key: 0,
                       name: e.icon,
                       size: "sm",
                       class: "mt-0.5 flex-shrink-0"
                     }, null, 8, ["name"])) : c("", !0),
-                    i("div", Be, [
-                      i("p", Ae, f(e.title), 1),
-                      e.message ? (t(), o("p", De, f(e.message), 1)) : c("", !0),
-                      e.time ? (t(), o("p", $e, f(e.time), 1)) : c("", !0)
+                    i("div", Ae, [
+                      i("p", De, h(e.title), 1),
+                      e.message ? (t(), o("p", $e, h(e.message), 1)) : c("", !0),
+                      e.time ? (t(), o("p", Ge, h(e.time), 1)) : c("", !0)
                     ])
                   ])
-                ], 10, Ee))), 128))
-              ])) : (t(), o("div", Ge, " 알림이 없습니다. "))
+                ], 10, Ne))), 128))
+              ])) : (t(), o("div", Ue, " 알림이 없습니다. "))
             ])
           ]),
           _: 1
         })) : c("", !0),
-        g(S, {
+        k(S, {
           variant: "ghost",
-          size: "icon",
-          "aria-label": b.value ? "라이트 모드로 전환" : "다크 모드로 전환",
-          onClick: re
+          size: "sm",
+          class: "w-8 h-8 p-0",
+          "aria-label": m.value ? "라이트 모드로 전환" : "다크 모드로 전환",
+          onClick: ie
         }, {
           default: u(() => [
-            g(k, {
-              name: de.value,
-              size: "md"
+            k(b, {
+              name: ue.value,
+              size: "sm"
             }, null, 8, ["name"])
           ]),
           _: 1
         }, 8, ["aria-label"]),
-        n.userName ? (t(), v(R, {
+        ge(s.$slots, "toolbar"),
+        a.userName ? (t(), g(V, {
           key: 2,
           position: "bottom",
           align: "end",
           styletype: "default-sm"
         }, {
           trigger: u(() => [
-            i("div", Ue, [
-              g(ge, {
-                src: n.userAvatar,
-                fallback: n.userName ? n.userName[0] : "U",
-                size: "sm"
+            i("div", Ve, [
+              k(ke, {
+                src: a.userAvatar,
+                fallback: a.userName ? a.userName[0] : "U",
+                size: "xs"
               }, null, 8, ["src", "fallback"]),
-              i("span", Re, f(n.userName), 1),
-              g(k, {
+              i("span", Fe, h(a.userName), 1),
+              k(b, {
                 name: "chevronDown",
                 size: "sm",
                 class: "text-muted-foreground hidden sm:inline"
@@ -384,45 +388,45 @@ const xe = { class: "flex items-center gap-6 flex-1" }, ye = ["src"], pe = {
             ])
           ]),
           default: u(() => [
-            i("div", Ve, [
-              i("div", Ye, [
-                i("p", Fe, f(n.userName), 1),
-                n.userEmail ? (t(), o("p", Ke, f(n.userEmail), 1)) : c("", !0)
+            i("div", Je, [
+              i("div", Re, [
+                i("p", Ye, h(a.userName), 1),
+                a.userEmail ? (t(), o("p", je, h(a.userEmail), 1)) : c("", !0)
               ]),
-              (t(!0), o(x, null, E(K.value, (e, a) => (t(), o(x, { key: a }, [
-                (t(!0), o(x, null, E(e.items, (r, d) => (t(), o(x, {
-                  key: r.id
+              (t(!0), o(y, null, N(Y.value, (e, r) => (t(), o(y, { key: r }, [
+                (t(!0), o(y, null, N(e.items, (l, d) => (t(), o(y, {
+                  key: l.id
                 }, [
-                  r.separator ? r.separator && d > 0 ? (t(), o("div", Pe)) : c("", !0) : (t(), o("button", {
+                  l.separator ? l.separator && d > 0 ? (t(), o("div", We)) : c("", !0) : (t(), o("button", {
                     key: 0,
-                    disabled: r.disabled,
+                    disabled: l.disabled,
                     class: w(C(I)(
-                      "w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors",
-                      r.id === "logout" ? "text-destructive hover:bg-destructive/10 hover:text-destructive" : "hover:bg-accent hover:text-accent-foreground",
+                      "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
+                      l.id === "logout" ? "text-destructive hover:bg-destructive/10 hover:text-destructive" : "hover:bg-accent hover:text-accent-foreground",
                       "disabled:opacity-50 disabled:pointer-events-none",
                       "border-0 outline-none",
                       e.items[d + 1]?.separator && "border-b-0"
                     )),
-                    onClick: (m) => oe(r.id)
+                    onClick: (f) => ae(l.id)
                   }, [
-                    r.icon ? (t(), v(k, {
+                    l.icon ? (t(), g(b, {
                       key: 0,
-                      name: r.icon,
+                      name: l.icon,
                       size: "sm",
                       class: w(C(I)(
                         "flex-shrink-0",
-                        r.id === "logout" && "text-destructive"
+                        l.id === "logout" && "text-destructive"
                       ))
                     }, null, 8, ["name", "class"])) : c("", !0),
-                    i("span", Je, f(r.label), 1)
-                  ], 10, je))
+                    i("span", Pe, h(l.label), 1)
+                  ], 10, Ke))
                 ], 64))), 128)),
-                a < K.value.length - 1 ? (t(), o("div", We)) : c("", !0)
+                r < Y.value.length - 1 ? (t(), o("div", He)) : c("", !0)
               ], 64))), 128))
             ])
           ]),
           _: 1
-        })) : (t(), v(S, {
+        })) : (t(), g(S, {
           key: 3,
           variant: "ghost",
           size: "sm",
@@ -430,21 +434,20 @@ const xe = { class: "flex items-center gap-6 flex-1" }, ye = ["src"], pe = {
           onClick: ne
         }, {
           default: u(() => [
-            g(k, {
+            k(b, {
               name: "logIn",
               size: "sm",
               class: "sm:mr-1.5"
             }),
-            l[1] || (l[1] = i("span", { class: "hidden sm:inline" }, "로그인", -1))
+            n[1] || (n[1] = i("span", { class: "hidden sm:inline" }, "로그인", -1))
           ]),
           _: 1
-        })),
-        ve(s.$slots, "actions")
+        }))
       ])
     ], 2));
   }
 });
 export {
-  ot as default
+  at as default
 };
 //# sourceMappingURL=JHeader.vue.js.map