sk_fems_ui commit

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/css/SpoqaHanSansNeo.css

@@ -0,0 +1,46 @@
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 700;
+    src: local('Spoqa Han Sans Neo Bold'),
+    url('../font/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+    url('../font/SpoqaHanSansNeo-Bold.woff') format('woff'),
+    url('../font/SpoqaHanSansNeo-Bold.ttf') format('truetype');
+  }
+  
+  
+  @font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 500;
+    src: local('Spoqa Han Sans Neo Medium'),
+    url('../font/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
+    url('../font/SpoqaHanSansNeo-Medium.woff') format('woff'),
+    url('../font/SpoqaHanSansNeo-Medium.ttf') format('truetype');
+  }
+  
+  @font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 400;
+    src: local('Spoqa Han Sans Neo Regular'),
+    url('../font/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+    url('../font/SpoqaHanSansNeo-Regular.woff') format('woff'),
+    url('../font/SpoqaHanSansNeo-Regular.ttf') format('truetype');
+  }
+  
+  @font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 300;
+    src: local('Spoqa Han Sans Neo Light'),
+    url('../font/SpoqaHanSansNeo-Light.woff2') format('woff2'),
+    url('../font/SpoqaHanSansNeo-Light.woff') format('woff'),
+    url('../font/SpoqaHanSansNeo-Light.ttf') format('truetype');
+  }
+  
+  @font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 100;
+    src: local('Spoqa Han Sans Neo Thin'),
+    url('../font/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
+    url('../font/SpoqaHanSansNeo-Thin.woff') format('woff'),
+    url('../font/SpoqaHanSansNeo-Thin.ttf') format('truetype');
+  }
+  

assets/scss/common/button.scss

@@ -0,0 +1,75 @@
+.v-btn {
+  background-color: #144985;
+  &-radius {
+    &__20 {
+      border-radius: 20px !important;
+    }
+    &__50per {
+      border-radius: 50% !important;
+    }
+  }
+  &__full {
+    width: 100%;
+  }
+  &__round {
+    min-width: 100px !important;
+    padding: 8px 25px !important;
+    border-radius: 20px !important;
+  }
+  &__excel {
+    background-color: #47535c !important;
+  }
+  &-bg {
+    &__transparent {
+      background-color: transparent !important;
+    }
+    &__blue {
+      background-color: $--color-primary__blue;
+    }
+    &__white-blue {
+      background-color: $--color-white;
+      color: $--color-primary__blue;
+    }
+  }
+  &__transparent {
+    border: 0;
+    background-color: transparent !important;
+  }
+  &.v-btn--icon.v-btn--tile {
+    border-radius: 4px;
+  }
+}
+
+@each $theme in dark, light {
+  @include theme($theme);
+  .v-application.#{$theme}-mode {
+    .v-btn-bg__w-g5 {
+      background-color: $--theme-color-w-g5;
+      i {
+        color: $--theme-color-g5-w;
+      }
+    }
+    .v-btn {
+      background-color: map-deep-get(
+        $config,
+        #{$theme},
+        "v-btn-backgroundColor"
+      );
+      color: map-deep-get($color, "white", "0");
+
+      &.v-btn--disabled {
+        opacity: 0.4;
+        background-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-btn-backgroundColor"
+        ) !important;
+        color: map-deep-get($color, "white", "0") !important;
+
+        .v-icon {
+          color: map-deep-get($color, "white", "0") !important;
+        }
+      }
+    }
+  }
+}

assets/scss/common/card.scss

@@ -0,0 +1,15 @@
+.v-card {
+  height: 100%;
+}
+
+@each $theme in dark, light {
+  // @include theme($theme);
+  .v-application.#{$theme}-mode {
+    .v-card {
+      color: map-deep-get($config, #{$theme}, "card-default-color");
+      .v-card__subtitle {
+        color: map-deep-get($config, #{$theme}, "card-subtitle");
+      }
+    }
+  }
+}

assets/scss/common/fonts.scss

@@ -0,0 +1,52 @@
+.ft {
+  &-size {
+    &_12 { font-size: 12px !important; }
+    &_13 { font-size: 13px !important; }
+    &_14 { font-size: 14px !important; }
+    &_15 { font-size: 15px !important; }
+    &_16 { font-size: 16px !important; }
+    &_20 { font-size: 20px !important; }
+    &_24 { font-size: 24px !important; }
+    &_32 { font-size: 32px !important; }
+    &_40 { font-size: 40px !important; }
+  }
+  &-wt {
+    &_100 { font-weight: 100; }
+    &_200 { font-weight: 200; }
+    &_300 { font-weight: 300; }
+    &_400 { font-weight: 400; }
+    &_500 { font-weight: 500; }
+    &_600 { font-weight: 600; }
+    &_700 { font-weight: 700; }
+    &_800 { font-weight: 800; }
+    &_900 { font-weight: 900; }
+  }
+
+  &-clr {
+    &_g-9 { color: $--color-gray_9; }
+    &_g-7 { color: $--color-gray_7; }
+    &_g-c { color: $--color-gray_C; }
+    &_g-555 { color: $--color-gray_555 }
+    &_g-999 { color: $--color-gray_999; }
+    &_g-aaa { color: $--color-gray_aaa; }
+    &_blue { color: $--color-primary__blue; }
+    &_green { color: $--color-primary__green; }
+    &_yellow { color: $--color-sub__yellow; }
+    &_red { color: $--color-warning__red; }
+  }
+}
+
+@each $theme in dark, light{
+  @include theme($theme);
+  .v-application.#{$theme}-mode{
+    color: $--theme-color-w-g5;
+    .ft {
+      &-clr {
+        &_gc-g9 { color: $--theme-color-gc-g9; }
+        &_g5-gc { color: $--theme-color-g5-gc; }
+        &_g7-g9 { color: $--theme-color-g7-g9; }
+        &_g9-g7 { color: $--theme-color-g9-g7; }
+      }
+    }
+  }
+}

