From 7b3861cb48507674af980e5579f61a853d093ed8 Mon Sep 17 00:00:00 2001
From: wyu <kknd09321@nate.com>
Date: 목, 06 1월 2022 10:07:26 +0900
Subject: [PATCH] 하위이슈목록/연관이슈목록 모든 컬럼 정렬 (기간 제외) 수정

---
 src/main/webapp/scripts/app/issue/issue.js                                   |    2 
 src/main/webapp/custom_components/js-rel/js-rel.directive.js                 |   36 +
 src/main/webapp/custom_components/js-down/down.provider.js                   |  232 +++++++++
 src/main/webapp/scripts/app/issue/issueDetail.controller.js                  |  186 ++++---
 src/main/webapp/custom_components/js-rel/relColumnGenerator.directive.js     |  142 +++++
 src/main/webapp/scripts/components/auth/auth.interceptor.js                  |   10 
 src/main/webapp/scripts/config.js                                            |   11 
 src/main/webapp/custom_components/js-down/js-down.html                       |   47 +
 src/main/webapp/custom_components/js-rel/js-rel.html                         |   47 +
 src/main/webapp/scripts/app/issue/issueList.controller.js                    |    5 
 src/main/webapp/views/issue/issueDetail.html                                 |    8 
 src/main/webapp/custom_components/js-down/downColumnGenerator.directive.js   |  141 +++++
 src/main/webapp/custom_components/js-down/js-down.directive.js               |   36 +
 src/main/webapp/custom_components/js-table/tableColumnGenerator.directive.js |  234 ++++----
 src/main/webapp/scripts/main.js                                              |   22 
 src/main/webapp/custom_components/js-rel/rel.provider.js                     |  239 +++++++++
 16 files changed, 1,187 insertions(+), 211 deletions(-)

