Commit @6ccdf33d20f7acd7626c5633fdc27113a0236dd3

류윤주 01-15

240115 류윤주 form 모달 추가

@6ccdf33d20f7acd7626c5633fdc27113a0236dd3

7dfedef

6ccdf33

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


     background-color: #aaa;
 }
 
+.close-btn{
+    color: #d6def6;
+}
+
 .blue-btn,
 .blue-border-btn:hover {
     background-color: #213f99;

7dfedef

6ccdf33

client/resources/css/layout.css

--- client/resources/css/layout.css

+++ client/resources/css/layout.css


 }
 
 .top-menu>ul>li {
-    min-width: 161px;
+    min-width: 152px;
     text-align: center;
     position: relative;
 }

     }
 
     100% {
-        height: 240px;
+        height: 260px;
     }
 }

7dfedef

6ccdf33

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


 
 @media screen and (min-width:1356px) and (max-width: 1536px) {
 	html{
-        font-size: 9px;
+        font-size: 8.5px;
     }
 }

7dfedef

6ccdf33

client/resources/css/style.css

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

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


     color: #213f99;
 }
 
+.list-table.orange thead tr {
+    background-color: #f29600;
+    color: #fff;
+}
+
 .list-table tbody tr:nth-child(even) {
     background-color: #f4f6ff;
+}
+
+.list-table.orange tbody tr:nth-child(even) {
+    background-color: #fff2de;
 }
 
 .form-table th {
     color: #213f99;
     text-align: center;
 }
-
 
 
 .option-table th {

 .count-zone span{
     font-weight: 900;
     color: #213f99;
+}
+
+
+/* 모달 */
+.modal-wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 200;
+  }
+  
+  .modal-container {
+    background: #fff;
+    min-width: 500px;
+    width: 35%;
+    border-radius: 5px;
+    display: grid;
+    grid-template-rows: 0.1fr 1fr 0.1fr;
+    padding: 20px;
+    box-sizing: border-box;
+    max-height: 90%;
+    min-height: 500px;
+  }
+  
+  .modal-title {
+    width: 100%;
+    border-bottom: 1px solid #d4cccc;
+    padding: 10px 0;
+  }
+  
+  .modal-subtitle {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+  }
+  
+  .modal-content-monthly {
+    width: 100%;
+    padding: 30px 0;
+    overflow-y: auto;
+  }
+
+
+
+  .modal-content-monthly::-webkit-scrollbar {
+    width: 10px;
+  }
+  .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 {
+    background-color: #eee;
+    border-radius: 10px;
+    box-shadow: inset 0px 0px 5px white;
+  }
+  
+  .modal-end {
+    width: 100%;
+    padding: 15px 0;
+    border-top: 1px solid #eee;
+  }
+
+
+  /* 탭 */
+  .tab-nav {
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+  }
+  .tab-nav li a{
+    display: block;
+    font-size: 1.3rem;
+    text-align: center;
+    border-right: 1px solid #eee;
+  }
+
+  .tab-nav li a.activeTab{
+    color: #213f99;
+    font-weight: 600;
+  }
+
+  .tab-nav li:last-child a{
+    border-right: 0;
+  }
+
+
+/* 라벨 css(상세 조회랑 다름) */
+.chekck-type{
+    display: none;
+}
+
+.chekcktype-label{
+    border-radius: 5px;
+    padding: 5px 10px;
+    background-color: #d6def6;
+    color: #213f99;
+}
+
+.chekck-type:checked + label{
+    background-color: #213f99;
+    color: #fff;
 }

7dfedef

6ccdf33

client/views/layout/TopMenu.vue

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

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


 
                     ],
                 },
-                // {
-                //     pathName: "템플릿",
-                //     subMenu: [
-                //         { path: "/searchbar.page", pathName: "서치바" },
-                //         { path: "/table.page", pathName: "테이블" },
-                //         { path: "/btnPosition.page", pathName: "버튼별 위치" },
-                //     ],
-                // },
-                // {
-                //     pathName: "레이아웃 템플릿",
-                //     subMenu: [
-                //         { path: "/vertical.page", pathName: "수직 레이아웃" },
-                //         { path: "/horizontal.page", pathName: "수평 레이아웃" },
-                //     ],
-                // },
+                {
+                    pathName: "템플릿",
+                    subMenu: [
+                        { path: "/searchbar.page", pathName: "서치바" },
+                        { path: "/table.page", pathName: "테이블" },
+                        { path: "/btnPosition.page", pathName: "버튼별 위치" },
+                        { path: "/formModal.page", pathName: "form modal" },
+                    ],
+                },
+                {
+                    pathName: "레이아웃 템플릿",
+                    subMenu: [
+                        { path: "/vertical.page", pathName: "수직 레이아웃" },
+                        { path: "/horizontal.page", pathName: "수평 레이아웃" },
+                    ],
+                },
             ],
             currentRoute: null,
             showSubmenu: false

