Commit @cea4ef8d439c7dcf07094da6fa760f9a700ed4e8

류윤주 01-15

240115 류윤주 페이지 수정

@cea4ef8d439c7dcf07094da6fa760f9a700ed4e8

d84816e

cea4ef8

client/resources/css/reset.css

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

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


 
 button:first-child,
 select:first-child,
-input:first-child {
+input:first-child,
+button.only,
+select.only,
+input.only {
     margin-left: 0;
 }
 
 
+
 /* 스크롤바 디자인 */
 ::-webkit-scrollbar {
     width: 8px;

d84816e

cea4ef8

client/resources/css/style.css

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

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


     margin-bottom: 0;
 }
 
+.content-zone {
+    border: 1px solid #eee;
+    padding: 10px;
+    height: calc(100% - 55px);
+    overflow: auto;
+}
+
 .left-content,
 .right-content,
 .row,

 }
 
 /* 테이블 공통 */
-.list-table {
+.list-table,
+.form-table {
     border-bottom: 1px solid #aaa;
 }
-
 .list-table th,
-.list-table td {
+.list-table td,
+.form-table th{
     text-align: center;
+}
+.list-table th,
+.list-table td,
+.form-table th, 
+.form-table td {
     border-top: 1px solid #aaa;
 }
 

 .form-table th {
     color: #213f99;
     text-align: center;
+    background-color: #dbe3fb;
+}
+
+.form-table2 th{
+    color: #213f99;
+    text-align: center;
 }
 
 
 .option-table th {
-    text-align: left;
+    color: #213f99;
 }
 
 

 }
 
 .option-searchbar {
-    width: 50%;
+    width: 75%;
     margin: 0 auto;
     padding: 15px;
     background-color: #f8f9fe;

cea4ef8

client/resources/img/guideImg/horizontal.png (Binary) (added)

+++ client/resources/img/guideImg/horizontal.png

Binary file is not shown

cea4ef8

client/resources/img/guideImg/vertical.PNG (Binary) (added)

+++ client/resources/img/guideImg/vertical.PNG

Binary file is not shown

d84816e

cea4ef8

client/views/index.html

--- client/views/index.html

+++ client/views/index.html


         <link rel="stylesheet" href="client/resources/css/font.css">
         <link rel="stylesheet" href="client/resources/css/reset.css">
         <link rel="stylesheet" href="client/resources/css/layout.css">
-        <link rel="stylesheet" href="client/resources/css/common.css">
         <link rel="stylesheet" href="client/resources/css/style.css">
+        <link rel="stylesheet" href="client/resources/css/common.css">
       
         <title>TAKEN BI MANAGER</title>
     </head>

d84816e

cea4ef8

client/views/pages/file/FileManagement.vue

--- client/views/pages/file/FileManagement.vue

+++ client/views/pages/file/FileManagement.vue

...	...	@@ -1,15 +1,156 @@
1	1	<template>
2		- <div class="container vertical">
3		- <div class="left-content"></div>
4		- <div class="right-content"></div>
	2	+ <div class="container">
	3	+ <div class="page-titleZone flex justify-between">
	4	+ <p class="main-title">페이지 제목을 적어주세요</p>
	5	+ <PageNavigation />
	6	+ </div>
	7	+ <div class="content-box flex justify-between">
	8	+ <div class="left-content flex20">
	9	+ <div class="flex-column justify-between">
	10	+ <div class="host-zone flex15">
	11	+ <div class="content-titleZone">
	12	+ <p class="box-title">호스트 선택</p>
	13	+ </div>
	14	+ <select name="" id="" class="only">
	15	+ <option value="">172.0.0.1</option>
	16	+ </select>
	17	+ </div>
	18	+ <div class="file-zone flex85">
	19	+ <div class="content-titleZone flex justify-between">
	20	+ <p class="box-title">폴더 리스트</p>
	21	+ <button class="darkg-border-btn small-btn">폴더추가</button>
	22	+ </div>
	23	+ <div class="content-zone">
	24	+ </div>
	25	+ </div>
	26	+ </div>
	27	+ </div>
	28	+ <div class="right-content flex80">
	29	+ <div class="searchbar-zone">
	30	+ <div class="flex justify-end align-center">
	31	+ <input type="date" name="" id="" class="square-date">
	32	+ <span class="coupler">~</span>
	33	+ <input type="date" name="" id="" class="square-date">
	34	+ <select name="" id="" class="square-select">
	35	+ <option value="all">전체</option>
	36	+ </select>
	37	+ <div class="search-square">
	38	+ <input type="text" class="square-input" placeholder="Search">
	39	+ <button class="square-button">
	40	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	41	+ </button>
	42	+ </div>
	43	+ </div>
	44	+ </div>
	45	+ <div class="flex-column">
	46	+ <div class="table-zone">
	47	+ <table class="list-table">
	48	+ <colgroup>
	49	+ <col style="width: ;">
	50	+ <col style="width: ;">
	51	+ <col style="width: ;">
	52	+ <col style="width: ;">
	53	+ </colgroup>
	54	+ <thead>
	55	+ <tr>
	56	+ <th>No</th>
	57	+ <th>user ID</th>
	58	+ <th>이름</th>
	59	+ <th>생년월일</th>
	60	+ <th>성별</th>
	61	+ </tr>
	62	+ </thead>
	63	+ <tbody>
	64	+ <tr>
	65	+ <td>1</td>
	66	+ <td>test123</td>
	67	+ <td>홍길동</td>
	68	+ <td>1999.01.01</td>
	69	+ <td>여</td>
	70	+ </tr>
	71	+ <tr>
	72	+ <td>1</td>
	73	+ <td>test123</td>
	74	+ <td>홍길동</td>
	75	+ <td>1999.01.01</td>
	76	+ <td>여</td>
	77	+ </tr>
	78	+ <tr>
	79	+ <td>1</td>
	80	+ <td>test123</td>
	81	+ <td>홍길동</td>
	82	+ <td>1999.01.01</td>
	83	+ <td>여</td>
	84	+ </tr>
	85	+ <tr>
	86	+ <td>1</td>
	87	+ <td>test123</td>
	88	+ <td>홍길동</td>
	89	+ <td>1999.01.01</td>
	90	+ <td>여</td>
	91	+ </tr>
	92	+ <tr>
	93	+ <td>1</td>
	94	+ <td>test123</td>
	95	+ <td>홍길동</td>
	96	+ <td>1999.01.01</td>
	97	+ <td>여</td>
	98	+ </tr>
	99	+ <tr>
	100	+ <td>1</td>
	101	+ <td>test123</td>
	102	+ <td>홍길동</td>
	103	+ <td>1999.01.01</td>
	104	+ <td>여</td>
	105	+ </tr>
	106	+ <tr>
	107	+ <td>1</td>
	108	+ <td>test123</td>
	109	+ <td>홍길동</td>
	110	+ <td>1999.01.01</td>
	111	+ <td>여</td>
	112	+ </tr>
	113	+ <tr>
	114	+ <td>1</td>
	115	+ <td>test123</td>
	116	+ <td>홍길동</td>
	117	+ <td>1999.01.01</td>
	118	+ <td>여</td>
	119	+ </tr>
	120	+ <tr>
	121	+ <td>1</td>
	122	+ <td>test123</td>
	123	+ <td>홍길동</td>
	124	+ <td>1999.01.01</td>
	125	+ <td>여</td>
	126	+ </tr>
	127	+ <tr>
	128	+ <td>1</td>
	129	+ <td>test123</td>
	130	+ <td>홍길동</td>
	131	+ <td>1999.01.01</td>
	132	+ <td>여</td>
	133	+ </tr>
	134	+ </tbody>
	135	+ </table>
	136	+ </div>
	137	+ <PaginationButton />
	138	+ </div>
	139	+ </div>
	140	+ </div>
5	141	</div>
6	142	</template>
7	143
8	144	<script>
9		-
	145	+import PageNavigation from '../../component/PageNavigation.vue';
	146	+import PaginationButton from '../../component/PaginationButton.vue';
	147	+import FileTree from '../../component/FileTree.vue';
	148	+import SvgIcon from '@jamescoyle/vue-icon';
	149	+import { mdiMagnify } from '@mdi/js';
10	150	export default {
11	151	data() {
12	152	return {
	153	+ searchPath: mdiMagnify
13	154	}
14	155	},
15	156	methods: {
...	...	@@ -22,6 +163,10 @@
22	163
23	164	},
24	165	components: {
	166	+ 'PageNavigation': PageNavigation,
	167	+ 'FileTree': FileTree,
	168	+ 'SvgIcon': SvgIcon,
	169	+ 'PaginationButton': PaginationButton
25	170	},
26	171	mounted() {
27	172	console.log('main mounted');

d84816e

cea4ef8

client/views/pages/file/HostManagement.vue

--- client/views/pages/file/HostManagement.vue

+++ client/views/pages/file/HostManagement.vue

...	...	@@ -1,15 +1,208 @@
1	1	<template>
2		- <div class="container horizontal">
3		- <div class="row"></div>
4		- <div class="row"></div>
	2	+ <div class="container">
	3	+ <div class="page-titleZone flex justify-between">
	4	+ <p class="main-title">페이지 제목을 적어주세요</p>
	5	+ <PageNavigation />
	6	+ </div>
	7	+ <div class="content">
	8	+ <div class="row">
	9	+ <div class="content-titleZone">
	10	+ <p class="box-title">목록</p>
	11	+ </div>
	12	+ <div class="searchbar-zone">
	13	+ <div class="flex justify-end align-center">
	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="table-zone">
	31	+ <div class="flex justify-between align-center">
	32	+ <div class="count-zone">
	33	+ <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
	34	+ </div>
	35	+ <div class="cunt-selectZone">
	36	+ <select name="" id="">
	37	+ <option value="">10개 보기</option>
	38	+ <option value="">20개 보기</option>
	39	+ </select>
	40	+ </div>
	41	+ </div>
	42	+ <table class="list-table">
	43	+ <colgroup>
	44	+ <col style="width: ;">
	45	+ <col style="width: ;">
	46	+ <col style="width: ;">
	47	+ <col style="width: ;">
	48	+ <col style="width: ;">
	49	+ </colgroup>
	50	+ <thead>
	51	+ <tr>
	52	+ <th><input type="checkbox" name="" id=""></th>
	53	+ <th>No</th>
	54	+ <th>user ID</th>
	55	+ <th>이름</th>
	56	+ <th>생년월일</th>
	57	+ <th>성별</th>
	58	+ </tr>
	59	+ </thead>
	60	+ <tbody>
	61	+ <tr>
	62	+ <td><input type="checkbox" name="" id=""></td>
	63	+ <td>1</td>
	64	+ <td>test123</td>
	65	+ <td>홍길동</td>
	66	+ <td>1999.01.01</td>
	67	+ <td>여</td>
	68	+ </tr>
	69	+ <tr>
	70	+ <td><input type="checkbox" name="" id=""></td>
	71	+ <td>1</td>
	72	+ <td>test123</td>
	73	+ <td>홍길동</td>
	74	+ <td>1999.01.01</td>
	75	+ <td>여</td>
	76	+ </tr>
	77	+ <tr>
	78	+ <td><input type="checkbox" name="" id=""></td>
	79	+ <td>1</td>
	80	+ <td>test123</td>
	81	+ <td>홍길동</td>
	82	+ <td>1999.01.01</td>
	83	+ <td>여</td>
	84	+ </tr>
	85	+ <tr>
	86	+ <td><input type="checkbox" name="" id=""></td>
	87	+ <td>1</td>
	88	+ <td>test123</td>
	89	+ <td>홍길동</td>
	90	+ <td>1999.01.01</td>
	91	+ <td>여</td>
	92	+ </tr>
	93	+ <tr>
	94	+ <td><input type="checkbox" name="" id=""></td>
	95	+ <td>1</td>
	96	+ <td>test123</td>
	97	+ <td>홍길동</td>
	98	+ <td>1999.01.01</td>
	99	+ <td>여</td>
	100	+ </tr>
	101	+ <tr>
	102	+ <td><input type="checkbox" name="" id=""></td>
	103	+ <td>1</td>
	104	+ <td>test123</td>
	105	+ <td>홍길동</td>
	106	+ <td>1999.01.01</td>
	107	+ <td>여</td>
	108	+ </tr>
	109	+ <tr>
	110	+ <td><input type="checkbox" name="" id=""></td>
	111	+ <td>1</td>
	112	+ <td>test123</td>
	113	+ <td>홍길동</td>
	114	+ <td>1999.01.01</td>
	115	+ <td>여</td>
	116	+ </tr>
	117	+ <tr>
	118	+ <td><input type="checkbox" name="" id=""></td>
	119	+ <td>1</td>
	120	+ <td>test123</td>
	121	+ <td>홍길동</td>
	122	+ <td>1999.01.01</td>
	123	+ <td>여</td>
	124	+ </tr>
	125	+ <tr>
	126	+ <td><input type="checkbox" name="" id=""></td>
	127	+ <td>1</td>
	128	+ <td>test123</td>
	129	+ <td>홍길동</td>
	130	+ <td>1999.01.01</td>
	131	+ <td>여</td>
	132	+ </tr>
	133	+ <tr>
	134	+ <td><input type="checkbox" name="" id=""></td>
	135	+ <td>1</td>
	136	+ <td>test123</td>
	137	+ <td>홍길동</td>
	138	+ <td>1999.01.01</td>
	139	+ <td>여</td>
	140	+ </tr>
	141	+ </tbody>
	142	+ </table>
	143	+ <div class="flex justify-end">
	144	+ <button class="red-border-btn small-btn">선택항목 삭제</button>
	145	+ </div>
	146	+ </div>
	147	+ <PaginationButton />
	148	+ </div>
	149	+ <div class="row form-box">
	150	+ <div class="content-titleZone">
	151	+ <p class="box-title">등록</p>
	152	+ </div>
	153	+ <div class="table-zone">
	154	+ <table class="form-table">
	155	+ <colgroup>
	156	+ <col style="width: 10%;">
	157	+ <col style="width: 40%;">
	158	+ <col style="width: 10%;">
	159	+ <col style="width: 40%;">
	160	+ </colgroup>
	161	+ <tbody>
	162	+ <tr>
	163	+ <th>user ID</th>
	164	+ <td><input type="text" name="" id=""></td>
	165	+ <th>이름</th>
	166	+ <td><input type="text" name="" id=""></td>
	167	+ </tr>
	168	+ <tr>
	169	+ <th>생년월일</th>
	170	+ <td>
	171	+ <div class="flex justify-between ">
	172	+ <select name="" id="" class="flex30"></select>
	173	+ <select name="" id="" class="flex30"></select>
	174	+ <select name="" id="" class="flex30"></select>
	175	+ </div>
	176	+ </td>
	177	+ <th>성별</th>
	178	+ <td>
	179	+ <select name="" id=""></select>
	180	+ </td>
	181	+ </tr>
	182	+ </tbody>
	183	+ </table>
	184	+ </div>
	185	+ <div class="flex justify-end">
	186	+ <button class="blue-border-btn small-btn">등록</button>
	187	+ <!-- 값이 있을때 수정 버튼으로 변경 -->
	188	+ <!-- <button class="orange-border-btn small-btn">수정</button> -->
	189	+ <button class="darkg-border-btn small-btn">초기화</button>
	190	+ </div>
	191	+ </div>
	192	+ </div>
5	193	</div>
6	194	</template>
7	195
8	196	<script>
9		-
	197	+import PageNavigation from '../../component/PageNavigation.vue';
	198	+import PaginationButton from '../../component/PaginationButton.vue';
	199	+import SvgIcon from '@jamescoyle/vue-icon';
	200	+import { mdiMagnify } from '@mdi/js';
10	201	export default {
11	202	data() {
12	203	return {
	204	+ searchPath: mdiMagnify,
	205	+ inputValue: null
13	206	}
14	207	},
15	208	methods: {
...	...	@@ -22,9 +215,14 @@
22	215
23	216	},
24	217	components: {
	218	+ 'PageNavigation': PageNavigation,
	219	+ 'PaginationButton': PaginationButton,
	220	+ 'SvgIcon': SvgIcon
25	221	},
26	222	mounted() {
27	223	console.log('main mounted');
28	224	}
29	225	}
30		-</script> (파일 끝에 줄바꿈 문자 없음)
	226	+</script>
	227	+
	228	+<style scoped></style> (파일 끝에 줄바꿈 문자 없음)

cea4ef8

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

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

...	...	@@ -0,0 +1,215 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="box">
	4	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">타이틀 옆 버튼 위치</p>
	5	+ <!-- 여기서부터 복사 -->
	6	+ <div class="flex-between">
	7	+ <p class="box-title">폴더 리스트</p>
	8	+ <button class="darkg-border-btn small-btn">폴더추가</button>
	9	+ </div>
	10	+ </div>
	11	+ <div class="box">
	12	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">다운로드버튼 및 crud 한페이지에서 이루어지는 page의 조회 및 삭제</p>
	13	+ <!-- 여기서부터 복사 -->
	14	+ <div class="flex-end">
	15	+ <button class="green-border-btn small-btn">파일 다운로드</button>
	16	+ </div>
	17	+ <table class="list-table">
	18	+ <colgroup>
	19	+ <col style="width: ;">
	20	+ <col style="width: ;">
	21	+ <col style="width: ;">
	22	+ <col style="width: ;">
	23	+ </colgroup>
	24	+ <thead>
	25	+ <tr>
	26	+ <th>No</th>
	27	+ <th>user ID</th>
	28	+ <th>이름</th>
	29	+ <th>생년월일</th>
	30	+ <th>성별</th>
	31	+ </tr>
	32	+ </thead>
	33	+ <tbody>
	34	+ <tr>
	35	+ <td>1</td>
	36	+ <td>test123</td>
	37	+ <td>홍길동</td>
	38	+ <td>1999.01.01</td>
	39	+ <td>여</td>
	40	+ </tr>
	41	+ <tr>
	42	+ <td>1</td>
	43	+ <td>test123</td>
	44	+ <td>홍길동</td>
	45	+ <td>1999.01.01</td>
	46	+ <td>여</td>
	47	+ </tr>
	48	+ </tbody>
	49	+ </table>
	50	+ </div>
	51	+ <div class="box">
	52	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">조건 검색과 같이 들어가는 버튼</p>
	53	+ <!-- 여기서부터 복사 -->
	54	+ <div class="flex-between">
	55	+ <div>
	56	+ <button class="darkg-border-btn small-btn">선택이동</button>
	57	+ <button class="darkg-border-btn small-btn">선택복사</button>
	58	+ <button class="darkg-border-btn small-btn">선택삭제</button>
	59	+ </div>
	60	+ <div class="flex-end">
	61	+ <div class="search-bar flex">
	62	+ <select name="" id="">
	63	+ <option value="all">전체</option>
	64	+ </select>
	65	+ <input type="text" name="" id="">
	66	+ </div>
	67	+ <button class="blue-btn small-btn">검색</button>
	68	+ </div>
	69	+ </div>
	70	+ <table class="list-table">
	71	+ <colgroup>
	72	+ <col style="width: ;">
	73	+ <col style="width: ;">
	74	+ <col style="width: ;">
	75	+ <col style="width: ;">
	76	+ </colgroup>
	77	+ <thead>
	78	+ <tr>
	79	+ <th>No</th>
	80	+ <th>user ID</th>
	81	+ <th>이름</th>
	82	+ <th>생년월일</th>
	83	+ <th>성별</th>
	84	+ </tr>
	85	+ </thead>
	86	+ <tbody>
	87	+ <tr>
	88	+ <td>1</td>
	89	+ <td>test123</td>
	90	+ <td>홍길동</td>
	91	+ <td>1999.01.01</td>
	92	+ <td>여</td>
	93	+ </tr>
	94	+ <tr>
	95	+ <td>1</td>
	96	+ <td>test123</td>
	97	+ <td>홍길동</td>
	98	+ <td>1999.01.01</td>
	99	+ <td>여</td>
	100	+ </tr>
	101	+ </tbody>
	102	+ </table>
	103	+ </div>
	104	+ <div class="box">
	105	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">등록</p>
	106	+ <table class="list-table">
	107	+ <colgroup>
	108	+ <col style="width: ;">
	109	+ <col style="width: ;">
	110	+ <col style="width: ;">
	111	+ <col style="width: ;">
	112	+ </colgroup>
	113	+ <thead>
	114	+ <tr>
	115	+ <th>No</th>
	116	+ <th>user ID</th>
	117	+ <th>이름</th>
	118	+ <th>생년월일</th>
	119	+ <th>성별</th>
	120	+ </tr>
	121	+ </thead>
	122	+ <tbody>
	123	+ <tr>
	124	+ <td>1</td>
	125	+ <td>test123</td>
	126	+ <td>홍길동</td>
	127	+ <td>1999.01.01</td>
	128	+ <td>여</td>
	129	+ </tr>
	130	+ <tr>
	131	+ <td>1</td>
	132	+ <td>test123</td>
	133	+ <td>홍길동</td>
	134	+ <td>1999.01.01</td>
	135	+ <td>여</td>
	136	+ </tr>
	137	+ </tbody>
	138	+ </table>
	139	+ <!-- 여기서부터 복사 -->
	140	+ <div class="flex-end">
	141	+ <button class="darkg-btn small-btn">등록</button>
	142	+ </div>
	143	+ </div>
	144	+ <div class="box">
	145	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">수정 삭제 목록</p>
	146	+ <table class="form-table">
	147	+ <colgroup>
	148	+ <col style="width: ;">
	149	+ <col style="width: ;">
	150	+ <col style="width: ;">
	151	+ <col style="width: ;">
	152	+ </colgroup>
	153	+ <tbody>
	154	+ <tr>
	155	+ <th>user ID</th>
	156	+ <td><input type="text" name="" id=""></td>
	157	+ <th>이름</th>
	158	+ <td><input type="text" name="" id=""></td>
	159	+ </tr>
	160	+ <tr>
	161	+ <th>생년월일</th>
	162	+ <td>
	163	+ <div class="flex">
	164	+ <select name="" id=""></select>
	165	+ <select name="" id=""></select>
	166	+ <select name="" id=""></select>
	167	+ </div>
	168	+ </td>
	169	+ <th>성별</th>
	170	+ <td>
	171	+ <select name="" id=""></select>
	172	+ </td>
	173	+ </tr>
	174	+ </tbody>
	175	+ </table>
	176	+ <!-- 여기서부터 복사 -->
	177	+ <div class="flex-end">
	178	+ <button class="red-border-btn small-btn">삭제</button>
	179	+ <button class="darkg-border-btn small-btn">목록</button>
	180	+ <button class="green-border-btn small-btn">수정</button>
	181	+ </div>
	182	+ </div>
	183	+ </div>
	184	+</template>
	185	+
	186	+<script>
	187	+
	188	+export default {
	189	+ data() {
	190	+ return {
	191	+ }
	192	+ },
	193	+ methods: {
	194	+
	195	+ },
	196	+ watch: {
	197	+
	198	+ },
	199	+ computed: {
	200	+
	201	+ },
	202	+ components: {
	203	+ },
	204	+ mounted() {
	205	+ }
	206	+}
	207	+</script>
	208	+
	209	+<style scoped>
	210	+.box {
	211	+ padding: 50px;
	212	+ border: 1px solid #eee;
	213	+ margin-bottom: 30px;
	214	+}
	215	+</style>(파일 끝에 줄바꿈 문자 없음)

cea4ef8

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>

cea4ef8

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>(파일 끝에 줄바꿈 문자 없음)

cea4ef8

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

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

...	...	@@ -0,0 +1,59 @@
	1	+<template>
	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>
	28	+ <select name="" id=""></select>
	29	+ </td>
	30	+ </tr>
	31	+ </tbody>
	32	+ </table>
	33	+ </div>
	34	+</template>
	35	+
	36	+<script>
	37	+
	38	+export default {
	39	+ data() {
	40	+ return {
	41	+ }
	42	+ },
	43	+ methods: {
	44	+
	45	+ },
	46	+ watch: {
	47	+
	48	+ },
	49	+ computed: {
	50	+
	51	+ },
	52	+ components: {
	53	+ },
	54	+ mounted() {
	55	+ console.log('main mounted');
	56	+ }
	57	+}
	58	+</script>
	59	+

cea4ef8

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>

cea4ef8

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

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

...	...	@@ -0,0 +1,53 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="box">
	4	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
	5	+ <div style="padding:30px 0">
	6	+ <DefaultSearchBar />
	7	+ </div>
	8	+ </div>
	9	+ <div class="box">
	10	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">상세 Search Bar</p>
	11	+ <div>
	12	+ <DetailSearchBar />
	13	+ </div>
	14	+ </div>
	15	+ </div>
	16	+</template>
	17	+
	18	+<script>
	19	+import DefaultSearchBar from './DefaultSearchBar.vue';
	20	+import DetailSearchBar from './DetailSearchBar.vue';
	21	+export default {
	22	+ data() {
	23	+ return {
	24	+
	25	+ }
	26	+ },
	27	+ methods: {
	28	+
	29	+ },
	30	+ watch: {
	31	+
	32	+ },
	33	+ computed: {
	34	+
	35	+ },
	36	+ components: {
	37	+ 'DefaultSearchBar': DefaultSearchBar,
	38	+ 'DetailSearchBar': DetailSearchBar
	39	+ },
	40	+ mounted() {
	41	+ }
	42	+}
	43	+</script>
	44	+
	45	+<style scoped>
	46	+/* */
	47	+.box {
	48	+ padding: 50px;
	49	+ border: 1px solid #eee;
	50	+ margin-bottom: 30px;
	51	+ background-color: #fff;
	52	+}
	53	+</style>(파일 끝에 줄바꿈 문자 없음)

cea4ef8

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

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

...	...	@@ -0,0 +1,47 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="box">
	4	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 List Table</p>
	5	+ <ListTable />
	6	+ </div>
	7	+ <div class="box">
	8	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
	9	+ <FormTable />
	10	+ </div>
	11	+ </div>
	12	+</template>
	13	+
	14	+<script>
	15	+import ListTable from './ListTable.vue';
	16	+import FormTable from './FormTable.vue';
	17	+export default {
	18	+ data() {
	19	+ return {
	20	+ }
	21	+ },
	22	+ methods: {
	23	+
	24	+ },
	25	+ watch: {
	26	+
	27	+ },
	28	+ computed: {
	29	+
	30	+ },
	31	+ components: {
	32	+ 'ListTable': ListTable,
	33	+ 'FormTable': FormTable
	34	+ },
	35	+ mounted() {
	36	+
	37	+ }
	38	+}
	39	+</script>
	40	+
	41	+<style scoped>
	42	+.box {
	43	+ padding: 50px;
	44	+ border: 1px solid #eee;
	45	+ margin-bottom: 30px;
	46	+}
	47	+</style>(파일 끝에 줄바꿈 문자 없음)

d84816e

cea4ef8

client/views/template/guide/TemplateGuide.vue

--- client/views/template/guide/TemplateGuide.vue

+++ client/views/template/guide/TemplateGuide.vue

...	...	@@ -3,6 +3,37 @@
3	3	<div class="content">
4	4	<div class="row">
5	5	<div class="content-titleZone">
	6	+ <p class="box-title">box content</p>
	7	+ </div>
	8	+ <table class="option-table">
	9	+ <colgroup>
	10	+ <col style="width:20%">
	11	+ <col style="width:80%">
	12	+ </colgroup>
	13	+ <tbody>
	14	+ <tr>
	15	+ <th>contetn</th>
	16	+ <td>main영역에서 전체 하얀색 box</td>
	17	+ </tr>
	18	+ <tr>
	19	+ <th>left-contetn</th>
	20	+ <td>main영역에서 왼쪽 하얀색 box</td>
	21	+ </tr>
	22	+ <tr>
	23	+ <th>right-contetn</th>
	24	+ <td>main영역에서 오른쪽 하얀색 box</td>
	25	+ </tr>
	26	+ <tr>
	27	+ <th>row</th>
	28	+ <td>main영역에서 위아래 box</td>
	29	+ </tr>
	30	+ </tbody>
	31	+ </table>
	32	+ <img src="../../../resources/img/guideImg/vertical.png" alt="">
	33	+ <img src="../../../resources/img/guideImg/horizontal.png" alt="">
	34	+ </div>
	35	+ <div class="row">
	36	+ <div class="content-titleZone">
6	37	<p class="box-title">메인축 배치</p>
7	38	</div>
8	39	<table class="option-table">
...	...	@@ -80,7 +111,7 @@
80	111	</div>
81	112	<div class="row">
82	113	<div class="content-titleZone">
83		- <p class="box-title">너비 비율</p>
	114	+ <p class="box-title">너비 비율(부모에 flex나 flex-column이 있어야 자식에 너비를 넣을 수 있음)</p>
84	115	</div>
85	116	<table class="option-table">
86	117	<colgroup>

d84816e

cea4ef8

client/views/template/layoutTemplate/Vertical.vue

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

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

...	...	@@ -6,12 +6,23 @@
6	6	</div>
7	7	<div class="content-box flex justify-between">
8	8	<div class="left-content flex20">
9		- <div class="content-titleZone flex justify-between">
10		- <p class="box-title">폴더 리스트</p>
11		- <button class="darkg-border-btn small-btn">폴더추가</button>
12		- </div>
13		- <div class="content-zone">
14		-
	9	+ <div class="flex-column justify-between">
	10	+ <div class="host-zone flex20">
	11	+ <div class="content-titleZone">
	12	+ <p class="box-title">호스트 선택</p>
	13	+ </div>
	14	+ <select name="" id="">
	15	+ <option value="">172.0.0.1</option>
	16	+ </select>
	17	+ </div>
	18	+ <div class="file-zone flex80">
	19	+ <div class="content-titleZone flex justify-between">
	20	+ <p class="box-title">폴더 리스트</p>
	21	+ <button class="darkg-border-btn small-btn">폴더추가</button>
	22	+ </div>
	23	+ <div class="content-zone">
	24	+ </div>
	25	+ </div>
15	26	</div>
16	27	</div>
17	28	<div class="right-content flex80">
...	...	@@ -63,49 +74,57 @@
63	74	<td>홍길동</td>
64	75	<td>1999.01.01</td>
65	76	<td>여</td>
66		- </tr> <tr>
	77	+ </tr>
	78	+ <tr>
67	79	<td>1</td>
68	80	<td>test123</td>
69	81	<td>홍길동</td>
70	82	<td>1999.01.01</td>
71	83	<td>여</td>
72		- </tr> <tr>
	84	+ </tr>
	85	+ <tr>
73	86	<td>1</td>
74	87	<td>test123</td>
75	88	<td>홍길동</td>
76	89	<td>1999.01.01</td>
77	90	<td>여</td>
78		- </tr> <tr>
	91	+ </tr>
	92	+ <tr>
79	93	<td>1</td>
80	94	<td>test123</td>
81	95	<td>홍길동</td>
82	96	<td>1999.01.01</td>
83	97	<td>여</td>
84		- </tr> <tr>
	98	+ </tr>
	99	+ <tr>
85	100	<td>1</td>
86	101	<td>test123</td>
87	102	<td>홍길동</td>
88	103	<td>1999.01.01</td>
89	104	<td>여</td>
90		- </tr> <tr>
	105	+ </tr>
	106	+ <tr>
91	107	<td>1</td>
92	108	<td>test123</td>
93	109	<td>홍길동</td>
94	110	<td>1999.01.01</td>
95	111	<td>여</td>
96		- </tr> <tr>
	112	+ </tr>
	113	+ <tr>
97	114	<td>1</td>
98	115	<td>test123</td>
99	116	<td>홍길동</td>
100	117	<td>1999.01.01</td>
101	118	<td>여</td>
102		- </tr> <tr>
	119	+ </tr>
	120	+ <tr>
103	121	<td>1</td>
104	122	<td>test123</td>
105	123	<td>홍길동</td>
106	124	<td>1999.01.01</td>
107	125	<td>여</td>
108		- </tr> <tr>
	126	+ </tr>
	127	+ <tr>
109	128	<td>1</td>
110	129	<td>test123</td>
111	130	<td>홍길동</td>
...	...	@@ -155,11 +174,9 @@
155	174	}
156	175	</script>
157	176
158		-<style lang="css" scoped>
159		-.content-zone {
	177	+<style lang="css" scoped>.content-zone {
160	178	border: 1px solid #eee;
161	179	padding: 10px;
162	180	height: calc(100% - 55px);
163	181	overflow: auto;
164		-}
165		-</style> (파일 끝에 줄바꿈 문자 없음)
	182	+}</style> (파일 끝에 줄바꿈 문자 없음)

cea4ef8

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

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

...	...	@@ -0,0 +1,59 @@
	1	+<template>
	2	+ <div class="table-zone">
	3	+ <table class="form-table2">
	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 justify-between">
	21	+ <select name="" id="" class="flex30"></select>
	22	+ <select name="" id="" class="flex30"></select>
	23	+ <select name="" id="" class="flex30"></select>
	24	+ </div>
	25	+ </td>
	26	+ <th>성별</th>
	27	+ <td>
	28	+ <select name="" id=""></select>
	29	+ </td>
	30	+ </tr>
	31	+ </tbody>
	32	+ </table>
	33	+ </div>
	34	+</template>
	35	+
	36	+<script>
	37	+
	38	+export default {
	39	+ data() {
	40	+ return {
	41	+ }
	42	+ },
	43	+ methods: {
	44	+
	45	+ },
	46	+ watch: {
	47	+
	48	+ },
	49	+ computed: {
	50	+
	51	+ },
	52	+ components: {
	53	+ },
	54	+ mounted() {
	55	+ console.log('main mounted');
	56	+ }
	57	+}
	58	+</script>
	59	+

d84816e

cea4ef8

client/views/template/templateElement/Table.vue

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

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


             <FormTable />
         </div>
         <div class="box">
-            <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
+            <p style="font-size:2rem; font-weight:800; margin-bottom:10px">버튼 Table</p>
             <BtnTable />
         </div>
     </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -102,11 +102,15 @@
102	102
103	103	button:first-child,
104	104	select:first-child,
105		-input:first-child {
	105	+input:first-child,
	106	+button.only,
	107	+select.only,
	108	+input.only {
106	109	margin-left: 0;
107	110	}
108	111
109	112
	113	+
110	114	/* 스크롤바 디자인 */
111	115	::-webkit-scrollbar {
112	116	width: 8px;

...	...	@@ -28,6 +28,13 @@
28	28	margin-bottom: 0;
29	29	}
30	30
	31	+.content-zone {
	32	+ border: 1px solid #eee;
	33	+ padding: 10px;
	34	+ height: calc(100% - 55px);
	35	+ overflow: auto;
	36	+}
	37	+
31	38	.left-content,
32	39	.right-content,
33	40	.row,
...	...	@@ -66,13 +73,19 @@
66	73	}
67	74
68	75	/* 테이블 공통 */
69		-.list-table {
	76	+.list-table,
	77	+.form-table {
70	78	border-bottom: 1px solid #aaa;
71	79	}
72		-
73	80	.list-table th,
74		-.list-table td {
	81	+.list-table td,
	82	+.form-table th{
75	83	text-align: center;
	84	+}
	85	+.list-table th,
	86	+.list-table td,
	87	+.form-table th,
	88	+.form-table td {
76	89	border-top: 1px solid #aaa;
77	90	}
78	91
...	...	@@ -97,11 +110,17 @@
97	110	.form-table th {
98	111	color: #213f99;
99	112	text-align: center;
	113	+ background-color: #dbe3fb;
	114	+}
	115	+
	116	+.form-table2 th{
	117	+ color: #213f99;
	118	+ text-align: center;
100	119	}
101	120
102	121
103	122	.option-table th {
104		- text-align: left;
	123	+ color: #213f99;
105	124	}
106	125
107	126
...	...	@@ -172,7 +191,7 @@
172	191	}
173	192
174	193	.option-searchbar {
175		- width: 50%;
	194	+ width: 75%;
176	195	margin: 0 auto;
177	196	padding: 15px;
178	197	background-color: #f8f9fe;

...	...	@@ -9,8 +9,8 @@
9	9	<link rel="stylesheet" href="client/resources/css/font.css">
10	10	<link rel="stylesheet" href="client/resources/css/reset.css">
11	11	<link rel="stylesheet" href="client/resources/css/layout.css">
12		- <link rel="stylesheet" href="client/resources/css/common.css">
13	12	<link rel="stylesheet" href="client/resources/css/style.css">
	13	+ <link rel="stylesheet" href="client/resources/css/common.css">
14	14
15	15	<title>TAKEN BI MANAGER</title>
16	16	</head>

...	...	@@ -9,7 +9,7 @@
9	9	<FormTable />
10	10	</div>
11	11	<div class="box">
12		- <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 form Table</p>
	12	+ <p style="font-size:2rem; font-weight:800; margin-bottom:10px">버튼 Table</p>
13	13	<BtnTable />
14	14	</div>
15	15	</div>

Delete comment