influence/components/common/header.vue

<template>
  <header class="new--header">
    <h1 class="logo">
      <!-- prettier-ignore  -->
      {{userCompanyName}} 룰렛 시스템 관리자
    </h1>
    <nav class="gnb">
      <ul class="depth1">
        <li v-for="(menu, index) in arrMenuInfo" :key="index">
          <button @click="menuAction(menu.menuId, menu.menuName, menu.linkType)">
            {{ menu.menuName }}
          </button>
        </li>
      </ul>

      <!-- 오버매뉴 사용시 사용 -->
      <!-- <div class="gnb-bg"></div> -->
    </nav>
    <!-- 가청, 화면테마, 언어, 프로필, 로그아웃 -->
    <div class="util log--btn">
      <span class="user-name">{{ userId }} ( {{ userName }} )</span>
      <button type="button" class="btn-profile" @click="myPage(userId)">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="22"
          height="22"
          style="color: #fff; vertical-align: top"
        >
          <path
            fill="currentColor"
            d="M406.5 399.6C387.4 352.9 341.5 320 288 320l-64 0c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3l64 0c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"
          />
        </svg>
      </button>
      <button type="button" class="btn-logout" @click="fnLoguOut"></button>
    </div>
  </header>
</template>

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

    info.push(
      {
        menuId: "menu01",
        parentMenuId: "menu01",
        menuName: "관리자 관리",
        linkType: "/view/mng",
      },
      {
        menuId: "menu02",
        parentMenuId: "menu02",
        menuName: "이벤트 관리",
        linkType: "/view/event/evtList",
      },
      {
        menuId: "menu03",
        parentMenuId: "menu03",
        menuName: "당첨자 관리",
        linkType: "/view/winner",
      },
      {
        menuId: "menu04",
        parentMenuId: "menu04",
        menuName: "룰렛 타입 관리",
        linkType: "/",
      }
    );

    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>