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

nuxt/.prettierrc

@@ -0,0 +1,18 @@
+{
+  "arrowSpacing": [
+    "error",
+    {
+      "before": true,
+      "after": true
+    }
+  ],
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

nuxt/assets/css/index.css

@@ -0,0 +1,7 @@
+.ant-btn-primary {
+    box-shadow: none !important;
+}
+
+.pagination-icon-size {
+    font-size: 0.6rem !important;
+}

nuxt/assets/font/NotoSans/font.css

@@ -0,0 +1,69 @@
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 100;
+    font-style: normal;
+    src: url("NotoSans-Thin.eot?") format("eot"),
+    url("NotoSans-Thin.otf") format("opentype"),
+    url("NotoSans-Thin.woff") format("woff"),
+    url("NotoSans-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 200;
+    font-style: normal;
+    src: url("NotoSans-Light.eot?") format("eot"),
+    url("NotoSans-Light.otf") format("opentype"),
+    url("NotoSans-Light.woff") format("woff"),
+    url("NotoSans-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 300;
+    font-style: normal;
+    src: url("NotoSans-DemiLight.eot?") format("eot"),
+    url("NotoSans-DemiLight.otf") format("opentype"),
+    url("NotoSans-DemiLight.woff") format("woff"),
+    url("NotoSans-DemiLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 400;
+    font-style: normal;
+    src: url("NotoSans-Regular.eot?") format("eot"),
+    url("NotoSans-Regular.otf") format("opentype"),
+    url("NotoSans-Regular.woff") format("woff"),
+    url("NotoSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 500;
+    font-style: normal;
+    src: url("NotoSans-Medium.eot?") format("eot"),
+    url("NotoSans-Medium.otf") format("opentype"),
+    url("NotoSans-Medium.woff") format("woff"),
+    url("NotoSans-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 700;
+    font-style: normal;
+    src: url("NotoSans-Black.eot?") format("eot"),
+    url("NotoSans-Black.otf") format("opentype"),
+    url("NotoSans-Black.woff") format("woff"),
+    url("NotoSans-Black.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Noto Sans Korean";
+    font-weight: 900;
+    font-style: normal;
+    src: url("NotoSans-Bold.eot?") format("eot"),
+    url("NotoSans-Bold.otf") format("opentype"),
+    url("NotoSans-Bold.woff") format("woff"),
+    url("NotoSans-Bold.woff2") format("woff2");
+}

nuxt/assets/font/PretendardGOV/font.css

@@ -0,0 +1,71 @@
+/*
+Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard GOV.
+https://github.com/orioncactus/pretendard
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+*/
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 900;
+    font-display: swap;
+    src: local('Pretendard GOV Black'), url(PretendardGOV-Black.woff2) format('woff2'), url(PretendardGOV-Black.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 800;
+    font-display: swap;
+    src: local('Pretendard GOV ExtraBold'), url(PretendardGOV-ExtraBold.woff2) format('woff2'), url(PretendardGOV-ExtraBold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 700;
+    font-display: swap;
+    src: local('Pretendard GOV Bold'), url(PretendardGOV-Bold.woff2) format('woff2'), url(PretendardGOV-Bold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 600;
+    font-display: swap;
+    src: local('Pretendard GOV SemiBold'), url(PretendardGOV-SemiBold.woff2) format('woff2'), url(PretendardGOV-SemiBold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 500;
+    font-display: swap;
+    src: local('Pretendard GOV Medium'), url(PretendardGOV-Medium.woff2) format('woff2'), url(PretendardGOV-Medium.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 400;
+    font-display: swap;
+    src: local('Pretendard GOV Regular'), url(PretendardGOV-Regular.woff2) format('woff2'), url(PretendardGOV-Regular.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 300;
+    font-display: swap;
+    src: local('Pretendard GOV Light'), url(PretendardGOV-Light.woff2) format('woff2'), url(PretendardGOV-Light.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 200;
+    font-display: swap;
+    src: local('Pretendard GOV ExtraLight'), url(PretendardGOV-ExtraLight.woff2) format('woff2'), url(PretendardGOV-ExtraLight.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard GOV';
+    font-weight: 100;
+    font-display: swap;
+    src: local('Pretendard GOV Thin'), url(PretendardGOV-Thin.woff2) format('woff2'), url(PretendardGOV-Thin.woff) format('woff');
+}

nuxt/assets/font/SpoqaHanSansNeo/font.css

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2015 Spoqa, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 700;
+    src: local('Spoqa Han Sans Neo Bold'),
+    url("SpoqaHanSansNeo-Bold.otf") format("opentype"),
+    url('SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+    url('SpoqaHanSansNeo-Bold.woff') format('woff'),
+    url('SpoqaHanSansNeo-Bold.ttf') format('truetype');
+}
+
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 500;
+    src: local('Spoqa Han Sans Neo Medium'),
+    url("SpoqaHanSansNeo-Medium.otf") format("opentype"),
+    url('SpoqaHanSansNeo-Medium.woff2') format('woff2'),
+    url('SpoqaHanSansNeo-Medium.woff') format('woff'),
+    url('SpoqaHanSansNeo-Medium.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 400;
+    src: local('Spoqa Han Sans Neo Regular'),
+    url("SpoqaHanSansNeo-Regular.otf") format("opentype"),
+    url('SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+    url('SpoqaHanSansNeo-Regular.woff') format('woff'),
+    url('SpoqaHanSansNeo-Regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 300;
+    src: local('Spoqa Han Sans Neo Light'),
+    url("SpoqaHanSansNeo-Light.otf") format("opentype"),
+    url('SpoqaHanSansNeo-Light.woff2') format('woff2'),
+    url('SpoqaHanSansNeo-Light.woff') format('woff'),
+    url('SpoqaHanSansNeo-Light.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 100;
+    src: local('Spoqa Han Sans Neo Thin'),
+    url("SpoqaHanSansNeo-Thin.otf") format("opentype"),
+    url('SpoqaHanSansNeo-Thin.woff2') format('woff2'),
+    url('SpoqaHanSansNeo-Thin.woff') format('woff'),
+    url('SpoqaHanSansNeo-Thin.ttf') format('truetype');
+}

nuxt/common/loading.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useLoadingStore } from '~/stores';
+
+const loadingStore = useLoadingStore();
+const { isLoading } = storeToRefs(loadingStore);
+</script>
+
+<template>
+  <template v-if="isLoading">
+    <div
+      class="top-0 left-0 w-full h-full flex justify-center items-center position-absolute"
+      style="z-index: 10000000"
+    >
+      <a-spin />
+    </div>
+    <div
+      class="top-0 left-0 w-full h-full justify-center items-center position-absolute bg-black"
+      style="z-index: 9999999; opacity: 0.4"
+    ></div>
+  </template>
+</template>

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>

nuxt/constants/path.ts

@@ -0,0 +1 @@
+export const BASE_URL = import.meta.env.BASE_URL;

nuxt/constants/theme/ui.ts

@@ -0,0 +1,20 @@
+import type { ThemeConfig } from 'ant-design-vue/lib/config-provider/context';
+
+export const FONT_FAMILY =
+  '"Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif';
+
+export const DEFAULT_THEME: ThemeConfig = {
+  token: {
+    fontFamily: `${FONT_FAMILY}`,
+    fontSize: 16,
+    fontSizeIcon: 12,
+    colorPrimary: '#003668'
+  },
+  components: {
+    Button: {
+      borderRadius: 6,
+      paddingContentHorizontal: 16,
+      fontSize: 14
+    }
+  }
+};

nuxt/layouts/default.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/login';
+import locale from 'ant-design-vue/es/locale/ko_KR';
+import { DEFAULT_THEME } from '~/constants/theme/ui';
+
+const authStore = useAuthStore();
+const { authorization } = storeToRefs(authStore);
+</script>
+
+<template>
+  <a-config-provider :locale="locale" :theme="DEFAULT_THEME">
+    <a-layout style="min-height: 100vh">
+      <a-layout-sider>
+        <a-row class="h-34 p-4" justify="center">
+          <a-col>
+            <a-space warp direction="vertical" :size="18">
+              <a-avatar :size="48" shape="circle" style="background: #999">
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>
+              <span class="text-white">{{ authorization.memberName }}</span>
+            </a-space>
+          </a-col>
+        </a-row>
+        <layout-left-menu />
+      </a-layout-sider>
+      <a-layout>
+        <a-layout-header style="padding: 0">
+          <layout-header />
+        </a-layout-header>
+        <a-layout-content class="p-4">
+          <slot />
+        </a-layout-content>
+        <a-layout-footer>
+          <layout-footer />
+        </a-layout-footer>
+      </a-layout>
+    </a-layout>
+  </a-config-provider>
+</template>

nuxt/pages/index.vue

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