Index: arms/html/reqAdd/content-container.html
===================================================================
diff -u -rf1ed5a64fbd25ba29fd3fc71625499b2c7b14bd5 -r6e2ee8557565a935ac203d0a8da794f99c478ab7
--- arms/html/reqAdd/content-container.html	(.../content-container.html)	(revision f1ed5a64fbd25ba29fd3fc71625499b2c7b14bd5)
+++ arms/html/reqAdd/content-container.html	(.../content-container.html)	(revision 6e2ee8557565a935ac203d0a8da794f99c478ab7)
@@ -29,11 +29,6 @@
                         </select>
                     </div>
                 </div>
-                <div style="margin-top: 10px;margin-bottom: 10px; border: 1px solid #0b67ff !important;" class="darkBack">
-                    <label id="newReqRegist" class="btn btn-primary btn-transparent btn-sm active" data-target="#myModal1" data-toggle="modal" style="width: 100%; background-color: #2477FF !important;">
-                        a-RMS의 신규 요구사항 등록하기
-                    </label>
-                </div>
                 <div id="mmenu" style="padding-bottom: 5px;">
                     <form class="form-search no-margin" role="form">
                         <div class="input-group">
@@ -82,15 +77,20 @@
                                     <a href="#stats" data-toggle="tab" id="defaultTab"><strong>상세 보기</strong></a>
                                 </li>
                                 <li>
-                                    <a href="#report" data-toggle="tab"><strong>문서로 보기</strong></a>
+                                    <a href="#report" data-toggle="tab" id="folderTab"><strong>리스트로 보기</strong></a>
                                 </li>
                                 <li>
-                                    <a href="#history" data-toggle="tab"><strong>리스트로 보기</strong></a>
+                                    <a href="#history" data-toggle="tab"><strong>문서로 보기</strong></a>
                                 </li>
                             </ul>
                         </header>
                         <div class="body tab-content">
                             <div id="stats" class="tab-pane active clearfix" style="padding-top: 10px !important">
+                                <div id="newReqDiv" style="margin-top: 10px;margin-bottom: 10px; border: 1px solid #0b67ff !important;" class="darkBack">
+                                    <label id="newReqRegist01" class="btn btn-primary btn-transparent btn-sm active" data-target="#myModal1" data-toggle="modal" style="width: 100%; background-color: #2477FF !important;">
+                                        a-RMS의 신규 요구사항 등록하기
+                                    </label>
+                                </div>
                                 <form class="form-horizontal" method="post">
                                     <fieldset>
                                         <div class="control-group">
@@ -216,12 +216,57 @@
                                 </form>
                             </div>
                             <div id="report" class="tab-pane" style="padding-top: 10px !important">
-                                <div>
-                                    문서로 보기 ( 어떻게 구현해야 할까? )
+                                <div id="newReqDiv" style="margin-top: 10px;margin-bottom: 10px; border: 1px solid #0b67ff !important;" class="darkBack">
+                                    <label id="newReqRegist02" class="btn btn-primary btn-transparent btn-sm active" data-target="#myModal1" data-toggle="modal" style="width: 100%; background-color: #2477FF !important;">
+                                        a-RMS의 신규 요구사항 등록하기
+                                    </label>
                                 </div>
+                                <table cellspacing="0" class="display responsive no-wrap" id="reqTable">
+                                    <thead>
+                                    <tr>
+                                        <th>c_id</th>
+                                        <th>c_left</th>
+                                        <th>c_title</th>
+                                    </tr>
+                                    </thead>
+                                </table>
                             </div>
                             <div id="history" class="tab-pane" style="padding-top: 10px !important">
-                                리스트로 보기 ( 데이터 테이블 )
+                                <div id="newReqDiv" style="margin-top: 10px;margin-bottom: 10px; border: 1px solid #0b67ff !important;" class="darkBack">
+                                    <label id="newReqRegist03" class="btn btn-primary btn-transparent btn-sm active" data-target="#myModal1" data-toggle="modal" style="width: 100%; background-color: #2477FF !important;">
+                                        a-RMS의 신규 요구사항 등록하기
+                                    </label>
+                                </div>
+                                <div class="col-md-12">
+                                    <div class="dd" id="nestable1">
+                                        <ol class="dd-list">
+                                            <li class="dd-item" data-id="1">
+                                                <div class="dd-handle">
+                                                    <i class="fa fa-sort"></i>
+                                                    <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
+                                                    &nbsp;&nbsp;&nbsp; 03 &nbsp;&nbsp;&nbsp;
+                                                    Barnard's Star
+                                                </div>
+                                            </li>
+                                            <li class="dd-item" data-id="2">
+                                                <div class="dd-handle">Item 2</div>
+                                                <ol class="dd-list">
+                                                    <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
+                                                    <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
+                                                    <li class="dd-item" data-id="5">
+                                                        <div class="dd-handle">Item 5</div>
+                                                        <ol class="dd-list">
+                                                            <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
+                                                            <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
+                                                            <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
+                                                        </ol>
+                                                    </li>
+                                                    <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
+                                                </ol>
+                                            </li>
+                                        </ol>
+                                    </div>
+                                </div>
                             </div>
                             <div class="body-middle">
                                 <form
