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)">
        {{ useStoreAuth.getSnsTempData?.user?.NICK_NAME || "사용자" }}
        <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">
        <li v-for="(menu, index) in arrMenuInfo" :key="index" 
            :class="{ 'has-submenu': menu.subMenus && menu.subMenus.length > 0 }"
            @mouseenter="showSubmenu(menu.menuId)"
            @mouseleave="hideSubmenu(menu.menuId)">
          <button
            @click="menuAction(menu.menuId, menu.menuName, menu.linkType)"
            :class="{ actv: isMenuActive(menu) }"
          >
            {{ menu.menuName }}
            <i v-if="menu.subMenus && menu.subMenus.length > 0" class="ico-arrow">▼</i>
          </button>
          
          <!-- 하위 메뉴 -->
          <ul v-if="menu.subMenus && menu.subMenus.length > 0" 
              class="depth2" 
              :class="{ show: activeSubmenu === menu.menuId }">
            <li v-for="(subMenu, subIndex) in menu.subMenus" :key="subIndex">
              <button
                @click="menuAction(subMenu.menuId, subMenu.menuName, subMenu.linkType)"
                :class="{ actv: subMenu.linkType === $route.path }"
              >
                {{ subMenu.menuName }}
              </button>
            </li>
          </ul>
        </li>
      </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;

    // 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: "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/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 showSubmenu = (menuId) => {
    activeSubmenu.value = menuId;
  };

  const hideSubmenu = (menuId) => {
    activeSubmenu.value = "";
  };

  const isMenuActive = (menu) => {
    if (menu.linkType === route.path) {
      return true;
    }
    
    // 하위 메뉴 중 하나가 활성화되어 있는지 확인
    if (menu.subMenus && menu.subMenus.length > 0) {
      return menu.subMenus.some(subMenu => subMenu.linkType === route.path);
    }
    
    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 = (userId) => {
    router.push({
      path: "/view/mng/mngAdd",
    });
    useDtStore.adminInfo.adminId = userId;
    useDtStore.adminInfo.pageType = "U";
  };

  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]");
      });
  };
  /************************************************************************
|    라이프사이클 : 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;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .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;
  }

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

  /* 하위 메뉴 스타일 */
  .depth2 {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    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;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
  }

  .depth2.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

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

  .depth2 button:hover {
    background: #f3f4f6;
    color: #667eea;
    transform: none !important;
  }

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

  .depth2 button.actv::before {
    display: none;
  }

  /* 호버 시 하위 메뉴 표시 */
  .has-submenu:hover .depth2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
</style>