Index: arms/html/reqStatus/content-container.html
===================================================================
diff -u -r1dd71127d3978032a81327a9e016b090d52e9fad -r972339767a9fd46fa7228b357dc5ff232c4ba774
--- arms/html/reqStatus/content-container.html	(.../content-container.html)	(revision 1dd71127d3978032a81327a9e016b090d52e9fad)
+++ arms/html/reqStatus/content-container.html	(.../content-container.html)	(revision 972339767a9fd46fa7228b357dc5ff232c4ba774)
@@ -53,7 +53,7 @@
         <header>
             <h4>
                 <span class="font13" style="font-weight: bold;">
-                    <i class="fa fa-edit"></i> 요구사항 현황 리스트
+                    <i class="fa fa-edit"></i> 요구사항 리스트
                 </span>
             </h4>
             <div class="widget-controls">
@@ -71,18 +71,6 @@
             <div class="box box-primary" style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important;">
                 <div class="box-body">
                     <table id="jstreeTable" class="display responsive no-wrap" cellspacing="0">
-                        <thead>
-                        <tr>
-                            <th>c_id</th>
-                            <th>key</th>
-                            <th>내용</th>
-                            <th>상태</th>
-                            <th>변경자</th>
-                            <th>담당자</th>
-                            <th>created</th>
-                            <th>updated</th>
-                        </tr>
-                        </thead>
                     </table>
                 </div>
             </div>
@@ -93,25 +81,7 @@
     </section>
 </div>
 
-<!-- Modal -->
-<div class="modal fade">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h5 class="modal-title"></h5>
-            </div>
-            <div class="modal-body">
 
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">Close</button>
-                <button type="button" class="btn btn-primary">Save changes</button>
-            </div>
-        </div>
-    </div>
-</div>
-
 <!-- page specific application css/js -->
 <style type="text/css">
     .btn-transparent.active {
Index: arms/js/reqStatus.js
===================================================================
diff -u -r1dd71127d3978032a81327a9e016b090d52e9fad -r972339767a9fd46fa7228b357dc5ff232c4ba774
--- arms/js/reqStatus.js	(.../reqStatus.js)	(revision 1dd71127d3978032a81327a9e016b090d52e9fad)
+++ arms/js/reqStatus.js	(.../reqStatus.js)	(revision 972339767a9fd46fa7228b357dc5ff232c4ba774)
@@ -1,6 +1,5 @@
 // --- 사이드 메뉴 -- //
 $(function () {
-    console.log('#### req status')
     setSideMenu();
 });
 
@@ -20,7 +19,6 @@
     },1000);
 }
 
-let rowData = null;
 // --- jstree 설정 -- //
 function jsTreeClick(selectedNodeID) {
     console.log(selectedNodeID);
@@ -359,8 +357,34 @@
             jsTreeClick(data.rslt.obj.attr("id"));
         }
     });
+
+    $("#mmenu input, #mmenu button").click(function() {
+        switch (this.id) {
+            case "add_default":
+            case "add_folder":
+                $("#pdServiceTree").jstree("create", null, "last", {
+                    "attr": {
+                        "rel": this.id.toString().replace("add_", "")
+                    }
+                });
+                break;
+            case "search":
+                $("#pdServiceTree").jstree("search", document.getElementById("text").value);
+                break;
+            case "text":
+                break;
+            default:
+                $("#pdServiceTree").jstree(this.id);
+                break;
+        }
+    });
 }
 
