From d3170dcb79edc741858e97a9726794bf4af525ca Mon Sep 17 00:00:00 2001
From: KANU <65529758+KANU896@users.noreply.github.com>
Date: Mon, 11 Dec 2023 21:00:15 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=BD=94=EB=94=A9=EB=B0=A9=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=EC=84=B1=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=AA=A8=EB=82=98=EC=BD=94=EC=97=90=EB=94=94?=
 =?UTF-8?q?=ED=84=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json              |  45 ++++++
 package.json                   |   1 +
 src/assets/main.css            |   1 +
 src/components/code/Monaco.vue | 284 +++++++++++++++++++++++++++++++++
 src/router/index.js            |   6 +
 src/views/code/Normal.vue      | 159 ++++++++++++++++++
 src/views/room/WaitingRoom.vue |  14 +-
 7 files changed, 509 insertions(+), 1 deletion(-)
 create mode 100644 src/components/code/Monaco.vue
 create mode 100644 src/views/code/Normal.vue

diff --git a/package-lock.json b/package-lock.json
index 76afdb6..4bf5f95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.5",
         "axios": "^1.6.2",
         "bootstrap": "^5.3.2",
+        "monaco-editor-vue3": "^0.1.10",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
       },
@@ -1998,6 +1999,21 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+    },
+    "node_modules/monaco-editor-vue3": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/monaco-editor-vue3/-/monaco-editor-vue3-0.1.10.tgz",
+      "integrity": "sha512-C1jhyx+KHQyW1AbjuA8DhIZSqkVquV7MnuWXG9jESd0e+CkzEFzuk1RvNqlN2eJ2fRkvF32yEPHYfvz9quOhHQ==",
+      "dependencies": {
+        "monaco-editor": "^0.33.0",
+        "vite-plugin-monaco-editor": "^1.1.0",
+        "vue": "^3.2.37"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2751,6 +2767,14 @@
         }
       }
     },
+    "node_modules/vite-plugin-monaco-editor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
+      "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
+      "peerDependencies": {
+        "monaco-editor": ">=0.33.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.8.tgz",
@@ -4180,6 +4204,21 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+    },
+    "monaco-editor-vue3": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/monaco-editor-vue3/-/monaco-editor-vue3-0.1.10.tgz",
+      "integrity": "sha512-C1jhyx+KHQyW1AbjuA8DhIZSqkVquV7MnuWXG9jESd0e+CkzEFzuk1RvNqlN2eJ2fRkvF32yEPHYfvz9quOhHQ==",
+      "requires": {
+        "monaco-editor": "^0.33.0",
+        "vite-plugin-monaco-editor": "^1.1.0",
+        "vue": "^3.2.37"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4640,6 +4679,12 @@
         "rollup": "^3.27.1"
       }
     },
+    "vite-plugin-monaco-editor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
+      "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
+      "requires": {}
+    },
     "vue": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.8.tgz",
