Index: arms/html/reqServiceList/content-container.html
===================================================================
diff -u -r9dc7d303048a1a4206d2dea3fa7f27f08651917c -rec92f72b8ca4881d168c143eb3115e0d04645f79
--- arms/html/reqServiceList/content-container.html	(.../content-container.html)	(revision 9dc7d303048a1a4206d2dea3fa7f27f08651917c)
+++ arms/html/reqServiceList/content-container.html	(.../content-container.html)	(revision ec92f72b8ca4881d168c143eb3115e0d04645f79)
@@ -1,51 +1,127 @@
-<div class="col-lg-12">
+<div class="col-lg-4">
     <section class="widget">
         <header>
             <h4>
                 <span class="font13" style="font-weight: bold;">
-                    <i class="fa fa-edit"></i> 제품(서비스) 리스트
+                    <i class="fa fa-sort-amount-asc"></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 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">
-            <blockquote class="font13">
-                리스트 목록을 선택하면 제품(서비스)의 등록 내용을 확인/변경 할 수 있습니다.
-            </blockquote>
-            <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>c_parentid</th>
-                            <th>c_position</th>
-                            <th>c_left</th>
-                            <th>c_right</th>
-                            <th>c_level</th>
-                            <th>c_title</th>
-                            <th>c_type</th>
-                        </tr>
-                        </thead>
-                    </table>
+            <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 class="modal-footer" style="background-color: transparent; padding: 5px; text-align: right; border-top: 0px;">
-                <button id="selectView" type="button" class="btn btn-primary">Select View</button>
+        </div>
+    </section>
+</div>
+
+<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>
 
+<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>
+
 <!-- 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);
+    }
+    .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;
+    }
 </style>
 <script type="text/javascript" charset="utf-8">
     //<![CDATA[
Index: arms/js/reqServiceList.js
===================================================================
diff -u -r9dc7d303048a1a4206d2dea3fa7f27f08651917c -rec92f72b8ca4881d168c143eb3115e0d04645f79
--- arms/js/reqServiceList.js	(.../reqServiceList.js)	(revision 9dc7d303048a1a4206d2dea3fa7f27f08651917c)
+++ arms/js/reqServiceList.js	(.../reqServiceList.js)	(revision ec92f72b8ca4881d168c143eb3115e0d04645f79)
@@ -35,44 +35,474 @@
     },1000);
 }
 
