piratezon_new/app/layouts/admin.vue

<script setup>
  import { ref, computed, watch } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import AdminAlertModal from "~/components/admin/AdminAlertModal.vue";
  import AdminModal from "~/components/admin/AdminModal.vue";

  const route = useRoute();
  const router = useRouter();

  // 메뉴 열림 상태 관리
  const openMenus = ref(["dashboard"]);

  // GNB 메뉴 구조
  const menuItems = ref([
    {
      id: "dashboard",
      title: "📊 대시보드",
      path: "/site-manager/dashboard",
    },
    {
      id: "admins",
      title: "🔑 관리자 관리",
      path: "/site-manager/admins",
    },
    {
      id: "field",
      title: "🗺️ 분야 및 지역 관리",
      children: [
        {
          title: "낚시분야",
          path: "/site-manager/field/list",
          pattern: /^\/site-manager\/field\/(list|create|edit|detail)/,
        },
        {
          title: "지역관리",
          path: "/site-manager/area/list",
          pattern: /^\/site-manager\/area\/(list|create|edit|detail)/,
        },
      ],
    },
    {
      id: "fishing",
      title: "⚓ 선상 및 낚시터 관리",
      children: [
        {
          title: "선상관리",
          path: "/site-manager/onboard/list",
          pattern: /^\/site-manager\/onboard\/(list|create|edit|detail)/,
        },
        {
          title: "낚시터관리",
          path: "/site-manager/fishing/list",
          pattern: /^\/site-manager\/fishing\/(list|create|edit|detail)/,
        }
      ],
    },
    {
      id: "challenge",
      title: "🏆 챌린지 관리",
      path: "/site-manager/challenge/list",
      pattern: /^\/site-manager\/challenge\/(list|create|edit|detail)/,
    },
    {
      id: "quest",
      title: "🏅 퀘스트 관리",
      path: "/site-manager/quest/list",
      pattern: /^\/site-manager\/quest\/(list|create|edit|detail)/,
    },
    {
      id: "item",
      title: "🎁 아이템 관리",
      path: "/site-manager/item/list",
      pattern: /^\/site-manager\/item\/(list|create|edit|detail)/,
    },
    {
      id: "species",
      title: "🐟 어종 관리",
      children: [
        {
          title: "어종구분",
          path: "/site-manager/species/list",
          pattern: /^\/site-manager\/species\/(list|create|edit|detail)/,
        },
        {
          title: "챌린지 어종관리",
          path: "/site-manager/challenge_species/list",
          pattern: /^\/site-manager\/challenge_species\/(list|create|edit|detail)/,
        },
        {
          title: "퀘스트 어종관리",
          path: "/site-manager/quest_species/list",
          pattern: /^\/site-manager\/quest_species\/(list|create|edit|detail)/,
        }
      ],
    },
    {
      id: "user",
      title: "👥 회원 관리",
      path: "/site-manager/user/list",
      pattern: /^\/site-manager\/user\/(list|create|edit|detail)/,
    },
  ]);

  // 메뉴 토글
  const toggleMenu = (menuId) => {
    const index = openMenus.value.indexOf(menuId);
    if (index > -1) {
      openMenus.value.splice(index, 1);
    } else {
      openMenus.value.push(menuId);
    }
  };

  // 메뉴 활성 여부 (pattern 우선, 없으면 path 정확 일치)
  // children 없는 단일 메뉴, 서브메뉴 모두에 사용
  const isSubmenuActive = (item) => {
    if (item?.pattern instanceof RegExp && item.pattern.test(route.path)) return true;
    return route.path === item?.path;
  };

  // 현재 경로에 맞는 메뉴 찾기
  const findCurrentMenu = () => {
    const currentPath = route.path;

    // 대시보드인 경우
    if (currentPath === "/site-manager/dashboard" || currentPath === "/site-manager") {
      return { menu: null, child: null };
    }

    for (const menu of menuItems.value) {
      // children이 없는 단일 메뉴는 자기 자신이 매칭 대상
      if (!menu.children) {
        if (menu.pattern instanceof RegExp && menu.pattern.test(currentPath)) {
          return { menu, child: { title: menu.title, path: menu.path } };
        }
        if (menu.path && currentPath === menu.path) {
          return { menu, child: { title: menu.title, path: menu.path } };
        }
        continue;
      }

      for (const child of menu.children) {
        // pattern이 있으면 정규식으로 매칭, 없으면 정확히 일치하는지 확인
        if (child.pattern instanceof RegExp && child.pattern.test(currentPath)) {
          return { menu, child };
        } else if (currentPath === child.path) {
          return { menu, child };
        }
      }
    }

    return { menu: null, child: null };
  };

  // 라우트 변경 시 현재 경로에 해당하는 토글만 열고 나머지는 모두 접기
  watch(
    () => route.path,
    () => {
      const { menu } = findCurrentMenu();
      openMenus.value = menu?.children ? [menu.id] : [];
    },
    { immediate: true }
  );

  // 페이지 타이틀 계산
  const pageTitle = computed(() => {
    const currentPath = route.path;

    // 대시보드
    if (currentPath === "/site-manager/dashboard" || currentPath === "/site-manager") {
      return "📊 대시보드";
    }

    const { child } = findCurrentMenu();

    if (child) {
      // 상세 페이지 타이틀 처리
      if (currentPath.includes("/create")) {
        return `${child.title} 등록`;
      } else if (currentPath.includes("/edit/")) {
        return `${child.title} 수정`;
      } else if (currentPath.includes("/detail/")) {
        return `${child.title} 상세`;
      } else if (currentPath.includes("/print/")) {
        return `${child.title} 인쇄`;
      } else if (currentPath.includes("/print-a2")) {
        return `${child.title} 인쇄 (A2)`;
      }
      return child.title;
    }

    return "📊 대시보드";
  });

  // Breadcrumb 계산
  const breadcrumbs = computed(() => {
    const currentPath = route.path;
    const crumbs = [{ title: "대시보드", path: "/site-manager/dashboard" }];

    // 대시보드인 경우 Home만 표시
    if (currentPath === "/site-manager/dashboard" || currentPath === "/site-manager") {
      return crumbs;
    }

    const { menu, child } = findCurrentMenu();
    if (!menu || !child) return crumbs;

    // 현재 페이지의 액션 라벨 (등록/수정/상세/인쇄 등)
    let subLabel = null;
    if (currentPath.includes("/create")) subLabel = "등록";
    else if (currentPath.includes("/edit/")) subLabel = "수정";
    else if (currentPath.includes("/detail/")) subLabel = "상세";
    else if (currentPath.includes("/print/")) subLabel = "인쇄";
    else if (currentPath.includes("/print-a2")) subLabel = "인쇄 (A2)";

    if (menu.children) {
      // 서브메뉴 있는 메뉴: 메뉴그룹 → 서브메뉴 → (액션)
      crumbs.push({ title: menu.title, path: null });
      if (subLabel) {
        crumbs.push({ title: child.title, path: child.path });
        crumbs.push({ title: subLabel, path: null });
      } else {
        crumbs.push({ title: child.title, path: null });
      }
    } else {
      // 단일 메뉴 (children 없음): 메뉴 → (액션) 만, 중복 없이
      if (subLabel) {
        crumbs.push({ title: menu.title, path: menu.path });
        crumbs.push({ title: subLabel, path: null });
      } else {
        crumbs.push({ title: menu.title, path: null });
      }
    }

    return crumbs;
  });

  // 로그아웃 모달
  const showLogoutModal = ref(false);

  const handleLogout = () => {
    console.log("[Logout] 로그아웃 버튼 클릭");
    showLogoutModal.value = true;
    console.log("[Logout] showLogoutModal:", showLogoutModal.value);
  };

  const confirmLogout = () => {
    console.log("[Logout] 로그아웃 확인");
    localStorage.removeItem("admin_token");
    localStorage.removeItem("admin_user");
    router.push("/site-manager");
  };

  const closeLogoutModal = () => {
    console.log("[Logout] 모달 닫기");
    showLogoutModal.value = false;
  };

  // 정보수정 모달
  const showProfileModal = ref(false);
  const currentAdmin = ref(null);

  const { get } = useApi();

  // 알림 모달
  const alertModal = ref({
    show: false,
    title: "알림",
    message: "",
    type: "alert",
    onConfirm: null,
  });

  // 알림 모달 표시
  const showAlert = (message, title = "알림") => {
    alertModal.value = {
      show: true,
      title,
      message,
      type: "alert",
      onConfirm: null,
    };
  };

  // 알림 모달 닫기
  const closeAlertModal = () => {
    alertModal.value.show = false;
  };

  // 알림 모달 확인
  const handleAlertConfirm = () => {
    if (alertModal.value.onConfirm) {
      alertModal.value.onConfirm();
    }
    closeAlertModal();
  };

  // 알림 모달 취소
  const handleAlertCancel = () => {
    closeAlertModal();
  };

  // 현재 로그인한 관리자 ID 가져오기
  const getCurrentAdminId = () => {
    if (typeof window === "undefined") return null;
    const user = localStorage.getItem("admin_user");
    if (!user) return null;
    try {
      return JSON.parse(user).id;
    } catch {
      return null;
    }
  };

  // 대시보드로 이동
  const goToDashboard = () => {
    router.push("/site-manager/dashboard");
  };

  // 정보수정 버튼 클릭
  const goToProfile = async () => {
    const adminId = getCurrentAdminId();
    if (!adminId) {
      showAlert("로그인 정보를 찾을 수 없습니다.", "오류");
      return;
    }

    // 현재 관리자 정보 조회
    const { data, error } = await get(`/admin/${adminId}`);

    if (error) {
      showAlert("관리자 정보를 불러올 수 없습니다.", "오류");
      console.error("[Profile] 관리자 정보 조회 실패:", error);
      return;
    }

    if (data?.success && data?.data) {
      currentAdmin.value = data.data;
      showProfileModal.value = true;
    }
  };

  // 정보수정 모달 닫기
  const closeProfileModal = () => {
    showProfileModal.value = false;
    currentAdmin.value = null;
  };

  // 정보수정 완료
  const handleProfileSaved = (message) => {
    closeProfileModal();
    if (message) {
      showAlert(message, "성공");

      // 로컬스토리지의 사용자 정보도 업데이트
      if (currentAdmin.value) {
        localStorage.setItem("admin_user", JSON.stringify(currentAdmin.value));
      }
    }
  };
</script>

<template>
  <div class="admin--layout">
    <!-- Header -->
    <header class="admin--header">
      <div class="admin--header-left">
        <div class="admin--page-header">
          <div class="admin--breadcrumb">
            <span v-for="(crumb, index) in breadcrumbs" :key="index">
              <NuxtLink v-if="crumb.path" :to="crumb.path" class="admin--breadcrumb-link">
                {{ crumb.title }}
              </NuxtLink>
              <span v-else class="admin--breadcrumb-current">{{ crumb.title }}</span>
              <span
                v-if="index < breadcrumbs.length - 1"
                class="admin--breadcrumb-separator"
                >ㆍ</span
              >
            </span>
          </div>
        </div>
        <h1>{{ pageTitle }}</h1>
      </div>
      <div class="admin--header-right">
        <button class="admin--header-btn" @click="goToProfile">정보수정</button>
        <button
          type="button"
          class="admin--header-btn admin--header-btn-logout"
          @click.prevent="handleLogout"
        >
          로그아웃
        </button>
      </div>
    </header>

    <!-- Main Content Area -->
    <div class="admin--content--wrapper">
      <!-- Sidebar GNB -->
      <aside class="admin--sidebar">
        <NuxtLink to="/site-manager" class="admin--brand" @click="goToDashboard">
          <div class="brand--logo">🏴‍☠️</div>
          <div class="brand--title">
            <h1>파이럿존</h1>
            <span>ADMIN</span>
          </div>
        </NuxtLink>
        <nav class="admin--gnb">
          <div v-for="menu in menuItems" :key="menu.id" class="admin--gnb-group">
            <!-- children 없는 메뉴: 토글 없이 바로 이동 -->
            <NuxtLink
              v-if="!menu.children"
              :to="menu.path"
              class="admin--gnb-title admin--gnb-title-link"
              :class="{ 'is-active': isSubmenuActive(menu) }"
            >
              {{ menu.title }}
            </NuxtLink>

            <!-- children 있는 메뉴: 기존 토글 동작 -->
            <template v-else>
              <div class="admin--gnb-title" @click="toggleMenu(menu.id)">
                {{ menu.title }}
                <span
                  class="admin--gnb-arrow"
                  :class="{ 'is-open': openMenus.includes(menu.id) }"
                >
                  ▼
                </span>
              </div>
              <transition name="admin--submenu">
                <ul v-show="openMenus.includes(menu.id)" class="admin--gnb-submenu">
                  <li
                    v-for="submenu in menu.children"
                    :key="submenu.path"
                    class="admin--gnb-item"
                    :class="{ 'is-active': isSubmenuActive(submenu) }"
                  >
                    <NuxtLink :to="submenu.path" class="admin--gnb-link">
                      {{ submenu.title }}
                    </NuxtLink>
                  </li>
                </ul>
              </transition>
            </template>
          </div>
        </nav>
      </aside>

      <!-- Content Area -->
      <main class="admin--main">
        <!-- Page Content -->
        <slot />
      </main>
    </div>

    <!-- 로그아웃 확인 모달 -->
    <AdminAlertModal
      v-if="showLogoutModal"
      title="로그아웃"
      message="로그아웃 하시겠습니까?"
      type="confirm"
      @confirm="confirmLogout"
      @cancel="closeLogoutModal"
      @close="closeLogoutModal"
    />

    <!-- 관리자 정보수정 모달 -->
    <AdminModal
      v-if="showProfileModal"
      :admin="currentAdmin"
      @close="closeProfileModal"
      @saved="handleProfileSaved"
    />

    <!-- 알림 모달 -->
    <AdminAlertModal
      v-if="alertModal.show"
      :title="alertModal.title"
      :message="alertModal.message"
      :type="alertModal.type"
      @confirm="handleAlertConfirm"
      @cancel="handleAlertCancel"
      @close="closeAlertModal"
    />
  </div>
</template>