resovel conflix

Reviewed-on: #50

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 {
@@ -1170,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");

assets/scss/common/button.scss

@@ -137,6 +137,11 @@
         color:map-deep-get($config, #{$theme}, "ant-btn-default-color");
       }
 
+      &.ant-btn-popup-default {
+        background:map-deep-get($config, #{$theme}, "ant-btn-popup-bg");
+        color:map-deep-get($config, #{$theme}, "ant-btn-popup-color");
+      }
+
       &.ant-btn-danger {
         &.ant-btn-background-ghost {
           color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");

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);
+}

assets/scss/common/input.scss

@@ -50,6 +50,7 @@
   }
 }
 
+
 .v-input__custom {
   .v-input__slot {
 
@@ -149,6 +150,11 @@
 .v-input {
   margin-top: 0 !important;
   padding-top: 0 !important;
+  &.v-text-field--outlined {
+    fieldset {
+      top: -4px
+    }
+  }
 }
 
 .v-input__append-inner {
@@ -241,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");
 
@@ -442,7 +455,7 @@ input[type="checkbox"] {
       transform: none;
 
       &.mdi:before {
-        font-size: 16px;
+        font-size: 20px;
       }
 
       @if $theme ==dark {

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;
       }

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,
@@ -177,6 +177,10 @@ $config: (
     v-header-border: #424242,
     v-chart-border: #424242,
     v-sidebar-border: #303030,
+    ant-checkbox-bg: #212224,
+    ant-checkbox-border: #424242,
+    ant-btn-popup-bg: #212224,
+    ant-btn-popup-color: #FFFFFFD9,
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -317,5 +321,9 @@ $config: (
     v-header-border: #D9D9D9,
     v-chart-border: #D9D9D9,
     v-sidebar-border: #F0F0F0,
+    ant-checkbox-bg: #FFFFFF,
+    ant-checkbox-border: #D9D9D9,
+    ant-btn-popup-bg: #FFFFFF,
+    ant-btn-popup-color: #000000E0,
   ),
 );

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 {

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')

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);
 		},

components/common/modal/ChangeUserPswdPopPage.vue

@@ -76,7 +76,7 @@
 					<v-spacer></v-spacer>
 					<!-- <v-btn color="primary" dark @click="setUpdate()">확인</v-btn> -->
 					<div class="pr-3">
-						 <a-button @click="close()" class="btn-default">삭제</a-button>
+						 <a-button @click="close()" class="ant-btn-popup-default">닫기</a-button>
 						 <a-button type="primary" @click="setUpdate()" class="v-btn-add-text">
 							 확인
 						 </a-button>

components/common/modal/EnrgUsePlanModiPop.vue

@@ -37,6 +37,7 @@
 								:itemList="selectValueList01"
 								:label="'대상월'"
 								@update:propsValue="selectValue01 = $event"
+								customClass="select-large"
 							/>
 						</v-col>
 						<v-col :cols="5.5" class="mr-2">
@@ -49,9 +50,10 @@
 								:itemList="selectValueList02"
 								:label="'전년대비절감율'"
 								@update:propsValue="selectValue02 = $event"
+								customClass="select-large"
 							/>
 						</v-col>
-						<a-button color="primary" dark @click="search()" icon="clock-circle" >
+						<a-button class="ant-btn-popup-default" color="primary" dark @click="search()" icon="check-circle" size="large">
 							<!-- <template #icon>
 								<ClockCircleOutlined />
 							</template> -->
@@ -128,7 +130,7 @@
 					</div> -->
 				
 				<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" class="mr-2 ant-btn-popup-default" dark @click="closePop()">취소</a-button>					
 					<a-button color="primary" type="primary" dark @click="setUpdate()">확정</a-button>
 				</v-card-actions>
 			</v-card>

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>

components/common/select/SelectAddGrp.vue

@@ -81,6 +81,10 @@ export default {
 			type: String,
 			require: false,
 		},
+		required: {
+			type: Boolean,
+			default: false
+		},
 	},
 	data() {
 		return {};

components/common/select/SelectReadObj.vue

@@ -21,6 +21,7 @@
 				outlined
 				append-icon=""
 				:class="['v-select__custom', customClass]"
+				:menu-props="{ top: false, offsetY: true }"
 			><template v-slot:append>
 				<v-icon>$icoChevronDown</v-icon>
 				</template></v-select>

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({

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>

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>

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 },

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>

pages/comm/auth/RoleMngPage.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="l-layout">
+		<CommonPageTitle />
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
@@ -205,12 +206,12 @@ export default {
 
 			const _this = this;
 			const myColumns = [
-				{ header: '역할ID', name: 'roleId', align: 'center' },
+				{ header: '역할ID', name: 'roleId', align: 'left' },
 				{ header: '역할명', name: 'roleNm' },
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.useFgList.filter(

pages/comm/auth/UserRoleMngPage.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="l-layout">
 		<!-- 조회조견 -->
+		<CommonPageTitle />
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
@@ -922,7 +923,7 @@ const unAsgnRoleByUserColumns = [
 					</label>`;
 		}
 	},	
-	{ header: '역할ID', name: 'roleId', align: 'center' },
+	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
 	{ header: '적용종료일', name: 'aplyEndDt', hidden: true },

pages/comm/base/BatchLogMngPage.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="l-layout">
 		<!-- 조회조견 -->
+		<CommonPageTitle />
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
@@ -218,14 +219,14 @@ export default {
 
 			const _this = this;
 			const myColumns = [
-				{ header: 'No.', name: 'batchLogSeq', align: 'center', width: 100 },
-				{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
+				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 },
+				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
 				{ header: '배치명', name: 'batchNm', align: 'left', width: 150 },
-				{ header: '실행 일자', name: 'execDt', align: 'center', width: 80 },
+				{ header: '실행 일자', name: 'execDt', align: 'right', width: 80 },
 				{
 					header: '실행 결과',
 					name: 'execRsltCd',
-					align: 'center',
+					align: 'left',
 					width: 80,
 					formatter({ value }) {
 						let retVal = '';
@@ -242,7 +243,7 @@ export default {
 				{
 					header: '배치 시작 일시',
 					name: 'batchStrtDttm',
-					align: 'center',
+					align: 'left',
 					width: 160,
 				},
 				{

pages/comm/base/CalendarMngPage.vue

@@ -250,7 +250,6 @@ export default {
 				{
 					header: '요일',
 					name: 'dtNm',
-					align: 'center',
 					formatter({ value }) {
 						return value + '요일';
 					},
@@ -258,7 +257,6 @@ export default {
 				{
 					header: '구분',
 					name: 'hldyFg',
-					align: 'center',
 					essential: true,
 					formatter({ value }) {
 						return value == 1 ? '휴일' : '평일';

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>

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(

pages/comm/base/ReadObjectMngPage.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="l-layout">
+		<CommonPageTitle />
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">

pages/ems/base/AddInfoMngPage.vue

@@ -12,7 +12,6 @@
 								dataKey="searchAddGrp"
 								:sendParam="{ useFg: '1' }"
 								:addAll="true"
-								:iconShow="true"
 								customClass="select-large"
 							/>
 						</v-col>
@@ -22,7 +21,6 @@
 								label="추가 정보명"
 								valueNm="addInfoNm"
 								:searchOption="true"
-								:iconShow="true"
 								customClass="input-large"
 							/>
 						</v-col>
@@ -336,8 +334,7 @@ export default {
 			this.search();
 		},
 		async search() {
-			//process
-			this.loadGrid = true;
+			this.loadGrid = false;
 			await this.getRowGridData();
 			await this.setPageData({
 				isFind: false,
@@ -547,7 +544,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		required: true,
 	},
 	{
@@ -559,7 +556,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		list: 'addInfoDataKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -574,7 +571,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2 d-flex align-items-center',
 		value: { '1': true, '0': false },
 		required: true,
 	},
@@ -587,7 +584,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -599,7 +596,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -611,7 +608,7 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pl-4',
+		class: 'py-2 pl-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -623,8 +620,11 @@ const myDetail = [
 		labelCols: 12,
 		textCols: 12,
 		iconShow: true,
-		class: 'py-2 pr-4',
+		class: 'py-2 pr-4 mt-2',
 		placeholder: '시스템 자동입력',
 	},
 ];
 </script>
+<style lang="scss">
+@import '@/assets/scss/common.scss';
+</style>

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 },
       ];

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 = '';

pages/ems/base/ReadObjectMngPage.vue

@@ -1,5 +1,6 @@
 <template>
 	<div ref="mainDiv" class="l-layout">
+		<CommonPageTitle />
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">

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({

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>

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,