@j-solution/components 1.0.0

package/components/organisms/JHeader.vue.js

@@ -0,0 +1,450 @@
+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 S from "../atoms/JButton.vue.js";
+import R 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 = {
+  key: 1,
+  class: "text-lg 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 = {
+  key: 1,
+  class: "w-4"
+}, Oe = { class: "flex-1 capitalize" }, Le = {
+  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 = {
+  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 = {
+  key: 0,
+  class: "text-xs text-muted-foreground mt-1"
+}, $e = {
+  key: 1,
+  class: "text-xs text-muted-foreground/60 mt-1"
+}, Ge = {
+  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 = {
+  key: 0,
+  class: "text-xs text-muted-foreground mt-0.5"
+}, je = ["disabled", "onClick"], Je = { class: "flex-1 text-left truncate" }, Pe = {
+  key: 1,
+  class: "h-px bg-muted my-1"
+}, We = {
+  key: 0,
+  class: "h-px bg-muted my-1"
+}, ot = /* @__PURE__ */ ue({
+  __name: "JHeader",
+  props: {
+    logo: {},
+    logoText: { default: "JWMS Portal" },
+    navItems: {},
+    showNotifications: { type: Boolean, default: !1 },
+    notifications: { default: () => [] },
+    userAvatar: {},
+    userName: {},
+    isLoggedIn: { type: Boolean },
+    userEmail: {},
+    userId: {},
+    styletype: { default: "default" },
+    showSidebarToggle: { type: Boolean, default: !0 },
+    isSidebarOpen: { type: Boolean, default: !0 },
+    showThemeSelector: { type: Boolean, default: !0 },
+    defaultTheme: { default: void 0 },
+    availableThemes: { default: void 0 }
+  },
+  emits: ["logoClick", "navClick", "notificationClick", "userMenuSelect", "sidebarToggle", "login"],
+  setup(n, { emit: q }) {
+    const h = n, y = q, F = {
+      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",
+        navItemActiveClass: "text-foreground font-medium bg-accent"
+      },
+      minimal: {
+        containerClass: "h-12 px-3 border-b border-border bg-background",
+        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 = [
+      { 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);
+    }, oe = (s) => {
+      y("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;
+    }, le = () => {
+      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);
+    }, 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");
+      }
+      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);
+      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-"));
+        if (d) {
+          const m = d.replace("theme-", "");
+          O.value.includes(m) && (_.value = m);
+        }
+      }), z.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["class"]
+      }), M = new MutationObserver(() => {
+        $();
+      }), M.observe(document.head, {
+        childList: !0,
+        subtree: !0
+      });
+      let a = null;
+      if (j()) {
+        const r = () => {
+          try {
+            const d = window.__STORYBOOK_GLOBALS__;
+            if (d) {
+              if (typeof d.darkMode < "u") {
+                const m = d.darkMode;
+                m !== b.value && G(m ? "dark" : "light");
+              }
+              if (d.theme && d.theme !== _.value) {
+                const m = String(d.theme);
+                O.value.includes(m) && U(m);
+              }
+            }
+          } catch {
+          }
+        };
+        r(), a = setInterval(r, 500);
+      }
+      fe(() => {
+        z && (z.disconnect(), z = null), M && (M.disconnect(), M = null), a && clearInterval(a);
+      });
+    }), (s, l) => (t(), o("header", {
+      class: w(C(I)("flex items-center justify-between w-full", B.value.containerClass))
+    }, [
+      i("div", xe, [
+        n.showSidebarToggle ? (t(), v(S, {
+          key: 0,
+          variant: "ghost",
+          size: "icon",
+          class: "flex-shrink-0",
+          "aria-label": "사이드바 토글",
+          onClick: ae
+        }, {
+          default: u(() => [
+            g(k, {
+              name: "menu",
+              size: "md"
+            })
+          ]),
+          _: 1
+        })) : c("", !0),
+        A.value || n.logoText ? (t(), o("div", {
+          key: 1,
+          class: "flex items-center cursor-pointer",
+          onClick: ee
+        }, [
+          A.value && p.value < 2 ? (t(), o("img", {
+            key: 0,
+            src: A.value,
+            alt: "로고",
+            class: "h-8 w-auto",
+            onError: X
+          }, null, 40, ye)) : n.logoText ? (t(), o("span", pe, f(n.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,
+            variant: "ghost",
+            class: w(C(I)(
+              B.value.navItemClass,
+              e.active && B.value.navItemActiveClass
+            )),
+            onClick: (r) => te(e, a)
+          }, {
+            default: u(() => [
+              e.icon ? (t(), v(k, {
+                key: 0,
+                name: e.icon,
+                size: "sm",
+                class: "mr-1.5"
+              }, null, 8, ["name"])) : c("", !0),
+              he(" " + f(e.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "onClick"]))), 128))
+        ])) : c("", !0)
+      ]),
+      i("div", Te, [
+        n.showThemeSelector ? (t(), v(R, {
+          key: 0,
+          position: "bottom",
+          align: "end",
+          styletype: "default-sm"
+        }, {
+          trigger: u(() => [
+            g(S, {
+              variant: "ghost",
+              size: "icon",
+              "aria-label": "테마 선택"
+            }, {
+              default: u(() => [
+                g(k, {
+                  name: "palette",
+                  size: "md"
+                })
+              ]),
+              _: 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", {
+                  key: e,
+                  class: w(C(I)(
+                    "w-full flex items-center gap-2 px-2 py-1.5 text-sm 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"
+                  )),
+                  onClick: (a) => ce(e)
+                }, [
+                  _.value === e ? (t(), v(k, {
+                    key: 0,
+                    name: "check",
+                    size: "sm",
+                    class: "flex-shrink-0"
+                  })) : (t(), o("span", Ie)),
+                  i("span", Oe, f(e), 1)
+                ], 10, Se))), 128))
+              ])
+            ])
+          ]),
+          _: 1
+        })) : c("", !0),
+        n.showNotifications ? (t(), v(R, {
+          key: 1,
+          position: "bottom",
+          align: "end",
+          styletype: "default-sm"
+        }, {
+          trigger: u(() => [
+            g(S, {
+              variant: "ghost",
+              size: "icon",
+              class: "relative",
+              "aria-label": "알림"
+            }, {
+              default: u(() => [
+                g(k, {
+                  name: "circleAlert",
+                  size: "md"
+                }),
+                D.value > 0 ? (t(), o("span", Le, f(D.value > 9 ? "9+" : D.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", {
+                  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)
+                }, [
+                  i("div", Ne, [
+                    e.icon ? (t(), v(k, {
+                      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)
+                    ])
+                  ])
+                ], 10, Ee))), 128))
+              ])) : (t(), o("div", Ge, " 알림이 없습니다. "))
+            ])
+          ]),
+          _: 1
+        })) : c("", !0),
+        g(S, {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": b.value ? "라이트 모드로 전환" : "다크 모드로 전환",
+          onClick: re
+        }, {
+          default: u(() => [
+            g(k, {
+              name: de.value,
+              size: "md"
+            }, null, 8, ["name"])
+          ]),
+          _: 1
+        }, 8, ["aria-label"]),
+        n.userName ? (t(), v(R, {
+          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"
+              }, null, 8, ["src", "fallback"]),
+              i("span", Re, f(n.userName), 1),
+              g(k, {
+                name: "chevronDown",
+                size: "sm",
+                class: "text-muted-foreground hidden sm:inline"
+              })
+            ])
+          ]),
+          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)
+              ]),
+              (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
+                }, [
+                  r.separator ? r.separator && d > 0 ? (t(), o("div", Pe)) : c("", !0) : (t(), o("button", {
+                    key: 0,
+                    disabled: r.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",
+                      "disabled:opacity-50 disabled:pointer-events-none",
+                      "border-0 outline-none",
+                      e.items[d + 1]?.separator && "border-b-0"
+                    )),
+                    onClick: (m) => oe(r.id)
+                  }, [
+                    r.icon ? (t(), v(k, {
+                      key: 0,
+                      name: r.icon,
+                      size: "sm",
+                      class: w(C(I)(
+                        "flex-shrink-0",
+                        r.id === "logout" && "text-destructive"
+                      ))
+                    }, null, 8, ["name", "class"])) : c("", !0),
+                    i("span", Je, f(r.label), 1)
+                  ], 10, je))
+                ], 64))), 128)),
+                a < K.value.length - 1 ? (t(), o("div", We)) : c("", !0)
+              ], 64))), 128))
+            ])
+          ]),
+          _: 1
+        })) : (t(), v(S, {
+          key: 3,
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "로그인",
+          onClick: ne
+        }, {
+          default: u(() => [
+            g(k, {
+              name: "logIn",
+              size: "sm",
+              class: "sm:mr-1.5"
+            }),
+            l[1] || (l[1] = i("span", { class: "hidden sm:inline" }, "로그인", -1))
+          ]),
+          _: 1
+        })),
+        ve(s.$slots, "actions")
+      ])
+    ], 2));
+  }
+});
+export {
+  ot as default
+};
+//# sourceMappingURL=JHeader.vue.js.map

