Commit @204100959eed3b5d53a1aec070517b09c6869dc5

류윤주 01-11

240111류윤주 템플릿 추가 및 수정

@204100959eed3b5d53a1aec070517b09c6869dc5

b1cdf23

2041009

client/resources/css/common.css

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

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

...	...	@@ -28,24 +28,96 @@
28	28	display: flex;
29	29	justify-content: flex-end;
30	30	align-items: center;
	31	+
31	32	}
	33	+
	34	+.flex-contentBox {
	35	+ display: flex;
	36	+ justify-content: space-between;
	37	+ align-items: flex-start;
	38	+}
	39	+
	40	+.flex-column {
	41	+ display: flex;
	42	+ flex-direction: column;
	43	+ gap: 30px;
	44	+}
	45	+
	46	+
	47	+
	48	+/* 정렬 배율 */
	49	+
	50	+.flex10 {
	51	+ flex: 0 0 9.2%
	52	+}
	53	+
	54	+
	55	+.flex20 {
	56	+ flex: 0 0 19.2%
	57	+}
	58	+
	59	+
	60	+.flex30 {
	61	+ flex: 0 0 29.2%
	62	+}
	63	+
	64	+
	65	+.flex40 {
	66	+ flex: 0 0 39.2%
	67	+}
	68	+
	69	+.flex50 {
	70	+ flex: 0 0 39.2%
	71	+}
	72	+
	73	+
	74	+.flex60 {
	75	+ flex: 0 0 59.2%
	76	+}
	77	+
	78	+
	79	+.flex70 {
	80	+ flex: 0 0 69.2%
	81	+}
	82	+
	83	+.flex80 {
	84	+ flex: 0 0 79.2%
	85	+}
	86	+
	87	+
	88	+.flex90 {
	89	+ flex: 0 0 89.2%
	90	+}
	91	+
32	92
33	93
34	94	/* btn */
35	95	.small-btn {
36		- padding: 3px 6px;
	96	+ padding: 5px 10px;
37	97	border-radius: 5px;
38	98	}
39	99
40	100	.large-btn {
41	101	height: 100%;
42		- padding: 5px 10px;
	102	+ padding: 5px 15px;
43	103	border-radius: 5px;
44	104	}
45	105
46	106	.logout-btn {
47	107	padding: 5px 10px;
48	108	color: #aaa;
	109	+ position: relative;
	110	+}
	111	+
	112	+.logout-btn::before{
	113	+ content: "";
	114	+ width: 1px;
	115	+ height: 10px;
	116	+ position: absolute;
	117	+ top: 50%;
	118	+ left: 0;
	119	+ transform: translateY(-50%);
	120	+ background-color: #aaa;
49	121	}
50	122
51	123	.blue-btn,
...	...	@@ -133,7 +205,11 @@
133	205	.container {
134	206	width: 100%;
135	207	height: 100%;
136		- padding: 50px;
	208	+}
	209	+
	210	+.content-box {
	211	+ width: 100%;
	212	+ height: calc(100% - 66px);
137	213	}
138	214
139	215	.left-content,
...	...	@@ -141,42 +217,39 @@
141	217	height: 100%;
142	218	}
143	219
144		-.vertical {
145		- display: flex;
146		- width: 100%;
147		-}
148	220
149	221	.top-content,
150	222	.bottom-content,
151	223	.left-content,
152	224	.right-content,
153	225	.content {
154		- padding: 30px;
155		- background-color: #f8f8f8;
	226	+ padding: 15px;
156	227	border-radius: 10px;
157		-}
158		-
159		-.right-content {
160		- margin-left: 30px;
161		-}
162		-
163		-.horizontal .top-content {
164		- margin-bottom: 30px;
	228	+ background-color: #fff;
	229	+ position: relative;
165	230	}
166	231
167	232	/* title 공통 */
	233	+.page-titleZone {
	234	+ margin-bottom: 20px;
	235	+}
	236	+
168	237	.main-title {
	238	+ font-family: 'GmarketSansB';
169	239	font-size: 2rem;
170		- font-weight: bold;
	240	+ color: #213f99;
	241	+}
	242	+
	243	+.content-titleZone {
	244	+ margin-bottom: 15px;
171	245	}
172	246
173	247	.box-title {
174	248	font-size: 1.6rem;
175	249	font-weight: bold;
176		- margin-bottom: 30px;
177	250	}
178	251
179		-/* 테이블 기본 css로 테이블 템블릿에서 html만 복사해서 넣으면 자동으로 css 적용됨 */
	252	+/* 테이블 공통 */
180	253	.list-table {
181	254	border-bottom: 1px solid #aaa;
182	255	}
...	...	@@ -211,6 +284,79 @@
211	284	border-top: 1px solid #aaa;
212	285	}
213	286
	287	+.option-table th{
	288	+ text-align: left;
	289	+}
	290	+
	291	+
	292	+/* 서치바 공통 */
	293	+/* .table-zone */
	294	+.searchbar-zone{
	295	+ margin-bottom: 10px;
	296	+}
	297	+/* 기본 서치바 */
	298	+.search-square {
	299	+ position: relative;
	300	+ margin-left: 5px;
	301	+}
	302	+
	303	+.square-date,
	304	+.square-select {
	305	+ width: 150px;
	306	+}
	307	+
	308	+.square-input {
	309	+ color: #646464;
	310	+ padding: 6px 10px;
	311	+ border-radius: 5px;
	312	+ width: 300px;
	313	+ transition: all ease-in-out .5s;
	314	+}
	315	+
	316	+.square-input:hover,
	317	+.square-input:focus {
	318	+ box-shadow: 0 0 1em #00000013;
	319	+}
	320	+
	321	+.square-input:focus {
	322	+ outline: none;
	323	+ background-color: #f0eeee;
	324	+}
	325	+
	326	+.square-input::-webkit-input-placeholder {
	327	+ font-weight: 100;
	328	+ color: #ccc;
	329	+}
	330	+
	331	+.square-input:focus {
	332	+ background-color: #f0eeee;
	333	+}
	334	+
	335	+.square-button {
	336	+ border: none;
	337	+ margin-left: 0;
	338	+ position: absolute;
	339	+ right: 5px;
	340	+ top: 50%;
	341	+ transform: translateY(-50%);
	342	+}
	343	+
	344	+.square-button:hover {
	345	+ cursor: pointer;
	346	+}
	347	+
	348	+.square-icon {
	349	+ color: #b4b4b4;
	350	+}
	351	+
	352	+/* 상세 서치바 */
	353	+.option-searchbar{
	354	+ width: 50%;
	355	+ margin: 0 auto;
	356	+ padding: 15px;
	357	+ background-color: #f8f9fe;
	358	+ border-radius: 10px;
	359	+}
214	360
215	361
216	362	/* 기타 공통 */

b1cdf23

2041009

client/resources/css/font.css

--- client/resources/css/font.css

+++ client/resources/css/font.css

...	...	@@ -3,4 +3,25 @@
3	3	src: url('../font/PretendardVariable.woff2') format('woff');
4	4	font-weight: 400;
5	5	font-style: normal;
	6	+}
	7	+
	8	+@font-face {
	9	+ font-family: "GmarketSansM";
	10	+ src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
	11	+ font-weight: normal;
	12	+ font-style: normal;
	13	+}
	14	+
	15	+@font-face {
	16	+ font-family: "GmarketSansL";
	17	+ src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
	18	+ font-weight: normal;
	19	+ font-style: normal;
	20	+}
	21	+
	22	+@font-face {
	23	+ font-family: "GmarketSansB";
	24	+ src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
	25	+ font-weight: bold;
	26	+ font-style: normal;
6	27	} (파일 끝에 줄바꿈 문자 없음)

b1cdf23

2041009

client/resources/css/layout.css

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

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


 
 .dashboard-wrap {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     display: grid;
     grid-template-columns: 270px minmax(auto, 1fr);
     grid-template-rows: auto 1fr;

         "nav  main  "
 }
 
+.layout-wrap{
+    width: 100%;
+    height: 100%;
+}
+
 header {
+    background-color: #fff;
     padding: 15px 30px;
     grid-area: header;
     position: relative;

 
 nav.side-menu>ul.main-menu>li>div>a,
 nav>ul>li {
-    padding: 10px;
+    padding: 10px 0;
     font-size: 1.4rem;
     font-weight: bold;
 }

     justify-content: center;
 }
 
+.depth1{
+    cursor: default;
+}
+
 .top-menu>ul>li {
-    min-width: 165px;
+    min-width: 161px;
     text-align: center;
     position: relative;
 }

     position: absolute;
     width: 100%;
     background-color: #fff;
-    z-index: 1000;
+    z-index: 10000;
     bottom: 0;
     left: 0;
     transform: translateY(100%);

     left: 0;
     transform: translateY(100%);
     width: 100%;
+    z-index: 9999;
 }
 
 .top-menu ul.sub-menu.hide,

 
 /* 메인 */
 .main {
-    padding: 30px;
+    padding: 20px;
+    height: calc(100% - 105px);
     grid-area: main;
 }
 

b1cdf23

2041009