diff --git a/src/main/webapp/custom_components/js-down/down.provider.js b/src/main/webapp/custom_components/js-down/down.provider.js
new file mode 100644
index 0000000..7eb0bf3
--- /dev/null
+++ b/src/main/webapp/custom_components/js-down/down.provider.js
@@ -0,0 +1,232 @@
+'use strict';
+
+define(['app', 'angular'],
+    function (app, angular) {
+        app.provider("$downProvider", function () {
+            return {
+                $get : function ($log) {
+                    return {
+                        config : function () {
+                            var tableConfig = {
+                                hName : "",	//	�뿤�뜑 �씠由�
+                                hWidth : "",	//	移쇰읆 湲몄씠
+                                hChecked : false,	//	泥댄겕 諛뺤뒪 �꽑�깮 �뿬遺�
+                                hAlign : "text-center",	//	�뿤�뜑 �젙�젹 湲곗�
+                                hSort : true,	//	�젙�젹 媛��뒫 �뿬遺�
+                                dName : "",	//	�뜲�씠�꽣 �씠由�
+                                dAlign : "text-left",	//	�뜲�씠�꽣 �젙�젹 湲곗�
+                                dRenderer : "",	//	�젋�뜑�윭 �뿬遺�
+                                dVisible : "",  //      bootstrap 諛섏쓳�삎 而щ읆 �몴�떆 �뿬遺�
+                                dType : "none",        // �깭洹� ���엯
+                                dDateFormat : "",   //  �궇吏� �삎�떇
+                                rowSpan : 0,    //  rowspan �쓣 吏��썝�븳�떎.
+                                colSpan : 0,    //  colspan �쓣 吏��썝�븳�떎.
+                                subHead : false,    //  留뚯빟 rowspan, colspan �쓣 �궗�슜�븯寃� �릺硫� true 濡� �뀑�똿.
+                                columnHint : "",    //  而щ읆 �젙蹂대�� 異붿텧�븯湲� �쐞�븳 �엺�듃 �젙蹂대�� 以��떎 - downColumnGenerator �쓽 �궗�슜�옄 �젙�쓽 �븘�뱶 遺�遺꾩뿉�꽌 �궗�슜
+                                columnTooltip : "", // hover �떆 �댋�똻 蹂댁뿬二쇨린
+                                setHName : function (hName) {
+                                    this.hName = hName;
+                                    return this;
+                                },
+                                setHWidth : function (hWidth) {
+                                    this.hWidth = hWidth;
+                                    return this;
+                                },
+                                setHChecked : function (hChecked) {
+                                    this.hChecked = hChecked;
+                                    return this;
+                                },
+                                setHAlign : function (hAlign) {
+                                    this.hAlign = hAlign;
+                                    return this;
+                                },
+                                setHSort : function (hSort) {
+                                    this.hSort = hSort;
+                                    return this;
+                                },
+                                setDName : function (dName) {
+                                    this.dName = dName;
+                                    return this;
+                                },
+                                setDAlign : function (dAlign) {
+                                    this.dAlign = dAlign;
+                                    return this;
+                                },
+                                setDRenderer : function (dRenderer) {
+                                    this.dRenderer = dRenderer;
+                                    return this;
+                                },
+                                setDVisible : function (dVisible) {
+                                    this.dVisible = dVisible;
+                                    return this;
+                                },
+                                setDType : function (dType) {
+                                    this.dType = dType;
+                                    return this;
+                                },
+                                setDDateFormat : function (dDateFormat) {
+                                    this.dDateFormat = dDateFormat;
+                                    return this;
+                                },
+                                setRowSpan : function (dRowSpan) {
+                                    this.rowSpan = dRowSpan;
+                                    return this;
+                                },
+                                setColSpan : function (dColSpan) {
+                                    this.colSpan = dColSpan;
+                                    return this;
+                                },
+                                setSubHead : function (dSubHead) {
+                                    this.subHead = dSubHead;
+                                    return this;
+                                },
+                                setColumnHint : function (dColumnHint) {
+                                    this.columnHint = dColumnHint;
+                                    return this;
+                                },
+                                setColumnTooltip : function (hTooltip) {
+                                    this.columnTooltip = hTooltip;
+                                    return this;
+                                }
+                            };
+
+                            return tableConfig;
+                        },
+                        toggleChecked : function (checkStatus, datas) {
+                            //  �쟾泥� �꽑�깮 泥댄겕 諛뺤뒪瑜� �겢由��뻽�쓣 寃쎌슦
+                            angular.forEach(datas, function (data) {
+                                data.checked = checkStatus;
+                            });
+                        },
+                        radioChecked : function (target, datas) {
+                            //  �빐�떦 row 媛� �씪�뵒�삤 踰꾪듉�씪 寃쎌슦
+                            angular.forEach(datas, function (data) {
+                                if (target.id == data.id) {
+                                    data.checked = true;
+                                }
+                                else {
+                                    data.checked = false;
+                                }
+                            });
+                        },
+                        rowChecked : function (tableConfig, target, datas) {
+                            //  媛� row �쓽 泥댄겕諛뺤뒪/�씪�뵒�삤 踰꾪듉�쓣 �겢由��뻽�쓣 寃쎌슦
+                            if (tableConfig[0].dType == "checkbox") {
+                                target.checked = !target.checked;
+
+                                for (var data in datas) {
+                                    if (!data.checked) {
+                                        this.hChecked = false;
+                                        break;
+                                    }
+                                }
+                            }
+                            else if (tableConfig[0].dType == "radio") {
+                                this.radioChecked(target, datas);
+                            }
+                        },
+                        orderByColumn : "",  // table order By column name
+                        reverse : true,
+                        setOrderByColumn : function (column) {
+                            if (column == "") {
+                                return;
+                            }
+
+                            if (this.orderByColumn == column) {
+                                this.reverse = !this.reverse;
+                            }
+                            else {
+                                this.reverse = true;
+                            }
+
+                            this.orderByColumn = column;
+                            return this;
+                        },
+                        getDateFormat : function (formatType, date) {
+                            if (formatType == "" || formatType == null) {
+                                formatType = "01";
+                            }
+                            Date.prototype.format = function (f) {
+                                if (!this.valueOf()) {
+                                    return " ";
+                                }
+                                var weekName = ["�씪�슂�씪", "�썡�슂�씪", "�솕�슂�씪", "�닔�슂�씪", "紐⑹슂�씪", "湲덉슂�씪", "�넗�슂�씪"];
+                                var d = this;
+
+                                return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function ($1) {
+                                    switch ($1) {
+                                        case "yyyy":
+                                            return d.getFullYear();
+                                        case "yy":
+                                            return (d.getFullYear() % 1000).zf(2);
+                                        case "MM":
+                                            return (d.getMonth() + 1).zf(2);
+                                        case "dd":
+                                            return d.getDate().zf(2);
+                                        case "E":
+                                            return weekName[d.getDay()];
+                                        case "HH":
+                                            return d.getHours().zf(2);
+                                        case "hh":
+                                            var h = d.getHours();
+                                            return ((h = d.getHours() % 12) ? h : 12).zf(2);
+                                        case "mm":
+                                            return d.getMinutes().zf(2);
+                                        case "ss":
+                                            return d.getSeconds().zf(2);
+                                        case "a/p":
+                                            return d.getHours() < 12 ? "�삤�쟾" : "�삤�썑";
+                                        default:
+                                            return $1;
+                                    }
+                                });
+                            };
+
+                            String.prototype.string = function (len) {
+                                var s = '', i = 0;
+                                while (i++ < len) {
+                                    s += this;
+                                }
+                                return s;
+                            };
+                            String.prototype.zf = function (len) {
+                                return "0".string(len - this.length) + this;
+                            };
+                            Number.prototype.zf = function (len) {
+                                return this.toString().zf(len);
+                            };
+
+                            var dateFormat = "";
+                            var dynamicTime = false;
+                            var today = new Date().format("yyyy-MM-dd");
+                            var compareDate = new Date(date).format("yyyy-MM-dd");
+
+                            if (today == compareDate) {
+                                dynamicTime = true;
+                            }
+
+                            switch (formatType) {
+                                case "01":  //  �궇吏�
+                                    dateFormat = "yyyy-MM-dd";
+                                    break;
+                                case "02":  //  �궇吏� + �떆媛�
+                                    dateFormat = "yyyy-MM-dd HH:mm";
+                                    break;
+                                case "03":  //  �쑀�룞�쟻 �몴�떆
+                                    if (dynamicTime) {
+                                        dateFormat = "HH:mm";
+                                    }
+                                    else {
+                                        dateFormat = "yyyy-MM-dd HH:mm";
+                                    }
+
+                                    break;
+                            }
+
+                            return dateFormat;
+                        }
+                    }
+                }
+            }
+        });
+    });
diff --git a/src/main/webapp/custom_components/js-down/downColumnGenerator.directive.js b/src/main/webapp/custom_components/js-down/downColumnGenerator.directive.js
new file mode 100644
index 0000000..2d070fb
--- /dev/null
+++ b/src/main/webapp/custom_components/js-down/downColumnGenerator.directive.js
@@ -0,0 +1,141 @@
+'use strict';
+
+define(['app', 'angular'],
+    function (app, angular) {
+
+        app.directive('downColumnGenerator', ['$compile', '$log', '$rootScope', '$downProvider', '$filter',
+            function ($compile, $log, $rootScope, $downProvider, $filter) {
+                return {
+                    restrict : "A",
+                    compile : function (tElement, tAttrs) {
+                        return function (scope, element, attrs) {
+                            scope.data = scope[attrs["downColumnGenerator"]];
+
+                            var myData = scope.data;
+                            var makeTag = "";
+
+                            scope.tableConfigs.forEach(function (tableConfig, index) {
+
+                                if (tableConfig.colSpan > 0) {
+                                    return;
+                                }
+
+                                // �븯�쐞 �떒怨� �몴�떆 異붽�
+                                var myToken = "";
+                                if ( scope.data.depth > 0)  {
+                                    for(var i=0; i<scope.data.depth; i++) {
+                                        if (i == scope.data.depth - 1) {
+                                            myToken += treeStartToken;
+                                        } else {
+                                            myToken += "&emsp;";
+                                        }
+                                    }
+                                    myToken += "&nbsp;";
+                                }
+
+                                makeTag = '<td class="' + tableConfig.dAlign + ' ' + tableConfig.dVisible + '">';
+
+                                if (tableConfig.dType === "checkbox") {
+                                    //  泥댄겕 諛뺤뒪�씪�븣
+                                    /*if (scope.data.defaultYn) {
+                                        makeTag += '<input type="checkbox" ng-checked="data.checked == true ? true : false" disabled ng-click="$root.$downProvider.rowChecked(tableConfigs, data, fn.getResponseData())">';
+                                    }
+                                    else {*/
+                                    makeTag += '<input type="checkbox" ng-checked="data.checked == true ? true : false" ng-click="$root.$downProvider.rowChecked(tableConfigs, data, fn.getResponseData())">';
+                                    //}
+
+                                    tableConfig.hChecked = false;
+                                }
+                                else if (tableConfig.dType === "radio") {
+                                    //  �씪�뵒�삤 踰꾪듉�씪�븣
+                                    makeTag += '<input type="radio" ng-checked="data.checked == true ? true : false" ng-click="$root.$downProvider.rowChecked(tableConfigs, data, fn.getResponseData())">';
+                                }
+                                else if (tableConfig.dType === "renderer") {
+                                    //  �옖�뜑�윭 �씪�븣
+                                    switch (tableConfig.dRenderer) {
+
+                                        // �븯�쐞 �씠�뒋 �씠�룞(�젣紐�)
+                                        case "ISSUE_DOWN_MOVE" :
+                                            makeTag += "<span class=\"titlename cursor\" ng-click=\"event.changeDetailView(data)\">" + scope.data.title + "</span></a>";
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 ���엯
+                                        case "ISSUE_DOWN_STATUS_TYPE" :
+                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.issueStatusVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.issueStatusVo.color + "\", \"color\": \"#FFFFFF\" }'>" + scope.data.issueStatusVo.name + "</span>";
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 �궘�젣
+                                        case "ISSUE_DOWN_DELETE":
+                                            if (scope.data.modifyPermissionCheck) {
+                                                makeTag += '<img class="cursor" src="/assets/images/delete-icon.png" ng-click="event.removeDownIssue(data.id)">';
+                                            }
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 �슦�꽑 �닚�쐞
+                                        case "DOWN_COMMON_PRIORITY" :
+                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.priorityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.priorityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.priorityVo.name + "'></span>";
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 以묒슂�룄
+                                        case "DOWN_COMMON_SEVERITY" :
+                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.severityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.severityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.severityVo.name + "'></span>";
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 �떞�떦遺��꽌
+                                        case "DOWN_ISSUE_DEPARTMENT" :
+                                            makeTag += "<ul class='ul-not-comma'>";
+                                            makeTag += "<div style='color: #000000'>";
+                                            angular.forEach(scope.data.departmentVos, function (departments) {
+                                                makeTag += "<li>" + departments.departmentName + "</li>";
+                                            });
+                                            makeTag += "</div>";
+                                            makeTag += "</ul>";
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 �벑濡앹옄
+                                        case "DOWN_REGISTER":
+                                            scope.data.registerVos = [scope.data.registerVo];
+                                            makeTag += '<div owl-profile-over class="" table-user-image="data" target="registerVos"></div>';
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 湲곌컙
+                                        case "DOWN_ISSUE_DUE_DATE" :
+                                            if (!$rootScope.isDefined(scope.data.startDate) && !$rootScope.isDefined(scope.data.completeDate)) {
+                                                makeTag += "<span translate='common.noDate'>湲곌컙 �뾾�쓬</span>";
+                                            }
+                                            else {
+                                                makeTag += "<span>" + scope.data.startDate + " ~ " + scope.data.completeDate + "</span>";
+                                            }
+                                            break;
+
+                                        // �븯�쐞 �씠�뒋 �궗�슜�옄 �젙�쓽 �븘�뱶
+                                        case "DOWN_ISSUE_CUSTOM_FIELD_VALUE_VIEW" :
+                                            var values = [];
+
+                                            for (var count in scope.data.issueCustomFieldValueVos) {
+                                                var issueCustomFieldValueVo = scope.data.issueCustomFieldValueVos[count];
+                                                //  �뀒�씠釉� �꽕�젙�뿉�꽌 dName 遺�遺꾩뿉 �궗�슜�옄 �젙�쓽 �븘�뱶 id 瑜� �꽔怨� �빐�떦 媛믪쓣 異붿텧�븳�떎.
+                                                if (tableConfig.columnHint.id == issueCustomFieldValueVo.customFieldVo.id) {
+                                                    values.push(issueCustomFieldValueVo.useValue);
+                                                }
+                                            }
+                                            angular.forEach(values, function (value) {
+                                                makeTag += '<span class="table-word-break-all">' + value + '<span><br>';
+                                            });
+
+                                            break;
+                                    }
+                                }
+
+                                makeTag += '</td>';
+
+                                var linkFn = $compile(makeTag);
+                                var content = linkFn(scope);
+
+                                element.append(content);
+                            });
+                        }
+                    }
+                }
+        }]);
+    });
diff --git a/src/main/webapp/custom_components/js-down/js-down.directive.js b/src/main/webapp/custom_components/js-down/js-down.directive.js
new file mode 100644
index 0000000..f456e55
--- /dev/null
+++ b/src/main/webapp/custom_components/js-down/js-down.directive.js
@@ -0,0 +1,36 @@
+'use strict';
+
+define(['app'],
+    function (app) {
+        app.directive('jsDown', ['$log',
+            function ($log) {
+                return {
+                    restrict : 'E',
+                    scope : {
+                        event : '=',
+                        data : '=',
+                        tableConfigs : '=',
+                        hideHeader : '=', // �뿤�뜑 遺�遺� �닲源� �뿬遺�
+                        useSort : '=', // �젙�졊 湲곕뒫 �궗�슜 �뿬遺�
+                        detailView : "="    //  �씠�뒋 紐⑸줉 �긽�꽭�삎 蹂�寃쎌쓣 �쐞�빐 �궗�슜. �떎瑜� �솕硫댁� �궗�슜�븯吏� �븡�쓬.
+                    },
+                    replace : true,
+                    templateUrl : '/custom_components/js-down/js-down.html',
+                    controller : function ($scope, $element, $attrs) {
+                        $scope.fn = {
+                            getResponseData : getResponseData
+                        };
+
+                        //  �뀒�씠釉� �젙蹂� 媛��졇�삤湲�
+                        function getResponseData() {
+                            return $scope.data;
+                        }
+                    },
+                    link : function (scope, element, attrs) {
+
+                    }
+                };
+            }])
+    });
+
+
diff --git a/src/main/webapp/custom_components/js-down/js-down.html b/src/main/webapp/custom_components/js-down/js-down.html
new file mode 100644
index 0000000..4dbe056
--- /dev/null
+++ b/src/main/webapp/custom_components/js-down/js-down.html
@@ -0,0 +1,47 @@
+<table class="table table-striped table-layout-fixed" ng-class="{ 'width768' : !detailView }" bindonce>
+    <!-- �뀒�씠釉� 癒몃━ -->
+    <thead>
+    <tr ng-if="hideHeader != true">
+        <th bindonce ng-repeat="tableConfig in tableConfigs"
+            bo-class="[tableConfig.hAlign, tableConfig.hWidth, tableConfig.dVisible]"
+            ng-click="$root.$downProvider.setOrderByColumn(tableConfig.dName)"
+            bo-style="{ 'cursor' : tableConfig.dName != '' ? 'pointer' : '' }"
+            rowspan="{{tableConfig.rowSpan}}"
+            colspan="{{tableConfig.colSpan}}"
+            ng-if="!tableConfig.subHead">
+            <!-- 泥댄겕 諛뺤뒪�씪 寃쎌슦 -->
+            <div bo-switch="tableConfig.dType">
+                <div bo-switch-when="checkbox">
+                    <input type="checkbox" tabindex="-1" ng-model="tableConfig.hChecked" ng-click="$root.$downProvider.toggleChecked(tableConfig.hChecked, fn.getResponseData())">
+                </div>
+                <div bo-switch-default>
+                    <span ng-if="tableConfig.columnTooltip != ''" function-tool-tip data-placement="top" data-toggle="tooltip" data-original-title="{{tableConfig.columnTooltip}}"
+                          translate="{{tableConfig.hName}}"></span>
+                    <span ng-if="tableConfig.columnTooltip == ''" translate="{{tableConfig.hName}}"></span>
+                    <span ng-if="($root.$downProvider.orderByColumn == tableConfig.dName) && (tableConfig.dName != '')"><i class="fa fa-arrow-circle-down" ng-show="!$root.$downProvider.reverse"></i>
+                        <i class="fa fa-arrow-circle-up" ng-show="$root.$downProvider.reverse"></i>
+                    </span>
+                </div>
+            </div>
+        </th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr ng-if="useSort != false" ng-repeat="row in fn.getResponseData() | orderBy:$root.$downProvider.orderByColumn:$root.$downProvider.reverse"
+        bo-class="[row.checked == true ? 'table-active' : '', tableConfig.hWidth]"
+        down-column-generator="row">
+    </tr>
+
+    <tr ng-if="useSort == false" ng-repeat="row in fn.getResponseData()"
+        bo-class="[row.checked == true ? 'table-active' : '', tableConfig.hWidth]"
+        down-column-generator="row">
+    </tr>
+
+    <tr ng-if="fn.getResponseData().length == 0">
+        <td colspan="{{tableConfigs.length}}">
+            <span translate="common.noData">�뜲�씠�꽣媛� �뾾�뒿�땲�떎.</span>
+        </td>
+    </tr>
+    </tbody>
+</table>
diff --git a/src/main/webapp/custom_components/js-rel/js-rel.directive.js b/src/main/webapp/custom_components/js-rel/js-rel.directive.js
new file mode 100644
index 0000000..e3f89eb
--- /dev/null
+++ b/src/main/webapp/custom_components/js-rel/js-rel.directive.js
@@ -0,0 +1,36 @@
+'use strict';
+
+define(['app'],
+    function (app) {
+        app.directive('jsRel', ['$log',
+            function ($log) {
+                return {
+                    restrict : 'E',
+                    scope : {
+                        event : '=',
+                        data : '=',
+                        tableConfigs : '=',
+                        hideHeader : '=', // �뿤�뜑 遺�遺� �닲源� �뿬遺�
+                        useSort : '=', // �젙�졊 湲곕뒫 �궗�슜 �뿬遺�
+                        detailView : "="    //  �씠�뒋 紐⑸줉 �긽�꽭�삎 蹂�寃쎌쓣 �쐞�빐 �궗�슜. �떎瑜� �솕硫댁� �궗�슜�븯吏� �븡�쓬.
+                    },
+                    replace : true,
+                    templateUrl : '/custom_components/js-rel/js-rel.html',
+                    controller : function ($scope, $element, $attrs) {
+                        $scope.fn = {
+                            getResponseData : getResponseData
+                        };
+
+                        //  �뀒�씠釉� �젙蹂� 媛��졇�삤湲�
+                        function getResponseData() {
+                            return $scope.data;
+                        }
+                    },
+                    link : function (scope, element, attrs) {
+
+                    }
+                };
+            }])
+    });
+
+
diff --git a/src/main/webapp/custom_components/js-rel/js-rel.html b/src/main/webapp/custom_components/js-rel/js-rel.html
new file mode 100644
index 0000000..090a59e
--- /dev/null
+++ b/src/main/webapp/custom_components/js-rel/js-rel.html
@@ -0,0 +1,47 @@
+<table class="table table-striped table-layout-fixed" ng-class="{ 'width768' : !detailView }" bindonce>
+    <!-- �뀒�씠釉� 癒몃━ -->
+    <thead>
+    <tr ng-if="hideHeader != true">
+        <th bindonce ng-repeat="tableConfig in tableConfigs"
+            bo-class="[tableConfig.hAlign, tableConfig.hWidth, tableConfig.dVisible]"
+            ng-click="$root.$relProvider.setOrderByColumn(tableConfig.dName)"
+            bo-style="{ 'cursor' : tableConfig.dName != '' ? 'pointer' : '' }"
+            rowspan="{{tableConfig.rowSpan}}"
+            colspan="{{tableConfig.colSpan}}"
+            ng-if="!tableConfig.subHead">
+            <!-- 泥댄겕 諛뺤뒪�씪 寃쎌슦 -->
+            <div bo-switch="tableConfig.dType">
+                <div bo-switch-when="checkbox">
+                    <input type="checkbox" tabindex="-1" ng-model="tableConfig.hChecked" ng-click="$root.$relProvider.toggleChecked(tableConfig.hChecked, fn.getResponseData())">
+                </div>
+                <div bo-switch-default>
+                    <span ng-if="tableConfig.columnTooltip != ''" function-tool-tip data-placement="top" data-toggle="tooltip" data-original-title="{{tableConfig.columnTooltip}}"
+                          translate="{{tableConfig.hName}}"></span>
+                    <span ng-if="tableConfig.columnTooltip == ''" translate="{{tableConfig.hName}}"></span>
+                    <span ng-if="($root.$relProvider.orderByColumn == tableConfig.dName) && (tableConfig.dName != '')"><i class="fa fa-arrow-circle-down" ng-show="!$root.$relProvider.reverse"></i>
+                        <i class="fa fa-arrow-circle-up" ng-show="$root.$relProvider.reverse"></i>
+                    </span>
+                </div>
+            </div>
+        </th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr ng-if="useSort != false" ng-repeat="row in fn.getResponseData() | orderBy:$root.$relProvider.orderByColumn:$root.$relProvider.reverse"
+        bo-class="[row.checked == true ? 'table-active' : '', tableConfig.hWidth]"
+        rel-column-generator="row">
+    </tr>
+
+    <tr ng-if="useSort == false" ng-repeat="row in fn.getResponseData()"
+        bo-class="[row.checked == true ? 'table-active' : '', tableConfig.hWidth]"
+        rel-column-generator="row">
+    </tr>
+
+    <tr ng-if="fn.getResponseData().length == 0">
+        <td colspan="{{tableConfigs.length}}">
+            <span translate="common.noData">�뜲�씠�꽣媛� �뾾�뒿�땲�떎.</span>
+        </td>
+    </tr>
+    </tbody>
+</table>
diff --git a/src/main/webapp/custom_components/js-rel/rel.provider.js b/src/main/webapp/custom_components/js-rel/rel.provider.js
new file mode 100644
index 0000000..8e7125e
--- /dev/null
+++ b/src/main/webapp/custom_components/js-rel/rel.provider.js
@@ -0,0 +1,239 @@
+'use strict';
+
+define(['app', 'angular'],
+    function (app, angular) {
+        app.provider("$relProvider", function () {
+            return {
+                $get : function ($log) {
+                    return {
+                        config : function () {
+                            var tableConfig = {
+                                hName : "",	//	�뿤�뜑 �씠由�
+                                hWidth : "",	//	移쇰읆 湲몄씠
+                                hChecked : false,	//	泥댄겕 諛뺤뒪 �꽑�깮 �뿬遺�
+                                hAlign : "text-center",	//	�뿤�뜑 �젙�젹 湲곗�
+                                hSort : true,	//	�젙�젹 媛��뒫 �뿬遺�
+                                dName : "",	//	�뜲�씠�꽣 �씠由�
+                                dAlign : "text-left",	//	�뜲�씠�꽣 �젙�젹 湲곗�
+                                dRenderer : "",	//	�젋�뜑�윭 �뿬遺�
+                                dVisible : "",  //      bootstrap 諛섏쓳�삎 而щ읆 �몴�떆 �뿬遺�
+                                dType : "none",        // �깭洹� ���엯
+                                dDateFormat : "",   //  �궇吏� �삎�떇
+                                rowSpan : 0,    //  rowspan �쓣 吏��썝�븳�떎.
+                                colSpan : 0,    //  colspan �쓣 吏��썝�븳�떎.
+                                subHead : false,    //  留뚯빟 rowspan, colspan �쓣 �궗�슜�븯寃� �릺硫� true 濡� �뀑�똿.
+                                columnHint : "",    //  而щ읆 �젙蹂대�� 異붿텧�븯湲� �쐞�븳 �엺�듃 �젙蹂대�� 以��떎 - relColumnGenerator �쓽 �궗�슜�옄 �젙�쓽 �븘�뱶 遺�遺꾩뿉�꽌 �궗�슜
+                                columnTooltip : "", // hover �떆 �댋�똻 蹂댁뿬二쇨린
+                                setHName : function (hName) {
+                                    this.hName = hName;
+                                    return this;
+                                },
+                                setHWidth : function (hWidth) {
+                                    this.hWidth = hWidth;
+                                    return this;
+                                },
+                                setHChecked : function (hChecked) {
+                                    this.hChecked = hChecked;
+                                    return this;
+                                },
+                                setHAlign : function (hAlign) {
+                                    this.hAlign = hAlign;
+                                    return this;
+                                },
+                                setHSort : function (hSort) {
+                                    this.hSort = hSort;
+                                    return this;
+                                },
+                                setDName : function (dName) {
+                                    this.dName = dName;
+                                    return this;
+                                },
+                                setDAlign : function (dAlign) {
+                                    this.dAlign = dAlign;
+                                    return this;
+                                },
+                                setDRenderer : function (dRenderer) {
+                                    this.dRenderer = dRenderer;
+                                    return this;
+                                },
+                                setDVisible : function (dVisible) {
+                                    this.dVisible = dVisible;
+                                    return this;
+                                },
+                                setDType : function (dType) {
+                                    this.dType = dType;
+                                    return this;
+                                },
+                                setDDateFormat : function (dDateFormat) {
+                                    this.dDateFormat = dDateFormat;
+                                    return this;
+                                },
+                                setRowSpan : function (dRowSpan) {
+                                    this.rowSpan = dRowSpan;
+                                    return this;
+                                },
+                                setColSpan : function (dColSpan) {
+                                    this.colSpan = dColSpan;
+                                    return this;
+                                },
+                                setSubHead : function (dSubHead) {
+                                    this.subHead = dSubHead;
+                                    return this;
+                                },
+                                setColumnHint : function (dColumnHint) {
+                                    this.columnHint = dColumnHint;
+                                    return this;
+                                },
+                                setColumnTooltip : function (hTooltip) {
+                                    this.columnTooltip = hTooltip;
+                                    return this;
+                                }
+                            };
+
+                            return tableConfig;
+                        },
+                        toggleChecked : function (checkStatus, datas) {
+                            //  �쟾泥� �꽑�깮 泥댄겕 諛뺤뒪瑜� �겢由��뻽�쓣 寃쎌슦
+                            angular.forEach(datas, function (data) {
+                                /*if (angular.isDefined(data.defaultYn)) {
+                                    if (!data.defaultYn) {
+                                        data.checked = checkStatus;
+                                    }
+                                }
+                                else {*/
+                                    data.checked = checkStatus;
+                                //}
+                            });
+                        },
+                        radioChecked : function (target, datas) {
+                            //  �빐�떦 row 媛� �씪�뵒�삤 踰꾪듉�씪 寃쎌슦
+                            angular.forEach(datas, function (data) {
+                                if (target.id == data.id) {
+                                    data.checked = true;
+                                }
+                                else {
+                                    data.checked = false;
+                                }
+                            });
+                        },
+                        rowChecked : function (tableConfig, target, datas) {
+                            //  媛� row �쓽 泥댄겕諛뺤뒪/�씪�뵒�삤 踰꾪듉�쓣 �겢由��뻽�쓣 寃쎌슦
+                            if (tableConfig[0].dType == "checkbox") {
+                                target.checked = !target.checked;
+
+                                for (var data in datas) {
+                                    if (!data.checked) {
+                                        this.hChecked = false;
+                                        break;
+                                    }
+                                }
+                            }
+                            else if (tableConfig[0].dType == "radio") {
+                                this.radioChecked(target, datas);
+                            }
+                        },
+                        orderByColumn : "",  // table order By column name
+                        reverse : true,
+                        setOrderByColumn : function (column) {
+                            if (column == "") {
+                                return;
+                            }
+
+                            if (this.orderByColumn == column) {
+                                this.reverse = !this.reverse;
+                            }
+                            else {
+                                this.reverse = true;
+                            }
+
+                            this.orderByColumn = column;
+                            return this;
+                        },
+                        getDateFormat : function (formatType, date) {
+                            if (formatType == "" || formatType == null) {
+                                formatType = "01";
+                            }
+                            Date.prototype.format = function (f) {
+                                if (!this.valueOf()) {
+                                    return " ";
+                                }
+                                var weekName = ["�씪�슂�씪", "�썡�슂�씪", "�솕�슂�씪", "�닔�슂�씪", "紐⑹슂�씪", "湲덉슂�씪", "�넗�슂�씪"];
+                                var d = this;
+
+                                return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function ($1) {
+                                    switch ($1) {
+                                        case "yyyy":
+                                            return d.getFullYear();
+                                        case "yy":
+                                            return (d.getFullYear() % 1000).zf(2);
+                                        case "MM":
+                                            return (d.getMonth() + 1).zf(2);
+                                        case "dd":
+                                            return d.getDate().zf(2);
+                                        case "E":
+                                            return weekName[d.getDay()];
+                                        case "HH":
+                                            return d.getHours().zf(2);
+                                        case "hh":
+                                            var h = d.getHours();
+                                            return ((h = d.getHours() % 12) ? h : 12).zf(2);
+                                        case "mm":
+                                            return d.getMinutes().zf(2);
+                                        case "ss":
+                                            return d.getSeconds().zf(2);
+                                        case "a/p":
+                                            return d.getHours() < 12 ? "�삤�쟾" : "�삤�썑";
+                                        default:
+                                            return $1;
+                                    }
+                                });
+                            };
+
+                            String.prototype.string = function (len) {
+                                var s = '', i = 0;
+                                while (i++ < len) {
+                                    s += this;
+                                }
+                                return s;
+                            };
+                            String.prototype.zf = function (len) {
+                                return "0".string(len - this.length) + this;
+                            };
+                            Number.prototype.zf = function (len) {
+                                return this.toString().zf(len);
+                            };
+
+                            var dateFormat = "";
+                            var dynamicTime = false;
+                            var today = new Date().format("yyyy-MM-dd");
+                            var compareDate = new Date(date).format("yyyy-MM-dd");
+
+                            if (today == compareDate) {
+                                dynamicTime = true;
+                            }
+
+                            switch (formatType) {
+                                case "01":  //  �궇吏�
+                                    dateFormat = "yyyy-MM-dd";
+                                    break;
+                                case "02":  //  �궇吏� + �떆媛�
+                                    dateFormat = "yyyy-MM-dd HH:mm";
+                                    break;
+                                case "03":  //  �쑀�룞�쟻 �몴�떆
+                                    if (dynamicTime) {
+                                        dateFormat = "HH:mm";
+                                    }
+                                    else {
+                                        dateFormat = "yyyy-MM-dd HH:mm";
+                                    }
+
+                                    break;
+                            }
+
+                            return dateFormat;
+                        }
+                    }
+                }
+            }
+        });
+    });
diff --git a/src/main/webapp/custom_components/js-rel/relColumnGenerator.directive.js b/src/main/webapp/custom_components/js-rel/relColumnGenerator.directive.js
new file mode 100644
index 0000000..c7e184f
--- /dev/null
+++ b/src/main/webapp/custom_components/js-rel/relColumnGenerator.directive.js
@@ -0,0 +1,142 @@
+'use strict';
+
+define(['app', 'angular'],
+    function (app, angular) {
+
+        app.directive('relColumnGenerator', ['$compile', '$log', '$rootScope', '$relProvider', '$filter',
+            function ($compile, $log, $rootScope, $relProvider, $filter) {
+                return {
+                    restrict : "A",
+                    compile : function (tElement, tAttrs) {
+                        return function (scope, element, attrs) {
+                            scope.data = scope[attrs["relColumnGenerator"]];
+
+                            var myData = scope.data;
+                            var makeTag = "";
+
+                            scope.tableConfigs.forEach(function (tableConfig, index) {
+
+                                if (tableConfig.colSpan > 0) {
+                                    return;
+                                }
+
+                                // �븯�쐞 �떒怨� �몴�떆 異붽�
+                                var myToken = "";
+                                if ( scope.data.depth > 0)  {
+                                    for(var i=0; i<scope.data.depth; i++) {
+                                        if (i == scope.data.depth - 1) {
+                                            myToken += treeStartToken;
+                                        } else {
+                                            myToken += "&emsp;";
+                                        }
+                                    }
+                                    myToken += "&nbsp;";
+                                }
+
+                                makeTag = '<td class="' + tableConfig.dAlign + ' ' + tableConfig.dVisible + '">';
+
+                                if (tableConfig.dType === "checkbox") {
+                                    //  泥댄겕 諛뺤뒪�씪�븣
+                                    /*if (scope.data.defaultYn) {
+                                        makeTag += '<input type="checkbox" ng-checked="data.checked == true ? true : false" disabled ng-click="$root.$relProvider.rowChecked(tableConfigs, data, fn.getResponseData())">';
+                                    }
+                                    else {*/
+                                    makeTag += '<input type="checkbox" ng-checked="data.checked == true ? true : false" ng-click="$root.$relProvider.rowChecked(tableConfigs, data, fn.getResponseData())">';
+                                    //}
+
+                                    tableConfig.hChecked = false;
+                                }
+                                else if (tableConfig.dType === "radio") {
+                                    //  �씪�뵒�삤 踰꾪듉�씪�븣
+                                    makeTag += '<input type="radio" ng-checked="data.checked == true ? true : false" ng-click="$root.$relProvider.rowChecked(tableConfigs, data, fn.getResponseData())">';
+                                }
+                                else if (tableConfig.dType === "renderer") {
+                                    //  �옖�뜑�윭 �씪�븣
+                                    switch (tableConfig.dRenderer) {
+
+                                        // �뿰愿� �씠�뒋 �씠�룞(�젣紐�)
+                                        case "ISSUE_RELATION_MOVE" :
+                                            makeTag += "<span class=\"titlename cursor text-center\" ng-click=\"event.changeDetailView(data.issueRelation)\">" + scope.data.title + "</span></a>";
+                                            break;
+
+                                        // �뿰愿��씠�뒋 援щ텇
+                                        case "ISSUE_RELATION_TYPE":
+                                            makeTag += "<span>" + scope.data.relationIssueTypeName + "</span>";
+                                            break;
+
+                                        // �뿰愿��씠�뒋 �궘�젣
+                                        case "ISSUE_RELATION_DELETE":
+                                            if (scope.data.modifyPermissionCheck) {
+                                                makeTag += '<img class="cursor" src="/assets/images/delete-icon.png" ng-click="event.removeRelationIssue(data.id)">';
+                                            }
+                                            break;
+
+                                        // �뿰愿� �씠�뒋 �슦�꽑�닚�쐞
+                                        case "REL_COMMON_PRIORITY" :
+                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.priorityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.priorityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.priorityVo.name + "'></span>";
+                                            break;
+
+                                        // �뿰愿� �씠�뒋 以묒슂�룄
+                                        case "REL_COMMON_SEVERITY" :
+                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.severityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.severityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.severityVo.name + "'></span>";
+                                            break;
+
+                                        // �뿰愿� �씠�뒋 �벑濡앹옄
+                                        case "REL_REGISTER":
+                                            scope.data.registerVos = [scope.data.issueRelation.registerVo];
+                                            makeTag += '<div owl-profile-over class="" table-user-image="data" target="registerVos"></div>';
+                                            break;
+
+                                            break;
+
+                                        // �뿰愿� �씠�뒋 �떞�떦遺��꽌
+                                        case "REL_ISSUE_DEPARTMENT" :
+                                            makeTag += "<ul class='ul-not-comma'>";
+                                            makeTag += "<div style='color: #000000'>";
+                                            angular.forEach(scope.data.issueRelation.departmentVos, function (departments) {
+                                                makeTag += "<li>" + departments.departmentName + "</li>";
+                                            });
+                                            makeTag += "</div>";
+                                            makeTag += "</ul>";
+                                            break;
+
+                                        // �뿰愿� �씠�뒋 紐⑸줉�뿉�꽌 湲곌컙 �몴�떆
+                                        case "REL_ISSUE_DUE_DATE" :
+                                            if (!$rootScope.isDefined(scope.data.issueRelation.startDate) && !$rootScope.isDefined(scope.data.issueRelation.completeDate)) {
+                                                makeTag += "<span translate='common.noDate'>湲곌컙 �뾾�쓬</span>";
+                                            } else {
+                                                makeTag += "<span>" + scope.data.issueRelation.startDate + " ~ " + scope.data.issueRelation.completeDate + "</span>";
+                                            }
+                                            break;
+
+                                        // �뿰愿� �씠�뒋 �궗�슜�옄 �젙�쓽 �븘�뱶
+                                        case "REL_ISSUE_CUSTOM_FIELD_VALUE_VIEW" :
+                                            var values = [];
+
+                                            for (var count in scope.data.issueRelation.issueCustomFieldValueVos) {
+                                                var issueCustomFieldValueVo = scope.data.issueRelation.issueCustomFieldValueVos[count];
+                                                //  �뀒�씠釉� �꽕�젙�뿉�꽌 dName 遺�遺꾩뿉 �궗�슜�옄 �젙�쓽 �븘�뱶 id 瑜� �꽔怨� �빐�떦 媛믪쓣 異붿텧�븳�떎.
+                                                if (tableConfig.columnHint.id == issueCustomFieldValueVo.customFieldVo.id) {
+                                                    values.push(issueCustomFieldValueVo.useValue);
+                                                }
+                                            }
+                                            angular.forEach(values, function (value) {
+                                                makeTag += '<span class="table-word-break-all cursor">' + value + '<span><br>';
+                                            });
+
+                                            break;
+                                    }
+                                }
+
+                                makeTag += '</td>';
+
+                                var linkFn = $compile(makeTag);
+                                var content = linkFn(scope);
+
+                                element.append(content);
+                            });
+                        }
+                    }
+                }
+        }]);
+    });
diff --git a/src/main/webapp/custom_components/js-table/tableColumnGenerator.directive.js b/src/main/webapp/custom_components/js-table/tableColumnGenerator.directive.js
index 7bc7528..cdbf380 100644
--- a/src/main/webapp/custom_components/js-table/tableColumnGenerator.directive.js
+++ b/src/main/webapp/custom_components/js-table/tableColumnGenerator.directive.js
@@ -235,148 +235,148 @@
                                             break;*/
 
                                         // �뿰愿� �씠�뒋 �씠�룞(�젣紐�)
