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>
    </div>
    <nav class="gnb">
      <ul class="depth1">
        <li v-for="(menu, index) in arrMenuInfo" :key="index">
          <button
            @click="menuAction(menu.menuId, menu.menuName, menu.linkType)"
            :class="{ actv: menu.linkType === $route.path }"
          >
            {{ menu.menuName }}
          </button>
        </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 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",
        },
        {
          menuId: "menu03",
          parentMenuId: "menu03",
          menuName: "인플루언서 관리",
          linkType: "/view/vendor/dashboard/influencer-requests",
        },
        {
          menuId: "menu04",
          parentMenuId: "menu04",
          menuName: "정산 관리",
          linkType: "/view/common/settle",
        },
        {
          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",
        },
        {
          menuId: "menu03",
          parentMenuId: "menu03",
          menuName: "벤더 관리",
          linkType: "/view/influencer/search",
        },
        {
          menuId: "menu04",
          parentMenuId: "menu04",
          menuName: "정산 관리",
          linkType: "/view/common/settle",
        },
        {
          menuId: "menu05",
          parentMenuId: "menu05",
          menuName: "고객센터",
          linkType: "/view/common/cs",
        }
      );
    }

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

  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>