#589 Fix problem code editor (#590)

* admin 전용 CodeMirror scope 지정

* 초기 언어template 선택 초기회

* 문제풀이 페이지 언어 변경 시 언어별 코드 보존 및 템플릿 적용

* 언어선택 tooltip 위치 변경

* template 존재하지 않는 경우 처리

* deep selector 문법 적용

Author: banchan01

frontend/src/pages/admin/components/CodeMirror.vue

@@ -1,9 +1,11 @@
 <template>
-  <codemirror
-    v-model="currentValue"
-    :options="options"
-    ref="editor"
-  ></codemirror>
+  <div class="admin-code-mirror">
+    <codemirror
+      v-model="currentValue"
+      :options="options"
+      ref="editor"
+    ></codemirror>
+  </div>
 </template>
 <script>
 // import { codemirror } from 'vue-codemirror-lite'
@@ -65,8 +67,8 @@ export default {
 }
 </script>
 
-<style>
-.CodeMirror {
+<style scoped>
+.admin-code-mirror /deep/ .CodeMirror {
   height: auto !important;
   font-family: "Courier New", Courier, monospace !important;
   font-size: 14px;
@@ -75,30 +77,30 @@ export default {
   color: #334155 !important;
 }
 
-.CodeMirror-scroll {
+.admin-code-mirror /deep/ .CodeMirror-scroll {
   height: 300px;
   overflow-y: auto !important;
 }
 
-.CodeMirror-lines {
+.admin-code-mirror /deep/ .CodeMirror-lines {
   padding: 8px 0 !important;
 }
 
-.CodeMirror-gutters {
+.admin-code-mirror /deep/ .CodeMirror-gutters {
   background-color: #f8fafc !important;
   border-right: 1px solid #e2e8f0 !important;
   padding-right: 5px;
 }
 
-.CodeMirror-linenumber {
+.admin-code-mirror /deep/ .CodeMirror-linenumber {
   color: #94a3b8 !important;
 }
 
-.CodeMirror-activeline-background {
+.admin-code-mirror /deep/ .CodeMirror-activeline-background {
   background: #f1f5f9 !important;
 }
 
-.CodeMirror-selected {
+.admin-code-mirror /deep/ .CodeMirror-selected {
   background: #cbd5e1 !important;
 }
 </style>

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

@@ -747,6 +747,7 @@ export default {
             data.spj_code = ""
           }
           data.spj_language = data.spj_language || "C"
+          this.template = {}
           this.problem = data
           this.testCaseUploaded = true
         })
@@ -778,7 +779,7 @@ export default {
           if (this.template[langName] === undefined) {
             if (this.problem.template[langName] === undefined) {
               data[langName] = {
-                checked: isSelected,
+                checked: false,
                 code: langConfig.config.template,
                 mode: langConfig.content_type,
               }

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

@@ -136,6 +136,7 @@ export default {
       submitting: false,
       code: "",
       language: "C++",
+      codePerLanguage: {},
       languages: {
         type: Array,
         default: () => {
@@ -276,11 +277,22 @@ export default {
       event.returnValue = ""
     },
     changeLanguage(newLang) {
-      if (this.problem.template[newLang]) {
-        if (this.code.trim() === "") {
-          this.code = this.problem.template[newLang]
-        }
+      // 현재 작성 중인 코드 저장
+      this.codePerLanguage[this.language] = this.code
+
+      // 변경 언어로 작성된 코드가 존재 하는 경우
+      if (this.codePerLanguage[newLang] !== undefined) {
+        this.code = this.codePerLanguage[newLang]
+      }
+      // 변경 언어로 작성된 코드가 존재하지 않음 + 변경언어 template 존재하는 경우
+      else if (this.problem.template && this.problem.template[newLang]) {
+        this.code = this.problem.template[newLang]
       }
+      // 변경 언어로 작성된 코드가 존재하지 않음 + 변경언어 template 존재하지 않는 경우
+      else {
+        this.code = ""
+      }
+
       this.language = newLang
       this.$refs.myCm.onLangChange(newLang)
     },

frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditorHeader.vue

@@ -7,7 +7,7 @@
     <div
       style="display: flex; justify-content: space-between; align-items: center"
     >
-      <Tooltip :content="'언어 선택'" placement="bottom">
+      <Tooltip :content="'언어 선택'" placement="top">
         <Dropdown @on-click="changeLanguage" trigger="click" class="dropdown">
           <span
             style="font-size: 13px; padding-right: 3px; font-weight: 450"