-                                        case "ISSUE_RELATION_MOVE" :
-                                            makeTag += "<span class=\"titlename cursor text-center\" ng-click=\"event.changeDetailView(data.issueRelation)\">" + scope.data.title + "</span></a>";
-                                            break;
+                                        // case "ISSUE_RELATION_MOVE" :
+                                        //     makeTag += "<span class=\"titlename cursor text-center\" ng-click=\"event.changeDetailView(data.issueRelation)\">" + scope.data.title + "</span></a>";
+                                        //     break;
 
                                         // �뿰愿��씠�뒋 援щ텇
-                                        case "ISSUE_RELATION_TYPE":
-                                            makeTag += "<span>" + scope.data.relationIssueTypeName + "</span>";
-                                            break;
+                                        // case "ISSUE_RELATION_TYPE":
+                                        //     makeTag += "<span>" + scope.data.relationIssueTypeName + "</span>";
+                                        //     break;
 
                                         // �뿰愿��씠�뒋 �궘�젣
-                                        case "ISSUE_RELATION_DELETE":
-                                            if (scope.data.modifyPermissionCheck) {
-                                                makeTag += '<img class="cursor" src="/assets/images/delete-icon.png" ng-click="event.removeRelationIssue(data.id)">';
-                                            }
-                                            break;
+                                        // case "ISSUE_RELATION_DELETE":
+                                        //     if (scope.data.modifyPermissionCheck) {
+                                        //         makeTag += '<img class="cursor" src="/assets/images/delete-icon.png" ng-click="event.removeRelationIssue(data.id)">';
+                                        //     }
+                                        //     break;
 
                                         // �뿰愿� �씠�뒋 �슦�꽑�닚�쐞
