Commit @869d5908ac8c5c6d4aa2cf1077db3a06f8f68a42

류윤주 01-15

240115 류윤주 alert 모달 추가

@869d5908ac8c5c6d4aa2cf1077db3a06f8f68a42

6ccdf33

869d590

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


 }
 
 /* 상세 서치바 */
-.search-bottom{
+.search-bottom {
     padding: 10px 0;
 }
+
 .option-searchbar {
     width: 50%;
     margin: 0 auto;

     font-size: 1.4rem;
 }
 
-.count-zone span{
+.count-zone span {
     font-weight: 900;
     color: #213f99;
 }

     justify-content: center;
     align-items: center;
     z-index: 200;
-  }
-  
-  .modal-container {
+}
+
+.modal-container {
     background: #fff;
     min-width: 500px;
     width: 35%;

     box-sizing: border-box;
     max-height: 90%;
     min-height: 500px;
-  }
-  
-  .modal-title {
+}
+
+.modal-title {
     width: 100%;
     border-bottom: 1px solid #d4cccc;
     padding: 10px 0;
-  }
-  
-  .modal-subtitle {
+}
+
+.modal-subtitle {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 15px;
-  }
-  
-  .modal-content-monthly {
+}
+
+.modal-content-monthly {
     width: 100%;
     padding: 30px 0;
     overflow-y: auto;
-  }
+}
+
+.alert-modal {
+    min-width: 200px;
+    width: 20%;
+    min-height: 200px;
+}
+
+.alert-write {
+    font-size: 1.6rem;
+    line-height: 180%;
+}
 
 
-
-  .modal-content-monthly::-webkit-scrollbar {
+.modal-content-monthly::-webkit-scrollbar {
     width: 10px;
-  }
-  .modal-content-monthly::-webkit-scrollbar-thumb {
+}
+
+.modal-content-monthly::-webkit-scrollbar-thumb {
     background-color: #6b6b6b;
     border-radius: 10px;
     background-clip: padding-box;
     border: 2px solid transparent;
-  }
-  .modal-content-monthly::-webkit-scrollbar-track {
+}
+
+.modal-content-monthly::-webkit-scrollbar-track {
     background-color: #eee;
     border-radius: 10px;
     box-shadow: inset 0px 0px 5px white;
-  }
-  
-  .modal-end {
+}
+
+.modal-end {
     width: 100%;
     padding: 15px 0;
     border-top: 1px solid #eee;
-  }
+}
+
+.modal-end button {
+    margin-left: 0;
+}
 
 
-  /* 탭 */
-  .tab-nav {
+/* 탭 */
+.tab-nav {
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
     padding: 10px 0;
-  }
-  .tab-nav li a{
+}
+
+.tab-nav li a {
     display: block;
     font-size: 1.3rem;
     text-align: center;
     border-right: 1px solid #eee;
-  }
+}
 
-  .tab-nav li a.activeTab{
+.tab-nav li a.activeTab {
     color: #213f99;
     font-weight: 600;
-  }
+}
 
-  .tab-nav li:last-child a{
+.tab-nav li:last-child a {
     border-right: 0;
-  }
+}
 
 
 /* 라벨 css(상세 조회랑 다름) */
