Index: vue/src/components/DevOps/contents/JSTFDownload.vue
===================================================================
diff -u -r3602b6fe1076c017a77fcee7f4d84d21ea3a6785 -r1201ac916133458768f173865df76c4c683906c4
--- vue/src/components/DevOps/contents/JSTFDownload.vue	(.../JSTFDownload.vue)	(revision 3602b6fe1076c017a77fcee7f4d84d21ea3a6785)
+++ vue/src/components/DevOps/contents/JSTFDownload.vue	(.../JSTFDownload.vue)	(revision 1201ac916133458768f173865df76c4c683906c4)
@@ -1,368 +1,216 @@
-html,
-body {
-  font-family: 'Nanum Gothic' !important;
-}
-body.org {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwJSIgY3k9IjAiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoNzQsIDEyMSwgMTQ3LCAwLjg5KSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2JhKDIyNiwgMjI2LCAyMjYsIDAuODcpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDE4NSwgMTM1LCAxMzEsIDAuODcpIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4='),
-    url('../images/bgnoise_lg_dark.png');
-  background-color: rgba(74, 121, 147, 0.89);
-  background: radial-gradient(
-      farthest-side ellipse at 10% 0,
-      rgba(74, 121, 147, 0.89),
-      rgba(204, 204, 204, 0.85) 60%,
-      rgba(185, 135, 131, 0.87) 120%
-    ),
-    url('../images/bgnoise_lg_dark.png');
-  background: -webkit-radial-gradient(
-      10% 0,
-      farthest-side ellipse,
-      rgba(74, 121, 147, 0.89),
-      rgba(204, 204, 204, 0.85) 60%,
-      rgba(185, 135, 131, 0.87) 120%
-    ),
-    url('../images/bgnoise_lg_dark.png');
-  background: -moz-radial-gradient(
-      10% 0,
-      farthest-side ellipse,
-      rgba(74, 121, 147, 0.89),
-      rgba(204, 204, 204, 0.85) 60%,
-      rgba(185, 135, 131, 0.87) 120%
-    ),
-    url('../images/bgnoise_lg_dark.png');
-}
-body {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwJSIgY3k9IjAiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMTAyLCAxMDUsIDEwNCwgMC45MCkiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiYSg5MywgMTEyLCAxMTksIDAuODkpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDE2MCwgMTc0LCAxNTAsIDAuOTApIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4='),
-    url('../images/bgnoise_lg_dark.png');
-  background-color: rgba(102, 105, 104, 0.9);
-  background: radial-gradient(
-      farthest-side ellipse at 10% 0,
-      rgba(40, 40, 40, 0.9),
-      rgba(90, 100, 130, 0.89),
-      rgba(60, 60, 60, 0.9)
-    ),
-    url('../images/bgnoise_lg_dark.png');
-  background: -webkit-radial-gradient(
-      10% 0,
-      farthest-side ellipse,
-      rgba(40, 40, 40, 0.9),
-      rgba(90, 100, 130, 0.89),
-      rgba(60, 60, 60, 0.9)
-    ),
-    url('../images/bgnoise_lg_dark.png');
-  background: -moz-radial-gradient(
-      10% 0,
-      farthest-side ellipse,
-      rgba(40, 40, 40, 0.9),
-      rgba(90, 100, 130, 0.89),
-      rgba(60, 60, 60, 0.9)
-    ),
-    url('../images/bgnoise_lg_dark.png');
-  padding-bottom: 10px;
-}
-a {
-  text-decoration: none;
-  color: inherit;
-}
-ul,
-ol {
-  list-style: none;
-}
-/* Font */
-.jstree-default-context {
-  font-family: 'Nanum Gothic';
-  font-size: 12px;
-}
-.font10 {
-  font-family: 'Nanum Gothic';
-  font-size: 10px;
-}
-.font11 {
-  font-family: 'Nanum Gothic';
-  font-size: 11px;
-}
-.font12 {
-  font-family: 'Nanum Gothic';
-  font-size: 12px;
-}
-.font13 {
-  font-family: 'Nanum Gothic';
-  font-size: 13px;
-}
-.font14 {
-  font-family: 'Nanum Gothic';
-  font-size: 14px;
-}
-.font15 {
-  font-family: 'Nanum Gothic';
-  font-size: 15px;
-}
-.font16 {
-  font-family: 'Nanum Gothic';
-  font-size: 16px;
-}
-.font17 {
-  font-family: 'Nanum Gothic';
-  font-size: 17px;
-}
-.font18 {
-  font-family: 'Nanum Gothic';
-  font-size: 18px;
-}
+<div class="col-lg-4">
+    <section class="widget">
+        <header>
+            <h4>
+                <span class="font13" style="font-weight: bold;">
+                    <i class="fa fa-sort-amount-asc"></i> 제품(서비스) 조회
+                </span>
+            </h4>
+            <div class="actions">
+                <button class="btn btn-transparent btn-xs" onclick="$('#demo').jstree('open_all');">Show All
+                    <i class="fa fa-arrow-down"></i>
+                </button>
+            </div>
+        </header>
+        <div class="body">
+            <div class="wrapper">
+                <div id="mmenu" style="padding-bottom: 5px;">
+                    <form class="form-search no-margin" role="form">
+                        <div class="input-group">
+                            <input type="search" id="text" class="form-control searchDarkBack" style="color: #f8f8f8;" placeholder="찾을 노드 이름 입력" data-tooltip="Press Enter To Node To Search">
+                            <span class="input-group-btn">
+                                <button type="button" id="search" title="Search" class="btn btn-default btn-sm">
+                                    Search
+                                </button>
+                            </span>
+                        </div>
+                    </form>
+                </div>
+                <div id="demo" style="padding-top: 5px;" class="darkBack"></div>
+                <div style="margin-top: 10px;" class="darkBack">
+                    설명
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
 
