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-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 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";
  };
  /************************************************************************
|    라이프사이클 : 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>