package/components/organisms/JHeader.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JHeader.vue.js","sources":["../../../../src/components/organisms/JHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, onMounted, onUnmounted } from 'vue'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\nimport JAvatar from '@/components/atoms/JAvatar.vue'\r\nimport JButton from '@/components/atoms/JButton.vue'\r\nimport JPopover from '@/components/atoms/JPopover.vue'\r\nimport { cn } from '@/lib/utils'\r\nimport type { ContextMenuItem, ContextMenuGroup } from '@/types/context-menu.types'\r\nimport {\r\n  detectThemeClasses,\r\n  ensureDefaultTheme,\r\n  validateThemeExists,\r\n  getDefaultTheme,\r\n  getStoredTheme,\r\n  setStoredTheme,\r\n  applyTheme,\r\n} from '@/lib/theme-utils'\r\n\r\n// Fallback 로고 이미지 import (logo prop이 없거나 로드 실패 시 사용)\r\nimport logoFallback from '@/assets/images/logo-fallback.png'\r\n\r\n/**\r\n * JHeader - 상단 헤더 컴포넌트 (organisms)\r\n * Header Component\r\n * \r\n * @description\r\n * 애플리케이션의 상단 헤더 영역을 담당하는 컴포넌트입니다.\r\n * 로고, 네비게이션, 검색, 알림, 사용자 메뉴 등을 포함할 수 있습니다.\r\n * \r\n * @example\r\n * ```vue\r\n * <JHeader\r\n *   logo=\"/logo.png\"\r\n *   :user-menu-items=\"userMenuItems\"\r\n *   @logo-click=\"handleLogoClick\"\r\n * />\r\n * ```\r\n */\r\n\r\nexport type HeaderNavItem = {\r\n  /** 라벨 */\r\n  label: string\r\n  /** 링크 URL */\r\n  href?: string\r\n  /** 아이콘 */\r\n  icon?: string\r\n  /** 활성 상태 */\r\n  active?: boolean\r\n  /** 클릭 핸들러 */\r\n  onClick?: () => void\r\n}\r\n\r\nexport type NotificationItem = {\r\n  /** 알림 ID */\r\n  id: string\r\n  /** 알림 제목 */\r\n  title: string\r\n  /** 알림 내용 */\r\n  message?: string\r\n  /** 알림 시간 */\r\n  time?: string\r\n  /** 읽음 상태 */\r\n  read?: boolean\r\n  /** 아이콘 */\r\n  icon?: string\r\n  /** 클릭 핸들러 */\r\n  onClick?: () => void\r\n}\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'minimal'   // 최소 스타일\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /** 로고 이미지 URL */\r\n    logo?: string\r\n    /** 로고 텍스트 (기본값, 이미지가 없을 때) */\r\n    logoText?: string\r\n    /** 네비게이션 아이템 목록 */\r\n    navItems?: HeaderNavItem[]\r\n    /** 알림 표시 여부 */\r\n    showNotifications?: boolean\r\n    /** 알림 목록 */\r\n    notifications?: NotificationItem[]\r\n    /** 사용자 아바타 이미지 */\r\n    userAvatar?: string\r\n    /** 사용자 이름 */\r\n    userName?: string\r\n    /** 로그인 상태 */\r\n    isLoggedIn?: boolean\r\n    /** 사용자 이메일 */\r\n    userEmail?: string\r\n    /** 사용자 ID */\r\n    userId?: string\r\n    /** 스타일 타입 */\r\n    styletype?: StyleType\r\n    /** 사이드바 토글 버튼 표시 여부 */\r\n    showSidebarToggle?: boolean\r\n    /** 사이드바 열림 상태 */\r\n    isSidebarOpen?: boolean\r\n    /** 테마 선택기 표시 여부 */\r\n    showThemeSelector?: boolean\r\n    /** 초기 테마 (기본값: 'default' 또는 저장된 테마) */\r\n    defaultTheme?: string\r\n    /** 선택 가능한 테마 목록 (지정하지 않으면 모든 감지된 테마 사용) */\r\n    availableThemes?: string[]\r\n  }>(),\r\n  {\r\n    logoText: 'JWMS Portal', // 기본값: 텍스트 로고\r\n    showNotifications: false,\r\n    notifications: () => [],\r\n    styletype: 'default',\r\n    showSidebarToggle: true,\r\n    isSidebarOpen: true,\r\n    showThemeSelector: true,\r\n    defaultTheme: undefined,\r\n    availableThemes: undefined,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  /** 로고 클릭 이벤트 */\r\n  logoClick: []\r\n  /** 네비게이션 아이템 클릭 이벤트 */\r\n  navClick: [item: HeaderNavItem, index: number]\r\n  /** 알림 클릭 이벤트 */\r\n  notificationClick: [item: NotificationItem]\r\n  /** 사용자 메뉴 아이템 선택 이벤트 */\r\n  userMenuSelect: [itemId: string]\r\n  /** 사이드바 토글 이벤트 */\r\n  sidebarToggle: []\r\n  /** 로그인 버튼 클릭 이벤트 */\r\n  login: []\r\n}>()\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  containerClass: string\r\n  navItemClass: string\r\n  navItemActiveClass: string\r\n}> = {\r\n  default: {\r\n    containerClass: 'h-14 px-4 border-b border-border bg-background',\r\n    navItemClass: 'text-sm text-muted-foreground hover:text-foreground transition-colors px-3 py-2 rounded-md hover:bg-accent',\r\n    navItemActiveClass: 'text-foreground font-medium bg-accent',\r\n  },\r\n  minimal: {\r\n    containerClass: 'h-12 px-3 border-b border-border bg-background',\r\n    navItemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded-md hover:bg-accent',\r\n    navItemActiveClass: 'text-foreground font-medium bg-accent',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 로고 이미지 로드 에러 상태\r\n * 0: 에러 없음, 1: 첫 번째 이미지(logo) 에러, 2: fallback 이미지도 에러\r\n */\r\nconst logoImageError = ref(0)\r\n\r\n/**\r\n * 로고 이미지 경로 계산\r\n */\r\nconst logoImageSrc = computed(() => {\r\n  // props.logo가 있으면 사용\r\n  if (props.logo) {\r\n    return props.logo\r\n  }\r\n  return undefined\r\n})\r\n\r\n/**\r\n * 실제 표시할 로고 이미지 경로\r\n * 1. props.logo가 있으면 사용\r\n * 2. logo 에러 시 fallback 이미지\r\n * 3. fallback도 에러면 undefined (텍스트로 대체)\r\n */\r\nconst displayLogoImage = computed(() => {\r\n  // logo prop이 없으면 이미지 표시 안함 (텍스트 사용)\r\n  if (!props.logo) {\r\n    return undefined\r\n  }\r\n  \r\n  // logo 에러가 발생했으면 fallback 사용\r\n  if (logoImageError.value >= 1 && logoFallback) {\r\n    return logoFallback\r\n  }\r\n  \r\n  // 정상적으로 logo 사용\r\n  return logoImageSrc.value\r\n})\r\n\r\n/**\r\n * 로고 이미지 로드 에러 핸들러\r\n */\r\nconst handleLogoError = () => {\r\n  // 첫 번째 이미지(logo) 에러\r\n  if (logoImageError.value === 0) {\r\n    logoImageError.value = 1\r\n  }\r\n  // fallback 이미지도 에러면 2로 설정 (텍스트로 대체)\r\n  else if (logoImageError.value === 1) {\r\n    logoImageError.value = 2\r\n  }\r\n}\r\n\r\n/**\r\n * 읽지 않은 알림 개수\r\n */\r\nconst unreadCount = computed(() => {\r\n  return props.notifications?.filter(n => !n.read).length || 0\r\n})\r\n\r\n/**\r\n * 고정 사용자 메뉴 아이템\r\n */\r\nconst fixedUserMenuItems: ContextMenuItem[] = [\r\n  { id: 'profile', label: '프로필', icon: 'user' },\r\n  { id: 'settings', label: '설정', icon: 'settings' },\r\n  { id: 'separator', label: '', separator: true },\r\n  { id: 'logout', label: '로그아웃', icon: 'logOut' },\r\n]\r\n\r\n/**\r\n * 사용자 메뉴 아이템을 ContextMenuGroup 형식으로 변환\r\n */\r\nconst userMenuGroups = computed<ContextMenuGroup[]>(() => {\r\n  return [{\r\n    items: fixedUserMenuItems\r\n  }]\r\n})\r\n\r\n/**\r\n * 로고 클릭 핸들러\r\n */\r\nconst handleLogoClick = () => {\r\n  emit('logoClick')\r\n}\r\n\r\n/**\r\n * 네비게이션 아이템 클릭 핸들러\r\n */\r\nconst handleNavClick = (item: HeaderNavItem, index: number) => {\r\n  item.onClick?.()\r\n  emit('navClick', item, index)\r\n}\r\n\r\n/**\r\n * 알림 클릭 핸들러\r\n */\r\nconst handleNotificationClick = (item: NotificationItem) => {\r\n  item.onClick?.()\r\n  emit('notificationClick', item)\r\n}\r\n\r\n/**\r\n * 사용자 메뉴 선택 핸들러\r\n */\r\nconst handleUserMenuSelect = (itemId: string) => {\r\n  emit('userMenuSelect', itemId)\r\n}\r\n\r\n/**\r\n * 로그인 버튼 클릭 핸들러\r\n */\r\nconst handleLogin = () => {\r\n  emit('login')\r\n}\r\n\r\n/**\r\n * 사이드바 토글 핸들러\r\n */\r\nconst handleSidebarToggle = () => {\r\n  emit('sidebarToggle')\r\n}\r\n\r\n/**\r\n * tweakcn 테마 타입 정의 (동적 감지 지원)\r\n */\r\ntype ThemeName = string\r\n\r\n/**\r\n * 다크모드 상태를 추적하는 반응형 변수\r\n * - false: 라이트 모드\r\n * - true: 다크 모드\r\n * 초기값은 false(라이트 모드)이며, 컴포넌트 마운트 시 실제 테마로 업데이트됩니다.\r\n */\r\nconst isDarkMode = ref(false)\r\n\r\n/**\r\n * 현재 선택된 tweakcn 테마 (디폴트 테마로 초기화)\r\n */\r\nconst currentTheme = ref<ThemeName>(getDefaultTheme())\r\n\r\n/**\r\n * 테마 옵션 목록 (동적으로 감지)\r\n */\r\nconst themeOptions = ref<ThemeName[]>([])\r\n\r\n/**\r\n * 내부 업데이트 플래그\r\n * - true: 컴포넌트 내부에서 테마를 변경 중 (MutationObserver가 무시해야 함)\r\n * - false: 외부에서 테마가 변경됨 (MutationObserver가 동기화해야 함)\r\n */\r\nlet isInternalUpdate = false\r\n\r\n/**\r\n * MutationObserver 인스턴스\r\n */\r\nlet themeObserver: MutationObserver | null = null\r\nlet styleObserver: MutationObserver | null = null\r\n\r\n/**\r\n * Storybook 환경인지 확인하는 함수\r\n * \r\n * @returns Storybook 환경이면 true, 아니면 false\r\n */\r\nconst isStorybook = (): boolean => {\r\n  if (typeof window === 'undefined') return false\r\n  return !!(\r\n    window.location?.href?.includes('storybook') ||\r\n    (window as any).__STORYBOOK_GLOBALS__\r\n  )\r\n}\r\n\r\n/**\r\n * 테마 목록을 동적으로 감지하고 업데이트합니다.\r\n */\r\nconst updateThemeOptions = () => {\r\n  const detectedThemes = detectThemeClasses()\r\n  const ensuredThemes = ensureDefaultTheme(detectedThemes)\r\n  \r\n  // availableThemes prop이 지정되면 필터링\r\n  if (props.availableThemes && props.availableThemes.length > 0) {\r\n    const filtered = ensuredThemes.filter(theme => props.availableThemes!.includes(theme))\r\n    // default는 항상 포함\r\n    themeOptions.value = ensureDefaultTheme(filtered)\r\n  } else {\r\n    themeOptions.value = ensuredThemes\r\n  }\r\n}\r\n\r\n/**\r\n * localStorage에서 저장된 다크모드 테마를 읽어오는 함수\r\n * \r\n * 우선순위:\r\n * 1. localStorage에 저장된 'theme' 값 (사용자가 이전에 선택한 테마)\r\n * 2. 시스템 설정 (OS의 다크모드 설정)\r\n * 3. 기본값 'light' (라이트 모드)\r\n * \r\n * @returns 'light' | 'dark' - 적용할 테마\r\n */\r\nconst getStoredDarkModeTheme = (): 'light' | 'dark' => {\r\n  if (typeof window === 'undefined') return 'light'\r\n  \r\n  const stored = localStorage.getItem('theme')\r\n  if (stored === 'dark' || stored === 'light') {\r\n    return stored\r\n  }\r\n  \r\n  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n    return 'dark'\r\n  }\r\n  \r\n  return 'light'\r\n}\r\n\r\n/**\r\n * 다크모드 테마를 HTML 문서에 적용하는 함수\r\n * \r\n * @param theme - 적용할 테마 ('light' 또는 'dark')\r\n */\r\nconst applyDarkModeTheme = (theme: 'light' | 'dark') => {\r\n  isInternalUpdate = true\r\n  \r\n  const root = document.documentElement\r\n  \r\n  if (theme === 'dark') {\r\n    root.classList.add('dark')\r\n    isDarkMode.value = true\r\n  } else {\r\n    root.classList.remove('dark')\r\n    isDarkMode.value = false\r\n  }\r\n  \r\n  localStorage.setItem('theme', theme)\r\n  \r\n  isInternalUpdate = false\r\n}\r\n\r\n/**\r\n * 테마 토글 버튼 클릭 시 호출되는 핸들러 함수\r\n */\r\nconst handleThemeToggle = () => {\r\n  const newTheme = isDarkMode.value ? 'light' : 'dark'\r\n  applyDarkModeTheme(newTheme)\r\n}\r\n\r\n/**\r\n * 저장된 tweakcn 테마를 가져와서 적용합니다.\r\n */\r\nconst getStoredTweakcnTheme = (): ThemeName => {\r\n  // defaultTheme prop이 지정되면 우선 사용\r\n  if (props.defaultTheme) {\r\n    const validated = validateThemeExists(props.defaultTheme)\r\n    return validated\r\n  }\r\n  \r\n  const stored = getStoredTheme('tweakcn-theme')\r\n  if (!stored) {\r\n    return getDefaultTheme()\r\n  }\r\n  \r\n  // 저장된 테마가 유효한지 검증\r\n  const validated = validateThemeExists(stored)\r\n  return validated\r\n}\r\n\r\n/**\r\n * tweakcn 테마를 HTML 문서에 적용하는 함수\r\n */\r\nconst applyTweakcnTheme = (theme: ThemeName): boolean => {\r\n  isInternalUpdate = true\r\n  \r\n  const validatedTheme = validateThemeExists(theme)\r\n  const success = applyTheme(validatedTheme)\r\n  \r\n  if (success) {\r\n    currentTheme.value = validatedTheme\r\n    setStoredTheme(validatedTheme, 'tweakcn-theme')\r\n    \r\n    // 스토리북 환경에서만 전역 상태 동기화\r\n    if (isStorybook()) {\r\n      try {\r\n        const storybookGlobals = (window as any).__STORYBOOK_GLOBALS__\r\n        if (storybookGlobals) {\r\n          storybookGlobals.theme = validatedTheme\r\n        }\r\n      } catch (e) {\r\n        // 무시\r\n      }\r\n    }\r\n  } else {\r\n    // 실패 시 디폴트 테마로 폴백\r\n    const defaultTheme = getDefaultTheme()\r\n    applyTheme(defaultTheme)\r\n    currentTheme.value = defaultTheme\r\n    setStoredTheme(defaultTheme, 'tweakcn-theme')\r\n  }\r\n  \r\n  isInternalUpdate = false\r\n  return success\r\n}\r\n\r\n/**\r\n * 테마 변경 핸들러\r\n */\r\nconst handleThemeChange = (theme: ThemeName | string | number) => {\r\n  applyTweakcnTheme(String(theme))\r\n}\r\n\r\n/**\r\n * 현재 테마에 따라 표시할 아이콘을 계산하는 computed 속성\r\n */\r\nconst themeIcon = computed(() => {\r\n  return isDarkMode.value ? 'sun' : 'moon'\r\n})\r\n\r\n/**\r\n * 초기화: 저장된 테마 적용 및 테마 목록 감지\r\n */\r\nonMounted(() => {\r\n  // 테마 목록 초기 감지\r\n  updateThemeOptions()\r\n  \r\n  // 저장된 다크모드 테마 적용\r\n  const darkModeTheme = getStoredDarkModeTheme()\r\n  applyDarkModeTheme(darkModeTheme)\r\n  \r\n  // 저장된 tweakcn 테마 적용\r\n  const storedTheme = getStoredTweakcnTheme()\r\n  applyTweakcnTheme(storedTheme)\r\n  \r\n  // HTML의 dark 클래스 변경을 감지하여 헤더 컴포넌트 상태를 동기화\r\n  const root = document.documentElement\r\n  \r\n  // 현재 dark 클래스 상태로 초기화\r\n  isDarkMode.value = root.classList.contains('dark')\r\n  \r\n  // MutationObserver로 동적 테마 클래스 감지\r\n  themeObserver = new MutationObserver(() => {\r\n    if (isInternalUpdate) return\r\n    \r\n    // 다크모드 클래스 변경 감지\r\n    const hasDarkClass = root.classList.contains('dark')\r\n    if (hasDarkClass !== isDarkMode.value) {\r\n      isDarkMode.value = hasDarkClass\r\n      localStorage.setItem('theme', hasDarkClass ? 'dark' : 'light')\r\n    }\r\n    \r\n    // 테마 목록 업데이트\r\n    updateThemeOptions()\r\n    \r\n    // 현재 적용된 tweakcn 테마 확인\r\n    const currentThemeClass = Array.from(root.classList).find(cls => cls.startsWith('theme-'))\r\n    if (currentThemeClass) {\r\n      const themeName = currentThemeClass.replace('theme-', '')\r\n      if (themeOptions.value.includes(themeName)) {\r\n        currentTheme.value = themeName\r\n      }\r\n    }\r\n  })\r\n  \r\n  // document.documentElement의 클래스 변경 감지\r\n  themeObserver.observe(document.documentElement, {\r\n    attributes: true,\r\n    attributeFilter: ['class'],\r\n  })\r\n  \r\n  // 스타일시트 변경 감지 (동적으로 추가된 테마 감지)\r\n  styleObserver = new MutationObserver(() => {\r\n    updateThemeOptions()\r\n  })\r\n  \r\n  styleObserver.observe(document.head, {\r\n    childList: true,\r\n    subtree: true,\r\n  })\r\n  \r\n  // 스토리북 환경에서만 다크모드 및 테마 변경 감지 (추가 보완)\r\n  let intervalId: ReturnType<typeof setInterval> | null = null\r\n  \r\n  if (isStorybook()) {\r\n    const checkStorybookGlobals = () => {\r\n      try {\r\n        const storybookGlobals = (window as any).__STORYBOOK_GLOBALS__\r\n        if (storybookGlobals) {\r\n          // 다크모드 동기화\r\n          if (typeof storybookGlobals.darkMode !== 'undefined') {\r\n            const storybookDarkMode = storybookGlobals.darkMode\r\n            if (storybookDarkMode !== isDarkMode.value) {\r\n              applyDarkModeTheme(storybookDarkMode ? 'dark' : 'light')\r\n            }\r\n          }\r\n          \r\n          // tweakcn 테마 동기화\r\n          if (storybookGlobals.theme && storybookGlobals.theme !== currentTheme.value) {\r\n            const storybookTheme = String(storybookGlobals.theme)\r\n            if (themeOptions.value.includes(storybookTheme)) {\r\n              applyTweakcnTheme(storybookTheme)\r\n            }\r\n          }\r\n        }\r\n      } catch (e) {\r\n        // 무시\r\n      }\r\n    }\r\n    \r\n    // 초기 확인\r\n    checkStorybookGlobals()\r\n    \r\n    // 주기적으로 확인 (스토리북이 직접 이벤트를 제공하지 않는 경우)\r\n    intervalId = setInterval(checkStorybookGlobals, 500)\r\n  }\r\n  \r\n  // 컴포넌트 언마운트 시 정리\r\n  onUnmounted(() => {\r\n    if (themeObserver) {\r\n      themeObserver.disconnect()\r\n      themeObserver = null\r\n    }\r\n    if (styleObserver) {\r\n      styleObserver.disconnect()\r\n      styleObserver = null\r\n    }\r\n    if (intervalId) {\r\n      clearInterval(intervalId)\r\n    }\r\n  })\r\n})\r\n</script>\r\n\r\n<template>\r\n  <header :class=\"cn('flex items-center justify-between w-full', preset.containerClass)\">\r\n    <!-- 왼쪽: 햄버거 메뉴 + 로고 + 네비게이션 -->\r\n    <div class=\"flex items-center gap-6 flex-1\">\r\n      <!-- 햄버거 메뉴 버튼 (사이드바 토글) -->\r\n      <JButton\r\n        v-if=\"showSidebarToggle\"\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        class=\"flex-shrink-0\"\r\n        aria-label=\"사이드바 토글\"\r\n        @click=\"handleSidebarToggle\"\r\n      >\r\n        <JIcon name=\"menu\" size=\"md\" />\r\n      </JButton>\r\n\r\n      <!-- 로고 -->\r\n      <div\r\n        v-if=\"displayLogoImage || logoText\"\r\n        class=\"flex items-center cursor-pointer\"\r\n        @click=\"handleLogoClick\"\r\n      >\r\n        <!-- 로고 이미지 (logo prop이 있고 에러가 2 미만일 때) -->\r\n        <img\r\n          v-if=\"displayLogoImage && logoImageError < 2\"\r\n          :src=\"displayLogoImage\"\r\n          alt=\"로고\"\r\n          class=\"h-8 w-auto\"\r\n          @error=\"handleLogoError\"\r\n        />\r\n        <!-- 로고 텍스트 (기본 또는 모든 이미지 실패 시) -->\r\n        <span\r\n          v-else-if=\"logoText\"\r\n          class=\"text-lg font-bold text-foreground\"\r\n        >\r\n          {{ logoText }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- 네비게이션 -->\r\n      <nav\r\n        v-if=\"navItems && navItems.length > 0\"\r\n        class=\"flex items-center gap-1\"\r\n      >\r\n        <JButton\r\n          v-for=\"(item, index) in navItems\"\r\n          :key=\"index\"\r\n          variant=\"ghost\"\r\n          :class=\"cn(\r\n            preset.navItemClass,\r\n            item.active && preset.navItemActiveClass\r\n          )\"\r\n          @click=\"handleNavClick(item, index)\"\r\n        >\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1.5\"\r\n          />\r\n          {{ item.label }}\r\n        </JButton>\r\n      </nav>\r\n    </div>\r\n\r\n    <!-- 오른쪽: 테마 선택기 + 알림 + 다크모드 토글 + 사용자 메뉴 -->\r\n    <div class=\"flex items-center gap-3\">\r\n      <!-- tweakcn 테마 선택기 -->\r\n      <JPopover\r\n        v-if=\"showThemeSelector\"\r\n        position=\"bottom\"\r\n        align=\"end\"\r\n        styletype=\"default-sm\"\r\n      >\r\n        <template #trigger>\r\n          <JButton\r\n            variant=\"ghost\"\r\n            size=\"icon\"\r\n            aria-label=\"테마 선택\"\r\n          >\r\n            <JIcon name=\"palette\" size=\"md\" />\r\n          </JButton>\r\n        </template>\r\n        <div class=\"p-2 min-w-[200px]\">\r\n          <div class=\"text-xs font-medium text-muted-foreground px-2 py-1.5 mb-1\">\r\n            테마 선택\r\n          </div>\r\n          <div class=\"space-y-1\">\r\n            <button\r\n              v-for=\"theme in themeOptions\"\r\n              :key=\"theme\"\r\n              :class=\"cn(\r\n                'w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors',\r\n                'hover:bg-accent hover:text-accent-foreground',\r\n                'border-0 outline-none text-left',\r\n                currentTheme === theme && 'bg-accent text-accent-foreground font-medium'\r\n              )\"\r\n              @click=\"handleThemeChange(theme)\"\r\n            >\r\n              <JIcon\r\n                v-if=\"currentTheme === theme\"\r\n                name=\"check\"\r\n                size=\"sm\"\r\n                class=\"flex-shrink-0\"\r\n              />\r\n              <span v-else class=\"w-4\" />\r\n              <span class=\"flex-1 capitalize\">{{ theme }}</span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </JPopover>\r\n\r\n      <!-- 알림 -->\r\n      <JPopover\r\n        v-if=\"showNotifications\"\r\n        position=\"bottom\"\r\n        align=\"end\"\r\n        styletype=\"default-sm\"\r\n      >\r\n        <template #trigger>\r\n          <JButton\r\n            variant=\"ghost\"\r\n            size=\"icon\"\r\n            class=\"relative\"\r\n            aria-label=\"알림\"\r\n          >\r\n            <JIcon name=\"circleAlert\" size=\"md\" />\r\n            <span\r\n              v-if=\"unreadCount > 0\"\r\n              class=\"absolute top-0 right-0 h-4 w-4 rounded-full bg-destructive text-destructive-foreground text-xs flex items-center justify-center\"\r\n            >\r\n              {{ unreadCount > 9 ? '9+' : unreadCount }}\r\n            </span>\r\n          </JButton>\r\n        </template>\r\n        <div class=\"p-2\">\r\n          <div\r\n            v-if=\"notifications && notifications.length > 0\"\r\n            class=\"max-h-96 overflow-y-auto space-y-1\"\r\n          >\r\n            <div\r\n              v-for=\"notification in notifications\"\r\n              :key=\"notification.id\"\r\n              :class=\"cn(\r\n                'p-3 rounded-md cursor-pointer transition-colors',\r\n                !notification.read ? 'bg-accent' : 'hover:bg-accent/50'\r\n              )\"\r\n              @click=\"handleNotificationClick(notification)\"\r\n            >\r\n              <div class=\"flex items-start gap-2\">\r\n                <JIcon\r\n                  v-if=\"notification.icon\"\r\n                  :name=\"notification.icon\"\r\n                  size=\"sm\"\r\n                  class=\"mt-0.5 flex-shrink-0\"\r\n                />\r\n                <div class=\"flex-1 min-w-0\">\r\n                  <p class=\"text-sm font-medium text-foreground\">\r\n                    {{ notification.title }}\r\n                  </p>\r\n                  <p\r\n                    v-if=\"notification.message\"\r\n                    class=\"text-xs text-muted-foreground mt-1\"\r\n                  >\r\n                    {{ notification.message }}\r\n                  </p>\r\n                  <p\r\n                    v-if=\"notification.time\"\r\n                    class=\"text-xs text-muted-foreground/60 mt-1\"\r\n                  >\r\n                    {{ notification.time }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            v-else\r\n            class=\"p-4 text-center text-sm text-muted-foreground\"\r\n          >\r\n            알림이 없습니다.\r\n          </div>\r\n        </div>\r\n      </JPopover>\r\n\r\n      <!-- 다크모드 토글 버튼 -->\r\n      <JButton\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        :aria-label=\"isDarkMode ? '라이트 모드로 전환' : '다크 모드로 전환'\"\r\n        @click=\"handleThemeToggle\"\r\n      >\r\n        <JIcon :name=\"themeIcon\" size=\"md\" />\r\n      </JButton>\r\n\r\n      <!-- 사용자 메뉴 (userName이 있으면 표시) -->\r\n      <JPopover\r\n        v-if=\"userName\"\r\n        position=\"bottom\"\r\n        align=\"end\"\r\n        styletype=\"default-sm\"\r\n      >\r\n        <template #trigger>\r\n          <div class=\"flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity\">\r\n            <JAvatar\r\n              :src=\"userAvatar\"\r\n              :fallback=\"userName ? userName[0] : 'U'\"\r\n              size=\"sm\"\r\n            />\r\n            <span\r\n              class=\"text-sm text-foreground hidden sm:inline\"\r\n            >\r\n              {{ userName }}\r\n            </span>\r\n            <JIcon name=\"chevronDown\" size=\"sm\" class=\"text-muted-foreground hidden sm:inline\" />\r\n          </div>\r\n        </template>\r\n        <div class=\"w-full rounded-md overflow-hidden\">\r\n          <!-- 프로필 정보 영역 -->\r\n          <div class=\"px-3 py-2 border-b border-border\">\r\n            <p class=\"text-sm font-medium text-foreground\">{{ userName }}</p>\r\n            <p\r\n              v-if=\"userEmail\"\r\n              class=\"text-xs text-muted-foreground mt-0.5\"\r\n            >\r\n              {{ userEmail }}\r\n            </p>\r\n          </div>\r\n          \r\n          <!-- 메뉴 아이템 -->\r\n          <template v-for=\"(group, groupIndex) in userMenuGroups\" :key=\"groupIndex\">\r\n            <template v-for=\"(item, itemIndex) in group.items\" :key=\"item.id\">\r\n              <button\r\n                v-if=\"!item.separator\"\r\n                :disabled=\"item.disabled\"\r\n                :class=\"cn(\r\n                  'w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors',\r\n                  item.id === 'logout' \r\n                    ? 'text-destructive hover:bg-destructive/10 hover:text-destructive' \r\n                    : 'hover:bg-accent hover:text-accent-foreground',\r\n                  'disabled:opacity-50 disabled:pointer-events-none',\r\n                  'border-0 outline-none',\r\n                  group.items[itemIndex + 1]?.separator && 'border-b-0'\r\n                )\"\r\n                @click=\"handleUserMenuSelect(item.id)\"\r\n              >\r\n                <JIcon\r\n                  v-if=\"item.icon\"\r\n                  :name=\"item.icon\"\r\n                  size=\"sm\"\r\n                  :class=\"cn(\r\n                    'flex-shrink-0',\r\n                    item.id === 'logout' && 'text-destructive'\r\n                  )\"\r\n                />\r\n                <span class=\"flex-1 text-left truncate\">{{ item.label }}</span>\r\n              </button>\r\n              <div\r\n                v-else-if=\"item.separator && itemIndex > 0\"\r\n                class=\"h-px bg-muted my-1\"\r\n              />\r\n            </template>\r\n            <div\r\n              v-if=\"groupIndex < userMenuGroups.length - 1\"\r\n              class=\"h-px bg-muted my-1\"\r\n            />\r\n          </template>\r\n        </div>\r\n      </JPopover>\r\n\r\n      <!-- 로그인 버튼 (userName이 없으면 표시) -->\r\n      <JButton\r\n        v-else\r\n        variant=\"ghost\"\r\n        size=\"sm\"\r\n        aria-label=\"로그인\"\r\n        @click=\"handleLogin\"\r\n      >\r\n        <JIcon name=\"logIn\" size=\"sm\" class=\"sm:mr-1.5\" />\r\n        <span class=\"hidden sm:inline\">로그인</span>\r\n      </JButton>\r\n\r\n      <!-- 커스텀 슬롯 -->\r\n      <slot name=\"actions\" />\r\n    </div>\r\n  </header>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","STYLE_PRESETS","preset","computed","logoImageError","ref","logoImageSrc","displayLogoImage","logoFallback","handleLogoError","unreadCount","n","fixedUserMenuItems","userMenuGroups","handleLogoClick","handleNavClick","item","index","handleNotificationClick","handleUserMenuSelect","itemId","handleLogin","handleSidebarToggle","isDarkMode","currentTheme","getDefaultTheme","themeOptions","isInternalUpdate","themeObserver","styleObserver","isStorybook","updateThemeOptions","detectedThemes","detectThemeClasses","ensuredThemes","ensureDefaultTheme","filtered","theme","getStoredDarkModeTheme","stored","applyDarkModeTheme","root","handleThemeToggle","newTheme","getStoredTweakcnTheme","validateThemeExists","getStoredTheme","applyTweakcnTheme","validatedTheme","success","applyTheme","setStoredTheme","storybookGlobals","defaultTheme","handleThemeChange","themeIcon","onMounted","darkModeTheme","storedTheme","hasDarkClass","currentThemeClass","cls","themeName","intervalId","checkStorybookGlobals","storybookDarkMode","storybookTheme","onUnmounted","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_hoisted_1","_createBlock","JButton","_createVNode","JIcon","_hoisted_3","_toDisplayString","_openBlock","_hoisted_4","_Fragment","_renderList","$event","_hoisted_5","JPopover","_hoisted_6","_cache","_hoisted_7","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","notification","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","JAvatar","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","group","groupIndex","itemIndex","_hoisted_29","_hoisted_28","_hoisted_30","_renderSlot","_ctx"],"mappings":"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"}