-.content {
-  position: relative;
-  padding: 30px 2.5641%;
-  -webkit-transition: margin-top 0.35s ease, opacity 0.2s;
-  -o-transition: margin-top 0.35s ease, opacity 0.2s;
-  transition: margin-top 0.35s ease, opacity 0.2s;
-  max-width: none;
-  width: auto;
-  opacity: 1;
-}
+<div class="col-lg-8">
+    <section class="widget">
+        <header>
+            <h4>
+                <span class="font13" style="font-weight: bold;">
+                    <i class="fa fa-edit"></i> 제품(서비스) 등록 / 변경
+                </span>
+            </h4>
+            <div class="widget-controls">
+                <a title="Options" href="#"><i class="glyphicon glyphicon-cog"></i></a>
+                <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
+                <a data-widgster="collapse" title="Collapse" href="#"><i
+                        class="glyphicon glyphicon-chevron-down"></i></a>
+                <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
+            </div>
+        </header>
+        <div class="body">
+            <div class="box box-primary" style="border-top-color: #bbbbbb; border-top-width: 0px; margin-bottom: 35px !important;">
+                <div class="box-body">
+                    <div class="form-group" style="padding-top: 10px;">
+                        <div class="control-group">
+                            <label class="control-label" for="prepended-input">제품(서비스) 등록 모드 &nbsp;</label>
+                            <div class="controls form-group" style="margin-bottom: 10px;">
+                                <div class="input-group col-sm-8" style="text-align: left;">
+                                    <span class="input-group-addon"><i class="fa fa-sliders"></i></span>
+                                    <div class="btn-group" data-toggle="buttons">
+                                        <label class="btn btn-transparent btn-sm active">
+                                            <input type="radio"> 신규 등록 모드
+                                        </label>
+                                        <label class="btn btn-transparent btn-sm">
+                                            <input type="radio"> 업데이트 모드
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="prepended-input">제품(서비스) 이름 &nbsp;</label>
+                            <div class="controls form-group" style="margin-bottom: 10px;">
+                                <div class="input-group col-sm-8">
+                                    <span class="input-group-addon"><i class="glyphicon glyphicon-gift"></i></span>
+                                    <input id="prepended-input" class="form-control font13 darkBack" style="color: #f8f8f8;" size="16" type="text" placeholder="제품(서비스)명을 입력해 주세요">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="prepended-input">제품(서비스) 오너 &nbsp;</label>
+                            <div class="controls form-group" style="margin-bottom: 10px;">
+                                <div class="input-group col-sm-8">
+                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
+                                    <select class="js-data-example-ajax form-control font13 darkBack" placeholder="제품(서비스)의 관리자를 등록해 주세요"></select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="prepended-input">제품(서비스) 리뷰어 &nbsp;</label>
+                            <div class="controls form-group" style="margin-bottom: 10px;">
+                                <div class="input-group col-sm-8">
+                                    <span class="input-group-addon"><i class="fa fa-users"></i></span>
+                                    <select class="js-example-basic-multiple-limit js-states form-control font13 darkBack" multiple=""></select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="editor" class="darkBack">
+                        <p>입력란이 좁다면 하단에 새창으로 띄우기를 클릭하세요.</p>
+                    </div>
+                </div>
+                <div class="body-middle">
+                    <form id="fileupload" action="server/php" method="POST" enctype="multipart/form-data">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div id="dropzone" class="dropzone">
+                                    <i class="fa fa-cloud-upload"></i>
+                                    Drop files here
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12 fileupload-progress fade font12">
+                                <!-- The global progress bar -->
+                                <div class="progress progress-success progress-striped active font12" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+                                    <div class="bar" style="width:0%;"></div>
+                                </div>
+                                <!-- The extended global progress information -->
+                                <div class="progress-extended font12">&nbsp;</div>
+                            </div>
+                        </div>
+                        <div class="form-actions fileupload-buttonbar no-margin">
+                            <span class="btn btn-sm btn-inverse fileinput-button">
+                                    <i class="fa fa-plus"></i>
+                                    <span>Add files...</span>
+                                    <input type="file" name="files[]" multiple="">
+                                </span>
+                            <button type="submit" class="btn btn-inverse btn-sm start">
+                                <i class="fa fa-upload"></i>
+                                <span>Start upload</span>
+                            </button>
+                            <button type="reset" class="btn btn-inverse btn-sm cancel">
+                                <i class="fa fa-ban"></i>
+                                <span>Cancel upload</span>
+                            </button>
+                        </div>
+                        <div class="fileupload-loading"><i class="fa fa-spin fa-spinner"></i></div>
+                        <!-- The table listing the files available for upload/download -->
+                        <table role="presentation" class="table table-striped" style="margin-bottom: 5px;">
+                            <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
+                        </table>
+                    </form>
+                </div>
+                <p class="pull-right" style="padding-top: 10px;"><button class="btn btn-info" id="show-info-message">제품(서비스) 등록</button></p>
+                <p class="pull-right" style="padding-top: 10px; padding-right: 10px;">
+                    <button type="button" class="btn btn-success" id="modalPopupId"
+                            data-toggle="modal" data-target="#myModal2">새창으로 편집</button>
+                </p>
+                <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
+                    <div class="modal-dialog" style="width: 90%; height: 90%">
+                        <div class="modal-content darkBack">
 