diff --git a/package.json b/package.json
index 09b0125..8e6380a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
+    "monaco-editor-vue3": "^0.1.10",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
diff --git a/src/assets/main.css b/src/assets/main.css
index 35a19fb..f6b5d6f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -14,6 +14,7 @@ body {
   --red-rank-color: #ff7d97;
   --blue-rank-color: #33d6f5;
 
+
   --black-color: #000000;
   --white-color: #ffffff;
   --green-color:#4c7c35;
diff --git a/src/components/code/Monaco.vue b/src/components/code/Monaco.vue
new file mode 100644
index 0000000..295299e
--- /dev/null
+++ b/src/components/code/Monaco.vue
@@ -0,0 +1,284 @@
+<template>
+    <div class="monaco-editor-vue3" :style="style">
+        <div>결과창</div>
+        <div id="outputDiv"></div>
+        <button @click="_setValue(this.value)" class="button">리셋하기</button>
+        <button @click="execution()" class="button">코드 실행하기</button>
+        <button @click="submit()" class="button" id="submit">코드 제출하기</button>
+        <br>
+    </div>
+    
+  </template>
+  
+  
+
+  <style>
+  .monaco-editor-vue3{
+    overflow: hidden;
+    margin-top: 5px; 
+  }
+  #outputDiv{
+    background-color: var(--white-color); 
+    height: 200px; 
+
+    border: 3px solid var(--main5-color);
+    border-radius: 10px;
+    
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+  }
+
+  .button{
+    padding: 8px;
+    margin: 5px;
+    font-size: 1.0rem;
+
+    color: var(--main1-color);
+    background-color: var(--main4-color);
+    border: none;
+    border-radius: 6px;
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+    }
+  }
+
+  #submit{
+      color: var(--main1-color);
+      background-color: var(--red-color);
+      border: none;
+      border-radius: 6px;
+
+      &:hover {
+          background-color: var(--red-hover-color);
+      }
+    }
+  </style>
+  
+  <script>
+  import axios from 'axios';
+  import { defineComponent, computed, toRefs } from 'vue'
+  import * as monaco from 'monaco-editor'
+  
+  export default defineComponent({
+    name: 'MonacoEditor',
+    data(){
+        return{
+            value: 'import java.io.*;\nimport java.util.*;\n\npublic class Main {\n    public static void main(String[] args) {\n      \n    }\n}',
+        };
+    },
+    props: {
+      diffEditor: { type: Boolean, default: false },
+      width: { type: [String, Number], default: '95%' },
+      height: { type: [String, Number], default: '98%' },
+      original: String,
+      value: {type: String, 
+        default: 'import java.io.*;\nimport java.util.*;\n\npublic class Main {\n    public static void main(String[] args) {\n      \n    }\n}'},
+      language: { type: String, default: 'java' },
+      theme: { type: String, default: 'vs-dark' }, //vs, vs-dark, hc-black
+      options: {
+        type: Object,
+        default() {
+          return {
+            minimap: { enabled: false,},
+            // paste: { enabled: false, showPasteSelector: 'never'}
+          }
+        },
+      },
+    },
+
+    emits: ['editorWillMount', 'editorDidMount', 'change', 'update:value'],
+    setup(props) {
+      const { width, height } = toRefs(props)
+      const style = computed(() => {
+        const fixedWidth = width.value.toString().includes('%')
+          ? width.value
+          : `${width.value}px`
+        const fixedHeight = height.value.toString().includes('%')
+          ? height.value
+          : `${height.value}px`
+        return {
+          width: fixedWidth,
+          height: fixedHeight,
+          'text-align': 'left',
+          'align-items': 'center',
+          'margin-left': '15px',
+          // 'background-color': 'black',
+          // 'border': '3px solid var(--main5-color)',
+          // 'border-radius': '10px'
+        }
+      })
+      return {
+        style,
+      }
+    },
+    mounted() {
+      this.initMonaco()
+
+      // 붙여넣기 막기
+      this.editor.getDomNode().addEventListener('paste', (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      }, true);
+    },
+    beforeUnmount() {
+      this.editor && this.editor.dispose()
+    },
+    methods: {
+      initMonaco() {
+        this.$emit('editorWillMount', monaco)
+        const { value, language, theme, options } = this
+        this.editor = monaco.editor[
+          this.diffEditor ? 'createDiffEditor' : 'create'
+        ](this.$el, {
+          value: value,
+          language: language,
+          theme: theme,
+          ...options,
+        })
+        this.diffEditor && this._setModel(this.value, this.original)
+  
+        // @event `change`
+        const editor = this._getEditor()
+        editor &&
+          editor.onDidChangeModelContent((event) => {
+            const value = editor.getValue()
+            if (this.value !== value) {
+              this.$emit('change', value, event)
+              this.$emit('update:value', value)
+            }
+          })
+  
+        this.$emit('editorDidMount', this.editor)
+      },
+      _setModel(value, original) {
+        const { language } = this
+        const originalModel = monaco.editor.createModel(original, language)
+        const modifiedModel = monaco.editor.createModel(value, language)
+        this.editor.setModel({
+          original: originalModel,
+          modified: modifiedModel,
+        })
+      },
+      _setValue(value) {
+        let editor = this._getEditor()
+        if (editor) return editor.setValue(value)
+      },
+      _getValue() {
+        let editor = this._getEditor()
+        if (!editor) return ''
+        console.log(editor.getValue())
+        return editor.getValue()
+      },
+      _getEditor() {
+        if (!this.editor) return null
+        return this.diffEditor ? this.editor.modifiedEditor : this.editor
+      },
+      _setOriginal() {
+        const { original } = this.editor.getModel()
+        original.setValue(this.original)
+      },
+      execution(){
+
+        const quizNo = 100;  // 퀴즈번호
+        const fileContent = this._getValue();  // 실행할 코드 내용을 지정해야 합니다.
+
+        // FormData 객체 생성
+        const formData = new FormData();
+
+        // 텍스트 데이터 추가
+        formData.append('quizNo', quizNo);
+
+        // 파일 데이터 추가
+        const mainFile = new Blob([fileContent], { type: 'text/plain' });
+        formData.append('Main', mainFile, 'hello.txt');
+        const url = "http://192.168.1.112:8080/code/executeCode"
+        axios
+        .post(url, formData, {
+            withCredentials: true,
+            headers: {
+            'Content-Type': 'multipart/form-data',
+            },
+        })
+        .then(response=>{
+            alert(response.data)
+            // alert(response.data.msg)
+            console.log(response.data)
+            const outputDiv = document.getElementById('outputDiv');
+            outputDiv.textContent = response.data;
+            // id.div.setValue(response.data.msg);
+        })
+        //네트워크에 의한 요청 실패일 경우
+        .catch(error=>{
+            console.log(error)
+            alert(error.message)
+            // this.error = error.response.data.error
+        })
+      },
+      submit(){
+        
+        const quizNo = 100;  // 퀴즈번호
+        const fileContent = this._getValue();  // 실행할 코드 내용을 지정해야 합니다.
+
+        // FormData 객체 생성
+        const formData = new FormData();
+
+        // dto 객체 생성 및 JSON 문자열로 변환 후 formData에 추가
+        const dto = { memberNo: 2, quizNo: 100};
+        formData.append('dto', new Blob([JSON.stringify(dto)], { type: 'application/json' }), 'dto.json');
+
+        // 파일 데이터 추가
+        const mainFile = new Blob([fileContent], { type: 'text/plain' });
+        formData.append('Main', mainFile, 'hello.txt');
+        
+        const url = "http://192.168.1.112:8080/submit/normalMode"
+        axios
+        .post(url, formData, {
+            withCredentials: true,
+            headers: {
+            'Content-Type': 'multipart/form-data',
+            },
+        })
+        .then(response=>{
+            alert(response.data)
+            const outputDiv = document.getElementById('outputDiv');
+            outputDiv.textContent = response.data;
+            // id.div.setValue(response.data.msg);
+        })
+        //네트워크에 의한 요청 실패일 경우
+        .catch(error=>{
+            console.log(error)
+            alert(error.message)
+            // this.error = error.response.data.error
+        })
+      }
+    },
+    watch: {  
+      options: {
+        deep: true,
+        handler(options) {
+          this.editor.updateOptions(options)
+        },
+      },
+      value() {
+        this.value !== this._getValue() && this._setValue(this.value)
+      },
+      original() {
+        this._setOriginal()
+      },
+      language() {
+        if (!this.editor) return
+        if (this.diffEditor) {
+          const { original, modified } = this.editor.getModel()
+          monaco.editor.setModelLanguage(original, this.language)
+          monaco.editor.setModelLanguage(modified, this.language)
+        } else
+          monaco.editor.setModelLanguage(this.editor.getModel(), this.language)
+      },
+      theme() {
+        monaco.editor.setTheme(this.theme)
+      },
+    },
+  })
+  </script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 3385cd0..210865f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ import Login from '@/views/member/Login.vue'
 import AdminPage from '@/views/admin/adminPage.vue'
 import QuizView from '@/views/quiz/QuizView.vue'
 
