influence/components/common/header.vue

<template>
  <header class="new--header">
    <div class="pro--wrap">
      <div class="pro--img"></div>
      <div class="pro--id" @click="proOn ? (proOn = false) : (proOn = true)">
        {{ userName }}
        <i class="ico" :class="[proOn ? 'on' : '']">></i>
        <div class="id--box" v-show="proOn">
          <button type="button" class="btn-profile" @click="myPage(userId)">
            마이페이지
          </button>
          <!--
          <button type="button" class="btn-profile" @click="withdrawal">회원탈퇴</button>
          -->
          <button type="button" class="btn-logout" @click="fnLoguOut">로그아웃</button>
        </div>
      </div>
      <div class="pro--info inf">{{ memberTypeText }}</div>

      <!-- 알림 센터 추가 -->
      <NotificationCenter />
    </div>
    <nav class="gnb">
      <ul class="depth1">
        <template v-for="(menu, index) in arrMenuInfo" :key="index">
          <li :class="{ 'has-submenu': menu.subMenus && menu.subMenus.length > 0 }">
            <button @click="handleMenuClick(menu)" :class="{ actv: isMenuActive(menu) }">
              {{ menu.menuName }}
              <i
                v-if="menu.subMenus && menu.subMenus.length > 0"
                class="ico-arrow"
                :class="{ rotate: activeSubmenu === menu.menuId }"
                >▼</i
              >
            </button>
          </li>

          <!-- 하위 메뉴들을 별도 li로 삽입 -->
          <template
            v-if="
              menu.subMenus && menu.subMenus.length > 0 && activeSubmenu === menu.menuId
            "
          >
            <li
              v-for="(subMenu, subIndex) in menu.subMenus"
              :key="`${index}-sub-${subIndex}`"
              class="submenu-item"
            >
              <button
                @click="handleSubMenuClick(subMenu)"
                :class="{ actv: subMenu.linkType === $route.path }"
              >
                {{ subMenu.menuName }}
              </button>
            </li>
          </template>
        </template>
      </ul>
    </nav>
  </header>
</template>