-.widgetheader {
-  border-radius: 3px;
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  padding: 5px 5px 1px 5px;
-  color: #f8f8f8;
-  margin-bottom: 5px;
-  position: relative;
-}
+                            <div class="modal-header" style="padding: 0px; border-bottom: 0px">
+                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style=" color: #ffffff; font-size: 20px; opacity: 0.8; padding: 5px;">×</button>
+                                <h4 class="modal-title font14" id="myModalLabel2" style="color: #f8f8f8;text-align: left; padding: 5px;">
+                                    <span class="font13" style="font-weight: bold;">
+                                        <i class="fa fa-edit"></i> 제품(서비스) 신규 등록 팝업
+                                    </span>
+                                    <section class="search-result" style="border-left: 5px solid #e5603b;">
+                                        <p style="font-size: 13px; margin: 5px 0px 0px 0px; padding-left: 5px;"> 입력한 내용은 부모창과 동기화 됩니다. 부모창에서 등록하기를 진행해야 저장됩니다.</p>
+                                    </section>
+                                </h4>
+                            </div>
+                            <div class="modal-body" style="padding: 5px;">
+                                <div id="modal-editor" class="darkBack">
+                                    <p>입력란이 좁다면 하단에 새창으로 띄우기를 클릭하세요.</p>
+                                </div>
+                            </div>
+                            <div class="modal-footer" style="background-color: transparent; padding: 5px; text-align: right; border-top: 0px;">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                                <button type="button" class="btn btn-primary">Save changes</button>
+                            </div>
 
-#topicon {
-  width: 36px;
-  height: 35px;
-  position: fixed;
-  right: 1%;
-  bottom: 15px;
-  z-index: 200;
-  transition: 0.3s;
-  cursor: pointer;
-  opacity: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding-left: -1px;
-  animation: doongdoong 1.3s linear infinite;
-}
-@keyframes doongdoong {
-  0% {
-    bottom: 15px;
-  }
-  50% {
-    bottom: 10px;
-  }
-  100% {
-    bottom: 15px;
-  }
-}
+                        </div><!-- /.modal-content -->
+                    </div><!-- /.modal-dialog -->
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
 
