Commit @8c89403c340b5ed4b21eda937ea0b5fa9f861a3e

류윤주 01-12

240112 류윤주 sample page 추가

@8c89403c340b5ed4b21eda937ea0b5fa9f861a3e

2041009

8c89403

client/resources/css/common.css

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

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


 .flex-column {
     display: flex;
     flex-direction: column;
-    gap: 30px;
+    justify-content: space-between;
+    height: 100%;
 }
 
 

 }
 
 .large-btn {
-    height: 100%;
+    width: 100%;
     padding: 5px 15px;
     border-radius: 5px;
 }

 /* box 공통 */
 .container {
     width: 100%;
-    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .content-box {

     height: 100%;
 }
 
+.content{
+    margin-bottom: 30px;
+}
 
-.top-content,
-.bottom-content,
+.content:last-child{
+    margin-bottom: 0;
+}
+
 .left-content,
 .right-content,
 .content {

     border-radius: 10px;
     background-color: #fff;
     position: relative;
+}
+
+.form-box{
+    background-color: #edf0ff;
+    border: 1px solid #dbe3fb;
 }
 
 /* title 공통 */

 }
 
 .content-titleZone {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #aaa;
     margin-bottom: 15px;
 }
 

     background-color: #f4f6ff;
 }
 
-.form-table {
-    border-bottom: 1px solid #aaa;
-}
-
 .form-table th {
-    background-color: #dbe3fb;
     color: #213f99;
     text-align: center;
-    border-top: 1px solid #fff;
 }
 
