Index: vue/src/assets/images/devops/WWW313COKR.png
===================================================================
diff -u -r1cc6c607fc537d365794db05952bbb7c52893067 -r9640e584504005e252564980c6f43490b2fe1909
Binary files differ
Index: vue/src/assets/images/devops/logo.png
===================================================================
diff -u
Binary files differ
Index: vue/src/components/common/ContentHeader.vue
===================================================================
diff -u -r92ab52e29efafd62f6d35f896e4d37f22c85b7c0 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/components/common/ContentHeader.vue	(.../ContentHeader.vue)	(revision 92ab52e29efafd62f6d35f896e4d37f22c85b7c0)
+++ vue/src/components/common/ContentHeader.vue	(.../ContentHeader.vue)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -1,10 +1,6 @@
 <template>
   <div class="content-header">
-    <img
-      class="circle-logo"
-      src="@/assets/images/devops/WWW313COKR.png"
-      alt="User Image"
-    />
+    <div class="circle-logo"></div>
     <div class="page-summary">
       <h2 class="sub-title" v-html="subTitle"></h2>
       <p v-if="subText" v-html="subText"></p>
@@ -24,10 +20,14 @@
   display: flex;
   flex-direction: row;
   margin-bottom: 20px;
+  align-items: center;
   .circle-logo {
     width: 80px;
     height: 80px;
     margin-right: 20px;
+    overflow: hidden;
+    /*border-radius: 40px;*/
+    background: url('@/assets/images/devops/logo.png') no-repeat center / cover;
   }
   .page-summary {
     align-self: center;
Index: vue/src/components/common/HeaderLogo.vue
===================================================================
diff -u -r92ab52e29efafd62f6d35f896e4d37f22c85b7c0 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/components/common/HeaderLogo.vue	(.../HeaderLogo.vue)	(revision 92ab52e29efafd62f6d35f896e4d37f22c85b7c0)
+++ vue/src/components/common/HeaderLogo.vue	(.../HeaderLogo.vue)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -1,7 +1,7 @@
 <template>
   <header>
     <h1 id="logo">
-      <router-link to="/">atlassian-<strong>RMS</strong></router-link>
+      <router-link to="/">313 DEVOPS</router-link>
     </h1>
     <button
       type="button"
Index: vue/src/components/common/NavBar.vue
===================================================================
diff -u -r92ab52e29efafd62f6d35f896e4d37f22c85b7c0 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/components/common/NavBar.vue	(.../NavBar.vue)	(revision 92ab52e29efafd62f6d35f896e4d37f22c85b7c0)
+++ vue/src/components/common/NavBar.vue	(.../NavBar.vue)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -48,14 +48,7 @@
 </template>
 
 <script setup>
-import {
-  computed,
-  ref,
-  onMounted,
-  toRef,
-  onBeforeMount,
-  toRefs,
-} from '@vue/runtime-core';
+import { computed, ref, onMounted, watch } from '@vue/runtime-core';
 import { useStore } from '@/store';
 import { useRoute } from 'vue-router';
 const store = useStore();
@@ -76,15 +69,16 @@
   titleEl.classList.add('active-blue');
 };
 
-onMounted(() => {
-  //route path에 따라 일치하는 페이지 네비 active
+//route path에 따라 일치하는 페이지 네비 active
+const activeNavMenu = newPath => {
   detailList.value.forEach((list, idx) => {
     const title = list.dataset.title;
     const titleEl = list.children[0].children[0];
     const subMenuEl = list.children[0].children[1];
-    if (path.includes(title)) {
-      titleEl.classList.add('active-blue');
-    }
+    newPath.includes(title)
+      ? titleEl.classList.add('active-blue')
+      : titleEl.classList.remove('active-blue');
+
     if (idx === 0) {
       list.addEventListener('click', () => clickMenuRemoveActive(list, titleEl));
     } else {
@@ -93,6 +87,17 @@
       });
     }
   });
+};
+
+watch(
+  () => route.path,
+  newPath => {
+    if (newPath) activeNavMenu(newPath);
+  },
+);
+
+onMounted(() => {
+  activeNavMenu(path);
 });
 </script>
 