-.content .content-footer {
-  position: initial;
-  bottom: 0px;
-  color: #d2d2d2;
+<!-- page specific application css/js -->
+<style type="text/css">
+.btn-transparent.active {
+    color: white;
+    background: rgba(51, 51, 51, 0.55);
+    color: #ffffff;
+    background-color: #e5603b;
+    border-color: rgba(0, 0, 0, 0.15);
 }
-
-.breadcrumb {
-  padding: 0px;
-  margin: 3px;
-  list-style: none;
-  background-color: transparent;
-  border-radius: 3px;
+.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
+    outline: 0px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
 }
-
-.darkBack {
-  background: rgba(51, 51, 51, 0.4) !important;
-  border: 1px solid rgba(51, 51, 51, 0.425) !important;
+.select2-search__field::-webkit-input-placeholder,
+.select2-search__field::placeholder {
+    color: #999 !important;
+    padding-left: 6px;
 }
+</style>
+<script type="text/javascript" charset="utf-8">
+    //<![CDATA[
 
-.searchDarkBack {
-  background: url(../images/search-white.png) 5px 5px no-repeat rgba(51, 51, 51, 0.4) !important;
-  border: 1px solid rgba(51, 51, 51, 0.425) !important;
-}
+    // 초기 개발 및 확인 용도
+    $(function () {
 
-/*****************/
-/** jNotify CSS **/
-/*****************/
-#jNotify {
-  position: absolute !important;
-  -webkit-transition: background-color 0.4s !important;
-  -o-transition: background-color 0.4s !important;
-  transition: background-color 0.4s !important;
-  border-radius: 5px !important;
-  border-color: transparent !important;
-  background-color: rgba(52, 52, 52, 0.425) !important;
-  margin-bottom: 1em !important;
-  color: #f8f8f8 !important;
-  font-weight: 500 !important;
+    });
 
-  /* background: #d8e6fc url("../info.png") no-repeat 15px center; */
-  padding: 10px;
-  padding-left: 50px;
-  margin: 15px;
-  z-index: 99999;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-}
-#jNotify a {
-  color: #35517c !important;
-  text-decoration: none;
-}
-
-/******************/
-/** jSuccess CSS **/
-/******************/
-#jSuccess {
-  position: absolute !important;
-  -webkit-transition: background-color 0.4s !important;
-  -o-transition: background-color 0.4s !important;
-  transition: background-color 0.4s !important;
-  border-radius: 5px !important;
-  border-color: transparent !important;
-  background-color: rgba(52, 52, 52, 0.425) !important;
-  margin-bottom: 1em !important;
-  color: #f8f8f8 !important;
-  font-weight: 500 !important;
-
-  /* background: #e6efc2 url("../success.png") no-repeat 15px center; */
-  padding: 10px;
-  padding-left: 50px;
-  margin: 15px;
-  z-index: 99999;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-}
-#jSuccess a {
-  color: #264409 !important;
-  text-decoration: none;
-}
-
-/****************/
-/** jError CSS **/
-/****************/
-#jError {
-  position: absolute !important;
-  -webkit-transition: background-color 0.4s !important;
-  -o-transition: background-color 0.4s !important;
-  transition: background-color 0.4s !important;
-  border-radius: 5px !important;
-  border-color: transparent !important;
-  background-color: rgba(52, 52, 52, 0.425) !important;
-  margin-bottom: 1em !important;
-  color: #f8f8f8 !important;
-  font-weight: 500 !important;
-
-  /* background: #fbe3e4 url("../error.png") no-repeat 15px center; */
-  padding: 10px;
-  padding-left: 50px;
-  margin: 15px;
-  z-index: 99999;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-}
-#jError a {
-  color: #8a1f11 !important;
-  text-decoration: none;
-}
-
-/** OVERLAY **/
-#jOverlay {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99998;
-}
-
-.mailbox-content .form-email-compose .control-group {
-  margin-bottom: 10px;
-}
-
-.fileupload-buttonbar .btn,
-.fileupload-buttonbar .toggle {
-  margin-bottom: 5px;
-  background: rgba(51, 51, 51, 0.4);
-  border-color: transparent;
-  color: #fff;
-  text-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  -webkit-transition: background-color 0.2s;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-.fileinput-button {
-  position: relative;
-  overflow: hidden;
-  float: left;
-  margin-right: 4px;
-  color: #fff;
-  text-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border-color: #c5c5c5;
-  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
-  padding: 2px 10px;
-  font-size: 11.05px;
-  line-height: 1.9;
-  border-radius: 0;
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 300;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 4px 12px;
-  font-size: 13px;
-  line-height: 20px;
-  border-radius: 1px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-.fileinput-button input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0;
-  opacity: 0;
-  filter: alpha(opacity=0);
-  transform: translate(-300px, 0) scale(4);
-  font-size: 23px;
-  direction: ltr;
-  cursor: pointer;
-}
-.fileupload-loading {
-  position: absolute;
-  left: 50%;
-  width: 128px;
-  height: 128px;
-  display: none;
-}
-.dropzone {
-  border: 1px dashed #eee;
-  margin-top: 10px;
-  font-size: 13px;
-  color: #eee;
-  line-height: 100px;
-  vertical-align: middle;
-}
-
-.control-label {
-  float: left;
-  width: 160px;
-  padding-top: 5px;
-  text-align: right;
-}
+    //]]>
+</script>
+<script src="../reference/light-blue/js/fileupload.js"></script>
+<script type="text/javascript" src='js/pdServiceRegist.js' charset="utf-8"></script>
\ No newline at end of file