TC 기능 수정 / 디자인 수정 변경

frontend/src/modules/custMgt/components/commonModal.vue

@@ -1,13 +1,13 @@
 <template>
-	<!-- <div class="wrap bg-wrap"> -->
-	<div>
+  <!-- <div class="wrap bg-wrap"> -->
+  <div>
 
     <div class="dimmed alertModal" @click="alertModalCancel();"></div>
     <div class="popup-wrap alertModal">
       <!-- 로그인실패: 확인 -->
       <div class="popup alertModal">
         <div class="pop-head">
-          <h3 class="pop-tit">{{title}}</h3>
+          <h3 class="pop-tit">{{ title }}</h3>
         </div>
         <div class="pop-cont">
           <p>{{ msg1 }}</p>
@@ -21,86 +21,86 @@
       </div>
     </div>
 
-		<div class="dimmed confirm" @click="confirmModalCancel();"></div>
-		<div class="popup-wrap confirm">
-			<!-- 수정 확인 -->
-			<div class="popup confirm">
-				<div class="pop-head">
-					<h3 class="pop-tit">{{title}}</h3>
-				</div>
-				<div class="pop-cont">
+    <div class="dimmed confirm" @click="confirmModalCancel();"></div>
+    <div class="popup-wrap confirm">
+      <!-- 수정 확인 -->
+      <div class="popup confirm">
+        <div class="pop-head">
+          <h3 class="pop-tit">{{ title }}</h3>
+        </div>
+        <div class="pop-cont">
           <p>{{ msg1 }}</p>
           <p v-if="msg2 !== ''">{{ msg2 }}</p>
           <p v-if="msg3 !== ''">{{ msg3 }}</p>
           <p v-if="msg4 !== ''">{{ msg4 }}</p>
-				</div>
-				<div class="popup-btn2">
-					<button class="btn-pcolor" @click="confirmModalClose();">확인</button>
-					<button class="btn-default" @click="confirmModalCancel();">취소</button>
-				</div>
-			</div>
+        </div>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="confirmModalClose();">확인</button>
+          <button class="btn-default" @click="confirmModalCancel();">취소</button>
+        </div>
+      </div>
     </div>
 
     <div class="dimmed confirm2" @click="confirmModalCancel2();"></div>
-		<div class="popup-wrap confirm2">
-			<!-- 수정 확인 -->
-			<div class="popup confirm2">
-				<div class="pop-head">
-					<h3 class="popup-tit">{{title}}</h3>
-				</div>
-				<div class="pop-cont">
+    <div class="popup-wrap confirm2">
+      <!-- 수정 확인 -->
+      <div class="popup confirm2">
+        <div class="pop-head">
+          <h3 class="popup-tit">{{ title }}</h3>
+        </div>
+        <div class="pop-cont">
           <p>{{ msg1 }}</p>
           <p v-if="msg2 !== ''">{{ msg2 }}</p>
           <p v-if="msg3 !== ''">{{ msg3 }}</p>
           <p v-if="msg4 !== ''">{{ msg4 }}</p>
-				</div>
-				<div class="popup-btn2">
-					<button class="btn-pcolor" @click="confirmModalClose2();">확인</button>
-					<button class="btn-default" @click="confirmModalCancel2();">취소</button>
-				</div>
-			</div>
+        </div>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="confirmModalClose2();">확인</button>
+          <button class="btn-default" @click="confirmModalCancel2();">취소</button>
+        </div>
+      </div>
     </div>
 
     <div class="dimmed confirmMemo" @click="confirmModalCancelMemo();"></div>
-		<div class="popup-wrap confirmMemo">
-			<!-- 수정 확인 -->
-			<div class="popup confirmMemo">
-				<div class="pop-head">
-					<h3 class="popup-tit">{{title}}</h3>
-				</div>
-				<div class="pop-cont">
+    <div class="popup-wrap confirmMemo">
+      <!-- 수정 확인 -->
+      <div class="popup confirmMemo">
+        <div class="pop-head">
+          <h3 class="popup-tit">{{ title }}</h3>
+        </div>
+        <div class="pop-cont">
           <p>{{ msg1 }}</p>
           <p v-if="msg2 !== ''">{{ msg2 }}</p>
           <p v-if="msg3 !== ''">{{ msg3 }}</p>
           <p v-if="msg4 !== ''">{{ msg4 }}</p>
-				</div>
-				<div class="popup-btn2">
-					<button class="btn-pcolor" @click="confirmModalCloseMemo();">확인</button>
-					<button class="btn-default" @click="confirmModalCancelMemo();">취소</button>
-				</div>
-			</div>
+        </div>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="confirmModalCloseMemo();">확인</button>
+          <button class="btn-default" @click="confirmModalCancelMemo();">취소</button>
+        </div>
+      </div>
     </div>
