TC 수정건 적용 (디자인 및 기능)

frontend/src/components/modal/commonModal.vue

@@ -1,13 +1,13 @@
 <template>
-	<!-- <div class="wrap bg-wrap"> -->
-	<div>
+  <!-- <div class="wrap bg-wrap"> -->
+  <div>
 
     <div class="dimmed alertCommon" @click="alertModalCancel();"></div>
     <div class="popup-wrap alertCommon">
       <!-- 로그인실패: 확인 -->
       <div class="popup alertCommon">
         <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,67 +21,87 @@
       </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 sendNumFailMsg" @click="sendNumFailMsgClose();"></div>
+    <div class="popup-wrap sendNumFailMsg">
+      <div class="popup sendNumFailMsg">
+        <div class="pop-head">
+          <h3 class="pop-tit">중복된 발신번호</h3>
+        </div>
+        <div class="pop-cont">
+          <p>등록된 발신번호가 있습니다.</p>
+          <p v-html="failMsg"></p>
+        </div>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="sendNumFailMsgClose();">확인</button>
+<!--          <button class="btn-default" @click="sendNumFailMsgCancel();">취소</button>-->
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script>
 
 export default {
-    name: "confirm",
-	data(){
-        return{
-		      row:{},
-          title:'',
-          msg1: '',
-          msg2: '',
-          msg3: '',
-          msg4: '',
-        }
-    },
-	methods :{
-    alertModalOpen(props){
+  name: "confirm",
+  data() {
+    return {
+      row: {},
+      title: '',
+      msg1: '',
+      msg2: '',
+      msg3: '',
+      msg4: '',
+      failMsg:'',
+    }
+  },
+  methods: {
+    alertModalOpen(props) {
       console.log(props)
       var dimmed = document.getElementsByClassName('alertCommon');
-      for(var i = 0; i < dimmed.length; i++){
+      for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'block';
       }
       this.title = props.title;
@@ -90,93 +110,123 @@ export default {
       this.msg3 = props.msg3;
       this.msg4 = props.msg4;
     },
-    alertModalClose(){
+    alertModalClose() {
       var dimmed = document.getElementsByClassName('alertCommon');
-      for(var i = 0; i < dimmed.length; i++){
+      for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'none';
       }
     },
-    alertModalCancel(){
+    alertModalCancel() {
       var dimmed = document.getElementsByClassName('alertCommon');
-      for(var i = 0; i < dimmed.length; i++){
+      for (var i = 0; i < dimmed.length; i++) {
         dimmed[i].style.display = 'none';
       }
     },
-        // 모달 오픈
-		confirmModalOpen(props){
-			var dimmed = document.getElementsByClassName('confirm');
-			for(var i = 0; i < dimmed.length; i++){
-				dimmed[i].style.display = 'block';
-			}
+    // 모달 오픈
+    confirmModalOpen(props) {
+      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;
-		},
-		// 모달 끄기(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);
-		},
-        // 모달 끄기(취소)
-		confirmModalCancel(){
-			var dimmed = document.getElementsByClassName('confirm');
-			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';
+      }
 
       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);
-		},		
-	}
+    },
+    sendNumFailMsgOpen(props){
+      this.failMsg = props.failMsg
+      var dimmed = document.getElementsByClassName('sendNumFailMsg');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+    },
+    sendNumFailMsgClose(){
+      var dimmed = document.getElementsByClassName('sendNumFailMsg');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+    },
+
+  }
 }
 </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;}
+.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>