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)">
        {{ userId }} <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">인플루언서</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 route = useRoute();
  const router = useRouter();
  /************************************************************************
|    함수 : 세팅
************************************************************************/
  const fnSetMenu = () => {
    let info = [];
    arrMenuInfo.value = [];

    info.push(
      {
        menuId: "menu00",
        parentMenuId: "menu00",
        menuName: "주문 관리",
        linkType: "/view/order",
      },
      {
        menuId: "menu01",
        parentMenuId: "menu01",
        menuName: "제품 관리",
        linkType: "/view/item",
      },
      {
        menuId: "menu02",
        parentMenuId: "menu02",
        menuName: "배송 관리",
        linkType: "/view/deli",
      },
      {
        menuId: "menu03",
        parentMenuId: "menu03",
        menuName: "벤더 관리",
        linkType: "/view/vendor",
      },
      {
        menuId: "menu04",
        parentMenuId: "menu04",
        menuName: "정산 관리",
        linkType: "/view/settle",
      },
      {
        menuId: "menu05",
        parentMenuId: "menu05",
        menuName: "고객센터",
        linkType: "/view/cs",
      }
    );

    arrMenuInfo.value = info;
    $log.debug("[header][fnSetMenu][success]");
  };

  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 = () => {
    localStorage.removeItem("tempAccess");
    useAuthStore().setLogout();
    router.push({
      path: "/",
    });
  };

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

    useAxios()
      .post("/auth/withdrawal", _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(() => {
    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>