Index: vue/package.json
===================================================================
diff -u -rc36d6a1edaefb3b4c0919906e90941504b46242c -r5d33cacdc5e645098238d92731e5715bc439e2a8
--- vue/package.json	(.../package.json)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
+++ vue/package.json	(.../package.json)	(revision 5d33cacdc5e645098238d92731e5715bc439e2a8)
@@ -13,16 +13,20 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/vue-fontawesome": "^3.0.1",
+    "@imengyu/vue3-context-menu": "^1.0.9",
     "@popperjs/core": "^2.11.5",
+    "@syncfusion/ej2-vue-navigations": "^20.2.39",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
     "bootstrap-icons": "^1.9.1",
     "bootstrap-icons-vue": "^1.8.1",
     "core-js": "^3.8.3",
+    "jquery": "^3.6.0",
     "popper.js": "^1.16.1",
     "pretendard": "^1.3.5",
     "swiper": "^8.3.2",
     "vue": "^3.2.13",
+    "vue-jstree": "^2.1.6",
     "vue-router": "^4.0.3",
     "vuejs-tree": "^3.0.2",
     "vuex": "^4.0.0"
Index: vue/src/components/DevOps/common/ContextMenu.vue
===================================================================
diff -u -r69fe57ca5defa495d913766c6824be673e88f7ef -r5d33cacdc5e645098238d92731e5715bc439e2a8
--- vue/src/components/DevOps/common/ContextMenu.vue	(.../ContextMenu.vue)	(revision 69fe57ca5defa495d913766c6824be673e88f7ef)
+++ vue/src/components/DevOps/common/ContextMenu.vue	(.../ContextMenu.vue)	(revision 5d33cacdc5e645098238d92731e5715bc439e2a8)
@@ -1,104 +1,109 @@
-var tableUrl = "/api/arms/pdjira/getMonitor.do";
-var dataList = [
-	{ data: "c_id" },
-	{ data: "c_parentid" },
-	{ data: "c_position" },
-	{ data: "c_left" },
-	{ data: "c_right" },
-	{ data: "c_level" },
-	{ data: "c_title" },
-	{ data: "c_type" },
-	{ data: "c_pdjira_detail" },
-	{ data: "c_pdjira_con_name" },
-	{ data: "c_pdjira_con_user" },
-	{ data: "c_pdjira_con_pass" },
-	{ data: "c_pdjira_con_token" },
-	{ data: "c_pdjira_con_jql" },
-	{ data: "jiraConPassMode" },
-];
-$(function () {
-	setSideMenu("sidebar_menu_product", "sidebar_menu_product_jira_regist");
-	setTable(tableUrl, dataList);
-	jsTreeBuild("#pdServiceTree", "pdjira");
-	$("body").find("[aria-controls='jstreeTable']").css("width", "100px");
-});
+<template>
+  <ul class="contextMenu" ref="contextmenu">
+    <li class="has-submenu">
+      <div>
+        <span>Create</span>
+        <span>»</span>
+      </div>
+      <ul class="sub-context-menu">
+        <li class="context-list">
+          <div>file</div>
+        </li>
+        <li class="context-list">
+          <div>folder</div>
+        </li>
+      </ul>
+    </li>
+    <li class="context-list">
+      <div>Rename</div>
+    </li>
+    <li class="context-list">
+      <div>Delete</div>
+    </li>
+    <li class="has-submenu">
+      <div>
+        <span>Edit</span>
+        <span>»</span>
+      </div>
+      <ul class="sub-context-menu">
+        <li class="context-list">
+          <div class="context-list">Cut</div>
+        </li>
+        <li class="context-list">
+          <div>Copy</div>
+        </li>
+        <li class="context-list">
+          <div>Paste</div>
+        </li>
+        <li class="context-list">
+          <div>Change Type</div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'ContextMenu',
+  props: {
+    top: Number,
+    left: Number,
+  },
+  watch: {
+    top(top) {
+      this.$refs.contextmenu.style.top = `${top}px`;
+    },
+    left(left) {
+      this.$refs.contextmenu.style.left = `${left}px`;
+    },
+  },
+  mounted() {
+    this.$refs.contextmenu.style.cssText = `top:${this.top}px; left:${this.left}px`;
+  },
+};
+</script>
+<style lang="scss">
+.contextMenu {
+  width: 180px;
+  background: rgba(51, 51, 51, 0.95);
+  position: absolute;
+  li {
+    font-size: 13px;
+  }
+  > li {
+    position: relative;
+    cursor: pointer;
+    padding: 2px 10px;
 
-// --- jstree 설정 -- //
-function jsTreeClick(selectedNodeID) {
-	console.log(selectedNodeID);
+    &:hover {
+      background: #e8eff7;
+      color: #000;
+    }
+    &.has-submenu {
+      div {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    &.has-submenu:hover .sub-context-menu {
+      display: block;
+    }
+    .sub-context-menu {
+      width: 180px;
+      position: absolute;
+      background: rgba(51, 51, 51, 0.95);
+      top: 0;
+      left: 100%;
+      display: none;
+      > li {
+        padding: 2px 10px;
+        color: #fff;
+        &:hover {
+          background: #e8eff7;
+          color: #000;
+        }
+      }
+    }
+  }
 }
-
-// --- select2 설정 --- //
-$(".js-data-example-ajax").select2({
-	ajax: {
-		url: "https://api.github.com/search/repositories",
-		dataType: "json",
-		delay: 250,
-		data: function (params) {
-			return {
-				q: params.term, // search term
-				page: params.page,
-			};
-		},
-		processResults: function (data, params) {
-			// parse the results into the format expected by Select2
-			// since we are using custom formatting functions we do not need to
-			// alter the remote JSON data, except to indicate that infinite
-			// scrolling can be used
-			params.page = params.page || 1;
-
-			return {
-				results: data.items,
-				pagination: {
-					more: params.page * 30 < data.total_count,
-				},
-			};
-		},
-		cache: true,
-	},
-	placeholder: "제품(서비스)의 Default 리뷰어를 등록해 주세요",
-	minimumInputLength: 1,
-	templateResult: formatRepo,
-	templateSelection: formatRepoSelection,
-});
-
-function formatRepo(repo) {
-	if (repo.loading) {
-		return repo.text;
-	}
-
-	var $container = $(
-		"<div class='select2-result-repository clearfix'>" +
-			"<div class='select2-result-repository__meta'>" +
-			"<div class='select2-result-repository__title'></div>" +
-			"<div class='select2-result-repository__description'></div>" +
-			"<div class='select2-result-repository__statistics'>" +
-			"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> </div>" +
-			"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> </div>" +
-			"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> </div>" +
-			"</div>" +
-			"</div>" +
-			"</div>"
-	);
-
-	$container.find(".select2-result-repository__title").text(repo.full_name);
-	$container
-		.find(".select2-result-repository__description")
-		.text(repo.description);
-	$container
-		.find(".select2-result-repository__forks")
-		.append(repo.forks_count + " Forks");
-	$container
-		.find(".select2-result-repository__stargazers")
-		.append(repo.stargazers_count + " Stars");
-	$container
-		.find(".select2-result-repository__watchers")
-		.append(repo.watchers_count + " Watchers");
-
-	return $container;
-}
-
-function formatRepoSelection(repo) {
-	return repo.full_name || repo.text;
-}
-// Code for the menu buttons
+</style>
Index: vue/src/components/DevOps/contents/JSTFShv.vue
===================================================================
diff -u -rc36d6a1edaefb3b4c0919906e90941504b46242c -r5d33cacdc5e645098238d92731e5715bc439e2a8
--- vue/src/components/DevOps/contents/JSTFShv.vue	(.../JSTFShv.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
+++ vue/src/components/DevOps/contents/JSTFShv.vue	(.../JSTFShv.vue)	(revision 5d33cacdc5e645098238d92731e5715bc439e2a8)
@@ -4,34 +4,41 @@
       subTitle="jsTree Service Framework<sup>TSF</sup> Spring-Hibernate Demo"
     />
     <div class="content-section">
-      <Tree
-        id="my-tree-id"
-        ref="my-tree-ref"
-        :custom-options="myCustomOptions"
-        :custom-styles="myCustomStyles"
-        :nodes="treeDisplayData"
-      ></Tree>
-      <!--<ul class="contextMenu">
-        <li>text</li>
-        <li>text</li>
-        <li>text</li>
-      </ul>-->
+      <div class="tree-section">
+        <Tree
+          id="js-tree"
+          ref="js-tree-ref"
+          :custom-options="myCustomOptions"
+          :custom-styles="myCustomStyles"
+          :nodes="treeDisplayData"
+        ></Tree>
+      </div>
+      <div class="table-section">fdsafasfd</div>
     </div>
   </div>
+  <ContextMenu
+    v-if="contextMenuIsActive"
+    ref="contextMenu"
+    :top="contextMenuPosition.top"
+    :left="contextMenuPosition.left"
+  />
 </template>
 <script>
 import Tree from 'vuejs-tree';
 import ContentHeader from '@/components/DevOps/common/ContentHeader.vue';
+import ContextMenu from '@/components/DevOps/common/ContextMenu.vue';
 
 export default {
   name: 'treeView',
-  components: { Tree, ContentHeader },
+  components: { Tree, ContentHeader, ContextMenu },
   props: {
     treeData: { type: Array, required: true },
     toggleTree: { type: Function, required: true },
   },
   data() {
     return {
+      contextMenuIsActive: false,
+      contextMenuPosition: { top: 0, left: 0 },
       treeDisplayData: [
         {
           text: 'Root 1',
@@ -70,6 +77,7 @@
           state: { checked: false, selected: false, expanded: false },
         },
       ],
+      clickedNode: '',
     };
   },
   methods: {
@@ -79,11 +87,31 @@
     },
   },
   mounted() {
-    //this.$refs['my-tree-ref'].expandNode(1);
-    //document.querySelector('.node[data-id="0"]').addEventListener('contextmenu', e => {
-    //  e.preventDefault();
-    //  document.querySelector('.contextMenu').style.display = 'block';
-    //});
+    //this.$refs['js-tree-ref'].expandNode(1);
+    const jstree = this.$refs['js-tree-ref'];
+    const jstreeNodeList = document.querySelectorAll('#js-tree ul li');
+    const contextMenu = this.$refs.contextMenu;
+    const contextList = document.querySelectorAll('.context-list');
+    window.addEventListener('click', () => {
+      this.contextMenuIsActive = false;
+    });
+    contextList.forEach(list => {
+      list.addEventListener('click', () => {
+        this.contextMenuIsActive = false;
+      });
+    });
+    jstreeNodeList.forEach(list => {
+      list.addEventListener('contextmenu', e => {
+        e.preventDefault();
+        this.clickedNode = e.currentTarget;
+        if (e.target.tagName === 'SPAN' && e.target.dataset.toggle === 'tooltip') {
+          let targetRect = e.target.getBoundingClientRect();
+          this.contextMenuIsActive = true;
+          this.contextMenuPosition.top = window.pageYOffset + targetRect.bottom;
+          this.contextMenuPosition.left = targetRect.x;
+        }
+      });
+    });
   },
   computed: {
     myCustomStyles() {
@@ -96,24 +124,23 @@
             overflowY: 'visible',
             display: 'inline-block',
             textAlign: 'left',
-            backgroundColor: '#fff',
             color: '#000',
           },
         },
         row: {
           style: {
-            width: '500px',
+            width: 'auto',
             cursor: 'pointer',
           },
           child: {
             class: '',
             style: {
-              height: '35px',
+              height: '20px',
             },
             active: {
               class: 'custom_row_active_class',
               style: {
-                height: '35px',
+                height: '20px',
               },
             },
           },
@@ -202,7 +229,7 @@
         addNode: {
           state: true,
           fn: node => {
-            this.$refs['my-tree-ref'].expandNode(node.id);
+            this.$refs['js-tree-ref'].expandNode(node.id);
             const newNode = {
               text: 'Grandchild 2',
               id: Math.floor(Math.random() * 100),
@@ -237,24 +264,24 @@
                 });
               }
             });
-            console.log(this.$refs['my-tree-ref'].findNode(node.id));
+            console.log(this.$refs['js-tree-ref'].findNode(node.id));
           },
           appearOnHover: true,
         },
         deleteNode: {
           state: true,
           fn: node => {
-            const nodePath = this.$refs['my-tree-ref'].findNodePath(node.id);
+            const nodePath = this.$refs['js-tree-ref'].findNodePath(node.id);
             const parentNodeId = nodePath.slice(-2, -1)[0];
-            console.log(this.$refs['my-tree-ref'].findNodePath());
+            console.log(this.$refs['js-tree-ref'].findNodePath());
             if (parentNodeId === undefined) {
               // 'root' node
               const nodeIndex =
-                this.$refs['my-tree-ref'].nodes.findIndex(x => x.id !== node.id) - 1;
-              this.$refs['my-tree-ref'].nodes.splice(nodeIndex, 1);
+                this.$refs['js-tree-ref'].nodes.findIndex(x => x.id !== node.id) - 1;
+              this.$refs['js-tree-ref'].nodes.splice(nodeIndex, 1);
             } else {
               // child node
-              const parentNode = this.$refs['my-tree-ref'].findNode(parentNodeId);
+              const parentNode = this.$refs['js-tree-ref'].findNode(parentNodeId);
               const nodeIndex = parentNode.nodes.findIndex(x => x.id !== node.id) - 1;
               parentNode.nodes.splice(nodeIndex, 1);
             }
@@ -268,21 +295,48 @@
   },
 };
 </script>
-<style lang="scss">
-.row_data {
+<style lang="scss" scoped>
+.content-section {
+  position: relative;
+  background: none;
   display: flex;
-  align-items: center;
+  div {
+    background: rgba(51, 51, 51, 0.425);
+    padding: 15px;
+    &.tree-section {
+      flex-basis: 33%;
+    }
+    &.table-section {
+      flex-basis: 66%;
+      margin-left: 30px;
+    }
+  }
 }
-span {
-  .expanded_icon {
-    vertical-align: middle;
-    margin-right: 10px;
+</style>
+<style lang="scss">
+#js-tree {
+  li {
+    /*height: 20px;*/
   }
+  .row_data {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    color: #fff;
+
+    span {
+      &:first-child {
+        width: 18px;
+      }
+      .expanded_icon {
+        vertical-align: middle;
+        margin-right: 10px;
+        border-color: transparent transparent transparent rgb(209, 208, 208);
+      }
+    }
+    input[type='checkbox'] {
+      margin-right: 5px;
+    }
+  }
 }
-input[type='checkbox'] {
-  margin-right: 5px;
-}
-.contextMenu {
-  display: none;
-}
 </style>
Index: vue/src/views/DevOpsView.vue
===================================================================
diff -u -rc36d6a1edaefb3b4c0919906e90941504b46242c -r5d33cacdc5e645098238d92731e5715bc439e2a8
--- vue/src/views/DevOpsView.vue	(.../DevOpsView.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
+++ vue/src/views/DevOpsView.vue	(.../DevOpsView.vue)	(revision 5d33cacdc5e645098238d92731e5715bc439e2a8)
@@ -16,6 +16,7 @@
     <JSTFIntroduction v-if="$route.params.path == pathName.JSTF.introduction" />
     <JSTFGoal v-if="$route.params.path == pathName.JSTF.goal" />
     <JSTFUsage v-if="$route.params.path == pathName.JSTF.usage" />
+    <JSTFShv v-if="$route.params.path == pathName.JSTF.demoShv" />
     <JSTFFAQ v-if="$route.params.path == pathName.JSTF.faq" />
     <JSTFLicense v-if="$route.params.path == pathName.JSTF.license" />
     <JSTFDownload v-if="$route.params.path == pathName.JSTF.JSTFDownload" />
@@ -43,6 +44,7 @@
 import JSTFFAQ from '@/components/DevOps/contents/JSTFFaq.vue';
 import JSTFLicense from '@/components/DevOps/contents/JSTFLicense.vue';
 import JSTFDownload from '@/components/DevOps/contents/JSTFDownload.vue';
+import JSTFShv from '@/components/DevOps/contents/JSTFShv.vue';
 
 export default {
   name: 'DevOps',
@@ -61,6 +63,7 @@
     JSTFGoal,
     JSTFUsage,
     JSTFFAQ,
+    JSTFShv,
     JSTFLicense,
     JSTFDownload,
   },