-                                        case "REL_COMMON_PRIORITY" :
-                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.priorityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.priorityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.priorityVo.name + "'></span>";
-                                            break;
+                                        // case "REL_COMMON_PRIORITY" :
+                                        //     makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.priorityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.priorityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.priorityVo.name + "'></span>";
+                                        //     break;
 
                                         // �뿰愿� �씠�뒋 以묒슂�룄
-                                        case "REL_COMMON_SEVERITY" :
-                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.severityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.severityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.severityVo.name + "'></span>";
-                                            break;
+                                        // case "REL_COMMON_SEVERITY" :
+                                        //     makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.severityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.severityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.severityVo.name + "'></span>";
+                                        //     break;
 
                                         // �뿰愿� �씠�뒋 �벑濡앹옄
-                                        case "REL_REGISTER":
-                                            scope.data.registerVos = [scope.data.issueRelation.registerVo];
-                                            makeTag += '<div owl-profile-over class="" table-user-image="data" target="registerVos"></div>';
-                                            break;
-
-                                            break;
+                                        // case "REL_REGISTER":
+                                        //     scope.data.registerVos = [scope.data.issueRelation.registerVo];
+                                        //     makeTag += '<div owl-profile-over class="" table-user-image="data" target="registerVos"></div>';
+                                        //     break;
+                                        //
+                                        //     break;
 
                                         // �뿰愿� �씠�뒋 �떞�떦遺��꽌
-                                        case "REL_ISSUE_DEPARTMENT" :
-                                            makeTag += "<ul class='ul-not-comma'>";
-                                            makeTag += "<div style='color: #000000'>";
-                                            angular.forEach(scope.data.issueRelation.departmentVos, function (departments) {
-                                                makeTag += "<li>" + departments.departmentName + "</li>";
-                                            });
-                                            makeTag += "</div>";
-                                            makeTag += "</ul>";
-                                            break;
+                                        // case "REL_ISSUE_DEPARTMENT" :
+                                        //     makeTag += "<ul class='ul-not-comma'>";
+                                        //     makeTag += "<div style='color: #000000'>";
+                                        //     angular.forEach(scope.data.issueRelation.departmentVos, function (departments) {
+                                        //         makeTag += "<li>" + departments.departmentName + "</li>";
+                                        //     });
+                                        //     makeTag += "</div>";
+                                        //     makeTag += "</ul>";
+                                        //     break;
 
                                         // �뿰愿� �씠�뒋 紐⑸줉�뿉�꽌 湲곌컙 �몴�떆
