Commit @7dfedefd355bcb9d1317a154b3d52ac96ded3cc3

9ee97a3

7dfedef

client/resources/css/common.css

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

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


     border-radius: 5px;
 }
 
+.icon-btn{
+    padding: 5px;
+    border-radius: 50%;
+}
+
 .logout-btn {
     padding: 5px 10px;
     color: #aaa;

     background-color: #fff;
 }
 
+.tp-btn{
+    background-color: transparent;
+    width: 15px;
+    height: 15px;
+    margin-left: 10px;
+}
+
 
 
 

9ee97a3

7dfedef

client/resources/css/layout.css

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

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


 
 
 .user-name {
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     margin-left: 5px;
 }
 

 
 nav.side-menu ul.sub-menu,
 nav.top-menu ul.sub-menu {
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     overflow: hidden;
     transition: all 0.5s ease-in-out;
 }

9ee97a3

7dfedef

client/resources/css/reset.css

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

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


 
 img,
 svg {
+    width: 100%;
     vertical-align: middle;
 }
 

 table th,
 table td {
     padding: 8px;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
 }
 
 button {
     border: none;
     background-color: transparent;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     margin-left: 10px;
+    cursor: pointer;
 }
 
 label {
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     margin-left: 5px;
 }
 

 ::-webkit-scrollbar-track {
     background-color: #fff;
     border-radius: 10px;
+}
+
+
+@media screen and (min-width:1356px) and (max-width: 1536px) {
+	html{
+        font-size: 9px;
+    }
 }

9ee97a3

7dfedef

client/resources/css/style.css

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

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


 
 /* 기타 공통 */
 .coupler {
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     margin-left: 5px;
 }
 
 .option-title {
     padding: 0 5px;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     color: #213f99;
     margin-left: 5px;
 }
 
 .count-zone {
-    font-size: 1.3rem;
+    font-size: 1.4rem;
 }
 
 .count-zone span{

9ee97a3

7dfedef

client/views/component/PageNavigation.vue

--- client/views/component/PageNavigation.vue

+++ client/views/component/PageNavigation.vue


 <style scoped>
 .navigate_bar {
     padding: 10px 0px;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
 }
 </style>

9ee97a3

7dfedef

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: "버튼별 위치" },
+                //     ],
+                // },
+                // {
+                //     pathName: "레이아웃 템플릿",
+                //     subMenu: [
+                //         { path: "/vertical.page", pathName: "수직 레이아웃" },
+                //         { path: "/horizontal.page", pathName: "수평 레이아웃" },
+                //     ],
+                // },
             ],
             currentRoute: null,
             showSubmenu: false

9ee97a3

7dfedef

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


 }
 
 .found-zone > a{
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     padding: 0 10px;
 }
 

7dfedef

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

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

...	...	@@ -0,0 +1,76 @@
	1	+<template>
	2	+ <div class="table-zone">
	3	+ <div class="flex justify-between align-center">
	4	+ <div class="count-zone">
	5	+ <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
	6	+ </div>
	7	+ <div class="cunt-selectZone">
	8	+ <select name="" id="">
	9	+ <option value="">10개 보기</option>
	10	+ <option value="">20개 보기</option>
	11	+ </select>
	12	+ </div>
	13	+ </div>
	14	+ <table class="list-table">
	15	+ <colgroup>
	16	+ <col style="width: ;">
	17	+ <col style="width: ;">
	18	+ <col style="width: ;">
	19	+ <col style="width: ;">
	20	+ </colgroup>
	21	+ <thead>
	22	+ <tr>
	23	+ <th>No <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	24	+ <th>user ID <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	25	+ <th>이름 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	26	+ <th>생년월일 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	27	+ <th>성별 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	28	+ </tr>
	29	+ </thead>
	30	+ <tbody>
	31	+ <tr>
	32	+ <td>1</td>
	33	+ <td>test123</td>
	34	+ <td>홍길동</td>
	35	+ <td>1999.01.01</td>
	36	+ <td>여</td>
	37	+ </tr>
	38	+ <tr>
	39	+ <td>1</td>
	40	+ <td>test123</td>
	41	+ <td>홍길동</td>
	42	+ <td>1999.01.01</td>
	43	+ <td>여</td>
	44	+ </tr>
	45	+ </tbody>
	46	+ </table>
	47	+ </div>
	48	+</template>
	49	+
	50	+<script>
	51	+import SvgIcon from '@jamescoyle/vue-icon';
	52	+import { mdiCog } from '@mdi/js';
	53	+
	54	+export default {
	55	+ data() {
	56	+ return {
	57	+ settingPath: mdiCog
	58	+ }
	59	+ },
	60	+ methods: {
	61	+
	62	+ },
	63	+ watch: {
	64	+
	65	+ },
	66	+ computed: {
	67	+
	68	+ },
	69	+ components: {
	70	+ 'SvgIcon': SvgIcon
	71	+ },
	72	+ mounted() {
	73	+ console.log('main mounted');
	74	+ }
	75	+}
	76	+</script>

9ee97a3

7dfedef

client/views/template/templateElement/DetailSearchBar.vue

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

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


                 </div>
             </div>
             <div class="search-bottom">
-                <div class="flex">
-                    <div class="flex flex30  align-center">
+                <div class="flex justify-between">
+                    <div class="flex flex30 align-center justify-center">
                     <span class="option-title">단일조건</span>
                         <div class="input-container flex">
                             <label class="radio-label">

                             </label>
                         </div>
                     </div>
-                    <div class="flex flex30  align-center">
+                    <div class="flex flex30 align-center justify-center">
                     <span class="option-title">다중조건</span>
                         <div class="input-container flex">
                             <label class="check-label">

                             </label>
                         </div>
                     </div>
-                    <div class="flex flex30  align-center">
+                    <div class="flex flex30 align-center justify-center">
                     <span class="option-title">다중조건</span>
                         <div class="input-container flex">
-                            <label class="radio-label">
-                                <input type="radio" name="radio" checked="" class="custom-radiobox ">
+                            <label class="check-label">
+                                <input type="checkbox" name="check" checked="" class="custom-checkbox ">
                                 <span>HTML</span>
                             </label>
-                            <label class="radio-label">
-                                <input type="radio" name="radio" class="custom-radiobox ">
+                            <label class="check-label">
+                                <input type="checkbox" name="check" class="custom-checkbox ">
                                 <span>CSS</span>
                             </label>
-                            <label class="radio-label">
-                                <input type="radio" name="radio" class="custom-radiobox ">
+                            <label class="check-label">
+                                <input type="checkbox" name="check" class="custom-checkbox ">
                                 <span>Javascript</span>
                             </label>
                         </div>

9ee97a3

7dfedef

client/views/template/templateElement/Table.vue

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

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


             <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
             <FormTable />
         </div>
+        <div class="box">
+            <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
+            <BtnTable />
+        </div>
     </div>
 </template>
 
 <script>
 import ListTable from './ListTable.vue';
 import FormTable from './FormTable.vue';