client/resources/css/reset.css

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

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


 
 body {
     min-width: 1356px;
+    background-color: #f7f6fb;
 }
 
 a {

 
 table th,
 table td {
-    padding: 5px;
+    padding: 8px;
     font-size: 1.3rem;
 }
 

 input {
     min-width: 100px;
     width: 100%;
-    padding: px 10px;
+    padding: 5px 10px;
     border: 1px solid #eee;
     border-radius: 5px;
     margin-left: 5px;
 }
 
-input{
-    min-width: 300px; 
+input[type="text"] {
+    min-width: 300px;
 }
 
 input:focus {

     width: 8px;
     height: 8px;
 }
+
 ::-webkit-scrollbar-thumb {
     background-color: #ededed;
     border-radius: 10px;
 }
+
 ::-webkit-scrollbar-track {
     background-color: #fff;
     border-radius: 10px;

b1cdf23

2041009

client/resources/css/style.css

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

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

...	...	@@ -1,1 +1,3 @@
1		-@charset "utf-8"; (파일 끝에 줄바꿈 문자 없음)
	1	+@charset "utf-8";
	2	+
	3	+/* */ (파일 끝에 줄바꿈 문자 없음)

2041009

client/resources/font/GmarketSansBold.woff (Binary) (added)

+++ client/resources/font/GmarketSansBold.woff

Binary file is not shown

2041009

client/resources/font/GmarketSansLight.woff (Binary) (added)

+++ client/resources/font/GmarketSansLight.woff

Binary file is not shown

2041009

client/resources/font/GmarketSansMedium.woff (Binary) (added)

+++ client/resources/font/GmarketSansMedium.woff

Binary file is not shown

2041009

client/views/component/FileTree.vue (added)

+++ client/views/component/FileTree.vue

...	...	@@ -0,0 +1,100 @@
	1	+<template>
	2	+ <v-jstree :data="fileTree" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
	3	+</template>
	4	+
	5	+<script>
	6	+import VJstree from 'vue-jstree'
	7	+export default {
	8	+ data() {
	9	+ return {
	10	+ fileTree: [
	11	+ {
	12	+ "text": "Same but with checkboxes",
	13	+ "children": [
	14	+ {
	15	+ "text": "initially selected",
	16	+ "selected": true
	17	+ },
	18	+ {
	19	+ "text": "custom icon",
	20	+ "icon": "fa fa-warning icon-state-danger"
	21	+ },
	22	+ {
	23	+ "text": "initially open",
	24	+ "icon": "fa fa-folder icon-state-default",
	25	+ "opened": true,
	26	+ "children": [
	27	+ {
	28	+ "text": "Another node"
	29	+ }
	30	+ ]
	31	+ },
	32	+ {
	33	+ "text": "custom icon",
	34	+ "icon": "fa fa-warning icon-state-warning"
	35	+ },
	36	+ {
	37	+ "text": "disabled node",
	38	+ "icon": "fa fa-check icon-state-success",
	39	+ "disabled": true
	40	+ }
	41	+ ]
	42	+ },
	43	+ {
	44	+ "text": "Same but with checkboxes",
	45	+ "opened": true,
	46	+ "children": [
	47	+ {
	48	+ "text": "initially selected",
	49	+ "selected": true
	50	+ },
	51	+ {
	52	+ "text": "custom icon",
	53	+ "icon": "fa fa-warning icon-state-danger"
	54	+ },
	55	+ {
	56	+ "text": "initially open",
	57	+ "icon": "fa fa-folder icon-state-default",
	58	+ "opened": true,
	59	+ "children": [
	60	+ {
	61	+ "text": "Another node"
	62	+ }
	63	+ ]
	64	+ },
	65	+ {
	66	+ "text": "custom icon",
	67	+ "icon": "fa fa-warning icon-state-warning"
	68	+ },
	69	+ {
	70	+ "text": "disabled node",
	71	+ "icon": "fa fa-check icon-state-success",
	72	+ "disabled": true
	73	+ }
	74	+ ]
	75	+ },
	76	+ {
	77	+ "text": "And wholerow selection"
	78	+ }
	79	+ ]
	80	+ }
	81	+ },
	82	+ methods: {
	83	+ itemClick: function (node) {
	84	+ console.log(node.model.text + ' clicked !')
	85	+ }
	86	+ },
	87	+ watch: {
	88	+
	89	+ },
	90	+ computed: {
	91	+
	92	+ },
	93	+ components: {
	94	+ 'VJstree': VJstree
	95	+ },
	96	+ mounted() {
	97	+
	98	+ }
	99	+}
	100	+</script>(파일 끝에 줄바꿈 문자 없음)

b1cdf23

2041009

client/views/component/PageNavigation.vue

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

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


 
 <style scoped>
 .navigate_bar {
-    width: 100%;
-    padding: 10px 30px;
+    padding: 10px 0px;
     font-size: 1.3rem;
-    text-align: right;
 }
 </style>

2041009

client/views/component/PaginationButton.vue (added)

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

...	...	@@ -0,0 +1,174 @@
	1	+<template lang="html">
	2	+ <div class="component-pagination" id="pagination">
	3	+ <div class="pagination-button-type">
	4	+ <a class="first-page" @click="excute(1)" title="첫 번 째 페이지로 이동"></a>
	5	+ <a class="prev" @click="excute(currentPage - 1)" title="이전 페이지로 이동"></a>
	6	+ <a @click="excute(i)" v-for="i in createRange" :class="{ 'active': currentPage == i }">{{ i }}</a>
	7	+ <a class="next" @click="excute(currentPage + 1)" title="다음 페이지로 이동"></a>
	8	+ <a class="end-page" @click="excute(maxEndPage)" title="마지막 페이지로 이동"></a>
	9	+ </div>
	10	+ </div>
	11	+</template>
	12	+
	13	+<script>
	14	+export default {
	15	+ props: {
	16	+ currentPage: {
	17	+ type: Number,
	18	+ default: 0
	19	+ },
	20	+ perPage: {
	21	+ type: Number,
	22	+ default: 10
	23	+ },
	24	+ totalCount: {
	25	+ type: Number,
	26	+ default: 0
	27	+ },
	28	+ maxRange: {
	29	+ type: Number,
	30	+ default: 5
	31	+ },
	32	+ click: Function
	33	+ },
	34	+ emits: ['update:currentPage'],
	35	+ data: function () {
	36	+ return {
	37	+ //data
	38	+ }
	39	+ },
	40	+ methods: {
	41	+ excute: function (i) {
	42	+ if (i >= 1 && i <= this.maxEndPage) {
	43	+ if (i != this.currentPage) {
	44	+ this.$emit('update:currentPage', i);//부모 currentPage에 선택한 page번호 할당
	45	+ this.click(i);//부모 function 실행
	46	+ } else {
	47	+ return;
	48	+ }
	49	+ } else {
	50	+ alert('이동할 페이지가 없습니다.');
	51	+ }
	52	+ }
	53	+ },
	54	+ computed: {
	55	+ startPage: function () {
	56	+ return Math.floor((this.currentPage - 1) / this.maxRange) * this.maxRange + 1;
	57	+ },
	58	+ endPage: function () {
	59	+ if (this.maxEndPage < this.currentEndPage) {
	60	+ return this.maxEndPage;
	61	+ } else {
	62	+ return this.currentEndPage;
	63	+ }
	64	+ },
	65	+ currentEndPage: function () {
	66	+ return this.maxRange * Math.ceil((this.currentPage / this.maxRange));
	67	+ },
	68	+ maxEndPage: function () {
	69	+ return Math.ceil(this.totalCount / this.perPage);
	70	+ },
	71	+ createRange: function () {
	72	+ var range = [];
	73	+ for (var i = this.startPage; i <= this.endPage; i++) {
	74	+ range.push(i);
	75	+ }
	76	+ if (range.length == 0) {
	77	+ range.push(1);
	78	+ }
	79	+ return range;
	80	+ }
	81	+ },
	82	+ watch: {
	83	+
	84	+ },
	85	+ //beforeCreate: function () {},
	86	+ //created: function () {},
	87	+ //beforeUpdate: function () {},
	88	+ //updated: function () {},
	89	+ mounted: function () {
	90	+ }
	91	+}
	92	+</script>
	93	+
	94	+<style scoped>
	95	+/PAGINATION NEW START/
	96	+.component-pagination {
	97	+ padding: 15px 0;
	98	+ position: absolute;
	99	+ bottom: 0;
	100	+ left: 50%;
	101	+ transform: translateX(-50%);
	102	+}
	103	+
	104	+.pagination-button-type {
	105	+ display: flex;
	106	+ align-items: center;
	107	+ justify-content: center;
	108	+}
	109	+
	110	+.pagination-button-type a {
	111	+ display: inline-block;
	112	+ width: 30px;
	113	+ height: 30px;
	114	+ padding: 5px;
	115	+ text-align: center;
	116	+ line-height: 20px;
	117	+ cursor: pointer;
	118	+}
	119	+
	120	+/* 정우추가 */
	121	+.pagination-button-type a.prev:after {
	122	+ content: "\003C";
	123	+ font-family: 'KoPub_Dotum';
	124	+ font-weight: 900;
	125	+}
	126	+
	127	+.pagination-button-type a.next:after {
	128	+ content: "\003E";
	129	+ font-family: 'KoPub_Dotum';
	130	+ font-weight: 900;
	131	+}
	132	+
	133	+.pagination-button-type a.first-page:after {
	134	+ content: "\003C\003C";
	135	+ font-family: 'KoPub_Dotum';
	136	+ font-weight: 900;
	137	+}
	138	+
	139	+.pagination-button-type a.end-page:after {
	140	+ content: "\003E\003E";
	141	+ font-family: 'KoPub_Dotum';
	142	+ font-weight: 900;
	143	+}
	144	+
	145	+.pagination-button-type a.active {
	146	+ background-color: #213f99;
	147	+ color: #fff;
	148	+ cursor: default !important;
	149	+ border-radius: 50px;
	150	+}
	151	+
	152	+.pagination-button-type a:hover:not(.active) {
	153	+ background-color: #213f99;
	154	+ color: #fff;
	155	+ border-radius: 50px;
	156	+}
	157	+
	158	+.pagination-button-type a:first-child {
	159	+ border-top-left-radius: 0px;
	160	+ border-bottom-left-radius: 0px;
	161	+}
	162	+
	163	+.pagination-button-type a:last-child {
	164	+ border-top-right-radius: 0px;
	165	+ border-bottom-right-radius: 0px;
	166	+}
	167	+
	168	+/PAGINATION NEW END/
	169	+
	170	+@media screen and (max-width:479px) {
	171	+ .pagination-button-type a {
	172	+ margin: 3px;
	173	+ }
	174	+}</style>(파일 끝에 줄바꿈 문자 없음)

b1cdf23

2041009

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


                     </div>
                     <span class="user-name">000님</span>
                 </div>
-                <Button :className="'logout-btn'" :btnName="'로그아웃'" />
+                <button class="logout-btn">로그아웃</button>
             </div>
         </div>
     </header>
 </template>
 
 <script>
-import Button from '../component/Button.vue';
 import SvgIcon from '@jamescoyle/vue-icon'
 import { mdiEmail, mdiAccountCircle } from '@mdi/js'
 export default {

         }
     },
     components: {
-        'Button': Button,
         'SvgIcon': SvgIcon
     },
     mounted() {

b1cdf23

2041009

client/views/layout/TopMenu.vue

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

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


     <nav class="top-menu">
         <ul class="main-menu">
             <li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
-                <p :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
+                <p class="depth1" :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
                 <ul v-if="mainMenu.subMenu" class="sub-menu" v-show="showSubmenu"
                     :class="{ show: showSubmenu, hide: !showSubmenu }">
                     <li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx" :class="{ active: isSubMenuActive(subMenu) }">

                     ],
                 },
                 {
-                    path: "/searchbar.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

b1cdf23

2041009

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


 import SideMenu from '../layout/SideMenu.vue';
 import TopMenu from '../layout/TopMenu.vue';
 import PageNavigation from '../component/PageNavigation.vue';
-
 const App = {
    data: () => {
       return {
          // side혹은 top 둘중 한개 타입
-         layoutType: "top"
+         layoutType: "top",
       }
    },
    methods: {

b1cdf23

2041009

client/views/pages/AppRouter.js

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

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


 import Searchbar from "../pages/template/Searchbar.vue";
 import Table from "../pages/template/Table.vue";
 import BtnPosition from "../pages/template/BtnPosition.vue";
+import Horizontal from "../pages/layoutTemplate/Horizontal.vue";
+import Vertical from "../pages/layoutTemplate/Vertical.vue";
 
 const routes = [
   /* 메인화면 */

   {path: "/searchbar.page",name: "Searchbar",component: Searchbar,},
   {path: "/table.page",name: "Table",component: Table,},
   {path: "/btnPosition.page",name: "BtnPosition",component: BtnPosition,},
+  {path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
+  {path: "/vertical.page",name: "Vertical",component: Vertical,},
 ];
 
 const AppRouter = createRouter({

2041009

client/views/pages/layoutTemplate/Horizontal.vue (added)

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

...	...	@@ -0,0 +1,40 @@
	1	+<template>
	2	+ <div class="container">
	3	+ <div class="page-titleZone flex-between">
	4	+ <p class="main-title">페이지 제목을 적어주세요</p>
	5	+ <PageNavigation />
	6	+ </div>
	7	+ <div class="content-box flex-column">
	8	+ <div class="top-content"></div>
	9	+ <div class="bottom-content"></div>
	10	+ </div>
	11	+ </div>
	12	+</template>
	13	+
	14	+<script>
	15	+import PageNavigation from '../../component/PageNavigation.vue';
	16	+import PaginationButton from '../../component/PaginationButton.vue';
	17	+
	18	+export default {
	19	+ data () {
	20	+ return {
	21	+ }
	22	+ },
	23	+ methods: {
	24	+
	25	+ },
	26	+ watch: {
	27	+
	28	+ },
	29	+ computed: {
	30	+
	31	+ },
	32	+ components: {
	33	+ 'PageNavigation': PageNavigation,
	34	+ 'PaginationButton': PaginationButton
	35	+ },
	36	+ mounted() {
	37	+ console.log('main mounted');
	38	+ }
	39	+}
	40	+</script>(파일 끝에 줄바꿈 문자 없음)

2041009

client/views/pages/layoutTemplate/Vertical.vue (added)

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

...	...	@@ -0,0 +1,109 @@
	1	+<template>
	2	+ <div class="container">
	3	+ <div class="page-titleZone flex-between">
	4	+ <p class="main-title">페이지 제목을 적어주세요</p>
	5	+ <PageNavigation />
	6	+ </div>
	7	+ <div class="content-box flex-contentBox">
	8	+ <div class="left-content flex20">
	9	+ <div class="content-titleZone flex-between">
	10	+ <p class="box-title">폴더 리스트</p>
	11	+ <button class="darkg-border-btn small-btn">폴더추가</button>
	12	+ </div>
	13	+ <div class="content-zone">
	14	+
	15	+ </div>
	16	+ </div>
	17	+ <div class="right-content flex80">
	18	+ <div class="searchbar-zone">
	19	+ <div class="flex-end">
	20	+ <input type="date" name="" id="" class="square-date">
	21	+ <span class="coupler">~</span>
	22	+ <input type="date" name="" id="" class="square-date">
	23	+ <select name="" id="" class="square-select">
	24	+ <option value="all">전체</option>
	25	+ </select>
	26	+ <div class="search-square">
	27	+ <input type="text" class="square-input" placeholder="Search">
	28	+ <button class="square-button">
	29	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	30	+ </button>
	31	+ </div>
	32	+ </div>
	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>
	59	+
	60	+ </tbody>
	61	+ </table>
	62	+ </div>
	63	+ <PaginationButton />
	64	+ </div>
	65	+ </div>
	66	+ </div>
	67	+</template>
	68	+
	69	+<script>
	70	+import PageNavigation from '../../component/PageNavigation.vue';
	71	+import PaginationButton from '../../component/PaginationButton.vue';
	72	+import FileTree from '../../component/FileTree.vue';
	73	+import SvgIcon from '@jamescoyle/vue-icon';
	74	+import { mdiMagnify } from '@mdi/js';
	75	+export default {
	76	+ data() {
	77	+ return {
	78	+ searchPath: mdiMagnify
	79	+ }
	80	+ },
	81	+ methods: {
	82	+
	83	+ },
	84	+ watch: {
	85	+
	86	+ },
	87	+ computed: {
	88	+
	89	+ },
	90	+ components: {
	91	+ 'PageNavigation': PageNavigation,
	92	+ 'FileTree': FileTree,
	93	+ 'SvgIcon': SvgIcon,
	94	+ 'PaginationButton': PaginationButton
	95	+ },
	96	+ mounted() {
	97	+ console.log('main mounted');
	98	+ }
	99	+}
	100	+</script>
	101	+
	102	+<style lang="css" scoped>
	103	+.content-zone {
	104	+ border: 1px solid #eee;
	105	+ padding: 10px;
	106	+ height: calc(100% - 44px);
	107	+ overflow: auto;
	108	+}
	109	+</style>(파일 끝에 줄바꿈 문자 없음)

2041009

client/views/pages/template/DefaultSearchBar.vue (added)

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

...	...	@@ -0,0 +1,45 @@
	1	+<template>
	2	+ <div class="search-bar">
	3	+ <div class="flex-end">
	4	+ <input type="date" name="" id="" class="square-date">
	5	+ <span class="coupler">~</span>
	6	+ <input type="date" name="" id="" class="square-date">
	7	+ <select name="" id="" class="square-select">
	8	+ <option value="all">전체</option>
	9	+ </select>
	10	+ <div class="search-square">
	11	+ <input type="text" class="square-input" placeholder="Search">
	12	+ <button class="square-button">
	13	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	14	+ </button>
	15	+ </div>
	16	+ </div>
	17	+ </div>
	18	+</template>
	19	+
	20	+<script>
	21	+import SvgIcon from '@jamescoyle/vue-icon';
	22	+import { mdiMagnify } from '@mdi/js';
	23	+export default {
	24	+ data() {
	25	+ return {
	26	+ searchPath: mdiMagnify
	27	+ }
	28	+ },
	29	+ methods: {
	30	+
	31	+ },
	32	+ watch: {
	33	+
	34	+ },
	35	+ computed: {
	36	+
	37	+ },
	38	+ components: {
	39	+ 'SvgIcon': SvgIcon
	40	+ },
	41	+ mounted() {
	42	+ console.log('main mounted');
	43	+ }
	44	+}
	45	+</script>

2041009

client/views/pages/template/DetailSearchBar.vue (added)

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

...	...	@@ -0,0 +1,173 @@
	1	+<template>
	2	+ <div class="search-bar">
	3	+ <div class="option-searchbar">
	4	+ <div class="search-top">
	5	+ <div class="flex">
	6	+ <input type="date" name="" id="" class="square-date">
	7	+ <span class="coupler">~</span>
	8	+ <input type="date" name="" id="" class="square-date">
	9	+ <select name="" id="" class="square-select">
	10	+ <option value="all">전체</option>
	11	+ </select>
	12	+ <div class="search-square">
	13	+ <input type="text" class="square-input" placeholder="Search">
	14	+ <button class="square-button">
	15	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	16	+ </button>
	17	+ </div>
	18	+ </div>
	19	+ </div>
	20	+ <div class="search-bottom">
	21	+ <table class="option-table">
	22	+ <colgroup>
	23	+ <col style="width: 10%;" />
	24	+ </colgroup>
	25	+ <tbody>
	26	+ <tr>
	27	+ <th>단일조건</th>
	28	+ <td>
	29	+ <div class="input-container flex">
	30	+ <label class="radio-label">
	31	+ <input type="radio" name="radio" checked="" class="custom-radiobox ">
	32	+ <span>HTML</span>
	33	+ </label>
	34	+ <label class="radio-label">
	35	+ <input type="radio" name="radio" class="custom-radiobox ">
	36	+ <span>CSS</span>
	37	+ </label>
	38	+ <label class="radio-label">
	39	+ <input type="radio" name="radio" class="custom-radiobox ">
	40	+ <span>Javascript</span>
	41	+ </label>
	42	+ </div>
	43	+ </td>
	44	+ </tr>
	45	+ <tr>
	46	+ <th>다중조건</th>
	47	+ <td>
	48	+ <div class="input-container flex">
	49	+ <label class="check-label">
	50	+ <input type="checkbox" name="check" checked="" class="custom-checkbox ">
	51	+ <span>HTML</span>
	52	+ </label>
	53	+ <label class="check-label">
	54	+ <input type="checkbox" name="check" class="custom-checkbox ">
	55	+ <span>CSS</span>
	56	+ </label>
	57	+ <label class="check-label">
	58	+ <input type="checkbox" name="check" class="custom-checkbox ">
	59	+ <span>Javascript</span>
	60	+ </label>
	61	+ </div>
	62	+ </td>
	63	+ </tr>
	64	+ </tbody>
	65	+ </table>
	66	+ </div>
	67	+ </div>
	68	+ </div>
	69	+</template>
	70	+
	71	+<script>
	72	+import SvgIcon from '@jamescoyle/vue-icon';
	73	+import { mdiMagnify } from '@mdi/js';
	74	+export default {
	75	+ data() {
	76	+ return {
	77	+ searchPath: mdiMagnify
	78	+ }
	79	+ },
	80	+ methods: {
	81	+
	82	+ },
	83	+ watch: {
	84	+
	85	+ },
	86	+ computed: {
	87	+
	88	+ },
	89	+ components: {
	90	+ 'SvgIcon': SvgIcon
	91	+ },
	92	+ mounted() {
	93	+ console.log('main mounted');
	94	+ }
	95	+}
	96	+</script>
	97	+
	98	+<style>
	99	+.search-top {
	100	+ padding: 15px 0;
	101	+ border-bottom: 1px solid #aaa;
	102	+}
	103	+
	104	+/* radio css */
	105	+.input-container label {
	106	+ display: flex;
	107	+ cursor: pointer;
	108	+ font-weight: 500;
	109	+ position: relative;
	110	+ overflow: hidden;
	111	+ margin-bottom: 3px;
	112	+}
	113	+
	114	+.input-container label input.custom-radiobox,
	115	+.input-container label input.custom-checkbox {
	116	+ position: absolute;
	117	+ left: -9999px;
	118	+}
	119	+
	120	+.input-container label input.custom-radiobox:checked+span {
	121	+ background-color: #5b72b8;
	122	+ color: #fff;
	123	+}
	124	+
	125	+.input-container label input.custom-checkbox:checked+span {
	126	+ background-color: #f8bb59;
	127	+ color: #fff;
	128	+}
	129	+
	130	+.input-container label input.custom-radiobox:checked+span:before {
	131	+ box-shadow: inset 0 0 0 4px #213f99;
	132	+}
	133	+
	134	+.input-container label input.custom-checkbox:checked+span:before {
	135	+ box-shadow: inset 0 0 0 4px #ff9d00;
	136	+}
	137	+
	138	+.input-container label span {
	139	+ display: flex;
	140	+ align-items: center;
	141	+ padding: 3px 7px;
	142	+ border-radius: 10px;
	143	+ transition: 0.25s ease;
	144	+ color: #333;
	145	+}
	146	+
	147	+
	148	+.input-container label.radio-label span:hover {
	149	+ background-color: #d6d6e5;
	150	+}
	151	+
	152	+.input-container label.check-label span:hover {
	153	+ background-color: #f4e3c2;
	154	+}
	155	+
	156	+.input-container label.radio-label span:before,
	157	+.input-container label.check-label span:before {
	158	+ display: flex;
	159	+ flex-shrink: 0;
	160	+ content: "";
	161	+ background-color: #fff;
	162	+ width: 15px;
	163	+ height: 15px;
	164	+ border-radius: 50%;
	165	+ margin-right: 3px;
	166	+ transition: 0.25s ease;
	167	+ box-shadow: inset 0 0 0 1px #333;
	168	+}
	169	+
	170	+.input-container label.check-label span:before {
	171	+ border-radius: 0%;
	172	+}
	173	+</style>(파일 끝에 줄바꿈 문자 없음)

b1cdf23

2041009

client/views/pages/template/FormModal.vue (Renamed from client/views/component/Button.vue)

--- client/views/component/Button.vue

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


 <template>
-    <button :class="className">{{ btnName }}</button>
+    <div>Main.vue</div>
 </template>
 
 <script>
 
 export default {
-    props: {
-        className: String,
-        btnName: String
-    },
-    data() {
+    data () {
         return {
         }
     },

         console.log('main mounted');
     }
 }
-</script>
+</script>

2041009

client/views/pages/template/FormTable.vue (added)

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

...	...	@@ -0,0 +1,57 @@
	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">
	20	+ <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>
	32	+</template>
	33	+
	34	+<script>
	35	+
	36	+export default {
	37	+ data() {
	38	+ return {
	39	+ }
	40	+ },
	41	+ methods: {
	42	+
	43	+ },
	44	+ watch: {
	45	+
	46	+ },
	47	+ computed: {
	48	+
	49	+ },
	50	+ components: {
	51	+ },
	52	+ mounted() {
	53	+ console.log('main mounted');
	54	+ }
	55	+}
	56	+</script>
	57	+

2041009

client/views/pages/template/ListTable.vue (added)

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

...	...	@@ -0,0 +1,61 @@
	1	+<template>
	2	+ <div class="table-zone">
	3	+ <table class="list-table">
	4	+ <colgroup>
	5	+ <col style="width: ;">
	6	+ <col style="width: ;">
	7	+ <col style="width: ;">
	8	+ <col style="width: ;">
	9	+ </colgroup>
	10	+ <thead>
	11	+ <tr>
	12	+ <th>No</th>
	13	+ <th>user ID</th>
	14	+ <th>이름</th>
	15	+ <th>생년월일</th>
	16	+ <th>성별</th>
	17	+ </tr>
	18	+ </thead>
	19	+ <tbody>
	20	+ <tr>
	21	+ <td>1</td>
	22	+ <td>test123</td>
	23	+ <td>홍길동</td>
	24	+ <td>1999.01.01</td>
	25	+ <td>여</td>
	26	+ </tr>
	27	+ <tr>
	28	+ <td>1</td>
	29	+ <td>test123</td>
	30	+ <td>홍길동</td>
	31	+ <td>1999.01.01</td>
	32	+ <td>여</td>
	33	+ </tr>
	34	+ </tbody>
	35	+ </table>
	36	+ </div>
	37	+</template>
	38	+
	39	+<script>
	40	+
	41	+export default {
	42	+ data() {
	43	+ return {
	44	+ }
	45	+ },
	46	+ methods: {
	47	+
	48	+ },
	49	+ watch: {
	50	+
	51	+ },
	52	+ computed: {
	53	+
	54	+ },
	55	+ components: {
	56	+ },
	57	+ mounted() {
	58	+ console.log('main mounted');
	59	+ }
	60	+}
	61	+</script>

b1cdf23

client/views/pages/template/Searchbar copy.vue (deleted)

--- client/views/pages/template/Searchbar copy.vue

...	...	@@ -1,338 +0,0 @@
	1	-<template>
	2	- <div class="box">
	3	- <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
	4	- <div>
	5	- <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p>
	6	- <div>
	7	- <!-- 여기서 부터 복사 -->
	8	- <div class="flex-start">
	9	- <div class="search-bar flex">
	10	- <select name="" id="">
	11	- <option value="all">전체</option>
	12	- </select>
	13	- <input type="text" name="" id="">
	14	- </div>
	15	- <button class="blue-btn small-btn">검색</button>
	16	- </div>
	17	- <!-- 여기서 부터 복사 -->
	18	- <div class="flex-center">
	19	- <div class="search-bar flex">
	20	- <select name="" id="">
	21	- <option value="all">전체</option>
	22	- </select>
	23	- <input type="text" name="" id="">
	24	- </div>
	25	- <button class="blue-btn small-btn">검색</button>
	26	- </div>
	27	- <!-- 여기서 부터 복사 -->
	28	- <div class="flex-end">
	29	- <div class="search-bar flex">
	30	- <select name="" id="">
	31	- <option value="all">전체</option>
	32	- </select>
	33	- <input type="text" name="" id="">
	34	- </div>
	35	- <button class="blue-btn small-btn">검색</button>
	36	- </div>
	37	- </div>
	38	- </div>
	39	- <div>
	40	- <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">2번 디자인</p>
	41	- <div>
	42	- <!-- 여기서 부터 복사 -->
	43	- <div class="flex-start">
	44	- <div class="block-searchbar flex">
	45	- <select name="" id="">
	46	- <option value="all">전체</option>
	47	- </select>
	48	- <input type="text" name="" id="">
	49	- </div>
	50	- <button class="blue-btn small-btn">검색</button>
	51	- </div>
	52	- <!-- 여기서 부터 복사 -->
	53	- <div class="flex-center">
	54	- <div class="block-searchbar flex">
	55	- <select name="" id="">
	56	- <option value="all">전체</option>
	57	- </select>
	58	- <input type="text" name="" id="">
	59	- </div>
	60	- <button class="blue-btn small-btn">검색</button>
	61	- </div>
	62	- <!-- 여기서 부터 복사 -->
	63	- <div class="flex-end">
	64	- <div class="block-searchbar flex">
	65	- <select name="" id="">
	66	- <option value="all">전체</option>
	67	- </select>
	68	- <input type="text" name="" id="">
	69	- </div>
	70	- <button class="blue-btn small-btn">검색</button>
	71	- </div>
	72	- </div>
	73	- </div>
	74	- </div>
	75	- <div class="box">
	76	- <p style="font-size:2rem; font-weight:800; margin-bottom:10px">날짜 추가 Search Bar</p>
	77	- <div>
	78	- <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p>
	79	- <div>
	80	- <!-- 여기서 부터 복사 -->
	81	- <div class="flex-start">
	82	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	83	- <span class="coupler">~</span>
	84	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	85	- <div class="search-bar flex">
	86	- <select name="" id="">
	87	- <option value="all">전체</option>
	88	- </select>
	89	- <input type="text" name="" id="">
	90	- </div>
	91	- <button class="blue-btn small-btn">검색</button>
	92	- </div>
	93	- <!-- 여기서 부터 복사 -->
	94	- <div class="flex-center">
	95	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	96	- <span class="coupler">~</span>
	97	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	98	- <div class="search-bar flex">
	99	- <select name="" id="">
	100	- <option value="all">전체</option>
	101	- </select>
	102	- <input type="text" name="" id="">
	103	- </div>
	104	- <button class="blue-btn small-btn">검색</button>
	105	- </div>
	106	- <!-- 여기서 부터 복사 -->
	107	- <div class="flex-end">
	108	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	109	- <span class="coupler">~</span>
	110	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	111	- <div class="search-bar flex">
	112	- <select name="" id="">
	113	- <option value="all">전체</option>
	114	- </select>
	115	- <input type="text" name="" id="">
	116	- </div>
	117	- <button class="blue-btn small-btn">검색</button>
	118	- </div>
	119	- </div>
	120	- </div>
	121	- <div>
	122	- <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">2번 디자인</p>
	123	- <div>
	124	- <!-- 여기서 부터 복사 -->
	125	- <div class="flex-start">
	126	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04">
	127	- <div class="block-searchbar flex">
	128	- <select name="" id="">
	129	- <option value="all">전체</option>
	130	- </select>
	131	- <input type="text" name="" id="">
	132	- </div>
	133	- <button class="blue-btn small-btn">검색</button>
	134	- </div>
	135	- <!-- 여기서 부터 복사 -->
	136	- <div class="flex-center">
	137	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04">
	138	- <div class="block-searchbar flex">
	139	- <select name="" id="">
	140	- <option value="all">전체</option>
	141	- </select>
	142	- <input type="text" name="" id="">
	143	- </div>
	144	- <button class="blue-btn small-btn">검색</button>
	145	- </div>
	146	- <!-- 여기서 부터 복사 -->
	147	- <div class="flex-end">
	148	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04">
	149	- <div class="block-searchbar flex">
	150	- <select name="" id="">
	151	- <option value="all">전체</option>
	152	- </select>
	153	- <input type="text" name="" id="">
	154	- </div>
	155	- <button class="blue-btn small-btn">검색</button>
	156	- </div>
	157	- </div>
	158	- </div>
	159	- </div>
	160	- <div class="box">
	161	- <p style="font-size:2rem; font-weight:800; margin-bottom:10px">체크 조건 추가 Search Bar</p>
	162	- <div>
	163	- <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p>
	164	- <div>
	165	- <!-- 여기서 부터 복사 -->
	166	- <div class="flex-center content">
	167	- <div>
	168	- <div class="search-top flex">
	169	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	170	- <div class="search-bar flex">
	171	- <select name="" id="">
	172	- <option value="all">전체</option>
	173	- </select>
	174	- <input type="text" name="" id="">
	175	- </div>
	176	- </div>
	177	- <div class="flex">
	178	- <ul class="input-group flex">
	179	- <li><label for="">
	180	- <input type="checkbox">
	181	- <span>남</span>
	182	- </label>
	183	- </li>
	184	- <li><label for="">
	185	- <input type="checkbox">
	186	- <span>여</span>
	187	- </label>
	188	- </li>
	189	- </ul>
	190	- </div>
	191	- </div>
	192	- <button class="blue-btn small-btn">검색</button>
	193	- </div>
	194	- <!-- 여기서 부터 복사 -->
	195	- <div class="flex-center content">
	196	- <div>
	197	- <div class="search-top flex">
	198	- <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
	199	- <div class="search-bar flex">
	200	- <select name="" id="">
	201	- <option value="all">전체</option>
	202	- </select>
	203	- <input type="text" name="" id="">
	204	- </div>
	205	- </div>
	206	- <div class="flex">
	207	- <ul class="input-group flex">
	208	- <li>성별 : </li>
	209	- <li class="input-container">
	210	- <label for="male">
	211	- <input type="radio" id="male" name="gender" class="custom-radiobox">
	212	- <span>남</span>
	213	- </label>
	214	- </li>
	215	- <li class="input-container">
	216	- <label for="female">
	217	- <input type="radio" id="female" name="gender" class="custom-radiobox">
	218	- <span>여</span>
	219	- </label>
	220	- </li>
	221	- </ul>
	222	- </div>
	223	- </div>
	224	- <button class="blue-btn small-btn">검색</button>
	225	- </div>
	226	- </div>
	227	- </div>
	228	- </div>
	229	-</template>
	230	-
	231	-<script>
	232	-
	233	-export default {
	234	- data() {
	235	- return {
	236	- }
	237	- },
	238	- methods: {
	239	-
	240	- },
	241	- watch: {
	242	-
	243	- },
	244	- computed: {
	245	-
	246	- },
	247	- components: {
	248	- },
	249	- mounted() {
	250	- console.log('main mounted');
	251	- }
	252	-}
	253	-</script>
	254	-
	255	-<style scoped>
	256	-/* */
	257	-.box {
	258	- padding: 50px;
	259	- border: 1px solid #eee;
	260	- margin-bottom: 30px;
	261	-}
	262	-
	263	-
	264	-
	265	-
	266	-/* 1-1디자인 */
	267	-.search-bar {
	268	- border: 1px solid #eee;
	269	- border-radius: 5px;
	270	- background-color: #fff;
	271	- margin-left: 5px;
	272	-}
	273	-
	274	-.search-bar select,
	275	-.search-bar input[type="text"] {
	276	- border: none;
	277	-}
	278	-
	279	-
	280	-/* 3-1디자인 */
	281	-
	282	-.search-top {
	283	- margin-bottom: 10px;
	284	-}
	285	-
	286	-
	287	-
	288	-
	289	-/* radio css */
	290	-.input-container label {
	291	- display: flex;
	292	- cursor: pointer;
	293	- font-weight: 500;
	294	- position: relative;
	295	- overflow: hidden;
	296	- margin-bottom: 3px;
	297	-}
	298	-
	299	-.input-container label input.custom-radiobox {
	300	- position: absolute;
	301	- left: -9999px;
	302	-}
	303	-
	304	-.input-container label input.custom-radiobox:checked+span {
	305	- background-color: #5b72b8;
	306	- color: #fff;
	307	-}
	308	-
	309	-.input-container label input.custom-radiobox:checked+span:before {
	310	- box-shadow: inset 0 0 0 4px #213f99;
	311	-}
	312	-
	313	-.input-container label span {
	314	- display: flex;
	315	- align-items: center;
	316	- padding: 3px 7px 3px 3px;
	317	- border-radius: 10px;
	318	- transition: 0.25s ease;
	319	- color: #414181;
	320	-}
	321	-
	322	-.input-container label span:hover {
	323	- background-color: #d6d6e5;
	324	-}
	325	-
	326	-.input-container label span:before {
	327	- display: flex;
	328	- flex-shrink: 0;
	329	- content: "";
	330	- background-color: #fff;
	331	- width: 15px;
	332	- height: 15px;
	333	- border-radius: 50%;
	334	- margin-right: 3px;
	335	- transition: 0.25s ease;
	336	- box-shadow: inset 0 0 0 1px #213f99;
	337	-}
	338	-</style>(파일 끝에 줄바꿈 문자 없음)

b1cdf23

2041009

client/views/pages/template/Searchbar.vue

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

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


     <div class="box">
         <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
         <div style="padding:30px 0">
-            <div class="flex-between">
-                <!-- 여기서부터 -->
-                <div class="flex">
-                    <select name="" id="" class="circle-select">
-                        <option value="all">전체</option>
-                    </select>
-                    <div class="search">
-                        <input type="text" class="search-input" placeholder="Search">
-                        <button class="search-button">
-                            <svg-icon type="mdi" :path="searchPath" class="search-icon"></svg-icon>
-                        </button>
-                    </div>
-                </div>
-                <!-- 여기서까지 복사 -->
-                <!-- 여기서부터 -->
-                <div class="flex">
-                    <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>
+            <DefaultSearchBar />
         </div>
-        <div style="padding:30px 0">
-            <div class="flex-between">
-                <!-- 여기서부터 -->
-                <div class="flex">
-                    <select name="" id="" class="circle-select2">
-                        <option value="all">전체</option>
-                    </select>
-                    <div class="search2">
-                        <input placeholder="Search" type="text" class="search-zone">
-                        <button type="submit" class="search-btn">검색</button>
-                    </div>
-                </div>
-                <!-- 여기서까지 복사 -->
-                <!-- 여기서부터 -->
-                <div class="flex">
-                    <select name="" id="" class="square-select2">
-                        <option value="all">전체</option>
-                    </select>
-                    <div class="search2-square">
-                        <input placeholder="Search" type="text" class="square-zone">
-                        <button type="submit" class="square-btn">검색</button>
-                    </div>
-                </div>
-                <!-- 여기서까지 복사 -->
-            </div>
+    </div>
+    <div class="box">
+        <p style="font-size:2rem; font-weight:800; margin-bottom:10px">상세 Search Bar</p>
+        <div>
+            <DetailSearchBar />
         </div>
     </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify } from '@mdi/js';
+import DefaultSearchBar from './DefaultSearchBar.vue';
+import DetailSearchBar from './DetailSearchBar.vue';
 export default {
     data() {
         return {
-            searchPath: mdiMagnify
+
         }
     },
     methods: {

 
     },
     components: {
-        'SvgIcon': SvgIcon
+        'DefaultSearchBar':DefaultSearchBar,
+        'DetailSearchBar':DetailSearchBar
     },
     mounted() {
-        console.log('main mounted');
-    }
+ }
 }
 </script>
 

     padding: 50px;
     border: 1px solid #eee;
     margin-bottom: 30px;
+    background-color: #fff;
 }
 
-/* 1번 디자인 */
-.search {
-    position: relative;
-    margin-left: 5px;
-}
-
-.circle-select {
-    border-radius: 30px;
-}
-
-.search-input {
-    color: #646464;
-    padding: 5px 10px;
-    border-radius: 30px;
-    width: 300px;
-    transition: all ease-in-out .5s;
-}
-
-.search-input:hover,
-.search-input:focus {
-    box-shadow: 0 0 1em #00000013;
-}
-
-.search-input:focus {
-    outline: none;
-    background-color: #f0eeee;
-}
-
-.search-input::-webkit-input-placeholder {
-    font-weight: 100;
-    color: #ccc;
-}
-
-.search-input:focus {
-    background-color: #f0eeee;
-}
-
-.search-button {
-    border: none;
-    margin-left: 0;
-    position: absolute;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.search-button:hover {
-    cursor: pointer;
-}
-
-.search-icon {
-    color: #b4b4b4;
-}
-
-/* 1-2 */
-.search-square {
-    position: relative;
-}
-
-.square-input {
-    color: #646464;
-    padding: 5px 10px;
-    border-radius: 5px;
-    width: 300px;
-    transition: all ease-in-out .5s;
-    margin-left: 5px;
-}
-
-.square-input:hover,
-.square-input:focus {
-    box-shadow: 0 0 1em #00000013;
-}
-
-.square-input:focus {
-    outline: none;
-    background-color: #f0eeee;
-}
-
-.square-input::-webkit-input-placeholder {
-    font-weight: 100;
-    color: #ccc;
-}
-
-.square-input:focus {
-    background-color: #f0eeee;
-}
-
-.square-button {
-    border: none;
-    margin-left: 0;
-    position: absolute;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.square-button:hover {
-    cursor: pointer;
-}
-
-.square-icon {
-    color: #b4b4b4;
-}
-
-
-/* 2번 디자인 */
-.search2 {
-    display: inline-block;
-    position: relative;
-}
-
-.circle-select2 {
-    border: none;
-    border-radius: 30px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.search2 .search-zone {
-    width: 200px;
-    padding: 5px 10px;
-    border: none;
-    border-radius: 20px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    margin-left: 5px;
-}
-
-.search2 .search-btn {
-    background-color: #4e99e9;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    padding: 5px 10px;
-    border-radius: 20px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    top: 0;
-    right: 0;
-    transition: .9s ease;
-}
-
-.search2 .search-btn:hover {
-    transform: scale(1.05);
-    color: rgb(255, 255, 255);
-    background-color: #213f99;
-}
-
-/* 2-1 */
-.search2-square {
-    display: inline-block;
-    position: relative;
-}
-
-.square-select2{
-    border: none;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.search2-square .square-zone {
-    width: 200px;
-    padding: 5px 10px;
-    border: none;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    margin-left: 5px;
-}
-
-.search2-square .square-btn {
-    background-color: #4e99e9;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    padding: 5px 10px;
-    border-radius: 3px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    top: 0;
-    right: 0;
-    transition: .9s ease;
-}
-
-.search2-square .square-btn:hover {
-    transform: scale(1.05);
-    color: rgb(255, 255, 255);
-    background-color: #213f99;
-}
-
-
-/* select + search */
 </style>

b1cdf23

2041009

client/views/pages/template/Table.vue

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

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

...	...	@@ -1,79 +1,17 @@
1	1	<template>
2	2	<div class="box">
3	3	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 List Table</p>
4		- <!-- 여기서부터 복사 -->
5		- <table class="list-table">
6		- <colgroup>
7		- <col style="width: ;">
8		- <col style="width: ;">
9		- <col style="width: ;">
10		- <col style="width: ;">
11		- </colgroup>
12		- <thead>
13		- <tr>
14		- <th>No</th>
15		- <th>user ID</th>
16		- <th>이름</th>
17		- <th>생년월일</th>
18		- <th>성별</th>
19		- </tr>
20		- </thead>
21		- <tbody>
22		- <tr>
23		- <td>1</td>
24		- <td>test123</td>
25		- <td>홍길동</td>
26		- <td>1999.01.01</td>
27		- <td>여</td>
28		- </tr>
29		- <tr>
30		- <td>1</td>
31		- <td>test123</td>
32		- <td>홍길동</td>
33		- <td>1999.01.01</td>
34		- <td>여</td>
35		- </tr>
36		- </tbody>
37		- </table>
	4	+ <ListTable />
38	5	</div>
39	6	<div class="box">
40	7	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
41		- <!-- 여기서부터 복사 -->
42		- <table class="form-table">
43		- <colgroup>
44		- <col style="width: ;">
45		- <col style="width: ;">
46		- <col style="width: ;">
47		- <col style="width: ;">
48		- </colgroup>
49		- <tbody>
50		- <tr>
51		- <th>user ID</th>
52		- <td><input type="text" name="" id=""></td>
53		- <th>이름</th>
54		- <td><input type="text" name="" id=""></td>
55		- </tr>
56		- <tr>
57		- <th>생년월일</th>
58		- <td>
59		- <div class="flex">
60		- <select name="" id=""></select>
61		- <select name="" id=""></select>
62		- <select name="" id=""></select>
63		- </div>
64		- </td>
65		- <th>성별</th>
66		- <td>
67		- <select name="" id=""></select>
68		- </td>
69		- </tr>
70		- </tbody>
71		- </table>
	8	+ <FormTable />
72	9	</div>
73	10	</template>
74	11
75	12	<script>
76		-
	13	+import ListTable from './ListTable.vue';
	14	+import FormTable from './FormTable.vue';
77	15	export default {
78	16	data() {
79	17	return {
...	...	@@ -89,9 +27,11 @@
89	27
90	28	},
91	29	components: {
	30	+ 'ListTable': ListTable,
	31	+ 'FormTable': FormTable
92	32	},
93	33	mounted() {
94		- console.log('main mounted');
	34	+
95	35	}
96	36	}
97	37	</script>
...	...	@@ -102,5 +42,4 @@
102	42	border: 1px solid #eee;
103	43	margin-bottom: 30px;
104	44	}
105		-
106	45	</style> (파일 끝에 줄바꿈 문자 없음)

b1cdf23

2041009

node_modules/.package-lock.json

--- node_modules/.package-lock.json

+++ node_modules/.package-lock.json


 {
-  "name": "Taken_BI_Manager",
+  "name": "UI_Layout",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

         "@vue/shared": "3.2.40"
       }
     },
+    "node_modules/vue-jstree": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-jstree/-/vue-jstree-2.1.6.tgz",
+      "integrity": "sha512-vtUmhLbfE2JvcnYNRXauJPkNJSRO/f9BTsbxV+ESXP/mMQPVUIYI4EkSHKSEOxVDHTU7SfLp/AxplmaAl6ctcg=="
+    },
     "node_modules/vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",

b1cdf23

2041009

package-lock.json

--- package-lock.json

+++ package-lock.json

...	...	@@ -1,5 +1,5 @@
1	1	{
2		- "name": "Taken_BI_Manager",
	2	+ "name": "UI_Layout",
3	3	"lockfileVersion": 2,
4	4	"requires": true,
5	5	"packages": {
...	...	@@ -23,6 +23,7 @@
23	23	"pg": "8.8.0",
24	24	"url-loader": "4.1.1",
25	25	"vue": "3.2.40",
	26	+ "vue-jstree": "^2.1.6",
26	27	"vue-loader": "^17.0.0",
27	28	"vue-router": "4.1.5",
28	29	"vue-style-loader": "4.1.3",
...	...	@@ -4972,6 +4973,11 @@
4972	4973	"@vue/shared": "3.2.40"
4973	4974	}
4974	4975	},
	4976	+ "node_modules/vue-jstree": {
	4977	+ "version": "2.1.6",
	4978	+ "resolved": "https://registry.npmjs.org/vue-jstree/-/vue-jstree-2.1.6.tgz",
	4979	+ "integrity": "sha512-vtUmhLbfE2JvcnYNRXauJPkNJSRO/f9BTsbxV+ESXP/mMQPVUIYI4EkSHKSEOxVDHTU7SfLp/AxplmaAl6ctcg=="
	4980	+ },
4975	4981	"node_modules/vue-loader": {
4976	4982	"version": "17.0.0",
4977	4983	"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",
...	...	@@ -9126,6 +9132,11 @@
9126	9132	"@vue/shared": "3.2.40"
9127	9133	}
9128	9134	},
	9135	+ "vue-jstree": {
	9136	+ "version": "2.1.6",
	9137	+ "resolved": "https://registry.npmjs.org/vue-jstree/-/vue-jstree-2.1.6.tgz",
	9138	+ "integrity": "sha512-vtUmhLbfE2JvcnYNRXauJPkNJSRO/f9BTsbxV+ESXP/mMQPVUIYI4EkSHKSEOxVDHTU7SfLp/AxplmaAl6ctcg=="
	9139	+ },
9129	9140	"vue-loader": {
9130	9141	"version": "17.0.0",
9131	9142	"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",

b1cdf23

2041009

package.json

--- package.json

+++ package.json

...	...	@@ -1,5 +1,6 @@
1	1	{
2	2	"dependencies": {
	3	+ "@amcharts/amcharts5": "^5.5.7",
3	4	"@babel/cli": "7.19.3",
4	5	"@babel/core": "7.19.3",
5	6	"@jamescoyle/vue-icon": "^0.1.2",
...	...	@@ -10,21 +11,21 @@
10	11	"express": "4.18.1",
11	12	"express-http-proxy": "^2.0.0",
12	13	"file-loader": "6.2.0",
	14	+ "file-saver": "^2.0.5",
13	15	"fs": "0.0.1-security",
	16	+ "lodash": "^4.17.21",
14	17	"new-line": "^1.1.1",
15	18	"pg": "8.8.0",
16	19	"url-loader": "4.1.1",
17	20	"vue": "3.2.40",
	21	+ "vue-jstree": "^2.1.6",
18	22	"vue-loader": "^17.0.0",
19	23	"vue-router": "4.1.5",
20	24	"vue-style-loader": "4.1.3",
21	25	"vue3-sfc-loader": "^0.8.4",
	26	+ "vuex": "^4.1.0",
22	27	"webpack": "5.74.0",
23		- "webpack-cli": "4.10.0",
24		- "@amcharts/amcharts5": "^5.5.7",
25		- "file-saver": "^2.0.5",
26		- "lodash": "^4.17.21",
27		- "vuex": "^4.1.0"
	28	+ "webpack-cli": "4.10.0"
28	29	},
29	30	"scripts": {
30	31	"prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,7 +2,7 @@
2	2
3	3	.dashboard-wrap {
4	4	width: 100%;
5		- height: 100vh;
	5	+ height: 100%;
6	6	display: grid;
7	7	grid-template-columns: 270px minmax(auto, 1fr);
8	8	grid-template-rows: auto 1fr;
...	...	@@ -12,7 +12,13 @@
12	12	"nav main "
13	13	}
14	14
	15	+.layout-wrap{
	16	+ width: 100%;
	17	+ height: 100%;
	18	+}
	19	+
15	20	header {
	21	+ background-color: #fff;
16	22	padding: 15px 30px;
17	23	grid-area: header;
18	24	position: relative;
...	...	@@ -99,7 +105,7 @@
99	105
100	106	nav.side-menu>ul.main-menu>li>div>a,
101	107	nav>ul>li {
102		- padding: 10px;
	108	+ padding: 10px 0;
103	109	font-size: 1.4rem;
104	110	font-weight: bold;
105	111	}
...	...	@@ -112,8 +118,12 @@
112	118	justify-content: center;
113	119	}
114	120
	121	+.depth1{
	122	+ cursor: default;
	123	+}
	124	+
115	125	.top-menu>ul>li {
116		- min-width: 165px;
	126	+ min-width: 161px;
117	127	text-align: center;
118	128	position: relative;
119	129	}
...	...	@@ -122,7 +132,7 @@
122	132	position: absolute;
123	133	width: 100%;
124	134	background-color: #fff;
125		- z-index: 1000;
	135	+ z-index: 10000;
126	136	bottom: 0;
127	137	left: 0;
128	138	transform: translateY(100%);
...	...	@@ -142,6 +152,7 @@
142	152	left: 0;
143	153	transform: translateY(100%);
144	154	width: 100%;
	155	+ z-index: 9999;
145	156	}
146	157
147	158	.top-menu ul.sub-menu.hide,
...	...	@@ -159,7 +170,8 @@
159	170
160	171	/* 메인 */
161	172	.main {
162		- padding: 30px;
	173	+ padding: 20px;
	174	+ height: calc(100% - 105px);
163	175	grid-area: main;
164	176	}
165	177

...	...	@@ -18,6 +18,7 @@
18	18
19	19	body {
20	20	min-width: 1356px;
	21	+ background-color: #f7f6fb;
21	22	}
22	23
23	24	a {
...	...	@@ -45,7 +46,7 @@
45	46
46	47	table th,
47	48	table td {
48		- padding: 5px;
	49	+ padding: 8px;
49	50	font-size: 1.3rem;
50	51	}
51	52
...	...	@@ -65,14 +66,14 @@
65	66	input {
66	67	min-width: 100px;
67	68	width: 100%;
68		- padding: px 10px;
	69	+ padding: 5px 10px;
69	70	border: 1px solid #eee;
70	71	border-radius: 5px;
71	72	margin-left: 5px;
72	73	}
73	74
74		-input{
75		- min-width: 300px;
	75	+input[type="text"] {
	76	+ min-width: 300px;
76	77	}
77	78
78	79	input:focus {
...	...	@@ -107,10 +108,12 @@
107	108	width: 8px;
108	109	height: 8px;
109	110	}
	111	+
110	112	::-webkit-scrollbar-thumb {
111	113	background-color: #ededed;
112	114	border-radius: 10px;
113	115	}
	116	+
114	117	::-webkit-scrollbar-track {
115	118	background-color: #fff;
116	119	border-radius: 10px;

...	...	@@ -47,9 +47,7 @@
47	47
48	48	<style scoped>
49	49	.navigate_bar {
50		- width: 100%;
51		- padding: 10px 30px;
	50	+ padding: 10px 0px;
52	51	font-size: 1.3rem;
53		- text-align: right;
54	52	}
55	53	</style>

...	...	@@ -2,7 +2,7 @@
2	2	<nav class="top-menu">
3	3	<ul class="main-menu">
4	4	<li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
5		- <p :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
	5	+ <p class="depth1" :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
6	6	<ul v-if="mainMenu.subMenu" class="sub-menu" v-show="showSubmenu"
7	7	:class="{ show: showSubmenu, hide: !showSubmenu }">
8	8	<li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx" :class="{ active: isSubMenuActive(subMenu) }">
...	...	@@ -79,13 +79,20 @@
79	79	],
80	80	},
81	81	{
82		- path: "/searchbar.page", pathName: "템플릿",
	82	+ pathName: "템플릿",
83	83	subMenu: [
84	84	{ path: "/searchbar.page", pathName: "서치바" },
85	85	{ path: "/table.page", pathName: "테이블" },
86	86	{ path: "/btnPosition.page", pathName: "버튼별 위치" },
87	87	],
88	88	},
	89	+ {
	90	+ pathName: "레이아웃 템플릿",
	91	+ subMenu: [
	92	+ { path: "/vertical.page", pathName: "수직 레이아웃" },
	93	+ { path: "/horizontal.page", pathName: "수평 레이아웃" },
	94	+ ],
	95	+ },
89	96	],
90	97	currentRoute: null,
91	98	showSubmenu: false

...	...	@@ -15,12 +15,11 @@
15	15	import SideMenu from '../layout/SideMenu.vue';
16	16	import TopMenu from '../layout/TopMenu.vue';
17	17	import PageNavigation from '../component/PageNavigation.vue';
18		-
19	18	const App = {
20	19	data: () => {
21	20	return {
22	21	// side혹은 top 둘중 한개 타입
23		- layoutType: "top"
	22	+ layoutType: "top",
24	23	}
25	24	},
26	25	methods: {

...	...	@@ -10,6 +10,8 @@
10	10	import Searchbar from "../pages/template/Searchbar.vue";
11	11	import Table from "../pages/template/Table.vue";
12	12	import BtnPosition from "../pages/template/BtnPosition.vue";
	13	+import Horizontal from "../pages/layoutTemplate/Horizontal.vue";
	14	+import Vertical from "../pages/layoutTemplate/Vertical.vue";
13	15
14	16	const routes = [
15	17	/* 메인화면 */
...	...	@@ -24,6 +26,8 @@
24	26	{path: "/searchbar.page",name: "Searchbar",component: Searchbar,},
25	27	{path: "/table.page",name: "Table",component: Table,},
26	28	{path: "/btnPosition.page",name: "BtnPosition",component: BtnPosition,},
	29	+ {path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
	30	+ {path: "/vertical.page",name: "Vertical",component: Vertical,},
27	31	];
28	32
29	33	const AppRouter = createRouter({

...	...	@@ -1,15 +1,11 @@
1	1	<template>
2		- <button :class="className">{{ btnName }}</button>
	2	+ <div>Main.vue</div>
3	3	</template>
4	4
5	5	<script>
6	6
7	7	export default {
8		- props: {
9		- className: String,
10		- btnName: String
11		- },
12		- data() {
	8	+ data () {
13	9	return {
14	10	}
15	11	},
...	...	@@ -28,4 +24,4 @@
28	24	console.log('main mounted');
29	25	}
30	26	}
31		-</script>
	27	+</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -2,71 +2,24 @@
2	2	<div class="box">
3	3	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
4	4	<div style="padding:30px 0">
5		- <div class="flex-between">
6		- <!-- 여기서부터 -->
7		- <div class="flex">
8		- <select name="" id="" class="circle-select">
9		- <option value="all">전체</option>
10		- </select>
11		- <div class="search">
12		- <input type="text" class="search-input" placeholder="Search">
13		- <button class="search-button">
14		- <svg-icon type="mdi" :path="searchPath" class="search-icon"></svg-icon>
15		- </button>
16		- </div>
17		- </div>
18		- <!-- 여기서까지 복사 -->
19		- <!-- 여기서부터 -->
20		- <div class="flex">
21		- <select name="" id="" class="square-select">
22		- <option value="all">전체</option>
23		- </select>
24		- <div class="search-square">
25		- <input type="text" class="square-input" placeholder="Search">
26		- <button class="square-button">
27		- <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
28		- </button>
29		- </div>
30		- </div>
31		- <!-- 여기서까지 복사 -->
32		- </div>
	5	+ <DefaultSearchBar />
33	6	</div>
34		- <div style="padding:30px 0">
35		- <div class="flex-between">
36		- <!-- 여기서부터 -->
37		- <div class="flex">
38		- <select name="" id="" class="circle-select2">
39		- <option value="all">전체</option>
40		- </select>
41		- <div class="search2">
42		- <input placeholder="Search" type="text" class="search-zone">
43		- <button type="submit" class="search-btn">검색</button>
44		- </div>
45		- </div>
46		- <!-- 여기서까지 복사 -->
47		- <!-- 여기서부터 -->
48		- <div class="flex">
49		- <select name="" id="" class="square-select2">
50		- <option value="all">전체</option>
51		- </select>
52		- <div class="search2-square">
53		- <input placeholder="Search" type="text" class="square-zone">
54		- <button type="submit" class="square-btn">검색</button>
55		- </div>
56		- </div>
57		- <!-- 여기서까지 복사 -->
58		- </div>
	7	+ </div>
	8	+ <div class="box">
	9	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">상세 Search Bar</p>
	10	+ <div>
	11	+ <DetailSearchBar />
59	12	</div>
60	13	</div>
61	14	</template>
62	15
63	16	<script>
64		-import SvgIcon from '@jamescoyle/vue-icon';
65		-import { mdiMagnify } from '@mdi/js';
	17	+import DefaultSearchBar from './DefaultSearchBar.vue';
	18	+import DetailSearchBar from './DetailSearchBar.vue';
66	19	export default {
67	20	data() {
68	21	return {
69		- searchPath: mdiMagnify
	22	+
70	23	}
71	24	},
72	25	methods: {
...	...	@@ -79,11 +32,11 @@
79	32
80	33	},
81	34	components: {
82		- 'SvgIcon': SvgIcon
	35	+ 'DefaultSearchBar':DefaultSearchBar,
	36	+ 'DetailSearchBar':DetailSearchBar
83	37	},
84	38	mounted() {
85		- console.log('main mounted');
86		- }
	39	+ }
87	40	}
88	41	</script>
89	42
...	...	@@ -93,193 +46,7 @@
93	46	padding: 50px;
94	47	border: 1px solid #eee;
95	48	margin-bottom: 30px;
	49	+ background-color: #fff;
96	50	}
97	51
98		-/* 1번 디자인 */
99		-.search {
100		- position: relative;
101		- margin-left: 5px;
102		-}
103		-
104		-.circle-select {
105		- border-radius: 30px;
106		-}
107		-
108		-.search-input {
109		- color: #646464;
110		- padding: 5px 10px;
111		- border-radius: 30px;
112		- width: 300px;
113		- transition: all ease-in-out .5s;
114		-}
115		-
116		-.search-input:hover,
117		-.search-input:focus {
118		- box-shadow: 0 0 1em #00000013;
119		-}
120		-
121		-.search-input:focus {
122		- outline: none;
123		- background-color: #f0eeee;
124		-}
125		-
126		-.search-input::-webkit-input-placeholder {
127		- font-weight: 100;
128		- color: #ccc;
129		-}
130		-
131		-.search-input:focus {
132		- background-color: #f0eeee;
133		-}
134		-
135		-.search-button {
136		- border: none;
137		- margin-left: 0;
138		- position: absolute;
139		- right: 5px;
140		- top: 50%;
141		- transform: translateY(-50%);
142		-}
143		-
144		-.search-button:hover {
145		- cursor: pointer;
146		-}
147		-
148		-.search-icon {
149		- color: #b4b4b4;
150		-}
151		-
152		-/* 1-2 */
153		-.search-square {
154		- position: relative;
155		-}
156		-
157		-.square-input {
158		- color: #646464;
159		- padding: 5px 10px;
160		- border-radius: 5px;
161		- width: 300px;
162		- transition: all ease-in-out .5s;
163		- margin-left: 5px;
164		-}
165		-
166		-.square-input:hover,
167		-.square-input:focus {
168		- box-shadow: 0 0 1em #00000013;
169		-}
170		-
171		-.square-input:focus {
172		- outline: none;
173		- background-color: #f0eeee;
174		-}
175		-
176		-.square-input::-webkit-input-placeholder {
177		- font-weight: 100;
178		- color: #ccc;
179		-}
180		-
181		-.square-input:focus {
182		- background-color: #f0eeee;
183		-}
184		-
185		-.square-button {
186		- border: none;
187		- margin-left: 0;
188		- position: absolute;
189		- right: 5px;
190		- top: 50%;
191		- transform: translateY(-50%);
192		-}
193		-
194		-.square-button:hover {
195		- cursor: pointer;
196		-}
197		-
198		-.square-icon {
199		- color: #b4b4b4;
200		-}
201		-
202		-
203		-/* 2번 디자인 */
204		-.search2 {
205		- display: inline-block;
206		- position: relative;
207		-}
208		-
209		-.circle-select2 {
210		- border: none;
211		- border-radius: 30px;
212		- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
213		-}
214		-
215		-.search2 .search-zone {
216		- width: 200px;
217		- padding: 5px 10px;
218		- border: none;
219		- border-radius: 20px;
220		- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
221		- margin-left: 5px;
222		-}
223		-
224		-.search2 .search-btn {
225		- background-color: #4e99e9;
226		- border: none;
227		- color: #fff;
228		- cursor: pointer;
229		- padding: 5px 10px;
230		- border-radius: 20px;
231		- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
232		- position: absolute;
233		- top: 0;
234		- right: 0;
235		- transition: .9s ease;
236		-}
237		-
238		-.search2 .search-btn:hover {
239		- transform: scale(1.05);
240		- color: rgb(255, 255, 255);
241		- background-color: #213f99;
242		-}
243		-
244		-/* 2-1 */
245		-.search2-square {
246		- display: inline-block;
247		- position: relative;
248		-}
249		-
250		-.square-select2{
251		- border: none;
252		- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
253		-}
254		-
255		-.search2-square .square-zone {
256		- width: 200px;
257		- padding: 5px 10px;
258		- border: none;
259		- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
260		- margin-left: 5px;
261		-}
262		-
263		-.search2-square .square-btn {
264		- background-color: #4e99e9;
265		- border: none;
266		- color: #fff;
267		- cursor: pointer;
268		- padding: 5px 10px;
269		- border-radius: 3px;
270		- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
271		- position: absolute;
272		- top: 0;
273		- right: 0;
274		- transition: .9s ease;
275		-}
276		-
277		-.search2-square .square-btn:hover {
278		- transform: scale(1.05);
279		- color: rgb(255, 255, 255);
280		- background-color: #213f99;
281		-}
282		-
283		-
284		-/* select + search */
285	52	</style> (파일 끝에 줄바꿈 문자 없음)

Delete comment