Index: pages/ARMS-req-regist/template-box-body.html
===================================================================
diff -u -r019b264b935fa6bea1277aa5c5cdb2a180d49c08 -r966adf1a7d2c136746854a203392b34ec2876e43
--- pages/ARMS-req-regist/template-box-body.html	(.../template-box-body.html)	(revision 019b264b935fa6bea1277aa5c5cdb2a180d49c08)
+++ pages/ARMS-req-regist/template-box-body.html	(.../template-box-body.html)	(revision 966adf1a7d2c136746854a203392b34ec2876e43)
@@ -3,7 +3,7 @@
 
             <div class="box box-primary">
                 <div class="box-header with-border">
-                    <h3 class="box-title"><span class="font13">조회 구분</span></h3>
+                    <h3 class="box-title"><span class="font13">서비스 & 제품 선택</span></h3>
 
                     <div class="box-tools">
                         <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
@@ -12,67 +12,455 @@
                 </div>
                 <div class="box-body no-padding">
                     <ul class="nav nav-pills nav-stacked font13">
-                        <li class="active"><a href="#"><i class="fa fa-inbox"></i> Total Inbox
-                            <span class="label label-primary pull-right">12</span></a></li>
-                        <li><a href="#"><i class="fa fa-commenting-o"></i> Ownership Filter</a></li>
-                        <li><a href="#"><i class="fa fa-file-text-o"></i> My Request</a></li>
-                        <li><a href="#"><i class="fa fa-filter"></i> Approved Me <span class="label label-warning pull-right">65</span></a>
-                        </li>
-                        <li><a href="#"><i class="fa fa-trash-o"></i> Trash</a></li>
+                        <div class="font12">
+                            <div id="mmenu">
+                                <!--
+                                <button type="button" id="add_folder">
+                                    <i class="fa fa-plus"></i>
+                                    add folder
+                                </button>
+                                <button type="button" id="add_default">
+                                    <i class="fa fa-plus"></i>
+                                    add file
+                                </button>
+                                <button type="button" id="rename">
+                                    <i class="fa fa-eraser"></i>
+                                    rename
+                                </button>
+                                <button type="button" id="remove">
+                                    <i class="fa fa-minus"></i>
+                                    remove
+                                </button>
+                                <button type="button" id="cut">
+                                    <i class="fa fa-cut"></i>
+                                    cut
+                                </button>
+                                <button type="button" id="copy">
+                                    <i class="fa fa-copy"></i>
+                                    copy
+                                </button>
+                                <button type="button" id="paste">
+                                    <i class="fa fa-paste"></i>
+                                    paste
+                                </button>
+                                <button type="button" id="refresh" title="refresh" onclick="$('#demo').jstree('refresh',-1);">
+                                    <i class="fa fa-search"></i>
+                                    refresh
+                                </button>
+                                -->
+                                <input type="text" id="text" placeholder="찾을 노드 이름 입력" data-tooltip="Press Enter To Node To Search" />
+                                <button type="button" id="search" title="Search">
+                                    <i class="fa fa-search"></i>
+                                    Search
+                                </button>
+                            </div>
+                            <div id="demo"></div>
+                        </div>
                     </ul>
+                    <br>
+                    <a href="ARMS-req-regist.html" class="btn btn-primary btn-block margin-bottom font13">제품 & 서비스 선택완료</a>
                 </div>
                 <!-- /.box-body -->
             </div>
             <!-- /. box -->
-            <!-- About Me Box -->
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title font12" style="font-weight: bold">Product & Service with Ownership</h3>
-                </div>
-                <!-- /.box-header -->
-                <div class="box-body">
-                    <a href="#"><strong><i class="fa fa-book margin-r-5"></i> jsTree Service Framework</strong></a>
+        </div>
+        <script type="text/javascript">
+            function jsTreeBuild(){
 
-                    <p class="text-muted font12">
-                        PLE 기반 Service code framework 이며, Tree 알고리즘을 활용한 데이터 핸들링 프레임워크 입니다.
-                    </p>
+                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'));
 
-                    <hr>
+                var isDevelopingToRoute = "";
 
-                    <a href="#"><strong><i class="fa fa-book margin-r-5"></i> aRMS Product</strong></a>
+                //operation enviorment setup and local development configuration
+                if($(location).attr('port') == 9999){
+                    console.log("csrf 우회 because local development");
+                    isDevelopingToRoute = "http://localhost:8082"
+                }else{
+                    $.ajax({
+                        async: false,
+                        type: 'GET',
+                        url: "/api/jsTreeServiceFramework/security/csrf.do",
+                        success: function(r) {
+                            var token = r._csrf_token;
+                            var header = r._csrf_headerName;
+                            $(document).ajaxSend(function(e, xhr, options) {
+                                xhr.setRequestHeader(header, token);
+                            });
+                        }
+                    });
+                }
 
-                    <p class="text-muted font12">
-                        Atlassian 의 Requirement 관리용 솔루션 입니다.
-                    </p>
+                $("#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(../dist/js/jstree-v.pre1.0/themes/toolbar_open.png)');
+                        $("li:not([rel='drive']).jstree-closed > a > .jstree-icon").css('background-image',
+                            'url(../dist/js/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"],
 
-                    <hr>
+                    //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"
+                                                }
+                                            });
+                                        }
+                                    }
 