-    
+
   </div>
 </template>
 
 <script>
 
 export default {
-    name: "confirm",
-	data(){
-        return{
-		      row:{},
-          title:'',
-          msg1: '',
-          msg2: '',
-          msg3: '',
-          msg4: '',
-          targetFocus: '',
-        }
-    },
-	methods :{
-    alertModalOpen(props){
+  name: "confirm",
+  data() {
+    return {
+      row: {},
+      title: '',
+      msg1: '',
+      msg2: '',
+      msg3: '',
+      msg4: '',
+      targetFocus: '',
+    }
+  },
+  methods: {
+    alertModalOpen(props) {
       console.log(props.msg1);
       this.title = props.title;
       this.msg1 = props.msg1;
@@ -109,136 +109,130 @@ export default {
       this.msg4 = props.msg4;
       console.log(props)
       var dimmed = document.getElementsByClassName('alertModal');
-      for(var i = 0; i < dimmed.length; i++){
+      for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'block';
       }
-      
+
     },
-    alertModalClose(){
+    alertModalClose() {
       var dimmed = document.getElementsByClassName('alertModal');
-      for(var i = 0; i < dimmed.length; i++){
+      for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'none';
       }
       this.$parent.checkFocus();
     },
-    alertModalCancel(){
+    alertModalCancel() {
       var dimmed = document.getElementsByClassName('alertModal');
-      for(var i = 0; i < dimmed.length; i++){
+      for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'none';
       }
       this.$parent.checkFocus();
     },
-        // 모달 오픈
-		confirmModalOpen(props){
+    // 모달 오픈
+    confirmModalOpen(props) {
       console.log(props)
-			var dimmed = document.getElementsByClassName('confirm');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'block';
-			}
+      var dimmed = document.getElementsByClassName('confirm');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
 
       this.title = props.title;
       this.msg1 = props.msg1;
       this.msg2 = props.msg2;
       this.msg3 = props.msg3;
       this.msg4 = props.msg4;
-		},
-    confirmModalOpen2(props){
-			var dimmed = document.getElementsByClassName('confirm2');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'block';
-			}
+    },
+    confirmModalOpen2(props) {
+      var dimmed = document.getElementsByClassName('confirm2');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
 
       this.title = props.title;
       this.msg1 = props.msg1;
       this.msg2 = props.msg2;
       this.msg3 = props.msg3;
       this.msg4 = props.msg4;
-		},
-    confirmModalOpenMemo(props){
-			var dimmed = document.getElementsByClassName('confirmMemo');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'block';
-			}
+    },
+    confirmModalOpenMemo(props) {
+      var dimmed = document.getElementsByClassName('confirmMemo');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
 
       this.title = props.title;
       this.msg1 = props.msg1;
       this.msg2 = props.msg2;
       this.msg3 = props.msg3;
       this.msg4 = props.msg4;
-		},
-		// 모달 끄기(ok)
-		confirmModalClose(){
-			var dimmed = document.getElementsByClassName('confirm');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'none';
-			}
-            
-      this.row.result = true;
-      // 부모 함수 호출.
-      this.$parent.confirmCalbackFnc(this.row);
-		},
-    	// 모달 끄기(ok)
-		confirmModalClose2(){
-			var dimmed = document.getElementsByClassName('confirm2');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'none';
-			}
+    },
+    // 모달 끄기(ok)
+    confirmModalClose() {
+      var dimmed = document.getElementsByClassName('confirm');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
 
       this.row.result = true;
       // 부모 함수 호출.
       this.$parent.confirmCalbackFnc(this.row);
-		},
-    	// 모달 끄기(ok)
-		confirmModalCloseMemo(){
-			var dimmed = document.getElementsByClassName('confirmMemo');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'none';
-			}
+    },
+    // 모달 끄기(ok)
+    confirmModalClose2() {
+      var dimmed = document.getElementsByClassName('confirm2');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
 
       this.row.result = true;
       // 부모 함수 호출.
       this.$parent.confirmCalbackFnc(this.row);
-		},
-        // 모달 끄기(취소)
-		confirmModalCancel(){
-			var dimmed = document.getElementsByClassName('confirm');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'none';
-			}
+    },
+    // 모달 끄기(ok)
+    confirmModalCloseMemo() {
+      var dimmed = document.getElementsByClassName('confirmMemo');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+
+      this.row.result = true;
+      // 부모 함수 호출.
+      this.$parent.confirmCalbackFnc(this.row);
+    },
+    // 모달 끄기(취소)
+    confirmModalCancel() {
+      var dimmed = document.getElementsByClassName('confirm');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
 
       this.row.result = false;
       // 부모 함수 호출.
       this.$parent.confirmCalbackFnc(this.row);
-		},
-        // 모달 끄기(취소)
-		confirmModalCancel2(){
-			var dimmed = document.getElementsByClassName('confirm2');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'none';
-			}
+    },
+    // 모달 끄기(취소)
+    confirmModalCancel2() {
+      var dimmed = document.getElementsByClassName('confirm2');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
 
       this.row.result = false;
       // 부모 함수 호출.
       this.$parent.confirmCalbackFnc(this.row);
-		},		
-        // 모달 끄기(취소)
-		confirmModalCancelMemo(){
-			var dimmed = document.getElementsByClassName('confirmMemo');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'none';
-			}
+    },
+    // 모달 끄기(취소)
+    confirmModalCancelMemo() {
+      var dimmed = document.getElementsByClassName('confirmMemo');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
 
       this.row.result = false;
       // 부모 함수 호출.
       this.$parent.memberDeleteConfirmCalbackFnc(this.row);
-		},		
-    	
-	}
+    },
+
+  }
 }
-</script>
-<!-- 
-<style>
-    .popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
-    .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;}
-</style> -->
+</script>