-                                        case "REL_ISSUE_DUE_DATE" :
-                                            if (!$rootScope.isDefined(scope.data.issueRelation.startDate) && !$rootScope.isDefined(scope.data.issueRelation.completeDate)) {
-                                                makeTag += "<span translate='common.noDate'>湲곌컙 �뾾�쓬</span>";
-                                            }
-                                            else {
-                                                makeTag += "<span>" + scope.data.issueRelation.startDate + " ~ " + scope.data.issueRelation.completeDate + "</span>";
-                                            }
-                                            break;
+                                        // case "REL_ISSUE_DUE_DATE" :
+                                        //     if (!$rootScope.isDefined(scope.data.issueRelation.startDate) && !$rootScope.isDefined(scope.data.issueRelation.completeDate)) {
+                                        //         makeTag += "<span translate='common.noDate'>湲곌컙 �뾾�쓬</span>";
+                                        //     }
+                                        //     else {
+                                        //         makeTag += "<span>" + scope.data.issueRelation.startDate + " ~ " + scope.data.issueRelation.completeDate + "</span>";
+                                        //     }
+                                        //     break;
 
                                         // �뿰愿� �씠�뒋 �궗�슜�옄 �젙�쓽 �븘�뱶
-                                        case "REL_ISSUE_CUSTOM_FIELD_VALUE_VIEW" :
-                                            var values = [];
-
-                                            for (var count in scope.data.issueRelation.issueCustomFieldValueVos) {
-                                                var issueCustomFieldValueVo = scope.data.issueRelation.issueCustomFieldValueVos[count];
-                                                //  �뀒�씠釉� �꽕�젙�뿉�꽌 dName 遺�遺꾩뿉 �궗�슜�옄 �젙�쓽 �븘�뱶 id 瑜� �꽔怨� �빐�떦 媛믪쓣 異붿텧�븳�떎.
-                                                if (tableConfig.columnHint.id == issueCustomFieldValueVo.customFieldVo.id) {
-                                                    values.push(issueCustomFieldValueVo.useValue);
-                                                }
-                                            }
-                                            angular.forEach(values, function (value) {
-                                                makeTag += '<span class="table-word-break-all cursor">' + value + '<span><br>';
-                                            });
-
-                                            break;
+                                        // case "REL_ISSUE_CUSTOM_FIELD_VALUE_VIEW" :
+                                        //     var values = [];
+                                        //
+                                        //     for (var count in scope.data.issueRelation.issueCustomFieldValueVos) {
+                                        //         var issueCustomFieldValueVo = scope.data.issueRelation.issueCustomFieldValueVos[count];
+                                        //         //  �뀒�씠釉� �꽕�젙�뿉�꽌 dName 遺�遺꾩뿉 �궗�슜�옄 �젙�쓽 �븘�뱶 id 瑜� �꽔怨� �빐�떦 媛믪쓣 異붿텧�븳�떎.
+                                        //         if (tableConfig.columnHint.id == issueCustomFieldValueVo.customFieldVo.id) {
+                                        //             values.push(issueCustomFieldValueVo.useValue);
+                                        //         }
+                                        //     }
+                                        //     angular.forEach(values, function (value) {
+                                        //         makeTag += '<span class="table-word-break-all cursor">' + value + '<span><br>';
+                                        //     });
+                                        //
+                                        //     break;
 
                                         // �븯�쐞 �씠�뒋 �씠�룞(�젣紐�)
-                                        case "ISSUE_DOWN_MOVE" :
-                                            makeTag += "<span class=\"titlename cursor\" ng-click=\"event.changeDetailView(data)\">" + scope.data.title + "</span></a>";
-                                            break;
-
-                                        // �븯�쐞 �씠�뒋 ���엯
-                                        case "ISSUE_DOWN_STATUS_TYPE" :
-                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.issueStatusVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.issueStatusVo.color + "\", \"color\": \"#FFFFFF\" }'>" + scope.data.issueStatusVo.name + "</span>";
-                                            break;
-
+                                        // case "ISSUE_DOWN_MOVE" :
+                                        //     makeTag += "<span class=\"titlename cursor\" ng-click=\"event.changeDetailView(data)\">" + scope.data.title + "</span></a>";
+                                        //     break;
+                                        //
+                                        // // �븯�쐞 �씠�뒋 ���엯
+                                        // case "ISSUE_DOWN_STATUS_TYPE" :
+                                        //     makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.issueStatusVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.issueStatusVo.color + "\", \"color\": \"#FFFFFF\" }'>" + scope.data.issueStatusVo.name + "</span>";
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 �궘�젣
-                                        case "ISSUE_DOWN_DELETE":
-                                            if (scope.data.modifyPermissionCheck) {
-                                                makeTag += '<img class="cursor" src="/assets/images/delete-icon.png" ng-click="event.removeDownIssue(data.id)">';
-                                            }
-                                            break;
-
+                                        // case "ISSUE_DOWN_DELETE":
+                                        //     if (scope.data.modifyPermissionCheck) {
+                                        //         makeTag += '<img class="cursor" src="/assets/images/delete-icon.png" ng-click="event.removeDownIssue(data.id)">';
+                                        //     }
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 �슦�꽑 �닚�쐞
-                                        case "DOWN_COMMON_PRIORITY" :
-                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.priorityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.priorityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.priorityVo.name + "'></span>";
-                                            break;
-
+                                        // case "DOWN_COMMON_PRIORITY" :
+                                        //     makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.priorityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.priorityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.priorityVo.name + "'></span>";
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 以묒슂�룄
-                                        case "DOWN_COMMON_SEVERITY" :
-                                            makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.severityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.severityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.severityVo.name + "'></span>";
-                                            break;
-
+                                        // case "DOWN_COMMON_SEVERITY" :
+                                        //     makeTag += "<span class='badge' ng-style='{ \"background-color\" : \"" + scope.data.severityVo.color + "\"," + "\"border-color\"" + " : \"" + scope.data.severityVo.color + "\", \"color\": \"#FFFFFF\" }' translate='" + scope.data.severityVo.name + "'></span>";
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 �떞�떦遺��꽌
-                                        case "DOWN_ISSUE_DEPARTMENT" :
-                                            makeTag += "<ul class='ul-not-comma'>";
-                                            makeTag += "<div style='color: #000000'>";
-                                            angular.forEach(scope.data.departmentVos, function (departments) {
-                                                makeTag += "<li>" + departments.departmentName + "</li>";
-                                            });
-                                            makeTag += "</div>";
-                                            makeTag += "</ul>";
-                                            break;
-
+                                        // case "DOWN_ISSUE_DEPARTMENT" :
+                                        //     makeTag += "<ul class='ul-not-comma'>";
+                                        //     makeTag += "<div style='color: #000000'>";
+                                        //     angular.forEach(scope.data.departmentVos, function (departments) {
+                                        //         makeTag += "<li>" + departments.departmentName + "</li>";
+                                        //     });
+                                        //     makeTag += "</div>";
+                                        //     makeTag += "</ul>";
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 �벑濡앹옄
-                                        case "DOWN_REGISTER":
-                                            scope.data.registerVos = [scope.data.registerVo];
-                                            makeTag += '<div owl-profile-over class="" table-user-image="data" target="registerVos"></div>';
-                                            break;
-
+                                        // case "DOWN_REGISTER":
+                                        //     scope.data.registerVos = [scope.data.registerVo];
+                                        //     makeTag += '<div owl-profile-over class="" table-user-image="data" target="registerVos"></div>';
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 湲곌컙
-                                        case "DOWN_ISSUE_DUE_DATE" :
-                                            if (!$rootScope.isDefined(scope.data.startDate) && !$rootScope.isDefined(scope.data.completeDate)) {
-                                                makeTag += "<span translate='common.noDate'>湲곌컙 �뾾�쓬</span>";
-                                            }
-                                            else {
-                                                makeTag += "<span>" + scope.data.startDate + " ~ " + scope.data.completeDate + "</span>";
-                                            }
-                                            break;
-
+                                        // case "DOWN_ISSUE_DUE_DATE" :
+                                        //     if (!$rootScope.isDefined(scope.data.startDate) && !$rootScope.isDefined(scope.data.completeDate)) {
+                                        //         makeTag += "<span translate='common.noDate'>湲곌컙 �뾾�쓬</span>";
+                                        //     }
+                                        //     else {
+                                        //         makeTag += "<span>" + scope.data.startDate + " ~ " + scope.data.completeDate + "</span>";
+                                        //     }
+                                        //     break;
+                                        //
                                         // �븯�쐞 �씠�뒋 �궗�슜�옄 �젙�쓽 �븘�뱶
-                                        case "DOWN_ISSUE_CUSTOM_FIELD_VALUE_VIEW" :
-                                            var values = [];
-
-                                            for (var count in scope.data.issueCustomFieldValueVos) {
-                                                var issueCustomFieldValueVo = scope.data.issueCustomFieldValueVos[count];
-                                                //  �뀒�씠釉� �꽕�젙�뿉�꽌 dName 遺�遺꾩뿉 �궗�슜�옄 �젙�쓽 �븘�뱶 id 瑜� �꽔怨� �빐�떦 媛믪쓣 異붿텧�븳�떎.
-                                                if (tableConfig.columnHint.id == issueCustomFieldValueVo.customFieldVo.id) {
-                                                    values.push(issueCustomFieldValueVo.useValue);
-                                                }
-                                            }
-                                            angular.forEach(values, function (value) {
-                                                makeTag += '<span class="table-word-break-all">' + value + '<span><br>';
-                                            });
-
-                                            break;
+                                        // case "DOWN_ISSUE_CUSTOM_FIELD_VALUE_VIEW" :
+                                        //     var values = [];
+                                        //
+                                        //     for (var count in scope.data.issueCustomFieldValueVos) {
+                                        //         var issueCustomFieldValueVo = scope.data.issueCustomFieldValueVos[count];
+                                        //         //  �뀒�씠釉� �꽕�젙�뿉�꽌 dName 遺�遺꾩뿉 �궗�슜�옄 �젙�쓽 �븘�뱶 id 瑜� �꽔怨� �빐�떦 媛믪쓣 異붿텧�븳�떎.
+                                        //         if (tableConfig.columnHint.id == issueCustomFieldValueVo.customFieldVo.id) {
+                                        //             values.push(issueCustomFieldValueVo.useValue);
+                                        //         }
+                                        //     }
+                                        //     angular.forEach(values, function (value) {
+                                        //         makeTag += '<span class="table-word-break-all">' + value + '<span><br>';
+                                        //     });
+                                        //
+                                        //     break;
 
                                         //  �씠由꾩쓣 �겢由��븯硫� �닔�젙 �뙘�뾽 �몴�떆
                                         case "COMMON_MODIFY" :