-                    <a href="#"><strong><i class="fa fa-book margin-r-5"></i> ASD Service</strong></a>
+                                }
+                            },
+                            "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"
+                                                }
+                                            });
+                                        }
+                                    },
 
-                    <p class="text-muted font12">
-                        V3 에서 수집된 의심되는 악성코드를 분류하고 대용량 처리하는 프레임워크 서비스 입니다.
-                    </p>
+                                    "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");
+                                                }
+                                            }
+                                        }
+                                    }
 
-                    <hr>
+                                }
+                            }
 
-                </div>
-                <!-- /.box-body -->
-            </div>
-            <!-- /.box -->
-        </div>
+                        }
+                    },
+
+                    // 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 + "/com/ext/jstree/springiBatis/core/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
+                                return {
+                                    "c_id": n.attr ? n.attr("id").replace("node_", "").replace("copy_", "") : 1
+                                };
+                            },
+                            "success": function(n) {
+                                jSuccess('access good');
+                            }
+                        }
+                    },
+                    // 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 + "/com/ext/jstree/springiBatis/core/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("/com/ext/jstree/springiBatis/core/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);
+                            });
+                        }
+                        jstreeDataTableReload();
+                        jsTreeBuild();
+                    });
+                }).bind("remove.jstree", function(e, data) {
+                    data.rslt.obj.each(function() {
+                        $.ajax({
+                            async: false,
+                            type: 'POST',
+                            url: "/com/ext/jstree/springiBatis/core/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);
+                                    });
+                                }
+                                jstreeDataTableReload();
+                                jsTreeBuild();
+                            }
+                        });
+                    });
+                }).bind("rename.jstree", function(e, data) {
+                    $.post("/com/ext/jstree/springiBatis/core/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);
+                            });
+                        }
+                        jstreeDataTableReload();
+                        jsTreeBuild();
+                    });
+                }).bind("set_type.jstree", function(e, data) {
+                    $.post("/com/ext/jstree/springiBatis/core/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);
+                            });
+                        }
+                        jstreeDataTableReload();
+                        jsTreeBuild();
+                    });
+                }).bind("move_node.jstree", function(e, data) {
+                    data.rslt.o.each(function(i) {
+                        $.ajax({
+                            async: false,
+                            type: 'POST',
+                            url: "/com/ext/jstree/springiBatis/core/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);
+                                    });
+                                }
+                                jstreeDataTableReload();
+                                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"));
+                    }
+                });
+
+                $("#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);
+                            //$("#jstreeTable_filter").find('input[type="search"]').val();
+                            $('#jstreeTable').DataTable().column(6).search(document.getElementById("text").value).draw();
+                            break;
+                        case "text":
+                            break;
+                        default:
+                            $("#demo").jstree(this.id);
+                            break;
+                    }
+                });
+            }
+
+            $(function() {
+                jsTreeBuild();
+            });
+            // Code for the menu buttons
+        </script>
         <!-- /.col -->
         <div class="col-md-9">
             <div class="box box-primary">
                 <div class="box-header with-border">
-                    <h3 class="box-title">Compose New Message</h3>
+                    <h3 class="box-title font13">New Requirement</h3>
                 </div>
                 <!-- /.box-header -->
                 <div class="box-body">
                     <div class="form-group">
-                        <input class="form-control" placeholder="To:">
+                        <input class="form-control font13" placeholder="적용할 제품(서비스): 직접 입력 금지">
                     </div>
                     <div class="form-group">
-                        <input class="form-control" placeholder="Subject:">
+                        <input class="form-control font13" placeholder="요구사항 제목:">
                     </div>
                     <div class="form-group">
                         <ul class="wysihtml5-toolbar" style=""><li class="dropdown">
@@ -217,18 +605,18 @@
                     </textarea><iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="display: block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(210, 214, 222); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px; outline: rgb(85, 85, 85) none 0px; outline-offset: 0px; padding: 6px 12px; position: static; inset: auto; z-index: auto; vertical-align: baseline; text-align: start; box-sizing: border-box; box-shadow: none; border-radius: 0px; width: 100%; height: 300px;"></iframe>
                     </div>
                     <div class="form-group">
-                        <div class="btn btn-default btn-file">
+                        <div class="btn btn-default btn-file font13">
                             <i class="fa fa-paperclip"></i> Attachment
                             <input type="file" name="attachment">
                         </div>
-                        <p class="help-block">Max. 32MB</p>
+                        <p class="help-block">Max. 512MB</p>
                     </div>
                 </div>
                 <!-- /.box-body -->
                 <div class="box-footer">
                     <div class="pull-right">
-                        <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Draft</button>
-                        <button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Send</button>
+                        <button type="button" class="btn btn-default font13"><i class="fa fa-pencil"></i> Draft</button>
+                        <button type="submit" class="btn btn-primary font13"><i class="fa fa-envelope-o"></i> Send</button>
                     </div>
                     <button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
                 </div>