package/components/organisms/JHeader.vue2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JHeader.vue.cjs");exports.default=e.default;
+//# sourceMappingURL=JHeader.vue2.cjs.map

package/components/organisms/JHeader.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"JHeader.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/organisms/JHeader.vue2.js

@@ -0,0 +1,5 @@
+import f from "./JHeader.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=JHeader.vue2.js.map

package/components/organisms/JHeader.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JHeader.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/organisms/JModal.vue.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const i=require("../atoms/JButton.vue.cjs");require("lucide-vue-next");require("clsx");require("tailwind-merge");require("@internationalized/date");require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */const y=require("../molecules/JFormField.vue.cjs");;/* empty css                             */;/* empty css                        */;/* empty css                              */;/* empty css                               */const v=require("../shadcn/Dialog.vue.cjs"),q=require("../shadcn/DialogContent.vue.cjs"),x=require("../shadcn/DialogHeader.vue.cjs"),_=require("../shadcn/DialogTitle.vue.cjs"),g=require("../shadcn/DialogBody.vue.cjs"),F=require("../shadcn/DialogFooter.vue.cjs"),V={class:"space-y-4"},b={key:0,class:"text-sm text-muted-foreground"},C={key:1},h=e.defineComponent({__name:"JModal",props:{open:{type:Boolean,default:!1},title:{},description:{},size:{default:"md"},showFormField:{type:Boolean,default:!1},formFieldLabel:{},formFieldError:{},formFieldRequired:{type:Boolean},formFieldInputType:{default:"text"},formFieldInputPlaceholder:{},formFieldValue:{},formFieldType:{default:"input"},buttonType:{default:"OkCancel"},confirmText:{default:"확인"},cancelText:{default:"취소"},confirmVariant:{default:"default"},confirmDisabled:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:open","confirm","cancel"],setup(t,{emit:d}){const r=t,u=d,a=e.ref(r.formFieldValue||""),c=e.computed(()=>`modal-input-${Math.random().toString(36).substr(2,9)}`),s=e.computed(()=>({sm:"!max-w-sm",md:"!max-w-md",lg:"!max-w-2xl",xl:"!max-w-4xl","2xl":"!max-w-6xl",full:"!max-w-[95vw]"})[r.size]);e.watch(()=>r.formFieldValue,l=>{l!==void 0&&(a.value=l)});const f=l=>{u("update:open",l)},o=()=>{const l=r.showFormField?a.value:void 0;u("confirm",l)},m=()=>{u("cancel"),a.value=r.formFieldValue||""};return(l,n)=>(e.openBlock(),e.createBlock(e.unref(v.default),{open:t.open,"onUpdate:open":f,class:e.normalizeClass(s.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(q.default),null,{default:e.withCtx(()=>[t.title?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,class:"bg-muted/50 border-b"},{default:e.withCtx(()=>[e.createVNode(e.unref(_.default),null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})]),_:1})):e.createCommentVNode("",!0),e.createVNode(e.unref(g.default),null,{default:e.withCtx(()=>[e.createElementVNode("div",V,[t.description?(e.openBlock(),e.createElementBlock("p",b,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),t.showFormField?(e.openBlock(),e.createElementBlock("div",C,[e.createVNode(e.unref(y.default),{label:t.formFieldLabel,"error-msg":t.formFieldError,required:t.formFieldRequired,type:t.formFieldType,id:c.value,modelValue:a.value,"onUpdate:modelValue":n[0]||(n[0]=p=>a.value=p),"input-type":t.formFieldInputType,placeholder:t.formFieldInputPlaceholder,disabled:t.disabled},null,8,["label","error-msg","required","type","id","modelValue","input-type","placeholder","disabled"])])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"body")])]),_:3}),e.createVNode(e.unref(F.default),null,{default:e.withCtx(()=>[t.buttonType==="OkCancel"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(e.unref(i.default),{variant:"outline",onClick:m},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelText),1)]),_:1}),e.createVNode(e.unref(i.default),{variant:t.confirmVariant,disabled:t.confirmDisabled,onClick:o},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmText),1)]),_:1},8,["variant","disabled"])],64)):t.buttonType==="Ok"?(e.openBlock(),e.createBlock(e.unref(i.default),{key:1,variant:t.confirmVariant,disabled:t.confirmDisabled,onClick:o,class:"w-full"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmText),1)]),_:1},8,["variant","disabled"])):e.createCommentVNode("",!0)]),_:1})]),_:3})]),_:3},8,["open","class"]))}});exports.default=h;
+//# sourceMappingURL=JModal.vue.cjs.map

package/components/organisms/JModal.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"JModal.vue.cjs","sources":["../../../../src/components/organisms/JModal.vue"],"sourcesContent":["<template>\r\n  <Dialog\r\n    :open=\"open\"\r\n    @update:open=\"onOpenChange\"\r\n    :class=\"sizeClass\"\r\n  >\r\n    <DialogContent>\r\n      <!-- Header -->\r\n      <DialogHeader v-if=\"title\" class=\"bg-muted/50 border-b\">\r\n        <DialogTitle>\r\n          {{ title }}\r\n        </DialogTitle>\r\n      </DialogHeader>\r\n\r\n      <!-- Body -->\r\n      <DialogBody>\r\n        <div class=\"space-y-4\">\r\n          <!-- Description -->\r\n          <p v-if=\"description\" class=\"text-sm text-muted-foreground\">\r\n            {{ description }}\r\n          </p>\r\n\r\n          <!-- JFormField가 있는 경우 -->\r\n          <div v-if=\"showFormField\">\r\n            <JFormField\r\n              :label=\"formFieldLabel\"\r\n              :error-msg=\"formFieldError\"\r\n              :required=\"formFieldRequired\"\r\n              :type=\"formFieldType\"\r\n              :id=\"inputId\"\r\n              v-model=\"inputValue\"\r\n              :input-type=\"formFieldInputType\"\r\n              :placeholder=\"formFieldInputPlaceholder\"\r\n              :disabled=\"disabled\"\r\n            />\r\n          </div>\r\n\r\n          <!-- 커스텀 컨텐츠 슬롯 -->\r\n          <slot name=\"body\" />\r\n        </div>\r\n      </DialogBody>\r\n\r\n      <!-- Footer -->\r\n      <DialogFooter>\r\n        <!-- 확인/취소 버튼 -->\r\n        <template v-if=\"buttonType === 'OkCancel'\">\r\n          <JButton\r\n            variant=\"outline\"\r\n            @click=\"handleCancel\"\r\n          >\r\n            {{ cancelText }}\r\n          </JButton>\r\n          <JButton\r\n            :variant=\"confirmVariant\"\r\n            :disabled=\"confirmDisabled\"\r\n            @click=\"handleConfirm\"\r\n          >\r\n            {{ confirmText }}\r\n          </JButton>\r\n        </template>\r\n        \r\n        <!-- 확인 버튼만 -->\r\n        <template v-else-if=\"buttonType === 'Ok'\">\r\n          <JButton\r\n            :variant=\"confirmVariant\"\r\n            :disabled=\"confirmDisabled\"\r\n            @click=\"handleConfirm\"\r\n            class=\"w-full\"\r\n          >\r\n            {{ confirmText }}\r\n          </JButton>\r\n        </template>\r\n      </DialogFooter>\r\n    </DialogContent>\r\n  </Dialog>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from 'vue'\r\nimport {\r\n  Dialog,\r\n  DialogBody,\r\n  DialogContent,\r\n  DialogFooter,\r\n  DialogHeader,\r\n  DialogTitle,\r\n} from '@/components/shadcn'\r\nimport { JButton } from '@/components/atoms'\r\nimport { JFormField } from '@/components/molecules'\r\n\r\nexport interface JModalProps {\r\n  // 모달 표시 여부\r\n  open: boolean\r\n  // 헤더\r\n  title?: string\r\n  description?: string\r\n  // 모달 사이즈\r\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\r\n  // 폼 필드 (JFormField)\r\n  showFormField?: boolean\r\n  formFieldLabel?: string\r\n  formFieldError?: string\r\n  formFieldRequired?: boolean\r\n  // 입력 필드 설정\r\n  formFieldInputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'\r\n  formFieldInputPlaceholder?: string\r\n  formFieldValue?: string\r\n  formFieldType?: 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\r\n  // 버튼 설정\r\n  buttonType?: 'Ok' | 'OkCancel'\r\n  confirmText?: string\r\n  cancelText?: string\r\n  confirmVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'\r\n  confirmDisabled?: boolean\r\n  // 기타\r\n  disabled?: boolean\r\n}\r\n\r\nconst props = withDefaults(defineProps<JModalProps>(), {\r\n  open: false,\r\n  size: 'md',\r\n  showFormField: false,\r\n  formFieldInputType: 'text',\r\n  formFieldType: 'input',\r\n  buttonType: 'OkCancel',\r\n  confirmText: '확인',\r\n  cancelText: '취소',\r\n  confirmVariant: 'default',\r\n  confirmDisabled: false,\r\n  disabled: false,\r\n})\r\n\r\nconst emit = defineEmits<{\r\n  'update:open': [value: boolean]\r\n  'confirm': [value?: string]\r\n  'cancel': []\r\n}>()\r\n\r\n// 입력값 관리\r\nconst inputValue = ref(props.formFieldValue || '')\r\n\r\n// 입력 필드 ID 생성\r\nconst inputId = computed(() => `modal-input-${Math.random().toString(36).substr(2, 9)}`)\r\n\r\n// 사이즈 클래스 계산\r\nconst sizeClass = computed(() => {\r\n  // Dialog.vue에 기본 max-w-lg가 하드코딩되어 있어 !max-w-*로 오버라이드\r\n  const sizeMap: Record<NonNullable<JModalProps['size']>, string> = {\r\n    'sm': '!max-w-sm',\r\n    'md': '!max-w-md',\r\n    'lg': '!max-w-2xl',\r\n    'xl': '!max-w-4xl',\r\n    '2xl': '!max-w-6xl',\r\n    'full': '!max-w-[95vw]'\r\n  }\r\n  return sizeMap[props.size]\r\n})\r\n\r\n// props.formFieldValue 변경 감지\r\nwatch(() => props.formFieldValue, (newValue) => {\r\n  if (newValue !== undefined) {\r\n    inputValue.value = newValue\r\n  }\r\n})\r\n\r\n// 모달 열기/닫기 핸들러\r\nconst onOpenChange = (value: boolean) => {\r\n  emit('update:open', value)\r\n}\r\n\r\n// 확인 버튼 핸들러\r\nconst handleConfirm = () => {\r\n  const value = props.showFormField ? inputValue.value : undefined\r\n  emit('confirm', value)\r\n}\r\n\r\n// 취소 버튼 핸들러\r\nconst handleCancel = () => {\r\n  emit('cancel')\r\n  // 입력값 초기화\r\n  inputValue.value = props.formFieldValue || ''\r\n}\r\n</script>\r\n"],"names":["props","__props","emit","__emit","inputValue","ref","inputId","computed","sizeClass","watch","newValue","onOpenChange","value","handleConfirm","handleCancel","_createBlock","_unref","Dialog","_createVNode","DialogContent","DialogHeader","DialogTitle","DialogBody","_createElementVNode","_hoisted_1","_createElementBlock","_hoisted_2","_toDisplayString","_hoisted_3","JFormField","$event","_renderSlot","_ctx","DialogFooter","_Fragment","JButton"],"mappings":"+kEAsHA,MAAMA,EAAQC,EAcRC,EAAOC,EAOPC,EAAaC,EAAAA,IAAIL,EAAM,gBAAkB,EAAE,EAG3CM,EAAUC,EAAAA,SAAS,IAAM,eAAe,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,OAAO,EAAG,CAAC,CAAC,EAAE,EAGjFC,EAAYD,EAAAA,SAAS,KAEyC,CAChE,GAAM,YACN,GAAM,YACN,GAAM,aACN,GAAM,aACN,MAAO,aACP,KAAQ,eAAA,GAEKP,EAAM,IAAI,CAC1B,EAGDS,EAAAA,MAAM,IAAMT,EAAM,eAAiBU,GAAa,CAC1CA,IAAa,SACfN,EAAW,MAAQM,EAEvB,CAAC,EAGD,MAAMC,EAAgBC,GAAmB,CACvCV,EAAK,cAAeU,CAAK,CAC3B,EAGMC,EAAgB,IAAM,CAC1B,MAAMD,EAAQZ,EAAM,cAAgBI,EAAW,MAAQ,OACvDF,EAAK,UAAWU,CAAK,CACvB,EAGME,EAAe,IAAM,CACzBZ,EAAK,QAAQ,EAEbE,EAAW,MAAQJ,EAAM,gBAAkB,EAC7C,8BApLEe,EAAAA,YAyESC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CAxEN,KAAMhB,EAAA,KACN,gBAAaU,EACb,uBAAOH,EAAA,KAAS,CAAA,qBAEjB,IAmEgB,CAnEhBU,EAAAA,YAmEgBF,EAAAA,MAAAG,SAAA,EAAA,KAAA,mBAjEd,IAIe,CAJKlB,EAAA,qBAApBc,EAAAA,YAIeC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,OAJY,MAAM,sBAAA,qBAC/B,IAEc,CAFdF,EAAAA,YAEcF,EAAAA,MAAAK,SAAA,EAAA,KAAA,mBADZ,IAAW,qCAARpB,EAAA,KAAK,EAAA,CAAA,CAAA,8CAKZiB,EAAAA,YAyBaF,EAAAA,MAAAM,SAAA,EAAA,KAAA,mBAxBX,IAuBM,CAvBNC,EAAAA,mBAuBM,MAvBNC,EAuBM,CArBKvB,EAAA,2BAATwB,EAAAA,mBAEI,IAFJC,EAEIC,EAAAA,gBADC1B,EAAA,WAAW,EAAA,CAAA,+BAILA,EAAA,6BAAXwB,EAAAA,mBAYM,MAAAG,EAAA,CAXJV,cAUEF,EAAAA,MAAAa,EAAAA,OAAA,EAAA,CATC,MAAO5B,EAAA,eACP,YAAWA,EAAA,eACX,SAAUA,EAAA,kBACV,KAAMA,EAAA,cACN,GAAIK,EAAA,iBACIF,EAAA,2CAAAA,EAAU,MAAA0B,GAClB,aAAY7B,EAAA,mBACZ,YAAaA,EAAA,0BACb,SAAUA,EAAA,QAAA,yIAKf8B,aAAoBC,EAAA,OAAA,MAAA,CAAA,WAKxBd,EAAAA,YA6BeF,EAAAA,MAAAiB,SAAA,EAAA,KAAA,mBA3Bb,IAcW,CAdKhC,EAAA,aAAU,0BAA1BwB,EAAAA,mBAcWS,WAAA,CAAA,IAAA,GAAA,CAbThB,cAKUF,EAAAA,MAAAmB,EAAAA,OAAA,EAAA,CAJR,QAAQ,UACP,QAAOrB,CAAA,qBAER,IAAgB,qCAAbb,EAAA,UAAU,EAAA,CAAA,CAAA,SAEfiB,cAMUF,EAAAA,MAAAmB,EAAAA,OAAA,EAAA,CALP,QAASlC,EAAA,eACT,SAAUA,EAAA,gBACV,QAAOY,CAAA,qBAER,IAAiB,qCAAdZ,EAAA,WAAW,EAAA,CAAA,CAAA,wCAKGA,EAAA,aAAU,oBAC7Bc,EAAAA,YAOUC,QAAAmB,EAAAA,OAAA,EAAA,OANP,QAASlC,EAAA,eACT,SAAUA,EAAA,gBACV,QAAOY,EACR,MAAM,QAAA,qBAEN,IAAiB,qCAAdZ,EAAA,WAAW,EAAA,CAAA,CAAA"}