assets/scss/common/grid.scss

@@ -0,0 +1,376 @@
+.tui-grid {
+  &-layer-state {
+    z-index: 5 !important;
+  }
+
+  // &-layer-selection {
+  //   width: calc(100% - 2px) !important;
+  // }
+
+  &-container {
+    width: 100%;
+    border-radius: 10px;
+  }
+  &-content-area {
+    width: 100%;
+    border: 0;
+  }
+
+  // &-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;
+  }
+
+  &-rside-area {
+    .tui-grid-header-area,
+    .tui-grid-summary-area {
+      margin-right: $scrollbar-width;
+    }
+  }
+
+  &-border-line-top,
+  &-border-line-bottom,
+  &-border-line-right {
+    border: 0 !important;
+  }
+  &-cell {
+    border-width: 1px !important;
+  }
+  &-cell-header {
+    border-top: 0;
+  }
+
+  &-cell-header,
+  &-cell-content,
+  &-cell.tui-grid-cell-summary {
+    font-family: "Spoqa Han Sans Neo";
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 0.0178571429em;
+  }
+}
+.treeGrid {
+  .tui-grid {
+    &-header-area {
+      display: none;
+    }
+
+    &-cell {
+      border: 0;
+      background-color: transparent;
+    }
+  }
+}
+.tui-grid-scrollbar-right-top{
+	z-index:5;
+}
+
+@each $theme in dark, light {
+  @include theme($theme);
+  .v-application.#{$theme}-mode {
+    .tui-grid {
+      &-container,
+      &-summary-area {
+        & ::-webkit-scrollbar {
+          width: $scrollbar-width !important;
+          height: $scrollbar-width !important;
+          -webkit-appearance: initial;
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "scrollbar-track"
+          ) !important;
+          border-radius: 3px !important;
+        }
+
+        & ::-webkit-scrollbar-track {
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "scrollbar-track"
+          ) !important;
+        }
+
+        & ::-webkit-scrollbar-thumb {
+          width: 50px !important;
+          height: 50px !important;
+          background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
+          border-radius: 3px;
+        }
+      }
+
+      &-rside-area {
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
+      }
+
+      &-scrollbar-left-bottom {
+        background-color: map-deep-get($config, #{$theme}, "cardBackground");
+        border-color: map-deep-get($config, #{$theme}, "cardBackground");
+      }
+
+      &-scrollbar-right-top {
+        background-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-header-backgroundColor"
+        );
+        border-left-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-border-horziontal-color"
+        );
+        border-right-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-border-horziontal-color"
+        );
+        border-bottom-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-border-vertical-color"
+        );
+      }
+
+      &-scrollbar-right-bottom {
+        width: $scrollbar-width !important;
+        height: $scrollbar-width !important;
+        // display: none !important;
+        border-color: map-deep-get($config, #{$theme}, "scrollbar-track");
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
+        // border: none !important;
+        // bottom: -1px;
+        // right: -2px;
+        box-sizing: border-box;
+      }
+
+      &-scrollbar-frozen-border,
+      &-scrollbar-y-outer-border,
+      &-scrollbar-y-inner-border {
+        background-color: transparent !important;
+        border-color: transparent !important;
+      }
+
+      &-body-area {
+        overflow: auto !important;
+      }
+
+      &-container,
+      &-layer-state,
+      &-body-area,
+      &-summary-area,
+      &-cell {
+        background-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-cell-backgroundColor"
+        );
+        border-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-border-vertical-color"
+        );
+      }
+
+      &-cell-summary {
+        text-align: center;
+      }
+
+      &-header-area,
+      &-cell-header {
+        background-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-header-backgroundColor"
+        );
+        border-color: map-deep-get(
+          $config,
+          #{$theme},
+          "tui-grid-border-vertical-color"
+        );
+        color: map-deep-get($config, #{$theme}, "activate");
+      }
+
+      &-row-odd,
+      &-row-even {
+        .tui-grid-cell-content {
+          color: map-deep-get($config, #{$theme}, "tui-grid-cell-color");
+        }
+
+        &:hover {
+          > .tui-grid-cell {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
+              "tui-grid-cell-hover-backgroundColor"
+            );
+
+            .tui-grid-cell-content {
+              color: map-deep-get($config, #{$theme}, "activate");
+            }
+          }
+        }
+      }
+
+      &-cell {
+        &.row-insert {
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "tui-grid-cell-insert-color"
+          );
+        }
+        &.row-modify {
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "tui-grid-cell-modify-color"
+          );
+        }
+        &.row-removed {
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "tui-grid-cell-removed-color"
+          );
+        }
+        &.row-disabled {
+          color: map-deep-get(
+            $config,
+            #{$theme},
+            "tui-grid-cell-disabled-color"
+          );
+
+          .tui-grid-cell-content {
+            color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color");
+          }
+        }
+        &.row-selected {
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "tui-grid-cell-selected-color"
+          );
+
+          .tui-grid-cell-content {
+            color: map-deep-get($config, #{$theme}, "activate");
+          }
+        }
+      }
+
+      &-layer-focus-border {
+        background-color: transparent;
+      }
+
+      &-cell-has-tree {
+        .tui-grid-cell-content {
+          padding: 0 !important;
+        }
+      }
+
+      &-tree-extra-content {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .tui-grid-tree-depth
+        {
+          width: 16px;
+          height: 16px;
+          position: relative;
+          left: 0 !important;
+          margin-right: 6px;
+        }
+        
+      }
+
+      &-btn-tree {
+        width: 16px;
+        height: 16px;
+        margin-top: 0;
+        padding-left: 0;
+        margin-right: 6px;
+        top: 0;
+        left: 0 !important;
+        i {
+          margin-top: 0;
+        }
+      }
+
+      &-tree-icon {
+        margin-top: 0;
+        top: 0;
+        i {
+          width: 16px;
+          height: 16px;
+          margin-left: 0;
+          background-repeat: no-repeat;
+          background-position: 0 0;
+          @if $theme == dark {
+            background-image: url("data:image/svg+xml,%3Csvg id='ico_tree_item' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1, .cls-4 %7B fill: none; %7D .cls-1 %7B stroke: %23fff; opacity: 0.3; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke: none; %7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' class='cls-1'%3E%3Crect class='cls-3' width='16' height='16' rx='3'/%3E%3Crect class='cls-4' x='0.5' y='0.5' width='15' height='15' rx='2.5'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 4.5)'/%3E%3Crect id='사각형_1386' data-name='사각형 1386' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 7.5)'/%3E%3Crect id='사각형_1387' data-name='사각형 1387' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 10.5)'/%3E%3C/svg%3E%0A");
+          } @else {
+            background-image: url("data:image/svg+xml,%3Csvg id='ico_tree_item' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23a4aac3%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='stroke:%23a4aac3;fill:none'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 4.5)'/%3E%3Crect id='사각형_1386' data-name='사각형 1386' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 7.5)'/%3E%3Crect id='사각형_1387' data-name='사각형 1387' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 10.5)'/%3E%3C/svg%3E%0A");
+          }
+        }
+      }
+
+      &-tree-button-expand {
+        .tui-grid-btn-tree {
+          i {
+            width: 16px;
+            height: 16px;
+            background-position: 0 0;
+            @if $theme == dark {
+              background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_close' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230d0f17; stroke: %23fff; opacity: 0.3; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke: none; %7D .cls-4 %7B fill: none; %7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' class='cls-1'%3E%3Crect class='cls-3' width='16' height='16' rx='3'/%3E%3Crect class='cls-4' x='0.5' y='0.5' width='15' height='15' rx='2.5'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3C/svg%3E%0A");
+            } @else {
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg data-name='사각형 703' style='fill:%23f1f3f9;stroke:%23a4aac3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect data-name='사각형 1384' width='8' height='2' rx='1' transform='translate(4 7)' style='fill:%23a4aac3'/%3E%3C/svg%3E ");
+            }
+          }
+        }
+      }
+
+      &-tree-button-collapse {
+        .tui-grid-btn-tree {
+          i {
+            width: 16px;
+            height: 16px;
+            background-position: 0 0;
+            @if $theme == dark {
+              background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_open' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='fill:%230d0f17;stroke:%23fff;opacity:.3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3Crect id='사각형_1385' data-name='사각형 1385' class='cls-2' width='2' height='8' rx='1' transform='translate(7 4)'/%3E%3C/svg%3E%0A");
+            } @else {
+              background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_open' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23a4aac3%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='fill:%23f1f3f9;stroke:%23a4aac3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3Crect id='사각형_1385' data-name='사각형 1385' class='cls-2' width='2' height='8' rx='1' transform='translate(7 4)'/%3E%3C/svg%3E ");
+            }
+          }
+        }
+      }
+
+      &-tree-button-expand,
+      &-tree-button-collapse {
+        .tui-grid-tree-icon {
+          display: none;
+        }
+      }
+
+      &-frozen-border {
+        background-color: transparent;
+      }
+    }
+
+    [class*="tui-grid-tree-wrapper"] {
+      display: flex;
+      align-items: center;
+      padding-left: 0 !important;
+    }
+  }
+}