-.chekck-type{
+.chekck-type {
     display: none;
 }
 
-.chekcktype-label{
+.chekcktype-label {
     border-radius: 5px;
     padding: 5px 10px;
     background-color: #d6def6;
     color: #213f99;
 }
 
-.chekck-type:checked + label{
+.chekck-type:checked+label {
     background-color: #213f99;
     color: #fff;
 }

6ccdf33

869d590

client/views/layout/TopMenu.vue

--- client/views/layout/TopMenu.vue

+++ client/views/layout/TopMenu.vue


                         { path: "/table.page", pathName: "테이블" },
                         { path: "/btnPosition.page", pathName: "버튼별 위치" },
                         { path: "/formModal.page", pathName: "form modal" },
+                        { path: "/alertModal.page", pathName: "alert modal" },
                     ],
                 },
                 {

6ccdf33

869d590

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Horizontal from "../template/layoutTemplate/Horizontal.vue";
 import Vertical from "../template/layoutTemplate/Vertical.vue";
 import FormModal from "../template/templateElement/FormModal.vue"
+import AlertModal from "../template/templateElement/AlertModal.vue"
 import Guide from "../template/guide/TemplateGuide.vue";
 
 const routes = [

   {path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
   {path: "/vertical.page",name: "Vertical",component: Vertical,},
   {path: "/formModal.page",name: "FormModal",component: FormModal,},
+  {path: "/alertModal.page",name: "AlertModal",component: AlertModal,},
   {path: "/guide.page",name: "Guide",component: Guide,},
 ];
 

869d590

client/views/template/templateElement/AlertModal.vue (added)

+++ client/views/template/templateElement/AlertModal.vue

...	...	@@ -0,0 +1,52 @@
	1	+<template>
	2	+ <div v-show="isModalOpen" class="modal-wrapper">
	3	+ <div class="modal-container alert-modal">
	4	+ <div class="modal-title text-ct">
	5	+ <h2>모달 제목</h2>
	6	+ </div>
	7	+ <div class="modal-content-monthly">
	8	+ <p class="alert-write text-ct">경고 메세지를 입력해주세요. <br />
	9	+ 삭제,수정,추가 등등
	10	+ </p>
	11	+ </div>
	12	+ <div class="modal-end flex justify-between">
	13	+ <button class="gray-btn large-btn flex50" @click="closeModal">취소</button>
	14	+ <button class="blue-btn large-btn flex50" @click="closeModal">확인</button>
	15	+ </div>
	16	+ </div>
	17	+ </div>
	18	+</template>
	19	+
	20	+<script>
	21	+
	22	+export default {
	23	+ data() {
	24	+ return {
	25	+ isModalOpen: true,
	26	+ activeTab: 'tab1',
	27	+ modalType: 'tab-modal'
	28	+ }
	29	+ },
	30	+ methods: {
	31	+ // 탭 변경
	32	+ showTab: function (tabName) {
	33	+ this.activeTab = tabName;
	34	+ },
	35	+
	36	+ closeModal:function(){
	37	+ this.isModalOpen=false;
	38	+ }
	39	+ },
	40	+ watch: {
	41	+
	42	+ },
	43	+ computed: {
	44	+
	45	+ },
	46	+ components: {
	47	+ },
	48	+ mounted() {
	49	+ console.log('main mounted');
	50	+ }
	51	+}
	52	+</script>(파일 끝에 줄바꿈 문자 없음)

6ccdf33

869d590

client/views/template/templateElement/FormModal.vue

--- client/views/template/templateElement/FormModal.vue

+++ client/views/template/templateElement/FormModal.vue


             <div class="modal-title">
                 <div class="flex justify-between align-center">
                     <h2>모달 제목</h2>
-                    <button class="close-btn">X</button>
+                    <button class="close-btn" @click="closeModal">X</button>
                 </div>
             </div>
             <div class="modal-content-monthly" v-show="modalType == 'tab-modal'">

         showTab: function (tabName) {
             this.activeTab = tabName;
         },
+        closeModal:function(){
+            this.isModalOpen=false;
+        }
     },
     watch: {
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -168,9 +168,10 @@
168	168	}
169	169
170	170	/* 상세 서치바 */
171		-.search-bottom{
	171	+.search-bottom {
172	172	padding: 10px 0;
173	173	}
	174	+
174	175	.option-searchbar {
175	176	width: 50%;
176	177	margin: 0 auto;
...	...	@@ -196,7 +197,7 @@
196	197	font-size: 1.4rem;
197	198	}
198	199
199		-.count-zone span{
	200	+.count-zone span {
200	201	font-weight: 900;
201	202	color: #213f99;
202	203	}
...	...	@@ -214,9 +215,9 @@
214	215	justify-content: center;
215	216	align-items: center;
216	217	z-index: 200;
217		- }
218		-
219		- .modal-container {
	218	+}
	219	+
	220	+.modal-container {
220	221	background: #fff;
221	222	min-width: 500px;
222	223	width: 35%;
...	...	@@ -227,86 +228,103 @@
227	228	box-sizing: border-box;
228	229	max-height: 90%;
229	230	min-height: 500px;
230		- }
231		-
232		- .modal-title {
	231	+}
	232	+
	233	+.modal-title {
233	234	width: 100%;
234	235	border-bottom: 1px solid #d4cccc;
235	236	padding: 10px 0;
236		- }
237		-
238		- .modal-subtitle {
	237	+}
	238	+
	239	+.modal-subtitle {
239	240	font-size: 1.4rem;
240	241	font-weight: 600;
241	242	margin-bottom: 15px;
242		- }
243		-
244		- .modal-content-monthly {
	243	+}
	244	+
	245	+.modal-content-monthly {
245	246	width: 100%;
246	247	padding: 30px 0;
247	248	overflow-y: auto;
248		- }
	249	+}
	250	+
	251	+.alert-modal {
	252	+ min-width: 200px;
	253	+ width: 20%;
	254	+ min-height: 200px;
	255	+}
	256	+
	257	+.alert-write {
	258	+ font-size: 1.6rem;
	259	+ line-height: 180%;
	260	+}
249	261
250	262
251		-
252		- .modal-content-monthly::-webkit-scrollbar {
	263	+.modal-content-monthly::-webkit-scrollbar {
253	264	width: 10px;
254		- }
255		- .modal-content-monthly::-webkit-scrollbar-thumb {
	265	+}
	266	+
	267	+.modal-content-monthly::-webkit-scrollbar-thumb {
256	268	background-color: #6b6b6b;
257	269	border-radius: 10px;
258	270	background-clip: padding-box;
259	271	border: 2px solid transparent;
260		- }
261		- .modal-content-monthly::-webkit-scrollbar-track {
	272	+}
	273	+
	274	+.modal-content-monthly::-webkit-scrollbar-track {
262	275	background-color: #eee;
263	276	border-radius: 10px;
264	277	box-shadow: inset 0px 0px 5px white;
265		- }
266		-
267		- .modal-end {
	278	+}
	279	+
	280	+.modal-end {
268	281	width: 100%;
269	282	padding: 15px 0;
270	283	border-top: 1px solid #eee;
271		- }
	284	+}
	285	+
	286	+.modal-end button {
	287	+ margin-left: 0;
	288	+}
272	289
273	290
274		- /* 탭 */
275		- .tab-nav {
	291	+/* 탭 */
	292	+.tab-nav {
276	293	border-top: 1px solid #eee;
277	294	border-bottom: 1px solid #eee;
278	295	padding: 10px 0;
279		- }
280		- .tab-nav li a{
	296	+}
	297	+
	298	+.tab-nav li a {
281	299	display: block;
282	300	font-size: 1.3rem;
283	301	text-align: center;
284	302	border-right: 1px solid #eee;
285		- }
	303	+}
286	304
287		- .tab-nav li a.activeTab{
	305	+.tab-nav li a.activeTab {
288	306	color: #213f99;
289	307	font-weight: 600;
290		- }
	308	+}
291	309
292		- .tab-nav li:last-child a{
	310	+.tab-nav li:last-child a {
293	311	border-right: 0;
294		- }
	312	+}
295	313
296	314
297	315	/* 라벨 css(상세 조회랑 다름) */
298		-.chekck-type{
	316	+.chekck-type {
299	317	display: none;
300	318	}
301	319
302		-.chekcktype-label{
	320	+.chekcktype-label {
303	321	border-radius: 5px;
304	322	padding: 5px 10px;
305	323	background-color: #d6def6;
306	324	color: #213f99;
307	325	}
308	326
309		-.chekck-type:checked + label{
	327	+.chekck-type:checked+label {
310	328	background-color: #213f99;
311	329	color: #fff;
312	330	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -85,6 +85,7 @@
85	85	{ path: "/table.page", pathName: "테이블" },
86	86	{ path: "/btnPosition.page", pathName: "버튼별 위치" },
87	87	{ path: "/formModal.page", pathName: "form modal" },
	88	+ { path: "/alertModal.page", pathName: "alert modal" },
88	89	],
89	90	},
90	91	{

...	...	@@ -14,6 +14,7 @@
14	14	import Horizontal from "../template/layoutTemplate/Horizontal.vue";
15	15	import Vertical from "../template/layoutTemplate/Vertical.vue";
16	16	import FormModal from "../template/templateElement/FormModal.vue"
	17	+import AlertModal from "../template/templateElement/AlertModal.vue"
17	18	import Guide from "../template/guide/TemplateGuide.vue";
18	19
19	20	const routes = [
...	...	@@ -33,6 +34,7 @@
33	34	{path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
34	35	{path: "/vertical.page",name: "Vertical",component: Vertical,},
35	36	{path: "/formModal.page",name: "FormModal",component: FormModal,},
	37	+ {path: "/alertModal.page",name: "AlertModal",component: AlertModal,},
36	38	{path: "/guide.page",name: "Guide",component: Guide,},
37	39	];
38	40

...	...	@@ -4,7 +4,7 @@
4	4	<div class="modal-title">
5	5	<div class="flex justify-between align-center">
6	6	<h2>모달 제목</h2>
7		- <button class="close-btn">X</button>
	7	+ <button class="close-btn" @click="closeModal">X</button>
8	8	</div>
9	9	</div>
10	10	<div class="modal-content-monthly" v-show="modalType == 'tab-modal'">
...	...	@@ -151,6 +151,9 @@
151	151	showTab: function (tabName) {
152	152	this.activeTab = tabName;
153	153	},
	154	+ closeModal:function(){
	155	+ this.isModalOpen=false;
	156	+ }
154	157	},
155	158	watch: {
156	159

Delete comment