fix bugs change theme model

Reviewed-on: #75

assets/scss/common.scss

@@ -1,17 +1,5 @@
 // router-tab (header)
-@import "./var.scss";
 @import "./mixin.scss";
-@import "./common/fonts.scss";
-@import "./common/text.scss";
-@import "./common/input.scss";
-@import "./common/button.scss";
-@import "./common/grid.scss";
-@import "./common/card.scss";
-@import "./common/tabs.scss";
-@import "./common/numericInput.scss";
-@import "./common/pagination.scss";
-@import "./common/editor.scss";
-
 
 html,
 body {
@@ -231,6 +219,40 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
+    .ant-checkbox-wrapper.ant-checkbox-wraBapper-disabled,
+    .ant-checkbox-disabled .ant-checkbox-input
+    {
+      cursor: default !important;
+    }
+
+    .ant-checkbox-disabled .ant-checkbox-inner
+    {
+      background-color: #f5f5f5 !important;
+    }
+
+    .v-list-item__title {
+      font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
+    }
+
+    .btn-close-menu-list {
+      min-width: 100px;
+      border-color: transparent;
+      background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
+  
+      .v-list-item {
+        min-height: 30px;
+      }
+  
+      .v-list-item__title {
+        color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
+  
+        &:hover {
+          color: #46c0ff !important;
+          cursor: pointer;
+        }
+      }
+    }
+
     .icon-datepicker-color {
       color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
     }
@@ -253,16 +275,12 @@ a {
       color: map-deep-get($config, #{$theme}, "v-select-label-color");
     }
 
-    // .header {
-    //   background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-    //   border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
-    // }
-
     .custom-chart{
       border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
     }
 
     .v-icon {
+      color: currentColor;
       &.icon-orange {
         svg {
           fill:map-deep-get($config,
@@ -304,74 +322,6 @@ a {
       }
     }
 
-    .router-tab {
-      .router-tab__header {
-        background-color: map-deep-get($config, #{$theme}, "router-header");
-        border-color: map-deep-get($config, #{$theme}, "router-header");
-        height: 46px;
-        z-index: 7;
-        max-width: calc(100vw - 290px);
-      }
-
-      .router-tab__container {
-        background-color: map-deep-get($config, #{$theme}, "router-container");
-      }
-
-      .router-tab__item {
-        background-color: map-deep-get($config, #{$theme}, "router-tab-item");
-        border-color: map-deep-get($config, #{$theme}, "router-tab-item");
-        color: map-deep-get($config, #{$theme}, "router-tab-item-color");
-
-        &:not(.is-active) {
-          &:hover {
-            &>span {
-              color: map-deep-get($config,
-                #{$theme},
-                "router-tab-item-hover-color"
-              );
-            }
-          }
-        }
-
-        .v-icon {
-          color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
-        }
-
-        &.is-active {
-          background-color: map-deep-get($config,
-            #{$theme},
-            "router-tab-item-active"
-          );
-          border-color: map-deep-get($config,
-            #{$theme},
-            "router-tab-item-active-color"
-          ) !important;
-          color: map-deep-get($config,
-            #{$theme},
-            "router-tab-item-active-color"
-          );
-
-          .v-icon {
-            color: map-deep-get($config,
-              #{$theme},
-              "router-tab-item-icon-active-color"
-            );
-          }
-
-        }
-      }
-
-      .router-tab__slot-end {
-        .v-btn {
-          background-color: map-deep-get($config,
-            #{$theme},
-            "router-tab-slot-end-button-backgroundColor"
-          );
-          box-shadow: none;
-        }
-      }
-    }
-
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }
@@ -764,7 +714,7 @@ a {
 	
 				.v-list-item__title {
 					color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
-				}
+        }
 			}
 	
 			&.v-select-list{
@@ -812,6 +762,7 @@ a {
       font-size: 2rem;
       font-weight: bold;
       padding-left: 8px;
+      margin-top: 2px;
 
       img {
         width: 139px;
@@ -828,20 +779,11 @@ a {
   .btn-close-menu-list {
     min-width: 100px;
     border-color: transparent;
-    background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
 
     .v-list-item {
       min-height: 30px;
     }
 
-    .v-list-item__title {
-      color: map-deep-get($config, #{$theme}, "btn-header-select-color");
-
-      &:hover {
-        color: #46c0ff;
-      }
-    }
-
     .v-btn {
       background-color: transparent !important;
       color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;

assets/scss/common/grid.scss

@@ -21,11 +21,20 @@
     display: none;
   }
 
+  &-no-scroll-y {
+    .tui-grid-rside-area {
+      .tui-grid-header-area,
+      .tui-grid-summary-area {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
   &-rside-area {
 
     .tui-grid-header-area,
     .tui-grid-summary-area {
-      margin-right: $scrollbar-width;
+      margin-right: $scrollbar-width !important;
     }
   }
 
@@ -56,25 +65,83 @@
     font-weight: 400;
   }
 
-  
+
   th[data-column-name="_checked"] {
     padding-left: 0;
   }
 
 
+
 }
 
-.tui-grid-table{
+.tui-grid-table {
+
   .tui-grid-cell-header,
   .tui-grid-cell-has-input .tui-grid-cell-content {
     padding: 8px;
   }
 
   th[data-column-name="_checked"] {
-    &.tui-grid-cell-header  {
+    &.tui-grid-cell-header {
       padding-left: 0;
     }
-    
+
+  }
+
+  .tui-grid-cell {
+    input[type=checkbox] {
+      margin-top: 8px;
+      appearance: none;
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      border: 1px solid;
+      border-radius: 2px;
+      cursor: pointer;
+      position: relative;
+
+      &:checked {
+        &::after {
+          content: "";
+          position: absolute;
+          left: 5px;
+          top: 1px;
+          width: 5px;
+          height: 9px;
+          border: solid;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+}
+
+.tui-grid-layer-editing {
+  input[type=checkbox] {
+    margin-top: 8px;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+
+    &:checked {
+      &::after {
+        content: "";
+        position: absolute;
+        left: 5px;
+        top: 1px;
+        width: 5px;
+        height: 9px;
+        border: solid;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+    }
   }
 }
 
@@ -99,8 +166,46 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
-    .tui-grid-content-area{
+    .enrg-effc {
-      .tui-grid-header-area{
+      .tui-grid-rside-area {
+        .tui-grid-table {
+          tr {
+
+            td:nth-child(4),
+            td:nth-child(10) {
+              .tui-grid-cell-content {
+                color: map-deep-get($config,
+                  #{$theme},
+                  "router-tab-item-active-color"
+                );
+              }
+            }
+          }
+
+          .tui-grid {
+
+            &-row-odd,
+            &-row-even {
+              &:hover {
+
+                >td:nth-child(4),
+                td:nth-child(10) {
+                  .tui-grid-cell-content {
+                    color: map-deep-get($config,
+                      #{$theme},
+                      "router-tab-item-active-color"
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .tui-grid-content-area {
+      .tui-grid-header-area {
         height: auto !important;
       }
     }
@@ -115,9 +220,9 @@
         "tui-grid-title-color"
       );
     }
-    
+
-    .grid-toggle-section{
+    .grid-toggle-section {
-      .tui-grid-rside-area{
+      .tui-grid-rside-area {
         .tui-grid-body-area {
           height: auto !important;
 
@@ -142,19 +247,49 @@
             #{$theme},
             "tui-grid-cell-borderStyle-darkmode"
           );
+
+          input[type=checkbox] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "ant-checkbox-border"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "ant-checkbox-bg"
+            );
+
+            &:checked {
+              background-color: map-deep-get($config,
+                #{$theme},
+                "ant-btn-primary-bg"
+              );
+              border-color: map-deep-get($config,
+                #{$theme},
+                "ant-btn-primary-bg"
+              );
+
+              &::after {
+                border-color: map-deep-get($config,
+                  #{$theme},
+                  "ant-checkbox-bg"
+                );
+              }
+            }
+          }
         }
       }
 
-      &-border-line-right{
+      &-border-line-right {
         opacity: 0;
       }
 
-      &-body-container{
+      &-body-container {
         border-right: 0;
         // position: relative;
         width: auto !important;
 
-        .tui-grid-table-container{
+        .tui-grid-table-container {
+
           // width: 100% !important;
           .tui-grid-table {
             // width: 100% !important;
@@ -166,12 +301,19 @@
             // }
           }
         }
+
+        .tui-grid-layer-editing {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-border-vertical-color"
+          );
+        }
       }
 
       &-summary-area,
       &-container {
         font-family: Inter;
- 
+
         .tui-grid-cell {
           &.tui-grid-cell-summary {
             color: map-deep-get($config,
@@ -285,7 +427,8 @@
               #{$theme},
               "ant-btn-primary-color"
             );
-            .radio-mark{
+
+            .radio-mark {
               border-color: map-deep-get($config,
                 #{$theme},
                 "arow-line-color"
@@ -294,6 +437,7 @@
                 #{$theme},
                 "arow-line-btn-bg-color"
               );
+
               &::after {
                 content: "";
                 position: absolute;
@@ -311,12 +455,49 @@
             }
           }
         }
+
+        .tui-grid-cell-content {
+
+          input[type='text'],
+          input[type='password'] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "v-input-backgroundColor"
+            );
+            border-radius: 4px;
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+          }
+
+          &.tui-grid-layer-editing {
+            background: transparent;
+            // background:map-deep-get($config,
+            //   #{$theme},
+            //   "tui-grid-cell-insert-color"
+            // );
+          }
+
+          span {
+            &.custom-link {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-active-color"
+              );
+            }
+          }
+        }
       }
 
       &-cell {
         &:last-child {
           padding-right: 1px;
-          border-right: 1px solid ;
+          border-right: 1px solid;
           border-right-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-borderColor"
@@ -349,7 +530,7 @@
           "tui-grid-border-vertical-color"
         );
         color: map-deep-get($config,
-        #{$theme},
+          #{$theme},
           "tui-grid-header-color"
         );
 
@@ -358,7 +539,7 @@
       &-header-area {
         // background-color: none;
         border: none;
-        margin-right: 0 !important;
+        // margin-right: 0 !important;
         background-color: map-deep-get($config,
           #{$theme},
           "tui-grid-cell-backgroundColor"
@@ -395,14 +576,14 @@
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-insert-color"
-          );
+          ) !important;
         }
 
         &.row-modify {
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-modify-color"
-          );
+          ) !important;
         }
 
         &.row-removed {
@@ -497,6 +678,7 @@
 
       &-tree-button-expand {
         z-index: 9999;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;
@@ -516,6 +698,7 @@
 
       &-tree-button-collapse {
         z-index: 9999;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;
@@ -543,6 +726,37 @@
       &-frozen-border {
         background-color: transparent;
       }
+
+      &-layer-editing {
+        input[type=checkbox] {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "ant-checkbox-border"
+          );
+          background: map-deep-get($config,
+            #{$theme},
+            "ant-checkbox-bg"
+          );
+
+          &:checked {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            );
+            border-color: map-deep-get($config,
+              #{$theme},
+              "ant-btn-primary-bg"
+            );
+
+            &::after {
+              border-color: map-deep-get($config,
+                #{$theme},
+                "ant-checkbox-bg"
+              );
+            }
+          }
+        }
+      }
     }
 
     [class*="tui-grid-tree-wrapper"] {

assets/scss/common/pagination.scss

@@ -2,6 +2,13 @@
 
   // @include theme($theme);
   .v-application.#{$theme}-mode {
+    .pagination-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0;
+      margin-top: 10px;
+    }
 
     .ant-pagination-item,
     .ant-pagination-prev,

assets/scss/layout.scss

@@ -79,6 +79,8 @@
             &>.v-treeview-node__root:before {
               border-radius: 6px;
               z-index: -1;
+              background-color: rgba(0, 0, 0, 0);
+              transition-duration: 0s;
             }
     
             &>.v-treeview-node__root:hover:before {
@@ -180,6 +182,7 @@
       height: calc(100vh - 110px);
       max-height: calc(100vh - 115px);
       padding: 20px;
+      background-color: transparent !important;
     }
 
     .router-tab__slot-end {
@@ -379,21 +382,21 @@
               .v-treeview-node__children {
                 .v-treeview-node {
                   >.v-treeview-node__root {
-                    .v-treeview-node__content {
+                    
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "card-default-color");
-                      }
-                    }
-  
                     *:hover,
                     :hover {
                       border-width: 0;
                     }
   
                     &:hover {
-                      border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
-                      border-radius: 8px;
                       background-color: rgba(0, 0, 0, 0);
+                      
+                      &:before {
+                        opacity: 1 !important;
+                        border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+                        border-radius: 8px;
+                      }
+
                       .v-treeview-node__content {
                         .v-treeview-node__label {
                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
@@ -418,6 +421,12 @@
                       }
                     }
   
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "card-default-color");
+                      }
+                    }
+
                   }
                 }
   
@@ -428,6 +437,70 @@
         }
       }
 
+      .router-tab {
+        .router-tab__header {
+          background-color: map-deep-get($config, #{$theme}, "router-header");
+          border-color: map-deep-get($config, #{$theme}, "router-header");
+          height: 46px;
+          z-index: 7;
+          max-width: calc(100vw - 290px);
+        }
+  
+        .router-tab__item {
+          background-color: map-deep-get($config, #{$theme}, "router-tab-item");
+          border-color: map-deep-get($config, #{$theme}, "router-tab-item");
+          color: map-deep-get($config, #{$theme}, "router-tab-item-color");
+  
+          &:not(.is-active) {
+            &:hover {
+              &>span {
+                color: map-deep-get($config,
+                  #{$theme},
+                  "router-tab-item-hover-color"
+                );
+              }
+            }
+          }
+  
+          .v-icon {
+            color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
+          }
+  
+          &.is-active {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active"
+            );
+            border-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active-color"
+            ) !important;
+            color: map-deep-get($config,
+              #{$theme},
+              "router-tab-item-active-color"
+            );
+  
+            .v-icon {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-icon-active-color"
+              );
+            }
+  
+          }
+        }
+  
+        .router-tab__slot-end {
+          .v-btn {
+            background-color: map-deep-get($config,
+              #{$theme},
+              "router-tab-slot-end-button-backgroundColor"
+            );
+            box-shadow: none;
+          }
+        }
+      }
+
     }
   }
 }

assets/scss/theme.scss

@@ -1,10 +1,3 @@
-// @import './var.scss';
-// @import './functions.scss';
-// @import './mixin.scss';
-
-
-
-
 // @each $theme in dark, light{
 //   @include theme($theme);
 //   .v-application.#{$theme}-mode{

assets/scss/var.scss

@@ -113,7 +113,7 @@ $config: (
     tui-grid-cell-color: #FFFFFFD9,
     tui-grid-cell-insert-color: #2B2111,
     tui-grid-cell-selected-color: #0A224F,
-    tui-grid-cell-modify-color: #13636c,
+    tui-grid-cell-modify-color: #2B2111,
     tui-grid-cell-removed-color: #2A1215,
     tui-grid-cell-disabled-color: rgb(170, 170, 170),
     tui-grid-cell-hover-backgroundColor: #2d4571,
@@ -263,7 +263,7 @@ $config: (
     tui-grid-cell-color: #000000E0,
     tui-grid-cell-insert-color: #FFFBE6,
     tui-grid-cell-selected-color: #E6F4FF,
-    tui-grid-cell-modify-color: #e6f5f7,
+    tui-grid-cell-modify-color: #FFFBE6,
     tui-grid-cell-removed-color: #FFF1F0,
     tui-grid-cell-hover-backgroundColor: #f5f5f5,
     v-tabs-items-border-color: #0000000F,

components/common/AdminMenu.vue

@@ -112,7 +112,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.mdi-account {

components/common/Calendar.vue

@@ -180,8 +180,6 @@ const myDetail = [];
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
-@import '@/assets/scss/mixin.scss';
 
 ::-webkit-scrollbar {
 	width: 0px;

components/common/Datepicker.vue

@@ -431,8 +431,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-// @import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerTimeSelectBox.vue

@@ -539,7 +539,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
 
 ::v-deep {
   .tui-timepicker-row {

components/common/DatepickerTopView.vue

@@ -405,8 +405,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/DatepickerWidget.vue

@@ -355,8 +355,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/Grid.vue

@@ -160,7 +160,6 @@ export default {
 	},
 	created() { },
 	async mounted() {
-		// console.log(this.dataPath);
 		if (this.gridName) {
 			this.gridInstance = this.$refs['tuigrid' + this.gridName];
 
@@ -174,6 +173,10 @@ export default {
 				this.gridScrollTop = e.target.scrollTop;
 				this.gridScrollLeft = e.target.scrollLeft;
 			});
+
+			if (!(this.scrollBody.scrollHeight > this.scrollBody.clientHeight)) {
+				this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
+			}
 		}
 	},
 	methods: {
@@ -268,12 +271,9 @@ export default {
 			});
 		},
 		focusChangeEvt(e) {
-			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
-				// console.log('prevent focusChangeEvt')
 				return;
 			}
-			// console.log('focusChangeEvt2...')
 			// cell 선택시 row 선택 method
 			if (e.rowKey > -1) {
 				this.$emit(
@@ -288,7 +288,6 @@ export default {
 			this.sendSelectedRowData(e.rowKey);
 		},
 		startEditing(e) {
-			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
 				return;
 			}
@@ -298,10 +297,9 @@ export default {
 				return;
 			}
 
-			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
-				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
+				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
 				this.$emit(
 					'getRowsData',
 					this.gridInstance.invoke('getRow', e.rowKey),
@@ -312,7 +310,6 @@ export default {
 			}
 		},
 		async editingFinish(e) {
-			// console.log("Editing END E::", e);
 			// editor 간 이동시 수정되는 문제 수정
 			// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
 			if (this.editorGrid) {
@@ -335,7 +332,6 @@ export default {
 				rowKey: rowIdxKey,
 			};
 			const isBaseRow = this.isBaseDataRow(rowIdxKey);
-			// console.log("END E::", rowIdxKey, e);
 			const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
 			if (rowStat == 'D') {
 				this.gridInstance.invoke(
@@ -516,10 +512,7 @@ export default {
 				return item.rowKey == data.rowKey;
 			});
 			let count = 0;
-			// console.log("dataKeyArr", dataKeyArr);
-			// console.log("selectedRowData", selectedRowData);
 			for (let i = 0; i < dataKeyArr.length; i++) {
-				// console.log(dataKeyArr[i], selectedRowData[dataKeyArr[i]], rowData[dataKeyArr[i]]);
 				if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
 					count++;
 				}
@@ -589,7 +582,6 @@ export default {
 					delete item.rowKey;
 					return item;
 				});
-			// console.log("dataArr::", dataArr, saveTargetRows);
 			return dataArr;
 		},
 		getData() {
@@ -602,7 +594,6 @@ export default {
 			return this.gridInstance.invoke('getCheckedRowKeys');
 		},
 		setCheck(list) {
-			// console.log("setCheck:: ", list);
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
@@ -612,14 +603,11 @@ export default {
 			// this.gridInstance.invoke('refreshLayout');
 		},
 		refreshGrid() {
-			// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
 			var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
 			var containerEl = this.$refs['tuigrid' + this.gridName].$el;
 			// var containerEl = document.querySelector('.tui-grid-container')
 			var parentEl = containerEl.parentElement;
 
-			// console.log("---------DEBUG---containerEl: ",containerEl);
-			// console.log('---------DEBUG---parentEl: ', parentEl)
 			// 	function refreshLayout(store, containerEl, parentEl) {
 			var dimension = store.dimension;
 			var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@@ -632,11 +620,6 @@ export default {
 			this.setWidth(store, clientWidth, autoWidth);
 			// store.dimension.autoWidth = autoWidth;
 			// store.dimension.width = clientWidth;
-			// console.log("###",getComputedStyle(parentEl));
-			// console.log("fitToParentHeight : ",fitToParentHeight);
-			// console.log("parentEl : ",parentEl)
-			// console.log("parentEl.clientHeight" , parentEl.clientHeight)
-			// console.log("clientHeight : ",clientHeight);
 			if (parentEl && parentEl.clientHeight !== clientHeight) {
 				var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
 				this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
@@ -644,25 +627,20 @@ export default {
 			// }
 		},
 		setOffsetTop(store, offsetTop) {
-			// console.log("---------DEBUG---setOffsetTop: ");
 			store.dimension.offsetTop = offsetTop;
 		},
 		setWidth(_a, width, autoWidth) {
-			// console.log("---------DEBUG---setWidth: ");
 			var dimension = _a.dimension;
 			dimension.autoWidth = autoWidth;
 			dimension.width = width;
 		},
 		setHeaderHeight(store, height) {
-			// console.log("---------DEBUG---setHeaderHeight: ");
 			store.dimension.headerHeight = height;
 		},
 		setOffsetLeft(store, offsetLeft) {
-			// console.log("---------DEBUG---setOffsetLeft: ");
 			store.dimension.offsetLeft = offsetLeft;
 		},
 		setHeight(_a, height) {
-			// console.log("---------DEBUG---setHeight: ");
 			var dimension = _a.dimension;
 			var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
 			dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
@@ -691,7 +669,6 @@ export default {
 			});
 		},
 		// resetData() {
-		//   // console.log("resetData = ", this.tuigridProps.data);
 		//   this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
 		// },
 	},

components/common/PastRsltDatePicker.vue

@@ -317,8 +317,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
-
 ::v-deep {
 	.tui-timepicker-row {
 		display: flex;

components/common/ThemeSwitch.vue

@@ -13,6 +13,7 @@ export default {
 	data() {
 		return {
 			mode: null,
+			// isLoading: false
 		};
 	},
 	computed: {
@@ -28,11 +29,10 @@ export default {
 			setThemeChange: 'setThemeChange',
 		}),
 		themeChange() {
+			// this.isLoading = true;
 			this.mode = !this.mode;
 			this.$vuetify.theme.isDark = this.mode;
 			this.setThemeChange(this.mode);
-			// console.log(this.mode)
-			// console.log(this.$vuetify.theme.isDark)
 		},
 	},
 };

components/common/modal/ElecPowChrgPop.vue

@@ -683,7 +683,6 @@ const myColumns = [
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.tui-grid {

components/common/modal/EnrgEffcEqpmDetailPop.vue

@@ -408,7 +408,6 @@ var eqpmDetlPop = {
 // 전력량 요금(원/kWh)
 </script>
 <style lang="scss" scoped>
-// @import '@/assets/scss/common/grid.scss';
 .tui-grid-scrollbar-left-bottom {
 	display: none !important;
 }

components/common/modal/EnrgEffcGdIdxDetPop.vue

@@ -329,7 +329,6 @@ var gdIdxDetPop = {
 // 전력량 요금(원/kWh)
 </script>
 <style lang="scss" scoped>
-// @import '@/assets/scss/common/grid.scss';
 .tui-grid-scrollbar-left-bottom {
   display: none !important;
 }

components/common/modal/EqpmSelectPop.vue

@@ -94,7 +94,7 @@
 				</div>
 
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
-					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
+					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="ant-btn-popup-default mr-2">닫기</a-button>
 					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
 				</v-card-actions>
 			</v-card>

components/common/modal/EvtObjPop.vue

@@ -8,12 +8,22 @@
 			</label>
 		</v-col>
 		<v-col :cols="option.textCols" class="py-0">
-			<v-text-field readonly append-icon="" :class="['v-select__custom', customClass]" outlined :hide-details="true"
+			<v-text-field
-				v-model="selectValue" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)" style="padding: 0;"
+				readonly
-				:required="item.required || false"><template v-slot:append>
+				v-model="selectValue"
-					<!-- Custom SVG icon -->
+				append-icon="mdi-magnify"
-					<v-icon>$icoSearch</v-icon>
+				class="v-input__custom"
-				</template></v-text-field>
+				@click="dialogOpenCloseEvent(dialog)"
+				outlined
+				:hide-details="true"
+				:required="item.required || false"
+				:disabled="item.disabled || false"
+			>
+			<template v-slot:append>
+				<!-- Custom SVG icon -->
+				<v-icon>$icoSearch</v-icon>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<v-dialog v-model="dialog" scrollable width="1000px">

components/common/modal/PlanPop.vue

@@ -238,7 +238,13 @@ export default {
 			type: Object,
 			require: false,
 			default: () => {
-				return {};
+				return {
+					selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList1: [], // selectBoxTime에 필요한 prop
+					selectTimeValue2: "01 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList2: [], // selectBoxTime에 필요한 prop
+					minInterval: 10,
+				};
 			},
 		},
 	},
@@ -536,8 +542,8 @@ export default {
 			let returnData = res[0];
 			this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
 			this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
-			this.selectTimeValue1 = returnData.strtHh+' : '+  returnData.strtMm;
+			this.selectTimeValue1 = returnData.strtHh + ' : ' + returnData.strtMm;
-			this.selectTimeValue2 = returnData.endHh+' : '+  returnData.endMm;
+			this.selectTimeValue2 = returnData.endHh + ' : ' + returnData.endMm;
 			this.planTitle = returnData.planTitle;
 			this.planCntn = returnData.planCntn;
 			this.planColor = returnData.planColor;

components/common/select/SelectBoxTime.vue

@@ -20,7 +20,7 @@
         item-value="value"
         solo
         outlined
-        :menu-props="{ auto: true, offsetY: true }"
+        :menu-props="{ top: false, offsetY: true }"
         :hide-details="true"
         :class="['v-select__custom', customClass]"
         :disabled="disabled"

components/icons/icoSend.vue

@@ -1,5 +1,5 @@
 <template>
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="white"/>
+  <path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="currentColor"/>
 </svg>
 </template>

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

@@ -39,8 +39,6 @@
 import { mapState, mapMutations, mapActions } from 'vuex';
 import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
-import { CustomCheckbox } from '~/plugins/gridUtility';
-import { CustomNumberEditor } from '~/plugins/gridUtility';
 import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
 import Utility from '~/plugins/utility';
@@ -70,18 +68,6 @@ export default {
       loadGrid: false,
       gridName: 'rowDataSetTagRelGrid',
       detailDataSetTagList: myDataSetTagDetail,
-      dataPathMock: {
-        "rowDataSetTagRelGrid": {
-          column: [
-            { header: 'TAG ID', name: 'id', headerAlign: 'left' },
-            { header: 'TAG 명', name: 'name', headerAlign: 'left' },
-            { header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {}
-        }
-      },
     };
   },
   computed: {
@@ -175,7 +161,7 @@ export default {
           header: '사용여부',
           name: 'useFg',
           align: 'left',
-          width: 100,
+          minWidth: 80,
           formatter({ value }) {
             value = value === true ? '1' : '0';
             const newValue = _this.pageData.useFgList.filter(
@@ -190,7 +176,7 @@ export default {
           //   }
           // }
         },
-        { header: '비고', name: 'rmrk', align: 'left' },
+        { header: '비고', name: 'rmrk', align: 'left', minWidth: 50, },
       ];
 
       this.setGridColumn({
@@ -324,7 +310,7 @@ const myDataSetTagDetail = [
     valueNm: 'tagNm',
     disabled: false,
     cols: 6,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     required: true,
     labelCols: 12,
     textCols: 12,
@@ -350,12 +336,11 @@ const myDataSetTagDetail = [
     valueNm: 'useFg',
     disabled: false,
     cols: 5,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     value: { '1': true, '0': false },
     required: true,
     textCols: 12,
     iconShow: true,
-    // class: "d-flex align-end"
   },
   {
     type: 'TextArea',
@@ -369,23 +354,4 @@ const myDataSetTagDetail = [
     required: false,
   },
 ];
-
-
-const dataPathDataExample = [
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-];
 </script>

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -98,19 +98,17 @@ export default {
 	watch: {
 		selectedObjId(val) {
 			if (val === 'TAG') {
-				this.detailList[1].class = 'd-none';
+				this.detailList[1].class = 'd-none ';
-				this.detailList[2].class = 'd-block pl-4';
+				this.detailList[2].class = 'd-block pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
+				this.detailList[4].class = 'pl-4 mt-2';
 			} else {
 				// }else if(val==="READ_PLC"){
+				this.detailList[4].class = 'pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
 				this.detailList[2].class = 'd-none';
-				this.detailList[1].class = 'd-block pl-4';
+				this.detailList[1].class = 'd-block pl-4 mt-1 pb-0';
 			}
-			this.detailList[4].class = 'pl-4 mt-2';
-			
-			console.log(val)
-			console.log(this.detailList)
 		},
 	},
 	created() {},
@@ -272,12 +270,14 @@ export default {
 		async getRowData(data, gridName) {
 			if (data.rowStat === 'I') {
 				this.detailList[0].disabled = false;
+				this.detailList[1].disabled = false;
 				this.detailList[2].disabled = false;
 				this.detailList[3].disabled = false;
 				this.detailList[4].disabled = false;
 				this.detailList[5].disabled = false;
 			} else {
 				this.detailList[0].disabled = true;
+				this.detailList[1].disabled = true;
 				this.detailList[2].disabled = true;
 				this.detailList[3].disabled = true;
 				this.detailList[4].disabled = true;
@@ -296,6 +296,7 @@ export default {
 				case 'add':
 					this.$refs[this.gridName].addRow();
 					this.detailList[0].disabled = false;
+					this.detailList[1].disabled = false;
 					this.detailList[2].disabled = false;
 					this.detailList[3].disabled = false;
 					this.detailList[4].disabled = false;
@@ -378,9 +379,8 @@ const myDetail = [
 	{
 		type: 'SelectBox',
 		label: '대상 유형',
-		disabled: false,
 		cols: 6,
-		class: 'pr-4 py-2',
+		class: 'pr-4 py-2 mt-1',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
@@ -394,6 +394,7 @@ const myDetail = [
 	{
 		type: 'ReadPlcPop',
 		label: '대상 항목',
+		modalTitle:'대상 항목',
 		valueNm: 'objId',
 		disabled: true,
 		cols: 6,
@@ -402,8 +403,7 @@ const myDetail = [
 		bindNm: 'objNm',
 		labelCols: 12,
 		textCols: 12,
-		iconShow: true,
+		disableContent: true,
-		noText: true,
 		iconShow: true,
 	},
 	{
@@ -482,6 +482,7 @@ const myDetail = [
 		disabledFg: 'objKind',
 		labelCols: 12,
 		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'InputText',

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -6,7 +6,7 @@
 					<v-row>
 						<v-col :cols="8" style="padding:0px">
 							<!-- 조회기간 -->
-							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" />
+							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" customClass="tab-datepicker" />
 						</v-col>
 						<v-col cols="4" class="d-flex justify-end align-center">
 							<Buttons
@@ -205,8 +205,8 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 29,
+				rowHeight: 37,
-				minRowHeight: 29,
+				minRowHeight: 37,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -378,3 +378,20 @@ function numberFormatter({ value }) {
 	return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
 </script>
+<style lang="scss" scoped>
+	::v-deep {
+		.tab-datepicker {
+			width: 64% !important;
+		}
+
+		.tui-grid-layer-state {
+			top: 40px !important;
+		}
+
+		.tui-grid-layer-selection,
+		.tui-grid-cell-content-editor{
+			height: 36px !important;
+			// border: none;
+		}
+	}
+</style>

layouts/default.vue

@@ -149,151 +149,6 @@
                   <v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
                 </template>
                 <template #end v-if="false">
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ on, attrs }">
-                      <!-- <v-btn :ripple="false" tile class="btn-close" v-bind="attrs" v-on="on">
-                        <span class="body-2">닫기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon>
-                      </v-btn> -->
-                      <a-button style="width: 80px; height: 36px" class="btn-close">
-                        <span class="body-2">닫기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
-                    </template>
-                    <v-list class="py-2 btn-close-menu-list" >
-                      <v-list-item class="px-2">
-                        <v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item class="px-2">
-                        <v-list-item-title @click="deleteSblingsTab()" class="body-2">나머지 닫기</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ on, attrs }">
-                      <!-- <v-btn
-                        :ripple="false"
-                        tile
-                        class="btn-close"
-                        v-bind="attrs"
-                        v-on="on"
-                        style="width: 100px"
-                      >
-                        <span class="body-2">즐겨찾기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon>
-                      </v-btn> -->
-                      <a-button style="width: 100px; height: 36px" class="btn-close">
-                        <span class="body-2">즐겨찾기</span>
-                        <v-icon size="20">mdi-chevron-down</v-icon></a-button>
-                    </template>
-                    <v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" >
-                      <v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
-                        <v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
-                          item.menuNm
-                        }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-                  <a-button id="refresh" :style="{
-                    padding: '0',
-                    width: '36px',
-                    height: '36px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px', // square corners
-                  }" type="text" @click="removeBookMark" v-if="bookmarkBtn == 1">
-                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star</span>
-                  </a-button>
-                  <a-button id="refresh" :style="{
-                    padding: '0',
-                    width: '36px',
-                    height: '36px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px', // square corners
-                  }" type="text" @click="addBookMark" v-if="bookmarkBtn == 0">
-                    <span class="material-icons" style="font-size: 17px; vertical-align: middle">star_border</span>
-                  </a-button>
-                  <v-btn style="
-                      background-color: white;
-                      color: #fff;
-                      border: 0.2px solid rgb(217, 217, 217);
-                    " id="refresh" icon tile :ripple="false" @click="refreshTab()">
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)">mdi-refresh</v-icon>
-                  </v-btn>
-                  <v-btn style="
-                      background-color: white;
-                      color: #fff;
-                      border: 0.2px solid rgb(217, 217, 217);
-                    " icon tile :ripple="false" @click="toggle()">
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
-                    <v-icon style="color: rgba(0, 0, 0, 0.54)" v-else>mdi-arrow-collapse-all</v-icon>
-                  </v-btn>
-                  <!-- <v-btn
-                    icon
-                    tile
-                    :ripple="false"
-                    @click="removeBookMark()"
-                    v-if="bookmarkBtn == 1"
-                  >
-                    <span
-                      class="material-icons"
-                      style="font-size: 17px; vertical-align: middle"
-                      >star</span
-                    >
-                  </v-btn> -->
-                  <!-- <v-btn
-                    icon
-                    tile
-                    :ripple="false"
-                    @click="addBookMark()"
-                    v-if="bookmarkBtn == 0"
-                  >
-                    <span
-                      class="material-icons"
-                      style="font-size: 17px; vertical-align: middle"
-                      >star_border</span
-                    >
-                  </v-btn> -->
-                  <!-- <a-button
-                    id="refresh"
-                    :style="{
-                      padding: '0',
-                      width: '36px',
-                      height: '36px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '4px', // square corners
-                    }"
-                    type="text"
-                    @click="refreshTab"
-                  >
-                    <v-icon >mdi-refresh</v-icon>
-                  </a-button> -->
-                  <!-- <a-button id="refresh" type="text" @click="setDrawer" class="icon-button">
-                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
-                  </a-button>
-                  <a-button type="text" @click="setDrawer" class="icon-button">
-                        <i class="mdi mdi-crop-free" style="font-size: 20px"></i>  
-                  </a-button> -->
-                  <!-- <a-button
-                    :style="{
-                      padding: '0',
-                      width: '36px',
-                      height: '36px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '4px', // square corners
-                    }"
-                    type="text"
-                    @click="toggle"
-                  >
-                    <v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>  
-                    <v-icon v-else>mdi-arrow-collapse-all</v-icon>
-                  </a-button> -->
                 </template>
               </router-tab>
             </v-col>
@@ -846,5 +701,4 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/assets/scss/layout.scss';
-
 </style>

nuxt.config.js

@@ -58,9 +58,9 @@ module.exports = {
 
 	// Modules: https://go.nuxtjs.dev/config-modules
 	modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
-	styleResources: {
+	// styleResources: {
-		scss: ['./assets/scss/*.scss'],
+	// 	scss: ['./assets/scss/*.scss'],
-	},
+	// },
 	proxy: {
 	  "/api/": {
 	    target: "http://0.0.0.0:9999/",

pages/comm/auth/UserRoleMngPage.vue

@@ -912,17 +912,6 @@ const myColumns = [
 ];
 
 const unAsgnRoleByUserColumns = [
-	{
-		header: '',
-		name: '',
-		align: 'center',
-		width: 50,
-		formatter: (props) => {
-			return `<label class="custom-radio">
-						<span class="radio-mark"></span>
-					</label>`;
-		}
-	},	
 	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
@@ -932,8 +921,7 @@ const unAsgnRoleByUserColumns = [
 ];
 
 const asgnRoleByUserColumns = [
-	
+	{ header: '역할ID', name: 'roleId', align: 'left' },
-	{ header: '역할ID', name: 'roleId', align: 'center' },
 	{ header: '역할명', name: 'roleNm' },
 	{
 		header: '적용시작일',
@@ -947,6 +935,17 @@ const asgnRoleByUserColumns = [
 ];
 
 const asgnMenuByUserColumns = [
+	{
+		header: '',
+		name: '',
+		align: 'center',
+		width: 50,
+		formatter: (props) => {
+			return `<label class="custom-radio">
+						<span class="radio-mark"></span>
+					</label>`;
+		}
+	},	
 	{ header: '메뉴명', name: 'menuNm' }];
 
 const myDetail = blocCdList => {

pages/comm/base/BatchLogMngPage.vue

@@ -7,41 +7,21 @@
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
 						<v-col :cols="2.5">
-							<InputText
+							<InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
-								:parentPrgmId="myPrgmId"
+								customClass="input-large" />
-								label="배치ID"
-								valueNm="batchId"
-								:searchOption="true"
-								customClass="input-large"
-							/>
 						</v-col>
 						<v-col :cols="2.5">
-							<InputText
+							<InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
-								:parentPrgmId="myPrgmId"
+								customClass="input-large" />
-								label="배치명"
-								valueNm="batchNm"
-								:searchOption="true"
-								customClass="input-large"
-							/>
 						</v-col>
 						<v-col :cols="2.5">
-							<component
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'실행 결과'"
-								:is="'selectCodeList'"
+								:dataKey="'execRsltCd'" :sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
-								:parentPrgmId="myPrgmId"
+								:addAll="true" customClass="select-large" />
-								:label="'실행 결과'"
-								:dataKey="'execRsltCd'"
-								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
-								:addAll="true"
-								customClass="select-large"
-							/>
 						</v-col>
 						<v-col :cols="2.5">
-							<component
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'"
-								:is="'Datepicker'"
+								customClass="datepicker-large" />
-								:parentPrgmId="myPrgmId"
-								:label="'조회기간'"
-								customClass="datepicker-large"
-							/>
 						</v-col>
 						<div class="text-right d-flex align-end justify-end pl-9" style="gap: 8px">
 							<BtnSearch />
@@ -54,37 +34,30 @@
 
 		<v-row ref="contents">
 			<!-- 배치 리스트 -->
-			<v-col :cols="12" style="height:50%">
+			<v-col :cols="12" style="height:70%">
-				<v-card class="pb-5 h100">
+				<v-card class="h100">
 					<v-card-title>배치 리스트</v-card-title>
-					<div class="h100" style="height:calc(100% - 70px)">
+					<div class="h100" style="height:calc(100% - 150px)">
 						<div ref="gridParent" class="px-5 h100">
-							<component
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
-								:ref="gridName"
+								:gridName="gridName" @getRowsData="getRowData" />
-								:is="loadGrid ? 'Grid' : null"
+						</div>
-								:parentPrgmId="myPrgmId"
+						<div class="d-flex align-center justify-center pt-7" v-if="loadGrid && totalCount > 0">
-								:gridName="gridName"
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-								@getRowsData="getRowData"
+								@loadData="changeGrid" />
-							/>
 						</div>
 					</div>
 				</v-card>
 			</v-col>
 			<!-- 배치 상세 -->
-			<v-col :cols="12" style="height:50%">
+			<v-col :cols="12" style="height:30%">
-				<v-card class="pb-5 h100">
+				<v-card class="h100">
 					<div class="d-flex align-center justify-space-between pa-5">
 						<v-card-title class="pa-0">배치 상세</v-card-title>
 					</div>
-					<div style="height:calc(100% - 50px)">
+					<div style="height:calc(100% - 50px)" class="px-5">
-						<div ref="gridParent" class="px-5 h100">
+						<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
-							<component
+							@gridEditingFinish="gridEditingFinish" />
-								:is="'Form'"
-								:parentPrgmId="myPrgmId"
-								:detailList="detailList"
-								@gridEditingFinish="gridEditingFinish"
-							/>
-						</div>
 					</div>
 				</v-card>
 			</v-col>
@@ -105,6 +78,7 @@ import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
 import Form from '~/components/common/form/Form';
 import Utility from '~/plugins/utility';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -133,6 +107,7 @@ export default {
 		BtnSearch,
 		BtnExcelDownload,
 		Buttons,
+		pagination,
 	},
 	data() {
 		return {
@@ -141,6 +116,11 @@ export default {
 			gridName: 'rowGrid',
 			// rowGridOrigin: [],
 			detailList: myDetail,
+			itemsPerPage: 20,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -161,7 +141,10 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 		chkExecRsltCd() {
 			this.setPageData({ isFind: true });
@@ -197,17 +180,16 @@ export default {
 		//   chkOpenTabList: "chkOpenTabList"
 		// }),
 		init() {
-			// this.layoutInit();
+			this.layoutInit();
 			this.gridInit();
 		},
-		// layoutInit() {
+		layoutInit() {
-		//   const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
+			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
-		//   this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
+			this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px)`;
-		// },
+		},
 		gridInit() {
 			this.loadGrid = false;
 			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-
 			const myOptions = {
 				scrollX: false,
 			};
@@ -219,10 +201,10 @@ export default {
 
 			const _this = this;
 			const myColumns = [
-				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 },
+				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 90 },
-				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
+				{ header: '배치ID', name: 'batchId', align: 'right', width: 90 },
 				{ header: '배치명', name: 'batchNm', align: 'left', width: 150 },
-				{ header: '실행 일자', name: 'execDt', align: 'right', width: 80 },
+				{ header: '실행 일자', name: 'execDt', align: 'right', width: 70 },
 				{
 					header: '실행 결과',
 					name: 'execRsltCd',
@@ -252,9 +234,9 @@ export default {
 					align: 'center',
 					width: 160,
 				},
-				{ header: '등록자NO', name: 'regUserNo', width: 120 },
+				{ header: '등록자NO', name: 'regUserNo', width: 100 },
 				{ header: '등록일시', name: 'regDttm', align: 'center', width: 160 },
-				{ header: '수정자NO', name: 'procUserNo', width: 120 },
+				{ header: '수정자NO', name: 'procUserNo', width: 100 },
 				{ header: '수정일시', name: 'procDttm', align: 'center', width: 160 },
 			];
 
@@ -274,6 +256,11 @@ export default {
 			});
 		},
 		async getRowGridData() {
+			this.loadGrid = false;
+			// this.setGridData({
+			// 	gridKey: this.gridName,
+			// 	value: [],
+			// });
 			const res = await this.postApiReturn({
 				apiKey: 'selectBatchLog',
 				resKey: 'batchLogData',
@@ -282,8 +269,24 @@ export default {
 					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
 					execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
 					fromDt: this.pageData.fromDt,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
+
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectBatchLogPageTotal',
+				resKey: 'batchLogPageTotal',
+				sendParam: {
+					batchId: this.pageData.batchId, // 검색키워드: 배치ID
+					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
+					execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
+					fromDt: this.pageData.fromDt,
+				},
+			});
+			this.totalCount = res2[0].totalcount;
+
 			const newRes = res.map(item => {
 				const newObj = {
 					...item,
@@ -302,6 +305,7 @@ export default {
 			});
 
 			this.$nextTick(() => {
+				this.loadGrid = true;
 				if (newRes.length > 0) {
 					this.$refs[this.gridName].focus({
 						rowKey: this.chkRowGridSelectKey || 0,
@@ -361,6 +365,12 @@ export default {
 			}
 			return retVal;
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 
@@ -428,6 +438,7 @@ const myDetail = [
 		readonly: true,
 		cols: 12,
 		class: 'py-2',
+		rows: 3
 	},
 ];
 </script>

pages/comm/base/CalendarMngPage.vue

@@ -41,7 +41,7 @@
 					<v-card-title>
 						<span class="custom-title-4">캘린더 미리보기</span>
 					</v-card-title>
-					<v-card-actions class="px-5 d-block" >
+					<v-card-actions class="px-5 d-block">
 						<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
 							:showTitle="false" />
 					</v-card-actions>
@@ -470,71 +470,76 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-.selectbox:focus {
-	outline: none;
-}
-
-.calendarOption {
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	margin: 0;
-}
-
-select.selectbox {
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	/* 높이 초기화 */
-	padding: 0;
-	margin: 0;
-	line-height: normal;
-	/* line-height 초기화 */
-	font-family: inherit;
-	/* 폰트 상속 */
-	border: 0;
-	// opacity: 0;  /* 숨기기 */
-	// filter:alpha(opacity=0);  /* IE8 숨기기 */
-	// -webkit-appearance: none; /* 네이티브 외형 감추기 */
-	// -moz-appearance: none;
-	// appearance: none;
-	opacity: 1;
-	/* 숨기기 */
-	filter: alpha(opacity=1);
-	/* IE8 숨기기 */
-	-webkit-appearance: auto;
-	/* 네이티브 외형 감추기 */
-	-moz-appearance: auto;
-	appearance: auto;
-}
-
-.tui-grid-layer-editing {
-	position: absolute;
-	background: #fff;
-	// background-image: initial;
-	// background-position-x: initial;
-	// background-position-y: initial;
-	// background-size: initial;
-	// background-repeat-x: initial;
-	// background-repeat-y: initial;
-	// background-attachment: initial;
-	// background-origin: initial;
-	// background-clip: initial;
-	// background-color: rgb(255, 255, 255);
-	// z-index: 15;
-	padding: 0;
-	margin: 0;
-	/* border-style: solid; */
-	/* border-width: 1px; */
-	white-space: nowrap;
-	border-width: 0px;
-	// box-sizing: border-box;
-}
-
 ::v-deep {
+	.selectbox:focus {
+		outline: none;
+	}
+
+	.calendarOption {
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		margin: 0;
+	}
+
+	select.selectbox {
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		/* 높이 초기화 */
+		padding: 0;
+		margin: 0;
+		line-height: normal;
+		/* line-height 초기화 */
+		font-family: inherit;
+		/* 폰트 상속 */
+		border: 0;
+		// opacity: 0;  /* 숨기기 */
+		// filter:alpha(opacity=0);  /* IE8 숨기기 */
+		// -webkit-appearance: none; /* 네이티브 외형 감추기 */
+		// -moz-appearance: none;
+		// appearance: none;
+		opacity: 1;
+		/* 숨기기 */
+		filter: alpha(opacity=1);
+		/* IE8 숨기기 */
+		-webkit-appearance: auto;
+		/* 네이티브 외형 감추기 */
+		-moz-appearance: auto;
+		appearance: auto;
+		background: #fff;
+		border: 1px solid #d9d9d9;
+		border-radius: 6px;
+		color: rgba(0,0,0,0.87843);
+	}
+
+	.tui-grid-layer-editing {
+		position: absolute;
+		background: #fff;
+		// background-image: initial;
+		// background-position-x: initial;
+		// background-position-y: initial;
+		// background-size: initial;
+		// background-repeat-x: initial;
+		// background-repeat-y: initial;
+		// background-attachment: initial;
+		// background-origin: initial;
+		// background-clip: initial;
+		// background-color: rgb(255, 255, 255);
+		// z-index: 15;
+		padding: 0;
+		margin: 0;
+		/* border-style: solid; */
+		/* border-width: 1px; */
+		white-space: nowrap;
+		border-width: 0px;
+		// box-sizing: border-box;
+	}
+
+
 	.custom-vc-calender {
 		.vc-header {
 			display: none;

pages/comm/base/NoticeMngPage.vue

@@ -37,7 +37,7 @@
 								class="mr-1" icon="unordered-list">목록</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
 								class="mr-1" icon="send-outlined">
-								<v-icon small :class="['mr-2']">$icoSend</v-icon>
+								<v-icon small :class="['mr-2']" >$icoSend</v-icon>
 								답글
 							</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
@@ -60,9 +60,13 @@
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item" style="background-color: unset;">
+						<div v-for="fileData in viewActionData.fileData" 
-							<a @click.prevent="downloadFile(fileData)">
+							:key="fileData.apndFileId" 
-								<div class="d-flex justify-start search-box-label">
+							:class="['file-item', isDarkMode?'dark':'light']"
+							style="background-color: unset;"
+						>
+							<a @click.prevent="downloadFile(fileData)" class="pa-0">
+								<div class="d-flex justify-start search-box-label mb-0">
 									<v-icon>mdi-paperclip</v-icon>
 									<span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' +
 										fileData.apndFileExt }}</span>
@@ -96,7 +100,8 @@
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="writeActionData.fileData">
 								<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
-									class="file-item d-flex justify-space-between">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon>mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -105,15 +110,17 @@
 										@click="writeActionData.업로드fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
 								hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
+							<a-button @click="writePageButtonGroupClickEvent('cancel')" 
-								class="mr-2">취소</a-button>
+								:ripple="false"
+								class="ant-btn-popup-default mr-2" 
+								color="primary" >취소</a-button>
 							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
 								type="primary">등록</a-button>
 						</v-col>
@@ -142,7 +149,8 @@
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 						<div class="" v-if="replyActionData.fileData">
 							<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
-								class="file-item d-flex justify-space-between">
+								:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+							>
 								<div class="file-item-detail">
 									<v-icon>mdi-paperclip</v-icon>
 									<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -151,7 +159,7 @@
 									@click="replyActionData.fileData.splice(index, 1)" />
 							</div>
 						</div>
-						<a-button class="mt-3" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
+						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
 							업로드
 						</a-button>
 						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
@@ -159,7 +167,10 @@
 						</v-file-input>
 					</v-col>
 					<v-col :cols="12" class="text-right">
-						<a-button @click="replyPageButtonGroupClickEvent('cancel')" :ripple="false">취소</a-button>
+						<a-button @click="replyPageButtonGroupClickEvent('cancel')" 
+							class="ant-btn-popup-default mr-2" 
+							color="primary"
+							:ripple="false">취소</a-button>
 						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
 							type="primary">등록</a-button>
 					</v-col>
@@ -168,7 +179,7 @@
 		</div>
 		<!-- 답글 작성 페이지 끝 -->
 		<!-- 수정 페이지 시작 -->
-		<div v-if="pageActionFlag == 'update'">
+		<div v-if="pageActionFlag == 'update'" class="update">
 			<v-card>
 				<div class="pa-5">
 					<v-row align="center" no-gutters>
@@ -190,7 +201,8 @@
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="updateActionData.fileData">
 								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
-									class="file-item d-flex justify-space-between">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -199,9 +211,11 @@
 										@click="updateActionData.fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<div class="" v-if="updateActionData.currentFileList">
+							<div class="current-files" v-if="updateActionData.currentFileList">
 								<div v-for="(fileData, index) in updateActionData.currentFileList"
-									:key="fileData.apndFileId" class="file-item d-flex justify-space-between">
+									:key="fileData.apndFileId"
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span @click.prevent="downloadFile(fileData)" href="#"
@@ -212,7 +226,7 @@
 										@click="addFileToDeleteFileList(fileData)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
@@ -220,7 +234,10 @@
 							</v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="updatePageButtonGroupClickEvent('cancel')">취소</a-button>
+							<a-button @click="updatePageButtonGroupClickEvent('cancel')" 
+								class="ant-btn-popup-default mr-2" 
+								color="primary"
+							>취소</a-button>
 							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
 						</v-col>
 					</v-row>
@@ -1042,17 +1059,6 @@ const defaultData = {
 	cursor: pointer;
 }
 
-.file-item {
-	width: auto;
-	margin: 2px 0;
-	padding: 4px;
-	background-color: #0000000A;
-
-	.file-item-name {
-		color: #1677FF;
-	}
-}
-
 ::v-deep {
 	.v-input__slot {
 		padding-left: 8px;
@@ -1076,17 +1082,46 @@ const defaultData = {
 		font-size: 1.0rem !important;
 	}
 
-	.toastui-editor-mode-switch .tab-item.active {
-		color: #1677FF
-	}
-
-	.toastui-editor-light .toastui-editor-mode-switch .tab-item {
-		color: #000000E0
-	}
-
 	.v-icon.anticon-delete svg {
 		width: 14px;
 		height: 14px;
 	}
 }
+
+@each $theme in dark, light {
+	@include theme($theme);
+	
+	::v-deep {
+		.toastui-editor-#{$theme} {
+			.toastui-editor-mode-switch {
+				>.tab-item {
+					border: none;
+					background-color: transparent;
+					color: map-deep-get($config, #{$theme}, "card-title-color") !important;
+	
+					&.active {
+						color: map-deep-get($config, #{$theme}, "card-text-info-color") !important;
+						border-top: 1px solid map-deep-get($config, #{$theme}, "card-text-info-color");
+					}
+
+				}
+			}
+	
+		}
+	}
+
+	.file-item {
+		&.#{$theme} {
+			width: auto;
+			margin: 2px 0;
+			padding: 4px;
+			background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color");
+
+			.file-item-name {
+				color: map-deep-get($config, #{$theme}, "card-text-info-color");
+			}
+
+		}
+	}
+}
 </style>

pages/ems/base/AddInfoMngPage.vue

@@ -626,6 +626,3 @@ const myDetail = [
 	},
 ];
 </script>
-<style lang="scss">
-@import '@/assets/scss/common.scss';
-</style>

pages/ems/base/DashboardPage.vue

@@ -512,7 +512,7 @@
       <v-col cols="12" sm="12" xl="12" style="height: 300px">
         <v-card style="border-radius: 4px" class="pb-5">
           <div style="height: 20px"></div>
-          <div class="h100 px-5" style="height: calc(100% - 30px)">
+          <div class="h100 px-5" style="height: calc(100% - 70px)">
             <div ref="gridParent" class="h100 w100">
               <component
                 :is="loadGrid ? 'Grid' : null"
@@ -521,6 +521,16 @@
                 :ref="gridName"
                 @dblClick="gridClickEvent"
               />
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
+                <pagination
+                  id="pagination"
+                  :total-count="totalCount"
+                  :page-num="page"
+                  :limit="limit"
+                  :itemsPerPageArray="itemsPerPageArray"
+                  @loadData="changeGrid"
+                />
+              </div>
             </div>
           </div>
         </v-card>
@@ -539,6 +549,7 @@ import DateUtility from "~/plugins/dateUtility";
 import Utility from "~/plugins/utility";
 import Grid from "~/components/common/Grid";
 import Chart from "~/components/common/Chart";
+import pagination from "~/components/common/Pagination";
 
 import AntCard from "~/components/common/card/AntCard";
 
@@ -579,7 +590,8 @@ export default {
     Chart,
     UnusedStatPopPage,
     EtcStatPopPage,
-    PageTitle
+    PageTitle,
+    pagination
   },
   computed: {
     ...mapState({
@@ -697,6 +709,10 @@ export default {
 
       gridName: "dashBoard_grid_01",
       loadGrid: false,
+      itemsPerPageArray: [10, 20, 50],
+      limit: 10,
+      page: 1,
+      totalCount: 0,
       isGridLoading: true,
     };
   },
@@ -735,6 +751,11 @@ export default {
       }
       this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
     },
+    changeGrid: async function (pageNum, limit) {
+      this.page = pageNum;
+      this.limit = limit;
+      await this.getGridData();
+    },
     async search() {
       await new Promise((resolve) => setTimeout(resolve, 1500));
       if (this.$router.currentRoute.fullPath == this.myHome.root) {
@@ -756,6 +777,41 @@ export default {
         // gridHeight = gridHeight*0.9
         gridHeight = this.$refs.gridParent.offsetHeight - 35;
       }
+      // Define custom button
+      class CustomButton {
+        constructor(props, pageData) {
+          const { grid, rowKey, columnInfo } = props;
+          const gridData = grid.store.data.rawData;
+          const value = gridData[rowKey][columnInfo.name];
+          const onClickCallback = columnInfo.renderer.options.onClick;
+
+          this.disabled = columnInfo.renderer.options.disabled || false;
+          const elDiv = document.createElement("div");
+          elDiv.innerHTML = `<span>${value}</span>`;
+          $(elDiv).addClass("tui-grid-cell-content d-flex justify-space-between");
+          const el2 = document.createElement("button");
+          $(el2).addClass("edit-btn blue--text");
+          el2.innerText = "보기";
+          elDiv.appendChild(el2);
+          this.el = elDiv;
+          if (!this.disabled && typeof onClickCallback === "function") {
+            // click 이벤트
+            this.el.addEventListener("click", function (event) {
+              onClickCallback(rowKey);
+            });
+          }
+        }
+        getElement() {
+          return this.el;
+        }
+        getValue() {
+          // return this.el.value;
+        }
+        mounted() {
+          // this.el.focus();
+        }
+      }
+
       const myOptions = {
         // scrollX: false,
         setScroll: true,
@@ -840,7 +896,42 @@ export default {
         { header: "주의", name: "careStndVal", align: "right", width: 40 },
         { header: "경고", name: "warnStndVal", align: "right", width: 40 },
         { header: "가이드", name: "totVal", align: "right", width: 40 },
-        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false },
+        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false,
+          // Render custom button to switch page instead of double click on row
+          renderer: {
+            type: CustomButton,
+            options: {
+              value: "보기",
+              onClick: (rowKey) => {
+                var gridInstance = this.$refs[this.gridName].gridInstance;
+                var eventRowData = gridInstance.invoke("getRow", rowKey);
+                var data = {
+                  cmCycle: "CYC_DAY",
+                  fromDt:
+                    eventRowData.totDttm != undefined
+                      ? eventRowData.totDttm
+                      : Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
+                  fabId: eventRowData.fabId,
+                  eqpmKindId: eventRowData.eqpmKindId,
+                  eqpmGrpId: eventRowData.eqpmGrpId,
+                  eqpmId: eventRowData.eqpmId,
+                };
+                var key = "tick_" + Math.random();
+                this.$router.push({
+                  name: "ems-effc-EnrgUseEqpmDetlMntrPage",
+                  query: {
+                    prgmId: "PRG0082",
+                    // tick:key
+                  },
+                  params: {
+                    ...data,
+                    key: key,
+                  },
+                });
+              },
+            },
+          },
+         },
         { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
         { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
       ];
@@ -855,11 +946,21 @@ export default {
     },
     async getGridData() {
       this.loadGrid = false;
-      // console
+      // Get total records of grid
+      const totalRes =  await this.postApiReturn({
+        apiKey: "selectIssueGdIdxDataPageTotal",
+        resKey: "issueGdIdxDataPageTotal",
+      }); 
+      this.totalCount = totalRes[0].totalcount;
+
       const res = await this.postApiReturn({
         apiKey: "selectIssueGdIdxData",
         resKey: "issueGdIdxData",
-        sendParam: {},
+        sendParam: {
+          limit: this.limit,
+          page: this.page,
+          offset: (this.page - 1) * this.limit,
+        },
       });
       // let fakeData = [
       // 	{
@@ -1280,6 +1381,9 @@ export default {
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
+          itemStyle: {        
+            borderWidth: 0
+          }
         },
         series: seriesData,
       };

pages/ems/base/EnrgResourceCenterMngPage.vue

@@ -84,67 +84,64 @@
 				</v-card>
 			</v-col>
 		</v-row>
-		<v-row >
+		<v-row align="stretch">
-			<v-col :cols="5" class="h100">
+			<v-col :cols="5">
-				<v-card class="pb-5">
+				<v-card class="d-flex flex-column h100">
-					<v-card-title class="d-flex justify-space-between align-end">
+				<v-card-title class="d-flex justify-space-between align-end">
-						<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
+					<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
-						<Buttons
+					<Buttons
-							:parentPrgmId="myPrgmId"
+					:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
+					:bindingData="gridName"
-							:detailList="detailList"
+					:detailList="detailList"
-							:btnActionsFnc="btnActions"
+					:btnActionsFnc="btnActions"
-						/>
+					/>
-					</v-card-title>
+				</v-card-title>
-					<div class="px-5" style="height:calc(100% - 106px)">
+				<div class="px-5" style="height: auto;">
-						<div ref="gridParent" class="w100 h100">
+					<div ref="gridParent" class="w100">
-							<component
+					<component
-								:ref="gridName"
+						:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
+						:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
+						:gridName="gridName"
-								:parentPrgmId="myPrgmId"
+						:parentPrgmId="myPrgmId"
-								@getRowsData="getRowData"
+						@getRowsData="getRowData"
-								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
+						@sendSelectedRowStatInfo="getSelectedRowStatInfo"
-								:selectedRowDataWatchFlag="true"
+						:selectedRowDataWatchFlag="true"
-							/>
+					/>
-						</div>
 					</div>
+				</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
+
-				<v-card class="pb-5">
+			<v-col :cols="7">
-					<v-card-title>에너지원 상세</v-card-title>
+				<v-card class="d-flex flex-column h100">
-					<div class="px-5" style="min-height: auto;">
+				<v-card-title>에너지원 상세</v-card-title>
-						<v-tabs v-model="tab">
+				<div class="px-5" style="height: auto;">
-							<v-tab
+					<v-tabs v-model="tab">
-								v-for="item in items"
+					<v-tab
-								:key="item.id"
+						v-for="item in items"
-								:disabled="item.disabledFlag"
+						:key="item.id"
-							>
+						:disabled="item.disabledFlag"
-								{{ item.name }}
+					>
-							</v-tab>
+						{{ item.name }}
-						</v-tabs>
+					</v-tab>
-						<v-tabs-items
+					</v-tabs>
-							v-model="tab"
+					<v-tabs-items v-model="tab" class="py-6">
-							class="py-6"
+					<v-tab-item v-for="(item, idx) in items" :key="item.id">
-							style="min-height: auto;"
+						<component
-						>
+						v-if="item.id == 'ercInfoTab'"
-							<v-tab-item v-for="(item, idx) in items" :key="item.id">				
+						:is="'Form'"
-								<component
+						:parentPrgmId="myPrgmId"
-										v-if="item.id == 'ercInfoTab'"
+						:detailList="detailList"
-										:is="'Form'"
+						@gridEditingFinish="gridEditingFinish"
-										:parentPrgmId="myPrgmId"
+						/>
-										:detailList="detailList"
+						<ErcChrgInfoTab
-										@gridEditingFinish="gridEditingFinish"
+						v-if="item.id == 'ercChrgInfoTab'"
-								/>
+						:parentPrgmId="myPrgmId"
-								<ErcChrgInfoTab
+						:innerTabGridInfo="{ tab, idx }"
-										v-if="item.id == 'ercChrgInfoTab'"
+						/>
-										:parentPrgmId="myPrgmId"
+					</v-tab-item>
-										:innerTabGridInfo="{ tab, idx }"
+					</v-tabs-items>
-								/>
+				</div>
-							</v-tab-item>
-						</v-tabs-items>
-					</div>
 				</v-card>
 			</v-col>
 		</v-row>

pages/ems/base/ReadObjectMngPage.vue

@@ -855,7 +855,6 @@ const myDetail = [
 ];
 </script>
 <style lang="scss" scoped>
-@import '@/assets/scss/common.scss';
 ::v-deep {
 	.tui-grid-layer-state {
 		top: 40px !important;

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -60,17 +60,23 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents" class="pt-3">
-			<v-col :cols="12" style="height: 100%">
+			<v-col :cols="12" >
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-4">
 						<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
 					</div>
-					<div class="px-4" style="height:calc(100% - 76px)">
+					<div class="px-4" >
-						<div ref="gridParent" class="w100 h100">
+						<div ref="gridParent" class="w100 h100 enrg-effc">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
+							<div class="d-flex align-center justify-center pa-5 pb-0" v-if="loadGrid && totalCount > 0">
+								<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+									@loadData="changeGrid" />
+							</div>
 						</div>
+
 					</div>
+
 				</v-card>
 			</v-col>
 		</v-row>
@@ -92,6 +98,7 @@ import Datepicker from '~/components/common/Datepicker';
 import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
 import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
 import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -124,6 +131,7 @@ export default {
 		EnrgEffcEqpmDetailPop,
 		EqpmSelectPop,
 		EnrgEffcGdIdxDetPop,
+		pagination
 	},
 	data() {
 		return {
@@ -149,7 +157,12 @@ export default {
 			eqpmGrpFlag: false,
 			eqpmGdIdxFlag: false,
 			fabFlag: false,
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
 			routeData: {},
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -377,6 +390,7 @@ export default {
 				resKey: 'eqpmKindCodeLists',
 				sendParam: {},
 			});
+
 			if (res.length > 0) {
 				this.selectValueList01 = await res.map(item => {
 					return {
@@ -680,9 +694,29 @@ export default {
 					fabId: this.selectValue02,
 					eqpmKindId: this.selectValue01,
 					okFg: this.selectValue06,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
 
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectEnrgEffcEqpmDetlMntrPageTotal',
+				resKey: 'eqpmDetlDataPageTotal',
+				sendParam: {
+					eqpmId: this.selectValue04.eqpmId,
+					eqpmGrpId: this.selectValue03,
+					fromDt: this.pageData.fromDt,
+					toDt: this.pageData.toDt,
+					gdIdxId: this.selectValue05,
+					fabId: this.selectValue02,
+					eqpmKindId: this.selectValue01,
+					okFg: this.selectValue06,
+				},
+			});
+
+			this.totalCount = res2[0]?.totalcount;
+
 			this.setGridData({
 				gridKey: this.gridName,
 				value: res,
@@ -722,6 +756,12 @@ export default {
 				});
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 

pages/ems/effc/EnrgEffcTotSummPage.vue

@@ -411,15 +411,3 @@ const defaultData = {
   fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"), // 조회 시작일
 };
 </script>
-<style lang="scss" scoped>
-// @import "@/assets/scss/common.scss";
-
-// .echarts::v-deep > div > canvas:hover {
-//     cursor: pointer;
-// }
-// ::v-deep{
-// 	.echarts:hover > div:nth-child(1){
-// 		cursor:pointer !important;
-// 	}
-// }
-</style>

pages/ems/effc/EnrgReptMngPage.vue

@@ -35,7 +35,7 @@
 						</v-col>
 						<v-col :cols="6.5" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
-							<a-button icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
+							<a-button type="default" icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
 							<BtnSearch @click="search" size="large"  />
 						</v-col>
 					</v-row>

pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue

@@ -152,16 +152,16 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 52%; width: 100%">
+        <v-row class="pa-1" style="height: 45%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
             <div style="height: 15%">
-              <v-card-title class="d-flex align-center justify-space-between pl-3">
+              <v-card-title class="d-flex align-center justify-space-between pl-3 pt-2">
                 <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
               </v-card-title>
             </div>
             <div
               ref="gridParent01"
-              class="pl-3 mt-5"
+              class="pl-3 mt-3"
               style="height: 75%; overflow: hidden;"
             >
               <component

pages/ems/effc/EnrgUsePlanPage.vue

@@ -819,8 +819,6 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-// @import '@/assets/scss/common.scss';
-@import '@/assets/scss/var.scss';
 @each $theme in dark, light {
 	.v-application.#{$theme}-mode {
 		.tui-grid {

pages/ems/effc/TagTrndPage.vue

@@ -1214,7 +1214,6 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/var.scss";
 
 ::v-deep {
   .datepicker-container {

pages/login/index.vue

@@ -200,8 +200,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '@/assets/scss/var.scss';
-@import '@/assets/scss/mixin.scss';
 
 ::v-deep {
 	.v-avatar {

store/modules/list.js

@@ -281,6 +281,7 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0020" 배치로그
 	selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그
+	selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그
 
 	// prgmId: "PRG0017" 검침개소 기간별 비교
 	selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',
@@ -942,6 +943,8 @@ const INIT_URL_STATE = {
 	//prgmId : PRG0084 설비별 운전가이드
 	selectEqpmCodeList: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmCodeList',
 	selectEnrgEffcEqpmDetlMntr:'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntr',
+	selectEnrgEffcEqpmDetlMntrPageTotal:
+		'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntrPageTotal', // 일일검침정보
 	selectEqpmDetailPop: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmDetailPop',
 	selectEnrgEffcGdIdxDetPop : 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcGdIdxDetPop',
 
@@ -969,4 +972,5 @@ const INIT_URL_STATE = {
 	selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen',
 	selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart',
 	selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData',
+	selectIssueGdIdxDataPageTotal: 'ems/base/DashboardCtr/selectIssueGdIdxDataPageTotal',
 };