diff --git a/src/main/webapp/scripts/app/issue/issue.js b/src/main/webapp/scripts/app/issue/issue.js
index d8684c8..da32644 100644
--- a/src/main/webapp/scripts/app/issue/issue.js
+++ b/src/main/webapp/scripts/app/issue/issue.js
@@ -34,7 +34,7 @@
                             var deferred = $q.defer();
                             require([
                                 'issueListTimelineController', 'issueManagerController', 'issueListController', 'issueAddController', 'issueModifyController', 'issueDetailController', 'issueAddRelationController', 'issueAddDownController', 'issueImportExcelController',
-                                'chartLoader', 'jsTable', 'jsTree', 'tableColumnGenerator', 'treeColumnGenerator', 'modalFormAutoScroll', 'summerNote', 'summerNote-ko-KR', 'fullScroll', 'workflowService', 'priorityService', 'issueSearchService', 'issueTableConfigService', 'inputRegex',
+                                'chartLoader', 'jsTable', 'jsTree', 'jsRel', 'jsDown', 'tableColumnGenerator', 'treeColumnGenerator', 'relColumnGenerator', 'downColumnGenerator', 'modalFormAutoScroll', 'summerNote', 'summerNote-ko-KR', 'fullScroll', 'workflowService', 'priorityService', 'issueSearchService', 'issueTableConfigService', 'inputRegex',
                                 'severityService', 'issueTypeService', 'issueTypeCustomFieldService', 'issueService', 'issueStatusService', 'emailTemplateService','issueUserService','issueDepartmentService','issueModifyUserController', 'issueModifyDepartmentController', 'customFieldService', 'issueSearchFieldKeyViewElement',
                                 'issueSearchCustomFieldViewElement', 'tableUserImage', 'fullScroll', 'issueCommentService', 'detectIssueEditor', 'formSubmit', 'issueModifyStatusController', 'downIssueModifyStatusController', 'jsShortCut',
                                 'issueAddTableConfigController','issueAddRelationTableConfigController','issueAddDownTableConfigController','domAppend', 'issueDetailImagePreview', 'issueSendMailPartnersController', 'issueCommonSendMailController', 'htmlDiff', 'issueVersionViewController', 'issueVersionService',
diff --git a/src/main/webapp/scripts/app/issue/issueDetail.controller.js b/src/main/webapp/scripts/app/issue/issueDetail.controller.js
index 47d6dad..865d992 100644
--- a/src/main/webapp/scripts/app/issue/issueDetail.controller.js
+++ b/src/main/webapp/scripts/app/issue/issueDetail.controller.js
@@ -8,9 +8,9 @@
         'angular'
     ],
     function (app, angular) {
-        app.controller('issueDetailController', ['$scope', '$rootScope', '$log', '$resourceProvider', '$tableProvider', '$state', '$uibModal', '$q',
+        app.controller('issueDetailController', ['$scope', '$rootScope', '$log', '$resourceProvider', '$tableProvider', '$relProvider', '$downProvider', '$state', '$uibModal', '$q',
             '$controller', '$injector', 'SweetAlert', '$timeout', 'Issue', 'IssueComment', 'IssueRelation', 'AttachedFile',  'Priority', 'Severity','IssueStatus', 'IssueTableConfig', '$filter',
-            function ($scope, $rootScope, $log, $resourceProvider, $tableProvider, $state, $uibModal, $q, $controller, $injector, SweetAlert, $timeout, Issue, IssueComment, IssueRelation, AttachedFile, Priority, Severity, IssueStatus, IssueTableConfig, $filter) {
+            function ($scope, $rootScope, $log, $resourceProvider, $tableProvider, $relProvider, $downProvider, $state, $uibModal, $q, $controller, $injector, SweetAlert, $timeout, Issue, IssueComment, IssueRelation, AttachedFile, Priority, Severity, IssueStatus, IssueTableConfig, $filter) {
 
                 //  IssueListController vm, fn 蹂��닔 �긽�냽.
 
@@ -310,90 +310,98 @@
                 }
 
                 //  �뀒�씠釉붿쓽 �뿰愿� �씠�뒋 而щ읆�쓣 留뚮뱾�뼱以��떎.
-                function setRelTableColumn(Rel_issueTableConfig) {
+                function setRelTableColumn(issueTableConfig) {
 
                     //  �뿰愿� �씠�뒋 而щ읆
-                    switch(Rel_issueTableConfig.key) {
+                    switch(issueTableConfig.key) {
                         case "RELATION_ISSUE_TYPE" :    // �뿰愿� �씠�뒋 援щ텇
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("issue.relationIssueType")
+                                .setDName("relationIssueType")
                                 .setDType("renderer")
                                 .setDAlign("text-center")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDRenderer("ISSUE_RELATION_TYPE"))
                                 /*.setHWidth("width-30 bold")*/
                                 /*.setHSort(false)*/
                             break;
                         case "RELATION_ISSUE_TITLE" :   // �뿰愿� �씠�뒋 �젣紐�
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("issue.relationIssueTitle")
+                                .setDName("title")
                                 .setDType("renderer")
                                 .setDAlign("text-center")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDRenderer("ISSUE_RELATION_MOVE"))
                                 /*.setHWidth("width-60 bold")*/
                                 /*.setHSort(true)*/
                             break;
                         case "RELATION_PRIORITY" :   // �뿰愿� �씠�뒋 �슦�꽑�닚�쐞
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("common.priority")
+                                .setDName("priorityVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("REL_COMMON_PRIORITY"));
                             break;
                         case "RELATION_SEVERITY" :   //  �뿰愿� �씠�뒋 以묒슂�룄
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("common.importance")
+                                .setDName("severityVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("REL_COMMON_SEVERITY"));
                             break;
                         case "RELATION_ASSIGNEE_TEAM" :   // �뿰愿� �씠�뒋 �떞�떦遺��꽌
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("common.assigneeTeam")
+                                .setDName("departmentVos.departmentName")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("REL_ISSUE_DEPARTMENT"));
                             break;
 
-                        case "RELATION_REGISTER" :   // �뿰愿� �씠�뒋  �벑濡앹옄
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                        case "RELATION_REGISTER" :   // �뿰愿� �씠�뒋 �벑濡앹옄
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("common.register")
+                                .setDName("registerVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("REL_REGISTER"));
                             break;
                         case "RELATION_PERIOD" : // �뿰愿� �씠�뒋 湲곌컙
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("common.period")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("REL_ISSUE_DUE_DATE"));
                             break;
-                        case "RELATION_MODIFY_DATE" : // �뿰愿� �씠�뒋  理쒓렐 蹂�寃쎌씪
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                        case "RELATION_MODIFY_DATE" : // �뿰愿� �씠�뒋 理쒓렐 蹂�寃쎌씪
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("common.lastChangeDate")
-                                .setHWidth("bold " + Rel_issueTableConfig.width)
-                                .setDAlign("text-center"));
+                                .setHWidth("bold " + issueTableConfig.width)
+                                .setDAlign("text-center")
+                                .setDName("modifyDate"));
                             break;
                     }
 
                     //  �궗�슜�옄 �젙�쓽 �븘�뱶 而щ읆
-                    if (Rel_issueTableConfig.key.indexOf("CUSTOM_FIELD_") !== -1) {
+                    if (issueTableConfig.key.indexOf("CUSTOM_FIELD_") !== -1) {
                         //  留뚯빟 �씠�뒋 �뀒�씠釉� 而щ읆紐낆씠 �몴�떆�릺吏� �븡�쑝硫� �씠履쎌씠 臾몄젣
                         for (var count in $scope.vm.customFields) {
                             var customField = $scope.vm.customFields[count];
 
-                            if (customField.id === Number(Rel_issueTableConfig.key.substring(13))) {
-                                $scope.vm.relTableConfigs.push($tableProvider.config()
+                            if (customField.id === Number(issueTableConfig.key.substring(13))) {
+                                $scope.vm.relTableConfigs.push($relProvider.config()
                                     .setHName(customField.name)
+                                    .setDName("relCustomFieldName" + [count])
                                     .setDType("renderer")
-                                    .setHWidth("bold " + Rel_issueTableConfig.width)
+                                    .setHWidth("bold " + issueTableConfig.width)
                                     .setDAlign("text-center")
                                     .setColumnHint(customField)
                                     .setDRenderer("REL_ISSUE_CUSTOM_FIELD_VALUE_VIEW"));
@@ -405,88 +413,96 @@
 
 
                 //  �뀒�씠釉붿쓽 �븯�쐞 �씠�뒋 而щ읆�쓣 留뚮뱾�뼱以��떎.
-                function setDownTableColumn(Down_issueTableConfig) {
+                function setDownTableColumn(issueTableConfig) {
                     // if (issueTableConfig == null) return;
 
                     //  �븯�쐞 �씠�뒋 而щ읆
-                    switch(Down_issueTableConfig.key) {
+                    switch(issueTableConfig.key) {
                         case "DOWN_ISSUE_TITLE" :   //  �븯�쐞 �씠�뒋 �젣紐�
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("issue.downIssueTitle")
+                                .setDName("title")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("ISSUE_DOWN_MOVE"));
                             break;
 
-                        case "ISSUE_DOWN_STATUS_TYPE" : //  �씠�뒋 �긽�깭
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                        case "ISSUE_DOWN_STATUS_TYPE" : // �븯�쐞 �씠�뒋 �긽�깭
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("issue.issueStatus")
+                                .setDName("issueStatusVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("ISSUE_DOWN_STATUS_TYPE"));
                             break;
 
                         case "DOWN_PRIORITY" :   // �븯�쐞 �씠�뒋 �슦�꽑�닚�쐞
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("common.priority")
+                                .setDName("priorityVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("DOWN_COMMON_PRIORITY"));
                             break;
-                        case "DOWN_SEVERITY" :   //  以묒슂�룄
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                        case "DOWN_SEVERITY" :   // �븯�쐞 �씠�뒋 以묒슂�룄
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("common.importance")
+                                .setDName("severityVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("DOWN_COMMON_SEVERITY"));
                             break;
-                        case "DOWN_ASSIGNEE_TEAM" :   //  �떞�떦遺��꽌
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                        case "DOWN_ASSIGNEE_TEAM" :   // �븯�쐞 �씠�뒋 �떞�떦遺��꽌
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("common.assigneeTeam")
+                                .setDName("departmentVos.departmentName")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("DOWN_ISSUE_DEPARTMENT"));
                             break;
-                        case "DOWN_REGISTER" :   //  �벑濡앹옄
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                        case "DOWN_REGISTER" :   // �븯�쐞 �씠�뒋 �벑濡앹옄
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("common.register")
+                                .setDName("registerVo.id")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("DOWN_REGISTER"));
                             break;
-                        case "DOWN_PERIOD" : //  湲곌컙
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                        case "DOWN_PERIOD" : // �븯�쐞 �씠�뒋 湲곌컙
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("common.period")
                                 .setDType("renderer")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
+                                .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
                                 .setDRenderer("DOWN_ISSUE_DUE_DATE"));
                             break;
-                        case "DOWN_MODIFY_DATE" : //  理쒓렐 蹂�寃쎌씪
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                        case "DOWN_MODIFY_DATE" : // �븯�쐞 �씠�뒋 理쒓렐 蹂�寃쎌씪
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("common.lastChangeDate")
-                                .setHWidth("bold " + Down_issueTableConfig.width)
-                                .setDAlign("text-center"));
+                                .setHWidth("bold " + issueTableConfig.width)
+                                .setDAlign("text-center")
+                                .setDName("modifyDate"));
                             break;
                     }
 
                     //  �궗�슜�옄 �젙�쓽 �븘�뱶 而щ읆
-                    if (Down_issueTableConfig.key.indexOf("CUSTOM_FIELD_") !== -1) {
+                    if (issueTableConfig.key.indexOf("CUSTOM_FIELD_") !== -1) {
                         //  留뚯빟 �씠�뒋 �뀒�씠釉� 而щ읆紐낆씠 �몴�떆�릺吏� �븡�쑝硫� �씠履쎌씠 臾몄젣
                         for (var count in $scope.vm.customFields) {
                             var customField = $scope.vm.customFields[count];
 
-                            if (customField.id === Number(Down_issueTableConfig.key.substring(13))) {
-                                $scope.vm.downTableConfigs.push($tableProvider.config()
+                            if (customField.id === Number(issueTableConfig.key.substring(13))) {
+                                $scope.vm.downTableConfigs.push($downProvider.config()
                                     .setHName(customField.name)
+                                    .setDName("downCustomFieldName" + [count])
                                     .setDType("renderer")
-                                    .setHWidth("bold " + Down_issueTableConfig.width)
+                                    .setHWidth("bold " + issueTableConfig.width)
                                     .setDAlign("text-center")
                                     .setColumnHint(customField)
                                     .setDRenderer("DOWN_ISSUE_CUSTOM_FIELD_VALUE_VIEW"));
@@ -500,18 +516,18 @@
                 //  �뿰愿� �씠�뒋 �뀒�씠釉� �꽕�젙
                 function makeRelTableConfigs() {
                     $scope.vm.relTableConfigs = [];
-                    $scope.vm.relTableConfigs.push($tableProvider.config()
+                    $scope.vm.relTableConfigs.push($relProvider.config()
                         .setDType("checkbox")
                         .setHWidth("width-20-p")
                         .setDAlign("text-center"))
-                    $scope.vm.relTableConfigs.push($tableProvider.config()
+                    $scope.vm.relTableConfigs.push($relProvider.config()
                         .setHName("issue.relationIssueType")
                         .setDType("renderer")
                         .setDAlign("text-center")
                         .setHWidth("width-60-p bold")
                         .setHSort(false)
                         .setDRenderer("ISSUE_RELATION_TYPE"))
-                    $scope.vm.relTableConfigs.push($tableProvider.config()
+                    $scope.vm.relTableConfigs.push($relProvider.config()
                         .setHName("issue.relationIssueTitle")
                         .setDType("renderer")
                         .setDAlign("text-center")
@@ -519,7 +535,7 @@
                         .setHSort(false)
                         .setDRenderer("ISSUE_RELATION_MOVE"))
                     /*if($scope.vm.viewer.modifyPermissionCheck) {
-                        $scope.vm.relTableConfigs.push($tableProvider.config()
+                        $scope.vm.relTableConfigs.push($relProvider.config()
                             .setHName("issue.relationIssueDelete")
                             .setDType("renderer")
                             .setDAlign("text-center")
@@ -528,11 +544,11 @@
                             .setHSort(false)
                             .setDAlign("text-center"))
                     }*/
-                    angular.forEach($scope.vm.relTableConfigs, function (Rel_issueTableConfig) {
+                    angular.forEach($scope.vm.relTableConfigs, function (issueTableConfig) {
                         //  �몴�떆 ���긽�씤 而щ읆留� �솕硫댁뿉 洹몃젮以��떎.
-                        if (Rel_issueTableConfig.display) {
+                        if (issueTableConfig.display) {
                             //  �뀒�씠釉붿쓽 而щ읆�쓣 留뚮뱾�뼱以��떎.
-                            $scope.fn.setRelTableColumn(Rel_issueTableConfig);
+                            $scope.fn.setRelTableColumn(issueTableConfig);
                         }
                     });
                 }
@@ -540,11 +556,11 @@
                 //  �븯�쐞 �씠�뒋 �뀒�씠釉� �꽕�젙
                 function makeDownTableConfigs() {
                     $scope.vm.downTableConfigs = [];
-                    $scope.vm.downTableConfigs.push($tableProvider.config()
+                    $scope.vm.downTableConfigs.push($downProvider.config()
                         .setDType("checkbox")
                         .setHWidth("width-20-p")
                         .setDAlign("text-center"))
-                    $scope.vm.downTableConfigs.push($tableProvider.config()
+                    $scope.vm.downTableConfigs.push($downProvider.config()
                         .setHName("issue.downIssueTitle")
                         .setDType("renderer")
                         .setDAlign("text-center")
@@ -552,7 +568,7 @@
                         .setHSort(false)
                         .setDRenderer("ISSUE_DOWN_MOVE"))
                     /*if($scope.vm.viewer.modifyPermissionCheck){
-                        $scope.vm.downTableConfigs.push($tableProvider.config()
+                        $scope.vm.downTableConfigs.push($downProvider.config()
                             .setHName("issue.relationIssueDelete")
                             .setDType("renderer")
                             .setDAlign("text-center")
@@ -562,11 +578,11 @@
                             .setDAlign("text-center"))
                     }*/
 
-                    angular.forEach($scope.vm.downTableConfigs, function (Down_issueTableConfig) {
+                    angular.forEach($scope.vm.downTableConfigs, function (issueTableConfig) {
                         //  �몴�떆 ���긽�씤 而щ읆留� �솕硫댁뿉 洹몃젮以��떎.
-                        if (Down_issueTableConfig.display) {
+                        if (issueTableConfig.display) {
                             //  �뀒�씠釉붿쓽 而щ읆�쓣 留뚮뱾�뼱以��떎.
-                            $scope.fn.setDownTableColumn(Down_issueTableConfig);
+                            $scope.fn.setDownTableColumn(issueTableConfig);
                         }
                     });
                 }
@@ -579,7 +595,7 @@
                     }
                     var issueTableConfigs = issueTableConfigVo.issueTableConfigs;
 
-                    //  �뿰愿� �뒋 紐⑸줉 �뀒�씠釉� �꽕�젙 媛믪쓣 媛��졇���꽌 �쟻�슜�븳�떎.
+                    //  �뿰愿� �씠�뒋 紐⑸줉 �뀒�씠釉� �꽕�젙 媛믪쓣 媛��졇���꽌 �쟻�슜�븳�떎.
                     if ($rootScope.isDefined(issueTableConfigs)) {
                         //  �씠�뒋 �뀒�씠釉� �꽕�젙 �젙蹂대�� ���옣 �븳�떎.
 
@@ -590,34 +606,34 @@
                         });
 
                         $scope.vm.relTableConfigs = [];
-    /*                  $scope.vm.relTableConfigs.push($tableProvider.config()
+    /*                  $scope.vm.relTableConfigs.push($relProvider.config()
                            .setHName("issue.relationIssueType")
                            .setDType("renderer")
                            .setDAlign("text-center")
                            .setHWidth("width-30-p bold")
                            .setHSort(false)
                            .setDRenderer("ISSUE_RELATION_TYPE"))
-                        $scope.vm.relTableConfigs.push($tableProvider.config()
+                        $scope.vm.relTableConfigs.push($relProvider.config()
                            .setHName("issue.relationIssueTitle")
                            .setDType("renderer")
                            .setDAlign("text-center")
                            .setHWidth("width-60-p bold")
                            .setHSort(false)
                            .setDRenderer("ISSUE_RELATION_MOVE"))*/
-                        $scope.vm.relTableConfigs.push($tableProvider.config()
+                        $scope.vm.relTableConfigs.push($relProvider.config()
                             .setDType("checkbox")
                             .setHWidth("width-20-p")
                             .setDAlign("text-center"))
-                        angular.forEach($scope.vm.issueRelTableConfigs, function (Rel_issueTableConfig) {
+                        angular.forEach($scope.vm.issueRelTableConfigs, function (issueTableConfig) {
                             //  �몴�떆 ���긽�씤 而щ읆留� �솕硫댁뿉 洹몃젮以��떎.
-                            if (Rel_issueTableConfig.display) {
+                            if (issueTableConfig.display) {
                                 //  �뀒�씠釉붿쓽 而щ읆�쓣 留뚮뱾�뼱以��떎.
-                                $scope.fn.setRelTableColumn(Rel_issueTableConfig);
+                                $scope.fn.setRelTableColumn(issueTableConfig);
 
                             }
                         });
                         /*if($scope.vm.viewer.modifyPermissionCheck) {
-                            $scope.vm.relTableConfigs.push($tableProvider.config()
+                            $scope.vm.relTableConfigs.push($relProvider.config()
                                 .setHName("issue.relationIssueDelete")
                                 .setDType("renderer")
                                 .setHWidth("width-40-p bold")
@@ -636,7 +652,7 @@
                     if (issueTableConfigVo == null) return;
                     var issueTableConfigs = issueTableConfigVo.issueTableConfigs;
 
-                    //  �뿰愿� �뒋 紐⑸줉 �뀒�씠釉� �꽕�젙 媛믪쓣 媛��졇���꽌 �쟻�슜�븳�떎.
+                    //  �뿰愿� �씠�뒋 紐⑸줉 �뀒�씠釉� �꽕�젙 媛믪쓣 媛��졇���꽌 �쟻�슜�븳�떎.
                     if ($rootScope.isDefined(issueTableConfigs)) {
                         //  �씠�뒋 �뀒�씠釉� �꽕�젙 �젙蹂대�� ���옣 �븳�떎.
                         $scope.vm.issueDownTableConfigs = [];
@@ -645,26 +661,26 @@
                             return a.position < b.position ? -1 : a.position > b.position ? 1 : 0;
                         });
                         $scope.vm.downTableConfigs = [];
-/*                      $scope.vm.downTableConfigs.push($tableProvider.config()
+/*                      $scope.vm.downTableConfigs.push($downProvider.config()
                             .setHName("issue.downIssueTitle")
                             .setDType("renderer")
                             .setDAlign("text-center")
                             .setHWidth("width-60-p bold")
                             .setHSort(false)
                             .setDRenderer("ISSUE_DOWN_MOVE"))*/
-                        $scope.vm.downTableConfigs.push($tableProvider.config()
+                        $scope.vm.downTableConfigs.push($downProvider.config()
                             .setDType("checkbox")
                             .setHWidth("width-20-p")
                             .setDAlign("text-center"))
-                        angular.forEach($scope.vm.issueDownTableConfigs, function (Down_issueTableConfig) {
+                        angular.forEach($scope.vm.issueDownTableConfigs, function (issueTableConfig) {
                             //  �몴�떆 ���긽�씤 而щ읆留� �솕硫댁뿉 洹몃젮以��떎.
-                            if (Down_issueTableConfig.display) {
+                            if (issueTableConfig.display) {
                                 //  �뀒�씠釉붿쓽 而щ읆�쓣 留뚮뱾�뼱以��떎.
-                                $scope.fn.setDownTableColumn(Down_issueTableConfig);
+                                $scope.fn.setDownTableColumn(issueTableConfig);
                             }
                         });
                         /*if($scope.vm.viewer.modifyPermissionCheck) {
-                            $scope.vm.downTableConfigs.push($tableProvider.config()
+                            $scope.vm.downTableConfigs.push($downProvider.config()
                                 .setHName("issue.relationIssueDelete")
                                 .setDType("renderer")
                                 .setHWidth("width-40-p bold")
@@ -975,6 +991,8 @@
                                 $scope.vm.viewer.startDate = result.data.data.startDate == null ? "common.unspecified" : result.data.data.startDate; // 誘몄��젙
                                 $scope.vm.viewer.completeDate = result.data.data.completeDate == null ? "common.unspecified" : result.data.data.completeDate; // 誘몄��젙
 
+                                $scope.vm.rangeDate = result.data.data.startDate + "~" + result.data.data.completeDate
+
                                 //  �씠�뒋 �쑀�삎�뿉 �뿰寃곕맂 �궗�슜�옄 �젙�쓽 �븘�뱶 �젙蹂대�� �엯�젰 �뤌�뿉�꽌 �궗�슜�븷 �닔 �엳寃� 媛�怨듯븳�떎.
                                 $scope.fn.setFormByIssueTypeCustomFields(result.data.data.issueTypeCustomFieldVos);
                                 //  �씠�뒋�뿉�꽌 �궗�슜�옄媛� �꽑�깮�븳 �궗�슜�옄 �젙�쓽 �븘�뱶 媛믪쓣 �엯�젰 �뤌�뿉 �뀑�똿�븳�떎.
diff --git a/src/main/webapp/scripts/app/issue/issueList.controller.js b/src/main/webapp/scripts/app/issue/issueList.controller.js
index 8f38e3d..5915af6 100644
--- a/src/main/webapp/scripts/app/issue/issueList.controller.js
+++ b/src/main/webapp/scripts/app/issue/issueList.controller.js
@@ -336,7 +336,7 @@
                         case "ISSUE_TITLE" :   //  �씠�뒋 �젣紐�
                             $scope.vm.tableConfigs.push($tableProvider.config()
                                 .setHName("issue.issueTitle")
-                                .setDName("issueNumber") /* todo �씠嫄� ���씠��濡� 蹂�寃쏀빐�빞�븯�뒗�뜲*/
+                                .setDName("issueTitle")
                                 .setDType("renderer")
                                 .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
@@ -373,7 +373,7 @@
                         case "ASSIGNEE_TEAM" :   //  �떞�떦遺��꽌
                             $scope.vm.tableConfigs.push($tableProvider.config()
                                 .setHName("common.assigneeTeam")
-                                .setDName("departmentName") /* todo 泥댄겕*/
+                                .setDName("departmentName")
                                 .setDType("renderer")
                                 .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
@@ -391,7 +391,6 @@
                         case "PERIOD" : //  湲곌컙
                             $scope.vm.tableConfigs.push($tableProvider.config()
                                 .setHName("common.period")
-                                .setDName("startDate")
                                 .setDType("renderer")
                                 .setHWidth("bold " + issueTableConfig.width)
                                 .setDAlign("text-center")
diff --git a/src/main/webapp/scripts/components/auth/auth.interceptor.js b/src/main/webapp/scripts/components/auth/auth.interceptor.js
index 632510c..26869c0 100644
--- a/src/main/webapp/scripts/components/auth/auth.interceptor.js
+++ b/src/main/webapp/scripts/components/auth/auth.interceptor.js
@@ -11,6 +11,16 @@
                         $tableProvider.setOrderByColumn();
                         $tableProvider.reverse = false;
 
+                        //  �뿰愿� �뀒�씠釉� 而щ읆 �젙�젹 珥덇린�솕
+                        var $relProvider = $injector.get('$relProvider');
+                        $relProvider.setOrderByColumn();
+                        $relProvider.reverse = false;
+
+                        //  �븯�쐞 �뀒�씠釉� 而щ읆 �젙�젹 珥덇린�솕
+                        var $downProvider = $injector.get('$downProvider');
+                        $downProvider.setOrderByColumn();
+                        $downProvider.reverse = false;
+
                         if (angular.isDefined(config.data)) {
                             $log.debug(config.url + " : ", config.data);
                         }
diff --git a/src/main/webapp/scripts/config.js b/src/main/webapp/scripts/config.js
index be59c2b..4eb1604 100644
--- a/src/main/webapp/scripts/config.js
+++ b/src/main/webapp/scripts/config.js
@@ -35,7 +35,7 @@
                 //  濡쒓렇 �젣�뼱
                 $logProvider.debugEnabled(true);
             })
-            .run(function ($rootScope, $state, $sce, $log, $injector, $translate, $tableProvider, Principal, Auth, Language, SweetAlert, $filter, Workspace, $resourceProvider, User, constants, Project) {
+            .run(function ($rootScope, $state, $sce, $log, $injector, $translate, $tableProvider, $relProvider, $downProvider, Principal, Auth, Language, SweetAlert, $filter, Workspace, $resourceProvider, User, constants, Project) {
 
                 $rootScope.$state = $state;
                 //  html �깭洹� �쎒 蹂댁븞 �쟻�슜�븯�뿬 諛붿씤�뵫.
@@ -117,6 +117,12 @@
 
                 //  �뀒�씠釉� �꽕�젙 諛� 湲곕뒫�쓣 愿�由ы븯�뒗 �꽌鍮꾩뒪
                 $rootScope.$tableProvider = $tableProvider;
+
+                //  �뿰愿��뀒�씠釉� �꽕�젙 諛� 湲곕뒫 愿�由ы븯�뒗 �꽌鍮꾩뒪
+                $rootScope.$relProvider = $relProvider;
+
+                //  �븯�쐞�뀒�씠釉� �꽕�젙 諛� 湲곕뒫 愿�由ы븯�뒗 �꽌鍮꾩뒪
+                $rootScope.$downProvider = $downProvider;
 
                 //  html tag convert - �떊猶고븷 �닔 �엳�뒗 �엯�젰 媛믪씪 �븣留� �궗�슜, �궗�슜�옄媛� �벑濡앺븯�뒗 媛믪뿉�뒗 �궗�슜 湲덉�
                 $rootScope.trustAsHtml = function (string) {
@@ -568,6 +574,9 @@
                     //  table orderBy column init setting
                     $tableProvider.setOrderByColumn();
                     $tableProvider.reverse = false;
+
+                    $relProvider.setOrderByColumn();
+                    $relProvider.reverse = false;
                     //  �씠�뒋 紐⑸줉->�긽�꽭�솕硫댁뿉�꽌 留덉�留됱쑝濡� �젒洹쇳븳 �씠�뒋 �븘�씠�뵒 - �씪�슦�듃 �깉�븣留덈떎 珥덇린�솕
                     $rootScope.currentDetailIssueId = null;
                     // �궗�슜�옄 �젙蹂대�� 媛��졇�삩�떎.
diff --git a/src/main/webapp/scripts/main.js b/src/main/webapp/scripts/main.js
index cd292ba..7e5677d 100644
--- a/src/main/webapp/scripts/main.js
+++ b/src/main/webapp/scripts/main.js
@@ -56,13 +56,19 @@
         'commonController' : 'app/common/common.controller', //  怨듯넻 而⑦듃濡ㅻ윭
         'tableProvider' : '../custom_components/js-table/table.provider', //  �뀒�씠釉� �냽�꽦 媛믪쓣 愿�由ы븳�떎.
         'treeProvider' : '../custom_components/js-tree/tree.provider', //   �듃由� �냽�꽦 媛믪쓣 愿�由ы븳�떎.
+        'relProvider' : '../custom_components/js-rel/rel.provider', //   �뿰愿� �뀒�씠釉� �냽�꽦 媛믪쓣 愿�由ы븳�떎.
+        'downProvider' : '../custom_components/js-down/down.provider', //   �븯�쐞 �뀒�씠釉� �냽�꽦 媛믪쓣 愿�由ы븳�떎.
         'resourceProvider' : 'components/utils/resource.provider',   //  怨듯넻�쟻�쑝濡� �꽌踰� json �쟾�넚�뿉 �궗�슜
         'lodash' : '../bower_components/lodash/lodash.min', //  硫��떚 ���젆�듃, auto complete 而댄룷�꼳�듃�뱾�뿉�꽌 �궗�슜
         'angularDropMultiSelect' : '../custom_components/angular-multi-select/angularjs-dropdown-multiselect',  //  硫��떚 ���젆�듃 而댄룷�꼳�듃
         'jsTable' : '../custom_components/js-table/js-table.directive',   //  紐⑸줉 �솕硫댁뿉�꽌 �궗�슜�릺�뒗 �뀒�씠釉붿쓣 �샇異쒗븳�떎.
         'jsTree' : '../custom_components/js-tree/js-tree.directive',   //  紐⑸줉 �솕硫댁뿉�꽌 �궗�슜�릺�뒗 �뀒�씠釉�(�듃由ш뎄議�)�쓣 �샇異쒗븳�떎.
+        'jsRel' : '../custom_components/js-rel/js-rel.directive',   //  �씠�뒋�긽�꽭 �솕硫댁뿉�꽌 �궗�슜�릺�뒗 �뿰愿� �뀒�씠釉붿쓣 �샇異쒗븳�떎.
+        'jsDown' : '../custom_components/js-down/js-down.directive',   //  �씠�뒋�긽�꽭 �솕硫댁뿉�꽌 �궗�슜�릺�뒗 �븯�쐞 �뀒�씠釉붿쓣 �샇異쒗븳�떎.
         'tableColumnGenerator' : '../custom_components/js-table/tableColumnGenerator.directive', //  �뀒�씠釉� �옖�뜑�윭瑜� �떞�떦�븳�떎.
-        'treeColumnGenerator' : '../custom_components/js-tree/treeColumnGenerator.directive', //  �뀒�씠釉� �옖�뜑�윭瑜� �떞�떦�븳�떎.
+        'treeColumnGenerator' : '../custom_components/js-tree/treeColumnGenerator.directive', //  �씠�뒋由ъ뒪�듃 �듃由� �옖�뜑�윭瑜� �떞�떦�븳�떎.
+        'relColumnGenerator' : '../custom_components/js-rel/relColumnGenerator.directive', //  �씠�뒋�긽�꽭 �뿰愿� �옖�뜑�윭瑜� �떞�떦�븳�떎.
+        'downColumnGenerator' : '../custom_components/js-down/downColumnGenerator.directive', //  �씠�뒋�긽�꽭 �븯�쐞 �옖�뜑�윭瑜� �떞�떦�븳�떎.
         'jsAutoCompleteMulti' : '../custom_components/js-autocomplete-multi/js-autocomplete-multi', //  �떎以� �꽑�깮�씠 媛��뒫�븳 autoComplete 而댄룷�꼳�듃
         'jsInputAutoComplete' : '../custom_components/js-input-autocomplete/js-input-autocomplete',   //  input 諛뺤뒪�뿉 autoComplete 湲곕뒫�씠 遺숈� 而댄룷�꼳�듃
         'jsAutoCompleteSingle' : '../custom_components/js-autocomplete-single/js-autocomplete-single',   //  input 諛뺤뒪�뿉 �븳媛쒖쓽 ���긽留� �꽑�깮 媛��뒫�븷�닔 �엳�뒗 autoComplete 湲곕뒫�씠 遺숈� 而댄룷�꼳�듃
@@ -410,10 +416,22 @@
         'jsTree' : {
             deps : ['app']
         },
+        'jsRel' : {
+            deps : ['app']
+        },
+        'jsDown' : {
+            deps : ['app']
+        },
         'tableColumnGenerator' : {
             deps : ['app']
         },
         'treeColumnGenerator' : {
+            deps : ['app']
+        },
+        'relColumnGenerator' : {
+            deps : ['app']
+        },
+        'downColumnGenerator' : {
             deps : ['app']
         },
         'ngStomp' : {
@@ -536,6 +554,8 @@
     'resourceProvider',
     'tableProvider',
     'treeProvider',
+    'relProvider',
+    'downProvider',
     'permissionService',
     'authService',
     'userInviteService',
diff --git a/src/main/webapp/views/issue/issueDetail.html b/src/main/webapp/views/issue/issueDetail.html
index 7e051a3..6496cad 100644
--- a/src/main/webapp/views/issue/issueDetail.html
+++ b/src/main/webapp/views/issue/issueDetail.html
@@ -509,8 +509,8 @@
 
                 <!--  �뿰愿� �씠�뒋 �뀒�씠釉� -->
                 <div class="mt-10 issue-detail-word-break width-100">
-                    <js-table data="vm.viewer.issueRelationVos" table-configs="vm.relTableConfigs"
-                              event="relTableEvent" detail-view="true" hide-header="false" use-sort="true"></js-table>
+                    <js-rel data="vm.viewer.issueRelationVos" table-configs="vm.relTableConfigs"
+                              event="relTableEvent" detail-view="true" hide-header="false" use-sort="true"></js-rel>
 
                     <div class="row" ng-if="vm.viewer.modifyPermissionCheck">
                         <div class="col-sm-4">
@@ -579,8 +579,8 @@
 
                 <!-- �븯�쐞 �씠�뒋 �뀒�씠釉� -->
                 <div class="mt-10 issue-detail-word-break width-100">
-                    <js-table data="vm.viewer.issueDownVos" table-configs="vm.downTableConfigs"
-                              event="downTableEvent" detail-view="true" hide-header="false" use-sort="true"></js-table>
+                    <js-down data="vm.viewer.issueDownVos" table-configs="vm.downTableConfigs"
+                              event="downTableEvent" detail-view="true" hide-header="false" use-sort="true"></js-down>
 
                     <div class="row" ng-if="vm.viewer.modifyPermissionCheck">
                         <div class="col-sm-6">

--
Gitblit v1.8.0