로그인 / 고객관리 / 시스템관리 ... 디자인 및 기능 수정 적용

frontend/src/components/HubWebHeader.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <header>
     <h1 class="logo"><a href="javascript:void(0)">uplus 메시지허브이지<span>BACKOFFICE</span></a></h1>
     <div class="user_wrap">
@@ -12,12 +13,15 @@
       </div>
     </div>
   </header>
+  <logout-modal ref="logoutModal"></logout-modal>
+  </div>
 </template>
 
 <script>
 //import tokenSvc from '@/common/token-service';
 import { mapGetters } from 'vuex';
 import loginApi from '@/modules/login/service/api';
+import logoutModal from "./logoutModal";
 
 export default { 
   name: "hubWebHeader",  
@@ -27,6 +31,7 @@ export default {
       isLogin: false,
       isErrPage: false,
       navActive: false,
+
     }
   },
   created() {
@@ -59,6 +64,9 @@ export default {
       }
     },
   },
+  components: {
+    logoutModal,
+  },
   methods: {
     userInfoToggle(){
       var click = "clicked";
@@ -71,19 +79,22 @@ export default {
       }
     },
     logout(){
-      let result = confirm("로그아웃 하시겠습니까?");
-      if (result) {
-        loginApi.logout().then(response => {
-          if(response.data.retCode == '0000'){            
-            
-            // tokenSvc.removeToken();
+      //commonModal
+      this.$refs.logoutModal.logoutModalOpen();
 
-            this.$router.push({
-              path: "/login"
-            });
-          }
-        });
-      }      
+      // let result = confirm("로그아웃 하시겠습니까?");
+      // if (result) {
+      //   loginApi.logout().then(response => {
+      //     if(response.data.retCode == '0000'){
+      //
+      //       // tokenSvc.removeToken();
+      //
+      //       this.$router.push({
+      //         path: "/login"
+      //       });
+      //     }
+      //   });
+      // }
     }
   }
 };

frontend/src/components/logoutModal.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="wrap bg-wrap">
+	<div class="dimmed logoutConfirm" @click="logoutModalCancel();"></div>
+		<div class="popup-wrap logoutConfirm">
+			<!-- 수정 확인 -->
+			<div class="popup logoutConfirm">
+				<div class="pop-head">
+					<h3 class="pop-tit">로그아웃</h3>
+				</div>
+				<div class="pop-cont">
+          <p>로그아웃 하시겠습니까?</p>
+				</div>
+				<div class="popup-btn2">
+					<button class="btn-pcolor" @click="logoutModalClose();">확인</button>
+					<button class="btn-default" @click="logoutModalCancel();">취소</button>
+				</div>
+			</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import loginApi from "@/modules/login/service/api";
+
+export default {
+    name: "confirm",
+	data(){
+        return{
+		      row:{},
+        }
+    },
+	methods : {
+    // 모달 오픈
+    logoutModalOpen() {
+      var dimmed = document.getElementsByClassName('logoutConfirm');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+    },
+    // 모달 끄기(ok)
+    logoutModalClose() {
+      var dimmed = document.getElementsByClassName('logoutConfirm');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+      loginApi.logout().then(response => {
+        if(response.data.retCode == '0000'){
+            this.$store.commit("login/isLogin", false);
+            this.$store.commit("login/isAuthChk", false);
+          this.$router.push({
+            path: "/login"
+          });
+        }
+      });
+    },
+    // 모달 끄기(취소)
+    logoutModalCancel() {
+      var dimmed = document.getElementsByClassName('logoutConfirm');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+      var click = "clicked";
+      var userBtn = document.querySelector('.user_wrap .user');
+      if(userBtn.classList.contains(click)){
+        userBtn.classList.remove(click);
+      }
+      else{
+        userBtn.classList.add(click);
+      }
+    }
+  }
+}
+</script>
+<style>
+.dimmed {z-index:1;}
+.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0; z-index:10;}
+.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
+.popup-btn-wrap button:hover {background: #000; color: #fff;}
+.popup {z-index:10;}
+</style>