7dfedef

6ccdf33

client/views/pages/AppRouter.js

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

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


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

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

6ccdf33

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

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

...	...	@@ -0,0 +1,167 @@
	1	+<template>
	2	+ <div v-show="isModalOpen" class="modal-wrapper">
	3	+ <div class="modal-container">
	4	+ <div class="modal-title">
	5	+ <div class="flex justify-between align-center">
	6	+ <h2>모달 제목</h2>
	7	+ <button class="close-btn">X</button>
	8	+ </div>
	9	+ </div>
	10	+ <div class="modal-content-monthly" v-show="modalType == 'tab-modal'">
	11	+ <ul class="tab-nav flex justify-between">
	12	+ <li @click="showTab('tab1')" class="flex50"><a href="#tab01"
	13	+ :class="{ activeTab: activeTab === 'tab1' }">탭정보1</a></li>
	14	+ <li @click="showTab('tab2')" class="flex50"><a href="#tab02"
	15	+ :class="{ activeTab: activeTab === 'tab2' }">탭정보2</a></li>
	16	+ </ul>
	17	+ <ul class="tab-content">
	18	+ <li id="tab01" v-show="activeTab === 'tab1'">
	19	+ <table class="form-table">
	20	+ <colgroup>
	21	+ <col style="width: 15%;" />
	22	+ <col style="width: 85%;" />
	23	+ </colgroup>
	24	+ <tbody>
	25	+ <tr>
	26	+ <th>파일명</th>
	27	+ <td></td>
	28	+ </tr>
	29	+ <tr>
	30	+ <th>API URL</th>
	31	+ <td></td>
	32	+ </tr>
	33	+ <tr>
	34	+ <th>결과타입</th>
	35	+ <td>
	36	+ <input type="radio" name="result-type" id="json" class="chekck-type" checked>
	37	+ <label for="json" class="chekcktype-label">
	38	+ json
	39	+ </label>
	40	+ <input type="radio" name="result-type" id="xml" class="chekck-type">
	41	+ <label for="xml" class="chekcktype-label">
	42	+ xml
	43	+ </label>
	44	+ </td>
	45	+ </tr>
	46	+ </tbody>
	47	+ </table>
	48	+ <table class="list-table">
	49	+ <thead>
	50	+ <tr>
	51	+ <th>No</th>
	52	+ <th>key</th>
	53	+ <th>value</th>
	54	+ <th>예외</th>
	55	+ <th>날짜</th>
	56	+ <th>삭제</th>
	57	+ </tr>
	58	+ </thead>
	59	+ <tbody>
	60	+ <tr>
	61	+ <td>1</td>
	62	+ <td>04:00:00</td>
	63	+ <td>접속성공</td>
	64	+ <td>접속성공</td>
	65	+ <td>접속성공</td>
	66	+ <td>접속성공</td>
	67	+ </tr>
	68	+ </tbody>
	69	+ </table>
	70	+ </li>
	71	+ <li id="tab01" v-show="activeTab === 'tab1'"></li>
	72	+ </ul>
	73	+ </div>
	74	+ <div class="modal-content-monthly" v-show="modalType == 'form-modal'">
	75	+ <table class="form-table">
	76	+ <colgroup>
	77	+ <col style="width: 15%;" />
	78	+ <col style="width: 85%;" />
	79	+ </colgroup>
	80	+ <tbody>
	81	+ <tr>
	82	+ <th>제목</th>
	83	+ <td></td>
	84	+ </tr>
	85	+ <tr>
	86	+ <th>DBMS</th>
	87	+ <td></td>
	88	+ </tr>
	89	+ <tr>
	90	+ <th>호스트</th>
	91	+ <td></td>
	92	+ </tr>
	93	+ <tr>
	94	+ <th>PORT</th>
	95	+ <td></td>
	96	+ </tr>
	97	+ <tr>
	98	+ <th>DB명</th>
	99	+ <td></td>
	100	+ </tr>
	101	+ <tr>
	102	+ <th>접속ID</th>
	103	+ <td></td>
	104	+ </tr>
	105	+ <tr>
	106	+ <th>접속PW</th>
	107	+ <td></td>
	108	+ </tr>
	109	+ </tbody>
	110	+ </table>
	111	+ <div class="flex justify-end">
	112	+ <button class="blue-btn small-btn">접속 테스트</button>
	113	+ </div>
	114	+ <table class="list-table orange">
	115	+ <thead>
	116	+ <tr>
	117	+ <th>No</th>
	118	+ <th>접속시간</th>
	119	+ <th>접속결과</th>
	120	+ </tr>
	121	+ </thead>
	122	+ <tbody>
	123	+ <tr>
	124	+ <td>1</td>
	125	+ <td>04:00:00</td>
	126	+ <td>접속성공</td>
	127	+ </tr>
	128	+ </tbody>
	129	+ </table>
	130	+ </div>
	131	+ <div class="modal-end flex justify-end">
	132	+ <button v-show="modalType === 'form-modal'" class="orange-btn small-btn">접속</button>
	133	+ <button v-show="modalType === 'tab-modal'" class="blue-btn small-btn">확인</button>
	134	+ </div>
	135	+ </div>
	136	+ </div>
	137	+</template>
	138	+
	139	+<script>
	140	+
	141	+export default {
	142	+ data() {
	143	+ return {
	144	+ isModalOpen: true,
	145	+ activeTab: 'tab1',
	146	+ modalType: 'tab-modal'
	147	+ }
	148	+ },
	149	+ methods: {
	150	+ // 탭 변경
	151	+ showTab: function (tabName) {
	152	+ this.activeTab = tabName;
	153	+ },
	154	+ },
	155	+ watch: {
	156	+
	157	+ },
	158	+ computed: {
	159	+
	160	+ },
	161	+ components: {
	162	+ },
	163	+ mounted() {
	164	+ console.log('main mounted');
	165	+ }
	166	+}
	167	+</script>(파일 끝에 줄바꿈 문자 없음)