+import Normal from '@/views/code/Normal.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -50,6 +51,11 @@ const router = createRouter({
       path: '/quiz',
       name: 'QuizView',
       component: QuizView
+    },
+    {
+      path: '/normal/:roomNo',
+      name: 'Normal',
+      component: Normal
     }
   ]
 })
diff --git a/src/views/code/Normal.vue b/src/views/code/Normal.vue
new file mode 100644
index 0000000..fa6c372
--- /dev/null
+++ b/src/views/code/Normal.vue
@@ -0,0 +1,159 @@
+<template lang="">
+
+<div id="code-layout" class="row">
+    <body class="flex-container">
+
+        <div id="code-side-layout" class="col-2">
+            <div>문제설명</div>
+            <div id="problem-description">asdfdddddddddddddddddddddddddddddddd</div>
+
+            <div>테스트케이스</div>
+            <div id="testcase-description">asdf</div>
+            <button class="button">문제신고하기</button>
+            
+            <span>시간타이머</span>
+            <span id="timer">59:00:00</span>
+
+            <button class="button" id="exit">나가기</button>
+        </div>
+
+
+        <div class="monaco">
+            <Monaco />
+        </div>
+
+        <div id="relative-code">
+            상대코드
+        </div>
+
+
+    </body>
+
+</div>
+
+
+        
+
+        
+</template>
+<script>
+import Monaco from '../../components/code/Monaco.vue'
+export default {
+    name: 'normal',
+    components: {Monaco}
+    
+}
+</script>
+<style scoped>
+
+
+#code-layout {
+  min-width: 1280px;
+  height: max-content;
+
+  display: flex;
+  justify-content: space-around;
+
+  overflow: visible;
+  white-space: nowrap;
+
+  color: var(--main5-color);
+  border: 3px solid var(--main5-color);
+}
+
+body.flex-container{
+    display: inline-flex;
+    justify-content: center; 
+    height: 792px;
+    padding-bottom: 10px;
+    
+    /* align-items: center; */
+}
+
+
+#code-side-layout {
+  width: 260px;
+  padding: 10px;
+  margin-top: 90px;
+  margin-right: 10px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+
+  border: 3px solid var(--main5-color);
+  border-radius: 10px;
+}
+#problem-description{
+    height: 250px;
+    background-color: var(--white-color);
+    border: 3px solid var(--main5-color);
+    border-radius: 10px;
+
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+
+    white-space: pre-wrap;
+}
+#testcase-description{
+    height: 250px;
+    background-color: var(--white-color);
+    border: 3px solid var(--main5-color);
+    border-radius: 10px;
+
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+
+    white-space: pre-wrap;
+}
+.monaco {
+    width: 760px;
+    margin-top: 90px;
+     margin-right: 10px;
+    /* margin-left: 10px;  */
+    border: 3px solid var(--main5-color);
+    border-radius:10px;
+    
+}
+
+#relative-code{
+    width: 260px;
+  padding: 10px;
+  margin-top: 90px;
+  margin-right: 10px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+
+  border: 3px solid var(--main5-color);
+  border-radius: 10px;
+}
+
+.button{
+    padding: 8px;
+    font-size: 1.5rem;
+
+    color: var(--main1-color);
+    background-color: var(--main4-color);
+    border: none;
+    border-radius: 6px;
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+    }
+}
+
+#exit{
+    color: var(--main1-color);
+    background-color: var(--red-color);
+    border: none;
+    border-radius: 6px;
+
+    &:hover {
+        background-color: var(--red-hover-color);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/room/WaitingRoom.vue b/src/views/room/WaitingRoom.vue
index 41fea1d..0d81bc3 100644
--- a/src/views/room/WaitingRoom.vue
+++ b/src/views/room/WaitingRoom.vue
@@ -141,6 +141,7 @@
 </template>
 <script>
 import RoomMember from '../../components/room/RoomMember.vue'
+import axios from 'axios';
 export default {
   name: 'WaitingRoom',
   components: { RoomMember },
@@ -189,7 +190,18 @@ export default {
       this.socket.send(JSON.stringify(talkMessage))
     },
     gameStartButtonClickHandler() {
-      this.$router.push({ path: `` })
+      this.$router.push({ path: `/normal/${this.$router.currentRoute.value.params.roomNo}` })
+      // axios
+      //   .post(`${this.backURL}/room`, data, {
+      //     headers: {
+      //       'Content-Type': 'application/json'
+      //     }
+      //   })
+      //   .then((res) => {
+      //     console.log(res)
+          
+          
+      //   })
     }
   }
 }

