add dark mode for editor

fix bug 07/08/25
Merge pull request 'dev-trungvq7-0729' (#40 ) from dev-trungvq7-0729 into dev
2025-08-07 13:33:35 +07:00 · 2025-08-07 09:58:49 +07:00 · 2025-08-07 10:58:23 +09:00 · 2025-08-06 19:03:14 +09:00 · 2025-08-06 19:00:29 +09:00 · 2025-08-06 18:50:46 +09:00
17 changed files with 744 additions and 215 deletions
--- 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 {
@ -860,7 +862,7 @@ a {
          );

          .day-label {
-            color: map-deep-get($config, #{$theme}, "non-activate");
+            color: map-deep-get($config, #{$theme}, "card-text-title-color");
          }
        }
      }
@ -1166,14 +1168,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");
--- a/assets/scss/common/editor.scss
+++ 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);
+}
--- a/assets/scss/common/grid.scss
+++ b/assets/scss/common/grid.scss
@ -17,18 +17,6 @@
    border: 0 !important;
  }

-  // &-body-container {
-  //   width: 100% !important;
-  // }
-
-  // &-table {
-  //   width: 100% !important;
-  // }
-
-  // &-lside-area .tui-grid-body-area {
-  //   margin-right: -11px;
-  // }
-
  &-lside-area .tui-grid-scrollbar-left-bottom {
    display: none;
  }
@ -68,6 +56,12 @@
    font-weight: 400;
  }