@@ -362,7 +407,7 @@
                             <div class="controls form-group  col-sm-1">
                                 &nbsp;
                             </div>
-                            <label for="title" class="control-label" style="color: #f8f8f8;">반영 리뷰어 <span class="required">*</span>
+                            <label for="popup-pdService-reviewers" class="control-label" style="color: #f8f8f8;">반영 리뷰어 <span class="required">*</span>
                                 <span class="input-group-addon" style="display: inline !important;">
                                     <i class="glyphicon glyphicon-gift"></i>
                                 </span></label>
@@ -444,6 +489,7 @@
     </div>
     <!-- /.modal-dialog -->
 </div>
+
 <!-- page specific application css/js -->
 <style type="text/css">
     .modalDarkBack{
@@ -539,6 +585,224 @@
     color: #999 !important;
     padding-left: 6px;
 }
+
+
+
+    /**
+     * Nestable
+     */
+    .dd {
+        position: relative;
+        display: block;
+        margin: 0;
+        padding: 0;
+        max-width: 600px;
+        list-style: none;
+        font-size: 13px;
+        line-height: 20px;
+    }
+
+    .dd-list {
+        display: block;
+        position: relative;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .dd-list .dd-list {
+        padding-left: 30px;
+    }
+
+    .dd-collapsed .dd-list {
+        display: none;
+    }
+
+    .dd-item,
+    .dd-empty,
+    .dd-placeholder {
+        display: block;
+        position: relative;
+        margin: 0;
+        padding: 0;
+        min-height: 20px;
+        font-size: 13px;
+        line-height: 20px;
+    }
+
+    .dd-handle {
+        display: block;
+        height: 30px;
+        margin: 5px 0;
+        padding: 5px 10px;
+        color: #f8f8f8;
+        text-decoration: none;
+        background: rgba(51, 51, 51, 0.4);
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    .dd-item > button {
+        display: block;
+        position: relative;
+        cursor: pointer;
+        float: left;
+        width: 25px;
+        height: 20px;
+        margin: 5px 0;
+        padding: 0;
+        text-indent: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        border: 0;
+        background: transparent;
+        font-size: 12px;
+        line-height: 1;
+        text-align: center;
+        font-weight: bold;
+        color: #f8f8f8;
+    }
+
+    .dd-item > button:before {
+        content: '+';
+        display: block;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        text-indent: 0;
+    }
+
+    .dd-item > button[data-action="collapse"]:before {
+        content: '-';
+    }
+
+    .dd-placeholder,
+    .dd-empty {
+        margin: 5px 0;
+        padding: 0;
+        min-height: 30px;
+        background: rgba(51, 51, 51, 0.2);
+        border: 1px dashed rgba(255, 255, 255, 0.6);
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+    }
+
+    .dd-empty {
+        border: 1px dashed rgba(255, 255, 255, 0.6);
+        min-height: 100px;
+        background-size: 60px 60px;
+        background-position: 0 0, 30px 30px;
+    }
+
+    .dd-dragel {
+        position: absolute;
+        pointer-events: none;
+        z-index: 9999;
+    }
+
+    .dd-dragel > .dd-item .dd-handle {
+        margin-top: 0;
+    }
+
+    .dd-dragel .dd-handle {
+        -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    /**
+     * Nestable Extras
+     */
+    .nestable-lists {
+        display: block;
+        clear: both;
+        padding: 30px 0;
+        width: 100%;
+        border: 0;
+        border-top: 2px solid #ddd;
+        border-bottom: 2px solid #ddd;
+    }
+
+    @media only screen and (min-width: 700px) {
+        .dd + .dd {
+            margin-left: 2%;
+        }
+    }
+    .dd-hover > .dd-handle {
+        background: #2ea8e5 !important;
+    }
+
+    /**
+     * Nestable Draggable Handles
+     */
+    .dd3-content {
+        display: block;
+        height: 30px;
+        margin: 5px 0;
+        padding: 5px 10px 5px 40px;
+        color: #333;
+        text-decoration: none;
+        font-weight: bold;
+        border: 1px solid #ccc;
+        background: #fafafa;
+        background: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
+        background: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
+        background: linear-gradient(top, #fafafa 0%, #eeeeee 100%);
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+    }
+
+    .dd3-content:hover {
+        color: #2ea8e5;
+        background: #fff;
+    }
+
+    .dd-dragel > .dd3-item > .dd3-content {
+        margin: 0;
+    }
+
+    .dd3-item > button {
+        margin-left: 30px;
+    }
+
+    .dd3-handle {
+        position: absolute;
+        margin: 0;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+        width: 30px;
+        text-indent: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        border: 1px solid #aaa;
+        background: #ddd;
+        background: -webkit-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
+        background: -moz-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
+        background: linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .dd3-handle:before {
+        content: 'тЙб';
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 3px;
+        width: 100%;
+        text-align: center;
+        text-indent: 0;
+        color: #fff;
+        font-size: 20px;
+        font-weight: normal;
+    }
+
+    .dd3-handle:hover {
+        background: #ddd;
+    }
 </style>
 <script type="text/javascript" charset="utf-8">
     //<![CDATA[
Index: arms/js/reqAdd.js
===================================================================
diff -u -rf1ed5a64fbd25ba29fd3fc71625499b2c7b14bd5 -r6e2ee8557565a935ac203d0a8da794f99c478ab7
--- arms/js/reqAdd.js	(.../reqAdd.js)	(revision f1ed5a64fbd25ba29fd3fc71625499b2c7b14bd5)
+++ arms/js/reqAdd.js	(.../reqAdd.js)	(revision 6e2ee8557565a935ac203d0a8da794f99c478ab7)
@@ -1,10 +1,14 @@
+let selectedJsTreeId; // 요구사항 아이디
+
 $(function () {
 	setSideMenu(
 		"sidebar_menu_requirement",
 		"sidebar_menu_requirement_regist",
 		"requirement-elements-collapse"
 	);
 
+	$('#newReqDiv').hide();
+
 	//제품 서비스 셀렉트 박스 이니시에이터
 	$(".chzn-select").each(function(){
 		$(this).select2($(this).data());
@@ -38,7 +42,32 @@
 
 });
 
+// --- 데이터 테이블 설정 --- //
+function dataTableLoad(selectId) {
+	// 데이터 테이블 컬럼 및 열그룹 구성
+	var columnList = [
+		{ data: "c_id" },
+		{ data: "c_left" },
+		{ data: "c_title" },
+	];
+	var rowsGroupList = [];
+	var tableName = "T_ARMS_REQADD_" + $('#country').val();
 
+	if(selectId == 2){
+		dataTableBuild("#reqTable", "reqAdd/" + tableName, "/getMonitor.do", columnList, rowsGroupList);
+	}else{
+		dataTableBuild("#reqTable", "reqAdd/" + tableName, "/getChildNode.do?c_id="+selectId, columnList, rowsGroupList);
+	}
+
+	// ----- 데이터 테이블 빌드 이후 별도 스타일 구성 ------ //
+	//datatable 좌상단 datarow combobox style
+	$("body").find("[aria-controls='pdserviceTable']").css("width", "100px");
+	$("select[name=pdserviceTable_length]").css("width", "50px");
+}
+// 데이터 테이블 구성 이후 꼭 구현해야 할 메소드 : 열 클릭시 이벤트
+function dataTableClick(selectedData) {
+	console.log(selectedData);
+}
 ///////////////////////////////////////////////////////////////////////////////
 
 /** file upload **/
@@ -97,24 +126,29 @@
 
 // --- jstree ( 요구사항 ) 선택 이벤트 --- //
 function jsTreeClick(selectedNodeID) {
-	var selectId = selectedNodeID.attr("id").replace("node_", "").replace("copy_", "");
-	console.log("selectedNodeID===" + selectId);
+	selectedJsTreeId = selectedNodeID.attr("id").replace("node_", "").replace("copy_", "");
 
 	var selectRel = selectedNodeID.attr("rel");
 	console.log("selectRel -===> " + selectRel);
 	if(selectRel == "default"){
 		$('#defaultTab').get(0).click();
 		$('.widget-tabs ul li:nth-child(2)').hide();
 		$('.widget-tabs ul li:nth-child(3)').hide();
+		$('#newReqDiv').hide();
 	}else{
+		$('#folderTab').get(0).click();
 		$('.widget-tabs ul li:nth-child(2)').show();
 		$('.widget-tabs ul li:nth-child(3)').show();
+		$('#newReqDiv').show();
+		/////////////////////////////////////////   데이터 테이블 설정
+		dataTableLoad(selectedJsTreeId);
+
 	}
 
 
 	var tableName = "T_ARMS_REQADD_" + $('#country').val();
 	$.ajax({
-		url: "/auth-user/api/arms/reqAdd/" + tableName + "/getNode.do?c_id=" + selectId,
+		url: "/auth-user/api/arms/reqAdd/" + tableName + "/getNode.do?c_id=" + selectedJsTreeId,
 		type: "GET",
 		contentType: "application/json;charset=UTF-8",
 		dataType : "json",
@@ -162,7 +196,7 @@
 		console.log("always call");
 	});
 
-	$('#fileIdLink').val(selectId);
+	$('#fileIdLink').val(selectedJsTreeId);
 	//jstree click 시 file 컨트롤
 	//파일 리스트 초기화
 	$("table tbody.files").empty();
@@ -173,7 +207,7 @@
 		// Uncomment the following to send cross-domain cookies:
 		//xhrFields: {withCredentials: true},
 		url: '/auth-user/api/arms/fileRepository/getFilesByNode.do',
-		data: { fileIdLink: selectId, c_title: tableName },
+		data: { fileIdLink: selectedJsTreeId, c_title: tableName },
 		dataType: 'json',
 		context: $fileupload[0]
 	}).done(function (result) {
@@ -229,9 +263,19 @@
 
 // 신규 제품(서비스) 등록 버튼
 // --- 팝업 띄울때 사이즈 조정 -- //
-$("#newReqRegist").click(function () {
+$("#newReqRegist01").click(function () {
+	registNewPopup();
+});
+$("#newReqRegist02").click(function () {
+	registNewPopup();
+});
+$("#newReqRegist03").click(function () {
+	registNewPopup();
+});
 
-	var height = $(document).height() - 600;
+function registNewPopup(){
+
+	var height = $(document).height() - 700;
 	$(".modal-body")
 		.find(".cke_contents:eq(0)")
 		.css("height", height + "px");
@@ -253,14 +297,14 @@
 		progress: true
 	}).done(function(data) {
 
-		 ////////////////////////////////////////////////////////////
-			//var jira_name = obj.c_title;
-			//selectConnectID = obj.c_id;
-			console.log("c_reviewer01==" + data.c_reviewer01);
-			console.log("c_reviewer02==" + data.c_reviewer02);
-			console.log("c_reviewer03==" + data.c_reviewer03);
-			console.log("c_reviewer04==" + data.c_reviewer04);
-			console.log("c_reviewer05==" + data.c_reviewer05);
+		////////////////////////////////////////////////////////////
+		//var jira_name = obj.c_title;
+		//selectConnectID = obj.c_id;
+		console.log("c_reviewer01==" + data.c_reviewer01);
+		console.log("c_reviewer02==" + data.c_reviewer02);
+		console.log("c_reviewer03==" + data.c_reviewer03);
+		console.log("c_reviewer04==" + data.c_reviewer04);
+		console.log("c_reviewer05==" + data.c_reviewer05);
 
 		//clear
 		$('#popup-pdService-reviewers').val(null).trigger('change');
@@ -312,10 +356,10 @@
 			$('#popup-pdService-reviewer').css('height', resultValue + 'px');
 		}, 250);
 
-			////////////////////////////////////////////////////////////////
+		////////////////////////////////////////////////////////////////
 	});
 
-});
+}
 
 // --- select2 (사용자 자동완성 검색 ) 설정 --- //
 $(".js-data-example-ajax").select2({
@@ -429,7 +473,7 @@
 		url: "/auth-user/api/arms/reqAdd/" + tableName + "/addNode.do",
 		type: "POST",
 		data: {
-			ref: 2,
+			ref: selectedJsTreeId,
 			c_title: $("#req-title").val(),
 			c_type: "default",
 			c_pdService_Link: $('#country').val(),
Index: arms/reqAdd.html
===================================================================
diff -u -r48de2329a74f55ecd76f73272d26f2755fd41de6 -r6e2ee8557565a935ac203d0a8da794f99c478ab7
--- arms/reqAdd.html	(.../reqAdd.html)	(revision 48de2329a74f55ecd76f73272d26f2755fd41de6)
+++ arms/reqAdd.html	(.../reqAdd.html)	(revision 6e2ee8557565a935ac203d0a8da794f99c478ab7)
@@ -140,6 +140,8 @@
     <script src="../reference/light-blue/lib/jquery-maskedinput/jquery.maskedinput.js"></script>
     <script src="../reference/light-blue/lib/parsley/parsley.js"> </script>
     <script src="../reference/light-blue/lib/jquery.autogrow-textarea.js"></script>
+    <script src="../reference/light-blue/lib/jquery.ui.touch-punch.js"></script>
+    <script src="../reference/light-blue/lib/jquery.nestable.js"></script>
 
     <!-- jquery upload plugins -->
     <script src="../reference/light-blue/lib/icheck.js/jquery.icheck.js"></script>
FishEye: Tag d2133460ec003f42375d401a6329c35714b65209 refers to a dead (removed) revision in file `reference/light-blue/component_list_groups.html'.
FishEye: No comparison available.  Pass `N' to diff?