관리자 헤더와 메뉴 목록 디자인 추가

nuxt/components/layout/LeftMenu.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/login';
+
+const authStore = useAuthStore();
+const { authorization } = storeToRefs(authStore);
+
+const selectedKeys = ref<string[]>([]);
+</script>
+
+<template>
+  <a-menu v-model:selected-keys="selectedKeys" mode="inline" theme="dark">
+    <layout-left-menu-item :menu-list="authorization.menuList" />
+  </a-menu>
+</template>

nuxt/components/layout/LeftMenuItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { AuthorizationMenuType } from '~/types/login';
+
+defineProps<{
+  menuList: AuthorizationMenuType[];
+}>();
+</script>
+
+<template>
+  <template v-for="menu in menuList" :key="menu.menuId">
+    <a-menu-item :key="menu.menuId" v-if="!menu.children">
+      <nuxt-link :to="menu.menuUrl">{{ menu.menuName }}</nuxt-link>
+    </a-menu-item>
+    <a-sub-menu :key="menu.menuId" v-if="menu.children">
+      <template #title>{{ menu.menuName }}</template>
+      <template v-for="child in menu.children">
+        <template v-if="!child.children">
+          <a-menu-item :key="child.menuId">
+            <nuxt-link :to="child.menuUrl">{{ child.menuName }}</nuxt-link>
+          </a-menu-item>
+        </template>
+        <template v-if="child.children">
+          <a-sub-menu :key="child.menuId">
+            <template #title>{{ child.menuName }}</template>
+            <layout-left-menu-item :menu-list="child.children" />
+          </a-sub-menu>
+        </template>
+      </template>
+    </a-sub-menu>
+  </template>
+</template>

nuxt/components/layout/footer.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template></template>

nuxt/components/layout/header.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/login';
+import type { AuthorizationMenuType } from '~/types/login';
+import { LogoutOutlined } from '@ant-design/icons-vue';
+const router = useRouter();
+const authStore = useAuthStore();
+const logout = async () => {
+  await authStore.unauthorized();
+  message.info('로그아웃되었습니다.');
+};
+
+defineProps<{
+  menuList: AuthorizationMenuType[];
+}>();
+
+const movePage = () => {
+  router.push('/admin/personal/info');
+};
+</script>
+
+<template>
+  <a-row justify="end" class="d-flex align-center pr-4" style="height: 100%">
+    <a-col>
+      <a-button type="primary" @click="movePage" class="mr-5">
+        개인정보관리
+      </a-button>
+    </a-col>
+
+    <a-col>
+      <a-button @click="logout">
+        <template #icon>
+          <LogoutOutlined />
+        </template>
+        로그아웃
+      </a-button>
+    </a-col>
+  </a-row>
+</template>