+  
+  th[data-column-name="_checked"] {
+    padding-left: 0;
+  }
+
+
 }

 .tui-grid-table{
@ -75,6 +69,13 @@
  .tui-grid-cell-has-input .tui-grid-cell-content {
    padding: 8px;
  }
+
+  th[data-column-name="_checked"] {
+    &.tui-grid-cell-header  {
+      padding-left: 0;
+    }
+    
+  }
 }

 .treeGrid {
@ -150,50 +151,28 @@

      &-body-container{
        border-right: 0;
-        // border-right-color: map-deep-get($config,
-        //   #{$theme},
-        //   "tui-grid-cell-borderColor"
-        // );
+        // position: relative;
        width: auto !important;
+
        .tui-grid-table-container{
-          width: 100% !important;
+          // width: 100% !important;
          .tui-grid-table {
-            width: 100% !important;
+            // width: 100% !important;
+            // table-layout: fixed;
+            // th, td {
+            //   &:last-child{
+            //     width: auto !important;
+            //   }
+            // }
          }
        }
      }

-      &-container,
-      &-summary-area {
+      &-summary-area,
+      &-container {
        font-family: Inter;
-        // color: #000000E0;
 
-        & ::-webkit-scrollbar {
-          width: 0 !important;
-          height: $scrollbar-width !important;
-          -webkit-appearance: initial;
-          background-color: rgba(0, 0, 0, 0) !important;
-          border-radius: 3px !important;
-        }
-
-        & ::-webkit-scrollbar-track {
-          // background-color: map-deep-get($config,
-          //   #{$theme},
-          //   "tui-grid-cell-borderColor"
-          // ) !important;
-          background-color: rgba(0, 0, 0, 0) !important;
-        }
-
-        & ::-webkit-scrollbar-thumb {
-          // width: 50px !important;
-          height: 50px !important;
-          background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
-          // background-color: rgba(0, 0, 0, 0);
-          border-radius: 3px;
-        }
-
        .tui-grid-cell {
-
          &.tui-grid-cell-summary {
            color: map-deep-get($config,
              #{$theme},
@ -203,6 +182,32 @@
        }
      }

+      &-body-area {
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: $scrollbar-width !important;
+          height: $scrollbar-width !important;
+          -webkit-appearance: initial;
+          background-color: rgba(0, 0, 0, 0) !important;
+          border-radius: 3px !important;
+          // border-right: 1px solid;
+          // border-right-color: map-deep-get($config, #{$theme}, "tui-grid-cell-borderColor");
+        }
+
+        &::-webkit-scrollbar-track {
+          background-color: rgba(0, 0, 0, 0) !important;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          height: 50px !important;
+          background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
+          border-radius: 3px;
+          // width: 50px !important;
+          // background-color: rgba(0, 0, 0, 0);
+        }
+      }
+
      &-rside-area {
        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
      }
@ -241,13 +246,13 @@
      &-scrollbar-right-bottom {
        width: $scrollbar-width !important;
        height: $scrollbar-width !important;
-        // display: none !important;
        border-color: map-deep-get($config, #{$theme}, "cardBackground");
        background-color: map-deep-get($config, #{$theme}, "cardBackground");
+        box-sizing: border-box;
+        // display: none !important;
        // border: none !important;
        // bottom: -1px;
        // right: -2px;
-        box-sizing: border-box;
        // display: none;
      }

@ -358,10 +363,10 @@
          #{$theme},
          "tui-grid-cell-backgroundColor"
        );
-        width: 100% !important;
-        .tui-grid-table {
-          width: 100% !important;
-        }
+        // width: 100% !important;
+        // .tui-grid-table {
+        //   width: 100% !important;
+        // }
      }

      &-row-odd,
--- a/assets/scss/common/input.scss
+++ b/assets/scss/common/input.scss
@ -230,6 +230,10 @@
  }
 }

+input[type="checkbox"] {
+  width: 16px;
+  height: 16px
+}

@each $theme in dark, light {
  @include theme($theme);
@ -242,6 +246,7 @@
          background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
          border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
          color:map-deep-get($config, #{$theme}, "ant-btn-primary-color");
+
          &.ant-checkbox-inner::after {
            border-color: map-deep-get($config, #{$theme}, "ant-btn-primary-color");
          }
@ -403,6 +408,13 @@
        "v-input-textarea-border"
      );
    }
+
+    input[type="checkbox"] {
+      accent-color: map-deep-get($config,
+        #{$theme},
+        "ant-btn-primary-bg"
+      );
+    }
  }

  .v-radio {
--- a/assets/scss/datepicker.scss
+++ b/assets/scss/datepicker.scss
@ -15,8 +15,9 @@
      border-radius: 6px;
      border: solid 1px;
      height: 32px;
-      // border-color: #424242;
-      border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
+      color: map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
+      border-color: currentColor;
+      // border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");

      &.datepicker-large {
        height: 40px;
--- a/components/common/Grid.vue
+++ b/components/common/Grid.vue
@ -272,9 +272,7 @@ export default {
 			this.handleSelectedRow(evt);
 		},
 		focusChangeEvt(e) {
-			if(e.rowKey === 0) {
-				this.handleSelectedRow(e);	
-			}
+			this.handleSelectedRow(e);	
 		},
 		handleSelectedRow(e) {
 			// console.log('focusChangeEvt1...')
--- a/components/common/modal/EnrgEffcEqpmDetailPop.vue
+++ b/components/common/modal/EnrgEffcEqpmDetailPop.vue
@ -119,8 +119,7 @@
 						/>
 					</div> -->

-				<v-card-actions>
-					<v-spacer></v-spacer>
+				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
 					<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
 				</v-card-actions>
 			</v-card>
@ -275,7 +274,12 @@ export default {
 			// const gridHeight = this.$refs.gridParent.offsetHeight - 30;

 			const myOptions = {
-				rowHeaders: ['rowNum'],
+				rowHeaders: [
+					{
+						type: 'rowNum',
+						align: 'right',
+					},
+				],
 				columnOptions: {
 					resizable: true,
 					minWidth: 100
@ -319,19 +323,19 @@ export default {
 					header: '주의',
 					width: 100,
 					name: 'careStndVal',
-					align: 'center'
+					align: 'right'
 				},
 				{
 					header: '경고',
 					width: 100,
 					name: 'warnStndVal',
-					align: 'center'
+					align: 'right'
 				},
 				{
 					header: '가이드값',
 					width: 100,
 					name: 'totVal',
-					align: 'center'
+					align: 'right'
 				},
 				{
 					header: '알람내용',
--- a/components/common/modal/EqpmSelectPop.vue
+++ b/components/common/modal/EqpmSelectPop.vue
@ -8,49 +8,37 @@
 			</label>
 		</v-col>
 		<v-col :cols="textCols">
-			<v-text-field
-				readonly
-				v-model="selectValue"
-				append-icon="mdi-magnify"
-				:class="['v-input__custom', customClass]"
-				@click="dialogOpenCloseEvent(dialog)"
-				outlined
-				:hide-details="true"
-				:required="required || false"
-				:disabled="disabled || false"
-				:placeholder="placeholder"
-			>
-				<template v-slot:append>
+			<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>
 					<!-- Custom SVG icon -->
 					<v-icon>$icoSearch</v-icon>
 				</template>
 			</v-text-field>
 		</v-col>
-		<v-dialog ref="popModal" v-model="dialog" width="800" scrollable>
-			<v-card style="height: 90vh;">
+		<v-dialog ref="popModal" v-model="dialog" width="800" content-class="custom-dialog" scrollable>
+			<v-card style="height: 100%;">
 				<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
 					<span class="custom-title-4">설비 선택</span>
 					<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
 				</v-card-title>
-				<div class="pa-2 pt-0">
+				<div class="px-5 pt-2">
 					<!-- <v-card class="searchFilter">
 					</v-card> -->
-					<v-row align="end" class="searchFilter">
+					<v-row align="end">
 						<v-col :cols="3.5">
 							<!-- 설비그룹 -->
 							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
-								:label="'설비그룹'" :disabled="eqpmGrpDisabled"
-								@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
-								:iconShow="true" />
+								:label="'설비그룹'" :disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event"
+								:labelCols="12" :textCols="12" :iconShow="true" />
 						</v-col>
-						<v-col :cols="3.5">
+						<v-col>
 							<!-- FAB -->
-							<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
-								:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
-								:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
-								:iconShow="true" />
+							<component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02"
+								:label="'FAB'" :labelCols="12" :multiple="true" :disabled="fabDisabled"
+								@update:propsValue="selectValue02 = $event" :textCols="12" :iconShow="true" />
 						</v-col>
-						<v-col :cols="3.5">
+						<v-col >
 							<v-row>
 								<v-col :cols="12" class="py-0">
 									<label for="" class="search-box-label">
@ -59,9 +47,8 @@
 									</label>
 								</v-col>
 								<v-col :cols="12" class="pt-0">
-									<v-text-field append-icon="" class="v-input__custom" outlined
-										:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
-											v-slot:append>
+									<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
+										v-model="searchWord" @keyup.enter="search"><template v-slot:append>
 											<!-- Custom SVG icon -->
 											<v-icon>$icoSearch</v-icon>

@ -70,7 +57,11 @@

 							</v-row>
 						</v-col>
-						<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
+						<v-col :cols="2" class="last-col mr-2">
+							<a-button icon="search" :ripple="false" type="primary" @click="search()"
+								class="search-button">조회</a-button>
+						</v-col>
+
 					</v-row>

 					<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
@ -91,13 +82,13 @@
 					</v-row> -->
 				</div>

-				<v-card-text class="px-2 w100">
-					<div ref="modalGridParent" style="height: 450px;" class="h100 w100">
+				<div class="pa-5" style="height:calc(100% - 30px)">
+					<div ref="modalGridParent" class="h100 w100">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
 							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
 							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
 					</div>
-				</v-card-text>
+				</div>

 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
 					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
@ -270,7 +261,7 @@ export default {
 		},
 		chkDialog() {
 			if (this.isMulti) {
-				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox' }];
+				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox', width: 72 }];
 			} else {
 				this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
 			}
@ -437,18 +428,15 @@ export default {
 				{
 					header: 'FAB',
 					name: 'fabNm',
-					align: 'center'
 				},
 				{
 					header: '설비ID',
-					name: 'eqpmId',
-					align: 'center',
+					name: 'eqpmId'
 					// hidden:true
 				},
 				{
 					header: '설비명',
-					name: 'eqpmNm',
-					align: 'center'
+					name: 'eqpmNm'
 				},
 				{
 					header: 'eccId',
@ -532,11 +520,11 @@ export default {


 			this.loadGrid = true;
-			this.$nextTick(() => {
-				if (this.isMulti) {
-					this.getChecked();
-				}
-			});
+			// this.$nextTick(() => {
+			// 	if (this.isMulti) {
+			// 		this.getChecked();
+			// 	}
+			// });

 		},
 		setUpdate() {
@ -588,3 +576,16 @@ var eqpmSelectPop = {
 }

 </script>
+<style lang="scss" scoped>
+::v-deep {
+	.last-col {
+		flex-basis: content;
+	}
+
+	.v-dialog {
+		overflow-y: hidden;
+	}
+
+}
+
+</style>
--- a/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
@ -8,7 +8,7 @@
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 520px);">
+		<div ref="gridParent" class="w100" style="height: calc(100vh - 520px);">
 			<Grid
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
@ -296,7 +296,7 @@ export default {
 				{
 					header: '추가 정보 값',
 					name: 'addInfoVal',
-					align: 'center',
+					align: 'left',
 					renderer: {
 						type: CustomRenderer,
 					},
--- a/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
+++ b/components/pages/ems/EqpmInfo/EqpmIaoTab.vue
@ -8,7 +8,7 @@
 				:btnActionsFnc="btnActions"
 			/>
 		</div>
-		<div ref="gridParent" style="height: calc(100vh - 800px);">
+		<div ref="gridParent" style="height: calc(100vh - 700px);">
 			<Grid
 				:ref="gridName"
 				:is="loadGrid ? 'Grid' : null"
@ -18,7 +18,7 @@
 				:innerTabGridInfo="innerTabGridInfo"
 			/>
 		</div>
-		<div style="min-height: calc(100vh - 900px);" class="mt-4">
+		<div style="height: 60vh;" class="mt-5">
 			<component
 				:is="'Form'"
 				:parentPrgmId="parentPrgmId"
@ -114,7 +114,7 @@ export default {
 				this.detailList[2].class = 'py-3 d-none';
 				this.detailList[3].class = 'py-3 pl-4 pt-1 d-none';

-				this.detailList[4].class = 'py-3';
+				this.detailList[4].class = 'py-3 pl-4';
 				this.detailList[5].class = 'py-3 pl-4';
 				this.detailList[6].class = 'py-3 pl-4 pt-0';
 			} else {
@ -230,7 +230,7 @@ export default {
 				{
 					header: '대상 유형',
 					name: 'objKind',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						var retVal = '';

@ -261,7 +261,7 @@ export default {
 				{
 					header: '계산여부',
 					name: 'calcFg',
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						value = value === true ? '1' : '0';
 						const newValue = _this.pageData.useFgList.filter(
@ -612,3 +612,10 @@ const myEqpmIaoDetail = [
 	},
 ];
 </script>
+<style lang="scss" scoped >
+::v-deep {
+	.tui-grid-layer-state {
+		top: 40px !important;
+	}
+}
+</style>
--- a/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
+++ b/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
@ -332,7 +332,7 @@ const myReadPlcTagDetail = [
 		valueNm2: 'tagNm',
 		disabled: true,
 		cols: 6,
-		class: 'pr-4 pb-2 py-3',
+		class: 'pr-4 pb-2 py-2',
 		required: true,
 		labelCols: 12,
 		textCols: 12,
@ -345,7 +345,7 @@ const myReadPlcTagDetail = [
 		valueNm: 'ercId',
 		disabled: false,
 		cols: 6,
-		class: 'pl-4 py-3',
+		class: 'pl-4 pb-2 py-3',
 		list: 'ercNmList',
 		itemText: 'text',
 		itemValue: 'value',
--- 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="px-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>
--- a/pages/comm/base/BatchMngPage.vue
+++ b/pages/comm/base/BatchMngPage.vue
@ -15,25 +15,15 @@
 								:customClass="'input-large'" />
 						</v-col>
 						<v-col :cols="2.5">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'배치 실행 구분'"
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'배치 실행 구분'"
 								:dataKey="'searchBatchExecTp'"
-								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }"
-								:addAll="true"
-								:customClass="'select-large'"
-							/>
+								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }" :addAll="true"
+								:customClass="'select-large'" />
 						</v-col>
 						<v-col :cols="2.5" class="pr-4">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'사용여부'"
-								:dataKey="'searchUseFg'"
-								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-								:customClass="'select-large'"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
+								:dataKey="'searchUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
+								:customClass="'select-large'" />
 						</v-col>
 						<BtnSearch size="large" class="mr-2" />

@ -42,9 +32,9 @@
 			</v-col>
 		</v-row>

-		<v-row ref="contents" class="mt-4">
+		<v-row ref="contents" class="mt-4 h100">
 			<!-- 배치 리스트 -->
-			<v-col :cols="6" class="h100 pr-2">
+			<v-col :cols="6" class="pr-2">
 				<v-card class="pb-5">
 					<div class="d-flex align-center justify-space-between pa-4">
 						<!-- <v-card-title>
@ -56,7 +46,7 @@
 							:btnActionsFnc="btnActions" />
 					</div>
 					<div class="px-4">
-						<div ref="gridParent" class="h100 w100">
+						<div ref="gridParent" class="h100 w100" style="height:calc(100% - 70px)">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
 								:gridName="gridName" @getRowsData="getRowData" />
 						</div>
@ -65,7 +55,7 @@
 				</v-card>
 			</v-col>
 			<!-- 배치 상세 -->
-			<v-col :cols="6" class="h100 pl-3">
+			<v-col :cols="6" class="pl-3">
 				<v-card class="pd-y-20 h100">
 					<v-card-title class="d-flex justify-space-between align-end pa-4">
 						<span class="tit ft-size_20 ft-weight_600">배치 상세</span>
@ -82,14 +72,17 @@
 				<v-card style="height: 100%">
 					<v-card-title class="v-card__title d-flex align-center justify-space-between">
 						<span class="custom-title-4">DB 프로시져 파라메터 설정</span>
-						<div>
-							<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
-								:btnActionsFnc="btnActionsParam" />
-						</div>
+						<a-button icon="close" type="text" @click="dialog = false"></a-button>
+
 					</v-card-title>
 					<div class="pa-5">
-						<v-row align="center" no-gutters>
-							<v-col cols="12" class="text-right"> </v-col>
+						<v-row align="end" no-gutters>
+							<v-col cols="12" class="d-flex justify-end">
+
+								<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
+									:btnActionsFnc="btnActionsParam" />
+
+							</v-col>
 						</v-row>
 					</div>
 					<v-card-text style="height: 300px;">
@ -101,10 +94,9 @@
 							</div>
 						</div>
 					</v-card-text>
-					<v-card-actions>
-						<v-spacer></v-spacer>
-						<v-btn color="primary" dark @click="setParamChangeData()">확인</v-btn>
-						<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
+					<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
+						<a-button :ripple="false" @click="dialog = false" class="mr-2">닫기</a-button>
+						<a-button :ripple="false" type="primary" @click="setParamChangeData()">확인</a-button>
 					</v-card-actions>
 				</v-card>
 			</v-dialog>
@ -156,7 +148,7 @@ export default {
 			myPrgmId: myPrgmId,
 			loadGrid: false,
 			gridName: 'rowGrid',
-			
+
 			// rowGridOrigin: [],
 			detailList: myDetail,

@ -261,7 +253,7 @@ export default {

 			const _this = this;
 			const myColumns = [
-				{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
+				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
 				{ header: '배치명', name: 'batchNm', minWidth: 200 },
 				{
 					header: '배치 실행 구분',
@ -283,7 +275,6 @@ export default {
 				{
 					header: '사용여부',
 					name: 'useFg',
-					align: 'center',
 					width: 145,
 					formatter({ value }) {
 						let retVal = '';
@ -556,7 +547,7 @@ export default {
 			}
 		},
 		gridParamInit() {
-			
+
 			const gridHeight = this.$refs.gridParent.offsetHeight - 36;
 			const myOptions = {
 				columnOptions: {
@ -567,6 +558,10 @@ export default {
 				selectionUnit: 'row',
 				editingEvent: 'click',
 				scrollX: false,
+				header: {
+					height: 37,
+				},
+				rowHeight: 37,
 			};
 			this.setGridOption({
 				gridKey: this.gridNameParam,
@ -592,7 +587,6 @@ export default {
 				{
 					header: 'MODE',
 					name: 'mode',
-					align: 'center',
 					formatter({ value }) {
 						return value == ('OUT' || 'out') ? 'OUT' : 'IN';
 					},
@ -642,7 +636,7 @@ export default {
 		},
 		getRowParamData() {
 			this.paramLoadGrid = false;
-			// let res = [];
+			let res = [];

 			// /* this.pageData.paramStrData 처리 */
 			// // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
@ -717,7 +711,6 @@ export default {
 		},
 		inputClick(event, item, valueNm) {
 			if (valueNm == 'refVal1') {
-				this.dialog = true;
 				const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
 					'getFocusedCell',
 				).rowKey;
--- 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>
--- 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(
--- a/pages/ems/base/EquipmentMasterMngPage.vue
+++ b/pages/ems/base/EquipmentMasterMngPage.vue
@ -382,7 +382,7 @@ export default {
 					header: '사용 여부',
 					name: 'useFg',
 					width: 100,
-					align: 'center',
+					align: 'left',
 					formatter({ value }) {
 						const newValue = _this.pageData.useFgList.filter(
 							item => item.commCd == value,
--- a/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
+++ b/pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue
@ -67,14 +67,8 @@
 					</div>
 					<div class="px-4" style="height:calc(100% - 76px)">
 						<div ref="gridParent" class="w100 h100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
-								:parentPrgmId="myPrgmId"
-								:columnClickEventFlag="true"
-								@columnClick="columnClick"
-							/>
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
+								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
 						</div>
 					</div>
 				</v-card>
@ -552,7 +546,12 @@ export default {
 				columnOptions: {
 					resizable: true,
 				},
-				rowHeaders: ['rowNum'],
+				rowHeaders: [
+					{
+						type: 'rowNum',
+						align: 'right',
+					},
+				],
 				header: {
 					height: 37,
 				},
@ -642,7 +641,7 @@ export default {
 				{
 					header: '평가',
 					name: 'okFg',
-					align: 'center',
+					align: 'left',
 					width: 80,
 				},
 				{
Author	SHA1	Message	Date
Hoang Xuan Mai/(Hoang Xuan Mai)/현장대리인/SK	fa68aa31e6	add dark mode for editor	2025-08-07 13:33:35 +07:00
Hoang Xuan Mai/(Hoang Xuan Mai)/현장대리인/SK	2533d5bb7a	fix bug 07/08/25	2025-08-07 09:58:49 +07:00
dev	f715405ad2	Merge pull request 'dev-trungvq7-0729' (#40 ) from dev-trungvq7-0729 into dev Reviewed-on: #40	2025-08-07 10:58:23 +09:00
dev	6db0ff96c0	Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729	2025-08-06 19:03:14 +09:00
dev	9155a2b55e	commit 0608	2025-08-06 19:00:29 +09:00
dev	484d8879aa	Merge pull request 'fix bugs' (#39 ) from dev-dungtv-0806 into dev Reviewed-on: #39	2025-08-06 18:50:46 +09:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	38585f7b4f	hotfix layout	2025-08-06 16:43:12 +07:00
Tran Van Dung/(Tran Van Dung)/현장대리인/SK	b0ad70d33e	fix bugs	2025-08-06 16:31:44 +07:00
dev	3f89707a01	Merge pull request 'fixbugs grid' (#38 ) from dev-dungtv-0805 into dev Reviewed-on: #38	2025-08-06 12:13:45 +09:00