<script setup>
  /************************************************************************
|    전역
************************************************************************/
  const { $log } = useNuxtApp();
  const proOn = ref(false);
  const pageId = "header";
  const arrMenuInfo = ref([]); // 메뉴정보
  const useStore = useDetailStore();
  const useStoreAuth = useAuthStore();
  const userName = ref("");
  const userCompanyName = ref("");
  const userId = ref("");
  const memberTypeText = ref("사용자");
  const route = useRoute();
  const router = useRouter();
  const activeSubmenu = ref("");
  /************************************************************************
|    함수 : 세팅
************************************************************************/
  const fnSetMenu = () => {
    let info = [];
    arrMenuInfo.value = [];

    // 사용자 타입 확인 (memberType으로 구분)
    const snsUser = useStoreAuth.getSnsTempData?.user;
    const authUser = JSON.parse(localStorage.getItem("authStore"))?.auth;
    const currentUser = snsUser || authUser;
    let memberType = currentUser?.memberType || currentUser?.MEMBER_TYPE;

    userName.value = currentUser?.NICK_NAME || currentUser?.companyName;

    // memberType이 없으면 URL로 판단
    if (!memberType) {
      const currentPath = route.path;
      const companyNumber = currentUser?.COMPANY_NUMBER;

      // 벤더 대시보드 경로이거나 COMPANY_NUMBER가 있으면 벤더사로 판단
      if (currentPath.includes("/vendor/dashboard") || companyNumber) {
        memberType = "VENDOR";
      } else {
        memberType = "INFLUENCER";
      }
    }

    console.log("=== 헤더 메뉴 디버깅 ===");
    console.log("SNS 사용자:", snsUser);
    console.log("Auth 사용자:", authUser);
    console.log("현재 사용자:", currentUser);
    console.log("원본 memberType:", currentUser?.memberType);
    console.log("원본 MEMBER_TYPE:", currentUser?.MEMBER_TYPE);
    console.log("최종 memberType:", memberType);
    console.log("현재 경로:", route.path);
    console.log("COMPANY_NUMBER:", currentUser?.COMPANY_NUMBER);

    if (memberType === "VENDOR") {
      // 벤더사 메뉴
      memberTypeText.value = "벤더사";
      info.push(
        {
          menuId: "menu00",
          parentMenuId: "menu00",
          menuName: "주문 관리",
          linkType: "/view/vendor/dashboard",
        },
        {
          menuId: "menu01",
          parentMenuId: "menu01",
          menuName: "제품 관리",
          linkType: "/view/common/item",
        },
        {
          menuId: "menu02",
          parentMenuId: "menu02",
          menuName: "배송 관리",
          linkType: "/view/common/deli",
          subMenus: [
            {
              menuId: "menu02-1",
              menuName: "배송 관리",
              linkType: "/view/common/deli",
            },
            {
              menuId: "menu02-2",
              menuName: "배송중",
              linkType: "/view/common/deli/shipping",
            },
            {
              menuId: "menu02-3",
              menuName: "배송완료",
              linkType: "/view/common/deli/delivered",
            },
          ],
        },
        {
          menuId: "menu03",
          parentMenuId: "menu03",
          menuName: "인플루언서 관리",
          linkType: "/view/vendor/dashboard/influencer-requests",
        },
        {
          menuId: "menu04",
          parentMenuId: "menu04",
          menuName: "정산 관리",
          linkType: "/view/common/settlement",
        },
        {
          menuId: "menu05",
          parentMenuId: "menu05",
          menuName: "고객센터",
          linkType: "/view/common/cs",
        }
      );
    } else {
      // 인플루언서 메뉴
      memberTypeText.value = "인플루언서";
      info.push(
        {
          menuId: "menu01",
          parentMenuId: "menu01",
          menuName: "제품 관리",
          linkType: "/view/common/item",
        },
        {
          menuId: "menu02",
          parentMenuId: "menu02",
          menuName: "배송 관리",
          linkType: "/view/common/deli",
          subMenus: [
            {
              menuId: "menu02-1",
              menuName: "배송 관리",
              linkType: "/view/common/deli",
            },
            {
              menuId: "menu02-2",
              menuName: "배송중",
              linkType: "/view/common/deli/shipping",
            },
            {
              menuId: "menu02-3",
              menuName: "배송완료",
              linkType: "/view/common/deli/delivered",
            },
          ],
        },
        {
          menuId: "menu03",
          parentMenuId: "menu03",
          menuName: "벤더 관리",
          linkType: "/view/influencer/search",
        },
        {
          menuId: "menu04",
          parentMenuId: "menu04",
          menuName: "정산 관리",
          linkType: "/view/common/settlement",
        },
        {
          menuId: "menu05",
          parentMenuId: "menu05",
          menuName: "고객센터",
          linkType: "/view/common/cs",
        }
      );
    }

    arrMenuInfo.value = info;
    $log.debug("[header][fnSetMenu][success] - MEMBER_TYPE:", memberType);
  };

  const handleMenuClick = (menu) => {
    // 하위 메뉴가 있는 경우 아코디언 토글
    if (menu.subMenus && menu.subMenus.length > 0) {
      // 다른 메뉴가 열려있으면 닫고 현재 메뉴 열기
      if (activeSubmenu.value === menu.menuId) {
        activeSubmenu.value = ""; // 같은 메뉴면 닫기
      } else {
        activeSubmenu.value = menu.menuId; // 다른 메뉴면 현재 메뉴 열기
      }
    } else {
      // 하위 메뉴가 없는 경우 모든 아코디언 닫고 페이지 이동
      activeSubmenu.value = "";
      menuAction(menu.menuId, menu.menuName, menu.linkType);
    }
  };

  const handleSubMenuClick = (subMenu) => {
    // 하위 메뉴 클릭 시 페이지 이동만 (아코디언은 유지)
    menuAction(subMenu.menuId, subMenu.menuName, subMenu.linkType);
  };

  const isMenuActive = (menu) => {
    // 아코디언이 열려있는 경우 해당 메뉴만 활성화
    if (activeSubmenu.value === menu.menuId) {
      return true;
    }

    // 아코디언이 열려있지 않을 때만 페이지 기준으로 활성화 판단
    if (!activeSubmenu.value) {
      // 현재 페이지 경로와 일치하는 경우
      if (menu.linkType === route.path) {
        return true;
      }

      // 하위 메뉴 중 하나가 현재 페이지인 경우
      if (menu.subMenus && menu.subMenus.length > 0) {
        const hasActiveSubMenu = menu.subMenus.some(
          (subMenu) => subMenu.linkType === route.path
        );
        if (hasActiveSubMenu) {
          return true;
        }
      }
    }

    return false;
  };

  const menuAction = (__MENUID, _MENUROOTNAME, __URL) => {
    useStore.menuInfo.menuIndex = "0";
    useStore.menuInfo.menuId = __MENUID;
    useStore.menuInfo.pageRtName = _MENUROOTNAME;
    useStore.menuInfo.pageStatus = null;
    useUtil.setPageMove(__URL);
  };

  const fnLoguOut = () => {
    const { logout } = useLogout();
    logout();
  };

  const myPage = () => {
    router.push({
      path: "/view/common/mypage",
    });
  };

  const withdrawal = () => {
    let _req = {
      SEQ: useStoreAuth.getSnsTempData.user.SEQ,
      GOOGLE_REFRESH_TOKEN: useStoreAuth.getSnsTempData.user.GOOGLE_REFRESH_TOKEN,
      KAKAO_REFRESH_TOKEN: useStoreAuth.getSnsTempData.user.KAKAO_REFRESH_TOKEN,
      NAVER_REFRESH_TOKEN: useStoreAuth.getSnsTempData.user.NAVER_REFRESH_TOKEN,
    };

    let _uri = useStoreAuth.getSnsTempData.user.GOOGLE_REFRESH_TOKEN
      ? "/auth/withdrawal"
      : useStoreAuth.getSnsTempData.user.KAKAO_REFRESH_TOKEN
      ? "/auth/kakaowithdrawal"
      : useStoreAuth.getSnsTempData.user.NAVER_REFRESH_TOKEN
      ? "/auth/naverwithdrawal"
      : "/auth/withdrawal";

    useAxios()
      .post(_uri, _req)
      .then((res) => {
        localStorage.removeItem("tempAccess");
        useStore.getSnsTempData = "";
        useAuthStore().setLogout();
        router.push({
          path: "/",
        });
      })
      .catch((error) => {
        if (error.response) {
          console.log("status:", error.response.status, "data:", error.response.data);
          // 안전하게 errCode, message 접근
          const errData = error.response.data || {};
          const errCode = errData.errCode || errData.errorCode || errData.code || "";
          const errMsg = errData.message || "알 수 없는 오류가 발생했습니다.";
          console.log("errCode:", errCode, "message:", errMsg);
        } else {
          console.log("error:", error.message, error.code);
        }
        if (error.response?.status) {
          fnLoginSet(error.response.data.messages.message);
        }
        $log.debug("[withdrawal][fnIdPwCheck][error]");
      })
      .finally(() => {
        $log.debug("[withdrawal][fnIdPwCheck][finished]");
      });
  };
  // 페이지 변경 시 아코디언 상태 관리 (간단한 ref 기반)
  const currentActivePage = ref(route.path);

  /************************************************************************
|    라이프사이클 : onMounted
************************************************************************/
  onMounted(() => {
    console.log(useStoreAuth.getSnsTempData.user);
    userId.value = localStorage.getItem("tempAccess");
    // userName.value = JSON.parse(localStorage.getItem("authStore"))?.auth.name;
    // userCompanyName.value = JSON.parse(
    //   localStorage.getItem("authStore")
    // )?.auth.companyName;
    fnSetMenu();
  });
</script>

<style scoped>
  .new--header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }

  .pro--wrap {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .pro--img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  }

  /* .pro--img::before {
    content: "👤";
    color: white;
    font-size: 18px;
  } */

  .pro--id {
    position: relative;
    color: #374151;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .pro--id:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
  }

  .ico {
    margin-left: 8px;
    transition: transform 0.2s ease;
    color: #9ca3af;
  }

  .ico.on {
    transform: rotate(90deg);
    color: #667eea;
  }

  .id--box {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    overflow: hidden;
    min-width: 160px;
  }

  .btn-profile,
  .btn-logout {
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #374151;
  }

  .btn-profile:hover {
    background: #f3f4f6;
    color: #667eea;
  }

  .btn-logout:hover {
    background: #fef2f2;
    color: #dc2626;
  }

  .pro--info {
    margin-left: auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  }

  .gnb {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
  }

  .depth1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .depth1 button {
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 3px solid transparent;
    text-align: left;
  }

  .depth1 button:hover {
    color: #667eea;
    transform: translateY(-1px);
  }

  .depth1 button.actv {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
  }

  .depth1 button.actv::before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
  }

  /* 하위 메뉴가 있는 항목 스타일 */
  .has-submenu {
    position: relative;
  }

  .ico-arrow {
    font-size: 10px;
    margin-left: 6px;
    transition: transform 0.2s ease;
    font-style: normal;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }

  .ico-arrow.rotate {
    transform: rotate(180deg);
  }

  /* 하위 메뉴 스타일 */
  .submenu-item {
    background: #f8f9fa;
  }

  .submenu-item button {
    width: 100%;
    padding: 12px 24px 12px 40px !important;
    border: none;
    background: none;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    border-bottom: none !important;
  }

  .submenu-item button:hover {
    background: #e9ecef;
    color: #667eea;
    transform: none !important;
  }

  .submenu-item button.actv {
    background: #e3f2fd;
    color: #667eea;
    font-weight: 500 !important;
    border-bottom: none !important;
  }

  .submenu-item button.actv::before {
    display: none;
  }
</style>