diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 30bbcb5..faa3804 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -9,6 +9,8 @@
 @import "./common/card.scss";
 @import "./common/tabs.scss";
 @import "./common/numericInput.scss";
+@import "./common/editor.scss";
+
 
 html,
 body {
@@ -484,6 +486,10 @@ a {
       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");
@@ -1166,14 +1172,14 @@ a {
       }
     }
 
-    .toastui-editor-contents {
-      * {
-        color: map-deep-get($config,
-          #{$theme},
-          "tui-editor-contents-color"
-        ) !important;
-      }
-    }
+    // .toastui-editor-contents {
+    //   * {
+    //     color: map-deep-get($config,
+    //       #{$theme},
+    //       "tui-editor-contents-color"
+    //     ) !important;
+    //   }
+    // }
 
     .lnb-logo {
       color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
diff --git a/assets/scss/common/button.scss b/assets/scss/common/button.scss
index 505da79..5836aae 100644
--- a/assets/scss/common/button.scss
+++ b/assets/scss/common/button.scss
@@ -66,6 +66,12 @@
       }
     }
 
+    .custom-action-btn{
+      height: 24px;
+      width: 24px;
+      font-size: 12px;
+    }
+
     .v-btn {
       background-color: map-deep-get($config,
         #{$theme},
diff --git a/assets/scss/common/editor.scss b/assets/scss/common/editor.scss
new file mode 100644
index 0000000..a12aba6
--- /dev/null
+++ b/assets/scss/common/editor.scss
@@ -0,0 +1,474 @@
+@charset "utf-8";
+.toastui-editor-dark .toastui-editor-defaultUI {
+  border-color: #424242;
+  color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-md-container,
+.toastui-editor-dark .toastui-editor-ww-container {
+  background-color: #212224;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar {
+  background-color: #212224;
+  border-bottom-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons {
+  background-position-y: -49px;
+  border-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
+  background-color: #36383f;
+  border-color: #36383f;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-divider {
+  background-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-tooltip {
+  background-color: #535662;
+}
+
+.toastui-editor-dark .toastui-editor-tooltip .arrow {
+  background-color: #535662;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before {
+  color: #8f939f;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before {
+  color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch {
+  background-color: #2b4455;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch {
+  background-color: #2b4455;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before {
+  background-color: #8f939f;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before {
+  background-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter {
+  background-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-mode-switch {
+  border-top-color: #424242;
+  background-color: #212224;
+}
+
+.toastui-editor-dark .toastui-editor-mode-switch .tab-item {
+  border-color: #424242;
+  background-color: #212224;
+  color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
+  border-top-color: #424242;
+  background-color: #212224;
+  color: #1677FF;
+}
+
+.toastui-editor-dark .toastui-editor-popup,
+.toastui-editor-dark .toastui-editor-context-menu {
+  background-color: #121212;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  border-color: #494c56;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover {
+  background-color: #36383f;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body label {
+  color: #9a9da3;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text'] {
+  background-color: transparent;
+  color: #eee;
+  border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus {
+  outline-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled {
+  color: #969aa5;
+  border-color: #303238;
+  background-color: rgba(48, 50, 56, 0.4);
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
+  border-bottom-color: #292e37;
+  color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
+  border-bottom-color: #3c424d;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
+  color: #67ccff;
+  border-bottom-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name {
+  border-color: #303238;
+  color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button {
+  border-color: #303238;
+  background-color: #232428;
+  color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover {
+  border-color: #494c56;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button {
+  color: #eee;
+  border-color: #303238;
+  background-color: #232428;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover {
+  border-color: #494c56;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button {
+  color: #121212;
+  background-color: #67ccff;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
+  color: #121212;
+  background-color: #32baff;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell {
+  border-color: #303238;
+  background-color: #121212;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header {
+  border-color: #303238;
+  background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer {
+  border-color: rgba(103, 204, 255, 0.4);
+  background-color: rgba(103, 204, 255, 0.1);
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description {
+  color: #eee
+}
+
+.toastui-editor-dark .toastui-editor-md-tab-container {
+  background-color: #232428;
+  border-bottom-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-md-tab-container .tab-item {
+  border-color: #393b42;
+  background-color: #2d2f34;
+  color: #757a86;
+}
+
+.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active {
+  border-bottom-color: #121212;
+  background-color: #121212;
+  color: #eee;
+}
+
+
+.toastui-editor-dark .toastui-editor-context-menu .menu-group {
+  border-bottom-color: #303238;
+  color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before {
+  background-position-y: -126px;
+}
+
+.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover {
+  background-color: #36383f;
+}
+
+.toastui-editor-dark .toastui-editor-context-menu li.disabled {
+  color: #969aa5;
+}
+
+.toastui-editor-dark .toastui-editor-dropdown-toolbar {
+  border-color: #494c56;
+  background-color: #232428;
+}
+
+.toastui-editor-dark .ProseMirror,
+.toastui-editor-dark .toastui-editor-contents p,
+.toastui-editor-dark .toastui-editor-contents h1,
+.toastui-editor-dark .toastui-editor-contents h2,
+.toastui-editor-dark .toastui-editor-contents h3,
+.toastui-editor-dark .toastui-editor-contents h4,
+.toastui-editor-dark .toastui-editor-contents h5,
+.toastui-editor-dark .toastui-editor-contents h6 {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents h1,
+.toastui-editor-dark .toastui-editor-contents h2 {
+  border-color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents del {
+  color: #777980;
+}
+
+.toastui-editor-dark .toastui-editor-contents blockquote {
+  border-color: #303135;
+}
+
+.toastui-editor-dark .toastui-editor-contents blockquote p,
+.toastui-editor-dark .toastui-editor-contents blockquote ul,
+.toastui-editor-dark .toastui-editor-contents blockquote ol {
+  color: #777980;
+}
+
+.toastui-editor-dark .toastui-editor-contents pre {
+  background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-contents pre code {
+  background-color: transparent;
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents code {
+  color: #c1798b;
+  background-color: #35262a;
+}
+
+.toastui-editor-dark .toastui-editor-contents div {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-ww-code-block-language {
+  border-color: #303238;
+  background-color: #121212;
+}
+
+.toastui-editor-dark .toastui-editor-ww-code-block-language input {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after {
+  background-color: #232428;
+  border: 1px solid #393b42;
+  color: #eee;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor {
+  background: #392d31;
+  color: #fff;
+  border-color: #327491;
+}
+
+.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
+  color: #fff;
+  border-color: #327491;
+}
+
+.toastui-editor-dark .toastui-editor-custom-block-view button {
+  background-color: #232428;
+  border-color: #393b42;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
+}
+
+.toastui-editor-dark .toastui-editor-custom-block-view button:hover {
+  background-color: #232428;
+  border-color: #595c68;
+}
+
+.toastui-editor-dark .toastui-editor-custom-block-view .info {
+  color: #65acca;
+}
+
+.toastui-editor-dark .toastui-editor-contents table {
+  border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-contents table th,
+.toastui-editor-dark .toastui-editor-contents table td {
+  border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-contents table th {
+  background-color: #3a3c42;
+}
+
+.toastui-editor-dark .toastui-editor-contents table td,
+.toastui-editor-dark .toastui-editor-contents table td p {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected {
+  background-color: rgba(103, 204, 255, 0.5);
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected {
+  background-color: rgba(103, 204, 255, 0.3);
+}
+
+.toastui-editor-dark table.ProseMirror-selectednode {
+  outline-color: #67ccff;
+}
+
+.toastui-editor-dark .html-block.ProseMirror-selectednode {
+  outline-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-contents ul,
+.toastui-editor-dark .toastui-editor-contents menu,
+.toastui-editor-dark .toastui-editor-contents ol,
+.toastui-editor-dark .toastui-editor-contents dir {
+  color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-contents ul > li::before {
+  background-color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-contents hr {
+  border-color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-contents a {
+  color: #4b96e6;
+}
+
+.toastui-editor-dark .toastui-editor-contents a:hover {
+  color: #1f70de;
+}
+
+.toastui-editor-dark .toastui-editor-contents .image-link:hover::before {
+  border-color: #393b42;
+  background-color: #232428;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.toastui-editor-dark .toastui-editor-contents .task-list-item::before {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==');
+  background-color: transparent;
+}
+
+.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');
+}
+
+.toastui-editor-dark .toastui-editor-md-delimiter,
+.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter,
+.toastui-editor-dark .toastui-editor-md-thematic-break,
+.toastui-editor-dark .toastui-editor-md-link,
+.toastui-editor-dark .toastui-editor-md-table,
+.toastui-editor-dark .toastui-editor-md-block-quote {
+  color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-md-meta,
+.toastui-editor-dark .toastui-editor-md-html {
+  color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text {
+  color: #777980;
+}
+
+.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
+.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta {
+  color: #b3b5bc;
+}
+
+.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
+.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd {
+  color: #4b96e6;
+}
+
+.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even {
+  color: #ef6767;
+}
+
+.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text {
+  color: #c1798b;
+}
+
+.toastui-editor-dark .toastui-editor-md-code {
+  background-color: #35262a;
+}
+
+.toastui-editor-dark .toastui-editor-md-code-block-line-background {
+  background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta {
+  color: #aaa;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block-line-background {
+  background-color: #392d31;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter {
+  color: #327491;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta {
+  color: #65acca;
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
+  background-color: rgba(255, 250, 193, 0.5);
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
+.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
+  background-color: rgba(255, 250, 193, 0.5);
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight {
+  color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
+.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
+  background-color: rgba(255, 250, 193, 0.25);
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
+  background-color: rgba(255, 250, 193, 0.25);
+}
\ No newline at end of file
diff --git a/assets/scss/common/input.scss b/assets/scss/common/input.scss
index afec4e7..aff0420 100644
--- a/assets/scss/common/input.scss
+++ b/assets/scss/common/input.scss
@@ -247,9 +247,16 @@ input[type="checkbox"] {
   .v-application.#{$theme}-mode {
 
     .ant-checkbox-wrapper {
+      .ant-checkbox {
+        .ant-checkbox-inner {
+          background-color: map-deep-get($config, #{$theme}, "ant-checkbox-bg"); // background for unchecked checkbox
+          border-color: map-deep-get($config, #{$theme}, "ant-checkbox-border");
+        }
+      }
+
       .ant-checkbox-checked {
         .ant-checkbox-inner {
-          background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
+          background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg"); // background for checked checkbox
           border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
           color:map-deep-get($config, #{$theme}, "ant-btn-primary-color");
 
diff --git a/assets/scss/datepicker.scss b/assets/scss/datepicker.scss
index 0bfa128..e2e4b89 100644
--- a/assets/scss/datepicker.scss
+++ b/assets/scss/datepicker.scss
@@ -19,6 +19,13 @@
       border-color: currentColor;
       // border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
 
+      &:hover {
+				border-color: map-deep-get($config, #{$theme}, "v-input-fieldset-hover-color" ) !important;
+			}
+			&:has(.v-input--is-focused){
+				border-width: 2px;
+			}
+
       &.datepicker-large {
         height: 40px;
       }
diff --git a/assets/scss/var.scss b/assets/scss/var.scss
index b4b3846..85d3aa3 100644
--- a/assets/scss/var.scss
+++ b/assets/scss/var.scss
@@ -110,11 +110,11 @@ $config: (
     tui-grid-border-horziontal-color: #212224,
     tui-grid-border-vertical-color: #FFFFFF0F,
     tui-grid-cell-backgroundColor: #212224,
-    tui-grid-cell-color: #FFFFFFA6,
-    tui-grid-cell-insert-color: #13636c,
+    tui-grid-cell-color: #FFFFFFD9,
+    tui-grid-cell-insert-color: #2B2111,
     tui-grid-cell-selected-color: #0A224F,
     tui-grid-cell-modify-color: #13636c,
-    tui-grid-cell-removed-color: #f6637b,
+    tui-grid-cell-removed-color: #2A1215,
     tui-grid-cell-disabled-color: rgb(170, 170, 170),
     tui-grid-cell-hover-backgroundColor: #2d4571,
     v-tabs-items-border-color: #FFFFFF0F,
@@ -175,7 +175,10 @@ $config: (
     btn-header-select-color:#FFFFFFD9,
     subtitle-tab: #FFFFFFA6,
     v-header-border: #424242,
+    v-chart-border: #424242,
     v-sidebar-border: #303030,
+    ant-checkbox-bg: #212224,
+    ant-checkbox-border: #424242,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -314,6 +317,9 @@ $config: (
     btn-header-select-bg:#FFFFFF,
     subtitle-tab: #000000A6,
     v-header-border: #D9D9D9,
+    v-chart-border: #D9D9D9,
     v-sidebar-border: #F0F0F0,
+    ant-checkbox-bg: #FFFFFF,
+    ant-checkbox-border: #D9D9D9,
   ),
 );
\ No newline at end of file
diff --git a/components/common/Chart.vue b/components/common/Chart.vue
index 4dcc7c1..3aacaf6 100644
--- a/components/common/Chart.vue
+++ b/components/common/Chart.vue
@@ -61,7 +61,8 @@ export default {
 			isDarkMode: 'isDarkMode',
 			chartOption(state) {
 				var dark_Col = [
-					'#01AE6A',
+					'#79B100',
+					// '#01AE6A',
 					'#FFB046',
 					'#F6637B',
 					'#944FE9',
@@ -194,7 +195,8 @@ export default {
 				var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];
 
 				var light_Col = [
-					'#3CC380',
+					'#3BAD43',
+					// '#3CC380',
 					'#FFB13B',
 					'#F98694',
 					'#CF74E5',
diff --git a/components/common/Datepicker.vue b/components/common/Datepicker.vue
index f4b0ce4..466f567 100644
--- a/components/common/Datepicker.vue
+++ b/components/common/Datepicker.vue
@@ -426,7 +426,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "@/assets/scss/datepicker.scss";
+// @import "@/assets/scss/datepicker.scss";
 
 ::v-deep {
 	.tui-timepicker-row {
diff --git a/components/common/Grid.vue b/components/common/Grid.vue
index cdaad76..b0765a0 100644
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@@ -9,7 +9,6 @@
 		@dblclick="dblClick"
 		@mouseover="mouseoverEvent"
 		@mouseout="mouseoutEvent"
-		@mousedown="onMousedown"
 		@focusChange="focusChangeEvt"
 	/>
 </template>
@@ -268,15 +267,7 @@ export default {
 				}
 			});
 		},
-		onMousedown(evt) {
-			this.handleSelectedRow(evt);
-		},
 		focusChangeEvt(e) {
-			if(e.rowKey === 0) {
-				this.handleSelectedRow(e);	
-			}
-		},
-		handleSelectedRow(e) {
 			// console.log('focusChangeEvt1...')
 			if (this.preventFocusChangeEvent(e)) {
 				// console.log('prevent focusChangeEvt')
@@ -299,7 +290,6 @@ export default {
 		startEditing(e) {
 			// console.log('startEditing1...')
 			if (this.preventFocusChangeEvent(e)) {
-				// console.log('prevent startEditing')
 				return;
 			}
 
@@ -311,7 +301,6 @@ export default {
 			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
-				// console.log("E::", this.gridInstance.invoke("getRow", e.rowKey));
 				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
 				this.$emit(
 					'getRowsData',
diff --git a/components/common/button/ActionButtons.vue b/components/common/button/ActionButtons.vue
index 4d6a7f3..ecf39ce 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" >
+		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" class="custom-action-btn">
 		</a-button>
-		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">
+		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add" class="custom-action-btn">
 		</a-button>
 	</div>
 </template>
diff --git a/components/common/button/BtnSearch.vue b/components/common/button/BtnSearch.vue
index a1d3f67..1346b92 100644
--- a/components/common/button/BtnSearch.vue
+++ b/components/common/button/BtnSearch.vue
@@ -10,7 +10,7 @@ export default {
 		size: {
 			type: String,
 			require: false,
-			default: "middle", // small, middle, large
+			default: "default", // small, default, large
 		}
 	},
 	methods: {
diff --git a/components/common/form/CheckBox.vue b/components/common/form/CheckBox.vue
index 99cb216..193b77e 100644
--- a/components/common/form/CheckBox.vue
+++ b/components/common/form/CheckBox.vue
@@ -12,15 +12,26 @@
 			</label>
 		</v-col>
 		<v-col :cols="item.label ? 7 : ''" >
-			<v-checkbox
+			<!-- <v-checkbox
 				v-model="chkValue"
 				:disabled="disabledFlag"
 				:readonly="item.readonly || false"
 				:required="item.required || false"
 				:false-value="false"
-				:color="isDarkMode ? '#fff' : '#1890ff'"
-				@change="modifyValue"
-			></v-checkbox>
+				:color="isDarkMode ? '#1668DC' : '#1890ff'"
+				@change="modifyValue"			
+  				class="small-checkbox"
+			></v-checkbox> -->
+			<a-checkbox
+        		v-model="chkValue"
+				:disabled="disabledFlag"
+				:readonly="item.readonly || false"
+				:required="item.required || false"
+				:false-value="false"
+				:color="isDarkMode ? '#1668DC' : '#1890ff'"
+				@change="modifyValue"	
+			>
+			</a-checkbox>
 		</v-col>
 	</v-row>
 </template>
@@ -141,7 +152,7 @@ export default {
 		modifyValue(e) {
 			const dt = {
 				columnName: this.item.valueNm,
-				value: e,
+				value: e.target.checked,
 			};
 			this.$emit('gridEditingFinish', dt);
 		},
diff --git a/components/common/modal/EnrgUsePlanModiPop.vue b/components/common/modal/EnrgUsePlanModiPop.vue
index 4fa2137..db7478e 100644
--- a/components/common/modal/EnrgUsePlanModiPop.vue
+++ b/components/common/modal/EnrgUsePlanModiPop.vue
@@ -65,13 +65,10 @@
 				
 				<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
 				<div :style="'height: calc(50vh)'">
-					<div class="d-flex align-center justify-space-between pa-4" style="height: 10%">
-						<v-card-title class="pa-0 custom-title-4">사용량 계획</v-card-title>
-					</div>
 					<!-- <div id="chartParent" ref="chartParent" :style="'height: 80%'"> -->
-					<div id="chartParent" ref="chartParent" style="height: 70%">
+					<div id="chartParent" ref="chartParent" style="height: 100%" class="px-6">
 						<component
-							class="w100 h100"
+							class="w100 h100 py-7 custom-chart"
 							:is="loadChart ? 'Chart' : null"
 							:parentPrgmId="parentPrgmId"
 							:modalId="modalId"
@@ -130,7 +127,6 @@
 						/>
 					</div> -->
 				
-				<v-divider></v-divider>
 				<v-card-actions class="pa-5 d-flex align-center justify-end">
 					<a-button color="primary" type="default" class="mr-2" dark @click="closePop()">취소</a-button>					
 					<a-button color="primary" type="primary" dark @click="setUpdate()">확정</a-button>
@@ -533,7 +529,7 @@ export default {
 			seriesData = data.map(item => ({
 				name: item.gubun == '2PLAN' ? '계획' : '전년실적',
 				type: item.gubun == '2PLAN' ? 'line' : 'bar',
-				data: targetMonthList.map(obj => item[obj] || null)
+				data: targetMonthList.map(obj => item[obj] || null),
 				// data: targetMonthList.map(obj => item[obj] || 0)
 			}));
 			this.nowSeriesData = seriesData;
@@ -558,7 +554,6 @@ export default {
 				series: seriesData,
 				tooltip: tooltipData
 			};
-			// console.log('option', option);
 			await this.$nextTick(() => {
 				
 			});
@@ -601,7 +596,6 @@ export default {
 			sData2 = nowSeriesData.filter(item => {
 				return item.name == '계획';
 			})[0]['data'];
-			// console.log('sData1', sData);			
 			if(targetMonth.includes('qty')){
 				targetMonth = parseInt(targetMonth.slice(-2));
 			}
@@ -610,13 +604,11 @@ export default {
 					sData2[i] = sData[i] * targetRatio;
 				}
 			}
-			// console.log('sData2', sData2);
 			seriesData = nowSeriesData.map(item => ({
 				...item,
 				data: item.name == '계획' ? sData2 : item.data
 			}));
 			
-			// console.log('seriesData', seriesData);
 			await this.$nextTick(() => {
 				
 			});
@@ -643,4 +635,4 @@ let modifyEnrgUsePlanModalDataKey =
 	modifyEnrgUsePlanChart: Utility.defaultChartOption(true)
 };
 // 전력량 요금(원/kWh)
-</script>
+</script>
\ No newline at end of file
diff --git a/components/common/modal/EqpmSelectPop.vue b/components/common/modal/EqpmSelectPop.vue
index f601239..d3f3e5a 100644
--- a/components/common/modal/EqpmSelectPop.vue
+++ b/components/common/modal/EqpmSelectPop.vue
@@ -10,7 +10,10 @@
 		<v-col :cols="textCols">
 			<v-text-field readonly v-model="selectValue" append-icon="" :class="['v-input__custom', customClass]"
 				@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
-				:disabled="disabled || false"><template v-slot:append>
+				:disabled="disabled || false"
+				:placeholder="placeholder"
+				>
+				<template v-slot:append>
 					<!-- Custom SVG icon -->
 					<v-icon>$icoSearch</v-icon>
 				</template>
diff --git a/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue b/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
index e5c4fa6..0bc2e42 100644
--- a/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
+++ b/components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
-    <div class="d-flex justify-space-between align-center" style="min-height: 80px;">
-      <span class="txt custom-subtitle-tab">Data Set TAG 연결 정보</span>
+    <div class="d-flex justify-space-between align-center pb-5" >
+      <!-- <span class="txt custom-title-4">Data Set TAG 연결 정보</span> -->
+      <v-card-title class="pa-0">
+        Data Set TAG 연결 정보
+      </v-card-title>
       <Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList"
         :btnActionsFnc="btnActions" />
     </div>
@@ -14,22 +17,20 @@
         @gridEditingFinish="gridEditingFinish" />
     </div>
 
-    <div ref="formParent" style="min-height: 100px;" class="w100 h100">
-      <v-row ref="contents" class="w100">
-        <v-col :cols="6">
+    <div ref="formParent" class="h100">
+      <v-row align="end" ref="contents" class="">
+        <v-col>
           <component :is="'Datepicker'" :parentPrgmId="parentPrgmId" :label="'검색기간'" :labelCols="12" :textCols="12" />
         </v-col>
-        <v-col :cols="4">
+        <v-col >
           <component :is="'selectCodeList'" :parentPrgmId="parentPrgmId" :label="'주기'" dataKey="mdlDataTerm"
             :sendParam="{ commGrpCd: 'MDL_DATA_TERM', useFg: '1' }" :addAll="false" :labelCols="12" :textCols="12" :iconShow="true" />
         </v-col>
-        <v-col class="text-right align-self-end">
-          <a-button @click="jamoviProcClickEvent('view1')" type="primary" :ripple="false" class="mr-1">데이터 분석</a-button>
+      </v-row>
+      <v-row align="center" no-gutters class="searchFilter mt-2">
+        <v-col class="d-flex justify-end">
+          <a-button @click="jamoviProcClickEvent('view1')" type="primary" :ripple="false" class="mb-1">데이터 분석</a-button>
         </v-col>
-        <!-- <v-card class="searchFilter w100">
-          <v-row align="center" no-gutters>
-          </v-row>
-        </v-card> -->
       </v-row>
     </div>
   </div>
@@ -156,7 +157,7 @@ export default {
         {
           header: '모델 Data 구분',
           name: 'mdlDataTypeCd',
-          align: 'center',
+          align: 'left',
           width: 120,
           formatter({ value }) {
             var retVal = '';
@@ -173,7 +174,7 @@ export default {
         {
           header: '사용여부',
           name: 'useFg',
-          align: 'center',
+          align: 'left',
           width: 100,
           formatter({ value }) {
             value = value === true ? '1' : '0';
@@ -189,7 +190,7 @@ export default {
           //   }
           // }
         },
-        { header: '비고', name: 'rmrk', align: 'center' },
+        { header: '비고', name: 'rmrk', align: 'left' },
       ];
 
       this.setGridColumn({
diff --git a/components/pages/ems/EccInfo/EccIaoTab.vue b/components/pages/ems/EccInfo/EccIaoTab.vue
index 9153f96..a96c9e8 100644
--- a/components/pages/ems/EccInfo/EccIaoTab.vue
+++ b/components/pages/ems/EccInfo/EccIaoTab.vue
@@ -11,7 +11,7 @@
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 760px);">
+		<div ref="gridParent" >
 			<component
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
diff --git a/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue b/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
index 35f6f9a..4a8e007 100644
--- a/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
@@ -1,7 +1,9 @@
 <template>
 	<div>
-		<div class="d-flex justify-space-between align-center my-5" >
-			<span class="txt custom-subtitle-tab">설비 추가 정보</span>
+		<div class="d-flex justify-space-between align-center mb-5" >
+			<v-card-title class="txt custom-title-4 pa-0">
+				설비 추가 정보
+			</v-card-title>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"
@@ -120,10 +122,10 @@ export default {
 				bodyHeight: gridHeight,
 				minBodyHeight: gridHeight,
 				header: {
-					height: 28,
+					height: 38,
 				},
-				rowHeight: 29,
-				minRowHeight: 29,
+				// rowHeight: 39,
+				// minRowHeight: 29,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -263,11 +265,12 @@ export default {
 						}
 						return retVal;
 					},
+					minWidth: 230,
 				},
 				{
 					header: 'Data 구분',
 					name: 'addInfoDataKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = addInfoDataKindList.filter(
@@ -278,6 +281,7 @@ export default {
 						}
 						return retVal;
 					},
+					minWidth: 330,
 				},
 				{
 					header: '숫자 값',
@@ -308,6 +312,7 @@ export default {
 						// console.log('test :', test);
 						return data.row.addInfoDataKind;
 					},
+					minWidth: 330,
 				},
 				//{ header: "추가 정보 값", name: "addInfoVal", align: "center" , editor: "text",
 				//},
@@ -414,3 +419,4 @@ const dataPathDataExample = getPathDataExample({
 	type: '사용', note: '-'
 });
 </script>
+<style lang="scss" scoped> </style>
diff --git a/components/pages/ems/EqpmInfo/EqpmConstTab.vue b/components/pages/ems/EqpmInfo/EqpmConstTab.vue
index b68a035..63ba322 100644
--- a/components/pages/ems/EqpmInfo/EqpmConstTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmConstTab.vue
@@ -1,7 +1,10 @@
 <template>
 	<div>
-		<div class="d-flex justify-space-between align-center my-5" >
-			<span class="txt custom-subtitle-tab">설비 상수 정보</span>
+		<div class="d-flex justify-space-between align-center mb-5" >
+			<!-- <span class="txt custom-subtitle-tab">설비 상수 정보</span> -->
+			<v-card-title class="txt custom-title-4 pa-0">
+				설비 상수 정보
+			</v-card-title>
 			<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
 		</div>
 		<div ref="gridParent" style="min-height: calc(100vh - 800px);">
@@ -160,11 +163,11 @@ export default {
 				{ header: '회사 ID', name: 'comId', hidden: true },
 				{ header: '설비 번호', name: 'eqpmId', hidden: true },
 				// { header: '대상항목', name: 'objId', align: 'center', hidden: true},
-				{ header: '물리량 ID', name: 'pysclQtyId', align: 'left' },
-				{ header: '물리량 명', name: 'pysclQtyNm', align: 'left' },
-				{ header: '물리량값', name: 'pysclQtyVal', align: 'left' },
+				{ header: '물리량 ID', name: 'pysclQtyId', align: 'left', minWidth: 230, },
+				{ header: '물리량 명', name: 'pysclQtyNm', align: 'left', minWidth: 230, },
+				{ header: '물리량값', name: 'pysclQtyVal', align: 'left', minWidth: 230, },
 				// { header: '대상항목', name: 'objNm', align: 'left'},
-				{ header: '대상항목', name: 'objId', align: 'left' },
+				{ header: '대상항목', name: 'objId', align: 'left', minWidth: 230, },
 				{
 					header: '에너지원 명',
 					name: 'ercId',
@@ -386,7 +389,7 @@ const myEqpmConstDetail = [
 		required: true,
 		openMode: 'CONST',
 		cols: 6,
-		class: 'py-3 pl-4',
+		class: 'pt-3 pb-1 pl-4',
 		eqpmGrpDisableFlag: true,
 		// eqpmGrpId:'',
 		labelCols: 12,
@@ -406,7 +409,7 @@ const myEqpmConstDetail = [
 		disabled: true,
 		readonly: true,
 		cols: 6,
-		class: 'py-3 pt-1 pl-4',
+		class: 'pb-3 pt-0 pl-4',
 		align: 'right',
 		// class: 'py-2 d-none',
 		labelCols: 12,
@@ -441,3 +444,11 @@ const dataPathDataExample = getPathDataExample({
 	field2: '2222',
 });
 </script>
+
+<style lang="scss" scoped>
+	::v-deep {
+		.tui-grid-layer-state {
+			top: 40px !important;
+		}
+	}
+</style>
diff --git a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
index e600490..6d3b7db 100644
--- a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
@@ -1,7 +1,10 @@
 <template>
 	<div>
-		<div class="d-flex justify-space-between align-center my-5" >
-			<span class="txt custom-subtitle-tab">설비 입출력 정보</span>
+		<div class="d-flex justify-space-between align-center mb-5" >
+			<!-- <span class="txt custom-subtitle-tab">설비 입출력 정보</span> -->
+			<v-card-title class="txt custom-title-4 pa-0">
+				설비 입출력 정보
+			</v-card-title>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"
@@ -226,6 +229,7 @@ export default {
 
 						return retVal;
 					},
+					minWidth: 150,
 				},
 				{
 					header: '대상 유형',
@@ -242,9 +246,10 @@ export default {
 
 						return retVal;
 					},
+					minWidth: 150,
 				},
 				{ header: '물리량', name: 'pysclQtyId', align: 'left', hidden: true },
-				{ header: '물리량', name: 'pysclQtyNm', align: 'left' },
+				{ header: '물리량', name: 'pysclQtyNm', align: 'left', minWidth: 150, },
 				{
 					header: '물리량값',
 					name: 'pysclQtyVal',
@@ -269,6 +274,7 @@ export default {
 						);
 						return newValue[0].commCdNm;
 					},
+					minWidth: 100,
 				},
 				{ header: '분배율', name: 'distRt', align: 'right' },
 				{ header: '등록 사용자', name: 'regUserNo', hidden: true },
diff --git a/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue b/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue
index d009a7e..5745432 100644
--- a/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue
+++ b/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
 		<div
-			class="d-flex justify-space-between align-center"
-			style="height: 80px;"
+			class="d-flex justify-space-between"
+			style="height: 45px;"
 		>
 			<span class="txt custom-subtitle-tab">검침 대상 추가 정보</span>
 			<Buttons
@@ -143,7 +143,6 @@ export default {
 			class CustomRenderer {
 				constructor(props) {
 					//const { min, max } = props.columnInfo.renderer.options;
-					//console.log('props: %o', props);
 
 					const el = document.createElement('input');
 					if (
@@ -215,15 +214,12 @@ export default {
 						}
 						$(el).addClass('tui-grid-content-text');
 					}
-					// console.log('props: %o', props);
-					// console.log('el: %o', el);
 					this.el = el;
 
 					this.render(props);
 				}
 
 				change(ev) {
-					//console.log('props: %o', ev);
 					if (ev.target.checked) {
 						ev.target.value = 1;
 					} else {
@@ -245,7 +241,6 @@ export default {
 					} else {
 						this.el.value = String(props.value);
 					}
-					//console.log('props: %o', props);
 				}
 
 				mounted() {
@@ -275,7 +270,7 @@ export default {
 				{
 					header: 'Data 구분',
 					name: 'addInfoDataKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						let retVal = '';
 						const newValue = addInfoDataKindList.filter(
@@ -323,8 +318,6 @@ export default {
 				},
 				//{ header: "추가 정보 값", name: "addInfoVal", align: "center" , editor: "text",
 				// formatter({ value, row , column}) {
-				//   console.log("addInfoVal row : ", row);
-				//   console.log("addInfoVal state : ", column);
 				//   if(row.addInfoDataKind === "NUM"){
 				//     column.align = "right";
 				//   }else{
diff --git a/pages/comm/auth/MenuRoleMngPage.vue b/pages/comm/auth/MenuRoleMngPage.vue
index d2fa68b..6c7cdb1 100644
--- a/pages/comm/auth/MenuRoleMngPage.vue
+++ b/pages/comm/auth/MenuRoleMngPage.vue
@@ -32,15 +32,18 @@
 					</div>
 				</v-card>
 			</v-col>
-			<v-col cols="12" lg="9">
+			<v-col cols="12" lg="9" class="pl-0">
 				<v-card>
 					<v-card-title>
 						<span class="custom-title-4">역할 메뉴별 권한</span>
 					</v-card-title>
 					<v-row align="center" no-gutters :style="{ height: 'calc(100% - 62px)' }" class="px-5">
 						<v-col class="h100" style="max-width: 400px;">
-							<span class="body-1 font-weight-bold d-flex align-center"
-								:style="{ minHeight: '36px' }">[미배정]메뉴리스트</span>
+							<v-card-title class="pl-0 pb-3">
+								<span class="custom-title-4">[미배정]메뉴리스트</span>
+							</v-card-title>
+							<!-- <span class="body-1 font-weight-bold d-flex align-center"
+								:style="{ minHeight: '36px' }">[미배정]메뉴리스트</span> -->
 							<div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;">
 								<!-- <div
 									ref="treeGridParent"
@@ -55,15 +58,18 @@
 							<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
 								:btnActionsFnc="dualGridBtnActions" />
 						</v-col> -->
-						<div class="pr-2">
+						<div class="pr-2 arrow-button">
 							<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
-								:btnActionsFnc="dualGridBtnActions" />
+								:btnActionsFnc="dualGridBtnActions"/>
 						</div>
 						<v-col :cols="7" class="h100">
-							<v-row justify="space-between" align="center" no-gutters class="px-5">
+							<v-row justify="space-between" align="center" no-gutters class="px-5 pl-0">
 								<v-col :cols="11">
-									<span class="body-1 font-weight-bold d-flex align-center"
-										:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span>
+									<v-card-title class="pl-0 pb-3">
+										<span class="custom-title-4">[배정]메뉴별권한 리스트</span>
+									</v-card-title>
+									<!-- <span class="body-1 font-weight-bold d-flex align-center"
+										:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span> -->
 									<!-- <span class="body-1 font-weight-bold">[배정]메뉴별권한 리스트</span> -->
 								</v-col>
 								<v-col :cols="1" class="text-right">
@@ -344,8 +350,8 @@ export default {
 			const _this = this;
 
 			const myColumns = [
-				{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70,width:120 },
-				{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left',width:120 },
+				{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70, width: 120 },
+				{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left', width: 120 },
 				{
 					header: '사용여부',
 					name: 'useFg',
@@ -805,4 +811,23 @@ function numberFormatter({ value }) {
 		return value;
 	}
 }
+
 </script>
+
+
+<style lang="scss" scoped>
+::v-deep {
+	.arrow-button button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 24px;
+		height: 24px;
+	}
+
+	.arrow-button svg {
+		width: 14px;
+		height: 14px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/comm/auth/UserRoleMngPage.vue b/pages/comm/auth/UserRoleMngPage.vue
index dd8bc6c..23e512d 100644
--- a/pages/comm/auth/UserRoleMngPage.vue
+++ b/pages/comm/auth/UserRoleMngPage.vue
@@ -12,8 +12,8 @@
 								:parentPrgmId="myPrgmId"
 								:sendParam="{ comId }"
 								customClass="select-large"
-								labelCols="12"
-								textCols="12"
+								:labelCols="12"
+								:textCols="12"
 							/>
 							<!-- <component
                 :is="'selectCodeList'"
diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index cc71731..4fe2942 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/pages/comm/base/NoticeMngPage.vue
@@ -46,19 +46,21 @@
 								icon="delete">삭제</a-button>
 						</div>
 					</v-col>
-					<v-col :cols="12" class="mt-5">
+					<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">
-						<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
-							:initialValue="viewActionData.content" theme="white"
-							:class="[isDarkMode ? 'theme--white' : 'theme--black', 'custom-view pa-3']" />
+					<v-col :cols="12" style="min-height: 30vh;" 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"
+								:class="[isDarkMode ? 'theme--white' : 'theme--black']" />
+						</v-card>
 					</v-col>
 					<v-col :cols="6" class="mt-5">
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item">
+						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item" style="background-color: unset;">
 							<a @click.prevent="downloadFile(fileData)">
 								<div class="d-flex justify-start search-box-label">
 									<v-icon>mdi-paperclip</v-icon>
@@ -86,7 +88,8 @@
 							</v-text-field>
 						</v-col>
 						<v-col :cols="12" style="min-height: calc(100vh - 450px);">
-							<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
+							<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg"
+							:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
 						</v-col>
 
 						<v-col :cols="6" class="mt-5">
@@ -132,7 +135,8 @@
 						</v-text-field>
 					</v-col>
 					<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
-						<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" />
+						<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" 
+						:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
 					</v-col>
 					<v-col :cols="6" class="mt-5">
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
@@ -179,7 +183,8 @@
 						</v-col>
 						<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
 							<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
-								:initialValue="updateActionData.content" />
+								:initialValue="updateActionData.content"
+								:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
 						</v-col>
 						<v-col :cols="6" class="mt-5">
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
@@ -187,13 +192,26 @@
 								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
 									class="file-item d-flex justify-space-between">
 									<div class="file-item-detail">
-										<v-icon>mdi-paperclip</v-icon>
+										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
 									</div>
 									<a-icon type="delete" class="v-icon pointer"
 										@click="updateActionData.fileData.splice(index, 1)" />
 								</div>
 							</div>
+							<div class="" v-if="updateActionData.currentFileList">
+								<div v-for="(fileData, index) in updateActionData.currentFileList"
+									:key="fileData.apndFileId" class="file-item d-flex justify-space-between">
+									<div class="file-item-detail">
+										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
+										<span @click.prevent="downloadFile(fileData)" href="#"
+											class="file-item-name pointer">{{ fileData.apndFileNm + '.' +
+												fileData.apndFileExt }}</span>
+									</div>
+									<a-icon type="delete" class="v-icon pointer"
+										@click="addFileToDeleteFileList(fileData)" />
+								</div>
+							</div>
 							<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
 								업로드
 							</a-button>
@@ -1044,7 +1062,7 @@ const defaultData = {
 	.custom-view {
 		border: 1px solid;
 		border-radius: 6px;
-		height: 100%;
+		height: 0;
 
 		@each $theme in dark, light {
 			@include theme($theme);
@@ -1062,8 +1080,13 @@ const defaultData = {
 		color: #1677FF
 	}
 
-	.toastui-editor-mode-switch .tab-item {
+	.toastui-editor-light .toastui-editor-mode-switch .tab-item {
 		color: #000000E0
 	}
+
+	.v-icon.anticon-delete svg {
+		width: 14px;
+		height: 14px;
+	}
 }
 </style>
diff --git a/pages/comm/base/PrgmMngPage.vue b/pages/comm/base/PrgmMngPage.vue
index d8a180b..e465f2a 100644
--- a/pages/comm/base/PrgmMngPage.vue
+++ b/pages/comm/base/PrgmMngPage.vue
@@ -103,21 +103,6 @@ export default {
 			gridName: 'rowGrid',
 			// rowGridOrigin: [],
 			detailList: myDetail,
-
-			dataPathMock: {
-				'rowGrid': {
-					column: [
-						{ header: '프로그램ID', name: 'field1', align: 'left' },
-						{ header: '프로그램덤', name: 'field2', align: 'left' },
-						{ header: '타임', name: 'field3', align: 'left' },
-						{ header: '사용여부', name: 'field4', align: 'left' }
-					],
-					option: {
-						scrollY: false,
-						scrollX: false,
-					}
-				}
-			},
 		};
 	},
 	computed: {
@@ -189,17 +174,17 @@ export default {
 			const gridHeight = this.$refs.gridParent.offsetHeight - 36;
 
 			const myOptions = {
-				scrollX: false,
+				scrollY: true,
 			};
 			// console.log("this.pageData", this.pageData)
 			const _this = this;
 			const myColumns = [
-				{ header: '프로그램ID', name: 'prgmId', align: 'center' },
-				{ header: '프로그램명', name: 'prgmNm' },
+				{ header: '프로그램ID', name: 'prgmId', align: 'left' },
+				{ header: '프로그램명', name: 'prgmNm', align: 'left' },
 				{
 					header: '타입',
 					name: 'prgmTpCd',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						return value ? (value === '1' ? '프로그램' : '팝업') : null;
 					},
@@ -207,7 +192,7 @@ export default {
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.selectUseFgList.filter(
diff --git a/pages/ems/base/DashboardPage.vue b/pages/ems/base/DashboardPage.vue
index 54d04df..977086c 100644
--- a/pages/ems/base/DashboardPage.vue
+++ b/pages/ems/base/DashboardPage.vue
@@ -840,7 +840,7 @@ export default {
         { header: "주의", name: "careStndVal", align: "right", width: 40 },
         { header: "경고", name: "warnStndVal", align: "right", width: 40 },
         { header: "가이드", name: "totVal", align: "right", width: 40 },
-        { header: "알람 내용", name: "alrmMsg", align: "left" },
+        { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false },
         { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
         { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
       ];
diff --git a/pages/ems/base/EnrgCostCenterMngPage.vue b/pages/ems/base/EnrgCostCenterMngPage.vue
index b681254..81d7d92 100644
--- a/pages/ems/base/EnrgCostCenterMngPage.vue
+++ b/pages/ems/base/EnrgCostCenterMngPage.vue
@@ -3,7 +3,7 @@
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
-					<v-row align="center" no-gutters>
+					<v-row align="end" no-gutters>
 						<v-col :cols="2.5">
 							<component
 								:is="'selectCodeList'"
@@ -49,8 +49,8 @@
 								:parentPrgmId="myPrgmId"
 								label="공정명"
 								valueNm="eccNm"
-								:labelCols="2"
-								:textCols="9"
+								:labelCols="12"
+								:textCols="12"
 								:searchOption="true"
 							/>
 						</v-col>
@@ -59,7 +59,13 @@
 						</v-col>
 					</v-row>
 					<v-row align="center" no-gutters>
-						
+						<div style="display: none">
+								<component
+									:is="'SelectBlocMstr'"
+									ref="SelectBlocMstr"
+									:parentPrgmId="myPrgmId"
+								/>
+							</div>
 					</v-row>
 				</v-card>
 			</v-col>
@@ -91,7 +97,7 @@
 					</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
+			<v-col :cols="7" style="min-height:75vh;">
 				<v-card class="pb-5">
 					<v-card-title class="custom-title-4" style="min-height:76px;"
 						>공정 상세
diff --git a/pages/ems/base/EquipmentMasterMngPage.vue b/pages/ems/base/EquipmentMasterMngPage.vue
index 966038d..ad22662 100644
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@@ -365,7 +365,7 @@ export default {
 					header: '사업장',
 					name: 'blocId',
 					width: 100,
-					align: 'center',
+					align: 'left',
 					hidden: true,
 					formatter({ value }) {
 						let retVal = '';
diff --git a/pages/ems/effc/DataSetMngPage.vue b/pages/ems/effc/DataSetMngPage.vue
index b80f853..bb2c501 100644
--- a/pages/ems/effc/DataSetMngPage.vue
+++ b/pages/ems/effc/DataSetMngPage.vue
@@ -53,7 +53,8 @@
         </v-col>
         <v-col :cols="7" >
           <v-card class="pb-5">
-            <v-card-title class="custom-title-4" style="min-height:76px;">Data Set 상세
+            <v-card-title class="custom-title-4 pb-0 mb-2" >
+              Data Set 상세
             </v-card-title>
             <div class="px-5" style="min-height:calc(100% - 76px)">
               <v-tabs v-model="tab">
@@ -284,13 +285,13 @@ export default {
           header: '모델링 DataSet ID',
           name: 'dataSetId',
           align: 'left',
-          width: 180,
+          minWidth: 200,
         },
         {
           header: 'DataSet 명',
           name: 'dataSetNm',
           align: 'left',
-          width: 200,
+          minWidth: 200,
         },
         {
           header: '사업장',
@@ -311,8 +312,8 @@ export default {
         {
           header: '사용 여부',
           name: 'useFg',
-          width: 100,
-          align: 'center',
+          minWidth: 200,
+          align: 'left',
           formatter({ value }) {
             value = value === true ? '1' : '0';
             const newValue = _this.pageData.useFgList.filter(
@@ -321,7 +322,7 @@ export default {
             return newValue[0].commCdNm;
           },
         },
-        { header: '비고', name: 'rmrk', align: 'left' },
+        { header: '비고', name: 'rmrk', align: 'left', minWidth: 100, },
       ];
 
       this.setGridColumn({
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index 35a7a1a..09c5c8a 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -62,20 +62,20 @@
 								<v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title>
 							</v-col>
 							<v-col :cols="4" class="d-flex justify-space-end" >
-									<component
-										class="text-right mr-2"
-										ref="EqpmSelectPop"
-										label=""
-										placeholder="설비..."
-										is="EqpmSelectPop"
-										valueNm="eqpmId"
-										:textCols="12"
-										:parentPrgmId="myPrgmId"
-										:eqpmGrpDisabled="true"
-										:fabDisabled="true"
-										:iconShow="false"
-										:isMulti="true"
-									/>
+								<component
+									class="text-right mr-2"
+									ref="EqpmSelectPop"
+									label=""
+									placeholder="설비..."
+									is="EqpmSelectPop"
+									valueNm="eqpmId"
+									:textCols="12"
+									:parentPrgmId="myPrgmId"
+									:eqpmGrpDisabled="true"
+									:fabDisabled="true"
+									:iconShow="false"
+									:isMulti="true"
+								/>
 								<a-button @click="getEqpmData()" type="primary" >조회</a-button>
 							</v-col>
 						</v-row>
diff --git a/pages/ems/effc/EnrgUsePlanPage.vue b/pages/ems/effc/EnrgUsePlanPage.vue
index 73e1e38..046b099 100644
--- a/pages/ems/effc/EnrgUsePlanPage.vue
+++ b/pages/ems/effc/EnrgUsePlanPage.vue
@@ -286,7 +286,7 @@ export default {
 					resizable: true,
 				},
 				header: {
-					height: 65,
+					height: 75,
 					complexColumns: myComplexColumns,
 				},
 			};
diff --git a/plugins/utility.js b/plugins/utility.js
index bcef1c0..3457450 100644
--- a/plugins/utility.js
+++ b/plugins/utility.js
@@ -289,8 +289,8 @@ const Utility = () => {
 			header: {
 				height: 28,
 			},
-			rowHeight: 29,
-			minRowHeight: 29,
+			rowHeight: 37,
+			minRowHeight: 37,
 			columnOptions: {
 				resizable: true,
 				minWidth: 100,