+import BtnTable from './BtnTable.vue';
 export default {
     data() {
         return {

     },
     components: {
         'ListTable': ListTable,
-        'FormTable': FormTable
+        'FormTable': FormTable,
+        'BtnTable':BtnTable
     },
     mounted() {
 

...	...	@@ -111,6 +111,11 @@
111	111	border-radius: 5px;
112	112	}
113	113
	114	+.icon-btn{
	115	+ padding: 5px;
	116	+ border-radius: 50%;
	117	+}
	118	+
114	119	.logout-btn {
115	120	padding: 5px 10px;
116	121	color: #aaa;
...	...	@@ -207,6 +212,13 @@
207	212	background-color: #fff;
208	213	}
209	214
	215	+.tp-btn{
	216	+ background-color: transparent;
	217	+ width: 15px;
	218	+ height: 15px;
	219	+ margin-left: 10px;
	220	+}
	221	+
210	222
211	223
212	224

...	...	@@ -173,19 +173,19 @@
173	173
174	174	/* 기타 공통 */
175	175	.coupler {
176		- font-size: 1.3rem;
	176	+ font-size: 1.4rem;
177	177	margin-left: 5px;
178	178	}
179	179
180	180	.option-title {
181	181	padding: 0 5px;
182		- font-size: 1.3rem;
	182	+ font-size: 1.4rem;
183	183	color: #213f99;
184	184	margin-left: 5px;
185	185	}
186	186
187	187	.count-zone {
188		- font-size: 1.3rem;
	188	+ font-size: 1.4rem;
189	189	}
190	190
191	191	.count-zone span{

...	...	@@ -90,7 +90,7 @@
90	90	}
91	91
92	92	.found-zone > a{
93		- font-size: 1.3rem;
	93	+ font-size: 1.4rem;
94	94	padding: 0 10px;
95	95	}
96	96

...	...	@@ -42,7 +42,7 @@
42	42
43	43
44	44	.user-name {
45		- font-size: 1.3rem;
	45	+ font-size: 1.4rem;
46	46	margin-left: 5px;
47	47	}
48	48
...	...	@@ -67,7 +67,7 @@
67	67
68	68	nav.side-menu ul.sub-menu,
69	69	nav.top-menu ul.sub-menu {
70		- font-size: 1.3rem;
	70	+ font-size: 1.4rem;
71	71	overflow: hidden;
72	72	transition: all 0.5s ease-in-out;
73	73	}

...	...	@@ -36,6 +36,7 @@
36	36
37	37	img,
38	38	svg {
	39	+ width: 100%;
39	40	vertical-align: middle;
40	41	}
41	42
...	...	@@ -49,18 +50,19 @@
49	50	table th,
50	51	table td {
51	52	padding: 8px;
52		- font-size: 1.3rem;
	53	+ font-size: 1.4rem;
53	54	}
54	55
55	56	button {
56	57	border: none;
57	58	background-color: transparent;
58		- font-size: 1.3rem;
	59	+ font-size: 1.4rem;
59	60	margin-left: 10px;
	61	+ cursor: pointer;
60	62	}
61	63
62	64	label {
63		- font-size: 1.3rem;
	65	+ font-size: 1.4rem;
64	66	margin-left: 5px;
65	67	}
66	68
...	...	@@ -119,4 +121,11 @@
119	121	::-webkit-scrollbar-track {
120	122	background-color: #fff;
121	123	border-radius: 10px;
	124	+}
	125	+
	126	+
	127	+@media screen and (min-width:1356px) and (max-width: 1536px) {
	128	+ html{
	129	+ font-size: 9px;
	130	+ }
122	131	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -48,6 +48,6 @@
48	48	<style scoped>
49	49	.navigate_bar {
50	50	padding: 10px 0px;
51		- font-size: 1.3rem;
	51	+ font-size: 1.4rem;
52	52	}
53	53	</style>

...	...	@@ -78,21 +78,21 @@
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	+ // ],
	88	+ // },
	89	+ // {
	90	+ // pathName: "레이아웃 템플릿",
	91	+ // subMenu: [
	92	+ // { path: "/vertical.page", pathName: "수직 레이아웃" },
	93	+ // { path: "/horizontal.page", pathName: "수평 레이아웃" },
	94	+ // ],
	95	+ // },
96	96	],
97	97	currentRoute: null,
98	98	showSubmenu: false

...	...	@@ -18,8 +18,8 @@
18	18	</div>
19	19	</div>
20	20	<div class="search-bottom">
21		- <div class="flex">
22		- <div class="flex flex30 align-center">
	21	+ <div class="flex justify-between">
	22	+ <div class="flex flex30 align-center justify-center">
23	23	<span class="option-title">단일조건</span>
24	24	<div class="input-container flex">
25	25	<label class="radio-label">
...	...	@@ -36,7 +36,7 @@
36	36	</label>
37	37	</div>
38	38	</div>
39		- <div class="flex flex30 align-center">
	39	+ <div class="flex flex30 align-center justify-center">
40	40	<span class="option-title">다중조건</span>
41	41	<div class="input-container flex">
42	42	<label class="check-label">
...	...	@@ -53,19 +53,19 @@
53	53	</label>
54	54	</div>
55	55	</div>
56		- <div class="flex flex30 align-center">
	56	+ <div class="flex flex30 align-center justify-center">
57	57	<span class="option-title">다중조건</span>
58	58	<div class="input-container flex">
59		- <label class="radio-label">
60		- <input type="radio" name="radio" checked="" class="custom-radiobox ">
	59	+ <label class="check-label">
	60	+ <input type="checkbox" name="check" checked="" class="custom-checkbox ">
61	61	<span>HTML</span>
62	62	</label>
63		- <label class="radio-label">
64		- <input type="radio" name="radio" class="custom-radiobox ">
	63	+ <label class="check-label">
	64	+ <input type="checkbox" name="check" class="custom-checkbox ">
65	65	<span>CSS</span>
66	66	</label>
67		- <label class="radio-label">
68		- <input type="radio" name="radio" class="custom-radiobox ">
	67	+ <label class="check-label">
	68	+ <input type="checkbox" name="check" class="custom-checkbox ">
69	69	<span>Javascript</span>
70	70	</label>
71	71	</div>

...	...	@@ -8,12 +8,17 @@
8	8	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
9	9	<FormTable />
10	10	</div>
	11	+ <div class="box">
	12	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
	13	+ <BtnTable />
	14	+ </div>
11	15	</div>
12	16	</template>
13	17
14	18	<script>
15	19	import ListTable from './ListTable.vue';
16	20	import FormTable from './FormTable.vue';
	21	+import BtnTable from './BtnTable.vue';
17	22	export default {
18	23	data() {
19	24	return {
...	...	@@ -30,7 +35,8 @@
30	35	},
31	36	components: {
32	37	'ListTable': ListTable,
33		- 'FormTable': FormTable
	38	+ 'FormTable': FormTable,
	39	+ 'BtnTable':BtnTable
34	40	},
35	41	mounted() {
36	42

Delete comment