diff --git a/assets/images/SwapRight.svg b/assets/images/SwapRight.svg
new file mode 100644
index 0000000..529a231
--- /dev/null
+++ b/assets/images/SwapRight.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="black" fill-opacity="0.45"/>
+</svg>
diff --git a/assets/images/SwapRight_Dark.svg b/assets/images/SwapRight_Dark.svg
new file mode 100644
index 0000000..5ff8291
--- /dev/null
+++ b/assets/images/SwapRight_Dark.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="white" fill-opacity="0.45"/>
+</svg>
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index aad3c9b..8af5310 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -128,219 +128,6 @@ a {
   background: #383f5d;
 }
 
-// router-tab header
-.router-tab {
-  height: 100%;
-
-  &__header {
-    align-items: flex-end;
-    height: 52px;
-    margin: -5px -5px 0;
-    padding: 0 20px;
-    box-sizing: border-box;
-    border-bottom: none !important;
-  }
-
-  &-page {
-    height: 100%;
-  }
-
-  & .router-tab__container {
-    overflow-y: auto;
-    height: calc(100vh - 105px);
-    max-height: calc(100vh - 105px);
-    padding: 20px;
-  }
-
-  .router-tab__slot-end {
-    align-self: center;
-    display: flex;
-    align-items: center;
-
-    >* {
-      flex: none;
-      margin-right: 6px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    .v-menu+.v-btn {
-      padding: 0 3px;
-    }
-
-    .v-btn {
-      border-radius: 4px;
-    }
-  }
-
-  .router-tab__nav {
-    padding-left: 0;
-  }
-
-  .router-tab__scroll {
-    height: 46px;
-  }
-
-  .router-tab__item {
-    height: 46px;
-    padding: 0 !important;
-
-    &:first-child {
-      border-left: none
-    }
-
-    &>span {
-      font-size: 14px;
-    }
-
-    &.is-active {
-      border-bottom: 2px solid;
-
-      &>span {
-        font-weight: 400;
-      }
-    }
-
-    &+.router-tab__item {
-      margin-left: 16px;
-    }
-
-    border:none;
-  }
-
-}
-
-// v-navigation-drawer (sidebar)
-.v-navigation-drawer {
-  box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
-
-  &--fixed {
-    z-index: 20;
-  }
-
-  .home {
-    display: block;
-    line-height: 0;
-  }
-
-  &__border {
-    display: none;
-  }
-
-  &__append {
-    padding: 0 17px;
-    margin: 0 0 26px;
-
-    >p {
-      margin-bottom: 0;
-    }
-  }
-
-  .v-treeview {
-    padding: 0 10px;
-    box-sizing: border-box;
-
-    .v-treeview-node__level {
-      width: 9px;
-    }
-
-    >.v-treeview-node {
-      margin-top: 10px;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      >.v-treeview-node__root {
-        min-height: 44px !important;
-      }
-    }
-
-    .v-treeview-node {
-      .v-treeview-node__toggle {
-        display: none !important;
-      }
-
-      &>.v-treeview-node__root:before {
-        border-radius: 6px;
-        z-index: -1;
-      }
-
-      &>.v-treeview-node__root:hover:before {
-        opacity: 0 !important;
-      }
-
-      .v-treeview-node__children {
-        .v-treeview-node__label {
-          >button>span {
-            font-size: 0.875rem;
-          }
-        }
-      }
-    }
-
-    .v-treeview-node--click[aria-expanded="true"] {
-      &>.v-treeview-node__root:before {
-        opacity: 0 !important;
-      }
-    }
-
-    .v-treeview-node[aria-expanded="true"] {
-      &>.v-treeview-node__root>.v-treeview-node__content
-      >.v-treeview-node__label>button {
-        >.anticon,
-        >.v-icon.mdi-chevron-down {
-          transform: rotate(-180deg);
-        }
-      }
-    }
-
-    .v-treeview-node__label {
-      &>button {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        // justify-content: center;
-      }
-
-      & .anticon,
-      & .v-icon.mdi-chevron-down {
-        margin-left: auto;
-        animation-duration: 0.5s;
-      }
-    }
-  }
-
-  .v-treeview-node--active {
-    &:before {
-      opacity: 0 !important;
-    }
-  }
-
-  &.v-navigation-drawer--mini-variant {
-    .home {
-      display: none;
-    }
-
-    .v-treeview-node__content {
-      margin-left: 0;
-    }
-
-    .v-treeview-node__content span:not(.v-icon),
-    .v-treeview-node__root>button,
-    .v-treeview-node__level,
-    .v-treeview-node__content .v-icon.mdi-chevron-down,
-    .v-treeview-node__content .anticon {
-      display: none;
-    }
-
-    .v-navigation-drawer__append {
-      display: none;
-    }
-  }
-}
 
 .chart {
   height: 100%;
@@ -444,12 +231,12 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
-    .head-logo {
-      gap: 8px;
+    .icon-datepicker-color {
+      color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
     }
 
-    .v-navigation-drawer {
-      background: map-deep-get($config, #{$theme}, "menu-bg-color");
+    .head-logo {
+      gap: 8px;
     }
 
     .v-window__container {
@@ -462,52 +249,16 @@ a {
       }
     }
 
-    ::-webkit-scrollbar {
-      width: 4px;
-      border-radius: 3px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
-    }
-
-    ::-webkit-scrollbar-thumb {
-      width: 4px;
-      border-radius: 3px;
-      background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
-      background-clip: content-box;
-    }
-
     .search-box-label {
       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");
     }
 
-    .btn-header {
-      background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
-      border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
-      color: map-deep-get($config, #{$theme}, "v-btn-header-text");
-    }
-
-    .container--fluid {
-      background-color: map-deep-get($config, #{$theme}, "container-fluid");
-
-      .menu-container {
-        height:calc(100vh - 60px);
-        overflow-y: auto;
-        border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
-      }
-    }
-
     .v-icon {
+      color: currentColor;
       &.icon-orange {
         svg {
           fill:map-deep-get($config,
@@ -528,7 +279,6 @@ a {
 
       }
 
-
       &.custom-chevron-down {
 
         fill:map-deep-get($config,
@@ -618,12 +368,6 @@ a {
       }
     }
 
-    .v-navigation-drawer__append {
-      >p {
-        color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
-      }
-    }
-
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }
@@ -660,130 +404,6 @@ a {
       height: 282px;
     }
 
-    .v-treeview {
-      .v-treeview-node+.v-treeview-node {
-        margin-top: 2px;
-      }
-
-      .v-treeview-node__root+.v-treeview-node__children {
-        margin-top: 2px;
-      }
-
-      &>.v-treeview-node {
-        .v-treeview-node__root {
-          border-radius: 8px;
-          &:hover {
-            background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
-          }
-          .v-treeview-node__content {
-            .v-treeview-node__label {
-              color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-            }
-          }
-
-        }
-
-        &[aria-expanded="true"]{
-
-          // Level 1
-          &>.v-treeview-node__root {
-            background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
-            border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-            color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-
-            &:before {
-              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
-            }
-
-            .v-treeview-node__content {
-              .v-treeview-node__label {
-                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-              }
-
-              .v-icon:first-child,
-              .v-icon:first-child::before {
-                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-              }
-            }
-          }
-
-          &>.v-treeview-node__children {
-            // Level 2
-            .v-treeview-node__root {
-              color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
-              &:hover {
-                background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
-              }
-            }
-            &>[aria-expanded="true"] >.v-treeview-node__root,
-            .v-treeview-node__root.v-treeview-node--active {
-              background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
-              .v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config, #{$theme}, "card-title-color");
-                }
-
-                .v-icon,
-                .v-icon::before,
-                .anticon {
-                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-                }
-              }
-            }
-            
-            // Level 3
-            .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);
-                    .v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-                      }
-                    }
-
-                  }
-
-                  &.v-treeview-node--active {
-                    // color: map-deep-get($config, #{$theme}, "card-title-color");
-                    background-color: rgba(0, 0, 0, 0);
-                    .v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-                      }
-      
-                      .v-icon,
-                      .v-icon::before,
-                      .anticon {
-                        color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-                      }
-                    }
-                  }
-
-                }
-              }
-
-            }
-
-          }
-        }
-      }
-    }
-
     .vc-weeks {
       >.vc-weekday {
         background-color: map-deep-get($config,
@@ -950,6 +570,7 @@ a {
         & th,
         & td {
           height: 48px;
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
         }
       }
 
diff --git a/assets/scss/common/button.scss b/assets/scss/common/button.scss
index 0466fdc..b300118 100644
--- a/assets/scss/common/button.scss
+++ b/assets/scss/common/button.scss
@@ -144,10 +144,11 @@
       }
 
       &.ant-btn-danger {
+
         &.ant-btn-background-ghost {
-          color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");
-          border-color:map-deep-get($config, #{$theme}, "ant-btn-danger-border");
-          background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
+          color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
+          border-color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
+          // background: map-deep-get($config, #{$theme}, "ant-btn-danger-color") !important;
         }
       }
 
diff --git a/assets/scss/common/pagination.scss b/assets/scss/common/pagination.scss
index 503ccc4..7f41cb7 100644
--- a/assets/scss/common/pagination.scss
+++ b/assets/scss/common/pagination.scss
@@ -10,7 +10,7 @@
       // box-shadow: none !important;
       background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
       color: map-deep-get($config, #{$theme}, "paging-text") !important;
-      border: 0.5px solid #424242;
+      border: none;
 
       .ant-pagination-item-link {
         border: none;
@@ -19,13 +19,13 @@
     }
 
     .ant-pagination-item-active {
-      border-color: #1890ff !important;
+      border: 1px solid #1890ff !important;
       color: #1890ff !important
     }
 
     .ant-pagination-options-size-changer {
       .ant-select-selection {
-        border: 0.5px solid #424242;
+        border: 0.5px solid map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
         background: map-deep-get($config, #{$theme}, "paging-background") !important;
         color: map-deep-get($config, #{$theme}, "paging-text") !important;
       }
diff --git a/assets/scss/datepicker.scss b/assets/scss/datepicker.scss
index e2e4b89..651ceaa 100644
--- a/assets/scss/datepicker.scss
+++ b/assets/scss/datepicker.scss
@@ -66,6 +66,10 @@
           }
         }
       }
+      
+      .v-icon {
+        color: map-deep-get($config, #{$theme}, "v-icon-chevron-down") !important;
+      }
     }
 
     .v-input__custom {
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
new file mode 100644
index 0000000..d5dc948
--- /dev/null
+++ b/assets/scss/layout.scss
@@ -0,0 +1,441 @@
+.loading {
+  z-index: 99;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.4);
+  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
+}
+
+.v-spinner {
+  top: 50%;
+  left: 50%;
+}
+
+::v-deep {
+  .container--fluid {
+    .menu-container {
+      height:calc(100vh - 60px);
+      overflow-y: auto;
+      min-width: 200px;
+      
+      // v-navigation-drawer (sidebar)
+      .v-navigation-drawer {
+        box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
+        min-width: 200px !important;
+        // transform: none !important;
+        // visibility: visible !important;
+    
+        &--fixed {
+          z-index: 20;
+        }
+    
+        .home {
+          display: block;
+          line-height: 0;
+        }
+    
+        &__border {
+          display: none;
+        }
+    
+        &__append {
+          padding: 0 17px;
+          margin: 0 0 26px;
+    
+          >p {
+            margin-bottom: 0;
+          }
+        }
+    
+        .v-treeview {
+          padding: 0 10px;
+          box-sizing: border-box;
+    
+          .v-treeview-node__level {
+            width: 9px;
+          }
+    
+          >.v-treeview-node {
+            margin-top: 10px;
+    
+            &:first-child {
+              margin-top: 0;
+            }
+    
+            >.v-treeview-node__root {
+              min-height: 44px !important;
+            }
+          }
+    
+          .v-treeview-node {
+            .v-treeview-node__toggle {
+              display: none !important;
+            }
+    
+            &>.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 {
+              opacity: 0 !important;
+            }
+    
+            .v-treeview-node__children {
+              .v-treeview-node__label {
+                >button>span {
+                  font-size: 0.875rem;
+                }
+              }
+            }
+          }
+    
+          .v-treeview-node--click[aria-expanded="true"] {
+            &>.v-treeview-node__root:before {
+              opacity: 0 !important;
+            }
+          }
+    
+          .v-treeview-node[aria-expanded="true"] {
+            &>.v-treeview-node__root>.v-treeview-node__content
+            >.v-treeview-node__label>button {
+              >.anticon,
+              >.v-icon.mdi-chevron-down {
+                transform: rotate(-180deg);
+              }
+            }
+          }
+    
+          .v-treeview-node__label {
+            &>button {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              // justify-content: center;
+            }
+    
+            & .anticon,
+            & .v-icon.mdi-chevron-down {
+              margin-left: auto;
+              animation-duration: 0.5s;
+              font-size: 12px;
+            }
+          }
+        }
+    
+        .v-treeview-node--active {
+          &:before {
+            opacity: 0 !important;
+          }
+        }
+    
+        &.v-navigation-drawer--mini-variant {
+          .home {
+            display: none;
+          }
+    
+          .v-treeview-node__content {
+            margin-left: 0;
+          }
+    
+          .v-treeview-node__content span:not(.v-icon),
+          .v-treeview-node__root>button,
+          .v-treeview-node__level,
+          .v-treeview-node__content .v-icon.mdi-chevron-down,
+          .v-treeview-node__content .anticon {
+            display: none;
+          }
+    
+          .v-navigation-drawer__append {
+            display: none;
+          }
+        }
+      }
+     }
+  }
+
+  // router-tab header
+  .router-tab {
+    height: 100%;
+
+    &__header {
+      align-items: flex-end;
+      height: 52px;
+      margin: -5px -5px 0;
+      padding: 0 20px;
+      box-sizing: border-box;
+      border-bottom: none !important;
+    }
+
+    &-page {
+      height: 100%;
+    }
+
+    & .router-tab__container {
+      overflow-y: auto;
+      height: calc(100vh - 110px);
+      max-height: calc(100vh - 115px);
+      padding: 20px;
+    }
+
+    .router-tab__slot-end {
+      align-self: center;
+      display: flex;
+      align-items: center;
+
+      >* {
+        flex: none;
+        margin-right: 6px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .v-menu+.v-btn {
+        padding: 0 3px;
+      }
+
+      .v-btn {
+        border-radius: 4px;
+      }
+    }
+
+    .router-tab__nav {
+      padding-left: 0;
+    }
+
+    .router-tab__scroll {
+      height: 46px;
+    }
+
+    .router-tab__item {
+      height: 46px;
+      padding: 0 !important;
+
+      &:first-child {
+        border-left: none
+      }
+
+      &>span {
+        font-size: 14px;
+      }
+
+      &.is-active {
+        border-bottom: 2px solid;
+        &>span {
+          font-weight: 400;
+        }
+      }
+
+      &+.router-tab__item {
+        margin-left: 16px;
+      }
+      border:none;
+    }
+
+  }
+}
+
+@each $theme in dark, light {
+  @include theme($theme);
+  
+  .v-application.#{$theme}-mode {
+    ::v-deep {
+
+      ::-webkit-scrollbar {
+        width: 4px;
+        border-radius: 3px;
+      }
+  
+      ::-webkit-scrollbar-track {
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
+      }
+  
+      ::-webkit-scrollbar-thumb {
+        width: 4px;
+        border-radius: 3px;
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
+        background-clip: content-box;
+      }
+
+      .header {
+        background-color: map-deep-get($config, #{$theme}, "header-backgroud");
+        border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
+      }
+
+      .btn-header {
+        background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
+        border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
+        color: map-deep-get($config, #{$theme}, "v-btn-header-text");
+      }
+
+      .container--fluid {
+        background-color: map-deep-get($config, #{$theme}, "container-fluid");
+        .menu-container {
+          border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
+          .v-navigation-drawer__append {
+            >p {
+              color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
+            }
+          }
+        }
+      }
+  
+      .v-navigation-drawer {
+        background: map-deep-get($config, #{$theme}, "menu-bg-color");
+      }
+
+      .v-treeview {
+        .v-treeview-node+.v-treeview-node {
+          margin-top: 2px;
+        }
+  
+        .v-treeview-node__root+.v-treeview-node__children {
+          margin-top: 2px;
+        }
+  
+        &>.v-treeview-node {
+          .v-treeview-node__root {
+            border-radius: 8px;
+            &:hover {
+              background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
+            }
+            .v-treeview-node__content {
+              .v-icon,
+              .v-treeview-node__label {
+                color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+              }
+              
+              .anticon.anticon-down {
+                color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+              }
+            }
+          }
+  
+          &[aria-expanded="true"]{
+            // Level 1
+            &>.v-treeview-node__root {
+              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
+              border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+              color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+  
+              &:before {
+                background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
+              }
+  
+              .v-treeview-node__content {
+                .v-treeview-node__label {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+                }
+  
+                .v-icon:first-child,
+                .v-icon:first-child::before,
+                .anticon.anticon-down {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                }
+                
+              }
+            }
+  
+            &>.v-treeview-node__children {
+              // Level 2
+              .v-treeview-node__root {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+  
+                &:hover {
+                  background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
+                }
+                
+                .v-treeview-node__content {
+                  .v-icon,
+                  .v-icon::before {
+                    color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+                  }
+                }
+              }
+  
+              &>[aria-expanded="true"] >.v-treeview-node__root,
+              .v-treeview-node__root.v-treeview-node--active {
+                background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
+                .v-treeview-node__content {
+                  .v-treeview-node__label {
+                    color: map-deep-get($config, #{$theme}, "card-title-color");
+                  }
+  
+                  .v-icon,
+                  .v-icon::before,
+                  .anticon.anticon-down {
+                    color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                  }
+                }
+              }
+              
+              // Level 3
+              .v-treeview-node__children {
+                .v-treeview-node {
+                  >.v-treeview-node__root {
+                    
+                    *:hover,
+                    :hover {
+                      border-width: 0;
+                    }
+  
+                    &:hover {
+                      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");
+                        }
+                      }
+  
+                    }
+  
+                    &.v-treeview-node--active {
+                      // color: map-deep-get($config, #{$theme}, "card-title-color");
+                      background-color: rgba(0, 0, 0, 0);
+                      .v-treeview-node__content {
+                        .v-treeview-node__label {
+                          color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                        }
+        
+                        .v-icon,
+                        .v-icon::before,
+                        .anticon {
+                          color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                        }
+                      }
+                    }
+  
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "card-default-color");
+                      }
+                    }
+
+                  }
+                }
+  
+              }
+  
+            }
+          }
+        }
+      }
+
+    }
+  }
+}
diff --git a/assets/scss/var.scss b/assets/scss/var.scss
index 87b6f47..94607bc 100644
--- a/assets/scss/var.scss
+++ b/assets/scss/var.scss
@@ -166,7 +166,7 @@ $config: (
     ant-btn-primary-color: #212224,
     ant-btn-danger-bg:#D32029,
     ant-btn-danger-border:#D32029,
-    ant-btn-danger-color:#212224,
+    ant-btn-danger-color:#D32029,
     ant-btn-default-border:#FFFFFF2E,
     ant-btn-default-bg:#FFFFFF2E,
     ant-btn-default-color:#FFFFFFD9,
@@ -183,7 +183,8 @@ $config: (
     ant-btn-popup-color: #FFFFFFD9,
     ant-btn-popup-border: #424242,
     paging-background: #212224,
-    paging-text: #FFFFFFD9
+    paging-text: #FFFFFFD9,
+    icon-datepicker-color: #FFFFFF73,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -330,6 +331,7 @@ $config: (
     ant-btn-popup-color: #000000E0,
     ant-btn-popup-border: #D9D9D9,
     paging-background: #FFFFFF,
-    paging-text: #000000E0
+    paging-text: #000000E0,
+    icon-datepicker-color: #00000073,
   ),
 );
\ No newline at end of file
diff --git a/components/common/CheckBox.vue b/components/common/CheckBox.vue
index 31d40ca..f1f5fc2 100644
--- a/components/common/CheckBox.vue
+++ b/components/common/CheckBox.vue
@@ -61,10 +61,6 @@ export default {
       require: false,
       default: true
     },
-    labelClass: {
-      type: String,
-      require: false,
-    },
   },
   data() {
     return {
diff --git a/components/common/Datepicker.vue b/components/common/Datepicker.vue
index 466f567..b628db8 100644
--- a/components/common/Datepicker.vue
+++ b/components/common/Datepicker.vue
@@ -19,15 +19,18 @@
 					readonly
 					outlined
 				>
-					<template #append >
+					<!-- <template #append >
 						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+					</template> -->
+					<template v-slot:append>
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
 					</template>
 				</v-text-field>
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
-					<img :src="arrowIcon" alt="">
+					<img :src="arrowIcon">
 				</div>
 				<v-text-field
 					v-show="isRange"
@@ -40,7 +43,9 @@
 					outlined
 				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -209,9 +214,9 @@ export default {
 		},
 		arrowIcon() {
 			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
diff --git a/components/common/DatepickerTopView.vue b/components/common/DatepickerTopView.vue
index ff05ba1..731360a 100644
--- a/components/common/DatepickerTopView.vue
+++ b/components/common/DatepickerTopView.vue
@@ -5,10 +5,7 @@
 				<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
 					>mdi-record-circle</v-icon
 				> -->
-				<v-icon
-					small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-					>
+				<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
 					$icoBulletPoint
 				</v-icon>
 				{{ label }}
@@ -16,17 +13,11 @@
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
 			<div class="datepicker-container">
-				<v-text-field
-					id="startpicker"
-					ref="startpicker"
-					v-model="fromDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
+					<template v-slot:append>
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -36,18 +27,13 @@
 				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
-					v-show="isRange"
-					id="endpicker"
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -91,9 +77,9 @@ export default {
 			require: false,
 			default: false,
 		},
-		isRangeOption:{
-			type:Boolean,
-			require:false,
+		isRangeOption: {
+			type: Boolean,
+			require: false,
 			default: true
 		}
 	},
@@ -177,21 +163,23 @@ export default {
 				this.myOptions.viewFormat,
 			);
 		},
-		toDtChange(){
+		toDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
-				toDt : Utility.setFormatDate(
-				this.searchParam.toDt,
-				this.myOptions.viewFormat,
-			)};
+				isCheck: this.searchParam.isCheck,
+				toDt: Utility.setFormatDate(
+					this.searchParam.toDt,
+					this.myOptions.viewFormat,
+				)
+			};
 		},
-		fromDtChange(){
+		fromDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
-				fromDt : Utility.setFormatDate(
+				isCheck: this.searchParam.isCheck,
+				fromDt: Utility.setFormatDate(
 					this.searchParam.fromDt,
 					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
 		defaultRange() {
 			return this.searchParam.defaultRange
@@ -205,10 +193,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+			if (this.isDarkMode) {
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -242,24 +230,24 @@ export default {
 				this.endDatepickerInstance.setDate(new Date(newVal));
 			}
 		},
-		fromDtChange:{
-			deep:true,
-			handler(){
-				if(this.fromDtChange.isCheck){
+		fromDtChange: {
+			deep: true,
+			handler() {
+				if (this.fromDtChange.isCheck) {
 					this.fromDtChanged(this.fromDtChange.fromDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
 		},
-		toDtChange:{
-			deep:true,
-			handler(){
-				if(this.toDtChange.isCheck){
+		toDtChange: {
+			deep: true,
+			handler() {
+				if (this.toDtChange.isCheck) {
 					this.toDtChanged(this.toDtChange.toDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
@@ -370,7 +358,7 @@ export default {
 			if (
 				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				// if(this.cmCycleFlag){
 				this.setPageData({ isFind: true });
@@ -400,7 +388,7 @@ export default {
 			if (
 				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				this.setPageData({ isFind: true });
 			} else {
@@ -424,6 +412,7 @@ export default {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}
diff --git a/components/common/Grid.vue b/components/common/Grid.vue
index b9f5666..e77da25 100644
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@@ -158,7 +158,7 @@ export default {
 			}, 500);
 		},
 	},
-	created() {},
+	created() { },
 	async mounted() {
 		// console.log(this.dataPath);
 		if (this.gridName) {
@@ -166,9 +166,9 @@ export default {
 
 			this.scrollBody = document
 				.getElementsByClassName('tui-grid-rside-area')
-				[
-					document.getElementsByClassName('tui-grid-rside-area').length - 1
-				].getElementsByClassName('tui-grid-body-area')[0];
+			[
+				document.getElementsByClassName('tui-grid-rside-area').length - 1
+			].getElementsByClassName('tui-grid-body-area')[0];
 
 			this.scrollBody.addEventListener('scroll', e => {
 				this.gridScrollTop = e.target.scrollTop;
@@ -344,14 +344,14 @@ export default {
 					'row-removed',
 				);
 			}
-			
+
 			await this.gridInstance.invoke(
 				e.rowEditingFg != undefined ? 'setValue' : this.editorGrid ? 'finishEditing' : 'setValue',
 				rowIdxKey,
 				columnName,
 				value,
 			);
-			
+
 
 			if (isBaseRow) {
 				const isSameData = await this.compareData(editingData);
@@ -606,18 +606,20 @@ export default {
 			list.map(item => this.gridInstance.invoke('check', item));
 		},
 		refreshLayout() {
-			// console.log("---------DEBUG---refreshLayout: ");
-			this.gridInstance.invoke('refreshLayout');
+			setTimeout(() => {
+				this.gridInstance.invoke('refreshLayout');
+			}, 150);
+			// this.gridInstance.invoke('refreshLayout');
 		},
-		refreshGrid(){
+		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;
+			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)
+			// console.log('---------DEBUG---parentEl: ', parentEl)
 			// 	function refreshLayout(store, containerEl, parentEl) {
 			var dimension = store.dimension;
 			var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@@ -636,35 +638,35 @@ export default {
 			// 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)));
+				var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
+				this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
 			}
-    // }
+			// }
 		},
-    setOffsetTop(store, offsetTop) {
+		setOffsetTop(store, offsetTop) {
 			// console.log("---------DEBUG---setOffsetTop: ");
-      store.dimension.offsetTop = offsetTop;
-    },
-    setWidth(_a, width, autoWidth) {
+			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) {
+			var dimension = _a.dimension;
+			dimension.autoWidth = autoWidth;
+			dimension.width = width;
+		},
+		setHeaderHeight(store, height) {
 			// console.log("---------DEBUG---setHeaderHeight: ");
-      store.dimension.headerHeight = height;
-    },
-    setOffsetLeft(store, offsetLeft) {
+			store.dimension.headerHeight = height;
+		},
+		setOffsetLeft(store, offsetLeft) {
 			// console.log("---------DEBUG---setOffsetLeft: ");
-      store.dimension.offsetLeft = offsetLeft;
-    },
-		setHeight(_a,height){
+			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;
-    },
+			var dimension = _a.dimension;
+			var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
+			dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
+		},
 		sendSelectedRowData(eventRowKey) {
 			if (this.selectedRowDataWatchFlag) {
 				var rowKey =
diff --git a/components/common/PastRsltDatePicker.vue b/components/common/PastRsltDatePicker.vue
index 13dddae..208767c 100644
--- a/components/common/PastRsltDatePicker.vue
+++ b/components/common/PastRsltDatePicker.vue
@@ -2,25 +2,19 @@
 	<v-row class="search-box" align="center" no-gutters>
 		<v-col v-if="label" :cols="labelCols">
 			<label for="" class="search-box-label">
-				<v-icon small color="primary" 
-				:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-				>$icoBulletPoint</v-icon>
+				<v-icon small color="primary"
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div :class="['datepicker-container', customClass]"  >
-				<v-text-field
-					id="startpicker"
-					ref="startpicker"
-					v-model="fromDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
+			<div :class="['datepicker-container', customClass]">
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
+					<template #append>
+						<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
+						<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -29,18 +23,13 @@
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
-					v-show="isRange"
-					id="endpicker"
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
+					outlined>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -98,6 +87,7 @@ export default {
 			searchParam(state) {
 				return state.pageData[this.parentPrgmId];
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		myCmCycle() {
 			return this.searchParam.cmCycle;
@@ -138,10 +128,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+			if (this.isDarkMode) {
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -280,7 +270,7 @@ export default {
 			if (
 				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				// if(this.cmCycleFlag){
 				this.setPageData({ isFind: true });
@@ -310,7 +300,7 @@ export default {
 			if (
 				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				this.setPageData({ isFind: true });
 			} else {
@@ -334,6 +324,7 @@ export default {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}
diff --git a/components/common/button/ActionButtons.vue b/components/common/button/ActionButtons.vue
index ecf39ce..74fd539 100644
--- a/components/common/button/ActionButtons.vue
+++ b/components/common/button/ActionButtons.vue
@@ -2,9 +2,9 @@
 	<div class="d-flex justify-center align-center" 
 		:class="directionBtn === 'vertically'?'flex-row':'flex-column'" 
 		style="gap: 12px">
-		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" class="custom-action-btn">
+		<a-button   @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') : btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.remove :icons.add " class="custom-action-btn">
 		</a-button>
-		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add" class="custom-action-btn">
+		<a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') :btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.add :icons.remove" class="custom-action-btn">
 		</a-button>
 	</div>
 </template>
diff --git a/components/common/chartoptions/GaugeChart.js b/components/common/chartoptions/GaugeChart.js
index d29225c..e2917cc 100644
--- a/components/common/chartoptions/GaugeChart.js
+++ b/components/common/chartoptions/GaugeChart.js
@@ -2,15 +2,13 @@
 export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
     const colorRanges = isDarkMode
         ? [
-            [0.375, '#49AA19'], // Dark Green
-            // [0.5, '#B8860B'],   // Dark Yellow
-            [0.625, '#D89614'], // Dark Orange
+            [60 / 160, '#49AA19'], // Dark Green
+            [100 / 160, '#D89614'], // Dark Orange
             [1, '#D32029'],     // Dark Red
         ]
         : [
-            [0.375, '#52C41A'], // Light Green
-            // [0.5, '#FFD700'],   // Light Yellow
-            [0.625, '#FAAD14'], // Light Orange
+            [60 / 160, '#52C41A'], // Light Green
+            [100 / 160, '#FAAD14'], // Light Orange
             [1, '#F5222D'],     // Light Red
         ];
     // Old color range
@@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 endAngle: -45,
                 min: min,
                 max: max,
+                splitNumber: 8,
                 // progress: {
                 //   show: true,
                 //   width: 15,
diff --git a/components/common/chartoptions/LineChart.js b/components/common/chartoptions/LineChart.js
index 66c517f..a7bc322 100644
--- a/components/common/chartoptions/LineChart.js
+++ b/components/common/chartoptions/LineChart.js
@@ -34,6 +34,8 @@ export default function getLineChartOption({
         legend: {
             // data: legendData,
             icon: 'circle',
+            itemWidth: 15, // Width of the legend icon
+            itemHeight: 15, 
             top: '0%',
             right: '5%',
             orient: 'horizontal',
diff --git a/components/common/modal/ChangeUserPswdPopPage.vue b/components/common/modal/ChangeUserPswdPopPage.vue
index 1411f52..c11bd18 100644
--- a/components/common/modal/ChangeUserPswdPopPage.vue
+++ b/components/common/modal/ChangeUserPswdPopPage.vue
@@ -3,12 +3,13 @@
 		<v-col v-if="item.label" :cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4">
 			<label for="" class="search-box-label">
 				<v-icon
-					x-small
-					:color="item.required ? '#fb8200' : 'primary'"
-					class="mr-1"
-					>mdi-record-circle</v-icon
+					v-if="item.iconShow"
+					small
+					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
+					>$icoBulletPoint</v-icon
 				>
 				{{ item.label }}
+				<span v-if="item.essential">*</span>
 			</label>
 			<!-- <label for="" class="search-box-label ft-size_14 ft-clr_g-c">
         {{ item.label }}
@@ -39,12 +40,12 @@
 			</template>
 		</v-col>
 
-		<v-dialog v-model="dialog" scrollable width="540px">
+		<v-dialog v-model="dialog" scrollable width="504px">
 			<v-card style="height: 100%">
-				<v-card-title>
-					<span class="custom-title-4">비밀번호 {{ isPassword }}</span>
+				<v-card-title class="px-4">
+					<span class="custom-title-4" style="padding-left: 1px;">비밀번호 {{ isPassword }}</span>
 				</v-card-title>
-				<v-card-text class="pb-4">
+				<v-card-text class="pb-4 px-3">
 					<v-col>
 						<label for="" class="search-box-label">
 							{{ isPassword }}할 비밀번호를 입력하세요
diff --git a/components/common/modal/ElecPowChrgPop.vue b/components/common/modal/ElecPowChrgPop.vue
index 56efac4..7d16d41 100644
--- a/components/common/modal/ElecPowChrgPop.vue
+++ b/components/common/modal/ElecPowChrgPop.vue
@@ -17,20 +17,24 @@
 				{{ item.label }}
 			</label>
 		</v-col>
-		<v-col :cols="label ? item.textCols : ''">
+		<v-col :cols="label ? item.textCols : ''" class="py-0">
 			<!-- <v-col :cols="label ? 9 : ''"> -->
 			<!-- :value="textfield" -->
 			<v-text-field
 				readonly
 				v-model="selectValue"
-				append-icon="mdi-magnify"
 				class="v-input__custom"
 				@click="dialog = !dialog"
 				outlined
 				:hide-details="true"
 				:disabled="item.disabled || false"
 				:required="item.required || false"
-			></v-text-field>
+			>
+			<template v-slot:append>
+				<!-- Custom SVG icon -->
+				<v-icon>$icoSearch</v-icon>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<!-- <v-row justify="center"> -->
diff --git a/components/common/modal/EvtObjPop.vue b/components/common/modal/EvtObjPop.vue
index 14d33da..1b8ba9f 100644
--- a/components/common/modal/EvtObjPop.vue
+++ b/components/common/modal/EvtObjPop.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-row class="search-box no-gutters" align="center">
+	<v-row class="search-box" align="center">
 		<v-col :cols="option.labelCols" class="py-0">
 			<label for="" class="search-box-label">
 				<v-icon v-if="item.iconShow" small
diff --git a/components/common/modal/ReadPlcPop.vue b/components/common/modal/ReadPlcPop.vue
index 0ea0e67..0046098 100644
--- a/components/common/modal/ReadPlcPop.vue
+++ b/components/common/modal/ReadPlcPop.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-row class="search-box" align="center">
+	<v-row class="search-box" align="center" no-gutters>
 		<!-- <v-col v-if="label" cols="2"> -->
 		<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
 			<label for="" class="search-box-label">
diff --git a/components/icons/anticonAppStore.vue b/components/icons/anticonAppStore.vue
new file mode 100644
index 0000000..a60300f
--- /dev/null
+++ b/components/icons/anticonAppStore.vue
@@ -0,0 +1,7 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.143 1.42969H1.71443C1.55728 1.42969 1.42871 1.55826 1.42871 1.7154V7.14397C1.42871 7.30112 1.55728 7.42969 1.71443 7.42969H7.143C7.30014 7.42969 7.42871 7.30112 7.42871 7.14397V1.7154C7.42871 1.55826 7.30014 1.42969 7.143 1.42969ZM6.21443 6.2154H2.643V2.64397H6.21443V6.2154ZM14.2859 1.42969H8.85728C8.70014 1.42969 8.57157 1.55826 8.57157 1.7154V7.14397C8.57157 7.30112 8.70014 7.42969 8.85728 7.42969H14.2859C14.443 7.42969 14.5716 7.30112 14.5716 7.14397V1.7154C14.5716 1.55826 14.443 1.42969 14.2859 1.42969ZM13.3573 6.2154H9.78586V2.64397H13.3573V6.2154ZM7.143 8.57255H1.71443C1.55728 8.57255 1.42871 8.70112 1.42871 8.85826V14.2868C1.42871 14.444 1.55728 14.5725 1.71443 14.5725H7.143C7.30014 14.5725 7.42871 14.444 7.42871 14.2868V8.85826C7.42871 8.70112 7.30014 8.57255 7.143 8.57255ZM6.21443 13.3583H2.643V9.78683H6.21443V13.3583ZM14.2859 8.57255H8.85728C8.70014 8.57255 8.57157 8.70112 8.57157 8.85826V14.2868C8.57157 14.444 8.70014 14.5725 8.85728 14.5725H14.2859C14.443 14.5725 14.5716 14.444 14.5716 14.2868V8.85826C14.5716 8.70112 14.443 8.57255 14.2859 8.57255ZM13.3573 13.3583H9.78586V9.78683H13.3573V13.3583Z" 
+            fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonBulb.vue b/components/icons/anticonBulb.vue
new file mode 100644
index 0000000..be7c129
--- /dev/null
+++ b/components/icons/anticonBulb.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8.14258 14.7143H3.85686C3.77829 14.7143 3.71401 14.7786 3.71401 14.8571V15.4286C3.71401 15.7446 3.96936 16 4.28544 16H7.71401C8.03008 16 8.28544 15.7446 8.28544 15.4286V14.8571C8.28544 14.7786 8.22115 14.7143 8.14258 14.7143ZM5.99972 0C2.76579 0 0.142578 2.62321 0.142578 5.85714C0.142578 8.025 1.32115 9.91786 3.07115 10.9304V13C3.07115 13.3161 3.32651 13.5714 3.64258 13.5714H8.35686C8.67294 13.5714 8.92829 13.3161 8.92829 13V10.9304C10.6783 9.91786 11.8569 8.025 11.8569 5.85714C11.8569 2.62321 9.23365 0 5.99972 0ZM8.28365 9.81786L7.64258 10.1893V12.2857H4.35686V10.1893L3.71579 9.81786C2.31044 9.00536 1.42829 7.50893 1.42829 5.85714C1.42829 3.33214 3.47472 1.28571 5.99972 1.28571C8.52472 1.28571 10.5711 3.33214 10.5711 5.85714C10.5711 7.50893 9.68901 9.00536 8.28365 9.81786Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonDesktop.vue b/components/icons/anticonDesktop.vue
new file mode 100644
index 0000000..8434eae
--- /dev/null
+++ b/components/icons/anticonDesktop.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.4286 0.359253H0.571429C0.255357 0.359253 0 0.61461 0 0.930682V9.78782C0 10.1039 0.255357 10.3593 0.571429 10.3593H7.35714V12.3593H4.28571C4.12857 12.3593 4 12.4878 4 12.645V13.5021C4 13.5807 4.06429 13.645 4.14286 13.645H11.8571C11.9357 13.645 12 13.5807 12 13.5021V12.645C12 12.4878 11.8714 12.3593 11.7143 12.3593H8.64286V10.3593H15.4286C15.7446 10.3593 16 10.1039 16 9.78782V0.930682C16 0.61461 15.7446 0.359253 15.4286 0.359253ZM14.7143 9.07354H1.28571V1.64497H14.7143V9.07354Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonDrag.vue b/components/icons/anticonDrag.vue
new file mode 100644
index 0000000..bcc46cc
--- /dev/null
+++ b/components/icons/anticonDrag.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.0943 7.89787L12.8157 6.09966C12.7967 6.08466 12.7738 6.07534 12.7496 6.07276C12.7255 6.07018 12.7012 6.07444 12.6794 6.08507C12.6576 6.09569 12.6392 6.11224 12.6264 6.13282C12.6135 6.15341 12.6067 6.17719 12.6068 6.20144V7.3568H8.64251V3.39251H9.79966C9.9068 3.39251 9.96751 3.26751 9.90144 3.18359L8.10144 0.905014C8.08953 0.889595 8.07424 0.877112 8.05675 0.868523C8.03926 0.859935 8.02003 0.855469 8.00055 0.855469C7.98106 0.855469 7.96184 0.859935 7.94435 0.868523C7.92686 0.877112 7.91157 0.889595 7.89966 0.905014L6.09966 3.18359C6.08466 3.20265 6.07534 3.22555 6.07276 3.24967C6.07018 3.27379 6.07444 3.29815 6.08507 3.31995C6.09569 3.34176 6.11224 3.36013 6.13282 3.37296C6.15341 3.3858 6.17719 3.39257 6.20144 3.39251H7.3568V7.3568H3.39251V6.19966C3.39251 6.09252 3.26751 6.0318 3.18359 6.09787L0.905014 7.89787C0.889595 7.90979 0.877112 7.92508 0.868523 7.94256C0.859935 7.96005 0.855469 7.97928 0.855469 7.99877C0.855469 8.01825 0.859935 8.03748 0.868523 8.05497C0.877112 8.07246 0.889595 8.08774 0.905014 8.09966L3.1818 9.89966C3.26573 9.96573 3.39073 9.9068 3.39073 9.79787V8.64252H7.35501V12.6068H6.19787C6.09073 12.6068 6.03001 12.7318 6.09609 12.8157L7.89609 15.0925C7.94787 15.1586 8.04787 15.1586 8.09787 15.0925L9.89787 12.8157C9.96394 12.7318 9.90501 12.6068 9.79608 12.6068H8.64251V8.64252H12.6068V9.79966C12.6068 9.9068 12.7318 9.96752 12.8157 9.90144L15.0925 8.10144C15.1079 8.08937 15.1203 8.07398 15.129 8.05644C15.1376 8.03889 15.1422 8.01964 15.1423 8.00009C15.1425 7.98054 15.1383 7.9612 15.13 7.94351C15.1216 7.92582 15.1095 7.91022 15.0943 7.89787Z" fill="currentColor"/>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonFileText.vue b/components/icons/anticonFileText.vue
new file mode 100644
index 0000000..3de4609
--- /dev/null
+++ b/components/icons/anticonFileText.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.1174 4.01071L9.27458 0.167857C9.16744 0.0607143 9.0228 0 8.87101 0H1.2853C0.969224 0 0.713867 0.255357 0.713867 0.571429V15.4286C0.713867 15.7446 0.969224 16 1.2853 16H12.7139C13.0299 16 13.2853 15.7446 13.2853 15.4286V4.41607C13.2853 4.26429 13.2246 4.11786 13.1174 4.01071ZM11.9674 4.67857H8.60673V1.31786L11.9674 4.67857ZM11.9996 14.7143H1.99958V1.28571H7.39244V5.14286C7.39244 5.34177 7.47146 5.53254 7.61211 5.67319C7.75276 5.81384 7.94353 5.89286 8.14244 5.89286H11.9996V14.7143ZM6.85673 9.89286H3.57101C3.49244 9.89286 3.42815 9.95714 3.42815 10.0357V10.8929C3.42815 10.9714 3.49244 11.0357 3.57101 11.0357H6.85673C6.9353 11.0357 6.99958 10.9714 6.99958 10.8929V10.0357C6.99958 9.95714 6.9353 9.89286 6.85673 9.89286ZM3.42815 7.60714V8.46429C3.42815 8.54286 3.49244 8.60714 3.57101 8.60714H10.4282C10.5067 8.60714 10.571 8.54286 10.571 8.46429V7.60714C10.571 7.52857 10.5067 7.46429 10.4282 7.46429H3.57101C3.49244 7.46429 3.42815 7.52857 3.42815 7.60714Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonLineChart.vue b/components/icons/anticonLineChart.vue
new file mode 100644
index 0000000..f74ac70
--- /dev/null
+++ b/components/icons/anticonLineChart.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.714 12.0006H1.42829V0.857701C1.42829 0.779129 1.36401 0.714844 1.28544 0.714844H0.285435C0.206864 0.714844 0.142578 0.779129 0.142578 0.857701V13.1434C0.142578 13.222 0.206864 13.2863 0.285435 13.2863H13.714C13.7926 13.2863 13.8569 13.222 13.8569 13.1434V12.1434C13.8569 12.0648 13.7926 12.0006 13.714 12.0006ZM3.31758 9.2452C3.37294 9.30056 3.46222 9.30056 3.51936 9.2452L5.98901 6.78806L8.26758 9.08092C8.32294 9.13627 8.41401 9.13627 8.46937 9.08092L13.3872 4.16484C13.4426 4.10949 13.4426 4.01842 13.3872 3.96306L12.6801 3.25592C12.6532 3.22933 12.617 3.21442 12.5792 3.21442C12.5414 3.21442 12.5051 3.22933 12.4783 3.25592L8.37115 7.36127L6.09615 5.07199C6.0693 5.0454 6.03304 5.03049 5.99526 5.03049C5.95747 5.03049 5.92122 5.0454 5.89437 5.07199L2.61222 8.33449C2.58564 8.36134 2.57072 8.39759 2.57072 8.43538C2.57072 8.47316 2.58564 8.50942 2.61222 8.53627L3.31758 9.2452Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonMessage.vue b/components/icons/anticonMessage.vue
new file mode 100644
index 0000000..a2bd9fa
--- /dev/null
+++ b/components/icons/anticonMessage.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.14296 8C7.14296 8.22733 7.23326 8.44535 7.39401 8.60609C7.55475 8.76684 7.77277 8.85714 8.0001 8.85714C8.22743 8.85714 8.44545 8.76684 8.60619 8.60609C8.76694 8.44535 8.85724 8.22733 8.85724 8C8.85724 7.77267 8.76694 7.55465 8.60619 7.39391C8.44545 7.23316 8.22743 7.14286 8.0001 7.14286C7.77277 7.14286 7.55475 7.23316 7.39401 7.39391C7.23326 7.55465 7.14296 7.77267 7.14296 8ZM10.7144 8C10.7144 8.22733 10.8047 8.44535 10.9654 8.60609C11.1262 8.76684 11.3442 8.85714 11.5715 8.85714C11.7989 8.85714 12.0169 8.76684 12.1776 8.60609C12.3384 8.44535 12.4287 8.22733 12.4287 8C12.4287 7.77267 12.3384 7.55465 12.1776 7.39391C12.0169 7.23316 11.7989 7.14286 11.5715 7.14286C11.3442 7.14286 11.1262 7.23316 10.9654 7.39391C10.8047 7.55465 10.7144 7.77267 10.7144 8ZM3.57153 8C3.57153 8.22733 3.66184 8.44535 3.82258 8.60609C3.98333 8.76684 4.20134 8.85714 4.42867 8.85714C4.656 8.85714 4.87402 8.76684 5.03476 8.60609C5.19551 8.44535 5.28582 8.22733 5.28582 8C5.28582 7.77267 5.19551 7.55465 5.03476 7.39391C4.87402 7.23316 4.656 7.14286 4.42867 7.14286C4.20134 7.14286 3.98333 7.23316 3.82258 7.39391C3.66184 7.55465 3.57153 7.77267 3.57153 8ZM15.3787 4.9C14.9751 3.94107 14.3965 3.08036 13.659 2.34107C12.9267 1.60607 12.0573 1.02182 11.1001 0.621429C10.118 0.208929 9.0751 0 8.0001 0H7.96439C6.88224 0.00535714 5.83403 0.219643 4.84832 0.641071C3.89931 1.04557 3.03807 1.63085 2.3126 2.36429C1.58224 3.10179 1.00903 3.95893 0.612601 4.91429C0.201887 5.90357 -0.00525583 6.95536 0.000101308 8.0375C0.00616068 9.27763 0.299551 10.4995 0.857244 11.6071V14.3214C0.857244 14.5393 0.943787 14.7482 1.09783 14.9023C1.25188 15.0563 1.46082 15.1429 1.67867 15.1429H4.39474C5.50241 15.7006 6.72426 15.9939 7.96439 16H8.00189C9.07153 16 10.109 15.7929 11.0858 15.3875C12.0382 14.9919 12.9043 14.4144 13.6358 13.6875C14.3733 12.9571 14.9537 12.1036 15.359 11.1518C15.7805 10.1661 15.9947 9.11786 16.0001 8.03572C16.0055 6.94821 15.7947 5.89286 15.3787 4.9ZM12.6805 12.7214C11.4287 13.9607 9.76796 14.6429 8.0001 14.6429H7.96974C6.89296 14.6375 5.82332 14.3696 4.87867 13.8661L4.72867 13.7857H2.21439V11.2714L2.13403 11.1214C1.63046 10.1768 1.3626 9.10714 1.35724 8.03036C1.3501 6.25 2.03046 4.57857 3.27867 3.31964C4.5251 2.06071 6.19117 1.36429 7.97153 1.35714H8.00189C8.89474 1.35714 9.76081 1.53036 10.5769 1.87321C11.3733 2.20714 12.0876 2.6875 12.7019 3.30179C13.3144 3.91429 13.7965 4.63036 14.1305 5.42679C14.4769 6.25179 14.6501 7.12679 14.6465 8.03036C14.6358 9.80893 13.9376 11.475 12.6805 12.7214Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonNoteExpand.vue b/components/icons/anticonNoteExpand.vue
new file mode 100644
index 0000000..e5ba547
--- /dev/null
+++ b/components/icons/anticonNoteExpand.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.8571 8.78318C15.9357 8.78318 16 8.71889 16 8.64032V7.64032C16 7.56175 15.9357 7.49746 15.8571 7.49746H4.17857C4.05067 7.18077 3.83102 6.90955 3.54782 6.71864C3.26463 6.52772 2.93082 6.42582 2.58929 6.42603C1.64286 6.42603 0.875 7.19389 0.875 8.14032C0.875 9.08675 1.64286 9.8546 2.58929 9.8546C3.30893 9.8546 3.925 9.41175 4.17857 8.78318H6.8625V11.4975C6.8625 12.4832 7.6625 13.2832 8.64821 13.2832H15.8571C15.9357 13.2832 16 13.2189 16 13.1403V12.1403C16 12.0617 15.9357 11.9975 15.8571 11.9975H8.64821C8.37143 11.9975 8.14821 11.7742 8.14821 11.4975V8.78318H15.8571ZM7 3.99746H11.7143V5.75103C11.7143 5.89568 11.8839 5.9796 11.9964 5.88853L15.0768 3.45639C15.1661 3.38675 15.1661 3.25282 15.0768 3.18318L11.9964 0.749247C11.8821 0.658175 11.7143 0.740318 11.7143 0.886747V2.64032H7C6.92143 2.64032 6.85714 2.7046 6.85714 2.78318V3.8546C6.85714 3.93318 6.92143 3.99746 7 3.99746Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonPieChart.vue b/components/icons/anticonPieChart.vue
new file mode 100644
index 0000000..168c95e
--- /dev/null
+++ b/components/icons/anticonPieChart.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14.2854 8.10545H7.89259V1.7126C7.89259 1.63402 7.8283 1.56974 7.74973 1.56974H7.28545C6.34741 1.5682 5.41833 1.75216 4.55165 2.11103C3.68497 2.4699 2.89781 2.99659 2.23545 3.66081C1.58314 4.3111 1.06339 5.08193 0.705089 5.93045C0.332241 6.81052 0.140919 7.75681 0.142589 8.7126C0.141053 9.65063 0.32501 10.5797 0.683878 11.4464C1.04275 12.3131 1.56944 13.1002 2.23366 13.7626C2.88902 14.418 3.6533 14.934 4.5033 15.293C5.38337 15.6658 6.32966 15.8571 7.28545 15.8555C8.22348 15.857 9.15257 15.673 10.0192 15.3142C10.8859 14.9553 11.6731 14.4286 12.3354 13.7644C12.9908 13.109 13.5069 12.3447 13.8658 11.4947C14.2387 10.6147 14.43 9.66838 14.4283 8.7126V8.24831C14.4283 8.16974 14.364 8.10545 14.2854 8.10545ZM11.4587 12.9233C10.9057 13.472 10.2499 13.9061 9.52892 14.2009C8.80791 14.4957 8.03581 14.6453 7.25688 14.6412C5.68366 14.634 4.20509 14.018 3.09259 12.9055C1.97295 11.7858 1.35687 10.2965 1.35687 8.7126C1.35687 7.12867 1.97295 5.63938 3.09259 4.51974C4.06759 3.54474 5.32295 2.9501 6.6783 2.81438V9.31974H13.1837C13.0462 10.6822 12.4462 11.9447 11.4587 12.9233ZM15.8569 7.1126L15.8104 6.60903C15.6587 4.96438 14.9283 3.4126 13.7533 2.24117C12.5775 1.06759 11.0289 0.341284 9.37473 0.187596L8.86938 0.141167C8.78545 0.134025 8.71402 0.19831 8.71402 0.282239V7.14117C8.71402 7.21974 8.7783 7.28402 8.85688 7.28402L15.714 7.26617C15.7979 7.26617 15.864 7.19474 15.8569 7.1126ZM9.92473 6.07331V1.49117C11.0496 1.72661 12.0819 2.2837 12.8962 3.09474C13.7122 3.90902 14.2712 4.94474 14.5033 6.06081L9.92473 6.07331Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonSearch.vue b/components/icons/anticonSearch.vue
new file mode 100644
index 0000000..6f24fc9
--- /dev/null
+++ b/components/icons/anticonSearch.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.1003 14.1183L10.4628 9.4808C11.1824 8.55045 11.5717 7.41295 11.5717 6.21652C11.5717 4.78438 11.0128 3.44152 10.0021 2.42902C8.99135 1.41652 7.64492 0.859375 6.21456 0.859375C4.78421 0.859375 3.43778 1.4183 2.42706 2.42902C1.41456 3.43973 0.857422 4.78438 0.857422 6.21652C0.857422 7.64688 1.41635 8.9933 2.42706 10.004C3.43778 11.0165 4.78242 11.5737 6.21456 11.5737C7.41099 11.5737 8.54671 11.1844 9.47707 10.4665L14.1146 15.1022C14.1282 15.1158 14.1443 15.1266 14.1621 15.134C14.1799 15.1414 14.1989 15.1452 14.2181 15.1452C14.2374 15.1452 14.2564 15.1414 14.2742 15.134C14.292 15.1266 14.3081 15.1158 14.3217 15.1022L15.1003 14.3254C15.1139 14.3118 15.1247 14.2957 15.132 14.2779C15.1394 14.2602 15.1432 14.2411 15.1432 14.2219C15.1432 14.2026 15.1394 14.1836 15.132 14.1658C15.1247 14.148 15.1139 14.1319 15.1003 14.1183ZM9.04314 9.04509C8.28599 9.80045 7.28242 10.2165 6.21456 10.2165C5.14671 10.2165 4.14314 9.80045 3.38599 9.04509C2.63064 8.28795 2.21456 7.28438 2.21456 6.21652C2.21456 5.14866 2.63064 4.1433 3.38599 3.38795C4.14314 2.63259 5.14671 2.21652 6.21456 2.21652C7.28242 2.21652 8.28778 2.6308 9.04314 3.38795C9.79849 4.14509 10.2146 5.14866 10.2146 6.21652C10.2146 7.28438 9.79849 8.28973 9.04314 9.04509Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonSetting.vue b/components/icons/anticonSetting.vue
new file mode 100644
index 0000000..13cd331
--- /dev/null
+++ b/components/icons/anticonSetting.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.3712 10.033L14.2016 9.03304C14.257 8.69375 14.2855 8.34732 14.2855 8.00089C14.2855 7.65446 14.257 7.30804 14.2016 6.96875L15.3712 5.96875C15.4595 5.89323 15.5226 5.79264 15.5523 5.68035C15.5819 5.56807 15.5767 5.44942 15.5373 5.34018L15.5212 5.29375C15.1992 4.3938 14.7171 3.55953 14.098 2.83125L14.0659 2.79375C13.9908 2.70545 13.8907 2.64198 13.7788 2.61169C13.6669 2.58141 13.5485 2.58574 13.4391 2.62411L11.9873 3.14018C11.4516 2.70089 10.8534 2.35446 10.207 2.11161L9.92659 0.59375C9.90544 0.47954 9.85004 0.374469 9.76775 0.292496C9.68546 0.210524 9.58017 0.15553 9.46588 0.134821L9.41767 0.125893C8.48731 -0.0419643 7.50874 -0.0419643 6.57838 0.125893L6.53017 0.134821C6.41587 0.15553 6.31059 0.210524 6.2283 0.292496C6.146 0.374469 6.0906 0.47954 6.06945 0.59375L5.78731 2.11875C5.14604 2.36166 4.54886 2.7079 4.01945 3.14375L2.55695 2.62411C2.4476 2.58543 2.32908 2.58095 2.21712 2.61125C2.10516 2.64155 2.00508 2.7052 1.93017 2.79375L1.89802 2.83125C1.27971 3.56004 0.797622 4.39417 0.474808 5.29375L0.458737 5.34018C0.37838 5.56339 0.444451 5.81339 0.624808 5.96875L1.80874 6.97946C1.75338 7.31518 1.72659 7.65804 1.72659 7.99911C1.72659 8.34196 1.75338 8.68482 1.80874 9.01875L0.624808 10.0295C0.536586 10.105 0.473445 10.2056 0.44378 10.3179C0.414115 10.4301 0.419331 10.5488 0.458737 10.658L0.474808 10.7045C0.798023 11.6045 1.27659 12.4348 1.89802 13.167L1.93017 13.2045C2.00526 13.2928 2.10535 13.3562 2.21724 13.3865C2.32913 13.4168 2.44757 13.4125 2.55695 13.3741L4.01945 12.8545C4.55159 13.292 5.14624 13.6384 5.78731 13.8795L6.06945 15.4045C6.0906 15.5187 6.146 15.6237 6.2283 15.7057C6.31059 15.7877 6.41587 15.8427 6.53017 15.8634L6.57838 15.8723C7.51728 16.0411 8.47876 16.0411 9.41767 15.8723L9.46588 15.8634C9.58017 15.8427 9.68546 15.7877 9.76775 15.7057C9.85004 15.6237 9.90544 15.5187 9.92659 15.4045L10.207 13.8866C10.8531 13.6444 11.4547 13.2968 11.9873 12.858L13.4391 13.3741C13.5484 13.4128 13.667 13.4173 13.7789 13.387C13.8909 13.3567 13.991 13.293 14.0659 13.2045L14.098 13.167C14.7194 12.433 15.198 11.6045 15.5212 10.7045L15.5373 10.658C15.6177 10.4384 15.5516 10.1884 15.3712 10.033ZM12.9337 7.17946C12.9784 7.44911 13.0016 7.72589 13.0016 8.00268C13.0016 8.27946 12.9784 8.55625 12.9337 8.82589L12.8159 9.54197L14.1498 10.683C13.9476 11.1489 13.6923 11.5899 13.3891 11.9973L11.732 11.4098L11.1712 11.8705C10.7444 12.2205 10.2695 12.4955 9.75516 12.6884L9.07481 12.9438L8.75516 14.6759C8.25083 14.733 7.74165 14.733 7.23731 14.6759L6.91767 12.9402L6.24267 12.6813C5.73374 12.4884 5.26052 12.2134 4.83731 11.8652L4.27659 11.4027L2.60874 11.9955C2.30517 11.5866 2.05159 11.1455 1.84802 10.6813L3.19624 9.52946L3.08017 8.81518C3.03731 8.54911 3.01409 8.27411 3.01409 8.00268C3.01409 7.72946 3.03552 7.45625 3.08017 7.19018L3.19624 6.47589L1.84802 5.32411C2.04981 4.85804 2.30517 4.41875 2.60874 4.00982L4.27659 4.60268L4.83731 4.14018C5.26052 3.79196 5.73374 3.51696 6.24267 3.32411L6.91945 3.06875L7.23909 1.33304C7.74088 1.27589 8.25338 1.27589 8.75695 1.33304L9.07659 3.06518L9.75695 3.32054C10.2695 3.51339 10.7462 3.78839 11.173 4.13839L11.7337 4.59911L13.3909 4.01161C13.6945 4.42054 13.948 4.86161 14.1516 5.32589L12.8177 6.46696L12.9337 7.17946ZM7.99981 4.68125C6.26409 4.68125 4.85695 6.08839 4.85695 7.82411C4.85695 9.55982 6.26409 10.967 7.99981 10.967C9.73552 10.967 11.1427 9.55982 11.1427 7.82411C11.1427 6.08839 9.73552 4.68125 7.99981 4.68125ZM9.41409 9.23839C9.2286 9.42442 9.00815 9.57194 8.76543 9.67246C8.52271 9.77298 8.26252 9.82452 7.99981 9.82411C7.46588 9.82411 6.96409 9.61518 6.58552 9.23839C6.39949 9.0529 6.25198 8.83245 6.15146 8.58973C6.05094 8.34701 5.9994 8.08682 5.99981 7.82411C5.99981 7.29018 6.20874 6.78839 6.58552 6.40982C6.96409 6.03125 7.46588 5.82411 7.99981 5.82411C8.53374 5.82411 9.03552 6.03125 9.41409 6.40982C9.60012 6.59532 9.74764 6.81577 9.84816 7.05848C9.94868 7.3012 10.0002 7.5614 9.99981 7.82411C9.99981 8.35804 9.79088 8.85982 9.41409 9.23839Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/icoSend.vue b/components/icons/icoSend.vue
index d7ac958..70591f0 100644
--- a/components/icons/icoSend.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/pages/ems/EccInfo/EccAddInfoTab.vue b/components/pages/ems/EccInfo/EccAddInfoTab.vue
index 312c78c..8109a93 100644
--- a/components/pages/ems/EccInfo/EccAddInfoTab.vue
+++ b/components/pages/ems/EccInfo/EccAddInfoTab.vue
@@ -4,7 +4,7 @@
 			class="d-flex justify-space-between align-center"
 			style="height: 80px;"
 		>
-			<span class="txt custom-title-4-new">공정 추가 정보</span>
+			<span class="txt custom-subtitle-tab">공정 추가 정보</span>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"
diff --git a/components/pages/ems/EccInfo/EccIaoTab.vue b/components/pages/ems/EccInfo/EccIaoTab.vue
index 8105e40..e8786f9 100644
--- a/components/pages/ems/EccInfo/EccIaoTab.vue
+++ b/components/pages/ems/EccInfo/EccIaoTab.vue
@@ -4,14 +4,14 @@
 			class="d-flex justify-space-between align-center"
 			style="height: 80px;"
 		>
-			<span class="txt custom-title-4-new">공정 입출력 정보</span>
+			<span class="txt custom-subtitle-tab">공정 입출력 정보</span>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 700px);">
+		<div ref="gridParent" style="height: calc(90vh - 700px);">
 			<component
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
@@ -21,7 +21,7 @@
 				:innerTabGridInfo="innerTabGridInfo"
 			/>
 		</div>
-		<div style="height: 60vh;" class="mt-5">
+		<div style="height: 25vh;" class="mt-5">
 			<component
 				:is="'Form'"
 				:bindingData="gridName"
@@ -98,17 +98,19 @@ export default {
 	watch: {
 		selectedObjId(val) {
 			if (val === 'TAG') {
-				this.detailList[2].class = 'py-2 d-none';
-				this.detailList[3].class = 'py-2 d-none';
-				this.detailList[4].class = 'py-2';
-				this.detailList[5].class = 'py-2';
+				this.detailList[1].class = 'd-none';
+				this.detailList[2].class = 'd-block pl-4';
+				this.detailList[3].class = 'd-block';
 			} else {
 				// }else if(val==="READ_PLC"){
-				this.detailList[5].class = 'py-2 d-none';
-				this.detailList[4].class = 'py-2 d-none';
-				this.detailList[3].class = 'py-2';
-				this.detailList[2].class = 'py-2';
+				this.detailList[3].class = 'd-block';
+				this.detailList[2].class = 'd-none';
+				this.detailList[1].class = 'd-block pl-4';
 			}
+			this.detailList[4].class = 'pl-4 mt-2';
+			
+			console.log(val)
+			console.log(this.detailList)
 		},
 	},
 	created() {},
@@ -188,6 +190,7 @@ export default {
 				{ header: '대상 명', name: 'objNm', width: 300, align: 'left' },
 				{
 					header: '에너지원 명',
+					width: 150,
 					name: 'ercId',
 					align: 'left',
 					formatter({ value }) {
@@ -204,8 +207,9 @@ export default {
 				},
 				{
 					header: '대상 유형',
+					width: 150,
 					name: 'objKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						var retVal = '';
 
@@ -221,7 +225,8 @@ export default {
 				{
 					header: '투입 생산 유형',
 					name: 'inProdKind',
-					align: 'center',
+					width: 150,
+					align: 'left',
 					formatter({ value }) {
 						var retVal = '';
 
@@ -237,7 +242,8 @@ export default {
 				{
 					header: '계산 여부',
 					name: 'calcFg',
-					align: 'center',
+					width: 150,
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.useFgList.filter(
@@ -247,7 +253,7 @@ export default {
 						// return value === true ? "사용" : "사용안함";
 					},
 				},
-				{ header: '분배율(1~100)', name: 'distRt', align: 'right' },
+				{ header: '분배율(1~100)', name: 'distRt', align: 'right', width: 150 },
 				{ header: '사업장', name: 'blocId', align: 'center', hidden: true },
 				{ header: '등록 사용자', name: 'regUserNo', hidden: true },
 				{ header: '등록 일자', name: 'regDttm', hidden: true },
@@ -374,7 +380,7 @@ const myDetail = [
 		label: '대상 유형',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'pr-4 py-2',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
@@ -389,9 +395,9 @@ const myDetail = [
 		type: 'ReadPlcPop',
 		label: '대상 항목',
 		valueNm: 'objId',
-		disabled: false,
+		disabled: true,
 		cols: 6,
-		class: 'pt-2 pb-0 mb-0 pl-4',
+		class: 'pl-4 py-2',
 		required: true,
 		bindNm: 'objNm',
 		labelCols: 12,
@@ -400,24 +406,6 @@ const myDetail = [
 		noText: true,
 		iconShow: true,
 	},
-	{
-		// 공백 처리
-		type: 'Label',
-		cols: 6,
-		class: 'py-2 pr-4',
-		disabled: false,
-	},
-	{
-		type: 'InputText',
-		valueNm: 'objNm',
-		readonly: true,
-		disabled: true,
-		cols: 6,
-		class: 'pl-4',
-		labelCols: 12,
-		textCols: 12,
-		iconShow: true,
-	},
 	{
 		type: 'EvtObjPop',
 		labelContent: '대상 항목',
@@ -428,16 +416,23 @@ const myDetail = [
 		disabled: true,
 		required: true,
 		cols: 6,
-		class: 'd-none pr-4',
+		class: 'd-none pr-4 py-2',
 		disableContent: true,
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
 	},
+	{
+		// 공백 처리
+		type: 'Label',
+		cols: 6,
+		class: 'py-2 pr-4',
+		disabled: false,
+	},
 	{
 		type: 'InputText',
 		cols: 6,
-		class: 'd-none pt-0 pl-4',
+		class: 'pt-0 pl-4 mt-2 py-2',
 		valueNm: 'objNm',
 		readonly: true,
 		disabled: true,
@@ -450,7 +445,7 @@ const myDetail = [
 		label: '에너지원',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		list: 'ercNmList',
 		valueNm: 'ercId',
 		itemText: 'text',
@@ -465,7 +460,7 @@ const myDetail = [
 		label: '투입생산유형',
 		disabled: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		list: 'cmInoutList',
 		valueNm: 'inProdKind',
 		itemText: 'commCdNm',
@@ -478,7 +473,7 @@ const myDetail = [
 	{
 		type: 'CheckBox',
 		cols: 6,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		label: '계산 여부',
 		valueNm: 'calcFg',
 		disabled: false,
@@ -487,7 +482,6 @@ const myDetail = [
 		disabledFg: 'objKind',
 		labelCols: 12,
 		textCols: 12,
-		iconShow: true,
 	},
 	{
 		type: 'InputText',
@@ -495,7 +489,7 @@ const myDetail = [
 		valueNm: 'distRt',
 		readonly: false,
 		cols: 6,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		required: true,
 		labelCols: 12,
 		textCols: 12,
diff --git a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
index 47963c5..0f74f2c 100644
--- a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
+++ b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
@@ -21,9 +21,9 @@
 			</v-col>
 		</v-row>
 		<!-- Create the line between date picker and form -->
-		<v-row class="my-5" no-gutters>
+		<v-row class="mt-6 mb-7" no-gutters>
 			<v-col>
-				<div style="height: 1px; background-color: #ccc;"></div>
+				<div style="height: 1px; background-color: #0000000F;"></div>
 			</v-col>
 		</v-row>
 		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
@@ -43,7 +43,7 @@
 				<div
 					ref="gridParent"
 					class="w100"
-					style="height: calc((100vh - 600px) / 2);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<Grid
 						:ref="gridName"
@@ -57,7 +57,7 @@
 				</div>
 			</v-col>
 		</v-row>
-		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
+		<v-row class="search-box mt-2" align="center" no-gutters style="height: 44px;">
 			<v-col :cols="4">
 				<label for="" class="search-box-label">
 					<!-- <v-icon x-small color="primary" class="mr-1"
@@ -77,7 +77,7 @@
 				<div
 					ref="chartParent"
 					class="h100 w100"
-					style="height: calc((100vh - 600px) / 2  - 30px);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<component
 						class="w100 h100"
diff --git a/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue b/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
index ade418a..581c668 100644
--- a/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
+++ b/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
@@ -332,7 +332,7 @@ const myReadPlcTagDetail = [
 		valueNm2: 'tagNm',
 		disabled: true,
 		cols: 6,
-		class: 'pr-4 pb-2 py-2',
+		class: 'pr-4 pb-2 py-2 mt-2',
 		required: true,
 		labelCols: 12,
 		textCols: 12,
@@ -345,7 +345,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'ercId',
 		disabled: false,
 		cols: 6,
-		class: 'pl-4 pb-2 py-3',
+		class: 'pl-4 pb-2 py-3 mt-2',
 		list: 'ercNmList',
 		itemText: 'text',
 		itemValue: 'value',
@@ -360,7 +360,7 @@ const myReadPlcTagDetail = [
 		readonly: true,
 		cols: 6,
 		textCols: 12,
-		class: 'pt-1 py-3 pr-4',
+		class: 'pt-1 py-3 pr-4 mt-2',
 		required: true,
 	},
 	{
@@ -372,7 +372,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'distRt',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		inputType: 'number',
 		min: 1,
 		max: 100,
@@ -387,7 +387,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'reprTagFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 		labelCols: 12,
@@ -401,7 +401,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'useFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 		labelCols: 12,
@@ -414,7 +414,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'rmrk',
 		disabled: false,
 		cols: 6,
-		class: 'py-3 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		inputType: 'string',
 		labelCols: 12,
 		textCols: 12,
diff --git a/layouts/default.vue b/layouts/default.vue
index f803b26..838b321 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -90,23 +90,40 @@
         <v-container fluid>
           <v-row class="flex-nowrap">
             <div class="menu-container">
-              <v-navigation-drawer ref="navigationdrawer" :value="drawer" :mini-variant="miniVariant" :clipped="clipped"
-                :absolute="false" mini-variant-width="60">
+              <v-navigation-drawer ref="navigationdrawer"
+                class="pt-2" 
+                :clipped="clipped"
+                :absolute="false" 
+                :mini-variant="miniVariant"
+                :value="drawer"  
+                mini-variant-width="260"
+              >
 
                 <component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
                 <v-treeview ref="treeview" :active.sync="activeTree" active-class="v-treeview-node--active"
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
                   <template slot="label" slot-scope="{ item }">
                     <button :class="{ 'justify-center': miniVariant }" @mouseover="doMouseOver">
-                      <v-icon v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
-                        v-text="menuIconById[item.menuId]" :class="{ 'mr-2': !miniVariant }" size="20"></v-icon>
-                      <v-icon v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
-                        :class="{ 'mr-2': !miniVariant }" size="20">mdi-package-variant-closed</v-icon>
-                      <v-icon v-else-if="item.lvl === 2" :class="{ 'mr-2': !miniVariant }" size="10">
+                      
+                      <v-icon 
+                        v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
+                        :class="{ 'mr-2': !miniVariant }" 
+                        size="14"
+                        v-text="menuIconById[item.menuId]"
+                      ></v-icon>
+                      <v-icon 
+                        v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
+                        :class="{ 'mr-2': !miniVariant }" 
+                        size="14">mdi-package-variant-closed</v-icon>
+                      <v-icon 
+                        v-else-if="item.lvl === 2" :class="{ 'mr-2': !miniVariant }" 
+                        size="8">
                         mdi-checkbox-blank
                       </v-icon>
-                      <v-icon v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
-                        :class="miniVariant === false ? 'mr-2' : ''" size="9">
+                      <v-icon 
+                        v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
+                        :class="miniVariant === false ? 'mr-2' : ''" 
+                        size="8">
                         $depth3rdBulletDark
                       </v-icon>
                       <span v-if="item.url">
@@ -298,6 +315,7 @@ import ThemeSwitch from "@/components/common/ThemeSwitch";
 import AdminMenu from "@/components/common/AdminMenu";
 import FadeLoader from "vue-spinner/src/FadeLoader.vue";
 import ChangePswdPop from "~/components/common/modal/ChangePswdPop";
+
 export default {
   components: {
     ThemeSwitch,
@@ -318,19 +336,17 @@ export default {
       myPrgmId: null,
       treeValue: [],
       menuIconById: {
-        // MNU0003: 'mdi-chart-line',
-        // MNU0004: 'mdi-alarm-light',
-        // MNU0005: 'mdi-pencil-box-outline',
-        // MNU0006: 'mdi-cog-outline',
-        MNU0002: "mdi-monitor",
-        MNU0091: "mdi-chart-box",
-        MNU0102: "mdi-human-male-board-poll",
-        MNU0103: "mdi-file-chart-outline",
-        MNU0104: "mdi-chart-sankey-variant",
-        MNU0106: "mdi-database-edit-outline",
-        MNU0105: "mdi-chart-bell-curve",
-        MNU0006: "mdi-bulletin-board",
-        MNU0007: "mdi-cog",
+        MNU0110: "$anticonAppStore",
+        MNU0002: "$anticonDesktop",
+        MNU0003: "$anticonDrag",
+        MNU0091: "$anticonLineChart",
+        MNU0102: "$anticonBulb",
+        MNU0103: "$anticonFileText",
+        MNU0104: "$anticonNoteExpand",
+        MNU0106: "$anticonPieChart",
+        MNU0105: "$anticonSearch",
+        MNU0006: "$anticonMessage",
+        MNU0007: "$anticonSetting",
       },
       isLoading: false,
       loadingStackCnt: 0,
@@ -829,21 +845,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import '@/assets/scss/common.scss';
-.loading {
-  z-index: 99;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(0, 0, 0, 0.4);
-  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
-}
+@import '@/assets/scss/layout.scss';
 
-.v-spinner {
-  top: 50%;
-  left: 50%;
-}
 </style>
diff --git a/pages/comm/auth/UserRoleMngPage.vue b/pages/comm/auth/UserRoleMngPage.vue
index 36b1fec..2760f8a 100644
--- a/pages/comm/auth/UserRoleMngPage.vue
+++ b/pages/comm/auth/UserRoleMngPage.vue
@@ -90,7 +90,7 @@
 			<!-- 사용자 정보 -->
 			<v-col :cols="7" class="h100">
 				<v-card class="pb-5 h100">
-					<v-card-title class="custom-title-4">사용자 정보</v-card-title>
+					<v-card-title class="custom-title-4 pb-0">사용자 정보</v-card-title>
 					<div class="px-5" :style="{ height: 'calc(100% - 62.5px)' }">
 						<v-tabs v-model="tab">
 							<v-tab
@@ -947,17 +947,6 @@ 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 => {
@@ -971,7 +960,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			required: false,
 			placeholder: '시스템 자동입력',
@@ -983,7 +972,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			required: true,
 		},
@@ -996,8 +985,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
-			iconShow: true,
+			class: 'py-2 pr-4 mt-2',
 			required: true,
 		},
 		{
@@ -1007,7 +995,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			required: true,
 		},
@@ -1018,7 +1006,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			list: blocCdList.map(item => ({
 				text: item.blocNm,
@@ -1033,7 +1021,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 		},
 		{
@@ -1044,7 +1032,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1056,7 +1044,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1068,7 +1056,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pr-4',
+			class: 'py-2 pr-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
@@ -1080,7 +1068,7 @@ const myDetail = blocCdList => {
 			cols: 6,
 			labelCols: 12,
 			textCols: 12,
-			class: 'py-2 pl-4',
+			class: 'py-2 pl-4 mt-2',
 			iconShow: true,
 			placeholder: '시스템 자동입력',
 		},
diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index 4fe2942..55fcb86 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/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"
@@ -49,7 +49,7 @@
 					<v-col :cols="12" class="mt-5 pb-4">
 						<v-card-title class="custom-title-6 pa-0">{{ viewActionData.title }}</v-card-title>
 					</v-col>
-					<v-col :cols="12" style="min-height: 30vh;" class="pa-0 custom-view">
+					<v-col :cols="12" style="min-height: 50vh;" class="pa-0 custom-view">
 						<v-card class="pa-3" style="overflow-y:auto;">
 							<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
 								:initialValue="viewActionData.content" theme="white"
@@ -105,15 +105,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"
-								class="mr-2">취소</a-button>
+							<a-button @click="writePageButtonGroupClickEvent('cancel')" 
+								: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>
@@ -151,7 +153,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 +161,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>
@@ -212,7 +217,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 +225,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>
diff --git a/pages/ems/base/DashboardPage.vue b/pages/ems/base/DashboardPage.vue
index 977086c..7fef4cc 100644
--- a/pages/ems/base/DashboardPage.vue
+++ b/pages/ems/base/DashboardPage.vue
@@ -1196,7 +1196,8 @@ export default {
             show: false,
           },
           left: "22%",
-          radius: ["50%", "80%"], // Bigger inner and outer radius
+          bottom: "23",
+          radius: ["67%", "97%"], // Bigger inner and outer radius
           center: ["60%", "50%"], // Shift chart slightly right to make room for legend
           itemStyle: {
             borderColor: "#fff", // Color of the gap
@@ -1272,7 +1273,10 @@ export default {
           top: "middle",
           type: "scroll",
           orient: "vertical",
-          left: "left",
+          left: "20",
+          icon: 'rect',     
+          itemWidth: 15, // Width of the legend icon
+          itemHeight: 15, 
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
diff --git a/pages/ems/base/EnrgCostCenterMngPage.vue b/pages/ems/base/EnrgCostCenterMngPage.vue
index ba3c61d..93d7f58 100644
--- a/pages/ems/base/EnrgCostCenterMngPage.vue
+++ b/pages/ems/base/EnrgCostCenterMngPage.vue
@@ -105,7 +105,7 @@
 			</v-col>
 			<v-col :cols="7" style="min-height:75vh;">
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4" style="min-height:65px;"
+					<v-card-title class="custom-title-4 pb-0" style="min-height:65px;"
 						>공정 상세
 					</v-card-title>
 					<div class="px-5" style="height:calc(100% - 76px)">
@@ -901,7 +901,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4',
+		class: 'py-2 px-4',
 		required: true,
 		iconShow: true
 	},
@@ -938,7 +938,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 mb-0 pb-0 pl-4 mt-2',
+		class: 'py-2 mb-0 pb-0 px-4 mt-2',
 		list: 'locKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -956,7 +956,7 @@ const myDetail = [
 		// 공백 처리
 		type: 'Label',
 		cols: 6,
-		class: 'py-2 pl-4 mt-2',
+		class: 'py-2 px-4 mt-2',
 		disabled: false,
 		labelCols: 12,
 		textCols: 12,
@@ -985,7 +985,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4 mt-2',
+		class: 'py-2 px-4 mt-2',
 		inputType: 'number',
 		iconShow: true
 		// onkeydown : "if(this.value > 100) this.value = 100;if(this.value < 0) this.value = 0;if(this.value == '') this.value = 0;"
@@ -1012,7 +1012,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pl-4 mt-2',
+		class: 'py-2 px-4 mt-2',
 		value: { '1': true, '0': false },
 		iconShow: true,
 		required: true,
diff --git a/pages/ems/base/EnrgReadPlaceMngPage.vue b/pages/ems/base/EnrgReadPlaceMngPage.vue
index 611047b..d117197 100644
--- a/pages/ems/base/EnrgReadPlaceMngPage.vue
+++ b/pages/ems/base/EnrgReadPlaceMngPage.vue
@@ -63,7 +63,7 @@
 						<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2">
 							<v-tab-item v-for="(item, idx) in items" :key="item.id">
 								<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
-									:detailList="detailList" :bindingData="gridName"
+									:detailList="f" :bindingData="gridName"
 									@gridEditingFinish="gridEditingFinish" />
 								<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
 									:innerTabGridInfo="{ tab, idx }" />
diff --git a/pages/ems/base/EnrgResourceCenterMngPage.vue b/pages/ems/base/EnrgResourceCenterMngPage.vue
index 98cc445..04e31f1 100644
--- a/pages/ems/base/EnrgResourceCenterMngPage.vue
+++ b/pages/ems/base/EnrgResourceCenterMngPage.vue
@@ -835,7 +835,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4',
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@@ -848,7 +848,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4',
 		required: true,
 	},
 	{
@@ -860,7 +860,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		list: 'ercKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -875,7 +875,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		list: 'readObjList',
 		itemText: 'readObjNm',
 		itemValue: 'readObjId',
@@ -890,7 +890,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		list: 'chrgKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -905,7 +905,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 	},
 	{
 		type: 'InputText',
@@ -916,7 +916,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 
 	},
 	{
@@ -928,7 +928,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		list: 'blocMstrList',
 		itemText: 'blocNm',
 		itemValue: 'blocId',
@@ -944,7 +944,7 @@ const myDetail = [
 		textCols: 12,
 		iconShow: true,
 		// class: 'py-2',
-		class: 'pb-0 mb-0 pr-4',
+		class: 'pb-0 mb-0 pr-4 mt-2',
 		disableContent: true,
 	},
 	{
@@ -956,7 +956,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'pb-0 mb-0 pl-4 mt-2',
 	},
 	{
 		type: 'InputText',
@@ -981,7 +981,7 @@ const myDetail = [
 		disabled: false,
 		cols: 6,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-3 pr-4 mt-2',
 		value: { '1': true, '0': false },
 	},
 	{
@@ -991,7 +991,7 @@ const myDetail = [
 		disabled: false,
 		cols: 6,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-3 pl-4 mt-2',
 		value: { '1': true, '0': false },
 		required: true,
 	},
diff --git a/pages/ems/base/PastRsltDataReadPage.vue b/pages/ems/base/PastRsltDataReadPage.vue
index 500a375..3679e8a 100644
--- a/pages/ems/base/PastRsltDataReadPage.vue
+++ b/pages/ems/base/PastRsltDataReadPage.vue
@@ -12,7 +12,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
-								customClass="select-large" />
+								class="no-gutters" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
@@ -29,17 +29,18 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents">
-			<v-col :cols="12" style="height: 100%" class="h100">
-				<v-card class="px-5 py-5 h100">
-					<div ref="gridParent" class="h100 px-5" style="height: 100%">
+			<v-col :cols="12" class="h100">
+				<v-card class="px-5 py-5">
+					<div ref="gridParent" class="px-5" style="height:calc(100% - 40px)">
 						<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 							:parentPrgmId="myPrgmId" />
 					</div>
-					<div class="d-flex align-center justify-space-between">
-						<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-							@loadData="changeGrid" />
-					</div>
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
+						</div>
 				</v-card>
+
 			</v-col>
 		</v-row>
 	</div>
@@ -61,7 +62,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
 import DateUtility from '~/plugins/dateUtility';
 // import Search from "~/components/common/search";
 import EvtObjPop from '~/components/common/modal/EvtObjPop';
-import pagination from '~/components/Pagination';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0052";
@@ -212,7 +213,7 @@ export default {
 		},
 		layoutInit() {
 			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) `;
 		},
 		async setFromDt() {
 			this.pageData.fromDt = Utility.setBeforetDate(
@@ -220,7 +221,6 @@ export default {
 				this.pageData.toDt,
 				'YYYYMMDD',
 			);
-			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
 		},
 		gridInit() {
 			this.loadGrid = false;
diff --git a/pages/ems/base/ReadObjectMngPage.vue b/pages/ems/base/ReadObjectMngPage.vue
index a23e34c..4f8a11c 100644
--- a/pages/ems/base/ReadObjectMngPage.vue
+++ b/pages/ems/base/ReadObjectMngPage.vue
@@ -75,7 +75,7 @@
 			</v-col>
 			<v-col :cols="7" class="h100">
 				<v-card class="pb-5">
-					<v-card-title class="custom-title-4-new" style="min-height:65px;"
+					<v-card-title class="custom-title-4-new pb-0" style="min-height:65px;"
 						>검침대상 상세
 					</v-card-title>
 					<div class="px-5" style="height:calc(100% - 76px)">
@@ -742,7 +742,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@@ -754,7 +754,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		required: true,
 		iconShow: true,
 	},
@@ -766,7 +766,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		list: 'readObjKindDetailList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -781,7 +781,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		list: 'readObjGrpList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -796,7 +796,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -808,7 +808,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -820,7 +820,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		iconShow: true,
 		inputType: 'number',
 	},
@@ -832,7 +832,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2',
+		class: 'py-2 mt-2',
 		list: 'unitCdList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -847,7 +847,7 @@ const myDetail = [
 		cols: 6,
 		labelCols: 12,
 		textCols: 12,
-		class: 'py-2 pr-2',
+		class: 'py-2 pr-2 mt-2',
 		value: { '1': true, '0': false },
 		iconShow: true,
 		required: true,
diff --git a/pages/ems/base/ReadResultCloseMngPage.vue b/pages/ems/base/ReadResultCloseMngPage.vue
index 0720a38..136704c 100644
--- a/pages/ems/base/ReadResultCloseMngPage.vue
+++ b/pages/ems/base/ReadResultCloseMngPage.vue
@@ -100,6 +100,10 @@
                 :gridName="gridName"
               />
           </div>
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+            <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
+						</div>
         </v-card>
       </v-col>
     </v-row>
@@ -117,6 +121,7 @@ import selectCodeList from "@/components/common/select/selectCodeList";
 import SelectMttList from "@/components/common/select/SelectMttList";
 import Datepicker from "~/components/common/Datepicker";
 import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0018";
@@ -144,27 +149,18 @@ export default {
     Datepicker,
     Search,
     Grid,
+    pagination,
   },
   data() {
     return {
       myPrgmId: myPrgmId,
       gridName: "rowGrid",
       loadGrid: false,
-      dataPathMock: {
-        rowGrid: {
-          column: [
-            { header: "태그", name: "id", headerAlign: "left" },
-            { header: "배율", name: "lable", headerAlign: "left" },
-            { header: "설비비", name: "type", headerAlign: "left" },
-            { header: "설비배분비율", name: "note", headerAlign: "left" },
-            { header: "금일데이터", name: "note", headerAlign: "left" },
-            { header: "최종마감시각", name: "date", headerAlign: "left" },
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {},
-        },
-      },
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
     };
   },
   computed: {
@@ -190,7 +186,10 @@ export default {
   },
   watch: {
     chkIsFind(val) {
-      if (val) this.search();
+      if (val) {
+				this.page = 1;
+				this.search();
+			}
     },
     chkBlocId() {
       this.setPageData({ isFind: true });
@@ -243,10 +242,6 @@ export default {
         columnOptions: {
           resizable: true,
         },
-        pageOptions: {
-					useClient: true,
-					perPage: 13,
-				},
       };
       this.setGridOption({
         gridKey: this.gridName,
@@ -261,6 +256,8 @@ export default {
       await this.getRowGridData();
     },
     async getRowGridData() {
+      this.loadGrid = false;
+
       if (
         this.pageData.blocMstrList.length > 0 &&
         this.pageData.commCdList.length > 0 &&
@@ -274,8 +271,25 @@ export default {
             mttCd: this.pageData.commCd, // 검침대상유형
             mttTp: this.pageData.readObjId, // 검침대상
             readDt: this.pageData.fromDt, // 조회기간
+            limit: this.limit,
+					  page: this.page,
+					  offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
           },
         });
+
+        const res2 = await this.postApiReturn({
+					apiKey: 'selectReadResultCloseMngPageTotal',
+					resKey: 'cdKindPageTotal',
+          sendParam: {
+            blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
+            mttCd: this.pageData.commCd, // 검침대상유형
+            mttTp: this.pageData.readObjId, // 검침대상
+            readDt: this.pageData.fromDt, // 조회기간
+          },
+				});
+
+				this.totalCount = res2[0].totalcount;
+
         this.setGridData({
           gridKey: this.gridName,
           value: res.map((item) => ({
@@ -325,6 +339,12 @@ export default {
         this.setPageData({ isFind: true });
       }
     },
+    changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
   },
 };
 
@@ -431,13 +451,4 @@ const myColumns = [
     },
   },
 ];
-
-import { getPathDataExample } from "@/const/const";
-const dataPathDataExample = getPathDataExample({
-  id: "INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV",
-  lable: "INCHEON 고온 냉동기 101호기 - 호로1",
-  type: "사용",
-  note: "-",
-  date: "2023-01-10 20:02:00",
-});
 </script>
diff --git a/pages/ems/effc/EnrgEffcTotSummPage.vue b/pages/ems/effc/EnrgEffcTotSummPage.vue
index 97b6233..614c429 100644
--- a/pages/ems/effc/EnrgEffcTotSummPage.vue
+++ b/pages/ems/effc/EnrgEffcTotSummPage.vue
@@ -33,7 +33,7 @@
             </v-col>
             <v-col :cols="6" class="text-right">
               <!-- 조회버튼 -->
-              <BtnSearch style="margin-top: 20px" size="large" @click="search" />
+              <BtnSearch style="margin-top: 25px" size="large" @click="search" />
             </v-col>
           </v-row>
         </v-card>
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index 09c5c8a..41ffa8c 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/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>
diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
index cb0f8a5..a19a023 100644
--- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
@@ -99,7 +99,7 @@
       <v-col :cols="12" style="height: 100%">
         <v-row class="pa-1" style="height: 50%; width: 100%">
           <div style="width: 100%; height: 100%; overflow: hidden">
-            <div style="height: 15%">
+            <v-card style="background: none; height: 15%">
               <v-card-title
                 class="d-flex align-center justify-space-between"
                 style="padding: 0px"
@@ -108,7 +108,7 @@
                   주요가이드 지표
                 </span>
               </v-card-title>
-            </div>
+            </v-card>
             <div style="height: 85%">
               <v-row style="height: 100%; overflow: auto">
                 <v-col
@@ -117,7 +117,7 @@
                   v-for="(value, key, index) in contentData01"
                   :key="'key1' + index"
                 >
-                  <v-card style="position: relative; overflow: hidden;" >
+                  <v-card style="position: relative; overflow: hidden">
                     <!-- Card header -->
                     <div
                       style="
@@ -133,9 +133,9 @@
                     <v-card-title style="padding-left: 10px">{{
                       value["gdIdxNm"]
                     }}</v-card-title>
-                    <div class="v-box" style="height: 80%; padding: 3px; margin: 10px;">
-                      <v-col :cols="12" style="height: 100%;">
-                        <div style="height: 85%;">
+                    <div class="v-box" style="height: 80%; padding: 3px; margin: 10px">
+                      <v-col :cols="12" style="height: 100%">
+                        <div style="height: 85%">
                           <component
                             class="w100 h100"
                             :is="loadChart ? 'Chart' : null"
@@ -152,16 +152,17 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 40%; width: 100%">
+        <v-row class="pa-1" style="height: 52%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
-            <div style="height: 25%">
-              <v-card-title class="d-flex align-center justify-space-between pa-5">
+            <div style="height: 15%">
+              <v-card-title class="d-flex align-center justify-space-between pl-3">
                 <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
               </v-card-title>
             </div>
             <div
               ref="gridParent01"
-              style="height: 75%; overflow: hidden; margin-top: 15px"
+              class="pl-3 mt-5"
+              style="height: 75%; overflow: hidden;"
             >
               <component
                 :ref="gridName01"
@@ -172,17 +173,17 @@
             </div>
           </v-card>
         </v-row>
-        <v-row class="pa-1" style="height: 34%; width: 100%">
+        <v-row class="pa-1" style="height: 40%; width: 100%">
           <div style="height: 100%; width: 100%">
             <v-row style="height: 100%">
               <v-col :cols="5" class="">
                 <v-card class="pa-1" style="height: 100%; width: 100%">
-                  <div style="height: 25%">
-                    <v-card-title class="d-flex align-center justify-space-between pa-5">
+                  <div style="height: 15%">
+                    <v-card-title class="d-flex align-center justify-space-between pl-3">
                       <span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
                     </v-card-title>
                   </div>
-                  <div ref="gridParent02" style="height: 75%">
+                  <div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
                     <component
                       :ref="gridName02"
                       :is="loadGrid02 ? 'Grid' : null"
@@ -235,317 +236,315 @@ let myPrgmId;
 let paramKey;
 
 export default {
-	mixins: [mixinGlobal, resize],
-	async asyncData(context) {
-		const myState = context.store.state;
-		myPrgmId = context.route.query.prgmId;
+  mixins: [mixinGlobal, resize],
+  async asyncData(context) {
+    const myState = context.store.state;
+    myPrgmId = context.route.query.prgmId;
     await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
-		myTitle = await myState.activeMenuInfo.menuNm;
-	},
-	meta: {
-		title: () => {
-			return myTitle;
-		},
-		prgmId: myPrgmId,
-		closable: true,
-	},
-	components: {
-		Utility,
-		SelectBox,
-		SelectCmCycle,
-		DatePicker,
-		Grid,
-		Chart,
-	},
-	data() {
-		return {
-			myPrgmId: myPrgmId,
+    myTitle = await myState.activeMenuInfo.menuNm;
+  },
+  meta: {
+    title: () => {
+      return myTitle;
+    },
+    prgmId: myPrgmId,
+    closable: true,
+  },
+  components: {
+    Utility,
+    SelectBox,
+    SelectCmCycle,
+    DatePicker,
+    Grid,
+    Chart,
+  },
+  data() {
+    return {
+      myPrgmId: myPrgmId,
 
-			initedFlag: false,
-			queryParams: null,
+      initedFlag: false,
+      queryParams: null,
 
-			selectValueList01: [],
-			selectValueList02: [],
-			selectValueList03: [],
-			selectValueList04: [],
+      selectValueList01: [],
+      selectValueList02: [],
+      selectValueList03: [],
+      selectValueList04: [],
 
-			selectValue01: null,
-			selectValue02: null,
-			selectValue03: null,
-			selectValue04: null,
+      selectValue01: null,
+      selectValue02: null,
+      selectValue03: null,
+      selectValue04: null,
 
-			contentData01: {},
+      contentData01: {},
 
-			loadGrid01: false,
-			loadGrid02: false,
+      loadGrid01: false,
+      loadGrid02: false,
       gridName01: "grid01",
       gridName02: "grid02",
 
-			loadTrendChart: false,
-		};
-	},
-	computed: {
-		...mapState({
+      loadTrendChart: false,
+    };
+  },
+  computed: {
+    ...mapState({
       pageData: (state) => state.pageData[myPrgmId],
-		}),
-		fromDt() {
-			return this.pageData.fromDt;
-		},
-	},
-	watch: {
-		async $route(to, from) {
-			if (to.query.prgmId == myPrgmId) {
-				if (to.params.key) {
+    }),
+    fromDt() {
+      return this.pageData.fromDt;
+    },
+  },
+  watch: {
+    async $route(to, from) {
+      if (to.query.prgmId == myPrgmId) {
+        if (to.params.key) {
           document.getElementById("refresh").click();
-				}
-			}
-		},
-		async selectValue01(value) {
-			if (this.initedFlag) {
-				// await this.search();
-				await this.getSelectValueList04();
-			}
-		},
-		async selectValue02(value) {
-			if (this.initedFlag) {
-				await this.getSelectValueList03();
-			}
-		},
-		async selectValue03(value) {
-			if (this.initedFlag) {
-				await this.getSelectValueList04();
-			}
-		},
-		async selectValue04(value) {
-			if (this.initedFlag) {
-				await this.search();
-			}
-		},
-		async fromDt(value) {
-			if (this.initedFlag) {
-				await this.search();
-			}
-		},
-	},
-	async beforeCreate() {
-		myPrgmId = this.$route.query.prgmId;
+        }
+      }
+    },
+    async selectValue01(value) {
+      if (this.initedFlag) {
+        // await this.search();
+        await this.getSelectValueList04();
+      }
+    },
+    async selectValue02(value) {
+      if (this.initedFlag) {
+        await this.getSelectValueList03();
+      }
+    },
+    async selectValue03(value) {
+      if (this.initedFlag) {
+        await this.getSelectValueList04();
+      }
+    },
+    async selectValue04(value) {
+      if (this.initedFlag) {
+        await this.search();
+      }
+    },
+    async fromDt(value) {
+      if (this.initedFlag) {
+        await this.search();
+      }
+    },
+  },
+  async beforeCreate() {
+    myPrgmId = this.$route.query.prgmId;
     await this.$store.dispatch("chkOpenTabList", {
       key: "create",
-			prgmId: myPrgmId,
-			defaultData: defaultData,
-		});
-	},
-	created() {},
-	mounted() {
-		this.init();
-	},
-	beforeDestroy() {
-		this.initedFlag = false;
+      prgmId: myPrgmId,
+      defaultData: defaultData,
+    });
+  },
+  created() {},
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.initedFlag = false;
     this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
-	},
-	methods: {
-		...mapMutations({
+  },
+  methods: {
+    ...mapMutations({
       setChartOption: "setChartOption",
-		}),
-		async init() {
-			await this.getSelectValueList();
-			await this.setQueryParams();
-			await this.search();
+    }),
+    async init() {
+      await this.getSelectValueList();
+      await this.setQueryParams();
+      await this.search();
 
-			this.initedFlag = true;
-		},
-		async setQueryParams() {
-			this.queryParams = null;
+      this.initedFlag = true;
+    },
+    async setQueryParams() {
+      this.queryParams = null;
 
-			if (paramKey == this.$route.params.key) {
-				return;
-			}
-			if (this.$route.params.key) {
-				paramKey = this.$route.params.key;
-				this.queryParams = this.$route.params;
-			}
+      if (paramKey == this.$route.params.key) {
+        return;
+      }
+      if (this.$route.params.key) {
+        paramKey = this.$route.params.key;
+        this.queryParams = this.$route.params;
+      }
 
       if (this.queryParams && typeof this.queryParams == "object") {
-				this.setPageData({
-					dateInitedFlag: true,
-				});
+        this.setPageData({
+          dateInitedFlag: true,
+        });
         this.selectValue01 = this.queryParams["fabId"];
         this.selectValue02 = this.queryParams["eqpmKindId"];
-				await this.getSelectValueList03();
+        await this.getSelectValueList03();
         this.selectValue03 = this.queryParams["eqpmGrpId"];
-				await this.getSelectValueList04();
+        await this.getSelectValueList04();
         this.selectValue04 = this.queryParams["eqpmId"];
 
-				this.setPageData({
+        this.setPageData({
           fromDt: this.queryParams["fromDt"],
           cmCycle: this.queryParams["cmCycle"],
-				});
-			}
-		},
-		async getSelectValueList() {
-			await this.getSelectValueList01();
-			await this.getSelectValueList02();
-			await this.getSelectValueList03();
-			await this.getSelectValueList04();
-		},
-		async getSelectValueList01() {
-			let res = await this.postApiReturn({
+        });
+      }
+    },
+    async getSelectValueList() {
+      await this.getSelectValueList01();
+      await this.getSelectValueList02();
+      await this.getSelectValueList03();
+      await this.getSelectValueList04();
+    },
+    async getSelectValueList01() {
+      let res = await this.postApiReturn({
         apiKey: "selectFabCodeList",
         resKey: "fabCodeLists",
-				sendParam: {},
-			});
-			if (res.length > 0) {
+        sendParam: {},
+      });
+      if (res.length > 0) {
         this.selectValueList01 = await res.map((item) => {
-					return {
-						text: item.eccNm,
-						value: item.eccId,
-					};
-				});
-				this.selectValue01 = this.selectValueList01[0].value;
-			} else {
-				this.selectValueList01 = [];
-				this.selectValue01 = null;
-			}
-		},
-		async getSelectValueList02() {
-			var res = await this.postApiReturn({
+          return {
+            text: item.eccNm,
+            value: item.eccId,
+          };
+        });
+        this.selectValue01 = this.selectValueList01[0].value;
+      } else {
+        this.selectValueList01 = [];
+        this.selectValue01 = null;
+      }
+    },
+    async getSelectValueList02() {
+      var res = await this.postApiReturn({
         apiKey: "selectEmsEqpmKindList",
         resKey: "eqpmGrpPysclQtyMngData",
-				sendParam: {},
-			});
+        sendParam: {},
+      });
 
-			if (res.length > 0) {
+      if (res.length > 0) {
         this.selectValueList02 = await res.map((item) => {
-					return {
-						text: item.eqpmKindNm,
-						value: item.eqpmKindId,
-						data: {
-							...item,
-						},
-					};
-				});
-				this.selectValue02 = this.selectValueList02[0].value;
-			} else {
-				this.selectValueList02 = [];
-				this.selectValue02 = null;
-			}
-		},
-		async getSelectValueList03() {
-			var res = await this.postApiReturn({
+          return {
+            text: item.eqpmKindNm,
+            value: item.eqpmKindId,
+            data: {
+              ...item,
+            },
+          };
+        });
+        this.selectValue02 = this.selectValueList02[0].value;
+      } else {
+        this.selectValueList02 = [];
+        this.selectValue02 = null;
+      }
+    },
+    async getSelectValueList03() {
+      var res = await this.postApiReturn({
         apiKey: "selectEmsEqpmGrpList",
         resKey: "eqpmGrpPysclQtyMngData",
-				sendParam: {
-					eqpmKindId: this.selectValue02,
-				},
-			});
+        sendParam: {
+          eqpmKindId: this.selectValue02,
+        },
+      });
 
-			if (res.length > 0) {
+      if (res.length > 0) {
         this.selectValueList03 = await res.map((item) => {
-					return {
-						text: item.eqpmGrpNm,
-						value: item.eqpmGrpId,
-						data: {
-							...item,
-						},
-					};
-				});
-				this.selectValue03 = this.selectValueList03[0].value;
-			} else {
-				this.selectValueList03 = [];
-				this.selectValue03 = null;
-			}
-		},
-		async getSelectValueList04() {
-			var res = await this.postApiReturn({
+          return {
+            text: item.eqpmGrpNm,
+            value: item.eqpmGrpId,
+            data: {
+              ...item,
+            },
+          };
+        });
+        this.selectValue03 = this.selectValueList03[0].value;
+      } else {
+        this.selectValueList03 = [];
+        this.selectValue03 = null;
+      }
+    },
+    async getSelectValueList04() {
+      var res = await this.postApiReturn({
         apiKey: "selectFabEqpmList",
         resKey: "enrgUseEqpmDetlMntrData",
-				sendParam: {
-					fabId: this.selectValue01,
-					eqpmGrpId: this.selectValue03,
-				},
-			});
+        sendParam: {
+          fabId: this.selectValue01,
+          eqpmGrpId: this.selectValue03,
+        },
+      });
 
-			if (res.length > 0) {
+      if (res.length > 0) {
         this.selectValueList04 = await res.map((item) => {
-					return {
-						text: item.eqpmNm,
-						value: item.eqpmId,
-						data: {
-							...item,
-						},
-					};
-				});
-				this.selectValue04 = this.selectValueList04[0].value;
-			} else {
-				this.selectValueList04 = [];
-				this.selectValue04 = null;
-			}
-		},
-		async search() {
-			// console.log('search ...');
-			// console.log('selectValue01 : ', this.selectValue01);
-			// console.log('selectValue02 : ', this.selectValue02);
-			// console.log('selectValue03 : ', this.selectValue03);
-			// console.log('selectValue04 : ', this.selectValue04);
-			// console.log('cmCycle : ', this.pageData.cmCycle);
-			// console.log('fromDt : ', this.fromDt);
+          return {
+            text: item.eqpmNm,
+            value: item.eqpmId,
+            data: {
+              ...item,
+            },
+          };
+        });
+        this.selectValue04 = this.selectValueList04[0].value;
+      } else {
+        this.selectValueList04 = [];
+        this.selectValue04 = null;
+      }
+    },
+    async search() {
+      // console.log('search ...');
+      // console.log('selectValue01 : ', this.selectValue01);
+      // console.log('selectValue02 : ', this.selectValue02);
+      // console.log('selectValue03 : ', this.selectValue03);
+      // console.log('selectValue04 : ', this.selectValue04);
+      // console.log('cmCycle : ', this.pageData.cmCycle);
+      // console.log('fromDt : ', this.fromDt);
 
-			await this.setContentData();
+      await this.setContentData();
 
-			this.setPageData({
-				dateInitedFlag: false,
-			});
-		},
+      this.setPageData({
+        dateInitedFlag: false,
+      });
+    },
     reloadChart() {
       this.loadChart = false;
       this.$nextTick(() => {
         this.loadChart = true;
       });
     },
-		async setContentData() {
-			await this.setContentData01();
-			await this.setContentData02();
-			await this.setContentData03();
-			// await this.setContentData04();
-		},
-		async setContentData01() {
-			var apiKey = null;
-			var res = null;
-			this.contentData01 = {};
+    async setContentData() {
+      await this.setContentData01();
+      await this.setContentData02();
+      await this.setContentData03();
+      // await this.setContentData04();
+    },
+    async setContentData01() {
+      var apiKey = null;
+      var res = null;
+      this.contentData01 = {};
 
       if (this.pageData.cmCycle == "CYC_DAY") {
         apiKey = "selectDailyEnrgUseMainGuideIdx";
       } else if (this.pageData.cmCycle == "CYC_MONTH") {
         apiKey = "selectMonthlyEnrgUseMainGuideIdx";
-			}
+      }
 
-			res = await this.postApiReturn({
-				apiKey: apiKey,
+      res = await this.postApiReturn({
+        apiKey: apiKey,
 				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					eqpmGrpId: this.selectValue03,
-					eqpmId: this.selectValue04,
-					fromDt: this.fromDt,
-				},
-			});
-      console.log('res 01:',res)
-			this.contentData01 = await this.makeContentData01(res);
-      console.log("content", this.contentData01);
+        sendParam: {
+          eqpmGrpId: this.selectValue03,
+          eqpmId: this.selectValue04,
+          fromDt: this.fromDt,
+        },
+      });
+      this.contentData01 = await this.makeContentData01(res);
       await this.setChartGroup01(this.contentData01);
       this.reloadChart();
-		},
-		async setContentData02() {
-			const _this = this;
-			const myOptions = {
-				columnOptions: {
-					resizable: true,
-				},
+    },
+    async setContentData02() {
+      const _this = this;
+      const myOptions = {
+        columnOptions: {
+          resizable: true,
+        },
         header: {
           height: 38,
         },
-			};
-			const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
-			var columnList = [
+      };
+      const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
+      var columnList = [
         { header: "NO", name: "no", width: 40, align: "center" },
         { header: "gdIdxId", name: "gdIdxId", hidden: true },
         { header: "totDttm", name: "totDttm", hidden: true },
@@ -557,181 +556,188 @@ export default {
         { header: "경고값", name: "warnStndVal", hidden: true },
         { header: "알람종류", name: "alrmKind", hidden: true },
         { header: "알람내용", name: "alrmMsg" },
-			];
-			var res = [];
-			var newRes = [];
+      ];
+      var res = [];
+      var newRes = [];
 
-			this.loadGrid01 = false;
+      this.loadGrid01 = false;
 
-			res = await this.postApiReturn({
+      res = await this.postApiReturn({
 				apiKey: 'selectEnrgUseGuideAlarmInfo',
 				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					cmCycle: this.pageData.cmCycle,
-					eqpmId: this.selectValue04,
-					fromDt: this.fromDt,
+        sendParam: {
+          cmCycle: this.pageData.cmCycle,
+          eqpmId: this.selectValue04,
+          fromDt: this.fromDt,
 					alrmKind: ['WARN', 'CARE'],
-				},
-			});
+        },
+      });
 
-			for (var i = 0; i < res.length; i++) {
-				newRes.push({
-					...res[i],
-					no: i + 1,
-				});
-			}
+      for (var i = 0; i < res.length; i++) {
+        newRes.push({
+          ...res[i],
+          no: i + 1,
+        });
+      }
 
-			this.setGridOption({
-				gridKey: this.gridName01,
-				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
-			});
-			this.setGridColumn({
-				gridKey: this.gridName01,
-				value: columnList,
-			});
-			this.setGridData({
-				gridKey: this.gridName01,
-				value: newRes,
-			});
+      this.setGridOption({
+        gridKey: this.gridName01,
+        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
+      });
+      this.setGridColumn({
+        gridKey: this.gridName01,
+        value: columnList,
+      });
+      this.setGridData({
+        gridKey: this.gridName01,
+        value: newRes,
+      });
 
-			this.loadGrid01 = true;
-		},
-		async setContentData03() {
-			const _this = this;
-			const myOptions = {
-				columnOptions: {
-					resizable: true,
-				},
+      this.loadGrid01 = true;
+    },
+    async setContentData03() {
+      const _this = this;
+      const myOptions = {
+        columnOptions: {
+          resizable: true,
+        },
         header: {
           height: 38,
         },
-			};
-			const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
-			var columnList = [
+      };
+      const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
+      var columnList = [
         { header: "NO", name: "no", align: "right", width: 40 },
         { header: "물리량ID", name: "pysclQtyId", width: 100, align: "left" },
         { header: "물리량코드", name: "pysclQtyCd", align: "left" },
         { header: "물리량명", name: "pysclQtyNm", width: 190, align: "left" },
         { header: "물리량타입", name: "pysclQtyTp", width: 100, align: "left" },
-			];
-			var res = [];
-			var newRes = [];
+      ];
+      var res = [];
+      var newRes = [];
 
-			this.loadGrid02 = false;
+      this.loadGrid02 = false;
 
-			res = await this.postApiReturn({
-				apiKey: 'selectEnrgUseEqpmDescInfo',
-				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					eqpmGrpId: this.selectValue03,
-				},
-			});
+      res = await this.postApiReturn({
+        apiKey: "selectEnrgUseEqpmDescInfo",
+        resKey: "enrgUseEqpmDetlMntrData",
+        sendParam: {
+          eqpmGrpId: this.selectValue03,
+        },
+      });
 
-			for (var i = 0; i < res.length; i++) {
-				newRes.push({
-					...res[i],
-					no: i + 1,
-				});
-			}
+      for (var i = 0; i < res.length; i++) {
+        newRes.push({
+          ...res[i],
+          no: i + 1,
+        });
+      }
 
-			this.setGridOption({
-				gridKey: this.gridName02,
-				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
-			});
-			this.setGridColumn({
-				gridKey: this.gridName02,
-				value: columnList,
-			});
-			this.setGridData({
-				gridKey: this.gridName02,
-				value: newRes,
-			});
+      this.setGridOption({
+        gridKey: this.gridName02,
+        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
+      });
+      this.setGridColumn({
+        gridKey: this.gridName02,
+        value: columnList,
+      });
+      this.setGridData({
+        gridKey: this.gridName02,
+        value: newRes,
+      });
 
-			this.loadGrid02 = true;
+      this.loadGrid02 = true;
 
-			await this.$nextTick();
-			this.$refs[this.gridName02].focus({
-				rowKey: 0,
+      await this.$nextTick();
+      this.$refs[this.gridName02].focus({
+        rowKey: 0,
 				columnName: 'no',
-				setScroll: true,
-			});
-		},
-		async setContentData04(selectedData) {
-			var res = null;
-			var _this = this;
-			var xAxisData = null;
-			var seriesData = null;
-			var sliderHandleSize = 100;
+        setScroll: true,
+      });
+    },
+    async setContentData04(selectedData) {
+      var res = null;
+      var _this = this;
+      var xAxisData = null;
+      var seriesData = null;
+      var sliderHandleSize = 100;
 
-			this.loadTrendChart = false;
+      this.loadTrendChart = false;
 
-			xAxisData = this.makeTrendChartXaxisData();
+      xAxisData = this.makeTrendChartXaxisData();
 
       if (this.pageData.cmCycle == "CYC_MONTH") {
-				sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
-			}
+        sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
+      }
 
-			res = await this.postApiReturn({
+      res = await this.postApiReturn({
 				apiKey: 'selectEnrgUseHourlyTrendInfo',
 				resKey: 'enrgUseEqpmDetlMntrData',
-				sendParam: {
-					pysclQtyId: selectedData.pysclQtyId,
-					eqpmId: this.selectValue04,
-					fromDt: this.fromDt,
-					cmCycle: this.pageData.cmCycle,
-				},
-			});
+        sendParam: {
+          pysclQtyId: selectedData.pysclQtyId,
+          eqpmId: this.selectValue04,
+          fromDt: this.fromDt,
+          cmCycle: this.pageData.cmCycle,
+        },
+      });
 
-			seriesData = new Array(xAxisData.length).fill(NaN);
+      seriesData = new Array(xAxisData.length).fill(NaN);
 
-			for (var i = 0; i < res.length; i++) {
+      for (var i = 0; i < res.length; i++) {
         if (this.pageData.cmCycle == "CYC_MONTH") {
           seriesData[res[i]["monthCnt"]] = res[i]["totVal"];
         } else if (this.pageData.cmCycle == "CYC_DAY") {
           seriesData[res[i]["dayCnt"]] = res[i]["totVal"];
-				}
-			}
+        }
+      }
 
-			var chartOption = {
-				grid: {
+      var chartOption = {
+        grid: {
           top: "3%",
           bottom: "25%",
-				},
-				tooltip: {
-					axisPointer: {
-						label: {
+        },
+        tooltip: {
+          axisPointer: {
+            label: {
               formatter: function (value) {
-								value = value.value;
-								return (
-									value.substring(5, 7) +
+                value = value.value;
+                return (
+                  value.substring(5, 7) +
                   "월 " +
-									value.substring(8, 10) +
+                  value.substring(8, 10) +
                   "일 " +
-									value.substring(11, 13) +
+                  value.substring(11, 13) +
                   "시"
-								);
-							},
-						},
-					},
-				},
-				xAxis: {
-					data: xAxisData,
-					axisLabel: {
+                );
+              },
+            },
+          },
+        },
+        xAxis: {
+          data: xAxisData,
+          axisLabel: {
             formatter: function (value) {
               return value.substring(11, 13) + "시";
-						},
-					},
-					axisTick: {
-						interval: 23,
-					},
-				},
-				yAxis: {
+            },
+          },
+          axisTick: {
+            interval: 23,
+          },
+        },
+        yAxis: {
           type: "value",
-				},
-				series: [
-					{
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed", // Makes the lines dashed
+              color: "#ccc", // Optional: customize the color
+            },
+          },
+        },
+        series: [
+          {
             type: "line",
-						data: seriesData,
+            data: seriesData,
             itemStyle: {
               color: "#D32029",
             },
@@ -746,123 +752,119 @@ export default {
           //   itemStyle: {
           //     color: "#FAAD14",
           //   },
-					// },
-				],
-				dataZoom: [
-					{
+          // },
+        ],
+        dataZoom: [
+          {
             type: "slider",
-						// zoomLock: true,
-						zoomLock: false,
-						brushSelect: false,
-						start: 0, // 0-100 %
-						end: sliderHandleSize, // 0-100 %
-					},
-					{
+            // zoomLock: true,
+            zoomLock: false,
+            brushSelect: false,
+            start: 0, // 0-100 %
+            end: sliderHandleSize, // 0-100 %
+          },
+          {
             type: "inside",
-						zoomOnMouseWheel: false,
-						moveOnMouseMove: false,
-						moveOnMouseWheel: true,
-					},
-				],
-			};
+            zoomOnMouseWheel: false,
+            moveOnMouseMove: false,
+            moveOnMouseWheel: true,
+          },
+        ],
+      };
 
       this.setChartOption({ chartKey: "trendChart", value: chartOption });
-			this.loadTrendChart = true;
-		},
-		async getRowData02(selectedData) {
-			await this.setContentData04(selectedData);
-		},
-		async makeContentData01(data) {
-			var result = {};
-			for (var i = 0; i < data.length; i++) {
+      this.loadTrendChart = true;
+    },
+    async getRowData02(selectedData) {
+      await this.setContentData04(selectedData);
+    },
+    async makeContentData01(data) {
+      var result = {};
+      for (var i = 0; i < data.length; i++) {
         if (!result.hasOwnProperty(data[i]["gdIdxId"])) {
           result[data[i]["gdIdxId"]] = {
             gdIdxId: data[i]["gdIdxId"],
             gdIdxNm: data[i]["gdIdxNm"],
-						data: [],
-					};
+            data: [],
+          };
 
           result[data[i]["gdIdxId"]]["data"].push({
-						...data[i],
-					});
-				} else {
+            ...data[i],
+          });
+        } else {
           result[data[i]["gdIdxId"]]["data"].push({
-						...data[i],
-					});
-				}
-			}
+            ...data[i],
+          });
+        }
+      }
 
-			var idxData = await this.postApiReturn({
+      var idxData = await this.postApiReturn({
 				apiKey: 'selectEnrgUseMainIdxDesc',
 				resKey: 'eqpmIndMntrData',
-				sendParam: {
-					eqpmGrpId: this.selectValue03,
-				},
-			});
+        sendParam: {
+          eqpmGrpId: this.selectValue03,
+        },
+      });
 
-			for (var i = 0; i < idxData.length; i++) {
+      for (var i = 0; i < idxData.length; i++) {
         if (!result.hasOwnProperty(idxData[i]["gdIdxId"])) {
           result[idxData[i]["gdIdxId"]] = {
             gdIdxId: idxData[i]["gdIdxId"],
             gdIdxNm: idxData[i]["gdIdxNm"],
-						data: [],
-					};
-				}
-			}
+            data: [],
+          };
+        }
+      }
 
-			return result;
-		},
-		async setChartGroup01(data) {
-			this.loadChart = false;
-			await this.$nextTick();
-			this.initChartGroup01(data);
-			this.setChartGroup01Data(data);
-			this.loadChart = true;
-		},
-		initChartGroup01(data) {
-			var dataKeyList = Object.keys(data);
-			var currentChartData = null;
-			var chartKey = null;
+      return result;
+    },
+    async setChartGroup01(data) {
+      this.loadChart = false;
+      await this.$nextTick();
+      this.initChartGroup01(data);
+      this.setChartGroup01Data(data);
+      this.loadChart = true;
+    },
+    initChartGroup01(data) {
+      var dataKeyList = Object.keys(data);
+      var currentChartData = null;
+      var chartKey = null;
 
-			for (var i = 0; i < dataKeyList.length; i++) {
-				currentChartData = data[dataKeyList[i]];
+      for (var i = 0; i < dataKeyList.length; i++) {
+        currentChartData = data[dataKeyList[i]];
 				chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];
 
-				this.setPageData({
-					[chartKey]: this.getGroup01ChartOption(),
-				});
-			}
-		},
-		setChartGroup01Data(data) {
-			var dataKeyList = Object.keys(data);
-			var currentChartData = null;
-			var chartKey = null;
-			var xAxisData = null;
-			var seriesData = null;
+        this.setPageData({
+          [chartKey]: this.getGroup01ChartOption(),
+        });
+      }
+    },
+    setChartGroup01Data(data) {
+      var dataKeyList = Object.keys(data);
+      var currentChartData = null;
+      var chartKey = null;
+      var xAxisData = null;
+      var seriesData = null;
 
-			xAxisData = this.makeChartGroup01XaxisData();
+      xAxisData = this.makeChartGroup01XaxisData();
 
-			for (var i = 0; i < dataKeyList.length; i++) {
-				seriesData = new Array(xAxisData.length).fill(NaN);
+      for (var i = 0; i < dataKeyList.length; i++) {
+        seriesData = new Array(xAxisData.length).fill(NaN);
 
-				currentChartData = data[dataKeyList[i]];
+        currentChartData = data[dataKeyList[i]];
         chartKey = "chartGroup01_" + currentChartData["gdIdxId"];
 
         for (var j = 0; j < currentChartData["data"].length; j++) {
           seriesData[currentChartData["data"][j]["dataNum"]] =
             currentChartData["data"][j]["totVal"];
-				}
-
-        // console.log("text seri data", seriesData);
+        }
 
         this.$store.state.pageData[myPrgmId][chartKey]["xAxis"]["data"] = xAxisData;
         this.$store.state.pageData[myPrgmId][chartKey]["series"][0]["data"] = seriesData;
-
-        console.log("chart data", this.$store.state.pageData[myPrgmId][chartKey]);
-			}
-		},
-		getGroup01ChartOption() {
-			var chartOption = Utility.defaultChartOption(true);
+      }
+    },
+    getGroup01ChartOption() {
+      var chartOption = Utility.defaultChartOption(true);
 
       chartOption["series"][0]["type"] = "line";
       chartOption["grid"]["bottom"] = "3%";
@@ -871,75 +873,86 @@ export default {
         color: "#D32029",
       };
 
-			return chartOption;
-		},
-		makeChartGroup01XaxisData() {
-			var result = [];
-			var paramsDt = this.fromDt;
+      // Add dashed horizontal grid lines from y-axis
+      chartOption["yAxis"] = {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed", // Makes the lines dashed
+          },
+        },
+      };
+
+      return chartOption;
+    },
+    makeChartGroup01XaxisData() {
+      var result = [];
+      var paramsDt = this.fromDt;
 
       if (this.pageData.cmCycle == "CYC_MONTH") {
-				var tempDate = new Date(
+        var tempDate = new Date(
           paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
-				);
-				var lastDayOfMonth = getLastDayOfMonth(tempDate);
+        );
+        var lastDayOfMonth = getLastDayOfMonth(tempDate);
 
-				for (var i = 1; i <= lastDayOfMonth; i++) {
-					result.push(i);
-				}
+        for (var i = 1; i <= lastDayOfMonth; i++) {
+          result.push(i);
+        }
       } else if (this.pageData.cmCycle == "CYC_DAY") {
-				for (var i = 0; i < 24; i++) {
-					result.push(i);
-				}
-			}
+        for (var i = 0; i < 24; i++) {
+          result.push(i);
+        }
+      }
 
-			return result;
-		},
-		makeTrendChartXaxisData() {
-			var result = [];
-			var paramsDt = this.fromDt;
-			var timezoneOffset = new Date().getTimezoneOffset() * 60000;
+      return result;
+    },
+    makeTrendChartXaxisData() {
+      var result = [];
+      var paramsDt = this.fromDt;
+      var timezoneOffset = new Date().getTimezoneOffset() * 60000;
 
       if (this.pageData.cmCycle == "CYC_MONTH") {
-				var tempDate = new Date(
+        var tempDate = new Date(
           paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
-				);
-				var lastDayOfMonth = getLastDayOfMonth(tempDate);
+        );
+        var lastDayOfMonth = getLastDayOfMonth(tempDate);
 
-				tempDate = new Date(tempDate - timezoneOffset);
-				result.push(tempDate.toISOString());
+        tempDate = new Date(tempDate - timezoneOffset);
+        result.push(tempDate.toISOString());
 
-				for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
-					tempDate = addHours(1, tempDate);
-					result.push(tempDate.toISOString());
-				}
+        for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
+          tempDate = addHours(1, tempDate);
+          result.push(tempDate.toISOString());
+        }
       } else if (this.pageData.cmCycle == "CYC_DAY") {
-				var tempDate = new Date(
-					paramsDt.substring(0, 4) +
+        var tempDate = new Date(
+          paramsDt.substring(0, 4) +
             "-" +
-						paramsDt.substring(4, 6) +
+            paramsDt.substring(4, 6) +
             "-" +
-						paramsDt.substring(6, 8) +
+            paramsDt.substring(6, 8) +
             " 00:00"
-				);
+        );
 
-				tempDate = new Date(tempDate - timezoneOffset);
-				result.push(tempDate.toISOString());
+        tempDate = new Date(tempDate - timezoneOffset);
+        result.push(tempDate.toISOString());
 
-				for (var i = 0; i < 23; i++) {
-					tempDate = addHours(1, tempDate);
-					result.push(tempDate.toISOString());
-				}
-			}
+        for (var i = 0; i < 23; i++) {
+          tempDate = addHours(1, tempDate);
+          result.push(tempDate.toISOString());
+        }
+      }
 
-			return result;
-		},
-	},
+      return result;
+    },
+  },
 };
 
 function addHours(h, date) {
-	date.setTime(date.getTime() + h * 60 * 60 * 1000);
+  date.setTime(date.getTime() + h * 60 * 60 * 1000);
 
-	return date;
+  return date;
 }
 
 function getLastDayOfMonth(date) {
@@ -947,30 +960,30 @@ function getLastDayOfMonth(date) {
 }
 
 const defaultData = {
-	dateInitedFlag: false,
+  dateInitedFlag: false,
   cmCycle: "CYC_MONTH",
-	cmCycleList: [
+  cmCycleList: [
     { idx: 0, text: "월", value: "CYC_MONTH" },
     { idx: 1, text: "일", value: "CYC_DAY" },
-	],
-	defaultRange: {
-		CYC_MONTH: 1,
-		CYC_DAY: 1,
-	},
+  ],
+  defaultRange: {
+    CYC_MONTH: 1,
+    CYC_DAY: 1,
+  },
   fromDt: Utility.setFormatDate(new Date(), "YYYYMM"), // 조회 시작일
 
-	grid01: {
-		data: [],
-		column: [],
-		option: {},
-	},
+  grid01: {
+    data: [],
+    column: [],
+    option: {},
+  },
 
-	grid02: {
-		data: [],
-		column: [],
-		option: {},
-	},
+  grid02: {
+    data: [],
+    column: [],
+    option: {},
+  },
 
-	trendChart: Utility.defaultChartOption(true),
+  trendChart: Utility.defaultChartOption(true),
 };
 </script>
diff --git a/pages/ems/effc/EnrgUsePlanPage.vue b/pages/ems/effc/EnrgUsePlanPage.vue
index 046b099..e86ff17 100644
--- a/pages/ems/effc/EnrgUsePlanPage.vue
+++ b/pages/ems/effc/EnrgUsePlanPage.vue
@@ -304,7 +304,7 @@ export default {
 					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
 					const el2 = document.createElement('button');
 					$(el2).addClass('edit-btn blue--text');
-					el2.innerText = '편집하다';
+					el2.innerText = '수정';
 					elDiv.appendChild(el2);
 
 					this.el = elDiv;
@@ -415,7 +415,7 @@ export default {
 				{
 					header: '구분',
 					name: 'gubun',
-					width: 80,
+					width: 200,
 					align: 'left',
 					// hidden: true,
 					formatter({ value }) {
@@ -447,7 +447,7 @@ export default {
 				myColumns.push({
 					header: i.toString() + '월',
 					name: qty,
-					width: 73,
+					width: 80,
 					align: 'right',
 					editor: 'text',
 					formatter: this.numberFormatter,
diff --git a/pages/ems/effc/EnrgUseTotSummPage.vue b/pages/ems/effc/EnrgUseTotSummPage.vue
index 14b0043..c96e661 100644
--- a/pages/ems/effc/EnrgUseTotSummPage.vue
+++ b/pages/ems/effc/EnrgUseTotSummPage.vue
@@ -47,13 +47,14 @@
     <v-row ref="contents" style="overflow: auto">
       <v-col>
         <div v-for="(value, key, index) in contentData" :key="'key1_' + index">
-          <v-card-title class="d-flex align-center justify-space-between pa-3">
-            <span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
-          </v-card-title>
+          <v-card style="background: none">
+            <v-card-title class="d-flex align-center justify-space-between pa-3">
+              <span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
+            </v-card-title>
+          </v-card>
           <v-row>
             <v-col :cols="3" v-for="(item, i) in value.chartData" :key="'key2_' + i">
             <v-card>
-
               <div
                 class="v-box"
                 style="height: 330px; position: relative"
@@ -125,8 +126,7 @@
                   </div>
                 </v-col>
               </div>
-                          </v-card>
-
+            </v-card>
             </v-col>
           </v-row>
         </div>
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index 187fdcb..b1ba5f4 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -105,8 +105,7 @@
                 :gridName="gridName"
                 :parentPrgmId="myPrgmId"
               />
-
-              <div class="pagination-wrapper">
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
                 <pagination
                   id="pagination"
                   :total-count="totalCount"
@@ -201,8 +200,7 @@ export default {
       gridName: "grid01",
 
       enrgUseMainIdxDesc: [],
-      itemsPerPage: 10,
-      itemsPerPageArray: [10, 20, 30],
+      itemsPerPageArray: [10, 20, 50],
       limit: 10,
       page: 1,
       totalCount: 0,
@@ -433,6 +431,9 @@ export default {
           name: "eqpmGrpNm",
           align: "left",
           width: 200,
+        },
+        { header: "eqpmId", name: "eqpmId", hidden: true },
+        { header: "설비명", name: "eqpmNm", align: "left", width: 200,
           // Render custom button to switch page instead of double click on row
           renderer: {
             type: CustomButton,
@@ -465,8 +466,6 @@ export default {
             },
           },
         },
-        { header: "eqpmId", name: "eqpmId", hidden: true },
-        { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
         {
           header: "계획량",
           name: "planVal",
diff --git a/plugins/vuetify.js b/plugins/vuetify.js
index 408442c..b6cdc06 100644
--- a/plugins/vuetify.js
+++ b/plugins/vuetify.js
@@ -16,7 +16,38 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
+import anticonAppStore from '~/components/icons/anticonAppStore';
+import anticonBulb from '~/components/icons/anticonBulb';
+import anticonDesktop from '~/components/icons/anticonDesktop';
+import anticonDrag from '~/components/icons/anticonDrag';
+import anticonFileText from '~/components/icons/anticonFileText';
+import anticonLineChart from '~/components/icons/anticonLineChart';
+import anticonMessage from '~/components/icons/anticonMessage';
+import anticonNoteExpand from '~/components/icons/anticonNoteExpand';
+import anticonPieChart from '~/components/icons/anticonPieChart';
+import anticonSearch from '~/components/icons/anticonSearch';
+import anticonSetting from '~/components/icons/anticonSetting';
 
+const anticons = {
+	anticonAppStore,
+	anticonBulb,
+	anticonDesktop,
+	anticonDrag,
+	anticonFileText,
+	anticonLineChart,
+	anticonMessage,
+	anticonNoteExpand,
+	anticonPieChart,
+	anticonSearch,
+	anticonSetting,
+};
+
+const anticonVal = {};
+Object.keys(anticons).forEach(key => {
+	anticonVal[`${key}`] = {
+		component: anticons[key]
+	}
+});
 
 Vue.use(Vuetify);
 
@@ -77,6 +108,7 @@ export default new Vuetify({
 			icoExpandAlt: {
 				component: icoExpandAlt,
 			},
+			...anticonVal,
 		},
 	},
 });
diff --git a/store/modules/list.js b/store/modules/list.js
index cf61676..3010f05 100644
--- a/store/modules/list.js
+++ b/store/modules/list.js
@@ -210,6 +210,8 @@ const INIT_URL_STATE = {
 	// prgmId: "TMP0013" 검침실적마감관리 ems/ReadResultCloseMngPage
 	selectReadResultCloseMng:
 		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMng', // 일일검침정보
+	selectReadResultCloseMngPageTotal:
+		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMngPageTotal', // 일일검침정보
 	saveReadResultCloseMngSP:
 		'ems/base/ReadResultCloseMngCtr/saveReadResultCloseMngSP', // 전월 or 일 마감
 	saveReadResultCloseMngSPMM: