Merge branch 'dev' into fix-qbobl5

leejaeseong11 · Dec 21, 2023 · 60921be · 60921be
2 parents a867901 + 9ad169d
commit 60921be
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 231 deletions.
diff --git a/src/components/home/ShowQuizSimply.vue b/src/components/home/ShowQuizSimply.vue
@@ -2,7 +2,7 @@
   <div id="quiz-info-container">
     <div class="row">
       <div class="col-3">티어</div>
-      <div class="col-5">제목</div>
+      <div class="col-4">제목</div>
       <div class="col-2">정답률</div>
       <div class="col-2">출제자</div>
     </div>
@@ -30,7 +30,7 @@
       <div class="col-3" v-else>
         {{ quizInfo.quizTier }}
       </div>
-      <div class="col-5">{{ quizInfo.quizTitle }}</div>
+      <div class="col-4" id="simple-quiz-title">{{ quizInfo.quizTitle }}</div>
       <div class="col-2">
         {{
           quizInfo.quizSubmitCnt == 0
@@ -45,7 +45,7 @@
   </div>
   <div id="quiz-content-title">문제 설명</div>
   <div id="quiz-content-container">
-    <pre id="quiz-content">{{ quizInfo.quizContent }}</pre>
+    <div id="quiz-content">{{ quizInfo.quizContent }}</div>
   </div>
 </template>
 <script>
@@ -70,7 +70,7 @@ export default {
   height: 454px;
 
   white-space: wrap;
-  overflow: scroll;
+  overflow: auto;
 
   border: 3px dashed var(--main5-color);
 }
@@ -83,10 +83,17 @@ export default {
 #quiz-content {
   padding: 8px;
 
+  white-space: pre-wrap;
+  overflow: auto;
   font-family: 'DNFBitBitv2';
 
   word-wrap: break-word;
   font-size: 1.125rem;
   line-height: 1.5rem;
 }
+#simple-quiz-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/views/code/CodeView.vue b/src/views/code/CodeView.vue
@@ -1,8 +1,6 @@
 <template>
   <main>
     <div id="layout">
-      <div v-if="this.reportPopup" id="back-off" @click="offPopup"></div>
-
       <div id="title">
         <div id="quiz-title-div">{{ this.quizTitle }}</div>
       </div>
@@ -97,7 +95,10 @@
           <div id="button-area">
             <div></div>
             <div id="right-button">
-              <button id="rpt-button" @click="rptQuiz">문제 신고하기</button>&nbsp;
+              <div v-if="reportModal" id="back-off" @click="offReportModal"></div>
+                <AddReport v-if="reportModal" id="report-popup" @close-modal="offReportModal"
+                        :quizInfo="{quizNo, quizTitle}"></AddReport>
+              <button id="rpt-button" @click="reportButtonClickHandler">문제 신고하기</button>&nbsp;
               <button id="close-button" @click="closePage">닫기</button>
             </div>
           </div>
@@ -107,10 +108,14 @@
   </main>
 </template>
 <script>
+
 import { apiClient } from '@/util/axios-interceptor'
+import AddReport from '../../components/report/AddReport.vue'
 
 export default {
   name: 'CodeView',
+  props: ['quizInfo'],
+  components: { AddReport},
   data() {
     return {
       quizNo: 0,
@@ -125,7 +130,7 @@ export default {
       outputInfo: '',
       reportList: [],
       rptOkCnt: 0,
-      reportPopup: false,
+      reportModal: false,
       memberNo: '',
       quizUrl: '',
       fileContent: ''
@@ -140,11 +145,11 @@ export default {
         return null
       }
     },
-    rptQuiz() {
-      this.reportPopup = true
+    reportButtonClickHandler() {
+      this.reportModal = true
     },
-    offPopup() {
-      this.reportPopup = false
+    offReportModal() {
+      this.reportModal = false
     },
     closePage() {
       const memberNo = this.$route.params.memberNo
@@ -432,4 +437,18 @@ textarea {
 #report-id {
   font-size: 14px;
 }
+
+#report-popup {
+    padding: 10px;
+    position: fixed;
+    background-color: var(--main1-color);
+    border: 8px solid var(--main5-color);
+    border-radius: 10px;
+    width: 700px;
+    height: 320px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
 </style>
diff --git a/src/views/member/Login.vue b/src/views/member/Login.vue
@@ -156,7 +156,7 @@ html {
 }
 
 input {
-  height: 20px;
+  height: 30px;
 }
 
 .join,