From 2c1883c1ac3f3441f40b9589bcaadd62ffbd8755 Mon Sep 17 00:00:00 2001
From: KANU <65529758+KANU896@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:26:31 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=9D=BC=EB=B0=98=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=BD=94=EB=94=A9=EB=B0=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/code/Monaco.vue |  73 ++++++----
 src/main.js                    |   2 +-
 src/views/code/Normal.vue      | 238 +++++++++++++++++++++++++++------
 src/views/room/WaitingRoom.vue |  11 --
 4 files changed, 245 insertions(+), 79 deletions(-)

diff --git a/src/components/code/Monaco.vue b/src/components/code/Monaco.vue
index 295299e..879e412 100644
--- a/src/components/code/Monaco.vue
+++ b/src/components/code/Monaco.vue
@@ -1,16 +1,17 @@
 <template>
     <div class="monaco-editor-vue3" :style="style">
-        <div>결과창</div>
-        <div id="outputDiv"></div>
+        <div id="resuet">결과창</div>
+        <div id="outputDiv">
+          <span v-html="replaceNewlines(this.output)"></span>
+        </div>
         <button @click="_setValue(this.value)" class="button">리셋하기</button>
         <button @click="execution()" class="button">코드 실행하기</button>
         <button @click="submit()" class="button" id="submit">코드 제출하기</button>