-.form-table td {
-    border-top: 1px solid #aaa;
-}
+
 
 .option-table th{
     text-align: left;

2041009

8c89403

client/resources/css/layout.css

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

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


 
 .layout-wrap{
     width: 100%;
-    height: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;  
 }
 
 header {

 /* 메인 */
 .main {
     padding: 20px;
-    height: calc(100% - 105px);
+    height: 100%;
     grid-area: main;
 }
 
+.layout-wrap .main {
+    display: flex;
+    padding: 20px;
+    flex-grow: 1;  
+    /* overflow: auto;  */
+    grid-area: main;
+}
+
+
+
 
 
 @keyframes slideDown {

2041009

8c89403

client/resources/css/reset.css

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

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


 body,
 #root {
     width: 100%;
-    height: 100vh;
+    height: 100%;
+    min-height: 100vh;
     font-size: 10px;
     color: #333;
     font-family: 'Pretendard';

     background-color: #f7f6fb;
 }
 
+
 a {
     color: #333;
     text-decoration: none;

2041009

8c89403

client/views/component/PaginationButton.vue

--- client/views/component/PaginationButton.vue

+++ client/views/component/PaginationButton.vue


 /*PAGINATION NEW START*/
 .component-pagination {
 	padding: 15px 0;
-	position: absolute;
-	bottom: 0;
-	left: 50%;
-	transform: translateX(-50%);
 }
 
 .pagination-button-type {

2041009

8c89403

client/views/pages/AppRouter.js

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

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


 import HostManagement from "../pages/file/HostManagement.vue";
 import ScheduleManagement from "../pages/schedule/ScheduleManagement.vue";
 import ScheduleLogManagement from "../pages/schedule/ScheduleLogManagement.vue";
+import Login from "../pages/login/Login.vue";
 
-// 템플릿 화면
+// 템플릿 
 import Searchbar from "../pages/template/Searchbar.vue";
 import Table from "../pages/template/Table.vue";
 import BtnPosition from "../pages/template/BtnPosition.vue";

   {path: "/hostManagement.page",name: "HostManagement",component: HostManagement},
   {path: "/scheduleManagement.page",name: "ScheduleManagement",component: ScheduleManagement,},
   {path: "/scheduleLogManagement.page",name: "ScheduleLogManagement",component: ScheduleLogManagement,},
+  {path: "/login.page",name: "Login",component: Login,},
 
 
   // 템플릿 화면

2041009

8c89403

client/views/pages/layoutTemplate/Horizontal.vue

--- client/views/pages/layoutTemplate/Horizontal.vue

+++ client/views/pages/layoutTemplate/Horizontal.vue


             <PageNavigation />
         </div>
         <div class="content-box flex-column">
-            <div class="top-content"></div>
-        <div class="bottom-content"></div>
+            <div class="content">
+                <div class="content-titleZone">
+                    <p class="box-title">목록</p>
+                </div>
+                <div class="searchbar-zone">
+                    <div class="flex-end">
+                        <span class="option-title">검증유형</span>
+                        <select name="" id="" class="square-select">
+                            <option value="all">전체</option>
+                        </select>
+                        <span class="option-title">품질지표명</span>
+                        <select name="" id="" class="square-select">
+                            <option value="all">전체</option>
+                        </select>
+                        <div class="search-square">
+                            <input type="text" class="square-input" placeholder="Search">
+                            <button class="square-button">
+                                <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex-between">
+                    <div class="count-zone">
+                        <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
+                    </div>
+                    <div class="btn-zone flex">
+                        <button class="red-border-btn small-btn">선택 항목 삭제</button>
+                    </div>
+                </div>
+                <div class="table-zone">
+                    <table class="list-table">
+                        <colgroup>
+                            <col style="width: ;">
+                            <col style="width: ;">
+                            <col style="width: ;">
+                            <col style="width: ;">
+                            <col style="width: ;">
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th><input type="checkbox" name="" id=""></th>
+                                <th>No</th>
+                                <th>user ID</th>
+                                <th>이름</th>
+                                <th>생년월일</th>
+                                <th>성별</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><input type="checkbox" name="" id=""></td>
+                                <td>1</td>
+                                <td>test123</td>
+                                <td>홍길동</td>
+                                <td>1999.01.01</td>
+                                <td>여</td>
+                            </tr>
+                            
+                        </tbody>
+                    </table>
+                </div>
+                <PaginationButton />
+            </div>
+            <div class="content form-box">
+                <div class="content-titleZone">
+                    <p class="box-title">등록</p>
+                </div>
+                <div class="table-zone">
+                    <table class="form-table">
+                        <colgroup>
+                            <col style="width: 10%;">
+                            <col style="width: 40%;">
+                            <col style="width: 10%;">
+                            <col style="width: 40%;">
+                        </colgroup>
+                        <tbody>
+                            <tr>
+                                <th>user ID</th>
+                                <td><input type="text" name="" id=""></td>
+                                <th>이름</th>
+                                <td><input type="text" name="" id=""></td>
+                            </tr>
+                            <tr>
+                                <th>생년월일</th>
+                                <td>
+                                    <div class="flex">
+                                        <select name="" id=""></select>
+                                        <select name="" id=""></select>
+                                        <select name="" id=""></select>
+                                    </div>
+                                </td>
+                                <th>성별</th>
+                                <td>
+                                    <select name="" id=""></select>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="flex-end">
+                    <button class="blue-border-btn small-btn">등록</button>
+                    <button class="darkg-border-btn small-btn">초기화</button>
+                </div>
+            </div>
         </div>
     </div>
 </template>

 <script>
 import PageNavigation from '../../component/PageNavigation.vue';
 import PaginationButton from '../../component/PaginationButton.vue';
-
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiMagnify } from '@mdi/js';
 export default {
-    data () {
+    data() {
         return {
+            searchPath: mdiMagnify
         }
     },
     methods: {

     },
     components: {
         'PageNavigation': PageNavigation,
-        'PaginationButton': PaginationButton
+        'PaginationButton': PaginationButton,
+        'SvgIcon': SvgIcon
     },
     mounted() {
         console.log('main mounted');
     }
 }
-</script>
+</script>
+
+<style scoped>
+.option-title {
+    padding: 0 5px;
+    font-size: 1.3rem;
+    color: #213f99;
+    margin-left: 5px;
+}
+
+.count-zone {
+    font-size: 1.3rem;
+}
+</style>

2041009

8c89403

client/views/pages/layoutTemplate/Vertical.vue

--- client/views/pages/layoutTemplate/Vertical.vue

+++ client/views/pages/layoutTemplate/Vertical.vue

...	...	@@ -31,36 +31,38 @@
31	31	</div>
32	32	</div>
33	33	</div>
34		- <div class="table-zone">
35		- <table class="list-table">
36		- <colgroup>
37		- <col style="width: ;">
38		- <col style="width: ;">
39		- <col style="width: ;">
40		- <col style="width: ;">
41		- </colgroup>
42		- <thead>
43		- <tr>
44		- <th>No</th>
45		- <th>user ID</th>
46		- <th>이름</th>
47		- <th>생년월일</th>
48		- <th>성별</th>
49		- </tr>
50		- </thead>
51		- <tbody>
52		- <tr>
53		- <td>1</td>
54		- <td>test123</td>
55		- <td>홍길동</td>
56		- <td>1999.01.01</td>
57		- <td>여</td>
58		- </tr>
	34	+ <div class="flex-column">
	35	+ <div class="table-zone">
	36	+ <table class="list-table">
	37	+ <colgroup>
	38	+ <col style="width: ;">
	39	+ <col style="width: ;">
	40	+ <col style="width: ;">
	41	+ <col style="width: ;">
	42	+ </colgroup>
	43	+ <thead>
	44	+ <tr>
	45	+ <th>No</th>
	46	+ <th>user ID</th>
	47	+ <th>이름</th>
	48	+ <th>생년월일</th>
	49	+ <th>성별</th>
	50	+ </tr>
	51	+ </thead>
	52	+ <tbody>
	53	+ <tr>
	54	+ <td>1</td>
	55	+ <td>test123</td>
	56	+ <td>홍길동</td>
	57	+ <td>1999.01.01</td>
	58	+ <td>여</td>
	59	+ </tr>
59	60
60		- </tbody>
61		- </table>
	61	+ </tbody>
	62	+ </table>
	63	+ </div>
	64	+ <PaginationButton class="flex20"/>
62	65	</div>
63		- <PaginationButton />
64	66	</div>
65	67	</div>
66	68	</div>
...	...	@@ -103,7 +105,7 @@
103	105	.content-zone {
104	106	border: 1px solid #eee;
105	107	padding: 10px;
106		- height: calc(100% - 44px);
	108	+ height: calc(100% - 55px);
107	109	overflow: auto;
108	110	}
109	111	</style> (파일 끝에 줄바꿈 문자 없음)

2041009

8c89403

client/views/pages/login/Login.vue

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

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


 <template>
-    <div>Main.vue</div>
+    <div class="login-page">
+        <div class="login-wrap flex-center">
+            <div class="login-content">
+                <div class="logo">
+                    <img src="../../../resources/img/logo.png" alt="">
+                </div>
+                <div class="login-zone">
+                    <div class="input-wrap">
+                        <input type="text" placeholder="아이디를 입력하세요." class="login-input"/>
+                        <input type="password" placeholder="비밀번호를 입력하세요." class="login-input"/>
+                    </div>
+                    <div class="found-zone flex-center">
+                        <router-link to="">아이디찾기</router-link>
+                        <router-link to="">비밀번호 찾기</router-link>
+                        <router-link to="">회원가입</router-link>
+                    </div>
+                </div>
+                <button class="blue-btn large-btn">로그인</button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 
 export default {
-    data () {
+    data() {
         return {
         }
     },

         console.log('main mounted');
     }
 }
-</script>
+</script>
+
+<style scoped>
+.login-page{
+    width: 100%;
+    height: 100%;
+}
+
+.login-wrap{
+    width: 100%;
+    height: 100%;
+}
+
+.login-content{
+    min-width: 300px;
+    max-width: 400px;
+    padding:30px;
+    border: 1px solid #eee;
+    border-radius: 10px;
+    background-color: #fff;
+}
+.logo{
+    width: 100%;
+    margin-bottom: 30px;
+}
+.logo > img{
+    display: block;
+    margin: 0 auto;
+}
+
+.login-input{
+    margin-left: 0;
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #f1f5ff;
+}
+
+.login-input:last-child{
+    margin-bottom: 0;
+}
+
+.found-zone{
+  padding: 20px 0;
+}
+
+.found-zone > a{
+    font-size: 1.3rem;
+    padding: 0 10px;
+}
+
+.login-page .blue-btn{
+    margin-left: 0;
+    padding: 10px 0;
+}
+</style>

2041009

8c89403

client/views/pages/template/FormTable.vue

--- client/views/pages/template/FormTable.vue

+++ client/views/pages/template/FormTable.vue

...	...	@@ -1,34 +1,36 @@
1	1	<template>
2		- <table class="form-table">
3		- <colgroup>
4		- <col style="width: ;">
5		- <col style="width: ;">
6		- <col style="width: ;">
7		- <col style="width: ;">
8		- </colgroup>
9		- <tbody>
10		- <tr>
11		- <th>user ID</th>
12		- <td><input type="text" name="" id=""></td>
13		- <th>이름</th>
14		- <td><input type="text" name="" id=""></td>
15		- </tr>
16		- <tr>
17		- <th>생년월일</th>
18		- <td>
19		- <div class="flex">
	2	+ <div class="table-zone">
	3	+ <table class="form-table">
	4	+ <colgroup>
	5	+ <col style="width: ;">
	6	+ <col style="width: ;">
	7	+ <col style="width: ;">
	8	+ <col style="width: ;">
	9	+ </colgroup>
	10	+ <tbody>
	11	+ <tr>
	12	+ <th>user ID</th>
	13	+ <td><input type="text" name="" id=""></td>
	14	+ <th>이름</th>
	15	+ <td><input type="text" name="" id=""></td>
	16	+ </tr>
	17	+ <tr>
	18	+ <th>생년월일</th>
	19	+ <td>
	20	+ <div class="flex">
	21	+ <select name="" id=""></select>
	22	+ <select name="" id=""></select>
	23	+ <select name="" id=""></select>
	24	+ </div>
	25	+ </td>
	26	+ <th>성별</th>
	27	+ <td>
20	28	<select name="" id=""></select>
21		- <select name="" id=""></select>
22		- <select name="" id=""></select>
23		- </div>
24		- </td>
25		- <th>성별</th>
26		- <td>
27		- <select name="" id=""></select>
28		- </td>
29		- </tr>
30		- </tbody>
31		- </table>
	29	+ </td>
	30	+ </tr>
	31	+ </tbody>
	32	+ </table>
	33	+ </div>
32	34	</template>
33	35
34	36	<script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -40,7 +40,8 @@
40	40	.flex-column {
41	41	display: flex;
42	42	flex-direction: column;
43		- gap: 30px;
	43	+ justify-content: space-between;
	44	+ height: 100%;
44	45	}
45	46
46	47
...	...	@@ -98,7 +99,7 @@
98	99	}
99	100
100	101	.large-btn {
101		- height: 100%;
	102	+ width: 100%;
102	103	padding: 5px 15px;
103	104	border-radius: 5px;
104	105	}
...	...	@@ -204,7 +205,9 @@
204	205	/* box 공통 */
205	206	.container {
206	207	width: 100%;
207		- height: 100%;
	208	+ display: flex;
	209	+ flex-direction: column;
	210	+ flex-grow: 1;
208	211	}
209	212
210	213	.content-box {
...	...	@@ -217,9 +220,14 @@
217	220	height: 100%;
218	221	}
219	222
	223	+.content{
	224	+ margin-bottom: 30px;
	225	+}
220	226
221		-.top-content,
222		-.bottom-content,
	227	+.content:last-child{
	228	+ margin-bottom: 0;
	229	+}
	230	+
223	231	.left-content,
224	232	.right-content,
225	233	.content {
...	...	@@ -227,6 +235,11 @@
227	235	border-radius: 10px;
228	236	background-color: #fff;
229	237	position: relative;
	238	+}
	239	+
	240	+.form-box{
	241	+ background-color: #edf0ff;
	242	+ border: 1px solid #dbe3fb;
230	243	}
231	244
232	245	/* title 공통 */
...	...	@@ -241,6 +254,8 @@
241	254	}
242	255
243	256	.content-titleZone {
	257	+ padding-bottom: 10px;
	258	+ border-bottom: 1px solid #aaa;
244	259	margin-bottom: 15px;
245	260	}
246	261
...	...	@@ -269,20 +284,12 @@
269	284	background-color: #f4f6ff;
270	285	}
271	286
272		-.form-table {
273		- border-bottom: 1px solid #aaa;
274		-}
275		-
276	287	.form-table th {
277		- background-color: #dbe3fb;
278	288	color: #213f99;
279	289	text-align: center;
280		- border-top: 1px solid #fff;
281	290	}
282	291
283		-.form-table td {
284		- border-top: 1px solid #aaa;
285		-}
	292	+
286	293
287	294	.option-table th{
288	295	text-align: left;

...	...	@@ -14,7 +14,9 @@
14	14
15	15	.layout-wrap{
16	16	width: 100%;
17		- height: 100%;
	17	+ min-height: 100%;
	18	+ display: flex;
	19	+ flex-direction: column;
18	20	}
19	21
20	22	header {
...	...	@@ -171,10 +173,20 @@
171	173	/* 메인 */
172	174	.main {
173	175	padding: 20px;
174		- height: calc(100% - 105px);
	176	+ height: 100%;
175	177	grid-area: main;
176	178	}
177	179
	180	+.layout-wrap .main {
	181	+ display: flex;
	182	+ padding: 20px;
	183	+ flex-grow: 1;
	184	+ /* overflow: auto; */
	185	+ grid-area: main;
	186	+}
	187	+
	188	+
	189	+
178	190
179	191
180	192	@keyframes slideDown {

...	...	@@ -10,7 +10,8 @@
10	10	body,
11	11	#root {
12	12	width: 100%;
13		- height: 100vh;
	13	+ height: 100%;
	14	+ min-height: 100vh;
14	15	font-size: 10px;
15	16	color: #333;
16	17	font-family: 'Pretendard';
...	...	@@ -21,6 +22,7 @@
21	22	background-color: #f7f6fb;
22	23	}
23	24
	25	+
24	26	a {
25	27	color: #333;
26	28	text-decoration: none;

...	...	@@ -95,10 +95,6 @@
95	95	/PAGINATION NEW START/
96	96	.component-pagination {
97	97	padding: 15px 0;
98		- position: absolute;
99		- bottom: 0;
100		- left: 50%;
101		- transform: translateX(-50%);
102	98	}
103	99
104	100	.pagination-button-type {

...	...	@@ -5,8 +5,9 @@
5	5	import HostManagement from "../pages/file/HostManagement.vue";
6	6	import ScheduleManagement from "../pages/schedule/ScheduleManagement.vue";
7	7	import ScheduleLogManagement from "../pages/schedule/ScheduleLogManagement.vue";
	8	+import Login from "../pages/login/Login.vue";
8	9
9		-// 템플릿 화면
	10	+// 템플릿
10	11	import Searchbar from "../pages/template/Searchbar.vue";
11	12	import Table from "../pages/template/Table.vue";
12	13	import BtnPosition from "../pages/template/BtnPosition.vue";
...	...	@@ -20,6 +21,7 @@
20	21	{path: "/hostManagement.page",name: "HostManagement",component: HostManagement},
21	22	{path: "/scheduleManagement.page",name: "ScheduleManagement",component: ScheduleManagement,},
22	23	{path: "/scheduleLogManagement.page",name: "ScheduleLogManagement",component: ScheduleLogManagement,},
	24	+ {path: "/login.page",name: "Login",component: Login,},
23	25
24	26
25	27	// 템플릿 화면

...	...	@@ -5,8 +5,111 @@
5	5	<PageNavigation />
6	6	</div>
7	7	<div class="content-box flex-column">
8		- <div class="top-content"></div>
9		- <div class="bottom-content"></div>
	8	+ <div class="content">
	9	+ <div class="content-titleZone">
	10	+ <p class="box-title">목록</p>
	11	+ </div>
	12	+ <div class="searchbar-zone">
	13	+ <div class="flex-end">
	14	+ <span class="option-title">검증유형</span>
	15	+ <select name="" id="" class="square-select">
	16	+ <option value="all">전체</option>
	17	+ </select>
	18	+ <span class="option-title">품질지표명</span>
	19	+ <select name="" id="" class="square-select">
	20	+ <option value="all">전체</option>
	21	+ </select>
	22	+ <div class="search-square">
	23	+ <input type="text" class="square-input" placeholder="Search">
	24	+ <button class="square-button">
	25	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	26	+ </button>
	27	+ </div>
	28	+ </div>
	29	+ </div>
	30	+ <div class="flex-between">
	31	+ <div class="count-zone">
	32	+ <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
	33	+ </div>
	34	+ <div class="btn-zone flex">
	35	+ <button class="red-border-btn small-btn">선택 항목 삭제</button>
	36	+ </div>
	37	+ </div>
	38	+ <div class="table-zone">
	39	+ <table class="list-table">
	40	+ <colgroup>
	41	+ <col style="width: ;">
	42	+ <col style="width: ;">
	43	+ <col style="width: ;">
	44	+ <col style="width: ;">
	45	+ <col style="width: ;">
	46	+ </colgroup>
	47	+ <thead>
	48	+ <tr>
	49	+ <th><input type="checkbox" name="" id=""></th>
	50	+ <th>No</th>
	51	+ <th>user ID</th>
	52	+ <th>이름</th>
	53	+ <th>생년월일</th>
	54	+ <th>성별</th>
	55	+ </tr>
	56	+ </thead>
	57	+ <tbody>
	58	+ <tr>
	59	+ <td><input type="checkbox" name="" id=""></td>
	60	+ <td>1</td>
	61	+ <td>test123</td>
	62	+ <td>홍길동</td>
	63	+ <td>1999.01.01</td>
	64	+ <td>여</td>
	65	+ </tr>
	66	+
	67	+ </tbody>
	68	+ </table>
	69	+ </div>
	70	+ <PaginationButton />
	71	+ </div>
	72	+ <div class="content form-box">
	73	+ <div class="content-titleZone">
	74	+ <p class="box-title">등록</p>
	75	+ </div>
	76	+ <div class="table-zone">
	77	+ <table class="form-table">
	78	+ <colgroup>
	79	+ <col style="width: 10%;">
	80	+ <col style="width: 40%;">
	81	+ <col style="width: 10%;">
	82	+ <col style="width: 40%;">
	83	+ </colgroup>
	84	+ <tbody>
	85	+ <tr>
	86	+ <th>user ID</th>
	87	+ <td><input type="text" name="" id=""></td>
	88	+ <th>이름</th>
	89	+ <td><input type="text" name="" id=""></td>
	90	+ </tr>
	91	+ <tr>
	92	+ <th>생년월일</th>
	93	+ <td>
	94	+ <div class="flex">
	95	+ <select name="" id=""></select>
	96	+ <select name="" id=""></select>
	97	+ <select name="" id=""></select>
	98	+ </div>
	99	+ </td>
	100	+ <th>성별</th>
	101	+ <td>
	102	+ <select name="" id=""></select>
	103	+ </td>
	104	+ </tr>
	105	+ </tbody>
	106	+ </table>
	107	+ </div>
	108	+ <div class="flex-end">
	109	+ <button class="blue-border-btn small-btn">등록</button>
	110	+ <button class="darkg-border-btn small-btn">초기화</button>
	111	+ </div>
	112	+ </div>
10	113	</div>
11	114	</div>
12	115	</template>
...	...	@@ -14,10 +117,12 @@
14	117	<script>
15	118	import PageNavigation from '../../component/PageNavigation.vue';
16	119	import PaginationButton from '../../component/PaginationButton.vue';
17		-
	120	+import SvgIcon from '@jamescoyle/vue-icon';
	121	+import { mdiMagnify } from '@mdi/js';
18	122	export default {
19		- data () {
	123	+ data() {
20	124	return {
	125	+ searchPath: mdiMagnify
21	126	}
22	127	},
23	128	methods: {
...	...	@@ -31,10 +136,24 @@
31	136	},
32	137	components: {
33	138	'PageNavigation': PageNavigation,
34		- 'PaginationButton': PaginationButton
	139	+ 'PaginationButton': PaginationButton,
	140	+ 'SvgIcon': SvgIcon
35	141	},
36	142	mounted() {
37	143	console.log('main mounted');
38	144	}
39	145	}
40		-</script> (파일 끝에 줄바꿈 문자 없음)
	146	+</script>
	147	+
	148	+<style scoped>
	149	+.option-title {
	150	+ padding: 0 5px;
	151	+ font-size: 1.3rem;
	152	+ color: #213f99;
	153	+ margin-left: 5px;
	154	+}
	155	+
	156	+.count-zone {
	157	+ font-size: 1.3rem;
	158	+}
	159	+</style> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,11 +1,31 @@
1	1	<template>
2		- <div>Main.vue</div>
	2	+ <div class="login-page">
	3	+ <div class="login-wrap flex-center">
	4	+ <div class="login-content">
	5	+ <div class="logo">
	6	+ <img src="../../../resources/img/logo.png" alt="">
	7	+ </div>
	8	+ <div class="login-zone">
	9	+ <div class="input-wrap">
	10	+ <input type="text" placeholder="아이디를 입력하세요." class="login-input"/>
	11	+ <input type="password" placeholder="비밀번호를 입력하세요." class="login-input"/>
	12	+ </div>
	13	+ <div class="found-zone flex-center">
	14	+ <router-link to="">아이디찾기</router-link>
	15	+ <router-link to="">비밀번호 찾기</router-link>
	16	+ <router-link to="">회원가입</router-link>
	17	+ </div>
	18	+ </div>
	19	+ <button class="blue-btn large-btn">로그인</button>
	20	+ </div>
	21	+ </div>
	22	+ </div>
3	23	</template>
4	24
5	25	<script>
6	26
7	27	export default {
8		- data () {
	28	+ data() {
9	29	return {
10	30	}
11	31	},
...	...	@@ -24,4 +44,58 @@
24	44	console.log('main mounted');
25	45	}
26	46	}
27		-</script> (파일 끝에 줄바꿈 문자 없음)
	47	+</script>
	48	+
	49	+<style scoped>
	50	+.login-page{
	51	+ width: 100%;
	52	+ height: 100%;
	53	+}
	54	+
	55	+.login-wrap{
	56	+ width: 100%;
	57	+ height: 100%;
	58	+}
	59	+
	60	+.login-content{
	61	+ min-width: 300px;
	62	+ max-width: 400px;
	63	+ padding:30px;
	64	+ border: 1px solid #eee;
	65	+ border-radius: 10px;
	66	+ background-color: #fff;
	67	+}
	68	+.logo{
	69	+ width: 100%;
	70	+ margin-bottom: 30px;
	71	+}
	72	+.logo > img{
	73	+ display: block;
	74	+ margin: 0 auto;
	75	+}
	76	+
	77	+.login-input{
	78	+ margin-left: 0;
	79	+ margin-bottom: 10px;
	80	+ padding: 10px;
	81	+ border: 1px solid #f1f5ff;
	82	+}
	83	+
	84	+.login-input:last-child{
	85	+ margin-bottom: 0;
	86	+}
	87	+
	88	+.found-zone{
	89	+ padding: 20px 0;
	90	+}
	91	+
	92	+.found-zone > a{
	93	+ font-size: 1.3rem;
	94	+ padding: 0 10px;
	95	+}
	96	+
	97	+.login-page .blue-btn{
	98	+ margin-left: 0;
	99	+ padding: 10px 0;
	100	+}
	101	+</style> (파일 끝에 줄바꿈 문자 없음)

Delete comment