#556 redesign overall problem-creation-page UI (#585)

* Problem.vue 상수 추가

* 문제생성 페이지 UX/UI 변경사항

* 사용되지 않는 코드 주석 추가

* redesign overall problem creation page UI

* change source imoji

* remove duplicate problem initialization code

Author: banchan01

frontend/src/i18n/admin/en-US.js

@@ -175,8 +175,11 @@ export const m = {
   PruneTestCase_Delete_All: "전체 삭제",
 
   // Problem.vue
+  Question_Creation: "문제 생성",
   Display_ID: "문제 번호",
+  Check_ID_Duplication: "중복 확인",
   Title: "제목",
+  Question_Title: "문제 제목",
   Description: "문제 설명",
   Input_Description: "입력 설명",
   Output_Description: "출력 설명",
@@ -186,8 +189,8 @@ export const m = {
   Visible: "공개 여부",
   ShareSubmission: "제출 공유 여부",
   Languages: "언어",
-  Input_Samples: "입력 예시",
-  Output_Samples: "출력 예시",
+  Input_Samples: "예제 입력",
+  Output_Samples: "예제 출력",
   Add_Sample: "예시 추가",
   Code_Template: "코드 템플릿",
   Special_Judge: "스페셜 저지",

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

@@ -11,7 +11,6 @@ import { codemirror } from "vue-codemirror"
 import "codemirror/lib/codemirror.css"
 import "codemirror/mode/clike/clike.js"
 import "codemirror/mode/python/python.js"
-import "codemirror/theme/solarized.css"
 export default {
   name: "CodeMirror",
   data() {
@@ -21,12 +20,12 @@ export default {
         mode: "text/x-csrc",
         lineNumbers: true,
         lineWrapping: false,
-        theme: "solarized",
+        theme: "default",
         tabSize: 4,
         line: true,
         foldGutter: true,
         gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-        autofocus: true,
+        autofocus: false,
       },
     }
   },
@@ -66,12 +65,40 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .CodeMirror {
   height: auto !important;
+  font-family: "Courier New", Courier, monospace !important;
+  font-size: 14px;
+  line-height: 1.6;
+  background-color: #f8fafc !important;
+  color: #334155 !important;
 }
+
 .CodeMirror-scroll {
-  min-height: 300px;
-  max-height: 1000px;
+  height: 300px;
+  overflow-y: auto !important;
+}
+
+.CodeMirror-lines {
+  padding: 8px 0 !important;
+}
+
+.CodeMirror-gutters {
+  background-color: #f8fafc !important;
+  border-right: 1px solid #e2e8f0 !important;
+  padding-right: 5px;
+}
+
+.CodeMirror-linenumber {
+  color: #94a3b8 !important;
+}
+
+.CodeMirror-activeline-background {
+  background: #f1f5f9 !important;
+}
+
+.CodeMirror-selected {
+  background: #cbd5e1 !important;
 }
 </style>