Index: vue/src/constants/enums/StoreKeys.ts
===================================================================
diff -u -r1cc6c607fc537d365794db05952bbb7c52893067 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/constants/enums/StoreKeys.ts	(.../StoreKeys.ts)	(revision 1cc6c607fc537d365794db05952bbb7c52893067)
+++ vue/src/constants/enums/StoreKeys.ts	(.../StoreKeys.ts)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -1,5 +1,9 @@
 export const enum StateKeys {
   USER_INFO = 'userInfo',
+  NAV_MENU_LIST = 'navMenuList',
+  DEVELOPING_TO_ROUTE = 'isDevelopingToRoute',
+  DATA_TABLE = 'dataTable',
+  NODE_UPDATE = 'nodeUpdate',
 }
 
 export const enum ActionKeys {
@@ -8,4 +12,6 @@
 
 export const enum MutationTypes {
   UPDATE_USER = 'UPDATE_USER',
+  DATA_TABLE_LOAD = 'dataTabelLoad',
+  NODE_UPDATE = 'nodeUpdate',
 }
Index: vue/src/store/mutations.ts
===================================================================
diff -u -re0a187ce5d88f1e6e98b84c5ff015d76cf0ff3f7 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/store/mutations.ts	(.../mutations.ts)	(revision e0a187ce5d88f1e6e98b84c5ff015d76cf0ff3f7)
+++ vue/src/store/mutations.ts	(.../mutations.ts)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -9,7 +9,10 @@
   [MutationTypes.UPDATE_USER]: (state: RootState, payload: any): void => {
     state[StateKeys.USER_INFO] = payload;
   },
-  dataTabelLoad(state: any, { dataUrl, dataSrc, dataColumns }: requiredDataTable) {
+  [MutationTypes.DATA_TABLE_LOAD]: (
+    state: any,
+    { dataUrl, dataSrc, dataColumns }: requiredDataTable,
+  ) => {
     state.dataTable = $('#jstreeTable').dataTable({
       ajax: {
         url: state.isDevelopingToRoute + dataUrl,
@@ -21,7 +24,7 @@
       columns: dataColumns,
     });
   },
-  nodeUpdate(state: any) {
+  [MutationTypes.NODE_UPDATE]: (state: any) => {
     state.nodeUpdate = !state.nodeUpdate;
   },
 };
Index: vue/src/store/state.ts
===================================================================
diff -u -re0a187ce5d88f1e6e98b84c5ff015d76cf0ff3f7 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/store/state.ts	(.../state.ts)	(revision e0a187ce5d88f1e6e98b84c5ff015d76cf0ff3f7)
+++ vue/src/store/state.ts	(.../state.ts)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -1,8 +1,9 @@
 import { StateKeys } from '@/constants/enums/StoreKeys';
+import { storeKey } from 'vuex';
 
 export const state = {
   [StateKeys.USER_INFO]: { name: 'arms' },
-  navMenuList: [
+  [StateKeys.NAV_MENU_LIST]: [
     {
       title: 'Welcome',
       icon: 'bi bi-house-door-fill',
@@ -36,9 +37,9 @@
       children: ['Contributors'],
     },
   ],
-  isDevelopingToRoute: '/auth-anon',
-  dataTable: null,
-  nodeUpdate: false,
+  [StateKeys.DEVELOPING_TO_ROUTE]: '/auth-anon',
+  [StateKeys.DATA_TABLE]: null,
+  [StateKeys.NODE_UPDATE]: false,
 };
 
 export type RootState = typeof state;
Index: vue/src/views/DevOpsView.vue
===================================================================
diff -u -r92ab52e29efafd62f6d35f896e4d37f22c85b7c0 -r9640e584504005e252564980c6f43490b2fe1909
--- vue/src/views/DevOpsView.vue	(.../DevOpsView.vue)	(revision 92ab52e29efafd62f6d35f896e4d37f22c85b7c0)
+++ vue/src/views/DevOpsView.vue	(.../DevOpsView.vue)	(revision 9640e584504005e252564980c6f43490b2fe1909)
@@ -25,6 +25,7 @@
 import TopBtn from '@/components/common/TopBtn.vue';
 
 import { onMounted, ref } from 'vue';
+
 const openMobileMenu = ref(false);
 
 onMounted(() => {