Add a comment

Open 0
Closed 0

List

...	...	@@ -133,6 +133,10 @@
133	133	background-color: #aaa;
134	134	}
135	135
	136	+.close-btn{
	137	+ color: #d6def6;
	138	+}
	139	+
136	140	.blue-btn,
137	141	.blue-border-btn:hover {
138	142	background-color: #213f99;

...	...	@@ -125,7 +125,7 @@
125	125	}
126	126
127	127	.top-menu>ul>li {
128		- min-width: 161px;
	128	+ min-width: 152px;
129	129	text-align: center;
130	130	position: relative;
131	131	}
...	...	@@ -215,6 +215,6 @@
215	215	}
216	216
217	217	100% {
218		- height: 240px;
	218	+ height: 260px;
219	219	}
220	220	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -126,6 +126,6 @@
126	126
127	127	@media screen and (min-width:1356px) and (max-width: 1536px) {
128	128	html{
129		- font-size: 9px;
	129	+ font-size: 8.5px;
130	130	}
131	131	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -82,15 +82,23 @@
82	82	color: #213f99;
83	83	}
84	84
	85	+.list-table.orange thead tr {
	86	+ background-color: #f29600;
	87	+ color: #fff;
	88	+}
	89	+
85	90	.list-table tbody tr:nth-child(even) {
86	91	background-color: #f4f6ff;
	92	+}
	93	+
	94	+.list-table.orange tbody tr:nth-child(even) {
	95	+ background-color: #fff2de;
87	96	}
88	97
89	98	.form-table th {
90	99	color: #213f99;
91	100	text-align: center;
92	101	}
93		-
94	102
95	103
96	104	.option-table th {
...	...	@@ -191,4 +199,114 @@
191	199	.count-zone span{
192	200	font-weight: 900;
193	201	color: #213f99;
	202	+}
	203	+
	204	+
	205	+/* 모달 */
	206	+.modal-wrapper {
	207	+ background-color: rgba(0, 0, 0, 0.5);
	208	+ position: fixed;
	209	+ width: 100%;
	210	+ height: 100%;
	211	+ top: 0;
	212	+ left: 0;
	213	+ display: flex;
	214	+ justify-content: center;
	215	+ align-items: center;
	216	+ z-index: 200;
	217	+ }
	218	+
	219	+ .modal-container {
	220	+ background: #fff;
	221	+ min-width: 500px;
	222	+ width: 35%;
	223	+ border-radius: 5px;
	224	+ display: grid;
	225	+ grid-template-rows: 0.1fr 1fr 0.1fr;
	226	+ padding: 20px;
	227	+ box-sizing: border-box;
	228	+ max-height: 90%;
	229	+ min-height: 500px;
	230	+ }
	231	+
	232	+ .modal-title {
	233	+ width: 100%;
	234	+ border-bottom: 1px solid #d4cccc;
	235	+ padding: 10px 0;
	236	+ }
	237	+
	238	+ .modal-subtitle {
	239	+ font-size: 1.4rem;
	240	+ font-weight: 600;
	241	+ margin-bottom: 15px;
	242	+ }
	243	+
	244	+ .modal-content-monthly {
	245	+ width: 100%;
	246	+ padding: 30px 0;
	247	+ overflow-y: auto;
	248	+ }
	249	+
	250	+
	251	+
	252	+ .modal-content-monthly::-webkit-scrollbar {
	253	+ width: 10px;
	254	+ }
	255	+ .modal-content-monthly::-webkit-scrollbar-thumb {
	256	+ background-color: #6b6b6b;
	257	+ border-radius: 10px;
	258	+ background-clip: padding-box;
	259	+ border: 2px solid transparent;
	260	+ }
	261	+ .modal-content-monthly::-webkit-scrollbar-track {
	262	+ background-color: #eee;
	263	+ border-radius: 10px;
	264	+ box-shadow: inset 0px 0px 5px white;
	265	+ }
	266	+
	267	+ .modal-end {
	268	+ width: 100%;
	269	+ padding: 15px 0;
	270	+ border-top: 1px solid #eee;
	271	+ }
	272	+
	273	+
	274	+ /* 탭 */
	275	+ .tab-nav {
	276	+ border-top: 1px solid #eee;
	277	+ border-bottom: 1px solid #eee;
	278	+ padding: 10px 0;
	279	+ }
	280	+ .tab-nav li a{
	281	+ display: block;
	282	+ font-size: 1.3rem;
	283	+ text-align: center;
	284	+ border-right: 1px solid #eee;
	285	+ }
	286	+
	287	+ .tab-nav li a.activeTab{
	288	+ color: #213f99;
	289	+ font-weight: 600;
	290	+ }
	291	+
	292	+ .tab-nav li:last-child a{
	293	+ border-right: 0;
	294	+ }
	295	+
	296	+
	297	+/* 라벨 css(상세 조회랑 다름) */
	298	+.chekck-type{
	299	+ display: none;
	300	+}
	301	+
	302	+.chekcktype-label{
	303	+ border-radius: 5px;
	304	+ padding: 5px 10px;
	305	+ background-color: #d6def6;
	306	+ color: #213f99;
	307	+}
	308	+
	309	+.chekck-type:checked + label{
	310	+ background-color: #213f99;
	311	+ color: #fff;
194	312	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -78,21 +78,22 @@
78	78
79	79	],
80	80	},
81		- // {
82		- // pathName: "템플릿",
83		- // subMenu: [
84		- // { path: "/searchbar.page", pathName: "서치바" },
85		- // { path: "/table.page", pathName: "테이블" },
86		- // { path: "/btnPosition.page", pathName: "버튼별 위치" },
87		- // ],
88		- // },
89		- // {
90		- // pathName: "레이아웃 템플릿",
91		- // subMenu: [
92		- // { path: "/vertical.page", pathName: "수직 레이아웃" },
93		- // { path: "/horizontal.page", pathName: "수평 레이아웃" },
94		- // ],
95		- // },
	81	+ {
	82	+ pathName: "템플릿",
	83	+ subMenu: [
	84	+ { path: "/searchbar.page", pathName: "서치바" },
	85	+ { path: "/table.page", pathName: "테이블" },
	86	+ { path: "/btnPosition.page", pathName: "버튼별 위치" },
	87	+ { path: "/formModal.page", pathName: "form modal" },
	88	+ ],
	89	+ },
	90	+ {
	91	+ pathName: "레이아웃 템플릿",
	92	+ subMenu: [
	93	+ { path: "/vertical.page", pathName: "수직 레이아웃" },
	94	+ { path: "/horizontal.page", pathName: "수평 레이아웃" },
	95	+ ],
	96	+ },
96	97	],
97	98	currentRoute: null,
98	99	showSubmenu: false

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

Delete comment