Replace node-sass to dart-sass

Deprecated된 문법인 /deep/ syntax를 ::v-deep syntax로 대체

Closes #184, #185

Author: dotoleeoak

frontend/package.json

@@ -52,7 +52,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.12.0",
+    "sass": "^1.39.0",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-dll": "~1.1.12",
     "vue-template-compiler": "^2.6.11"

frontend/src/pages/oj/components/Header.vue

@@ -116,7 +116,7 @@ export default {
       text-decoration-color: #8dc63f;
     }
   }
-  /deep/ .modal-med {
+  ::v-deep .modal-med {
     .modal-dialog {
       .modal-content {
         position:absolute;
@@ -134,7 +134,7 @@ export default {
       }
     }
   }
-  /deep/ .modal-big {
+  ::v-deep .modal-big {
     .modal-dialog {
       .modal-content {
         min-width:800px;

frontend/src/pages/oj/views/general/Home.vue

@@ -230,7 +230,7 @@ export default {
     }
   }
 
-  /deep/ .table {
+  ::v-deep .table {
     tr {
       outline: none;
       font-size: 16px;

frontend/src/pages/oj/views/problem/Problem.vue

@@ -537,7 +537,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   @font-face {
     font-family: 'Manrope';
     src: url("../../../../fonts/Manrope-Bold.ttf");
@@ -617,11 +617,11 @@ export default {
       min-width: 125px;
     }
 
-    /deep/ .dropdown button{
+    .dropdown::v-deep button{
       background: #45576C;
     }
 
-    /deep/ .dropdown ul {
+    .dropdown::v-deep ul {
       background: #45576C;
 
       li a {

frontend/src/pages/oj/views/problem/ProblemSidebar.vue

@@ -425,7 +425,7 @@ export default {
     }
   }
 
-  /deep/ .modal {
+  ::v-deep .modal {
     .modal-dialog {
       min-width: 1200px;
 
@@ -533,11 +533,11 @@ export default {
           }
 
           // occasional code indent css fix
-          /deep/ #submission-source-code .CodeMirror-sizer {
+          #submission-source-code::v-deep .CodeMirror-sizer {
             margin-left: 38px !important;
           }
 
-          /deep/ #submission-source-code .CodeMirror-gutter-wrapper {
+          #submission-source-code::v-deep .CodeMirror-gutter-wrapper {
             left: -38px !important;
           }
 
@@ -571,7 +571,7 @@ export default {
     }
   }
 
-  /deep/ .pagination {
+  ::v-deep .pagination {
     margin-left: 25px;
 
     .page-link {

frontend/src/pages/oj/views/user/ResetPassword.vue

@@ -144,7 +144,7 @@ export default {
     width:140px;
     margin-left:34px;
   }
-  /deep/ .modal-md {
+  ::v-deep .modal-md {
     .modal-dialog {
       .modal-content {
         position:absolute;