+        <div style="display: inline;"> *주의! Main클래스를 변경하지 마세요! </div>
         <br>
     </div>
-    
   </template>
-  
-  
+
 
   <style>
   .monaco-editor-vue3{
@@ -24,9 +25,11 @@
     border: 3px solid var(--main5-color);
     border-radius: 10px;
     
+    padding: 8px;
+    font-size: 0.9rem;
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   .button{
@@ -66,6 +69,9 @@
     data(){
         return{
             value: 'import java.io.*;\nimport java.util.*;\n\npublic class Main {\n    public static void main(String[] args) {\n      \n    }\n}',
+            quizNo: '',
+            memberNo: '',
+            output: '',
         };
     },
     props: {
@@ -113,14 +119,26 @@
         style,
       }
     },
+    created(){
+              // room에서 roomNo에 해당하는 quizNo 가져오기
+        // 문제내용 가져오기
+        // 테스트케이스 가져오기
+        const url = `${this.backURL}/room/${this.$router.currentRoute.value.params.roomNo}`
+
+        axios
+        .get(url)
+        .then((response) => {
+            this.quizNo = response.data.quizNo
+        })
+    },
     mounted() {
       this.initMonaco()
 
       // 붙여넣기 막기
-      this.editor.getDomNode().addEventListener('paste', (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-      }, true);
+      // this.editor.getDomNode().addEventListener('paste', (event) => {
+      //   event.stopPropagation();
+      //   event.preventDefault();
+      // }, true);
     },
     beforeUnmount() {
       this.editor && this.editor.dispose()
@@ -179,11 +197,16 @@
         const { original } = this.editor.getModel()
         original.setValue(this.original)
       },
+      // /n을 <br> 태그로 대체하는 메서드
+      replaceNewlines(text) {
+        return text.replace(/\n/g, '<br>');
+      },
       execution(){
-
-        const quizNo = 100;  // 퀴즈번호
+        
+        const quizNo = this.quizNo // 퀴즈번호
         const fileContent = this._getValue();  // 실행할 코드 내용을 지정해야 합니다.
 
+
         // FormData 객체 생성
         const formData = new FormData();
 
@@ -198,15 +221,13 @@
         .post(url, formData, {
             withCredentials: true,
             headers: {
-            'Content-Type': 'multipart/form-data',
+             'Content-Type': 'multipart/form-data',
             },
-        })
+        }) 
         .then(response=>{
-            alert(response.data)
-            // alert(response.data.msg)
-            console.log(response.data)
-            const outputDiv = document.getElementById('outputDiv');
-            outputDiv.textContent = response.data;
+            this.output = response.data
+            // const outputDiv = document.getElementById('outputDiv');
+            // outputDiv.textContent = response.data;
             // id.div.setValue(response.data.msg);
         })
         //네트워크에 의한 요청 실패일 경우
