Commit @bdc4fdb8df9b31c367c1710427972bee87e7a715

bdc4fdb

.gitignore (added)

+++ .gitignore

...	...	@@ -0,0 +1,3 @@
	1	+client/build/
	2	+server/logs/
	3	+node_modules/(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

Global.js (added)

+++ Global.js

...	...	@@ -0,0 +1,17 @@
	1	+const PROJECT_NAME = 'NodeJS Web Server Framework(Vue)';
	2	+const PROJECT_VERSION = '1.0';
	3	+const BASE_DIR = __dirname;
	4	+const LOG_BASE_DIR = `${__dirname}/server/logs`;
	5	+const SERVICE_STATUS = process.env.NODE_ENV;//development, production
	6	+const PORT = 80;
	7	+const API_SERVER_HOST = "localhost:8080";
	8	+
	9	+module.exports = {
	10	+ PROJECT_NAME,
	11	+ PROJECT_VERSION,
	12	+ BASE_DIR,
	13	+ LOG_BASE_DIR,
	14	+ SERVICE_STATUS,
	15	+ PORT,
	16	+ API_SERVER_HOST
	17	+}(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/resources/css/common.css (added)

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

...	...	@@ -0,0 +1,236 @@
	1	+@charset "utf-8";
	2	+
	3	+/* 정렬 */
	4	+.flex {
	5	+ display: flex;
	6	+ flex-wrap: wrap;
	7	+}
	8	+
	9	+.flex-column {
	10	+ display: flex;
	11	+ flex-direction: column;
	12	+ height: 100%;
	13	+}
	14	+
	15	+
	16	+.justify-start {
	17	+ justify-content: flex-start;
	18	+}
	19	+
	20	+.justify-center {
	21	+ justify-content: center;
	22	+}
	23	+
	24	+.justify-between {
	25	+ justify-content: space-between;
	26	+}
	27	+
	28	+.justify-end {
	29	+ justify-content: flex-end;
	30	+}
	31	+
	32	+.align-start {
	33	+ align-items: flex-start;
	34	+}
	35	+
	36	+.align-center {
	37	+ align-items: center;
	38	+}
	39	+
	40	+.align-end {
	41	+ align-items: flex-end;
	42	+}
	43	+
	44	+
	45	+
	46	+/* 정렬 배율 */
	47	+
	48	+.flex5 {
	49	+ flex: 0 0 4.5%
	50	+}
	51	+
	52	+.flex10 {
	53	+ flex: 0 0 9.5%
	54	+}
	55	+
	56	+.flex15 {
	57	+ flex: 0 0 14.5%
	58	+}
	59	+
	60	+.flex20 {
	61	+ flex: 0 0 19.5%
	62	+}
	63	+
	64	+.flex25 {
	65	+ flex: 0 0 24.5%
	66	+}
	67	+
	68	+.flex30 {
	69	+ flex: 0 0 29.5%
	70	+}
	71	+
	72	+
	73	+.flex40 {
	74	+ flex: 0 0 39.5%
	75	+}
	76	+
	77	+.flex50 {
	78	+ flex: 0 0 49.5%
	79	+}
	80	+
	81	+
	82	+.flex60 {
	83	+ flex: 0 0 59.5%
	84	+}
	85	+
	86	+
	87	+.flex70 {
	88	+ flex: 0 0 69.5%
	89	+}
	90	+
	91	+.flex80 {
	92	+ flex: 0 0 79.5%
	93	+}
	94	+
	95	+
	96	+.flex90 {
	97	+ flex: 0 0 89.5%
	98	+}
	99	+
	100	+
	101	+
	102	+/* btn */
	103	+.small-btn {
	104	+ padding: 5px 10px;
	105	+ border-radius: 5px;
	106	+}
	107	+
	108	+.large-btn {
	109	+ width: 100%;
	110	+ padding: 5px 15px;
	111	+ border-radius: 5px;
	112	+}
	113	+
	114	+.icon-btn{
	115	+ padding: 5px;
	116	+ border-radius: 50%;
	117	+}
	118	+
	119	+.logout-btn {
	120	+ padding: 5px 10px;
	121	+ color: #aaa;
	122	+ position: relative;
	123	+}
	124	+
	125	+.logout-btn::before {
	126	+ content: "";
	127	+ width: 1px;
	128	+ height: 10px;
	129	+ position: absolute;
	130	+ top: 50%;
	131	+ left: 0;
	132	+ transform: translateY(-50%);
	133	+ background-color: #aaa;
	134	+}
	135	+
	136	+.blue-btn,
	137	+.blue-border-btn:hover {
	138	+ background-color: #213f99;
	139	+ color: #fff;
	140	+ transition: all 0.3s ease-in-out;
	141	+}
	142	+
	143	+.red-btn,
	144	+.red-border-btn:hover {
	145	+ background-color: #ff5d5d;
	146	+ color: #fff;
	147	+ transition: all 0.3s ease-in-out;
	148	+}
	149	+
	150	+.green-btn,
	151	+.green-border-btn:hover {
	152	+ background-color: #13833b;
	153	+ color: #fff;
	154	+ transition: all 0.3s ease-in-out;
	155	+}
	156	+
	157	+.orange-btn,
	158	+.orange-border-btn:hover {
	159	+ background-color: #f29600;
	160	+ color: #fff;
	161	+ transition: all 0.3s ease-in-out;
	162	+}
	163	+
	164	+.darkg-btn,
	165	+.darkg-border-btn:hover {
	166	+ background-color: #434343;
	167	+ color: #fff;
	168	+ transition: all 0.3s ease-in-out;
	169	+}
	170	+
	171	+.gray-btn,
	172	+.gray-border-btn:hover {
	173	+ background-color: #eee;
	174	+ color: #333;
	175	+ transition: all 0.3s ease-in-out;
	176	+}
	177	+
	178	+
	179	+.blue-border-btn {
	180	+ border: 1px solid #213f99;
	181	+ color: #213f99;
	182	+ background-color: #fff;
	183	+}
	184	+
	185	+.red-border-btn {
	186	+ border: 1px solid #ff5d5d;
	187	+ color: #ff5d5d;
	188	+ background-color: #fff;
	189	+}
	190	+
	191	+.green-border-btn {
	192	+ border: 1px solid #13833b;
	193	+ color: #13833b;
	194	+ background-color: #fff;
	195	+}
	196	+
	197	+.orange-border-btn {
	198	+ border: 1px solid #f29600;
	199	+ color: #f29600;
	200	+ background-color: #fff;
	201	+}
	202	+
	203	+.darkg-border-btn {
	204	+ border: 1px solid #434343;
	205	+ color: #434343;
	206	+ background-color: #fff;
	207	+}
	208	+
	209	+.gray-border-btn {
	210	+ border: 1px solid #aaa;
	211	+ color: #aaa;
	212	+ background-color: #fff;
	213	+}
	214	+
	215	+.tp-btn{
	216	+ background-color: transparent;
	217	+ width: 15px;
	218	+ height: 15px;
	219	+ margin-left: 10px;
	220	+}
	221	+
	222	+
	223	+
	224	+
	225	+/* text 정렬 */
	226	+.text-lf {
	227	+ text-align: left;
	228	+}
	229	+
	230	+.text-ct {
	231	+ text-align: center;
	232	+}
	233	+
	234	+.text-rg {
	235	+ text-align: right;
	236	+}(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/resources/css/font.css (added)

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

...	...	@@ -0,0 +1,27 @@
	1	+@font-face {
	2	+ font-family: 'Pretendard';
	3	+ src: url('../font/PretendardVariable.woff2') format('woff');
	4	+ font-weight: 400;
	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;
	27	+}(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/resources/css/layout.css (added)

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

...	...	@@ -0,0 +1,220 @@
	1	+@charset "utf-8";
	2	+
	3	+.dashboard-wrap {
	4	+ width: 100%;
	5	+ height: 100%;
	6	+ display: grid;
	7	+ grid-template-columns: 270px minmax(auto, 1fr);
	8	+ grid-template-rows: auto 1fr;
	9	+ grid-template-areas:
	10	+ "header header "
	11	+ "nav main "
	12	+ "nav main "
	13	+}
	14	+
	15	+.layout-wrap{
	16	+ width: 100%;
	17	+ min-height: 100%;
	18	+ display: flex;
	19	+ flex-direction: column;
	20	+}
	21	+
	22	+header {
	23	+ background-color: #fff;
	24	+ padding: 15px 30px;
	25	+ grid-area: header;
	26	+ position: relative;
	27	+}
	28	+
	29	+.logo {
	30	+ width: 200px;
	31	+}
	32	+
	33	+.logo>a {
	34	+ display: block;
	35	+ width: 100%;
	36	+}
	37	+
	38	+.logo>a>img {
	39	+ display: block;
	40	+ width: 100%;
	41	+}
	42	+
	43	+
	44	+.user-name {
	45	+ font-size: 1.4rem;
	46	+ margin-left: 5px;
	47	+}
	48	+
	49	+.sms,
	50	+.user {
	51	+ margin-left: 10px;
	52	+}
	53	+
	54	+
	55	+/* 메뉴 공통 */
	56	+nav {
	57	+ background-color: #213f99;
	58	+ position: relative;
	59	+}
	60	+
	61	+nav ul li a,
	62	+nav ul li p {
	63	+ padding: 5px;
	64	+ display: block;
	65	+ color: #fff;
	66	+}
	67	+
	68	+nav.side-menu ul.sub-menu,
	69	+nav.top-menu ul.sub-menu {
	70	+ font-size: 1.4rem;
	71	+ overflow: hidden;
	72	+ transition: all 0.5s ease-in-out;
	73	+}
	74	+
	75	+ul.sub-menu>li {
	76	+ padding: 10px 20px;
	77	+
	78	+}
	79	+
	80	+p.active {
	81	+ background-color: #fff;
	82	+ color: #213f99;
	83	+ border-radius: 50px
	84	+}
	85	+
	86	+/* 사이드 메뉴 */
	87	+nav.side-menu {
	88	+ width: 100%;
	89	+ height: 100%;
	90	+ border-radius: 0 70px 70px 0;
	91	+ grid-area: nav;
	92	+ overflow-y: auto;
	93	+}
	94	+
	95	+nav.side-menu::-webkit-scrollbar {
	96	+ display: none;
	97	+}
	98	+
	99	+nav.side-menu::-ms-scrollbar {
	100	+ display: none;
	101	+}
	102	+
	103	+
	104	+nav.side-menu>ul.main-menu {
	105	+ padding: 50px 30px;
	106	+}
	107	+
	108	+nav.side-menu>ul.main-menu>li>div>a,
	109	+nav>ul>li {
	110	+ padding: 10px 0;
	111	+ font-size: 1.4rem;
	112	+ font-weight: bold;
	113	+}
	114	+
	115	+
	116	+
	117	+/* 상단 메뉴 */
	118	+.top-menu>ul.main-menu {
	119	+ display: flex;
	120	+ justify-content: center;
	121	+}
	122	+
	123	+.depth1{
	124	+ cursor: default;
	125	+}
	126	+
	127	+.top-menu>ul>li {
	128	+ min-width: 161px;
	129	+ text-align: center;
	130	+ position: relative;
	131	+}
	132	+
	133	+.top-menu ul.sub-menu {
	134	+ position: absolute;
	135	+ width: 100%;
	136	+ background-color: #fff;
	137	+ z-index: 10000;
	138	+ bottom: 0;
	139	+ left: 0;
	140	+ transform: translateY(100%);
	141	+}
	142	+
	143	+.top-menu ul.sub-menu li a {
	144	+ text-align: center;
	145	+ color: #213f99;
	146	+}
	147	+
	148	+.navbg {
	149	+ overflow: hidden;
	150	+ background-color: #fff;
	151	+ border-bottom: 2px solid #213f99;
	152	+ position: absolute;
	153	+ bottom: 0;
	154	+ left: 0;
	155	+ transform: translateY(100%);
	156	+ width: 100%;
	157	+ z-index: 9999;
	158	+}
	159	+
	160	+.top-menu ul.sub-menu.hide,
	161	+.navbg.hide {
	162	+ animation: slideUp 0.5s forwards;
	163	+}
	164	+
	165	+.top-menu ul.sub-menu.show {
	166	+ animation: slideDown 0.8s forwards;
	167	+}
	168	+
	169	+.navbg.show {
	170	+ animation: bgSlideDown 0.5s forwards;
	171	+}
	172	+
	173	+/* 메인 */
	174	+.main {
	175	+ padding: 20px;
	176	+ height: 100%;
	177	+ grid-area: main;
	178	+}
	179	+
	180	+.layout-wrap .main {
	181	+ display: flex;
	182	+ padding: 20px;
	183	+ flex-grow: 1;
	184	+ /* overflow: auto; */
	185	+ grid-area: main;
	186	+}
	187	+
	188	+
	189	+
	190	+
	191	+
	192	+@keyframes slideDown {
	193	+ 0% {
	194	+ height: 0;
	195	+ }
	196	+
	197	+ 100% {
	198	+ height: auto;
	199	+ }
	200	+}
	201	+
	202	+@keyframes slideUp {
	203	+ 0% {
	204	+ height: auto;
	205	+ }
	206	+
	207	+ 100% {
	208	+ height: 0;
	209	+ }
	210	+}
	211	+
	212	+@keyframes bgSlideDown {
	213	+ 0% {
	214	+ height: 0;
	215	+ }
	216	+
	217	+ 100% {
	218	+ height: 240px;
	219	+ }
	220	+}(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/resources/css/reset.css (added)

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

...	...	@@ -0,0 +1,131 @@
	1	+@charset "utf-8";
	2	+
	3	+* {
	4	+ padding: 0;
	5	+ margin: 0;
	6	+ box-sizing: border-box;
	7	+}
	8	+
	9	+html,
	10	+body,
	11	+#root {
	12	+ width: 100%;
	13	+ height: 100%;
	14	+ min-height: 100vh;
	15	+ font-size: 10px;
	16	+ color: #333;
	17	+ font-family: 'Pretendard';
	18	+}
	19	+
	20	+body {
	21	+ min-width: 1356px;
	22	+ background-color: #f7f6fb;
	23	+}
	24	+
	25	+
	26	+a {
	27	+ color: #333;
	28	+ text-decoration: none;
	29	+}
	30	+
	31	+ol,
	32	+ul,
	33	+li {
	34	+ list-style: none;
	35	+}
	36	+
	37	+img,
	38	+svg {
	39	+ width: 100%;
	40	+ vertical-align: middle;
	41	+}
	42	+
	43	+table {
	44	+ width: 100%;
	45	+ border-collapse: collapse;
	46	+ table-layout: fixed;
	47	+ margin: 15px 0;
	48	+}
	49	+
	50	+table th,
	51	+table td {
	52	+ padding: 8px;
	53	+ font-size: 1.4rem;
	54	+}
	55	+
	56	+button {
	57	+ border: none;
	58	+ background-color: transparent;
	59	+ font-size: 1.4rem;
	60	+ margin-left: 10px;
	61	+ cursor: pointer;
	62	+}
	63	+
	64	+label {
	65	+ font-size: 1.4rem;
	66	+ margin-left: 5px;
	67	+}
	68	+
	69	+select,
	70	+input {
	71	+ min-width: 100px;
	72	+ width: 100%;
	73	+ padding: 5px 10px;
	74	+ border: 1px solid #eee;
	75	+ border-radius: 5px;
	76	+ margin-left: 5px;
	77	+}
	78	+
	79	+input[type="text"] {
	80	+ min-width: 300px;
	81	+}
	82	+
	83	+input:focus {
	84	+ outline: none;
	85	+}
	86	+
	87	+input[type="checkbox"],
	88	+input[type="radio"] {
	89	+ vertical-align: sub;
	90	+}
	91	+
	92	+input[type='date'] {
	93	+ max-width: 240px;
	94	+ padding: 5px;
	95	+}
	96	+
	97	+input[type='date']::before {
	98	+ content: attr(data-placeholder);
	99	+ width: 100%;
	100	+ color: #ddd;
	101	+}
	102	+
	103	+button:first-child,
	104	+select:first-child,
	105	+input:first-child {
	106	+ margin-left: 0;
	107	+}
	108	+
	109	+
	110	+/* 스크롤바 디자인 */
	111	+::-webkit-scrollbar {
	112	+ width: 8px;
	113	+ height: 8px;
	114	+}
	115	+
	116	+::-webkit-scrollbar-thumb {
	117	+ background-color: #ededed;
	118	+ border-radius: 10px;
	119	+}
	120	+
	121	+::-webkit-scrollbar-track {
	122	+ background-color: #fff;
	123	+ border-radius: 10px;
	124	+}
	125	+
	126	+
	127	+@media screen and (min-width:1356px) and (max-width: 1536px) {
	128	+ html{
	129	+ font-size: 9px;
	130	+ }
	131	+}(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/resources/css/style.css (added)

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

...	...	@@ -0,0 +1,194 @@
	1	+@charset "utf-8";
	2	+
	3	+/* box 공통 */
	4	+.container {
	5	+ width: 100%;
	6	+ display: flex;
	7	+ flex-direction: column;
	8	+ flex-grow: 1;
	9	+}
	10	+
	11	+.content-box {
	12	+ width: 100%;
	13	+ height: 100%;
	14	+}
	15	+
	16	+.left-content,
	17	+.right-content {
	18	+ height: 100%;
	19	+}
	20	+
	21	+.content {
	22	+ width: 100%;
	23	+ height: 100%;
	24	+ margin-bottom: 30px;
	25	+}
	26	+
	27	+.content:last-child {
	28	+ margin-bottom: 0;
	29	+}
	30	+
	31	+.left-content,
	32	+.right-content,
	33	+.top-content,
	34	+.bottom-content,
	35	+.content {
	36	+ padding: 15px;
	37	+ border-radius: 10px;
	38	+ background-color: #fff;
	39	+ position: relative;
	40	+}
	41	+
	42	+.form-box {
	43	+ background-color: #edf0ff;
	44	+ border: 1px solid #dbe3fb;
	45	+}
	46	+
	47	+/* title 공통 */
	48	+.page-titleZone {
	49	+ margin-bottom: 20px;
	50	+}
	51	+
	52	+.main-title {
	53	+ font-family: 'GmarketSansB';
	54	+ font-size: 2rem;
	55	+ color: #213f99;
	56	+}
	57	+
	58	+.content-titleZone {
	59	+ padding-bottom: 10px;
	60	+ border-bottom: 1px solid #aaa;
	61	+ margin-bottom: 15px;
	62	+}
	63	+
	64	+.box-title {
	65	+ font-size: 1.6rem;
	66	+ font-weight: bold;
	67	+}
	68	+
	69	+/* 테이블 공통 */
	70	+.list-table {
	71	+ border-bottom: 1px solid #aaa;
	72	+}
	73	+
	74	+.list-table th,
	75	+.list-table td {
	76	+ text-align: center;
	77	+ border-top: 1px solid #aaa;
	78	+}
	79	+
	80	+.list-table thead tr {
	81	+ background-color: #dbe3fb;
	82	+ color: #213f99;
	83	+}
	84	+
	85	+.list-table tbody tr:nth-child(even) {
	86	+ background-color: #f4f6ff;
	87	+}
	88	+
	89	+.form-table th {
	90	+ color: #213f99;
	91	+ text-align: center;
	92	+}
	93	+
	94	+
	95	+
	96	+.option-table th {
	97	+ text-align: left;
	98	+}
	99	+
	100	+
	101	+/* 서치바 공통 */
	102	+/* .table-zone */
	103	+.searchbar-zone {
	104	+ margin-bottom: 10px;
	105	+}
	106	+
	107	+/* 기본 서치바 */
	108	+.search-square {
	109	+ position: relative;
	110	+ margin-left: 5px;
	111	+}
	112	+
	113	+.square-date,
	114	+.square-select {
	115	+ width: 150px;
	116	+}
	117	+
	118	+.square-input {
	119	+ color: #646464;
	120	+ padding: 6px 10px;
	121	+ border-radius: 5px;
	122	+ width: 300px;
	123	+ transition: all ease-in-out .5s;
	124	+}
	125	+
	126	+.square-input:hover,
	127	+.square-input:focus {
	128	+ box-shadow: 0 0 1em #00000013;
	129	+}
	130	+
	131	+.square-input:focus {
	132	+ outline: none;
	133	+ background-color: #f0eeee;
	134	+}
	135	+
	136	+.square-input::-webkit-input-placeholder {
	137	+ font-weight: 100;
	138	+ color: #ccc;
	139	+}
	140	+
	141	+.square-input:focus {
	142	+ background-color: #f0eeee;
	143	+}
	144	+
	145	+.square-button {
	146	+ border: none;
	147	+ margin-left: 0;
	148	+ position: absolute;
	149	+ right: 5px;
	150	+ top: 50%;
	151	+ transform: translateY(-50%);
	152	+}
	153	+
	154	+.square-button:hover {
	155	+ cursor: pointer;
	156	+}
	157	+
	158	+.square-icon {
	159	+ color: #b4b4b4;
	160	+}
	161	+
	162	+/* 상세 서치바 */
	163	+.search-bottom{
	164	+ padding: 10px 0;
	165	+}
	166	+.option-searchbar {
	167	+ width: 50%;
	168	+ margin: 0 auto;
	169	+ padding: 15px;
	170	+ background-color: #f8f9fe;
	171	+ border-radius: 10px;
	172	+}
	173	+
	174	+/* 기타 공통 */
	175	+.coupler {
	176	+ font-size: 1.4rem;
	177	+ margin-left: 5px;
	178	+}
	179	+
	180	+.option-title {
	181	+ padding: 0 5px;
	182	+ font-size: 1.4rem;
	183	+ color: #213f99;
	184	+ margin-left: 5px;
	185	+}
	186	+
	187	+.count-zone {
	188	+ font-size: 1.4rem;
	189	+}
	190	+
	191	+.count-zone span{
	192	+ font-weight: 900;
	193	+ color: #213f99;
	194	+}(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

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

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

Binary file is not shown

bdc4fdb

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

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

Binary file is not shown

bdc4fdb

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

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

Binary file is not shown

bdc4fdb

client/resources/font/PretendardVariable.woff2 (Binary) (added)

+++ client/resources/font/PretendardVariable.woff2

Binary file is not shown

bdc4fdb

client/resources/img/logo.png (Binary) (added)

+++ client/resources/img/logo.png

Binary file is not shown

bdc4fdb

client/resources/img/logo_w.png (Binary) (added)

+++ client/resources/img/logo_w.png

Binary file is not shown

bdc4fdb

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

bdc4fdb

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

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

...	...	@@ -0,0 +1,53 @@
	1	+<template>
	2	+ <p class="navigate_bar"><router-link to="/">Home</router-link><span> > {{ pathName() }}</span></p>
	3	+</template>
	4	+
	5	+<script>
	6	+import { useRoute } from 'vue-router';
	7	+export default {
	8	+ data() {
	9	+ return {
	10	+ //현재 라우터의 정보
	11	+ route: useRoute(),
	12	+
	13	+ // 페이지 경로 목록
	14	+ pageList: [
	15	+ { path: "/", name: "대시보드", },
	16	+ { path: "/fileManagement.page", name: "파일 관리", },
	17	+ { path: "/hostManagement.page", name: "호스트 관리", },
	18	+ { path: "/scheduleManagement.page", name: "작업 스케줄 관리", },
	19	+ { path: "/scheduleLogManagement.page", name: "로그 관리", },
	20	+ ],
	21	+ }
	22	+ },
	23	+ methods: {
	24	+ pathName: function () {
	25	+ for (let i = 0; i < this.pageList.length; i++) {
	26	+ if (this.route.path == this.pageList[i]['path']) {
	27	+ return this.pageList[i]['name'];
	28	+ }
	29	+ }
	30	+ return "대시보드"
	31	+ },
	32	+
	33	+ },
	34	+ watch: {
	35	+
	36	+ },
	37	+ computed: {
	38	+
	39	+ },
	40	+ components: {
	41	+ },
	42	+ mounted() {
	43	+ console.log('main mounted');
	44	+ }
	45	+}
	46	+</script>
	47	+
	48	+<style scoped>
	49	+.navigate_bar {
	50	+ padding: 10px 0px;
	51	+ font-size: 1.4rem;
	52	+}
	53	+</style>

bdc4fdb

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

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

...	...	@@ -0,0 +1,170 @@
	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	+}
	99	+
	100	+.pagination-button-type {
	101	+ display: flex;
	102	+ align-items: center;
	103	+ justify-content: center;
	104	+}
	105	+
	106	+.pagination-button-type a {
	107	+ display: inline-block;
	108	+ width: 30px;
	109	+ height: 30px;
	110	+ padding: 5px;
	111	+ text-align: center;
	112	+ line-height: 20px;
	113	+ cursor: pointer;
	114	+}
	115	+
	116	+/* 정우추가 */
	117	+.pagination-button-type a.prev:after {
	118	+ content: "\003C";
	119	+ font-family: 'KoPub_Dotum';
	120	+ font-weight: 900;
	121	+}
	122	+
	123	+.pagination-button-type a.next:after {
	124	+ content: "\003E";
	125	+ font-family: 'KoPub_Dotum';
	126	+ font-weight: 900;
	127	+}
	128	+
	129	+.pagination-button-type a.first-page:after {
	130	+ content: "\003C\003C";
	131	+ font-family: 'KoPub_Dotum';
	132	+ font-weight: 900;
	133	+}
	134	+
	135	+.pagination-button-type a.end-page:after {
	136	+ content: "\003E\003E";
	137	+ font-family: 'KoPub_Dotum';
	138	+ font-weight: 900;
	139	+}
	140	+
	141	+.pagination-button-type a.active {
	142	+ background-color: #213f99;
	143	+ color: #fff;
	144	+ cursor: default !important;
	145	+ border-radius: 50px;
	146	+}
	147	+
	148	+.pagination-button-type a:hover:not(.active) {
	149	+ background-color: #213f99;
	150	+ color: #fff;
	151	+ border-radius: 50px;
	152	+}
	153	+
	154	+.pagination-button-type a:first-child {
	155	+ border-top-left-radius: 0px;
	156	+ border-bottom-left-radius: 0px;
	157	+}
	158	+
	159	+.pagination-button-type a:last-child {
	160	+ border-top-right-radius: 0px;
	161	+ border-bottom-right-radius: 0px;
	162	+}
	163	+
	164	+/PAGINATION NEW END/
	165	+
	166	+@media screen and (max-width:479px) {
	167	+ .pagination-button-type a {
	168	+ margin: 3px;
	169	+ }
	170	+}</style>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/index.html (added)

+++ client/views/index.html

...	...	@@ -0,0 +1,22 @@
	1	+<!DOCTYPE html>
	2	+<html>
	3	+ <head>
	4	+ <meta charset="UTF-8">
	5	+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	7	+ <meta name="description" content="Node Vue Web">
	8	+ <link rel="icon" href="" />
	9	+ <link rel="stylesheet" href="client/resources/css/font.css">
	10	+ <link rel="stylesheet" href="client/resources/css/reset.css">
	11	+ <link rel="stylesheet" href="client/resources/css/layout.css">
	12	+ <link rel="stylesheet" href="client/resources/css/common.css">
	13	+ <link rel="stylesheet" href="client/resources/css/style.css">
	14	+
	15	+ <title>TAKEN BI MANAGER</title>
	16	+ </head>
	17	+
	18	+ <body>
	19	+ <div id="root"></div>
	20	+ <script src="/client/build/bundle.js"></script>
	21	+ </body>
	22	+</html>

bdc4fdb

client/views/index.js (added)

+++ client/views/index.js

...	...	@@ -0,0 +1,13 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.10.19
	4	+ * @dscription : Vue를 활용한 Client단 구현의 시작점(Index) Component 입니다.
	5	+ */
	6	+import { createApp } from "vue";
	7	+
	8	+import AppRouter from "./pages/AppRouter.js";
	9	+import App from "./pages/App.vue";
	10	+
	11	+
	12	+
	13	+const vue = createApp(App).use(AppRouter).mount("#root");

bdc4fdb

client/views/layout/Footer.vue (added)

+++ client/views/layout/Footer.vue

...	...	@@ -0,0 +1,24 @@
	1	+<template>
	2	+ <div>Footer.vue</div>
	3	+</template>
	4	+
	5	+<script>
	6	+export default {
	7	+ data () {
	8	+ return {
	9	+ }
	10	+ },
	11	+ methods: {
	12	+
	13	+ },
	14	+ watch: {
	15	+
	16	+ },
	17	+ computed: {
	18	+
	19	+ },
	20	+ mounted() {
	21	+ console.log('Footer mounted');
	22	+ }
	23	+}
	24	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/layout/Header.vue (added)

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

...	...	@@ -0,0 +1,65 @@
	1	+<template>
	2	+ <header>
	3	+ <div :class="className === 'side' ? 'flex-between' : ''">
	4	+ <div class="logo" :style="logoStyle">
	5	+ <a href="/">
	6	+ <img src="../../resources/img/logo.png" alt="BI MANAGER LOGO">
	7	+ </a>
	8	+ </div>
	9	+ <div class="user-info flex justify-end align-center">
	10	+ <div class="sms">
	11	+ <svg-icon type="mdi" :path="mdiEmail" color="#213f99"></svg-icon>
	12	+ </div>
	13	+ <div class="user flex align-center">
	14	+ <div class="user-img">
	15	+ <svg-icon type="mdi" :path="mdiAccountCircle" color="#213f99"></svg-icon>
	16	+ </div>
	17	+ <span class="user-name">000님</span>
	18	+ </div>
	19	+ <button class="logout-btn">로그아웃</button>
	20	+ </div>
	21	+ </div>
	22	+ </header>
	23	+</template>
	24	+
	25	+<script>
	26	+import SvgIcon from '@jamescoyle/vue-icon'
	27	+import { mdiEmail, mdiAccountCircle } from '@mdi/js'
	28	+export default {
	29	+ props: {
	30	+ className: String
	31	+ },
	32	+ data() {
	33	+ return {
	34	+ mdiEmail: mdiEmail,
	35	+ mdiAccountCircle: mdiAccountCircle
	36	+ }
	37	+ },
	38	+ methods: {
	39	+
	40	+ },
	41	+ watch: {
	42	+
	43	+ },
	44	+ computed: {
	45	+ logoStyle() {
	46	+ if (this.className === 'top') {
	47	+ return {
	48	+ position: 'absolute',
	49	+ top:'50%',
	50	+ left:'50%',
	51	+ transform: 'translate(-50%,-50%)'
	52	+ }
	53	+ } else {
	54	+ return {}
	55	+ }
	56	+ }
	57	+ },
	58	+ components: {
	59	+ 'SvgIcon': SvgIcon
	60	+ },
	61	+ mounted() {
	62	+ console.log('Header mounted');
	63	+ }
	64	+}
	65	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/layout/SideMenu.vue (added)

+++ client/views/layout/SideMenu.vue

...	...	@@ -0,0 +1,120 @@
	1	+<template>
	2	+ <nav class="side-menu">
	3	+ <ul class="main-menu">
	4	+ <li v-for="(mainMenu, idx) in menuList" :key="idx" @click="toggleMenu(mainMenu)">
	5	+ <div class="flex-between">
	6	+ <p>{{ mainMenu.pathName }}</p>
	7	+ <svg-icon v-if="mainMenu.subMenu" type="mdi" :path="mainMenu.path" color="#fff"></svg-icon>
	8	+ </div>
	9	+ <ul v-if="mainMenu.subMenu" class="sub-menu" :style="{ 'max-height': mainMenu.isOpen ? '360px' : '0' }">
	10	+ <li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx">
	11	+ <router-link :to="subMenu.subPath">{{ subMenu.pathName }}</router-link>
	12	+ </li>
	13	+ </ul>
	14	+ </li>
	15	+ </ul>
	16	+ </nav>
	17	+</template>
	18	+
	19	+<script>
	20	+import SvgIcon from '@jamescoyle/vue-icon';
	21	+import { mdiMenuUp, mdiMenuDown } from '@mdi/js';
	22	+export default {
	23	+ data() {
	24	+ return {
	25	+ menuList: [
	26	+ // { path: "/", pathName: "Dashboard", },
	27	+ {
	28	+ mainPath: "/", pathName: "데이터관리",
	29	+ subMenu: [
	30	+ { subPath: "/fileManagement.page", pathName: "파일관리" },
	31	+ { subPath: "/hostManagement.page", pathName: "호스트관리" },
	32	+ { subPath: "/", pathName: "데이터셋 목록" },
	33	+ { subPath: "/", pathName: "데이터 공유 관리" },
	34	+ ],
	35	+ isOpen: false,
	36	+ path: mdiMenuUp,
	37	+ },
	38	+ {
	39	+ mainPath: "/", pathName: "메타관리",
	40	+ subMenu: [
	41	+ { subPath: "/", pathName: "데이터 메타 정보" },
	42	+ { subPath: "/", pathName: "표준 용어 관리" },
	43	+ ],
	44	+ isOpen: false,
	45	+ path: mdiMenuUp,
	46	+ },
	47	+ {
	48	+ mainPath: "/", pathName: "작업관리",
	49	+ subMenu: [
	50	+ { subPath: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
	51	+ { subPath: "/scheduleLogManagement.page", pathName: "로그 관리" },
	52	+ ],
	53	+ isOpen: false,
	54	+ path: mdiMenuUp,
	55	+ },
	56	+ {
	57	+ mainPath: "/", pathName: "데이터활용",
	58	+ subMenu: [
	59	+ { subPath: "/", pathName: "데이터 활용 관리" },
	60	+ { subPath: "/", pathName: "데이터 활용 공유 관리" },
	61	+ { subPath: "/", pathName: "GIS데이터 관리" },
	62	+ { subPath: "/", pathName: "데이터현황 관리" },
	63	+ { subPath: "/", pathName: "OpenAPI 목록" },
	64	+ ],
	65	+ isOpen: false,
	66	+ path: mdiMenuUp,
	67	+ },
	68	+ {
	69	+ mainPath: "/", pathName: "통합관리",
	70	+ subMenu: [
	71	+ { subPath: "/", pathName: "사용자관리" },
	72	+ { subPath: "/", pathName: "부서관리" },
	73	+ { subPath: "/", pathName: "연계정보관리" },
	74	+ ],
	75	+ isOpen: false,
	76	+ path: mdiMenuUp,
	77	+ },
	78	+ {
	79	+ mainPath: "/", pathName: "정보관리",
	80	+ subMenu: [
	81	+ { subPath: "/", pathName: "내정보관리" },
	82	+ { subPath: "/", pathName: "비밀번호 변경" },
	83	+ { subPath: "/", pathName: "부서메일" },
	84	+ ],
	85	+ isOpen: false,
	86	+ path: mdiMenuUp,
	87	+ },
	88	+ { mainPath: "/", pathName: "ai solution", path: mdiMenuUp, },
	89	+ ],
	90	+
	91	+ }
	92	+ },
	93	+ methods: {
	94	+ toggleMenu: function (menu) {
	95	+ this.menuList.forEach(item => {
	96	+ if (item === menu) {
	97	+ item.isOpen = !menu.isOpen;
	98	+ item.path = item.isOpen ? mdiMenuDown : mdiMenuUp
	99	+
	100	+ } else{
	101	+ item.isOpen = false;
	102	+ item.path = mdiMenuUp;
	103	+ }
	104	+ });
	105	+ },
	106	+ },
	107	+ watch: {
	108	+
	109	+ },
	110	+ computed: {
	111	+
	112	+ },
	113	+ components: {
	114	+ 'SvgIcon': SvgIcon
	115	+ },
	116	+ mounted() {
	117	+ console.log('Menu mounted');
	118	+ }
	119	+}
	120	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/layout/TopMenu.vue (added)

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

...	...	@@ -0,0 +1,138 @@
	1	+<template>
	2	+ <nav class="top-menu">
	3	+ <ul class="main-menu">
	4	+ <li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
	5	+ <p class="depth1" :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
	6	+ <ul v-if="mainMenu.subMenu" class="sub-menu" v-show="showSubmenu"
	7	+ :class="{ show: showSubmenu, hide: !showSubmenu }">
	8	+ <li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx" :class="{ active: isSubMenuActive(subMenu) }">
	9	+ <router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
	10	+ </li>
	11	+ </ul>
	12	+ </li>
	13	+ </ul>
	14	+ <div class="navbg" v-show="showSubmenu" :class="{ show: showSubmenu, hide: !showSubmenu }"></div>
	15	+ </nav>
	16	+</template>
	17	+
	18	+<script>
	19	+
	20	+export default {
	21	+ data() {
	22	+ return {
	23	+ menuList: [
	24	+ // { path: "/", pathName: "Dashboard", },
	25	+ {
	26	+ pathName: "데이터관리",
	27	+ subMenu: [
	28	+ { path: "/fileManagement.page", pathName: "파일관리" },
	29	+ { path: "/hostManagement.page", pathName: "호스트관리" },
	30	+ { path: "/", pathName: "데이터셋 목록" },
	31	+ { path: "/", pathName: "데이터 공유 관리" },
	32	+ ],
	33	+ },
	34	+ {
	35	+ pathName: "메타관리",
	36	+ subMenu: [
	37	+ { path: "/", pathName: "데이터 메타 정보" },
	38	+ { path: "/", pathName: "표준 용어 관리" },
	39	+ ],
	40	+ },
	41	+ {
	42	+ pathName: "작업관리",
	43	+ subMenu: [
	44	+ { path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
	45	+ { path: "/scheduleLogManagement.page", pathName: "로그 관리" },
	46	+ ],
	47	+ },
	48	+ {
	49	+ pathName: "데이터활용",
	50	+ subMenu: [
	51	+ { path: "/", pathName: "데이터 활용 관리" },
	52	+ { path: "/", pathName: "데이터 활용 공유 관리" },
	53	+ { path: "/", pathName: "GIS데이터 관리" },
	54	+ { path: "/", pathName: "데이터현황 관리" },
	55	+ { path: "/", pathName: "OpenAPI 목록" },
	56	+ ],
	57	+ },
	58	+ {
	59	+ pathName: "통합관리",
	60	+ subMenu: [
	61	+ { path: "/", pathName: "사용자관리" },
	62	+ { path: "/", pathName: "부서관리" },
	63	+ { path: "/", pathName: "연계정보관리" },
	64	+ ],
	65	+ },
	66	+ {
	67	+ pathName: "정보관리",
	68	+ subMenu: [
	69	+ { path: "/", pathName: "내정보관리" },
	70	+ { path: "/", pathName: "비밀번호 변경" },
	71	+ { path: "/", pathName: "부서메일" },
	72	+ ],
	73	+ },
	74	+ {
	75	+ pathName: "ai solution",
	76	+ subMenu: [
	77	+ { path: "/", pathName: "ai solution" },
	78	+
	79	+ ],
	80	+ },
	81	+ // {
	82	+ // pathName: "템플릿",
	83	+ // subMenu: [
	84	+ // { path: "/searchbar.page", pathName: "서치바" },
	85	+ // { path: "/table.page", pathName: "테이블" },
	86	+ // { path: "/btnPosition.page", pathName: "버튼별 위치" },
	87	+ // ],
	88	+ // },
	89	+ // {
	90	+ // pathName: "레이아웃 템플릿",
	91	+ // subMenu: [
	92	+ // { path: "/vertical.page", pathName: "수직 레이아웃" },
	93	+ // { path: "/horizontal.page", pathName: "수평 레이아웃" },
	94	+ // ],
	95	+ // },
	96	+ ],
	97	+ currentRoute: null,
	98	+ showSubmenu: false
	99	+ }
	100	+ },
	101	+ methods: {
	102	+ showAllSubMenus() {
	103	+ this.showSubmenu = true;
	104	+ },
	105	+ hideAllSubMenus() {
	106	+ this.showSubmenu = false;
	107	+ },
	108	+
	109	+ isMainMenuActive(mainMenu) {
	110	+ return this.currentRoute && (this.currentRoute.path === mainMenu.path \|\| this.isSubMenuActive(mainMenu.subMenu));
	111	+ },
	112	+
	113	+ isSubMenuActive(subMenu) {
	114	+ if (!subMenu) return false;
	115	+ for (let i = 0; i < subMenu.length; i++) {
	116	+ if (this.currentRoute.path === subMenu[i].path) {
	117	+ return true;
	118	+ }
	119	+ }
	120	+ return false;
	121	+ },
	122	+ },
	123	+ watch: {
	124	+ $route(to, from) {
	125	+ this.currentRoute = to;
	126	+ },
	127	+ },
	128	+ computed: {
	129	+
	130	+ },
	131	+ components: {
	132	+
	133	+ },
	134	+ mounted() {
	135	+ console.log('Menu mounted');
	136	+ }
	137	+}
	138	+</script>

bdc4fdb

client/views/pages/App.vue (added)

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

...	...	@@ -0,0 +1,57 @@
	1	+<template>
	2	+ <div v-cloak :class="layoutType === 'side' ? 'dashboard-wrap' : 'layout-wrap'">
	3	+ <Header :className="layoutType" />
	4	+ <SideMenu v-if="layoutType === 'side'" />
	5	+ <TopMenu v-else />
	6	+ <div class="main">
	7	+ <PageNavigation v-if="layoutType === 'side'" />
	8	+ <router-view />
	9	+ </div>
	10	+ </div>
	11	+</template>
	12	+
	13	+<script>
	14	+import Header from '../layout/Header.vue';
	15	+import SideMenu from '../layout/SideMenu.vue';
	16	+import TopMenu from '../layout/TopMenu.vue';
	17	+import PageNavigation from '../component/PageNavigation.vue';
	18	+const App = {
	19	+ data: () => {
	20	+ return {
	21	+ // side혹은 top 둘중 한개 타입
	22	+ layoutType: "top",
	23	+ }
	24	+ },
	25	+ methods: {
	26	+
	27	+ },
	28	+ watch: {
	29	+
	30	+ },
	31	+ computed: {
	32	+
	33	+ },
	34	+ components: {
	35	+ 'Header': Header,
	36	+ 'SideMenu': SideMenu,
	37	+ 'TopMenu': TopMenu,
	38	+ 'PageNavigation': PageNavigation,
	39	+ },
	40	+ mounted: () => {
	41	+ console.log('Vue mounted');
	42	+ }
	43	+}
	44	+
	45	+export default App;
	46	+</script>
	47	+
	48	+<style scoped>
	49	+[v-cloak] {
	50	+ display: none;
	51	+}
	52	+
	53	+.main-warp {
	54	+ border: 1px solid #000;
	55	+ margin: 20px 0px;
	56	+}
	57	+</style>

bdc4fdb

client/views/pages/AppRouter.js (added)

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

...	...	@@ -0,0 +1,42 @@
	1	+import { createWebHistory, createRouter } from "vue-router";
	2	+
	3	+import Main from "../pages/main/Main.vue";
	4	+import FileManagement from "../pages/file/FileManagement.vue";
	5	+import HostManagement from "../pages/file/HostManagement.vue";
	6	+import ScheduleManagement from "../pages/schedule/ScheduleManagement.vue";
	7	+import ScheduleLogManagement from "../pages/schedule/ScheduleLogManagement.vue";
	8	+import Login from "../pages/login/Login.vue";
	9	+
	10	+// 템플릿
	11	+import Searchbar from "../template/templateElement/Searchbar.vue";
	12	+import Table from "../template/templateElement/Table.vue";
	13	+import BtnPosition from "../template/templateElement/BtnPosition.vue";
	14	+import Horizontal from "../template/layoutTemplate/Horizontal.vue";
	15	+import Vertical from "../template/layoutTemplate/Vertical.vue";
	16	+import Guide from "../template/guide/TemplateGuide.vue";
	17	+
	18	+const routes = [
	19	+ /* 메인화면 */
	20	+ // { path: "/", name: "Main", component: Main },
	21	+ {path: "/fileManagement.page",name: "FileManagement",component: FileManagement},
	22	+ {path: "/hostManagement.page",name: "HostManagement",component: HostManagement},
	23	+ {path: "/scheduleManagement.page",name: "ScheduleManagement",component: ScheduleManagement,},
	24	+ {path: "/scheduleLogManagement.page",name: "ScheduleLogManagement",component: ScheduleLogManagement,},
	25	+ {path: "/login.page",name: "Login",component: Login,},
	26	+
	27	+
	28	+ // 템플릿 화면
	29	+ {path: "/searchbar.page",name: "Searchbar",component: Searchbar,},
	30	+ {path: "/table.page",name: "Table",component: Table,},
	31	+ {path: "/btnPosition.page",name: "BtnPosition",component: BtnPosition,},
	32	+ {path: "/horizontal.page",name: "Horizontal",component: Horizontal,},
	33	+ {path: "/vertical.page",name: "Vertical",component: Vertical,},
	34	+ {path: "/guide.page",name: "Guide",component: Guide,},
	35	+];
	36	+
	37	+const AppRouter = createRouter({
	38	+ history: createWebHistory(),
	39	+ routes,
	40	+});
	41	+
	42	+export default AppRouter;

bdc4fdb

client/views/pages/file/FileManagement.vue (added)

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

...	...	@@ -0,0 +1,30 @@
	1	+<template>
	2	+ <div class="container vertical">
	3	+ <div class="left-content"></div>
	4	+ <div class="right-content"></div>
	5	+ </div>
	6	+</template>
	7	+
	8	+<script>
	9	+
	10	+export default {
	11	+ data() {
	12	+ return {
	13	+ }
	14	+ },
	15	+ methods: {
	16	+
	17	+ },
	18	+ watch: {
	19	+
	20	+ },
	21	+ computed: {
	22	+
	23	+ },
	24	+ components: {
	25	+ },
	26	+ mounted() {
	27	+ console.log('main mounted');
	28	+ }
	29	+}
	30	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/pages/file/HostManagement.vue (added)

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

...	...	@@ -0,0 +1,30 @@
	1	+<template>
	2	+ <div class="container horizontal">
	3	+ <div class="top-content"></div>
	4	+ <div class="bottom-content"></div>
	5	+ </div>
	6	+</template>
	7	+
	8	+<script>
	9	+
	10	+export default {
	11	+ data() {
	12	+ return {
	13	+ }
	14	+ },
	15	+ methods: {
	16	+
	17	+ },
	18	+ watch: {
	19	+
	20	+ },
	21	+ computed: {
	22	+
	23	+ },
	24	+ components: {
	25	+ },
	26	+ mounted() {
	27	+ console.log('main mounted');
	28	+ }
	29	+}
	30	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/pages/login/Login.vue (added)

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

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

bdc4fdb

client/views/pages/main/Main.vue (added)

+++ client/views/pages/main/Main.vue

...	...	@@ -0,0 +1,27 @@
	1	+<template>
	2	+ <div>Main.vue</div>
	3	+</template>
	4	+
	5	+<script>
	6	+
	7	+export default {
	8	+ data () {
	9	+ return {
	10	+ }
	11	+ },
	12	+ methods: {
	13	+
	14	+ },
	15	+ watch: {
	16	+
	17	+ },
	18	+ computed: {
	19	+
	20	+ },
	21	+ components: {
	22	+ },
	23	+ mounted() {
	24	+ console.log('main mounted');
	25	+ }
	26	+}
	27	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/pages/schedule/ScheduleLogManagement.vue (added)

+++ client/views/pages/schedule/ScheduleLogManagement.vue

...	...	@@ -0,0 +1,29 @@
	1	+<template>
	2	+ <div class="container horizontal">
	3	+ <div class="content"></div>
	4	+ </div>
	5	+</template>
	6	+
	7	+<script>
	8	+
	9	+export default {
	10	+ data() {
	11	+ return {
	12	+ }
	13	+ },
	14	+ methods: {
	15	+
	16	+ },
	17	+ watch: {
	18	+
	19	+ },
	20	+ computed: {
	21	+
	22	+ },
	23	+ components: {
	24	+ },
	25	+ mounted() {
	26	+ console.log('main mounted');
	27	+ }
	28	+}
	29	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/pages/schedule/ScheduleManagement.vue (added)

+++ client/views/pages/schedule/ScheduleManagement.vue

...	...	@@ -0,0 +1,30 @@
	1	+<template>
	2	+ <div class="container horizontal">
	3	+ <div class="top-content"></div>
	4	+ <div class="bottom-content"></div>
	5	+ </div>
	6	+</template>
	7	+
	8	+<script>
	9	+
	10	+export default {
	11	+ data() {
	12	+ return {
	13	+ }
	14	+ },
	15	+ methods: {
	16	+
	17	+ },
	18	+ watch: {
	19	+
	20	+ },
	21	+ computed: {
	22	+
	23	+ },
	24	+ components: {
	25	+ },
	26	+ mounted() {
	27	+ console.log('main mounted');
	28	+ }
	29	+}
	30	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

client/views/template/guide/TemplateGuide.vue (added)

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

...	...	@@ -0,0 +1,49 @@
	1	+<template>
	2	+ <div>
	3	+ <div class="content">
	4	+ <div class="content-titleZone">
	5	+ <p class="box-title">레이아웃</p>
	6	+ <p>레이아웃은 2가지 형태로 나뉘며 좌우 아님 상하로 나뉘어짐</p>
	7	+ </div>
	8	+ <table class="option-table">
	9	+ <colgroup>
	10	+ <col>
	11	+ </colgroup>
	12	+ <tbody>
	13	+ <tr>
	14	+ <th>상하(수평레이아웃)</th>
	15	+ <td></td>
	16	+ </tr>
	17	+ <tr>
	18	+ <th>좌우(수직레이아웃)</th>
	19	+ <td></td>
	20	+ </tr>
	21	+ </tbody>
	22	+ </table>
	23	+ </div>
	24	+ </div>
	25	+</template>
	26	+
	27	+<script>
	28	+
	29	+export default {
	30	+ data() {
	31	+ return {
	32	+ }
	33	+ },
	34	+ methods: {
	35	+
	36	+ },
	37	+ watch: {
	38	+
	39	+ },
	40	+ computed: {
	41	+
	42	+ },
	43	+ components: {
	44	+ },
	45	+ mounted() {
	46	+ console.log('main mounted');
	47	+ }
	48	+}
	49	+</script>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

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

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

...	...	@@ -0,0 +1,228 @@
	1	+<template>
	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="top-content">
	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="bottom-content 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>
	193	+ </div>
	194	+</template>
	195	+
	196	+<script>
	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';
	201	+export default {
	202	+ data() {
	203	+ return {
	204	+ searchPath: mdiMagnify,
	205	+ inputValue: null
	206	+ }
	207	+ },
	208	+ methods: {
	209	+
	210	+ },
	211	+ watch: {
	212	+
	213	+ },
	214	+ computed: {
	215	+
	216	+ },
	217	+ components: {
	218	+ 'PageNavigation': PageNavigation,
	219	+ 'PaginationButton': PaginationButton,
	220	+ 'SvgIcon': SvgIcon
	221	+ },
	222	+ mounted() {
	223	+ console.log('main mounted');
	224	+ }
	225	+}
	226	+</script>
	227	+
	228	+<style scoped></style>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

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

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

...	...	@@ -0,0 +1,165 @@
	1	+<template>
	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="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	+
	15	+ </div>
	16	+ </div>
	17	+ <div class="right-content flex80">
	18	+ <div class="searchbar-zone">
	19	+ <div class="flex justify-end align-center">
	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="flex-column">
	35	+ <div class="table-zone">
	36	+ <table class="list-table">
	37	+ <colgroup>
	38	+ <col style="width: ;">
	39	+ <col style="width: ;">
	40	+ <col style="width: ;">
	41	+ <col style="width: ;">
	42	+ </colgroup>
	43	+ <thead>
	44	+ <tr>
	45	+ <th>No</th>
	46	+ <th>user ID</th>
	47	+ <th>이름</th>
	48	+ <th>생년월일</th>
	49	+ <th>성별</th>
	50	+ </tr>
	51	+ </thead>
	52	+ <tbody>
	53	+ <tr>
	54	+ <td>1</td>
	55	+ <td>test123</td>
	56	+ <td>홍길동</td>
	57	+ <td>1999.01.01</td>
	58	+ <td>여</td>
	59	+ </tr>
	60	+ <tr>
	61	+ <td>1</td>
	62	+ <td>test123</td>
	63	+ <td>홍길동</td>
	64	+ <td>1999.01.01</td>
	65	+ <td>여</td>
	66	+ </tr> <tr>
	67	+ <td>1</td>
	68	+ <td>test123</td>
	69	+ <td>홍길동</td>
	70	+ <td>1999.01.01</td>
	71	+ <td>여</td>
	72	+ </tr> <tr>
	73	+ <td>1</td>
	74	+ <td>test123</td>
	75	+ <td>홍길동</td>
	76	+ <td>1999.01.01</td>
	77	+ <td>여</td>
	78	+ </tr> <tr>
	79	+ <td>1</td>
	80	+ <td>test123</td>
	81	+ <td>홍길동</td>
	82	+ <td>1999.01.01</td>
	83	+ <td>여</td>
	84	+ </tr> <tr>
	85	+ <td>1</td>
	86	+ <td>test123</td>
	87	+ <td>홍길동</td>
	88	+ <td>1999.01.01</td>
	89	+ <td>여</td>
	90	+ </tr> <tr>
	91	+ <td>1</td>
	92	+ <td>test123</td>
	93	+ <td>홍길동</td>
	94	+ <td>1999.01.01</td>
	95	+ <td>여</td>
	96	+ </tr> <tr>
	97	+ <td>1</td>
	98	+ <td>test123</td>
	99	+ <td>홍길동</td>
	100	+ <td>1999.01.01</td>
	101	+ <td>여</td>
	102	+ </tr> <tr>
	103	+ <td>1</td>
	104	+ <td>test123</td>
	105	+ <td>홍길동</td>
	106	+ <td>1999.01.01</td>
	107	+ <td>여</td>
	108	+ </tr> <tr>
	109	+ <td>1</td>
	110	+ <td>test123</td>
	111	+ <td>홍길동</td>
	112	+ <td>1999.01.01</td>
	113	+ <td>여</td>
	114	+ </tr>
	115	+ </tbody>
	116	+ </table>
	117	+ </div>
	118	+ <PaginationButton />
	119	+ </div>
	120	+ </div>
	121	+ </div>
	122	+ </div>
	123	+</template>
	124	+
	125	+<script>
	126	+import PageNavigation from '../../component/PageNavigation.vue';
	127	+import PaginationButton from '../../component/PaginationButton.vue';
	128	+import FileTree from '../../component/FileTree.vue';
	129	+import SvgIcon from '@jamescoyle/vue-icon';
	130	+import { mdiMagnify } from '@mdi/js';
	131	+export default {
	132	+ data() {
	133	+ return {
	134	+ searchPath: mdiMagnify
	135	+ }
	136	+ },
	137	+ methods: {
	138	+
	139	+ },
	140	+ watch: {
	141	+
	142	+ },
	143	+ computed: {
	144	+
	145	+ },
	146	+ components: {
	147	+ 'PageNavigation': PageNavigation,
	148	+ 'FileTree': FileTree,
	149	+ 'SvgIcon': SvgIcon,
	150	+ 'PaginationButton': PaginationButton
	151	+ },
	152	+ mounted() {
	153	+ console.log('main mounted');
	154	+ }
	155	+}
	156	+</script>
	157	+
	158	+<style lang="css" scoped>
	159	+.content-zone {
	160	+ border: 1px solid #eee;
	161	+ padding: 10px;
	162	+ height: calc(100% - 55px);
	163	+ overflow: auto;
	164	+}
	165	+</style>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

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

+++ client/views/template/templateElement/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>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

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

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

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

bdc4fdb

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

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

...	...	@@ -0,0 +1,45 @@
	1	+<template>
	2	+ <div class="search-bar">
	3	+ <div class="flex justify-end align-center">
	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>

bdc4fdb

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

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

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

bdc4fdb

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

+++ client/views/template/templateElement/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 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	+

bdc4fdb

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

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

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

bdc4fdb

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

+++ client/views/template/templateElement/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>(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

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

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

bdc4fdb

package-lock.json (added)

+++ package-lock.json

This file is too big to display.

bdc4fdb

package.json (added)

+++ package.json

...	...	@@ -0,0 +1,40 @@
	1	+{
	2	+ "dependencies": {
	3	+ "@amcharts/amcharts5": "^5.5.7",
	4	+ "@babel/cli": "7.19.3",
	5	+ "@babel/core": "7.19.3",
	6	+ "@jamescoyle/vue-icon": "^0.1.2",
	7	+ "@mdi/js": "^7.4.47",
	8	+ "axios": "^1.6.5",
	9	+ "babel-loader": "8.2.5",
	10	+ "css-loader": "6.7.1",
	11	+ "express": "4.18.1",
	12	+ "express-http-proxy": "^2.0.0",
	13	+ "file-loader": "6.2.0",
	14	+ "file-saver": "^2.0.5",
	15	+ "fs": "0.0.1-security",
	16	+ "lodash": "^4.17.21",
	17	+ "new-line": "^1.1.1",
	18	+ "pg": "8.8.0",
	19	+ "url-loader": "4.1.1",
	20	+ "vue": "3.2.40",
	21	+ "vue-jstree": "^2.1.6",
	22	+ "vue-loader": "^17.0.0",
	23	+ "vue-router": "4.1.5",
	24	+ "vue-style-loader": "4.1.3",
	25	+ "vue3-sfc-loader": "^0.8.4",
	26	+ "vuex": "^4.1.0",
	27	+ "webpack": "5.74.0",
	28	+ "webpack-cli": "4.10.0"
	29	+ },
	30	+ "scripts": {
	31	+ "prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",
	32	+ "dev": "set NODE_ENV=development&&node ./server/modules/web/server.js",
	33	+ "windows-prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",
	34	+ "windows-dev": "set NODE_ENV=development&&node ./server/modules/web/server.js",
	35	+ "linux-prod": "export NODE_ENV=production&&node ./server/modules/web/server.js",
	36	+ "linux-dev": "export NODE_ENV=development&&node ./server/modules/web/server.js",
	37	+ "webpack-build": "webpack",
	38	+ "webpack-build-watch": "webpack --watch"
	39	+ }
	40	+}

bdc4fdb

server/modules/db/mysql/MysqlConnection.js (added)

+++ server/modules/db/mysql/MysqlConnection.js

...	...	@@ -0,0 +1,62 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.10.21
	4	+ * @dscription : Mysql DB Connection Pool 생성 관리 모듈 입니다. (private와 public object 환경 구성)
	5	+ */
	6	+ const MysqlConnection = (function () {
	7	+
	8	+ //Mysql DB Connection 라이브러리 모듈
	9	+ const mysql = require('mysql');
	10	+
	11	+ //Connection Pool 객체 - private object(변수)
	12	+ const connectionPool = mysql.createPool({
	13	+ host: 'localhost',
	14	+ user: 'root',
	15	+ password: '1234',
	16	+ database: 'test',
	17	+ ssl: false,
	18	+ port: 3306,
	19	+ max: 10,
	20	+ });
	21	+
	22	+ return {
	23	+ getConnectionPool: function () {
	24	+ return connectionPool;
	25	+ },
	26	+ queryExcute: function (sql, params) {
	27	+ const result = new Promise((resolve, reject) => {
	28	+ connectionPool.getConnection(function (connectionError, connection) {
	29	+ if (!connectionError) {
	30	+ try {
	31	+ connection.query(sql, params, function (queryError, rows, columns) {
	32	+ if (!queryError) {
	33	+ resolve({'rows': rows, 'columns': columns});
	34	+ } else {
	35	+ reject(queryError);
	36	+ }
	37	+ })
	38	+ } catch (proccessError) {
	39	+ reject(proccessError);
	40	+ } finally {
	41	+ connection.release();
	42	+ }
	43	+ } else {
	44	+ reject(connectionError);
	45	+ }
	46	+ })
	47	+
	48	+ /* connectionPool.getConnection().then(async (connection) => {
	49	+ let queryResult = await connection.query(sql);
	50	+ resolve(queryResult);
	51	+ connection.release();
	52	+ }).catch((error) => {
	53	+ reject(error);
	54	+ }); */
	55	+ })
	56	+ return result;
	57	+ },
	58	+ }
	59	+
	60	+})();
	61	+
	62	+module.exports = MysqlConnection;(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

server/modules/db/oracle/OracleConnection.js (added)

+++ server/modules/db/oracle/OracleConnection.js

...	...	@@ -0,0 +1,62 @@
	1	+/**
	2	+ * @author : 방선주
	3	+ * @since : 2022.09.22
	4	+ * @dscription : Oracle DB Connection Pool 생성 관리 모듈 입니다.
	5	+ *
	6	+ * @modifier : 최정우
	7	+ * @modified : 2022.10.30
	8	+ */
	9	+ const { BASE_DIR } = require('../../../../Global');
	10	+
	11	+ const OracleConnection = function () {
	12	+ //오라클 라이브러리 import
	13	+ const oracledb = require('oracledb');
	14	+ //라이브러리 초기화(oracle client setting)
	15	+ oracledb.initOracleClient({ libDir: `${BASE_DIR}/server/modules/db/oracle/client/client_19.16` });
	16	+
	17	+ //DB Connection Pool
	18	+ let connectionPool = null;
	19	+
	20	+ //DB Connection Pool 생성
	21	+ oracledb.createPool({
	22	+ user: 'ajin_data',
	23	+ password: 'ajinvldosvl1121', // myhrpw contains the hr schema password
	24	+ connectString: '(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = 211.216.206.147)(PORT = 1521)))(CONNECT_DATA = (SID = XE)))',
	25	+ poolMin: 0,
	26	+ poolMax: 20,
	27	+ //poolAlias: 'ajin_odbcp'//poolAlias가 정의되지 않으면, default pool로 정의됨
	28	+ }).then((result) => {
	29	+ connectionPool = result;
	30	+ console.log("Successfully connected to Oracle Database");
	31	+ }).catch((error) => {
	32	+ console.error(error);
	33	+ });
	34	+
	35	+ return {
	36	+ getConnectionPool: function () {
	37	+ return connectionPool;
	38	+ },
	39	+ getConnection: function () {
	40	+ return oracledb.getConnection();
	41	+ },
	42	+ queryExcute: function (sql, params) {
	43	+ const result = new Promise((resolve, reject) => {
	44	+ oracledb.getConnection().then(async (connection) => {
	45	+ let queryResult = null;
	46	+ if (!params) {
	47	+ queryResult = await connection.execute(sql);
	48	+ } else {
	49	+ queryResult = await connection.execute(sql, params);
	50	+ }
	51	+ resolve(queryResult);
	52	+ connection.close();
	53	+ }).catch((error) => {
	54	+ reject(error);
	55	+ });
	56	+ })
	57	+ return result;
	58	+ },
	59	+ }
	60	+ }();
	61	+
	62	+ module.exports = OracleConnection;(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

server/modules/db/oracle/client/client_19.16/BASIC_LICENSE (added)

+++ server/modules/db/oracle/client/client_19.16/BASIC_LICENSE

...	...	@@ -0,0 +1,123 @@
	1	+Oracle Free Use Terms and Conditions
	2	+
	3	+Definitions
	4	+
	5	+"Oracle" refers to Oracle America, Inc. "You" and "Your" refers to (a)
	6	+a company or organization (each an "Entity") accessing the Programs,
	7	+if use of the Programs will be on behalf of such Entity; or (b) an
	8	+individual accessing the Programs, if use of the Programs will not be
	9	+on behalf of an Entity. "Program(s)" refers to Oracle software
	10	+provided by Oracle pursuant to the following terms and any updates,
	11	+error corrections, and/or Program Documentation provided by
	12	+Oracle. "Program Documentation" refers to Program user manuals and
	13	+Program installation manuals, if any. If available, Program
	14	+Documentation may be delivered with the Programs and/or may be
	15	+accessed from www.oracle.com/documentation. "Separate Terms" refers to
	16	+separate license terms that are specified in the Program
	17	+Documentation, readmes or notice files and that apply to Separately
	18	+Licensed Technology. "Separately Licensed Technology" refers to Oracle
	19	+or third party technology that is licensed under Separate Terms and
	20	+not under the terms of this license.
	21	+
	22	+Separately Licensed Technology
	23	+
	24	+Oracle may provide certain notices to You in Program Documentation,
	25	+readmes or notice files in connection with Oracle or third party
	26	+technology provided as or with the Programs. If specified in the
	27	+Program Documentation, readmes or notice files, such technology will
	28	+be licensed to You under Separate Terms. Your rights to use Separately
	29	+Licensed Technology under Separate Terms are not restricted in any way
	30	+by the terms herein. For clarity, notwithstanding the existence of a
	31	+notice, third party technology that is not Separately Licensed
	32	+Technology shall be deemed part of the Programs licensed to You under
	33	+the terms of this license.
	34	+
	35	+Source Code for Open Source Software
	36	+
	37	+For software that You receive from Oracle in binary form that is
	38	+licensed under an open source license that gives You the right to
	39	+receive the source code for that binary, You can obtain a copy of the
	40	+applicable source code from https://oss.oracle.com/sources/ or
	41	+http://www.oracle.com/goto/opensourcecode. If the source code for such
	42	+software was not provided to You with the binary, You can also receive
	43	+a copy of the source code on physical media by submitting a written
	44	+request pursuant to the instructions in the "Written Offer for Source
	45	+Code" section of the latter website.
	46	+
	47	+-------------------------------------------------------------------------------
	48	+
	49	+The following license terms apply to those Programs that are not
	50	+provided to You under Separate Terms.
	51	+
	52	+License Rights and Restrictions
	53	+
	54	+Oracle grants to You, as a recipient of this Program, a nonexclusive,
	55	+nontransferable, limited license to, subject to the conditions stated
	56	+herein, (a) internally use the unmodified Programs for the purposes of
	57	+developing, testing, prototyping and demonstrating your applications,
	58	+and running the Programs for your own internal business operations;
	59	+and (b) redistribute unmodified Programs and Programs Documentation,
	60	+under the terms of this License, provided that You do not charge Your
	61	+end users any additional fees for the use of the Programs. You may
	62	+make copies of the Programs to the extent reasonably necessary for
	63	+exercising the license rights granted herein and for backup
	64	+purposes. You are granted the right to use the Programs to provide
	65	+third party training in the use of the Programs and associated
	66	+Separately Licensed Technology only if there is express authorization
	67	+of such use by Oracle on the Program's download page or in the Program
	68	+Documentation.
	69	+
	70	+Your license is contingent on Your compliance with the following conditions:
	71	+
	72	+ - You include a copy of this license with any distribution by You
	73	+ of the Programs;
	74	+
	75	+ - You do not remove markings or notices of either Oracle's or a
	76	+ licensor's proprietary rights from the Programs or Program
	77	+ Documentation;
	78	+
	79	+ - You comply with all U.S. and applicable export control and
	80	+ economic sanctions laws and regulations that govern Your use of
	81	+ the Programs (including technical data);
	82	+
	83	+ - You do not cause or permit reverse engineering, disassembly or
	84	+ decompilation of the Programs (except as allowed by law) by You
	85	+ nor allow an associated party to do so.
	86	+
	87	+For clarity, any source code that may be included in the distribution
	88	+with the Programs is provided solely for reference purposes and may
	89	+not be modified, unless such source code is under Separate Terms
	90	+permitting modification.
	91	+
	92	+Ownership
	93	+
	94	+Oracle or its licensors retain all ownership and intellectual property
	95	+rights to the Programs.
	96	+
	97	+Information Collection
	98	+
	99	+The Programs' installation and/or auto-update processes, if any, may
	100	+transmit a limited amount of data to Oracle or its service provider
	101	+about those processes to help Oracle understand and optimize
	102	+them. Oracle does not associate the data with personally identifiable
	103	+information. Refer to Oracle's Privacy Policy at
	104	+www.oracle.com/privacy.
	105	+
	106	+Disclaimer of Warranties; Limitation of Liability
	107	+
	108	+THE PROGRAMS ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. ORACLE
	109	+FURTHER DISCLAIMS ALL WARRANTIES, EXPRESS AND IMPLIED, INCLUDING
	110	+WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS
	111	+FOR A PARTICULAR PURPOSE, OR NONINFRINGEMENT.
	112	+
	113	+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW WILL ORACLE BE LIABLE TO
	114	+YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
	115	+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
	116	+PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
	117	+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
	118	+FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF
	119	+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
	120	+DAMAGES.
	121	+
	122	+Last updated: 8 October 2018
	123	+

bdc4fdb

server/modules/db/oracle/client/client_19.16/BASIC_README (added)

+++ server/modules/db/oracle/client/client_19.16/BASIC_README

...	...	@@ -0,0 +1,30 @@
	1	+Basic Package Information
	2	+=========================
	3	+Sun Jul 17 14:46:23 MDT 2022
	4	+Client Shared Library 64-bit - 19.16.0.0.0
	5	+
	6	+Windows NT Version V6.2
	7	+CPU : 4 - type 86644 physical cores
	8	+Process Affinity : 0x0000000000000000
	9	+Memory (Avail/Total): Ph:10181M/16381M, Ph+PgF:12546M/18813M
	10	+
	11	+
	12	+TIMEZONE INFORMATION
	13	+--------------------
	14	+Operating in ORACLE_HOME environment.
	15	+
	16	+Small timezone file = timezone_32.dat
	17	+Large timezone file = timezlrg_32.dat
	18	+
	19	+LICENSE AGREEMENT
	20	+-----------------------------
	21	+Your use of this copy of Oracle Instant Client software product is subject to, and may not exceed the conditions of use for which you are authorized under one of the following:
	22	+
	23	+(i) the license or cloud services terms that you accepted when you obtained the right to use Oracle Instant Client software; or
	24	+(ii) the license terms that you agreed to when you placed your order with Oracle for an Oracle product containing Oracle Instant Client software; or
	25	+(iii) the Oracle Instant Client software license terms, if any, included with the hardware that you acquired from Oracle; or
	26	+(iv) the Oracle Technology Network License Agreement (which you acknowledge you have read and agree to) available at http://www.oracle.com/technetwork/licenses/distribution-license-152002.html; or, if (i), (ii), (iii), and or (iv) are not applicable, then,
	27	+(v) the Oracle Free Use Terms and Conditions available at BASIC_LICENSE.
	28	+
	29	+Oracle's obligations with respect to your use of the Oracle Instant Client, including, without limitation, obligations to indemnify you, if any, shall only be as set forth in the specific license under which you are authorized and choose to use Oracle Instant Client.
	30	+

bdc4fdb

server/modules/db/oracle/client/client_19.16/adrci.exe (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/adrci.exe

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/adrci.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/adrci.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/genezi.exe (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/genezi.exe

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/genezi.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/genezi.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oci.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oci.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oci.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oci.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/ocijdbc19.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/ocijdbc19.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/ocijdbc19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/ocijdbc19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/ociw32.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/ociw32.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/ociw32.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/ociw32.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/ojdbc8.jar (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/ojdbc8.jar

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oramysql19.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oramysql19.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oramysql19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oramysql19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/orannzsbb19.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/orannzsbb19.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/orannzsbb19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/orannzsbb19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraocci19.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oraocci19.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraocci19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oraocci19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraocci19d.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oraocci19d.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraocci19d.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oraocci19d.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraociei19.dll (added)

+++ server/modules/db/oracle/client/client_19.16/oraociei19.dll

This file is too big to display.

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraociei19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oraociei19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/oraons.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/oraons.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/orasql19.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/orasql19.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/orasql19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/orasql19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/ucp.jar (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/ucp.jar

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/uidrvci.exe (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/uidrvci.exe

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/uidrvci.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/uidrvci.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/vc14/oraocci19.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/vc14/oraocci19.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/vc14/oraocci19.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/vc14/oraocci19.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/vc14/oraocci19d.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/vc14/oraocci19d.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/vc14/oraocci19d.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/vc14/oraocci19d.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_19.16/xstreams.jar (Binary) (added)

+++ server/modules/db/oracle/client/client_19.16/xstreams.jar

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/BASIC_LICENSE (added)

+++ server/modules/db/oracle/client/client_21.6/BASIC_LICENSE

...	...	@@ -0,0 +1,123 @@
	1	+Oracle Free Use Terms and Conditions
	2	+
	3	+Definitions
	4	+
	5	+"Oracle" refers to Oracle America, Inc. "You" and "Your" refers to (a)
	6	+a company or organization (each an "Entity") accessing the Programs,
	7	+if use of the Programs will be on behalf of such Entity; or (b) an
	8	+individual accessing the Programs, if use of the Programs will not be
	9	+on behalf of an Entity. "Program(s)" refers to Oracle software
	10	+provided by Oracle pursuant to the following terms and any updates,
	11	+error corrections, and/or Program Documentation provided by
	12	+Oracle. "Program Documentation" refers to Program user manuals and
	13	+Program installation manuals, if any. If available, Program
	14	+Documentation may be delivered with the Programs and/or may be
	15	+accessed from www.oracle.com/documentation. "Separate Terms" refers to
	16	+separate license terms that are specified in the Program
	17	+Documentation, readmes or notice files and that apply to Separately
	18	+Licensed Technology. "Separately Licensed Technology" refers to Oracle
	19	+or third party technology that is licensed under Separate Terms and
	20	+not under the terms of this license.
	21	+
	22	+Separately Licensed Technology
	23	+
	24	+Oracle may provide certain notices to You in Program Documentation,
	25	+readmes or notice files in connection with Oracle or third party
	26	+technology provided as or with the Programs. If specified in the
	27	+Program Documentation, readmes or notice files, such technology will
	28	+be licensed to You under Separate Terms. Your rights to use Separately
	29	+Licensed Technology under Separate Terms are not restricted in any way
	30	+by the terms herein. For clarity, notwithstanding the existence of a
	31	+notice, third party technology that is not Separately Licensed
	32	+Technology shall be deemed part of the Programs licensed to You under
	33	+the terms of this license.
	34	+
	35	+Source Code for Open Source Software
	36	+
	37	+For software that You receive from Oracle in binary form that is
	38	+licensed under an open source license that gives You the right to
	39	+receive the source code for that binary, You can obtain a copy of the
	40	+applicable source code from https://oss.oracle.com/sources/ or
	41	+http://www.oracle.com/goto/opensourcecode. If the source code for such
	42	+software was not provided to You with the binary, You can also receive
	43	+a copy of the source code on physical media by submitting a written
	44	+request pursuant to the instructions in the "Written Offer for Source
	45	+Code" section of the latter website.
	46	+
	47	+-------------------------------------------------------------------------------
	48	+
	49	+The following license terms apply to those Programs that are not
	50	+provided to You under Separate Terms.
	51	+
	52	+License Rights and Restrictions
	53	+
	54	+Oracle grants to You, as a recipient of this Program, a nonexclusive,
	55	+nontransferable, limited license to, subject to the conditions stated
	56	+herein, (a) internally use the unmodified Programs for the purposes of
	57	+developing, testing, prototyping and demonstrating your applications,
	58	+and running the Programs for your own internal business operations;
	59	+and (b) redistribute unmodified Programs and Programs Documentation,
	60	+under the terms of this License, provided that You do not charge Your
	61	+end users any additional fees for the use of the Programs. You may
	62	+make copies of the Programs to the extent reasonably necessary for
	63	+exercising the license rights granted herein and for backup
	64	+purposes. You are granted the right to use the Programs to provide
	65	+third party training in the use of the Programs and associated
	66	+Separately Licensed Technology only if there is express authorization
	67	+of such use by Oracle on the Program's download page or in the Program
	68	+Documentation.
	69	+
	70	+Your license is contingent on Your compliance with the following conditions:
	71	+
	72	+ - You include a copy of this license with any distribution by You
	73	+ of the Programs;
	74	+
	75	+ - You do not remove markings or notices of either Oracle's or a
	76	+ licensor's proprietary rights from the Programs or Program
	77	+ Documentation;
	78	+
	79	+ - You comply with all U.S. and applicable export control and
	80	+ economic sanctions laws and regulations that govern Your use of
	81	+ the Programs (including technical data);
	82	+
	83	+ - You do not cause or permit reverse engineering, disassembly or
	84	+ decompilation of the Programs (except as allowed by law) by You
	85	+ nor allow an associated party to do so.
	86	+
	87	+For clarity, any source code that may be included in the distribution
	88	+with the Programs is provided solely for reference purposes and may
	89	+not be modified, unless such source code is under Separate Terms
	90	+permitting modification.
	91	+
	92	+Ownership
	93	+
	94	+Oracle or its licensors retain all ownership and intellectual property
	95	+rights to the Programs.
	96	+
	97	+Information Collection
	98	+
	99	+The Programs' installation and/or auto-update processes, if any, may
	100	+transmit a limited amount of data to Oracle or its service provider
	101	+about those processes to help Oracle understand and optimize
	102	+them. Oracle does not associate the data with personally identifiable
	103	+information. Refer to Oracle's Privacy Policy at
	104	+www.oracle.com/privacy.
	105	+
	106	+Disclaimer of Warranties; Limitation of Liability
	107	+
	108	+THE PROGRAMS ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. ORACLE
	109	+FURTHER DISCLAIMS ALL WARRANTIES, EXPRESS AND IMPLIED, INCLUDING
	110	+WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS
	111	+FOR A PARTICULAR PURPOSE, OR NONINFRINGEMENT.
	112	+
	113	+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW WILL ORACLE BE LIABLE TO
	114	+YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
	115	+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
	116	+PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
	117	+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
	118	+FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF
	119	+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
	120	+DAMAGES.
	121	+
	122	+Last updated: 8 October 2018
	123	+

bdc4fdb

server/modules/db/oracle/client/client_21.6/BASIC_README (added)

+++ server/modules/db/oracle/client/client_21.6/BASIC_README

...	...	@@ -0,0 +1,30 @@
	1	+Basic Package Information
	2	+=========================
	3	+Fri May 27 02:14:20 MDT 2022
	4	+Client Shared Library 64-bit - 21.6.0.0.0
	5	+
	6	+Windows NT Version V6.3 OS Build 9600
	7	+CPU : 4 - type 86644 physical cores
	8	+Process Affinity : 0x0000000000000000
	9	+Memory (Avail/Total): Ph:10006M/16381M, Ph+PgF:12115M/18813M
	10	+
	11	+
	12	+TIMEZONE INFORMATION
	13	+--------------------
	14	+Operating in ORACLE_HOME environment.
	15	+
	16	+Small timezone file = timezone_35.dat
	17	+Large timezone file = timezlrg_35.dat
	18	+
	19	+LICENSE AGREEMENT
	20	+-----------------------------
	21	+Your use of this copy of Oracle Instant Client software product is subject to, and may not exceed the conditions of use for which you are authorized under one of the following:
	22	+
	23	+(i) the license or cloud services terms that you accepted when you obtained the right to use Oracle Instant Client software; or
	24	+(ii) the license terms that you agreed to when you placed your order with Oracle for an Oracle product containing Oracle Instant Client software; or
	25	+(iii) the Oracle Instant Client software license terms, if any, included with the hardware that you acquired from Oracle; or
	26	+(iv) the Oracle Technology Network License Agreement (which you acknowledge you have read and agree to) available at http://www.oracle.com/technetwork/licenses/distribution-license-152002.html; or, if (i), (ii), (iii), and or (iv) are not applicable, then,
	27	+(v) the Oracle Free Use Terms and Conditions available at BASIC_LICENSE.
	28	+
	29	+Oracle's obligations with respect to your use of the Oracle Instant Client, including, without limitation, obligations to indemnify you, if any, shall only be as set forth in the specific license under which you are authorized and choose to use Oracle Instant Client.
	30	+

bdc4fdb

server/modules/db/oracle/client/client_21.6/adrci.exe (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/adrci.exe

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/adrci.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/adrci.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/genezi.exe (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/genezi.exe

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/genezi.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/genezi.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/network/admin/README (added)

+++ server/modules/db/oracle/client/client_21.6/network/admin/README

...	...	@@ -0,0 +1,9 @@
	1	+=============================================================================
	2	+This is the default directory for Oracle Network and Oracle Client
	3	+configuration files. You can place files such as tnsnames.ora, sqlnet.ora
	4	+and oraaccess.xml in this directory.
	5	+NOTE:
	6	+If you set an environment variable TNS_ADMIN to another directory containing
	7	+configuration files, they will be used instead of the files in this default
	8	+directory.
	9	+=============================================================================

bdc4fdb

server/modules/db/oracle/client/client_21.6/oci.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oci.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oci.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oci.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/ocijdbc21.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/ocijdbc21.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/ocijdbc21.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/ocijdbc21.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/ociw32.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/ociw32.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/ociw32.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/ociw32.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/ojdbc8.jar (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/ojdbc8.jar

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oramysql.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oramysql.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oramysql.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oramysql.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/orannzsbb.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/orannzsbb.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/orannzsbb.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/orannzsbb.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oraocci21.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oraocci21.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oraocci21.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oraocci21.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oraocci21d.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oraocci21d.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oraocci21d.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oraocci21d.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/oraociei.dll (added)

+++ server/modules/db/oracle/client/client_21.6/oraociei.dll

This file is too big to display.

bdc4fdb

server/modules/db/oracle/client/client_21.6/oraociei.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/oraociei.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/orasql.dll (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/orasql.dll

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/orasql.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/orasql.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/ucp.jar (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/ucp.jar

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/uidrvci.exe (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/uidrvci.exe

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/uidrvci.sym (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/uidrvci.sym

Binary file is not shown

bdc4fdb

server/modules/db/oracle/client/client_21.6/xstreams.jar (Binary) (added)

+++ server/modules/db/oracle/client/client_21.6/xstreams.jar

Binary file is not shown

bdc4fdb

server/modules/db/postgresql/PostgresqlConnection.js (added)

+++ server/modules/db/postgresql/PostgresqlConnection.js

...	...	@@ -0,0 +1,41 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.09.20
	4	+ * @dscription : PostgreSQL DB Connection Pool 생성 관리 모듈 입니다. (private와 public object 환경 구성)
	5	+ */
	6	+const PostgresqlConnection = (function () {
	7	+
	8	+ //PostgreSQL DB Connection 라이브러리 모듈
	9	+ const pg = require('pg');
	10	+
	11	+ //Connection Pool 객체 - private object(변수)
	12	+ const connectionPool = new pg.Pool({
	13	+ //host: 'localhost',
	14	+ host: '192.168.0.250',
	15	+ user: 'test_user',
	16	+ password: '1234',
	17	+ database: 'test_db',
	18	+ ssl: false,
	19	+ port: 5432,
	20	+ max: 10,
	21	+ });
	22	+
	23	+ //public object
	24	+ return {
	25	+ getConnectionPool: function () {
	26	+ return connectionPool;
	27	+ },
	28	+ getConnectionPoolClient: function () {
	29	+ return connectionPool.connect();
	30	+ },
	31	+ queryExcute: function (sql, params) {
	32	+ return connectionPool.query(sql, params);
	33	+ },
	34	+ }
	35	+
	36	+})();
	37	+
	38	+//Module Export
	39	+module.exports = PostgresqlConnection;
	40	+
	41	+

bdc4fdb

server/modules/log/Logger.js (added)

+++ server/modules/log/Logger.js

...	...	@@ -0,0 +1,131 @@
	1	+const { LOG_BASE_DIR, SERVICE_STATUS } = require('../../../Global');
	2	+const fs = require('fs');
	3	+const Queue = require('../util/Queue');
	4	+
	5	+/**
	6	+ * @author : 최정우
	7	+ * @since : 2022.09.21
	8	+ * @dscription : Log 생성기 모듈 입니다.
	9	+ */
	10	+const Logger = (function () {
	11	+
	12	+ /* let testInterval = setInterval(() => {
	13	+ const date = new Date();
	14	+ var now = `${date.getFullYear()}.${(date.getMonth()+1)}.${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}`;
	15	+ console.log('now :', now);
	16	+ }, 1000) */
	17	+
	18	+ //로그 쓰기 전, 대기 저장소
	19	+ const eventQueue = new Queue();
	20	+ //로그 쓰는 중인지 아닌지 상태값
	21	+ let isLogging = false;
	22	+
	23	+ /**
	24	+ * @author : 최정우
	25	+ * @since : 2022.09.21
	26	+ * @dscription : Log 처리
	27	+ */
	28	+ const logging = (message) => {
	29	+ const date = new Date();
	30	+ let year = date.getFullYear();
	31	+ let month = prefixZero((date.getMonth() + 1), 2);
	32	+ let day = prefixZero(date.getDate(), 2);
	33	+ let hour = prefixZero(date.getHours(), 2);
	34	+ let minute = prefixZero(date.getMinutes(), 2);
	35	+ let second = prefixZero(date.getSeconds(), 2);
	36	+ let millisecond = prefixZero(date.getMilliseconds(), 3);
	37	+
	38	+ //로그에 쓰일 정보
	39	+ const logMessage = {
	40	+ message: message,
	41	+ datetime: `${year}.${month}.${day} ${hour}:${minute}:${second}.${millisecond}`,
	42	+ logFolderDir: `${LOG_BASE_DIR}/${year}${month}`,//log 폴더 경로
	43	+ logFileName: `log-${year}${month}${day}.log`//log 파일명
	44	+ }
	45	+
	46	+ //로그 쓰는 중이면, 대기 저장소에 등록
	47	+ if (isLogging == true) {
	48	+ eventQueue.push(logMessage);
	49	+ } else {//로그 쓰는 중이 아니면, 로그 쓰는 중인 상태로 변경 후, 로그 쓰기
	50	+ isLogging = true;
	51	+
	52	+ try {
	53	+ //log 폴더 생성
	54	+ if (!fs.existsSync(logMessage.logFolderDir)) {
	55	+ fs.mkdirSync(logMessage.logFolderDir, { recursive: true/재귀적 폴더 생성/ });
	56	+ }
	57	+
	58	+ //log 파일 Full Path
	59	+ let logFileFullPath = `${logMessage.logFolderDir}/${logMessage.logFileName}`;
	60	+ //log 내용
	61	+ let logContent = `[${logMessage.datetime}] ${logMessage.message}`;
	62	+
	63	+ //log 내용 쓰기
	64	+ writeLogFile(logFileFullPath, logContent);
	65	+ } catch (error) {
	66	+ console.log('logging error : ', error);
	67	+ } finally {
	68	+ isLogging = false;
	69	+ }
	70	+ }
	71	+ }
	72	+
	73	+ /**
	74	+ * @author : 최정우
	75	+ * @since : 2022.09.21
	76	+ * @dscription : Log 내용 쓰기
	77	+ */
	78	+ const writeLogFile = (path, content) => {
	79	+ if (SERVICE_STATUS == 'development') {
	80	+ console.log(content);
	81	+ }
	82	+
	83	+ //파일 쓰기
	84	+ fs.appendFileSync(path, `${content}\n`, 'utf8');
	85	+
	86	+ //로그 쓰기 저장소에서 로그 메세지 꺼내기
	87	+ let logMessage = eventQueue.pop();
	88	+ //메세지가 존재하면 => Log 내용 쓰기 (재귀 호출)
	89	+ if (logMessage != undefined) {
	90	+ //log 파일 Full Path
	91	+ let logFileFullPath = `${logMessage.logFolderDir}/${logMessage.logFileName}`;
	92	+ //log 내용
	93	+ let logContent = `[${logMessage.datetime}] ${logMessage.message}`;
	94	+ //Log 내용 쓰기 (재귀 호출)
	95	+ writeLogFile(logFileFullPath, logContent);
	96	+ } else {
	97	+ return;
	98	+ }
	99	+ }
	100	+
	101	+ /**
	102	+ * @author : 최정우
	103	+ * @since : 2022.09.21
	104	+ * @dscription : 특정 길이만큼 앞에 '0' 붙이기
	105	+ */
	106	+ const prefixZero = (target, length) => {
	107	+ let zero = '';
	108	+ let suffix = target;
	109	+ let result = '';
	110	+
	111	+ if ((typeof target) === "number") {
	112	+ suffix = target.toString();
	113	+ }
	114	+ if (suffix.length < length) {
	115	+ for (i = 0; i < length - suffix.length; i++) {
	116	+ zero += '0';
	117	+ }
	118	+ }
	119	+ result = zero + suffix;
	120	+ return result;
	121	+ }
	122	+
	123	+
	124	+ return {
	125	+ logging: logging
	126	+ }
	127	+
	128	+})();
	129	+
	130	+//Module Export
	131	+module.exports = Logger;(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

server/modules/util/Queue.js (added)

+++ server/modules/util/Queue.js

...	...	@@ -0,0 +1,32 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.09.21
	4	+ * @dscription : Queue(선입선출) 자료형 객체 입니다.
	5	+ */
	6	+class Queue {
	7	+ constructor() {
	8	+ this._arr = [];
	9	+ }
	10	+
	11	+ //입력
	12	+ push (item) {
	13	+ this._arr.push(item);
	14	+ }
	15	+
	16	+ //출력 후, 제거
	17	+ pop () {
	18	+ return this._arr.shift();
	19	+ }
	20	+
	21	+ //출력 대기 중인 item return
	22	+ peek () {
	23	+ return this._arr[0];
	24	+ }
	25	+
	26	+ //확인
	27	+ showQueue () {
	28	+ console.log('Queue : ', this._arr);
	29	+ }
	30	+}
	31	+
	32	+module.exports = Queue;(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

server/modules/web/Server.js (added)

+++ server/modules/web/Server.js

...	...	@@ -0,0 +1,133 @@
	1	+/**
	2	+ * @author : 하석형
	3	+ * @since : 2023.08.24
	4	+ * @dscription : Express 라이브러리 활용 HTTP Web Server 모듈입니다.
	5	+ */
	6	+const { BASE_DIR, PORT, API_SERVER_HOST } = require("../../../Global");
	7	+const Logger = require("../log/Logger"); //Logger(필수)
	8	+
	9	+const express = require("express");
	10	+const webServer = express();
	11	+const expressProxy = require("express-http-proxy");
	12	+
	13	+//파일 시스템 관련 라이브러리
	14	+const FS = require("fs");
	15	+//stream: 특정 자원을 Streaming 하기 위한 라이브러리 => Transform: Streaming 중인 자원의 Data에 Data 수정 및 추가를 지원해주는 객체
	16	+const Transform = require("stream").Transform;
	17	+//Streaming 중인 자원에 새로운 데이터를 stream 공간에 추가하기 위한 라이브러리
	18	+const newLineStream = require("new-line");
	19	+
	20	+webServer.use((req, res, next) => {
	21	+ res.header("X-Frame-Options", "SAMEORIGIN"); // or 'SAMEORIGIN' or 'ALLOW-FROM uri'
	22	+ next();
	23	+});
	24	+
	25	+/**
	26	+ * @author : 하석형
	27	+ * @since : 2023.08.24
	28	+ * @dscription : HTTP Server start
	29	+ */
	30	+webServer.listen(PORT, function () {
	31	+ Logger.logging(`★★★ Node.js를 활용한 Web Server 구동(Port:${PORT}) ★★★`);
	32	+});
	33	+
	34	+/**
	35	+ * @author : 하석형
	36	+ * @since : 2023.08.24
	37	+ * @dscription : Intercepter 역할을 하는 미들웨어 기능
	38	+ */
	39	+webServer.use(function (request, response, next) {
	40	+ let ip = request.headers["x-forwarded-for"] \|\| request.socket.remoteAddress;
	41	+ Logger.logging(
	42	+ `[HTTP] ${request.url} (Method: ${request.method}, IP: ${ip})`
	43	+ );
	44	+ next();
	45	+});
	46	+
	47	+/**
	48	+ * @author : 하석형
	49	+ * @since : 2023.08.24
	50	+ * @dscription : ROOT URL -> index.html
	51	+ */
	52	+webServer.get("/", function (request, response) {
	53	+ //response.sendFile을 통한 HTTP html reponse (html내용 Streaming)
	54	+ response.sendFile(`${BASE_DIR}/client/views/index.html`);
	55	+});
	56	+
	57	+/**
	58	+ * @author : 하석형
	59	+ * @since : 2023.08.24
	60	+ * @dscription : 화면요청 URL 처리
	61	+ */
	62	+webServer.get("*.page", function (request, response, next) {
	63	+ //index.html 내용을 직접 Streaming하여 Response, Streaming 중간에 내용 수정
	64	+ //수정 내용 : URL 요청이 아닌, 브라우저에 표시된 URL만 변경하여, 해당하는 URL PATH의 Vue Component를 routing하기 위함
	65	+ const StreamTransform = new Transform();
	66	+ StreamTransform._transform = function (data, encoding, done) {
	67	+ let fileContent = data.toString();
	68	+ let replaceBeforeContent = `<script id="app-start-vue-page">const APP_USER_HTTP_REQUEST_URL = '/';</script>`;
	69	+ let replaceAfterContent = `<script id="app-start-vue-page">const APP_USER_HTTP_REQUEST_URL = '${request.params["0"]}.page';</script>`;
	70	+ fileContent.replace(replaceBeforeContent, replaceAfterContent);
	71	+ this.push(fileContent);
	72	+ done();
	73	+ };
	74	+ //Streaming 진행
	75	+ FS.createReadStream(`${BASE_DIR}/client/views/index.html`)
	76	+ .pipe(newLineStream())
	77	+ .pipe(StreamTransform)
	78	+ .pipe(response);
	79	+});
	80	+
	81	+/**
	82	+ * @author : 하석형
	83	+ * @since : 2023.08.24
	84	+ * @dscription : REST API 서버에 데이터 요청 보내기(Proxy)
	85	+ */
	86	+webServer.use(
	87	+ "*.json",
	88	+ expressProxy(API_SERVER_HOST, {
	89	+ proxyReqPathResolver: function (request) {
	90	+ return `${request.params["0"]}.json`;
	91	+ },
	92	+ })
	93	+);
	94	+
	95	+/**
	96	+ * @author : 하석형
	97	+ * @since : 2023.08.24
	98	+ * @dscription : REST API 서버에 데이터 요청 보내기(Proxy)
	99	+ */
	100	+webServer.use(
	101	+ "*.file",
	102	+ expressProxy(API_SERVER_HOST, {
	103	+ parseReqBody: false,
	104	+ proxyReqPathResolver: function (request) {
	105	+ console.log("request : ", request.url, request.params[0]);
	106	+ return `${request.params["0"]}.file`;
	107	+ },
	108	+ })
	109	+);
	110	+
	111	+/**
	112	+ * @author : 하석형
	113	+ * @since : 2023.08.24
	114	+ * @dscription : ROOT URL, Router's, 화면요청 URL 등.. 이 외 나머지 정적 자원에 대한 처리 기능
	115	+ */
	116	+webServer.get(".", function (request, response, next) {
	117	+ response.sendFile(`${BASE_DIR}${request.params["0"]}.${request.params["1"]}`);
	118	+});
	119	+
	120	+/**
	121	+ * @author : 하석형
	122	+ * @since : 2023.08.24
	123	+ * @dscription : Global Error Handler (*맨 마지막에 적용해야됨)
	124	+ */
	125	+webServer.use(function (error, request, response, next) {
	126	+ const errorCode = !error.statusCode ? 500 : error.statusCode;
	127	+ response
	128	+ .status(errorCode)
	129	+ .send("에러가 발생하였습니다. 관리자에게 문의바랍니다.");
	130	+ let message = `[Error:${errorCode}] ${request.url}/n ${error.stack}/n`;
	131	+ Logger.logging(message);
	132	+ //next();
	133	+});

bdc4fdb

server/service/test/model/TestDAO.js (added)

+++ server/service/test/model/TestDAO.js

...	...	@@ -0,0 +1,190 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.09.20
	4	+ * @dscription : 테스트용 DB 접근을 담당하는 모듈 입니다.
	5	+ */
	6	+ const TestDAO = (function () {
	7	+
	8	+ //PostgreSQL DB Connection 객체 - private object(변수)
	9	+ const PostgresqlConnection = require('../../../modules/db/postgresql/PostgresqlConnection');
	10	+ //console.log('PostgresqlConnection : ', PostgresqlConnection);
	11	+ const connectionPool = PostgresqlConnection.getConnectionPool();
	12	+
	13	+ //public object
	14	+ return {
	15	+
	16	+ /**
	17	+ * @author : 최정우
	18	+ * @since : 2022.09.20
	19	+ * @dscription : 테스트 데이터 목록 조회
	20	+ */
	21	+ testSelectList: function (param) {
	22	+ return connectionPool.query('SELECT * FROM test_schema.test_table');
	23	+ },
	24	+
	25	+ /**
	26	+ * @author : 최정우
	27	+ * @since : 2022.09.20
	28	+ * @dscription : 테스트 데이터 상세 조회
	29	+ */
	30	+ testSelectOne: function (param) {
	31	+ return connectionPool.query('SELECT * FROM test_schema.test_table WHERE test_seq = $1', param);
	32	+ },
	33	+
	34	+ /**
	35	+ * @author : 최정우
	36	+ * @since : 2022.09.20
	37	+ * @dscription : 테스트 데이터 등록
	38	+ */
	39	+ testInsertOne: function (param) {
	40	+ return connectionPool.query(
	41	+ //RETURNING <*\|\|COLUMN NAME1,COLUMN NAME2,...> : 등록한 Data return 받는 기능
	42	+ //ex1) RETURNING * : 모든 컬럼 다 return 함
	43	+ //ex2) RETURNING name : 컬럼명이 'name'인 데이터만 return 함
	44	+ `INSERT INTO test_schema.test_table (
	45	+ test_seq
	46	+ , test_title
	47	+ , test_content
	48	+ , test_create_datetime
	49	+ , test_create_user
	50	+ ) VALUES (
	51	+ (SELECT COALESCE(MAX(test_seq), 0) + 1 FROM test_schema.test_table)
	52	+ , $1
	53	+ , $2
	54	+ , current_timestamp
	55	+ , 1
	56	+ ) RETURNING test_seq`,
	57	+ param
	58	+ );
	59	+ },
	60	+
	61	+ /**
	62	+ * @author : 최정우
	63	+ * @since : 2022.09.20
	64	+ * @dscription : 테스트 데이터 수정
	65	+ */
	66	+ testUpdateOne: function (param) {
	67	+ return connectionPool.query(
	68	+ `UPDATE
	69	+ test_schema.test_table
	70	+ SET
	71	+ test_title = $2
	72	+ , test_content = $3
	73	+ , test_update_datetime = current_timestamp
	74	+ , test_update_user = 1
	75	+ WHERE
	76	+ test_seq = $1`,
	77	+ param
	78	+ );
	79	+ },
	80	+
	81	+ /**
	82	+ * @author : 최정우
	83	+ * @since : 2022.09.20
	84	+ * @dscription : 테스트 데이터 삭제
	85	+ */
	86	+ testDeleteOne: function (param) {
	87	+ return connectionPool.query(
	88	+ `DELETE
	89	+ FROM
	90	+ test_schema.test_table
	91	+ WHERE
	92	+ test_seq = $1`,
	93	+ param
	94	+ );
	95	+ },
	96	+
	97	+
	98	+ /**
	99	+ * @author : 최정우
	100	+ * @since : 2022.09.20
	101	+ * @dscription : 테스트 트랜젝션 처리
	102	+ *
	103	+ * 트랜잭션 작업 진행 시나리오
	104	+ * 1. connection pool 한 개 받아오기
	105	+ * 2. BEGIN(트랜잭션 시작 처리)
	106	+ * 3. [※작업내용1] 데이터 등록
	107	+ * 4. [※작업내용2] 등록한 데이터 수정
	108	+ * 5. ＊작업 완료시, 실행(dispatch)한 모든 쿼리를 COMMIT(커밋)
	109	+ * ＊에러 발생시, 실행(dispatch)한 모든 쿼리를 ROLLBACK(롤백)
	110	+ * 6. 받아온 connection pool 반납(해제) - 필수(반납하지 않으면 해당 pool을 사용하는 query는 트랜잭션에 계속 매달려있음)
	111	+ */
	112	+ testTransaction: function (param) {
	113	+ return new Promise((resolve, reject) => {
	114	+ //1. connection pool 한 개 받아오기
	115	+ const poolClient = PostgresqlConnection.getConnectionPoolClient();
	116	+ poolClient.then(async(client) => {//async 처리
	117	+ try {
	118	+ //2. BEGIN(트랜잭션 시작 처리)
	119	+ await client.query('BEGIN');
	120	+
	121	+ //처리 3초 지연
	122	+ //await client.query('SELECT pg_sleep(3);');
	123	+
	124	+ //3. [※작업내용1] 데이터 등록
	125	+ let insertResultData = await client.query(
	126	+ `INSERT INTO test_schema.test_table (
	127	+ test_seq
	128	+ , test_title
	129	+ , test_content
	130	+ , test_create_datetime
	131	+ , test_create_user
	132	+ ) VALUES (
	133	+ (SELECT COALESCE(MAX(test_seq), 0) + 1 FROM test_schema.test_table)
	134	+ , $1
	135	+ , $2
	136	+ , current_timestamp
	137	+ , 1
	138	+ ) RETURNING test_seq`,
	139	+ param
	140	+ );
	141	+ //console.log('등록 결과 정보 insertResultData : ', insertResultData);
	142	+
	143	+ //throw '트랜잭션 처리중 Error 강제로 발생시킴';
	144	+
	145	+ //4. [※작업내용2] 등록한 데이터 수정
	146	+ let updateResultData = await client.query(
	147	+ `UPDATE
	148	+ test_schema.test_table
	149	+ SET
	150	+ test_title = 'title transaction update'
	151	+ , test_content = 'content transaction update'
	152	+ , test_update_datetime = current_timestamp 1231ㄱㄹㅇㄴ
	153	+ , test_update_user = 1
	154	+ WHERE
	155	+ test_seq = ${insertResultData.rows[0].test_seq}`
	156	+ );
	157	+ //console.log('수정 결과 정보 updateResultData : ', updateResultData);
	158	+
	159	+ throw '트랜잭션 처리중 Error 강제로 발생시킴';
	160	+
	161	+ //5. ＊작업 완료시, 실행(dispatch)한 모든 쿼리를 COMMIT(커밋)
	162	+ let commitResultData = await client.query('COMMIT');
	163	+ //console.log('커밋 결과 정보 commitResultData : ', commitResultData);
	164	+
	165	+ //Promise resolve 처리
	166	+ resolve(commitResultData);
	167	+ } catch (error) {
	168	+ //5. ＊에러 완료시, 실행(dispatch)한 모든 쿼리를 COMMIT(커밋)
	169	+ let rollbackResultData = await client.query('ROLLBACK');
	170	+ console.log('롤백 결과 정보 rollbackResultData : ', rollbackResultData);
	171	+
	172	+ //Promise reject 처리
	173	+ reject(error);
	174	+ } finally {
	175	+ //6. 받아온 connection pool 반납(해제) - 필수(반납하지 않으면 해당 pool을 사용하는 query는 트랜잭션에 계속 매달려있음)
	176	+ client.release();
	177	+ }
	178	+ }).catch((error) => {
	179	+ //Promise reject 처리
	180	+ reject(error);
	181	+ })
	182	+ });
	183	+ },//testTransaction() end
	184	+
	185	+ }//return end
	186	+
	187	+ })();
	188	+
	189	+ //Module Export
	190	+ module.exports = TestDAO;(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

server/service/test/model/TestService.js (added)

+++ server/service/test/model/TestService.js

...	...	@@ -0,0 +1,138 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.09.20
	4	+ * @dscription : 테스트용 서비스 로직을 담당하는 모듈 입니다.
	5	+ */
	6	+ const TestService = (function () {
	7	+
	8	+ //DAO
	9	+ const TestDAO = require('./TestDAO');
	10	+
	11	+ //public object
	12	+ return {
	13	+
	14	+ /**
	15	+ * @author : 최정우
	16	+ * @since : 2022.09.20
	17	+ * @dscription : 테스트 데이터 목록 조회
	18	+ * @callback : parameter -> {data: Object, error: Object}
	19	+ */
	20	+ testSelectList: function (callback, param) {
	21	+ //Data Access 접근
	22	+ let dataAccessResult = TestDAO.testSelectList(param);
	23	+ //Data Access 결과
	24	+ dataAccessResult.then((data) => {
	25	+ console.log('TestService testSelectList connect dataAccessResult : ', data);
	26	+ callback({data: data, error: null});//Router에 결과 전달
	27	+ }).catch((error) => {
	28	+ callback({data: null, error: error});//Router에 Error 전달
	29	+ })
	30	+ },
	31	+
	32	+ /**
	33	+ * @author : 최정우
	34	+ * @since : 2022.09.20
	35	+ * @dscription : 테스트 데이터 상세 조회
	36	+ */
	37	+ testSelectOne: function (callback, param) {
	38	+ param = [1];
	39	+ //Data Access 접근
	40	+ let dataAccessResult = TestDAO.testSelectOne(param);
	41	+ //Data Access 결과
	42	+ dataAccessResult.then((data) => {
	43	+ console.log('TestService testSelectOne connect dataAccessResult : ', data);
	44	+ callback({data: data, error: null});//Router에 결과 전달
	45	+ }).catch((error) => {
	46	+ callback({data: null, error: error});//Router에 Error 전달
	47	+ })
	48	+ },
	49	+
	50	+ /**
	51	+ * @author : 최정우
	52	+ * @since : 2022.09.20
	53	+ * @dscription : 테스트 데이터 등록
	54	+ */
	55	+ testInsertOne: function (callback, param) {
	56	+ param = ['test title', 'test content'];
	57	+ //Data Access 접근
	58	+ let dataAccessResult = TestDAO.testInsertOne(param);
	59	+ //Data Access 결과
	60	+ dataAccessResult.then((data) => {
	61	+ console.log('TestService testInsertOne connect dataAccessResult : ', data.rows[0]['test_seq']);
	62	+ callback({data: data, error: null});//Router에 결과 전달
	63	+ }).catch((error) => {
	64	+ callback({data: null, error: error});//Router에 Error 전달
	65	+ })
	66	+ },
	67	+
	68	+ /**
	69	+ * @author : 최정우
	70	+ * @since : 2022.09.20
	71	+ * @dscription : 테스트 데이터 수정
	72	+ */
	73	+ testUpdateOne: function (callback, param) {
	74	+ param = [1, 'test title update', 'test content update'];
	75	+ //Data Access 접근
	76	+ let dataAccessResult = TestDAO.testUpdateOne(param);
	77	+ //Data Access 결과
	78	+ dataAccessResult.then((data) => {
	79	+ console.log('TestService testUpdateOne connect dataAccessResult : ', data);
	80	+ callback({data: data, error: null});//Router에 결과 전달
	81	+ }).catch((error) => {
	82	+ callback({data: null, error: error});//Router에 Error 전달
	83	+ })
	84	+ },
	85	+
	86	+ /**
	87	+ * @author : 최정우
	88	+ * @since : 2022.09.20
	89	+ * @dscription : 테스트 데이터 삭제
	90	+ */
	91	+ testDeleteOne: function (callback, param) {
	92	+ param = [10];
	93	+ //Data Access 접근
	94	+ let dataAccessResult = TestDAO.testDeleteOne(param);
	95	+ //Data Access 결과
	96	+ dataAccessResult.then((data) => {
	97	+ console.log('TestService testDeleteOne connect dataAccessResult : ', data);
	98	+ callback({data: data, error: null});//Router에 결과 전달
	99	+ }).catch((error) => {
	100	+ callback({data: null, error: error});//Router에 Error 전달
	101	+ })
	102	+ },
	103	+
	104	+ /**
	105	+ * @author : 최정우
	106	+ * @since : 2022.09.20
	107	+ * @dscription : 테스트 트랜젝션 처리
	108	+ *
	109	+ * 트랜잭션 작업 진행 시나리오
	110	+ * 1. connection pool 한 개 받아오기
	111	+ * 2. BEGIN(트랜잭션 시작 처리)
	112	+ * 3. [※작업내용1] 데이터 등록
	113	+ * 4. [※작업내용2] 등록한 데이터 수정
	114	+ * 5. ＊작업 완료시, 실행(dispatch)한 모든 쿼리를 COMMIT(커밋)
	115	+ * ＊에러 발생시, 실행(dispatch)한 모든 쿼리를 ROLLBACK(롤백)
	116	+ * 6. 받아온 connection pool 반납(해제) - 필수(반납하지 않으면 해당 pool을 사용하는 query는 트랜잭션에 계속 매달려있음)
	117	+ */
	118	+ testTransaction: function (callback, param) {
	119	+ param = ['test title', 'test content'];
	120	+ //Data Access 접근
	121	+ let dataAccessResult = TestDAO.testTransaction(param);
	122	+ //Data Access 결과
	123	+ dataAccessResult.then((data) => {
	124	+ console.log('TestService testTransaction connect dataAccessResult : ', data);
	125	+ callback({data: data, error: null});//Router에 결과 전달
	126	+ }).catch((error) => {
	127	+ callback({data: null, error: error});//Router에 Error 전달
	128	+ })
	129	+ },
	130	+
	131	+
	132	+ }
	133	+
	134	+ })();
	135	+
	136	+ //Module Export
	137	+ module.exports = TestService;
	138	+ (파일 끝에 줄바꿈 문자 없음)

bdc4fdb

server/service/test/router/TestRouter.js (added)

+++ server/service/test/router/TestRouter.js

...	...	@@ -0,0 +1,119 @@
	1	+/**
	2	+ * @author : 최정우
	3	+ * @since : 2022.09.20
	4	+ * @dscription : 테스트용 Router(Controller) 모듈 입니다.
	5	+ */
	6	+const express = require('express');
	7	+const router = express.Router();
	8	+
	9	+//Service
	10	+const TestService = require('../model/TestService');
	11	+
	12	+
	13	+/**
	14	+ * @author : 최정우
	15	+ * @since : 2022.09.20
	16	+ * @dscription : 테스트 데이터 목록 조회(POST)
	17	+ */
	18	+router.get('/testSelectList.json', function (request, response, next) {
	19	+ //Callback 함수 Parameter result = {data: Object, error: Object}
	20	+ TestService.testSelectList((result) => {
	21	+ if (!result.error) {
	22	+ response.send(result.data);
	23	+ } else {
	24	+ next(result.error);//Global Error Handler에게 예외상황 맡기기
	25	+ }
	26	+ });
	27	+})
	28	+
	29	+/**
	30	+ * @author : 최정우
	31	+ * @since : 2022.09.20
	32	+ * @dscription : 테스트 데이터 상세 조회(POST)
	33	+ */
	34	+router.get('/testSelectOne.json', function (request, response, next) {
	35	+ //Callback 함수 Parameter -> result = {data: Object, error: Object}
	36	+ TestService.testSelectOne((result) => {
	37	+ if (!result.error) {
	38	+ response.send(result.data);
	39	+ } else {
	40	+ next(result.error);//Global Error Handler에게 예외상황 맡기기
	41	+ }
	42	+ });
	43	+})
	44	+
	45	+/**
	46	+ * @author : 최정우
	47	+ * @since : 2022.09.20
	48	+ * @dscription : 테스트 데이터 등록 (POST)
	49	+ */
	50	+router.get('/testInsertOne.json', function (request, response, next) {
	51	+ //Callback 함수 Parameter -> result = {data: Object, error: Object}
	52	+ TestService.testInsertOne((result) => {
	53	+ if (!result.error) {
	54	+ response.send(result.data);
	55	+ } else {
	56	+ next(result.error);//Global Error Handler에게 예외상황 맡기기
	57	+ }
	58	+ })
	59	+})
	60	+
	61	+/**
	62	+ * @author : 최정우
	63	+ * @since : 2022.09.20
	64	+ * @dscription : 테스트 데이터 수정 (POST)
	65	+ */
	66	+router.get('/testUpdateOne.json', function (request, response, next) {
	67	+ //Callback 함수 Parameter -> result = {data: Object, error: Object}
	68	+ TestService.testUpdateOne((result) => {
	69	+ if (!result.error) {
	70	+ response.send(result.data);
	71	+ } else {
	72	+ next(result.error);//Global Error Handler에게 예외상황 맡기기
	73	+ }
	74	+ })
	75	+})
	76	+
	77	+/**
	78	+ * @author : 최정우
	79	+ * @since : 2022.09.20
	80	+ * @dscription : 테스트 데이터 삭제 (POST)
	81	+ */
	82	+router.get('/testDeleteOne.json', function (request, response, next) {
	83	+ //Callback 함수 Parameter -> result = {data: Object, error: Object}
	84	+ TestService.testDeleteOne((result) => {
	85	+ if (!result.error) {
	86	+ response.send(result.data);
	87	+ } else {
	88	+ next(result.error);//Global Error Handler에게 예외상황 맡기기
	89	+ }
	90	+ })
	91	+})
	92	+
	93	+/**
	94	+ * @author : 최정우
	95	+ * @since : 2022.09.20
	96	+ * @dscription : 테스트 트랜젝션 처리
	97	+ *
	98	+ * 트랜잭션 작업 진행 시나리오
	99	+ * 1. connection pool 한 개 받아오기
	100	+ * 2. BEGIN(트랜잭션 시작 처리)
	101	+ * 3. [※작업내용1] 데이터 등록
	102	+ * 4. [※작업내용2] 등록한 데이터 수정
	103	+ * 5. ＊작업 완료시, 실행(dispatch)한 모든 쿼리를 COMMIT(커밋)
	104	+ * ＊에러 발생시, 실행(dispatch)한 모든 쿼리를 ROLLBACK(롤백)
	105	+ * 6. 받아온 connection pool 반납(해제) - 필수(반납하지 않으면 해당 pool을 사용하는 query는 트랜잭션에 계속 매달려있음)
	106	+ */
	107	+router.get('/testTransaction.json', function (request, response, next) {
	108	+ //Callback 함수 Parameter -> result = {data: Object, error: Object}
	109	+ TestService.testTransaction((result) => {
	110	+ if (!result.error) {
	111	+ response.send(result.data);
	112	+ } else {
	113	+ next(result.error);//Global Error Handler에게 예외상황 맡기기
	114	+ }
	115	+ })
	116	+})
	117	+
	118	+//Module Export
	119	+module.exports = router;(파일 끝에 줄바꿈 문자 없음)

bdc4fdb

webpack.config.js (added)

+++ webpack.config.js

...	...	@@ -0,0 +1,42 @@
	1	+const { VueLoaderPlugin } = require("vue-loader");
	2	+
	3	+const {PROJECT_NAME, BASE_DIR, SERVICE_STATUS} = require('./Global');
	4	+
	5	+module.exports = {
	6	+ name: PROJECT_NAME,
	7	+ mode: SERVICE_STATUS,
	8	+ devtool: 'eval',
	9	+
	10	+ entry: {
	11	+ app: [`${BASE_DIR}/client/views/index.js`]
	12	+ },
	13	+
	14	+ module: {
	15	+ rules: [{
	16	+ test: /\.vue?$/,
	17	+ loader: 'vue-loader',
	18	+ }, {
	19	+ test: /\.(js\|jsx)?$/,
	20	+ loader: 'babel-loader',
	21	+ }, {
	22	+ test: /\.css$/,
	23	+ use: ['vue-style-loader', 'css-loader']
	24	+ }, {
	25	+ test: /\.(jpe?g\|png\|gif\|svg\|ttf\|eot\|woff\|woff2)$/i,
	26	+ use: [{
	27	+ loader:'url-loader',
	28	+ options:{
	29	+ limit:8192,
	30	+ fallback:require.resolve('file-loader')
	31	+ }
	32	+ }]
	33	+ }],
	34	+ },
	35	+
	36	+ plugins: [new VueLoaderPlugin()],
	37	+
	38	+ output: {
	39	+ path: `${BASE_DIR}/client/build`, // __dirname: webpack.config.js 파일이 위치한 경로
	40	+ filename: 'bundle.js'
	41	+ },
	42	+}(파일 끝에 줄바꿈 문자 없음)

Delete comment