+// 요구사항 상세 보기 클릭 이벤트
+$( "#selectView" ).click(function() {
+    location.href="reqServiceListView.html";
+});
+
 // --- 데이터 테이블 설정 --- //
 $(function () {
     jstreeDataTableReload();
@@ -383,52 +407,69 @@
 
     var isDevelopingToRoute = "/auth-user";
 
+    var data = [
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Dev-Backend v.1.3.1', 'ISSUE-DEV-01', 'TEST-REQ-01', 'Resolved'],
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Dev-Backend v.11.9.15', 'ISSUE-DEV-16', 'TEST-REQ-01', 'Closed'],
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Design-Front v.12.93.1', 'ISSUE-DES-193','TEST-REQ-01', 'Open'],
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Oper-DB v.1.3.1', 'ISSUE-DB-163','TEST-REQ-01', 'Progress'],
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Oper-SYS v.0.3.0', 'ISSUE-SYS-213','TEST-REQ-01', 'Progress'],
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Oper-SYS v.3.9.11', 'ISSUE-SYS-863','TEST-REQ-01', 'Progress'],
+        ['aRMS Product', 'REQ-Auth-13', 'JIRA-Oper-SYS v.15.3.1', 'ISSUE-DO-10','TEST-REQ-01', 'Progress'],
+
+        ['aRMS Product', 'REQ-Auth-19', 'JIRA-Dev-Backend v.1.3.9', 'ISSUE-DEV-101', 'TEST-REQ-13', 'Resolved'],
+        ['aRMS Product', 'REQ-Auth-19', 'JIRA-Dev-Backend v.1.2.91', 'ISSUE-DEV-136', 'TEST-REQ-13', 'Closed'],
+        ['aRMS Product', 'REQ-Auth-19', 'JIRA-Design-Front v.4.9.1', 'ISSUE-DES-143', 'TEST-REQ-13', 'Open'],
+        ['aRMS Product', 'REQ-Auth-19', 'JIRA-Oper-DB v.61.3.1', 'ISSUE-DB-763', 'TEST-REQ-13', 'Progress'],
+        ['aRMS Product', 'REQ-Auth-19', 'JIRA-Oper-SYS v.1.39.10', 'ISSUE-SYS-913', 'TEST-REQ-13', 'Progress'],
+        ['aRMS Product', 'REQ-Auth-21', 'JIRA-Oper-SYS v.14.3.1', 'ISSUE-SYS-263', 'TEST-REQ-313', 'Progress'],
+        ['aRMS Product', 'REQ-Auth-21', 'JIRA-Oper-SYS v.1.9.1', 'ISSUE-DO-40', 'TEST-REQ-313', 'Progress']
+
+    ];
+
     var tempDataTable = $('#jstreeTable').DataTable({
-        "ajax": {
-            "url": isDevelopingToRoute + "/api/arms/reqspec/getMonitor.do",
-            "dataSrc": ""
-        },
         "destroy": true,
         "processing": true,
         "responsive": true,
         "select": true,
-        "columns": [
-            { "data": "c_id" },
-            { "data": "c_parentid" },
-            { "data": "c_title" },
-            { "data": "c_position" },
-            { "data": "c_left" },
-            { "data": "c_right" },
-            { "data": "c_level" },
-            { "data": "c_type" }
+        columns: [
+            {
+                name: 'first',
+                title: '제품(서비스)',
+            },
+            {
+                name: 'second',
+                title: '요구사항',
+            },
+            {
+                title: 'JIRA Project',
+            },
+            {
+                title: 'Issue',
+            },
+            {
+                name: 'third',
+                title: 'QA',
+            },
+            {
+                title: 'Status - Test',
+            },
+        ],
+        data: data,
+        rowsGroup: [
+            // Always the array (!) of the column-selectors in specified order to which rows groupping is applied
+            // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
+            'first:name',
+            'second:name',
+            'third:name',
+            0,
+            2
         ]
     });
 
     $('#jstreeTable tbody').on('click', 'tr', function () {
         var data = tempDataTable.row( this ).data();
         console.log(data);
         //alert( 'You clicked on '+ data.c_title +'\'s row' );
-        rowData = data
-    });
-}
+    } );
 
-// 요구사항 상세 보기 클릭 이벤트
-$( "#selectView" ).click(function() {
-    modal(rowData)
-});
-
-function modal(data) {
-    console.log('#### modal data ::', data)
-    if (!data) return
-    $('.modal-title').text(data.c_title);
-    $('.modal-body').html(() => {
-        let text = '';
-        for(let key in data) {
-            text += `${key} : ${data[key]}<br />`;
-        }
-
-        return text;
-    })
-
-    $('.modal').modal('show');
 }