@@ -218,32 +239,32 @@
       },
       submit(){
         
-        const quizNo = 100;  // 퀴즈번호
+        const quizNo = this.quizNo  // 퀴즈번호
         const fileContent = this._getValue();  // 실행할 코드 내용을 지정해야 합니다.
 
         // FormData 객체 생성
         const formData = new FormData();
 
         // dto 객체 생성 및 JSON 문자열로 변환 후 formData에 추가
-        const dto = { memberNo: 2, quizNo: 100};
+        const dto = { memberNo: 2, quizNo};
         formData.append('dto', new Blob([JSON.stringify(dto)], { type: 'application/json' }), 'dto.json');
 
         // 파일 데이터 추가
         const mainFile = new Blob([fileContent], { type: 'text/plain' });
-        formData.append('Main', mainFile, 'hello.txt');
+        formData.append('Main', mainFile, 'Code.txt');
         
         const url = "http://192.168.1.112:8080/submit/normalMode"
         axios
         .post(url, formData, {
             withCredentials: true,
             headers: {
-            'Content-Type': 'multipart/form-data',
+              'Content-Type': 'multipart/form-data',
             },
         })
         .then(response=>{
-            alert(response.data)
-            const outputDiv = document.getElementById('outputDiv');
-            outputDiv.textContent = response.data;
+            this.output = response.data
+            // const outputDiv = document.getElementById('outputDiv');
+            // outputDiv.textContent = response.data;
             // id.div.setValue(response.data.msg);
         })
         //네트워크에 의한 요청 실패일 경우
diff --git a/src/main.js b/src/main.js
index c7dba49..3c15cab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,6 +26,6 @@ const app = createApp(App)
 app.use(router)
 app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')
-app.config.globalProperties.backURL = 'http://192.168.3.113:8881/codesparring'
+app.config.globalProperties.backURL = 'http://192.168.1.112:8080'
 app.config.globalProperties.socketURL = 'ws://192.168.3.113:8881/codesparring/ws/session'
 
diff --git a/src/views/code/Normal.vue b/src/views/code/Normal.vue
index fa6c372..8af9c73 100644
--- a/src/views/code/Normal.vue
+++ b/src/views/code/Normal.vue
@@ -3,49 +3,147 @@
 <div id="code-layout" class="row">
     <body class="flex-container">
 
-        <div id="code-side-layout" class="col-2">
-            <div>문제설명</div>
-            <div id="problem-description">asdfdddddddddddddddddddddddddddddddd</div>
-
-            <div>테스트케이스</div>
-            <div id="testcase-description">asdf</div>
-            <button class="button">문제신고하기</button>
+        <div id="code-side-layout">
+            <div id="problem-des-title" class="title">문제설명</div>
+            <div id="problem-des-container">
+                <div id="problem-des-content">
+                    <span v-html="replaceNewlines(this.quizContent)"></span>
+                </div>
+            </div>
+
+            <div id="testcase-des-title" class="title">테스트케이스</div>
+            <div id="testcase-des-container">
+                <div id="testcase-des-content" v-for="testcase in testcaseList.slice(0, 3)" :key="testcase.testcaseNo">
+                    <div>입력:</div>
+                    <div class="testcase-div">
+                        <span v-html="replaceNewlines(testcase.testcaseInput)"></span>
+                    </div>
+                    <br>
+                    <div>출력:</div>
+                    <div class="testcase-div">
+                        <span v-html="replaceNewlines(testcase.testcaseOutput)"></span>
+                    </div>
+                    <hr id="testcase-hr">
+                </div>
+            </div>
+            <button class="button" @:click="reportButtonClickHandler">문제신고하기</button>
             
-            <span>시간타이머</span>
-            <span id="timer">59:00:00</span>
+            <div id="timer-title" class="title">제한시간</div>
+            <div id="timer-content" class="title" :class="{ 'timer-expired': timerRunning }">{{ formattedTime }}</div>
 
-            <button class="button" id="exit">나가기</button>
+            <button class="button" id="exit" @:click="exitButtonClickHandler">나가기</button>
         </div>
 
 
         <div class="monaco">
-            <Monaco />
+            <Monaco v-bind:childQuizNoValue="quizNo"/>
         </div>
 
-        <div id="relative-code">
-            상대코드
+        <div id="relative-code-layout">
+            <div id="relative-code-title" class="title">상대코드</div>
+            <div id="relative-code-container">
+                <div id="relative-code-content">1P</div>
+                <div id="relative-code-content">2P</div>
+                <div id="relative-code-content">3P</div>
+            </div>
         </div>
-
-
     </body>
 
 </div>
-
-
-        
-
-        
 </template>
+
 <script>
 import Monaco from '../../components/code/Monaco.vue'
+import axios from 'axios';
 export default {
     name: 'normal',
-    components: {Monaco}
+    components: {Monaco},
+    data(){
+        return{
+            quizNo: '',
+            testcaseNo: '',
+            testcaseList: [],
+            quizContent: '',
+            timerRunning: true,
+            minutes: 1,
+            seconds: 0,
+            
+        }
+    },
+    computed: {
+        formattedTime() {
+            return `${String(this.minutes).padStart(2, '0')}:${String(this.seconds).padStart(2, '0')}`;
+        },
+    },
     
+    methods: {
+        reportButtonClickHandler(){
+            //신고팝업창
+        },
+        exitButtonClickHandler(){
+            this.$router.push({ path: `/` })
+        },
+        updateTimer() {
+            if (this.minutes === 0 && this.seconds === 0) {
+                this.timerRunning = false; // 타이머 종료
+                return;
+            }
+
+            if (this.seconds === 0) {
+                this.minutes--;
+                this.seconds = 59;
+            } else {
+                this.seconds--;
+            }
+
+            if (this.timerRunning) {
+                setTimeout(this.updateTimer, 1000); // 1초마다 업데이트
+                
+            }  
+        },
+        // /n을 <br> 태그로 대체하는 메서드
+        replaceNewlines(text) {
+            return text.replace(/\n/g, '<br>');
+        },
+
+        
+    },
+    created(){
+        //타이머 시작
+        this.updateTimer();
+
+        // room에서 roomNo에 해당하는 quizNo, quizContent 가져오기
+        const url = `${this.backURL}/room/${this.$router.currentRoute.value.params.roomNo}`
+        axios
+        .get(url)
+        .then((response) => {
+            this.quizNo = response.data.quizNo
+            this.quizContent = response.data.quizContent
+
+            const url2 = `${this.backURL}/submit/${this.quizNo}`
+
+            axios
+            .get(url2)
+            .then((response) => {
+                this.testcaseList = response.data
+            })
+            .catch(()=>{
+                alert('테스트케이스 조회에 실패하였습니다')
+            })
+        })
+        .catch(() => {
+            alert('문제 정보 조회에 실패하였습니다')
+        })
+
+    },
 }
+
 </script>
 <style scoped>
 
+#timer-content.timer-expired {
+  color: red;
+}
 
 #code-layout {
   min-width: 1280px;