assets/scss/common/input.scss

@@ -0,0 +1,257 @@
+.v-select__custom {
+  &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
+    > .v-input__control
+    > .v-input__slot {
+    box-shadow: none;
+  }
+  &.v-text-field.v-text-field--solo .v-input__control {
+    min-height: 36px;
+    height: 36px;
+  }
+  &.v-input input {
+    min-height: 36px;
+    height: 36px;
+  }
+
+  .v-input--selection-controls {
+    margin-top: 0;
+    padding-top: 0;
+  }
+  .v-input__slot {
+    overflow: hidden;
+    position: relative;
+    height: 36px;
+  }
+}
+
+.v-input__custom {
+  .v-input__slot {
+    &:before,
+    &:after {
+      display: none;
+    }
+  }
+  .v-input__slot {
+    overflow: hidden;
+    position: relative;
+  }
+}
+
+.v-text-field .v-input__append-inner,
+.v-text-field .v-input__prepend-inner {
+  align-self: center !important;
+}
+
+
+
+.v-select__widget {
+  &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
+    > .v-input__control
+    > .v-input__slot {
+    box-shadow: none;
+  }
+  &.v-text-field.v-text-field--solo .v-input__control {
+    min-height: 30px !important;
+    height: 30px !important;
+  }
+  &.v-input input {
+    min-height: 30px !important;
+    height: 30px !important;
+  }
+  &.v-text-field--outlined > .v-input__control > .v-input__slot {
+    align-items: stretch;
+    min-height: 30px;
+  }
+
+  .v-input--selection-controls {
+    margin-top: 0;
+    padding-top: 0;
+  }
+  .v-input__slot {
+    overflow: hidden;
+    position: relative;
+    height: 30px !important;
+  }
+}
+
+.size {
+  &-mini {
+    width: 110px;
+    height: 30px;
+    flex: 0 0 auto;
+    &.v-text-field.v-text-field--solo .v-input__control {
+      min-height: 30px;
+      height: 30px;
+    }
+  }
+}
+.v-text-field > .v-input__control > .v-input__slot:after,
+.v-text-field > .v-input__control > .v-input__slot:before {
+  display: none;
+}
+
+.v-input__slot {
+  margin-bottom: 0 !important;
+}
+.v-input {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
+
+.v-input__append-inner {
+  .v-icon {
+    color: currentColor !important;
+  }
+}
+
+@each $theme in dark, light {
+  @include theme($theme);
+  .v-application.#{$theme}-mode {
+    .v-input {
+      border-radius: 4px;
+
+      &:not(.v-input--radio-group, .v-input--checkbox) {
+        .v-input__slot {
+          background-color: map-deep-get(
+            $config,
+            #{$theme},
+            "v-input-backgroundColor"
+          );
+        }
+      }
+      .v-input__slot {
+        fieldset {
+          color: map-deep-get(
+            $config,
+            #{$theme},
+            "v-input-fieldset-color"
+          ) !important;
+        }
+
+        &:hover {
+          fieldset {
+            color: map-deep-get(
+              $config,
+              #{$theme},
+              "v-input-fieldset-hover-color"
+            ) !important;
+          }
+        }
+
+        .v-input__append-inner {
+          color: map-deep-get($config, #{$theme}, "v-input-icon-color");
+        }
+      }
+
+      &--is-readonly {
+        border-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-input-readonly-border-color"
+        );
+        &:not(.v-input--radio-group, .v-input--checkbox) {
+          .v-input__slot {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
+              "v-input-readonly-backgroundColor"
+            ) !important;
+          }
+        }
+      }
+
+      &--is-disabled {
+        border-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-input-readonly-border-color"
+        );
+        &:not(.v-input--radio-group, .v-input--checkbox) {
+          .v-input__slot {
+            background-color: map-deep-get(
+              $config,
+              #{$theme},
+              "v-input-disabled-backgroundColor"
+            ) !important;
+          }
+        }
+        input {
+          color: map-deep-get($config, #{$theme}, "v-input-disabled-color");
+        }
+      }
+    }
+
+    .v-select {
+      .v-label {
+        color: map-deep-get($config, #{$theme}, "v-select-label-color");
+      }
+
+      &.v-input--is-disabled {
+        .v-label {
+          color: map-deep-get($config, #{$theme}, "v-input-disabled-color");
+        }
+        .v-icon.v-icon--disabled {
+          color: map-deep-get(
+            $config,
+            #{$theme},
+            "v-input-disabled-color"
+          ) !important;
+        }
+        .v-select__selection--disabled {
+          color: map-deep-get(
+            $config,
+            #{$theme},
+            "v-input-disabled-color"
+          ) !important;
+        }
+      }
+    }
+
+    .v-radio {
+      .v-label {
+        color: map-deep-get($config, #{$theme}, "non-activate");
+      }
+      &.v-item--active {
+        .v-label {
+          color: map-deep-get($config, #{$theme}, "activate");
+        }
+      }
+    }
+  }
+
+  .v-radio {
+    .v-icon {
+      opacity: 0.6;
+    }
+
+    .v-label {
+      color: map-deep-get($config, #{$theme}, "non-activate");
+    }
+
+    &.v-item--active {
+      .v-icon {
+        opacity: 1;
+      }
+
+      .v-label {
+        color: map-deep-get($config, #{$theme}, "activate");
+      }
+    }
+  }
+
+  .v-input--checkbox {
+    .v-icon {
+      @if $theme == dark {
+        color: rgba(255, 255, 255, 0.6);
+      } @else {
+        color: #aaaaaa;
+      }
+    }
+  }
+
+  .v-textarea{
+    textarea{
+      padding: 10px;
+    }
+  }
+}

assets/scss/common/numericInput.scss

@@ -0,0 +1,33 @@
+.vue-numeric-input {
+  min-height:36px;
+}
+.vue-numeric-input .numeric-input {
+  font-size: 14px;
+  border-radius: 4px;
+  height:100%;
+  border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(57, 64, 94, 0.3);
+  color: #fff;
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 1);
+  }
+
+  &:focus {
+    border-color: rgba(255, 255, 255, 1);
+  }
+  
+  &:active {
+    border-color: rgba(255, 255, 255, 1);
+  }
+  
+}
+
+
+.vue-numeric-input.updown .btn-decrement .btn-icon {
+  border-color:  #fff transparent #fff !important;
+}
+
+.vue-numeric-input.updown .btn-increment .btn-icon{
+  border-color: transparent transparent #fff !important;
+}

assets/scss/common/tabs.scss

@@ -0,0 +1,88 @@
+// .v-tabs {
+//   height: 38px;
+//   flex: 0;
+//   & + .v-tabs-items {
+//     height: calc(100% - 38px) !important;
+//     width: 100%;
+//     background-color: transparent !important;
+//   }
+//   &-bar {
+//     height: 38px;
+//     background-color: transparent !important;
+//     border-bottom: 1px solid $--color-hover_d;
+//   }
+//   .v-tab {
+//     margin: 0 !important;
+//   }
+// }
+
+@each $theme in dark, light {
+  .v-application.#{$theme}-mode {
+    .v-tabs {
+      position: relative;
+      z-index: 2;
+
+      .v-slide-group__wrapper {
+        overflow: visible !important;
+        contain: initial !important;
+      }
+
+      .v-tab {
+        border: 1px solid transparent;
+        border-radius: 6px 6px 0 0;
+        border-bottom-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-active-border-color"
+        );
+        background-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-backgroundColor"
+        );
+        position: relative;
+        z-index: 2;
+        transform: translateY(1px);
+        letter-spacing: 0;
+        + .v-tab {
+          margin-left: 4px;
+        }
+      }
+
+      .v-tab--active {
+        border-top-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-active-border-color"
+        );
+        border-right-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-active-border-color"
+        );
+        border-left-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-active-border-color"
+        );
+        border-bottom-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-active-backgroundColor"
+        );
+        background-color: map-deep-get(
+          $config,
+          #{$theme},
+          "v-tabs-active-backgroundColor"
+        );
+      }
+    }
+    .v-tabs-items {
+      position: relative;
+      z-index: 1;
+      border-top: 1px
+        solid
+        map-deep-get($config, #{$theme}, "v-tabs-active-border-color");
+    }
+  }
+}