\ No newline at end of file
Index: arms/reqStatus.html
===================================================================
diff -u -r4413589a2c1bd8fe8b9e94c68b86bb2186180a39 -r972339767a9fd46fa7228b357dc5ff232c4ba774
--- arms/reqStatus.html	(.../reqStatus.html)	(revision 4413589a2c1bd8fe8b9e94c68b86bb2186180a39)
+++ arms/reqStatus.html	(.../reqStatus.html)	(revision 972339767a9fd46fa7228b357dc5ff232c4ba774)
@@ -1 +1,317 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<title>Atlassian RMS</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <meta http-equiv="Expire" content="-1"/>
+    <meta http-equiv="Keywords" content="Atlassian RMS"/>
+    <meta http-equiv="Reply-to" content="admin@a-rms.net"/>
+    <meta http-equiv="Content-Language" content="Korean"/>
+    <meta http-equiv="Last-Modified" content="Thu 01 Nov 2016 23:59:59"/>
+    <meta http-equiv="Organization" content="www.a-rms.net"/>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache"/>
+    <meta http-equiv="Pragma" content="no-cache"/>
+    <meta http-equiv="imagetoolbar" content="no"/>
+    <meta http-equiv="content-Script-type" content="text/javascript"/>
+    <meta http-equiv="content-Style-type" content="text/css"/>
+
+    <meta name="robots" content="ALL, INDEX, FOLLOW"/>
+    <meta name="Subject" content="Atlassian RMS"/>
+    <meta name="Filename" content="ARMS.html"/>
+    <meta name="Author-Date" content="31 Oct 16"/>
+    <meta name="Date" content="31 Oct 16"/>
+    <meta name="Author" content="LeeDongmin"/>
+    <meta name="Other Agent" content="LeeDongMin"/>
+    <meta name="Email" content="admin@a-rms.net"/>
+    <meta name="Reply-To" content="admin@a-rms.net"/>
+    <meta name="Project" content="Atlassian RMS"/>
+    <meta name="Status" content="Draft"/>
+    <meta name="Location" content="South Korea"/>
+    <meta name="distribution" content="aRMS"/>
+    <meta name="Description" content="Standard Web Project"/>
+    <meta name="verify-v1" content="Eal6+fiCjgKAZb5A6pRvSLmsh9NLF2AsqxqJrLuFoAs="/>
+    <meta name="Revision" content="1.0"/>
+    <meta name="Generator" content="eclipse 3.6.1"/>
+    <meta name="Classification" content="Development,Deployment"/>
+    <meta name="Copyright" content="CopyRight@aRMS. All Rights Reserved"/>
+    <meta name="title" content="Atlassian RMS"/>
+    <meta name="revisit-after" content="7 days"/>
+    <meta name="siteinfo" content="http://www.a-rms.net/robots.txt"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Atlassian RMS">
+    <meta property="og:url" content="http://www.a-rms.net/">
+    <meta property="og:site_name" content="Atlassian RMS">
+
+    <!-- favicon -->
+    <link rel="icon" href="../reference/common-design/img/313devgrp.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../reference/common-design/img/313devgrp.ico" type="image/x-icon"/>
+
+    <link href="../reference/jquery-plugins/normalize.css-8.0.1/normalize.css" rel="stylesheet">
+    <link href="../reference/lightblue4/docs/css/application.css" rel="stylesheet">
+    <link href="css/override.css" rel="stylesheet">
+    <script>
+        /* yeah we need this empty stylesheet here. It's cool chrome & chromium fix
+           chrome fix https://code.google.com/p/chromium/issues/detail?id=167083
+                      https://code.google.com/p/chromium/issues/detail?id=332189
+        */
+    </script>
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <!-- ANALYTICS START -->
+    <!-- https://www.google.com/analytics/settings/home?scid=18527803 web log Analyzer  -->
+    <script type="text/javascript">
+        //<![CDATA[
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-18527803-1']);
+        _gaq.push(['_trackPageview']);
+        _gaq.push(['_trackPageLoadTime']);
+        (function() {
+            var ga = document.createElement('script');
+            ga.type = 'text/javascript';
+            ga.async = true;
+            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(ga, s);
+        })();
+        //]]>
+    </script>
+    <!-- ANALYTICS END -->
+    <!-- NAVER ANALYTICS START -->
+    <script type="text/javascript" src="http://wcs.naver.net/wcslog.js"></script>
+    <script type="text/javascript">
+        if (!wcs_add) var wcs_add = {};
+        wcs_add["wa"] = "1244b972beb34c";
+        wcs_do();
+    </script>
+    <!-- NAVER ANALYTICS END -->
+</head>
+<body>
+    <div class="logo" data-include="html/main/page-logo.html"></div>
+
+    <nav id="sidebar" class="sidebar nav-collapse collapse" data-include="html/main/page-sidebar.html"></nav>
+
+    <div class="wrap">
+
+        <header class="page-header" data-include="html/main/page-header.html"></header>
+
+        <div class="content container">
+
+            <section class="widgetheader" data-include="html/reqStatus/content-header.html"></section>
+
+            <div class="row" data-include="html/reqStatus/content-container.html"></div>
+
+            <footer class="content-footer pull-right" data-include="html/main/content-footer.html"></footer>
+
+        </div>
+
+        <div class="loader-wrap hiding hide">
+            <i class="fa fa-circle-o-notch fa-spin"></i>
+        </div>
+
+    </div>
+
+<div id="topicon" style="opacity: 1;"><img src="../dist/img/topicon.gif" alt="맨위로"></div>
+
+<!-- common libraries. required for every page-->
+<script src="../reference/lightblue4/docs/lib/jquery/dist/jquery.min.js"></script>
+<script src="../reference/lightblue4/docs/lib/jquery-pjax/jquery.pjax.js"></script>
+<script src="../reference/lightblue4/docs/lib/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
+<script src="../reference/lightblue4/docs/lib/widgster/widgster.js"></script>
+<script src="../reference/lightblue4/docs/lib/underscore/underscore.js"></script>
+
+<!-- jquery upload plugins -->
+<script src="../reference/light-blue/lib/icheck.js/jquery.icheck.js"></script>
+<script src="../reference/light-blue/lib/vendor/jquery.ui.widget.js"></script>
+<!-- The Templates plugin is included to render the upload/download listings -->
+<script src="../reference/light-blue/lib/vendor/http_blueimp.github.io_JavaScript-Templates_js_tmpl.js"></script>
+<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
+<script src="../reference/light-blue/lib/vendor/http_blueimp.github.io_JavaScript-Load-Image_js_load-image.js"></script>
+<!-- The Canvas to Blob plugin is included for image resizing functionality -->
+<script src="../reference/light-blue/lib/vendor/http_blueimp.github.io_JavaScript-Canvas-to-Blob_js_canvas-to-blob.js"></script>
+<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
+<script src="../reference/light-blue/lib/jquery.iframe-transport.js"></script>
+<!-- The basic File Upload plugin -->
+<script src="../reference/light-blue/lib/jquery.fileupload.js"></script>
+<!-- The File Upload file processing plugin -->
+<script src="../reference/light-blue/lib/jquery.fileupload-fp.js"></script>
+<!-- The File Upload user interface plugin -->
+<script src="../reference/light-blue/lib/jquery.fileupload-ui.js"></script>
+
+<!-- common application js -->
+<script src="../reference/lightblue4/docs/js/app.js"></script>
+<script src="../reference/lightblue4/docs/js/settings.js"></script>
+
+<!-- page libs -->
+<script src="../reference/lightblue4/docs/lib/slimScroll/jquery.slimscroll.min.js"></script>
+<script src="../reference/lightblue4/docs/lib/jquery.sparkline/index.js"></script>
+<script src="../reference/lightblue4/docs/lib/backbone/backbone.js"></script>
+<script src="../reference/lightblue4/docs/lib/backbone.localStorage/build/backbone.localStorage.min.js"></script>
+<script src="../reference/lightblue4/docs/lib/d3/d3.min.js"></script>
+<script src="../reference/lightblue4/docs/lib/nvd3/build/nv.d3.min.js"></script>
+
+<!-- page interaction -->
+<script src="../reference/jquery-plugins/topbar.js"></script>
+
+<!-- common templates -->
+<script type="text/template" id="settings-template">
+    <div class="setting clearfix">
+        <div>Sidebar on the</div>
+        <div id="sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
+            <% onRight = sidebar == 'right'%>
+            <button type="button" data-value="left" class="btn btn-sm btn-default <%= onRight? '' : 'active' %>">Left</button>
+            <button type="button" data-value="right" class="btn btn-sm btn-default <%= onRight? 'active' : '' %>">Right</button>
+        </div>
+    </div>
+    <div class="setting clearfix">
+        <div>Sidebar</div>
+        <div id="display-sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
+            <% display = displaySidebar%>
+            <button type="button" data-value="true" class="btn btn-sm btn-default <%= display? 'active' : '' %>">Show</button>
+            <button type="button" data-value="false" class="btn btn-sm btn-default <%= display? '' : 'active' %>">Hide</button>
+        </div>
+    </div>
+</script>
+
+<!-- page specific scripts -->
+<script type="text/template" id="sidebar-settings-template">
+    <% auto = sidebarState == 'auto'%>
+    <% if (auto) {%>
+    <button type="button"
+            data-value="icons"
+            class="btn-icons btn btn-transparent btn-sm">Icons</button>
+    <button type="button"
+            data-value="auto"
+            class="btn-auto btn btn-transparent btn-sm">Auto</button>
+    <%} else {%>
+    <button type="button"
+            data-value="auto"
+            class="btn btn-transparent btn-sm">Auto</button>
+    <% } %>
+</script>
+
+<!-- page template -->
+<script type="text/template" id="message-template">
+    <div class="sender pull-left">
+        <div class="icon">
+            <img src="img/avatars/2.png" class="img-circle" alt="">
+        </div>
+        <div class="time">
+            just now
+        </div>
+    </div>
+    <div class="chat-message-body">
+        <span class="arrow"></span>
+        <div class="sender"><a href="#">Tikhon Laninga</a></div>
+        <div class="text">
+            <%- text %>
+        </div>
+    </div>
+</script>
+
+<!-- upload template -->
+<script id="template-upload" type="text/x-tmpl">
+    {% for (var i=0, file; file=o.files[i]; i++) { %}
+    <tr class="template-upload fade">
+        <td class="preview"><span class="fade"></span></td>
+        <td class="name"><span>{%=file.name%}</span></td>
+        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
+        {% if (file.error) { %}
+        <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
+        {% } else if (o.files.valid && !i) { %}
+        <td>
+            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+                <div class="bar" style="width:0%;"></div>
+            </div>
+        </td>
+        <td>{% if (!o.options.autoUpload) { %}
+            <button class="btn btn-primary btn-sm start">
+                <i class="fa fa-upload"></i>
+                <span>Start</span>
+            </button>
+            {% } %}</td>
+        {% } else { %}
+        <td colspan="2"></td>
+        {% } %}
+        <td>{% if (!i) { %}
+            <button class="btn btn-warning btn-sm cancel">
+                <i class="fa fa-ban"></i>
+                <span>Cancel</span>
+            </button>
+            {% } %}</td>
+    </tr>
+    {% } %}
+</script>
+
+<!-- The template to display files available for download -->
+<script id="template-download" type="text/x-tmpl">
+    {% for (var i=0, file; file=o.files[i]; i++) { %}
+    <tr class="template-download fade">
+        {% if (file.error) { %}
+        <td></td>
+        <td class="name"><span>{%=file.name%}</span></td>
+        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
+        <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
+        {% } else { %}
+        <td class="preview">{% if (file.thumbnail_url) { %}
+            <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
+            {% } %}</td>
+        <td class="name">
+            <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
+        </td>
+        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
+        <td colspan="2"></td>
+        {% } %}
+        <td>
+            <button class="btn btn-danger btn-sm delete" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
+            <i class="fa fa-trash"></i>
+            <span>Delete</span>
+            </button>
+        </td>
+    </tr>
+    {% } %}
+</script>
+
+<!-- JSTREE -->
+<script type="text/javascript" src='../reference/jquery-plugins/jstree-v.pre1.0/_lib/jquery.cookie.js' charset="utf-8"></script>
+<script type="text/javascript" src='../reference/jquery-plugins/jstree-v.pre1.0/_lib/jquery.hotkeys.js' charset="utf-8"></script>
+<script type="text/javascript" src='../reference/jquery-plugins/jstree-v.pre1.0/jquery.jstree.js' charset="utf-8"></script>
+<script type="text/javascript" src='../reference/jquery-plugins/jnotify_v2.1/jquery/jNotify.jquery.min.js' charset="utf-8"></script>
+<link rel="stylesheet" type="text/css" href="../reference/jquery-plugins/jnotify_v2.1/jquery/jNotify.jquery.css" media="screen"/>
+
+<!-- dataTable -->
+<link rel="stylesheet" type="text/css" href="../reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css" media="screen"/>
+<link rel="stylesheet" type="text/css" href="../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/css/responsive.dataTables_lightblue4.css" media="screen"/>
+<link rel="stylesheet" type="text/css" href="../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/css/select.dataTables_lightblue4.css" media="screen"/>
+<script type="text/javascript" src='../reference/jquery-plugins/dataTables-1.10.16/media/js/jquery.dataTables.js' charset="utf-8"></script>
+<script type="text/javascript" src='../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.js' charset="utf-8"></script>
+<script type="text/javascript" src='../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/js/dataTables.select.js' charset="utf-8"></script>
+<script type="text/javascript" src='../reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/custom.rowGroup.js' charset="utf-8"></script>
+
+<!-- ckeditor4 -->
+<script type="text/javascript" src="../reference/jquery-plugins/ckeditor4-4.16.1/ckeditor.js" charset="utf-8"></script>
+
+<!-- multiselect -->
+<link rel="stylesheet" type="text/css" href="../reference/jquery-plugins/select2-4.0.13/dist/css/select2_lightblue4.css" media="screen"/>
+<script type="text/javascript" src="../reference/jquery-plugins/select2-4.0.13/dist/js/select2.min.js" charset="utf-8"></script>
+
+<!-- page js -->
+<script type="text/javascript" src='js/common.js' charset="utf-8"></script>
+
+</body>
+</html>
\ No newline at end of file
Index: reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/custom.rowGroup.js
===================================================================
diff -u
--- reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/custom.rowGroup.js	(revision 0)
+++ reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/custom.rowGroup.js	(revision 972339767a9fd46fa7228b357dc5ff232c4ba774)
@@ -0,0 +1,224 @@
+/*! RowsGroup for DataTables v1.0.0
+ * 2015 Alexey Shildyakov ashl1future@gmail.com
+ */
+
+/**
+ * @summary     RowsGroup
+ * @description Group rows by specified columns
+ * @version     1.0.0
+ * @file        dataTables.rowsGroup.js
+ * @author      Alexey Shildyakov (ashl1future@gmail.com)
+ * @contact     ashl1future@gmail.com
+ * @copyright   Alexey Shildyakov
+ *
+ * License      MIT - http://datatables.net/license/mit
+ *
+ * This feature plug-in for DataTables automatically merges columns cells
+ * based on it's values equality. It supports multi-column row grouping
+ * in according to the requested order with dependency from each previous
+ * requested columns. Now it supports ordering and searching.
+ * Please see the example.html for details.
+ *
+ * Rows grouping in DataTables can be enabled by using any one of the following
+ * options:
+ *
+ * * Setting the `rowsGroup` parameter in the DataTables initialisation
+ *   to array which containes columns selectors
+ *   (https://datatables.net/reference/type/column-selector) used for grouping. i.e.
+ *    rowsGroup = [1, 'columnName:name', ]
+ * * Setting the `rowsGroup` parameter in the DataTables defaults
+ *   (thus causing all tables to have this feature) - i.e.
+ *   `$.fn.dataTable.defaults.RowsGroup = [0]`.
+ * * Creating a new instance: `new $.fn.dataTable.RowsGroup( table, columnsForGrouping );`
+ *   where `table` is a DataTable's API instance and `columnsForGrouping` is the array
+ *   described above.
+ *
+ * For more detailed information please see:
+ *
+ */
+
+(function($){
+
+    ShowedDataSelectorModifier = {
+        order: 'current',
+        page: 'current',
+        search: 'applied',
+    }
+
+    GroupedColumnsOrderDir = 'asc';
+
+
+    /*
+     * columnsForGrouping: array of DTAPI:cell-selector for columns for which rows grouping is applied
+     */
+    var RowsGroup = function ( dt, columnsForGrouping )
+    {
+        this.table = dt.table();
+        this.columnsForGrouping = columnsForGrouping;
+        // set to True when new reorder is applied by RowsGroup to prevent order() looping
+        this.orderOverrideNow = false;
+        this.order = []
+
+        self = this;
+        $(document).on('order.dt', function ( e, settings) {
+            if (!self.orderOverrideNow) {
+                self._updateOrderAndDraw()
+            }
+            self.orderOverrideNow = false;
+        })
+
+        $(document).on('draw.dt', function ( e, settings) {
+            self._mergeCells()
+        })
+
+        this._updateOrderAndDraw();
+    };
+
+
+    RowsGroup.prototype = {
+        _getOrderWithGroupColumns: function (order, groupedColumnsOrderDir)
+        {
+            if (groupedColumnsOrderDir === undefined)
+                groupedColumnsOrderDir = GroupedColumnsOrderDir
+
+            var self = this;
+            var groupedColumnsIndexes = this.columnsForGrouping.map(function(columnSelector){
+                return self.table.column(columnSelector).index()
+            })
+            var groupedColumnsKnownOrder = order.filter(function(columnOrder){
+                return groupedColumnsIndexes.indexOf(columnOrder[0]) >= 0
+            })
+            var nongroupedColumnsOrder = order.filter(function(columnOrder){
+                return groupedColumnsIndexes.indexOf(columnOrder[0]) < 0
+            })
+            var groupedColumnsKnownOrderIndexes = groupedColumnsKnownOrder.map(function(columnOrder){
+                return columnOrder[0]
+            })
+            var groupedColumnsOrder = groupedColumnsIndexes.map(function(iColumn){
+                var iInOrderIndexes = groupedColumnsKnownOrderIndexes.indexOf(iColumn)
+                if (iInOrderIndexes >= 0)
+                    return [iColumn, groupedColumnsKnownOrder[iInOrderIndexes][1]]
+                else
+                    return [iColumn, groupedColumnsOrderDir]
+            })
+
+            groupedColumnsOrder.push.apply(groupedColumnsOrder, nongroupedColumnsOrder)
+            return groupedColumnsOrder;
+        },
+
+        // Workaround: the DT reset ordering to 'asc' from multi-ordering if user order on one column (without shift)
+        //   but because we always has multi-ordering due to grouped rows this happens every time
+        _getInjectedMonoSelectWorkaround: function(order)
+        {
+            if (order.length === 1) {
+                // got mono order - workaround here
+                var orderingColumn = order[0][0]
+                var previousOrder = this.order.map(function(val){
+                    return val[0]
+                })
+                var iColumn = previousOrder.indexOf(orderingColumn);
+                if (iColumn >= 0) {
+                    // assume change the direction, because we already has that in previos order
+                    return [[orderingColumn, this._toogleDirection(this.order[iColumn][1])]]
+                } // else This is the new ordering column. Proceed as is.
+            } // else got milti order - work normal
+            return order;
+        },
+
+        _mergeCells: function()
+        {
+            var columnsIndexes = this.table.columns(this.columnsForGrouping, ShowedDataSelectorModifier).indexes().toArray()
+            var showedRowsCount = this.table.rows(ShowedDataSelectorModifier)[0].length
+            this._mergeColumn(0, showedRowsCount - 1, columnsIndexes)
+        },
+
+        // the index is relative to the showed data
+        //    (selector-modifier = {order: 'current', page: 'current', search: 'applied'}) index
+        _mergeColumn: function(iStartRow, iFinishRow, columnsIndexes)
+        {
+            var columnsIndexesCopy = columnsIndexes.slice()
+            currentColumn = columnsIndexesCopy.shift()
+            currentColumn = this.table.column(currentColumn, ShowedDataSelectorModifier)
+
+            var columnNodes = currentColumn.nodes()
+            var columnValues = currentColumn.data()
+
+            var newSequenceRow = iStartRow,
+                iRow;
+            for (iRow = iStartRow + 1; iRow <= iFinishRow; ++iRow) {
+
+                if (columnValues[iRow] === columnValues[newSequenceRow]) {
+                    $(columnNodes[iRow]).hide()
+                } else {
+                    $(columnNodes[newSequenceRow]).show()
+                    $(columnNodes[newSequenceRow]).attr('rowspan', (iRow-1) - newSequenceRow + 1)
+
+                    if (columnsIndexesCopy.length > 0)
+                        this._mergeColumn(newSequenceRow, (iRow-1), columnsIndexesCopy)
+
+                    newSequenceRow = iRow;
+                }
+
+            }
+            $(columnNodes[newSequenceRow]).show()
+            $(columnNodes[newSequenceRow]).attr('rowspan', (iRow-1)- newSequenceRow + 1)
+            if (columnsIndexesCopy.length > 0)
+                this._mergeColumn(newSequenceRow, (iRow-1), columnsIndexesCopy)
+        },
+
+        _toogleDirection: function(dir)
+        {
+            return dir == 'asc'? 'desc': 'asc';
+        },
+
+        _updateOrderAndDraw: function()
+        {
+            this.orderOverrideNow = true;
+
+            var currentOrder = this.table.order();
+            currentOrder = this._getInjectedMonoSelectWorkaround(currentOrder);
+            this.order = this._getOrderWithGroupColumns(currentOrder)
+            this.table.order($.extend(true, Array(), this.order))
+            this.table.draw()
+        },
+    };
+
+
+    $.fn.dataTable.RowsGroup = RowsGroup;
+    $.fn.DataTable.RowsGroup = RowsGroup;
+
+// Automatic initialisation listener
+    $(document).on( 'init.dt', function ( e, settings ) {
+        if ( e.namespace !== 'dt' ) {
+            return;
+        }
+
+        var api = new $.fn.dataTable.Api( settings );
+
+        if ( settings.oInit.rowsGroup ||
+            $.fn.dataTable.defaults.rowsGroup )
+        {
+            options = settings.oInit.rowsGroup?
+                settings.oInit.rowsGroup:
+                $.fn.dataTable.defaults.rowsGroup;
+            new RowsGroup( api, options );
+        }
+    } );
+
+}(jQuery));
+
+/*
+
+TODO: Provide function which determines the all <tr>s and <td>s with "rowspan" html-attribute is parent (groupped) for the specified <tr> or <td>. To use in selections, editing or hover styles.
+
+TODO: Feature
+Use saved order direction for grouped columns
+	Split the columns into grouped and ungrouped.
+
+	user = grouped+ungrouped
+	grouped = grouped
+	saved = grouped+ungrouped
+
+	For grouped uses following order: user -> saved (because 'saved' include 'grouped' after first initialisation). This should be done with saving order like for 'groupedColumns'
+	For ungrouped: uses only 'user' input ordering
+*/
\ No newline at end of file
Index: reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css
===================================================================
diff -u -r0e57ce258d45d3292d533715d09848e82a838c21 -r972339767a9fd46fa7228b357dc5ff232c4ba774
--- reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css	(.../jquery.dataTables_lightblue4.css)	(revision 0e57ce258d45d3292d533715d09848e82a838c21)
+++ reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css	(.../jquery.dataTables_lightblue4.css)	(revision 972339767a9fd46fa7228b357dc5ff232c4ba774)
@@ -105,68 +105,68 @@
 table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
 table.dataTable.display tbody tr > .sorting_2,
 table.dataTable.display tbody tr > .sorting_3 {
-    background-color: #fafafa;
+    background-color: transparent;
 }
 table.dataTable.order-column tbody tr.selected > .sorting_1,
 table.dataTable.order-column tbody tr.selected > .sorting_2,
 table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
 table.dataTable.display tbody tr.selected > .sorting_2,
 table.dataTable.display tbody tr.selected > .sorting_3 {
-    background-color: #acbad5;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
     background: rgba(51, 51, 51, 0.425);
 }
 table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
-    background-color: #f3f3f3;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
-    background-color: whitesmoke;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
-    background-color: #a6b4cd;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
-    background-color: #a8b5cf;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
-    background-color: #a9b7d1;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
     background: rgba(51, 51, 51, 0.325);
 }
 table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
-    background-color: #fcfcfc;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
-    background-color: #fefefe;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
-    background-color: #acbad5;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
-    background-color: #aebcd6;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
-    background-color: #afbdd8;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
     /* 후버 */
 }
 table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
-    background-color: #ececec;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
-    background-color: #efefef;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
-    background-color: #a2aec7;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
-    background-color: #a3b0c9;
+    background-color: transparent;
 }
 table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
-    background-color: #a5b2cb;
+    background-color: transparent;
 }
 table.dataTable.no-footer {
     /*border-bottom: 1px solid #111;*/