@@ -84,29 +182,45 @@ body.flex-container{
   border: 3px solid var(--main5-color);
   border-radius: 10px;
 }
-#problem-description{
+
+
+#problem-des-container{
+    box-sizing: border-box;
     height: 250px;
+    margin-bottom: 10px;
     background-color: var(--white-color);
     border: 3px solid var(--main5-color);
     border-radius: 10px;
 
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
+    overflow-y: auto;
+    word-wrap: break-word; /* 단어 단위로 자동 줄 바꿈  */
+}
 
-    white-space: pre-wrap;
+#problem-des-content{
+    box-sizing: border-box;
+    font-size: 0.8rem;
+    padding: 8px;
+    overflow-wrap: break-word; /* 단어 단위로 자동 줄 바꿈  */
 }
-#testcase-description{
+
+
+#testcase-des-container{
     height: 250px;
+    margin-bottom: 10px;
     background-color: var(--white-color);
     border: 3px solid var(--main5-color);
     border-radius: 10px;
 
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
+    overflow-y: auto;
+}
+#testcase-des-content{
 
-    white-space: pre-wrap;
+    font-size: 0.8rem;
+    padding: 8px
 }
 .monaco {
     width: 760px;
@@ -118,20 +232,6 @@ body.flex-container{
     
 }
 
-#relative-code{
-    width: 260px;
-  padding: 10px;
-  margin-top: 90px;
-  margin-right: 10px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  border: 3px solid var(--main5-color);
-  border-radius: 10px;
-}
-
 .button{
     padding: 8px;
     font-size: 1.5rem;
@@ -156,4 +256,60 @@ body.flex-container{
         background-color: var(--red-hover-color);
     }
 }