-// --- 데이터 테이블 설정 --- //
-function jstreeDataTableReload() {
+// --- 에디터 설정 --- //
+CKEDITOR.replace( 'editor' );
+CKEDITOR.replace( 'modal-editor' );
 
+// --- 팝업 띄울때 사이즈 조정 -- //
+$( "#modalPopupId" ).click(function() {
+    var height = $( document ).height() -400;
+    $('.modal-body').find('.cke_contents:eq(0)').css('height',height+'px');
+});
+
+// --- jstree 설정 -- //
+function jsTreeBuild(){
+
     console.log("href: "+$(location).attr('href'));
     console.log("protocol: "+$(location).attr('protocol'));
     console.log("host: "+$(location).attr('host'));
     console.log("pathname: "+$(location).attr('pathname'));
     console.log("search: "+$(location).attr('search'));
     console.log("hostname: "+$(location).attr('hostname'));
     console.log("port: "+$(location).attr('port'));
-
     var isDevelopingToRoute = "/auth-user";
 
-    var tempDataTable = $('#jstreeTable').DataTable({
-        "ajax": {
-            "url": isDevelopingToRoute + "/api/arms/pdService/getMonitor.do",
-            "dataSrc": ""
+    $("#demo").bind(
+        "before.jstree",
+        function(e, data) {
+            $("#alog").append(data.func + "<br />");
+            $("li:not([rel='drive']).jstree-open > a > .jstree-icon").css('background-image',
+                'url(http://www.a-rms.net/313devgrp/reference/jquery-plugins/jstree-v.pre1.0/themes/toolbar_open.png)');
+            $("li:not([rel='drive']).jstree-closed > a > .jstree-icon").css('background-image',
+                'url(http://www.a-rms.net/313devgrp/reference/jquery-plugins/jstree-v.pre1.0/themes/ic_explorer.png)');
+        }).jstree({
+        // List of active plugins
+        "plugins": ["themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu", "checkbox"],
+        "themes": { "theme": [ "lightblue4" ] },
+        //contextmenu
+        "contextmenu": {
+            items: { // Could be a function that should return an object like this one
+                "create": {
+                    "separator_before": true,
+                    "separator_after": true,
+                    "label": "Create",
+                    "action": false,
+                    "submenu": {
+                        "create_file": {
+                            "seperator_before": false,
+                            "seperator_after": false,
+                            "label": "File",
+                            action: function(obj) {
+                                this.create(obj, "last", {
+                                    "attr": {
+                                        "rel": "default"
+                                    }
+                                });
+                            }
+                        },
+                        "create_folder": {
+                            "seperator_before": false,
+                            "seperator_after": false,
+                            "label": "Folder",
+                            action: function(obj) {
+                                this.create(obj, "last", {
+                                    "attr": {
+                                        "rel": "folder"
+                                    }
+                                });
+                            }
+                        }
+
+                    }
+                },
+                "ccp": {
+                    "separator_before": false,
+                    "separator_after": true,
+                    "label": "Edit",
+                    "action": false,
+                    "submenu": {
+                        "cut": {
+                            "seperator_before": false,
+                            "seperator_after": false,
+                            "label": "Cut",
+                            action: function(obj) {
+                                this.cut(obj, "last", {
+                                    "attr": {
+                                        "rel": "default"
+                                    }
+                                });
+                            }
+                        },
+                        "paste": {
+                            "seperator_before": false,
+                            "seperator_after": false,
+                            "label": "Paste",
+                            action: function(obj) {
+                                this.paste(obj, "last", {
+                                    "attr": {
+                                        "rel": "folder"
+                                    }
+                                });
+                            }
+                        },
+
+                        "changeType": {
+                            "seperator_before": false,
+                            "seperator_after": false,
+                            "label": "Change Type",
+                            "submenu": {
+                                "toFile": {
+                                    "seperator_before": false,
+                                    "seperator_after": false,
+                                    "label": "toFile",
+                                    action: function(obj) {
+                                        this.set_type("default");
+                                    }
+                                },
+                                "toFolder": {
+                                    "seperator_before": false,
+                                    "seperator_after": false,
+                                    "label": "toFolder",
+                                    action: function(obj) {
+                                        this.set_type("folder");
+                                    }
+                                }
+                            }
+                        }
+
+                    }
+                }
+
+            }
         },
-        "destroy": true,
-        "processing": true,
-        "responsive": true,
-        "select": true,
-        "columns": [
-            { "data": "c_id" },
-            { "data": "c_parentid" },
-            { "data": "c_position" },
-            { "data": "c_left" },
-            { "data": "c_right" },
-            { "data": "c_level" },
-            { "data": "c_title" },
-            { "data": "c_type" }
-        ]
+
+        // I usually configure the plugin that handles the data first
+        // This example uses JSON as it is most common
+        "json_data": {
+            // This tree is ajax enabled - as this is most common, and maybe a bit more complex
+            // All the options are almost the same as jQuery's AJAX (read the docs)
+            "ajax": {
+                // the URL to fetch the data
+                "url": isDevelopingToRoute + "/api/arms/pdService/getChildNode.do",
+                // the `data` function is executed in the instance's scope
+                // the parameter is the node being loaded
+                // (may be -1, 0, or undefined when loading the root nodes)
+                "data": function(n) {
+                    // the result is fed to the AJAX request `data` option
+                    console.log(n);
+                    return {
+                        "c_id": n.attr ? n.attr("id").replace("node_", "").replace("copy_", "") : 1
+                    };
+                },
+                "success": function(n) {
+                    jSuccess('Product(service) Data Load Complete');
+                }
+            }
+        },
+        // Configuring the search plugin
+        "search": {
+            // As this has been a common question - async search
+            // Same as above - the `ajax` config option is actually jQuery's AJAX object
+            "ajax": {
+                "url": isDevelopingToRoute + "/api/arms/pdService/searchNode.do",
+                // You get the search string as a parameter
+                "data": function(str) {
+                    return {
+                        "searchString": str
+                    };
+                },
+                "success": function(n) {
+                    jSuccess('search data complete');
+                }
+            }
+        },
+        // Using types - most of the time this is an overkill
+        // read the docs carefully to decide whether you need types
+        "types": {
+            // I set both options to -2, as I do not need depth and children count checking
+            // Those two checks may slow jstree a lot, so use only when needed
+            "max_depth": -2,
+            "max_children": -2,
+            // I want only `drive` nodes to be root nodes
+            // This will prevent moving or creating any other type as a root node
+            "valid_children": ["drive"],
+            "types": {
+                // The default type
+                "default": {
+                    // I want this type to have no children (so only leaf nodes)
+                    // In my case - those are files
+                    "valid_children": "none",
+                    // If we specify an icon for the default type it WILL OVERRIDE the theme icons
+                    "icon": {
+                        "image": "../dist/js/jstree-v.pre1.0/themes/attibutes.png"
+                    }
+                },
+                // The `folder` type
+                "folder": {
+                    // can have files and other folders inside of it, but NOT `drive` nodes
+                    "valid_children": ["default", "folder"],
+                    "icon": {
+                        "image": "../dist/js/jstree-v.pre1.0/themes/ic_explorer.png"
+                    }
+                },
+                // The `drive` nodes
+                "drive": {
+                    // can have files and folders inside, but NOT other `drive` nodes
+                    "valid_children": ["default", "folder"],
+                    "icon": {
+                        "image": "../dist/js/jstree-v.pre1.0/themes/home.png"
+                    },
+                    // those prevent the functions with the same name to be used on `drive` nodes
+                    // internally the `before` event is used
+                    "start_drag": false,
+                    "move_node": false,
+                    "delete_node": false,
+                    "remove": false
+                }
+            }
+        },
+        // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
+
+        // the UI plugin - it handles selecting/deselecting/hovering nodes
+        "ui": {
+            // this makes the node with ID node_4 selected onload
+            "initially_select": ["node_4"]
+        },
+        // the core plugin - not many options here
+        "core": {
+            // just open those two nodes up
+            // as this is an AJAX enabled tree, both will be downloaded from the server
+            "initially_open": ["node_2", "node_3"]
+        }
+    }).bind("create.jstree", function(e, data) {
+        $.post(isDevelopingToRoute + "/api/arms/pdService/addNode.do", {
+            "ref": data.rslt.parent.attr("id").replace("node_", "").replace("copy_", ""),
+            "c_position": data.rslt.position,
+            "c_title": data.rslt.name,
+            "c_type": data.rslt.obj.attr("rel")
+        }, function(r) {
+            if (r.status) {
+                $(data.rslt.obj).attr("id", "node_" + r.id);
+                jNotify('Notification : <strong>Add Node</strong>, Complete !');
+            } else {
+                $.jstree.rollback(data.rlbk);
+            }
+            if (typeof Chat != "undefined"){
+                Chat.sendMessage("노드를 추가했습니다. 추가된 노드의 아이디는 " + r.id , function(data) {
+                    console.log(data);
+                });
+            }
+            jsTreeBuild();
+        });
+    }).bind("remove.jstree", function(e, data) {
+        data.rslt.obj.each(function() {
+            $.ajax({
+                async: false,
+                type: 'POST',
+                url: isDevelopingToRoute + "/api/arms/pdService/removeNode.do",
+                data: {
+                    "c_id": this.id.replace("node_", "").replace("copy_", "")
+                },
+                success: function(r) {
+                    jNotify('Notification : <strong>Remove Node</strong>, Complete !');
+                    if (typeof Chat != "undefined"){
+                        Chat.sendMessage("노드를 삭제했습니다. 삭제된 노드의 아이디는 " + r.c_id , function(data) {
+                            console.log(data);
+                        });
+                    }
+                    jsTreeBuild();
+                }
+            });
+        });
+    }).bind("rename.jstree", function(e, data) {
+        $.post(isDevelopingToRoute + "/api/arms/pdService/alterNode.do", {
+            "c_id": data.rslt.obj.attr("id").replace("node_", "").replace("copy_", ""),
+            "c_title": data.rslt.new_name,
+            "c_type": data.rslt.obj.attr("rel")
+        }, function(r) {
+            if (!r.status) {
+                $.jstree.rollback(data.rlbk);
+            }
+            jSuccess('Rename Node Complete');
+            if (typeof Chat != "undefined"){
+                Chat.sendMessage("노드를 변경했습니다. 변경된 노드의 아이디는 " + r.c_id , function(data) {
+                    console.log(data);
+                });
+            }
+            jsTreeBuild();
+        });
+    }).bind("set_type.jstree", function(e, data) {
+        $.post(isDevelopingToRoute + "/api/arms/pdService/alterNodeType.do", {
+            "c_id": data.rslt.obj.attr("id").replace("node_", "").replace("copy_", ""),
+            "c_title": data.rslt.new_name,
+            "c_type": data.rslt.obj.attr("rel")
+        }, function(r) {
+            jSuccess('Node Type Change');
+            if (typeof Chat != "undefined"){
+                Chat.sendMessage("노드를 변경했습니다. 변경된 노드의 아이디는 " + r.c_id , function(data) {
+                    console.log(data);
+                });
+            }
+            jsTreeBuild();
+        });
+    }).bind("move_node.jstree", function(e, data) {
+        data.rslt.o.each(function(i) {
+            $.ajax({
+                async: false,
+                type: 'POST',
+                url: isDevelopingToRoute + "/api/arms/pdService/moveNode.do",
+                data: {
+                    "c_id": $(this).attr("id").replace("node_", "").replace("copy_", ""),
+                    "ref": data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_", "").replace("copy_", ""),
+                    "c_position": data.rslt.cp + i,
+                    "c_title": data.rslt.name,
+                    "copy": data.rslt.cy ? 1 : 0,
+                    "multiCounter": i
+                },
+                success: function(r) {
+                    if (r.status) {
+                        $.jstree.rollback(data.rlbk);
+                    } else {
+                        $(data.rslt.oc).attr("id", "node_" + r.id);
+                        if (data.rslt.cy && $(data.rslt.oc).children("UL").length) {
+                            data.inst.refresh(data.inst._get_parent(data.rslt.oc));
+                        }
+                    }
+                    jNotify('Notification : <strong>Move Node</strong> Complete !');
+                    if (typeof Chat != "undefined"){
+                        Chat.sendMessage("노드가 이동되었습니다. 이동된 노드의 아이디는 " + r.c_id , function(data) {
+                            console.log(data);
+                        });
+                    }
+                    jsTreeBuild();
+                }
+            });
+        });
+    }).bind("select_node.jstree", function (event, data) {
+        // `data.rslt.obj` is the jquery extended node that was clicked
+        if ($.isFunction(jsTreeClick)) {
+            console.log(data.rslt.obj);
+            jsTreeClick(data.rslt.obj.attr("id"));
+        }
     });
 
-    $('#jstreeTable tbody').on('click', 'tr', function () {
-        var data = tempDataTable.row( this ).data();
-        console.log(data);
-        //alert( 'You clicked on '+ data.c_title +'\'s row' );
-    } );
+    $("#mmenu input, #mmenu button").click(function() {
+        switch (this.id) {
+            case "add_default":
+            case "add_folder":
+                $("#demo").jstree("create", null, "last", {
+                    "attr": {
+                        "rel": this.id.toString().replace("add_", "")
+                    }
+                });
+                break;
+            case "search":
+                $("#demo").jstree("search", document.getElementById("text").value);
+                break;
+            case "text":
+                break;
+            default:
+                $("#demo").jstree(this.id);
+                break;
+        }
+    });
+}
 
-}
\ No newline at end of file
+function jsTreeClick(selectedNodeID) {
+    console.log(selectedNodeID);
+}
+
+$(function() {
+    jsTreeBuild();
+});
+
+// --- select2 설정 --- //
+$(".js-example-basic-multiple-limit").select2({
+    maximumSelectionLength: 2,
+    ajax: {
+        url: "https://api.github.com/search/repositories",
+        dataType: 'json',
+        delay: 250,
+        data: function (params) {
+            return {
+                q: params.term, // search term
+                page: params.page
+            };
+        },
+        processResults: function (data, params) {
+            // parse the results into the format expected by Select2
+            // since we are using custom formatting functions we do not need to
+            // alter the remote JSON data, except to indicate that infinite
+            // scrolling can be used
+            params.page = params.page || 1;
+
+            return {
+                results: data.items,
+                pagination: {
+                    more: (params.page * 30) < data.total_count
+                }
+            };
+        },
+        cache: true
+    },
+    placeholder: '제품(서비스)의 오너를 등록해 주세요',
+    minimumInputLength: 1,
+    templateResult: formatRepo,
+    templateSelection: formatRepoSelection
+});
+
+$(".js-data-example-ajax").select2({
+    ajax: {
+        url: "https://api.github.com/search/repositories",
+        dataType: 'json',
+        delay: 250,
+        data: function (params) {
+            return {
+                q: params.term, // search term
+                page: params.page
+            };
+        },
+        processResults: function (data, params) {
+            // parse the results into the format expected by Select2
+            // since we are using custom formatting functions we do not need to
+            // alter the remote JSON data, except to indicate that infinite
+            // scrolling can be used
+            params.page = params.page || 1;
+
+            return {
+                results: data.items,
+                pagination: {
+                    more: (params.page * 30) < data.total_count
+                }
+            };
+        },
+        cache: true
+    },
+    placeholder: '제품(서비스)의 Default 리뷰어를 등록해 주세요',
+    minimumInputLength: 1,
+    templateResult: formatRepo,
+    templateSelection: formatRepoSelection
+});
+
+function formatRepo (repo) {
+    if (repo.loading) {
+        return repo.text;
+    }
+
+    var $container = $(
+        "<div class='select2-result-repository clearfix'>" +
+        "<div class='select2-result-repository__meta'>" +
+        "<div class='select2-result-repository__title'></div>" +
+        "<div class='select2-result-repository__description'></div>" +
+        "<div class='select2-result-repository__statistics'>" +
+        "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> </div>" +
+        "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> </div>" +
+        "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> </div>" +
+        "</div>" +
+        "</div>" +
+        "</div>"
+    );
+
+    $container.find(".select2-result-repository__title").text(repo.full_name);
+    $container.find(".select2-result-repository__description").text(repo.description);
+    $container.find(".select2-result-repository__forks").append(repo.forks_count + " Forks");
+    $container.find(".select2-result-repository__stargazers").append(repo.stargazers_count + " Stars");
+    $container.find(".select2-result-repository__watchers").append(repo.watchers_count + " Watchers");
+
+    return $container;
+}
+
+function formatRepoSelection (repo) {
+    return repo.full_name || repo.text;
+}
+// Code for the menu buttons