assets/scss/common/text.scss

@@ -0,0 +1,98 @@
+.txt {
+  &__bar {
+    display: flex;
+    &:before {
+      content: "";
+      display: inline-block;
+      width: 2px;
+      height: 14px;
+      background-color: #ccc;
+      margin-right: 8px;
+      position: relative;
+      top: 3px;
+    }
+    &.log {
+      &:before {
+        background-color: $--color-primary__green;
+      }
+    }
+  }
+}
+
+.custom-title-1 {
+  font-size: 2.5rem; // 40px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.custom-title-2 {
+  font-size: 1.75rem; // 28px
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.custom-title-2-5 {
+  font-size: 1.5rem; // 28px
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.custom-title-3 {
+  font-size: 1.15rem; // 28px
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.custom-title-4 {
+  font-size: 1.125rem !important;
+  font-weight: 700 !important;
+  line-height: 1.25 !important;
+}
+.custom-title-6 {
+  font-size: 1.0rem !important;
+  font-weight: 700 !important;
+  line-height: 1.25 !important;
+}
+.custom-title-8 {
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  line-height: 1.0 !important;
+}
+
+.custom-text-1 {
+  font-size: 1.125rem; // 18px;
+  line-height: 1.2;
+}
+
+.custom-text-2 {
+  opacity: 0.6;
+  font-family: SpoqaHanSansNeo;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 2.17;
+  letter-spacing: normal;
+  text-align: right;
+  color: #fff;
+}
+
+.text-color--white-0 {
+  color: map-deep-get($color, "white", "0") !important;
+}
+
+@each $theme in dark, light {
+  .v-application.#{$theme}-mode {
+    .text-color--activate {
+      color: map-deep-get($config, #{$theme}, "activate");
+    }
+
+    .text-color--non-activate {
+      color: map-deep-get($config, #{$theme}, "non-activate");
+    }
+
+    .text-color--sub {
+      color: map-deep-get($config, #{$theme}, "text-subcolor");
+    }
+  }
+}

assets/scss/functions.scss

@@ -0,0 +1,21 @@
+@function setStyle($map, $object, $style) {
+  @if map-has-key($map, $object) {
+    @return map-get(map-get($map, $object), $style);
+  }
+  @warn "The key ´#{$object} is not available in the map.";
+  @return null;
+}
+
+/// Map deep get
+/// @author Kitty Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+      $map: map-get($map, $key);
+  }
+  @return $map;
+}

assets/scss/mixin.scss

@@ -0,0 +1,15 @@
+@import './var.scss';
+@import './functions.scss';
+@mixin theme($key) {
+  $--theme-font-color: #{setStyle($config, $key, fontColor)} !global;
+  $--theme-bg-page: #{setStyle($config, $key, pageBackground)} !global;
+  $--theme-bg-card: #{setStyle($config, $key, cardBackground)} !global;
+  $--theme-hover-color: #{setStyle($config, $key, hover)} !global;
+  $--theme-button-close-color: #{setStyle($config, $key, btnClose)} !global;
+  $--theme-color-w-g5: #{setStyle($config, $key, w-g5)} !global;
+  $--theme-color-g5-w: #{setStyle($config, $key, g5-w)} !global;
+  $--theme-color-gc-g9: #{setStyle($config, $key, gc-g9)} !global;
+  $--theme-color-g5-gc: #{setStyle($config, $key, g5-gc)} !global;
+  $--theme-color-g7-g9: #{setStyle($config, $key, g7-g9)} !global;
+  $--theme-color-g9-g7: #{setStyle($config, $key, g9-g7)} !global;
+} 

assets/scss/theme.scss

@@ -0,0 +1,15 @@
+// @import './var.scss';
+// @import './functions.scss';
+// @import './mixin.scss';
+
+
+
+
+// @each $theme in dark, light{
+//   @include theme($theme);
+//   .v-application.#{$theme}-mode{
+//     span {
+//       color: $--theme-font-color;
+//     }
+//   }
+// } 

assets/scss/var.scss

@@ -0,0 +1,210 @@
+$--color-primary__blue: #278bff !important;
+$--color-primary__green: #26bf6b !important;
+$--color-sub__yellow: #ff9541 !important;
+$--color-warning__red: #ff5050 !important;
+$--color-white: #fff !important;
+$--color-black: #333 !important;
+$--color-gray_C: #cccccc !important;
+$--color-gray_9: #95a0a9 !important;
+$--color-gray_7: #767d83 !important;
+$--color-gray_999: #999 !important;
+$--color-gray_555: #555 !important;
+$--color-gray_aaa: #aaa !important;
+$--color-hover_d: #47535c !important;
+$--color-hover_l: #f0f5fc !important;
+
+$--theme-font-color: "";
+$--theme-bg-page: "";
+$--theme-bg-card: "";
+$--theme-hover-color: "";
+$--theme-button-close-color: "";
+$--theme-color-w-g5: "";
+$--theme-color-gc-g9: "";
+$--theme-color-g5-gc: "";
+$--theme-color-g7-g9: "";
+$--theme-color-g9-g7: "";
+
+$scrollbar-width: 11px; // 스크롤 바
+$column-spacer: 20px; // 검색 영역 열 간격
+$row-spacer: 14px; // 검색 영역 행 간격
+
+$color: (
+  "black": (
+    "0": #000,
+    "1": #111
+  ),
+  "white": (
+    "0": #fff
+  ),
+  "week": (
+    "sun": #fb5a83,
+    "sat": #2d8cf6
+  )
+);
+
+$config: (
+  dark: (
+    w-g5: $--color-white,
+    g5-w: $--color-gray_555,
+    gc-g9: $--color-gray_C,
+    g5-gc: $--color-gray_555,
+    g7-g9: $--color-gray_7,
+    g9-g7: $--color-gray_9,
+    pageBackground: #23272b,
+    cardBackground: #242940,
+    hover: #47535c,
+    btnClose: #24282c,
+    scrollbar-track: #2f334a,
+    scrollbar-thumb: #575b72,
+    card-default-color: #fff,
+    card-subtitle: rgba(255, 255, 255, 0.6),
+    activate: #fff,
+    non-activate: rgba(255, 255, 255, 0.6),
+    text-subcolor: rgba(255, 255, 255, 0.6),
+    border-color: rgba(255, 255, 255, 0.1),
+    router-header: #1d2133,
+    router-tab-item: #2d3355,
+    router-tab-item-active: #18579e,
+    router-tab-item-color: #fff,
+    router-tab-item-active-color: #fff,
+    router-tab-item-icon-color: rgba(255, 255, 255, 0.5),
+    router-tab-item-icon-active-color: #fff,
+    router-tab-item-hover-color: #3896ff,
+    router-tab-slot-end-button-backgroundColor: #144985,
+    v-btn-backgroundColor: #144985,
+    v-box: #383f5d,
+    v-banner-border-color: rgba(255, 255, 255, 0.1),
+    v-treeview-node-root-backgroundColor: #18579e,
+    v-treeview-node-root-label-color: #fff,
+    v-treeview-node-root-label-active-color: #fff,
+    v-treeview-node-root-icon-color: #fff,
+    v-treeview-node-root-icon-active-color: #fff,
+    v-treeview-node-subroot-backgroundColor: #2d3355,
+    v-treeview-node-label-color: rgba(255, 255, 255, 0.6),
+    v-treeview-node-label-active-color: #fff,
+    v-treeview-leaf-active-backgroundColor: rgba(45, 51, 85, 0.5),
+    v-treeview-leaf-active-color: #3896ff,
+    v-treeview-icon-color: rgba(255, 255, 255, 0.6),
+    v-treeview-icon-active-color: #fff,
+    v-input-backgroundColor: rgba(13, 15, 23, 0.3),
+    v-input-fieldset-color: rgba(255, 255, 255, 0.32),
+    v-input-fieldset-hover-color: rgba(255, 255, 255, 1),
+    v-input-icon-color: #fff,
+    v-input-readonly-border-color: rgba(255, 255, 255, 0.3),
+    v-input-readonly-backgroundColor: rgba(57, 64, 94, 0.3),
+    v-input-disabled-backgroundColor: rgba(57, 64, 94, 0.3),
+    v-input-disabled-color: rgba(255, 255, 255, 0.2),
+    v-select-label-color: #fff,
+    v-calendar-weekday-backgroundColor: #383f5d,
+    v-calendar-weekday-color: #fff,
+    v-calendar-weekday-border-color: rgba(255, 255, 255, 0.1),
+    v-calendar-day-color: #fff,
+    v-calendar-day-in-not-month-color: rgba(255, 255, 255, 0.05),
+    v-calendar-is-today-background-color: #2d4571,
+    tui-grid-header-backgroundColor: #383f5d,
+    tui-grid-border-horziontal-color: #383f5d,
+    tui-grid-border-vertical-color: rgba(255, 255, 255, 0.1),
+    tui-grid-cell-backgroundColor: #242940,
+    tui-grid-cell-color: #fff,
+    tui-grid-cell-insert-color: #13636c,
+    tui-grid-cell-selected-color: #1a4e87,
+    tui-grid-cell-modify-color: #13636c,
+    tui-grid-cell-removed-color: #f6637b,
+    tui-grid-cell-disabled-color: rgb(170, 170, 170),
+    tui-grid-cell-hover-backgroundColor: #31375b,
+    v-tabs-items-border-color: rgba(255, 255, 255, 0.7),
+    v-tabs-backgroundColor: rgba(57, 64, 94, 0.5),
+    v-tabs-active-backgroundColor: #242940,
+    v-tabs-active-border-color: rgba(255, 255, 255, 0.7),
+    v-dialog-card-text-color: #fff,
+    tui-datepicker-backgroundColor: #0d0f17,
+    tui-datepicker-border-color: rgba(255, 255, 255, 0.3),
+    tui-datepicker-selectable-hover-color: #2d3355,
+    tui-datepicker-selected-color: #1a4e87,
+    tui-datepicker-calendar-color: #fff,
+    tui-editor-contents-color: #111,
+    admin-menu-expanded-list-backgroundColor: #144985
+  ),
+  light: (
+    w-g5: $--color-gray_555,
+    g5-w: $--color-white,
+    gc-g9: $--color-gray_999,
+    g5-gc: $--color-gray_C,
+    g7-g9: $--color-gray_9,
+    g9-g7: $--color-gray_7,
+    fontColor: #333,
+    pageBackground: #ececef,
+    cardBackground: #fefefe,
+    hover: #f0f5fc,
+    btnClose: #f1f0f8,
+    scrollbar-track: #e9e9e9,
+    scrollbar-thumb: #bbbbbb,
+    card-default-color: #111,
+    card-subtitle: #555,
+    activate: #111,
+    non-activate: #555,
+    text-subcolor: #999,
+    border-color: #ddd,
+    router-header: #fff,
+    router-tab-item: #e1e7f3,
+    router-tab-item-active: #4777d9,
+    router-tab-item-color: #111,
+    router-tab-item-active-color: #fff,
+    router-tab-item-icon-color: #838aa6,
+    router-tab-item-icon-active-color: #fff,
+    router-tab-item-hover-color: #366dbe,
+    router-tab-slot-end-button-backgroundColor: #3f4d7d,
+    v-btn-backgroundColor: #4777d9,
+    v-box: #f0f3fa,
+    v-banner-border-color: #ddd,
+    v-treeview-node-root-backgroundColor: #4777d9,
+    v-treeview-node-root-label-color: #111,
+    v-treeview-node-root-label-active-color: #fff,
+    v-treeview-node-root-icon-color: #555,
+    v-treeview-node-root-icon-active-color: #fff,
+    v-treeview-node-subroot-backgroundColor: #e1e7f3,
+    v-treeview-node-label-color: #555,
+    v-treeview-node-label-active-color: #111,
+    v-treeview-leaf-active-backgroundColor: #edf1f7,
+    v-treeview-leaf-active-color: #366dbe,
+    v-treeview-icon-color: #a4aac3,
+    v-treeview-icon-active-color: #616885,
+    v-input-backgroundColor: #ffffff,
+    v-input-fieldset-color: #b4b8c9,
+    v-input-fieldset-hover-color: #b4b8c9,
+    v-input-icon-color: #555,
+    v-input-readonly-border-color: #b4b8c9,
+    v-input-readonly-backgroundColor: #f5f5f5,
+    v-input-disabled-backgroundColor: #eee,
+    v-input-disabled-color: #bbb,
+    v-select-label-color: #111,
+    v-calendar-weekday-backgroundColor: #e0e0e0,
+    v-calendar-weekday-color: #111,
+    v-calendar-weekday-border-color: #d4d4d4,
+    v-calendar-day-color: #111,
+    v-calendar-day-in-not-month-color: #f8f8f8,
+    v-calendar-is-today-background-color: #e3eaf3,
+    tui-grid-header-backgroundColor: #e0e0e0,
+    tui-grid-border-horziontal-color: #e0e0e0,
+    tui-grid-border-vertical-color: #d4d4d4,
+    tui-grid-cell-backgroundColor: #fff,
+    tui-grid-cell-color: #555,
+    tui-grid-cell-insert-color: #13636c,
+    tui-grid-cell-selected-color: #ecf2fa,
+    tui-grid-cell-modify-color: #e6f5f7,
+    tui-grid-cell-removed-color: #fddde1,
+    tui-grid-cell-hover-backgroundColor: #f5f5f5,
+    v-tabs-items-border-color: #989db1,
+    v-tabs-backgroundColor: #ddd,
+    v-tabs-active-backgroundColor: #fff,
+    v-tabs-active-border-color: #989db1,
+    v-dialog-card-text-color: #111,
+    tui-datepicker-backgroundColor: #fff,
+    tui-datepicker-border-color: #b4b8c9,
+    tui-datepicker-selectable-hover-color: #e1e7f3,
+    tui-datepicker-selected-color: #4777d9,
+    tui-datepicker-calendar-color: #111,
+    tui-editor-contents-color: #111,
+    admin-menu-expanded-list-backgroundColor: #3f4d7d
+  )
+);

assets/variables.scss

@@ -0,0 +1,56 @@
+// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
+//
+// The variables you want to modify
+// $font-size-root: 20px;
+$body-font-family: "Spoqa Han Sans Neo", "Roboto", "sans-serif" !default;
+$grid-gutter: 10px;
+$material-dark: (
+  "background": #383f5d,
+  "cards": #242940,
+  "navigation-drawer": #1a1d2d,
+  "chips": rgba(255, 255, 255, 0.1)
+);
+
+$material-light: (
+  "background": #f0f3fa,
+  "cards": #fff,
+  "navigation-drawer": #fff,
+  "chips": #eee
+);
+
+$treeview-node-padding: 10px;
+$treeview-node-height: 40px;
+
+$banner-start-padding: 10px;
+$banner-end-padding: 10px;
+$banner-y-padding: 12px;
+
+$card-border-radius: 10px;
+$card-title-font-size: 1.25rem;
+$card-title-font-weight: 700;
+$card-title-line-height: 1.5;
+$card-subtitle-padding: 20px;
+
+$timeline-dot-small-size: 10px;
+
+$data-table-regular-row-height: 36px;
+
+$input-font-size: 14px;
+$input-max-height: 36px;
+$text-field-filled-full-width-outlined-slot-min-height: 36px;
+$text-field-solo-control-min-height: 36px;
+$text-field-line-height: 1.285;
+$text-field-enclosed-prepend-append-margin-top: 0;
+$text-field-enclosed-details-padding: 0 8px;
+
+$tab-font-size: 1rem; // 16px;
+$tab-font-weight: 400;
+$tabs-bar-height: 45px;
+$tabs-item-padding: 12px;
+
+$list-border-radius: 4px;
+$list-padding: 0;
+$list-item-min-height: 36px;
+$list-item-padding: 0;
+$list-item-title-font-size: 0.875rem; // 14px;
+$list-item-content-padding: 10px 7px;