+
+#relative-code-layout{
+    width: 260px;
+    padding: 10px;
+    margin-top: 90px;
+    margin-right: 10px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+
+    border: 3px solid var(--main5-color);
+    border-radius: 10px;
+}
+
+
+.title{
+    padding-left: 10px;
+}
+#relative-code-container{
+    /* display: flex; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+    
+}
+
+#relative-code-content{
+    width: 200px;
+    height: 22vh;
+    margin-bottom: 16px;
+    border: 3px solid var(--main5-color);
+    border-radius: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: var(--white-color);
+    /* justify-content: space-around; */
+    
+}
+.testcase-div{
+    background-color: var(--main2-color);
+    background-clip: content-box;
+}
+
+#testcase-hr{
+    border: 0px;
+    height: 3px;
+    background-color: var(--black-color);
+    margin:16px 0px 0px
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/room/WaitingRoom.vue b/src/views/room/WaitingRoom.vue
index 0d81bc3..ae9b846 100644
--- a/src/views/room/WaitingRoom.vue
+++ b/src/views/room/WaitingRoom.vue
@@ -191,17 +191,6 @@ export default {
     },
     gameStartButtonClickHandler() {
       this.$router.push({ path: `/normal/${this.$router.currentRoute.value.params.roomNo}` })
-      // axios
-      //   .post(`${this.backURL}/room`, data, {
-      //     headers: {
-      //       'Content-Type': 'application/json'
-      //     }
-      //   })
-      //   .then((res) => {
-      //     console.log(res)
-          
-          
-      //   })
     }
   }
 }