From f8f9d0cf1f2bd8915cfb511c1804d8e765b1324e Mon Sep 17 00:00:00 2001
From: suemini <121214637+suemini@users.noreply.github.com>
Date: Wed, 13 Dec 2023 10:12:21 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Feat=20:=20=EC=8B=A0=EA=B3=A0=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/admin/adminQuizPage.vue   |   6 +-
 src/components/admin/adminReportPage.vue | 335 ++++++++++++++++++++++-
 src/main.js                              |   6 +-
 3 files changed, 337 insertions(+), 10 deletions(-)

diff --git a/src/components/admin/adminQuizPage.vue b/src/components/admin/adminQuizPage.vue
index edecee8..c694955 100644
--- a/src/components/admin/adminQuizPage.vue
+++ b/src/components/admin/adminQuizPage.vue
@@ -36,11 +36,11 @@
           <button
             v-for="pg in endPage-startPage+1"
             :key="pg"
-            :class="['page-bt-num', { 'current-page': startPage + pg - 1 == currentPage }]"
-            :id="'pg'+(startPage+pg-1)"
+            :class="['page-bt-num', { 'current-page': startPage + pg == currentPage }]"
+            :id="'pg'+(startPage+pg)"
             @click="pgClick"
           >
-            {{ startPage+pg-1 }}</button
+            {{ startPage+pg}}</button
           >&nbsp;
           <button v-if="endPage!=totalPage" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
         </div>
diff --git a/src/components/admin/adminReportPage.vue b/src/components/admin/adminReportPage.vue
index ad7c70f..ba7a8b6 100644
--- a/src/components/admin/adminReportPage.vue
+++ b/src/components/admin/adminReportPage.vue
@@ -1,19 +1,344 @@
 <template>
-    <div>Reportlist 입니당~~</div>
+    <main>
+        <div id="layout">
+            <div id="quiz-header">
+                <div id="quiz-filter">
+                    <button class="quiz-opt" id="quiz-all" @click="allquiz">전체</button>&nbsp;
+                    <button class="quiz-opt" id="quiz-urk" @click="urkquiz">UNRANKED</button>
+                </div>
+
+                <div id="quiz-search-box">
+                    <input id="search-text" type="number" placeholder="문제 번호 검색" @focus="searchQuiz" />
+                    <font-awesome-icon id="search-icon" :icon="['fa', 'magnifying-glass']" @click="searchQuiz" />
+                </div>
+            </div>
+
+            <div class="quiz-content" v-if="!popup">
+                <div v-for="report in reportList" :key="report.reportNo" class="report-object">
+                    <span class="report-no">{{ report.reportNo }}</span>
+                    <span class="report-Type">{{ formatReportType(report.reportType) }}</span>
+                    <span class="report-Date">{{ formatDate(report.reportDate) }}</span>
+                    <span class="report-memberName">{{ report.memberName }}</span>
+                    <button class="quiz-info-bt" :id="'' + report.reportNo" @click="quizView">조회</button>
+                </div>
+            </div>
+
+            <div v-if="!popup" id="quiz-page">
+                <button v-if="startPage > 1" class="page-bt" id="prev" @click="pgPrevClick">◀</button>&nbsp;
+                <button v-for="pg in Math.min(endPage - startPage + 1, totalPage)" :key="pg"
+                    :class="['page-bt-num', { 'current-page': startPage + pg === currentPage }]"
+                    :id="'pg' + (startPage + pg)" @click="pgClick">
+                    {{ startPage + pg }}
+                </button>&nbsp;
+                <button v-if="endPage < totalPage" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
+            </div>
+
+
+        </div>
+    </main>
 </template>
 <script>
+import axios from 'axios'
 export default {
     name: 'AdminReportPage',
     data() {
         return {
-            
+            popup: false,
+            reportList: [],
+            currentPage: 1,
+            startPage: '',
+            endPage: '',
+            totalPage: '',
         }
+    },
+    mounted() {
+        const filter = this.$route.params.filter
+        if (filter == 'all') {
+            const onBt = document.getElementById('quiz-all')
+            onBt.style.opacity = '100%'
+            const offBt = document.getElementById('quiz-urk')
+            offBt.style.opacity = '50%'
+
+            this.popup = false
+
+            const text = document.getElementById('search-text')
+            text.value = ''
+
+            this.currentPage = this.$route.params.currentPage
+
+            const url = `${this.backURL}/report/date?page=${this.currentPage - 1}`
+            axios
+                .get(url)
+                .then((res) => {
+                    console.log(res.data.list)
+                    console.log('Response Status:', res.status);
+                    this.reportList = res.data.list
+                    this.startPage = res.data.startPage
+                    this.endPage = res.data.endPage
+                    this.totalPage = res.data.totalPage
+                })
+                .catch((error) => {
+                    console.error('Error fetching reports:', error.message);
+                    alert('신고목록을 조회할 수 없습니다')
+                })
+        } else if (filter == 'UNRANKED') {
+            const onBt = document.getElementById('quiz-urk')
+            onBt.style.opacity = '100%'
+            const offBt = document.getElementById('quiz-all')
+            offBt.style.opacity = '50%'
+
+            this.popup = false
+
+            const text = document.getElementById('search-text')
+            text.value = ''
+
+            this.currentPage = this.$route.params.currentPage
+            const url = `${this.backURL}/report/commentNull?page=${this.currentPage - 1}`
+            axios
+                .get(url)
+                .then((res) => {
+                    this.reportList = res.data.list
+                    this.startPage = res.data.startPage
+                    this.endPage = res.data.endPage
+                    this.totalPage = res.data.totalPage
+                })
+                .catch(() => {
+                    window.history.back()
+                })
+        }
+    },
+    methods: {
+        allquiz() {
+            location.href = '/admin/report/all/1'
+        },
+        urkquiz() {
+            location.href = '/admin/report/UNRANKED/1'
+        },
+        searchQuiz(e) {
+            if (this.popup) {
+                if (e.target.id == 'search-icon') return
+                const onBt = document.getElementById('quiz-all')
+                onBt.style.opacity = '100%'
+                this.popup = false
+            } else {
+                if (e.target.id == 'search-icon') {
+                    const onBt = document.getElementById('quiz-all')
+                    onBt.style.opacity = '50%'
+                    const offBt = document.getElementById('quiz-urk')
+                    offBt.style.opacity = '50%'
+                    this.popup = true
+                }
+            }
+        },
+        // fetchReports() {
+        //     console.log('리포트를 불러오는 중...');
+        //     axios
+        //         .get(`${this.backURL}/report/date?page=${this.currentPage - 1}`)
+        //         .then((response) => {
+        //             console.log('데이터를 받았습니다:', response.data);
+        //             this.reportList = response.data;
+        //             this.updatePagination();
+        //         })
+        //         .catch((error) => {
+        //             console.error("Error fetching reports:", error);
+        //         });
+        // },
+        pgClick(e) {
+            const pg = parseInt(e.target.id.replace("pg", ""));
+            this.currentPage = pg;
+            // location.href = '/admin/report/all/' + this.currentPage
+            const filter = this.$route.params.filter
+            location.href = '/admin/report/' + filter + '/' + this.currentPage
+        },
+        pgPrevClick() {
+            this.currentPage = Math.floor(((this.currentPage - 1) / 5)) * 5
+            // location.href = '/admin/report/all/' + this.currentPage
+            const filter = this.$route.params.filter
+            location.href = '/admin/report/' + filter + '/' + this.currentPage
+        },
+        pgNextClick() {
+            if (this.currentPage == 1) this.currentPage = 2
+            this.currentPage = (Math.floor(((this.currentPage - 1) / 5)) + 1) * 5 + 1
+            // location.href = '/admin/report/all/' + this.currentPage
+            const filter = this.$route.params.filter
+            location.href = '/admin/report/' + filter + '/' + this.currentPage
+        },
+
+        quizView(e) {
+            location.href = '/report/' + e.target.id
+        },
+
+        // updatePagination() {
+        //     this.startPage = Math.max(1, this.currentPage - 2);
+        //     this.endPage = Math.min(this.totalPage, this.currentPage + 2);
+        // },
+        formatDate(reportDate) {
+            const date = new Date(reportDate);
+            const formattedDate = date.toLocaleDateString('ko-KR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+            });
+            return formattedDate;
+        },
+        formatReportType(reportType) {
+            switch (reportType) {
+                case 1:
+                    return '테스트케이스 추가요청';
+                case 2:
+                    return '문제 오류 제보';
+                case 3:
+                    return '기타';
+            }
+        },
     }
-}
+};
 </script>
 <style scoped>
-*{
+#layout {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+#quiz-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+#quiz-filter {
+    margin-left: 10px;
+    margin-top: 8px;
+}
+
+.quiz-opt {
+    padding: 4px;
+    border: none;
+    background-color: var(--main1-color);
+    color: var(--main5-color);
+
+    &:hover {
+        background-color: var(--main2-color);
+        border-radius: 5px;
+    }
+}
+
+#quiz-urk {
+    opacity: 50%;
+}
+
+#quiz-search-box {
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    border: 3px solid var(--main5-color);
+    border-radius: 20px;
+    width: 20%;
+}
+
+#search-text {
+    width: 100%;
+    height: 1.5rem;
+    font-size: 0.9rem;
+    text-indent: 14px;
+    border: none;
+    border-radius: 20px;
+    background-color: var(--main1-color);
+    color: var(--main5-color);
+
+    &::placeholder {
+        color: var(--main4-hover-color);
+    }
+}
+
+#search-icon {
+    padding: 8px 12px 8px 0;
+    font-size: 1rem;
+    cursor: pointer;
+    color: var(--main5-color);
+    border: none;
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.quiz-content {
+    width: 100%;
+    height: 77%;
+    margin-top: 25px;
+}
+
+.report-object {
+    border: 3px solid var(--white-color);
+    border-radius: 10px;
+    padding: 5px;
+    margin: 5px;
+    height: 9%;
+    background-color: var(--white-color);
+    vertical-align: center;
+}
+
+.report-no {
+    width: 5%;
+    display: inline-block;
+    color: var(--main5-color);
+    font-size: 13px;
+}
+
+.report-Type {
+    width: 50%;
+    display: inline-block;
+}
+
+.report-memberName {
+    width: 15%;
+    display: inline-block;
+    color: var(--main4-color);
+}
+
+.report-Date {
+    width: 20%;
+    display: inline-block;
+}
+
+.quiz-info-bt {
+    width: 10%;
+    background-color: var(--main4-color);
+    border: 2px solid var(--main4-color);
+    border-radius: 5px;
+    color: var(--white-color);
+
+    &:hover {
+        background-color: var(--main4-hover-color);
+        border-color: var(--main4-hover-color);
+    }
+}
+
+#quiz-page {
+    margin-top: 22px;
+}
+
+.page-bt,
+.page-bt-num {
+    padding: 5px;
+    width: 35px;
+    height: 35px;
+    background-color: var(--main1-color);
+    opacity: 50%;
+    border: none;
     color: var(--main5-color);
-    padding: 2%;
+    padding-bottom: 27px;
+
+    &:hover {
+        opacity: 100%;
+    }
+}
+
+.page-bt-num.current-page {
+    opacity: 100%;
+    cursor: default;
 }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c7dba49..0009c42 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,6 +26,8 @@ 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.socketURL = 'ws://192.168.3.113:8881/codesparring/ws/session'
+// app.config.globalProperties.backURL = 'http://192.168.3.113:8881/codesparring'
+// app.config.globalProperties.socketURL = 'ws://192.168.3.113:8881/codesparring/ws/session'
 
+app.config.globalProperties.backURL = 'http://192.168.0.25:8881/codesparring'
+app.config.globalProperties.socketURL = 'ws://192.168.0.25:8881/codesparring/ws/session'

From bd5ed43e27ce4239cadf693117452690f375f68a Mon Sep 17 00:00:00 2001
From: suemini <121214637+suemini@users.noreply.github.com>
Date: Wed, 13 Dec 2023 19:10:00 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Fix=20:=20=EC=8B=A0=EA=B3=A0=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=9C=EB=A0=A5=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/admin/adminQuizPage.vue   | 631 +++++++++++------------
 src/components/admin/adminReportPage.vue | 106 ++--
 src/main.js                              |   8 +-
 3 files changed, 363 insertions(+), 382 deletions(-)

diff --git a/src/components/admin/adminQuizPage.vue b/src/components/admin/adminQuizPage.vue
index c694955..f97a207 100644
--- a/src/components/admin/adminQuizPage.vue
+++ b/src/components/admin/adminQuizPage.vue
@@ -1,336 +1,335 @@
 <template>
-    <main>
-      <div id="layout">
-        <div id="quiz-header">
-          <div id="quiz-filter">
-            <button class="quiz-opt" id="quiz-all" @click="allquiz">전체</button>&nbsp;
-            <button class="quiz-opt" id="quiz-urk" @click="urkquiz">UNRANKED</button>
-          </div>
-  
-          <div id="quiz-search-box">
-            <input id="search-text" type="number" placeholder="문제 번호 검색" @focus="searchQuiz" />
-            <font-awesome-icon
-              id="search-icon"
-              :icon="['fa', 'magnifying-glass']"
-              @click="searchQuiz"
-            />
-          </div>
+  <main>
+    <div id="layout">
+      <div id="quiz-header">
+        <div id="quiz-filter">
+          <button class="quiz-opt" id="quiz-all" @click="allquiz">전체</button>&nbsp;
+          <button class="quiz-opt" id="quiz-urk" @click="urkquiz">UNRANKED</button>
         </div>
-  
-        <div class="quiz-content" v-if="this.popup">
-          <AdminQuizPopup class="quiz-object"></AdminQuizPopup>
+
+        <div id="quiz-search-box">
+          <input id="search-text" type="number" placeholder="문제 번호 검색" @focus="searchQuiz" />
+          <font-awesome-icon
+            id="search-icon"
+            :icon="['fa', 'magnifying-glass']"
+            @click="searchQuiz"
+          />
         </div>
-  
-        <div class="quiz-content" v-if="!this.popup">
-          <div v-for="q in quizList" :key="q.quizNo" class="quiz-object">
-            <span class="quiz-no">{{ q.quizNo }}</span>
-            <span :class="'quiz-tier-' + q.quizTier">{{ q.quizTier }}</span>
-            <span class="quiz-title">{{ q.quizTitle }}</span>
-            <span class="quiz-correct">{{ q.quizCorrectPercent }}</span>
-            <button class="quiz-info-bt" :id="'' + q.quizNo" @click="quizView">조회</button>
-          </div>
-        </div>
-  
-        <div v-if="!popup" id="quiz-page">
-          <button v-if="startPage!==1" class="page-bt" id="prev" @click="pgPrevClick">◀</button>&nbsp;
-          <button
-            v-for="pg in endPage-startPage+1"
-            :key="pg"
-            :class="['page-bt-num', { 'current-page': startPage + pg == currentPage }]"
-            :id="'pg'+(startPage+pg)"
-            @click="pgClick"
-          >
-            {{ startPage+pg}}</button
-          >&nbsp;
-          <button v-if="endPage!=totalPage" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
+      </div>
+
+      <div class="quiz-content" v-if="this.popup">
+        <AdminQuizPopup class="quiz-object"></AdminQuizPopup>
+      </div>
+
+      <div class="quiz-content" v-if="!this.popup">
+        <div v-for="q in quizList" :key="q.quizNo" class="quiz-object">
+          <span class="quiz-no">{{ q.quizNo }}</span>
+          <span :class="'quiz-tier-' + q.quizTier">{{ q.quizTier }}</span>
+          <span class="quiz-title">{{ q.quizTitle }}</span>
+          <span class="quiz-correct">{{ q.quizCorrectPercent }}</span>
+          <button class="quiz-info-bt" :id="'' + q.quizNo" @click="quizView">조회</button>
         </div>
       </div>
-    </main>
-  </template>
-  <script>
-  import axios from 'axios'
-  import AdminQuizPopup from '../quiz/AdminQuizPopup.vue'
-  
-  export default {
-    name: 'AdminQuizPage',
-    components: { AdminQuizPopup },
-    data() {
-      return {
-        currentPage: 1,
-        quizList: [],
-        startPage: '',
-        endPage: '',
-        totalPage: '',
-        popup: false
-      }
+
+      <div v-if="!popup" id="quiz-page">
+        <button v-if="startPage!==1" class="page-bt" id="prev" @click="pgPrevClick">◀</button>&nbsp;
+        <button
+          v-for="pg in endPage-startPage+1"
+          :key="pg"
+          :class="['page-bt-num', { 'current-page': startPage + pg - 1 == currentPage }]"
+          :id="'pg'+(startPage+pg-1)"
+          @click="pgClick"
+        >
+          {{ startPage+pg-1 }}</button
+        >&nbsp;
+        <button v-if="endPage!=totalPage" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
+      </div>
+    </div>
+  </main>
+</template>
+<script>
+import axios from 'axios'
+import AdminQuizPopup from '../quiz/AdminQuizPopup.vue'
+
+export default {
+  name: 'AdminQuizPage',
+  components: { AdminQuizPopup },
+  data() {
+    return {
+      currentPage: 1,
+      quizList: [],
+      startPage: '',
+      endPage: '',
+      totalPage: '',
+      popup: false
+    }
+  },
+  methods: {
+    allquiz() {
+      location.href = '/admin/quiz/all/1'
     },
-    methods: {
-      allquiz() {
-        location.href = '/admin/quiz/all/1'
-      },
-      urkquiz() {
-        location.href = '/admin/quiz/UNRANKED/1'
-      },
-      searchQuiz(e) {
-        if (this.popup) {
-          if (e.target.id == 'search-icon') return
-          const onBt = document.getElementById('quiz-all')
-          onBt.style.opacity = '100%'
-          this.popup = false
-        } else {
-          if (e.target.id == 'search-icon') {
-            const onBt = document.getElementById('quiz-all')
-            onBt.style.opacity = '50%'
-            const offBt = document.getElementById('quiz-urk')
-            offBt.style.opacity = '50%'
-            this.popup = true
-          }
-        }
-      },
-      pgPrevClick() {
-        this.currentPage = Math.floor(((this.currentPage - 1) / 5)) * 5
-        const filter = this.$route.params.filter
-        location.href = '/admin/quiz/' + filter + '/' + this.currentPage
-      },
-      pgNextClick() {
-        if (this.currentPage == 1) this.currentPage = 2
-        this.currentPage = (Math.floor(((this.currentPage - 1) / 5)) + 1) * 5 + 1
-        const filter = this.$route.params.filter
-        location.href = '/admin/quiz/' + filter + '/' + this.currentPage
-      },
-      pgClick(e) {
-        const pg=parseInt(e.target.id.replace("pg", ""));
-        this.currentPage=pg
-        const filter = this.$route.params.filter
-  
-        location.href = '/admin/quiz/' + filter + '/' + this.currentPage
-      },
-      quizView(e) {
-        location.href = '/quiz/' + e.target.id
-      }
+    urkquiz() {
+      location.href = '/admin/quiz/UNRANKED/1'
     },
-    mounted() {
-      const filter = this.$route.params.filter
-      if (filter == 'all') {
+    searchQuiz(e) {
+      if (this.popup) {
+        if (e.target.id == 'search-icon') return
         const onBt = document.getElementById('quiz-all')
         onBt.style.opacity = '100%'
-        const offBt = document.getElementById('quiz-urk')
-        offBt.style.opacity = '50%'
-  
-        this.popup = false
-  
-        const text = document.getElementById('search-text')
-        text.value = ''
-  
-        this.currentPage = this.$route.params.currentPage
-  
-        const url = `${this.backURL}/quiz/list/${this.currentPage}`
-        axios
-          .get(url)
-          .then((res) => {
-            this.quizList = res.data.list
-            this.startPage = res.data.startPage
-            this.endPage = res.data.endPage
-            this.totalPage=res.data.totalPage
-          })
-          .catch(() => {
-            alert('관리자 페이지를 조회할 수 없습니다')
-          })
-      } else if (filter == 'UNRANKED') {
-        const onBt = document.getElementById('quiz-urk')
-        onBt.style.opacity = '100%'
-        const offBt = document.getElementById('quiz-all')
-        offBt.style.opacity = '50%'
-  
         this.popup = false
-  
-        const text = document.getElementById('search-text')
-        text.value = ''
-  
-        this.currentPage = this.$route.params.currentPage
-  
-        const url = `${this.backURL}/quiz/tier/UNRANKED/${this.currentPage}`
-        axios
-          .get(url)
-          .then((res) => {
-            this.quizList = res.data.list
-            this.startPage = res.data.startPage
-            this.endPage = res.data.endPage
-            this.totalPage=res.data.totalPage
-          })
-          .catch(() => {
-            window.history.back()
-          })
+      } else {
+        if (e.target.id == 'search-icon') {
+          const onBt = document.getElementById('quiz-all')
+          onBt.style.opacity = '50%'
+          const offBt = document.getElementById('quiz-urk')
+          offBt.style.opacity = '50%'
+          this.popup = true
+        }
       }
+    },
+    pgPrevClick() {
+      this.currentPage = Math.floor(((this.currentPage - 1) / 5)) * 5
+      const filter = this.$route.params.filter
+      location.href = '/admin/quiz/' + filter + '/' + this.currentPage
+    },
+    pgNextClick() {
+      if (this.currentPage == 1) this.currentPage = 2
+      this.currentPage = (Math.floor(((this.currentPage - 1) / 5)) + 1) * 5 + 1
+      const filter = this.$route.params.filter
+      location.href = '/admin/quiz/' + filter + '/' + this.currentPage
+    },
+    pgClick(e) {
+      const pg=parseInt(e.target.id.replace("pg", ""));
+      this.currentPage=pg
+      const filter = this.$route.params.filter
+
+      location.href = '/admin/quiz/' + filter + '/' + this.currentPage
+    },
+    quizView(e) {
+      location.href = '/quiz/' + e.target.id
     }
-  }
-  </script>
-  <style scoped>
-  #layout {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-  }
-  
-  #quiz-header {
-    display: flex;
-    justify-content: space-between;
-  }
-  
-  #quiz-filter {
-    margin-left: 10px;
-    margin-top: 8px;
-  }
-  
-  .quiz-opt {
-    padding: 4px;
-    border: none;
-    background-color: var(--main1-color);
-    color: var(--main5-color);
-  
-    &:hover {
-      background-color: var(--main2-color);
-      border-radius: 5px;
-    }
-  }
-  
-  #quiz-urk {
-    opacity: 50%;
-  }
-  
-  #quiz-search-box {
-    margin-right: 8px;
-    display: flex;
-    align-items: center;
-    border: 3px solid var(--main5-color);
-    border-radius: 20px;
-    width: 20%;
-  }
-  
-  #search-text {
-    width: 100%;
-    height: 1.5rem;
-    font-size: 0.9rem;
-    text-indent: 14px;
-    border: none;
-    border-radius: 20px;
-    background-color: var(--main1-color);
-    color: var(--main5-color);
-  
-    &::placeholder {
-      color: var(--main4-hover-color);
+  },
+  mounted() {
+    const filter = this.$route.params.filter
+    if (filter == 'all') {
+      const onBt = document.getElementById('quiz-all')
+      onBt.style.opacity = '100%'
+      const offBt = document.getElementById('quiz-urk')
+      offBt.style.opacity = '50%'
+
+      this.popup = false
+
+      const text = document.getElementById('search-text')
+      text.value = ''
+
+      this.currentPage = this.$route.params.currentPage
+
+      const url = `${this.backURL}/quiz/list/${this.currentPage}`
+      axios
+        .get(url)
+        .then((res) => {
+          this.quizList = res.data.list
+          this.startPage = res.data.startPage
+          this.endPage = res.data.endPage
+          this.totalPage=res.data.totalPage
+        })
+        .catch(() => {
+          alert('관리자 페이지를 조회할 수 없습니다')
+        })
+    } else if (filter == 'UNRANKED') {
+      const onBt = document.getElementById('quiz-urk')
+      onBt.style.opacity = '100%'
+      const offBt = document.getElementById('quiz-all')
+      offBt.style.opacity = '50%'
+
+      this.popup = false
+
+      const text = document.getElementById('search-text')
+      text.value = ''
+
+      this.currentPage = this.$route.params.currentPage
+
+      const url = `${this.backURL}/quiz/tier/UNRANKED/${this.currentPage}`
+      axios
+        .get(url)
+        .then((res) => {
+          this.quizList = res.data.list
+          this.startPage = res.data.startPage
+          this.endPage = res.data.endPage
+          this.totalPage=res.data.totalPage
+        })
+        .catch(() => {
+          window.history.back()
+        })
     }
   }
-  
-  #search-icon {
-    padding: 8px 12px 8px 0;
-    font-size: 1rem;
-    cursor: pointer;
-    color: var(--main5-color);
-    border: none;
-  }
-  
-  input[type='number']::-webkit-outer-spin-button,
-  input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  
-  .quiz-content {
-    width: 100%;
-    height: 77%;
-    margin-top: 25px;
-  }
-  
-  .quiz-object {
-    border: 3px solid var(--white-color);
-    border-radius: 10px;
-    padding: 5px;
-    margin: 5px;
-    height: 9%;
-    background-color: var(--white-color);
-    vertical-align: center;
-  }
-  
-  .quiz-no {
-    width: 5%;
-    display: inline-block;
-    color: var(--main5-color);
-    font-size: 13px;
-  }
-  
-  .quiz-tier-UNRANKED,
-  .quiz-tier-BRONZE,
-  .quiz-tier-SILVER,
-  .quiz-tier-GOLD,
-  .quiz-tier-PLATINUM {
-    width: 15%;
-    display: inline-block;
-    color: var(--main4-color);
-  }
-  
-  .quiz-tier-BRONZE {
-    color: #846353;
-  }
-  
-  .quiz-tier-SILVER {
-    color: #7382a3;
-  }
-  
-  .quiz-tier-GOLD {
-    color: #cc9336;
-  }
-  
-  .quiz-tier-PLATINUM {
-    color: #34a8b1;
-  }
-  
-  .quiz-title {
-    width: 50%;
-    display: inline-block;
-  }
-  
-  .quiz-correct {
-    width: 20%;
-    display: inline-block;
-  }
-  
-  .quiz-info-bt {
-    width: 10%;
-    background-color: var(--main4-color);
-    border: 2px solid var(--main4-color);
+}
+</script>
+<style scoped>
+#layout {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#quiz-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+#quiz-filter {
+  margin-left: 10px;
+  margin-top: 8px;
+}
+
+.quiz-opt {
+  padding: 4px;
+  border: none;
+  background-color: var(--main1-color);
+  color: var(--main5-color);
+
+  &:hover {
+    background-color: var(--main2-color);
     border-radius: 5px;
-    color: var(--white-color);
-  
-    &:hover {
-      background-color: var(--main4-hover-color);
-      border-color: var(--main4-hover-color);
-    }
   }
-  
-  #quiz-page {
-    margin-top: 22px;
+}
+
+#quiz-urk {
+  opacity: 50%;
+}
+
+#quiz-search-box {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  border: 3px solid var(--main5-color);
+  border-radius: 20px;
+  width: 20%;
+}
+
+#search-text {
+  width: 100%;
+  height: 1.5rem;
+  font-size: 0.9rem;
+  text-indent: 14px;
+  border: none;
+  border-radius: 20px;
+  background-color: var(--main1-color);
+  color: var(--main5-color);
+
+  &::placeholder {
+    color: var(--main4-hover-color);
   }
-  
-  .page-bt,
-  .page-bt-num {
-    padding: 5px;
-    width: 35px;
-    height: 35px;
-    background-color: var(--main1-color);
-    opacity: 50%;
-    border: none;
-    color: var(--main5-color);
-    padding-bottom: 27px;
-  
-    &:hover {
-      opacity: 100%;
-    }
+}
+
+#search-icon {
+  padding: 8px 12px 8px 0;
+  font-size: 1rem;
+  cursor: pointer;
+  color: var(--main5-color);
+  border: none;
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.quiz-content {
+  width: 100%;
+  height: 77%;
+  margin-top: 25px;
+}
+
+.quiz-object {
+  border: 3px solid var(--white-color);
+  border-radius: 10px;
+  padding: 5px;
+  margin: 5px;
+  height: 9%;
+  background-color: var(--white-color);
+  vertical-align: center;
+}
+
+.quiz-no {
+  width: 5%;
+  display: inline-block;
+  color: var(--main5-color);
+  font-size: 13px;
+}
+
+.quiz-tier-UNRANKED,
+.quiz-tier-BRONZE,
+.quiz-tier-SILVER,
+.quiz-tier-GOLD,
+.quiz-tier-PLATINUM {
+  width: 15%;
+  display: inline-block;
+  color: var(--main4-color);
+}
+
+.quiz-tier-BRONZE {
+  color: #846353;
+}
+
+.quiz-tier-SILVER {
+  color: #7382a3;
+}
+
+.quiz-tier-GOLD {
+  color: #cc9336;
+}
+
+.quiz-tier-PLATINUM {
+  color: #34a8b1;
+}
+
+.quiz-title {
+  width: 50%;
+  display: inline-block;
+}
+
+.quiz-correct {
+  width: 20%;
+  display: inline-block;
+}
+
+.quiz-info-bt {
+  width: 10%;
+  background-color: var(--main4-color);
+  border: 2px solid var(--main4-color);
+  border-radius: 5px;
+  color: var(--white-color);
+
+  &:hover {
+    background-color: var(--main4-hover-color);
+    border-color: var(--main4-hover-color);
   }
-  
-  .page-bt-num.current-page {
+}
+
+#quiz-page {
+  margin-top: 22px;
+}
+
+.page-bt,
+.page-bt-num {
+  padding: 5px;
+  width: 35px;
+  height: 35px;
+  background-color: var(--main1-color);
+  opacity: 50%;
+  border: none;
+  color: var(--main5-color);
+  padding-bottom: 27px;
+
+  &:hover {
     opacity: 100%;
-    cursor: default;
   }
-  </style>
-  
\ No newline at end of file
+}
+
+.page-bt-num.current-page {
+  opacity: 100%;
+  cursor: default;
+}
+</style>
diff --git a/src/components/admin/adminReportPage.vue b/src/components/admin/adminReportPage.vue
index ba7a8b6..6dc1410 100644
--- a/src/components/admin/adminReportPage.vue
+++ b/src/components/admin/adminReportPage.vue
@@ -1,36 +1,38 @@
 <template>
     <main>
         <div id="layout">
-            <div id="quiz-header">
-                <div id="quiz-filter">
-                    <button class="quiz-opt" id="quiz-all" @click="allquiz">전체</button>&nbsp;
-                    <button class="quiz-opt" id="quiz-urk" @click="urkquiz">UNRANKED</button>
+            <div id="report-header">
+                <div id="report-filter">
+                    <button class="report-opt" id="report-all" @:click="allReport">전체</button>&nbsp;
+                    <button class="report-opt" id="report-urk" @:click="urkReport">UNRANKED</button>
                 </div>
 
-                <div id="quiz-search-box">
-                    <input id="search-text" type="number" placeholder="문제 번호 검색" @focus="searchQuiz" />
-                    <font-awesome-icon id="search-icon" :icon="['fa', 'magnifying-glass']" @click="searchQuiz" />
+                <div id="report-search-box">
+                    <input id="search-text" type="number" placeholder="문제 번호 검색" @focus="searchReport" />
+                    <font-awesome-icon id="search-icon" :icon="['fa', 'magnifying-glass']" @click="searchReport" />
                 </div>
             </div>
 
-            <div class="quiz-content" v-if="!popup">
+            <div class="report-content" v-if="!popup">
                 <div v-for="report in reportList" :key="report.reportNo" class="report-object">
                     <span class="report-no">{{ report.reportNo }}</span>
                     <span class="report-Type">{{ formatReportType(report.reportType) }}</span>
                     <span class="report-Date">{{ formatDate(report.reportDate) }}</span>
                     <span class="report-memberName">{{ report.memberName }}</span>
-                    <button class="quiz-info-bt" :id="'' + report.reportNo" @click="quizView">조회</button>
+                    <button class="report-info-bt" :id="'' + report.reportNo" @click="reportView">조회</button>
                 </div>
             </div>
 
-            <div v-if="!popup" id="quiz-page">
+            {{ totalPage }} : {{ startPage }} : {{ endPage }}
+            <div v-if="!popup" id="report-page">
                 <button v-if="startPage > 1" class="page-bt" id="prev" @click="pgPrevClick">◀</button>&nbsp;
-                <button v-for="pg in Math.min(endPage - startPage + 1, totalPage)" :key="pg"
-                    :class="['page-bt-num', { 'current-page': startPage + pg === currentPage }]"
-                    :id="'pg' + (startPage + pg)" @click="pgClick">
-                    {{ startPage + pg }}
+                <button v-for="pg in endPage-startPage+1"
+                    :key="pg"
+                    :class="['page-bt-num', { 'current-page': startPage + pg -1 == currentPage }]"
+                    :id="'pg' + (startPage + pg -1)" @click="pgClick">
+                    {{ startPage + pg -1 }}
                 </button>&nbsp;
-                <button v-if="endPage < totalPage" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
+                <button v-if="endPage < totalPages" class="page-bt" id="next" @click="pgNextClick">▶︎</button>
             </div>
 
 
@@ -54,9 +56,9 @@ export default {
     mounted() {
         const filter = this.$route.params.filter
         if (filter == 'all') {
-            const onBt = document.getElementById('quiz-all')
+            const onBt = document.getElementById('report-all')
             onBt.style.opacity = '100%'
-            const offBt = document.getElementById('quiz-urk')
+            const offBt = document.getElementById('report-urk')
             offBt.style.opacity = '50%'
 
             this.popup = false
@@ -65,26 +67,25 @@ export default {
             text.value = ''
 
             this.currentPage = this.$route.params.currentPage
-
             const url = `${this.backURL}/report/date?page=${this.currentPage - 1}`
             axios
                 .get(url)
                 .then((res) => {
-                    console.log(res.data.list)
-                    console.log('Response Status:', res.status);
-                    this.reportList = res.data.list
-                    this.startPage = res.data.startPage
-                    this.endPage = res.data.endPage
-                    this.totalPage = res.data.totalPage
+                    console.log(res.data)
+                    this.reportList = res.data.content 
+                    this.totalPage = res.data.totalPages
+                    alert(this.totalPage)
+                    this.startPage = Math.floor((this.currentPage - 1) / 5) * 5 + 1;
+                    this.endPage = Math.ceil(res.data.totalElements / 10);
                 })
                 .catch((error) => {
                     console.error('Error fetching reports:', error.message);
                     alert('신고목록을 조회할 수 없습니다')
                 })
         } else if (filter == 'UNRANKED') {
-            const onBt = document.getElementById('quiz-urk')
+            const onBt = document.getElementById('report-urk')
             onBt.style.opacity = '100%'
-            const offBt = document.getElementById('quiz-all')
+            const offBt = document.getElementById('report-all')
             offBt.style.opacity = '50%'
 
             this.popup = false
@@ -97,10 +98,11 @@ export default {
             axios
                 .get(url)
                 .then((res) => {
-                    this.reportList = res.data.list
-                    this.startPage = res.data.startPage
-                    this.endPage = res.data.endPage
-                    this.totalPage = res.data.totalPage
+                    this.reportList = res.data.content
+                    this.startPage = Math.floor((this.currentPage - 1) / 5) * 5 + 1;
+                    this.endPage = Math.ceil(res.data.totalElements / 10);
+                    this.totalPage = res.data.totalPages;
+
                 })
                 .catch(() => {
                     window.history.back()
@@ -108,13 +110,13 @@ export default {
         }
     },
     methods: {
-        allquiz() {
-            location.href = '/admin/report/all/1'
+        allReport() {
+            location.href = '/admin/report/date/1'
         },
-        urkquiz() {
+        urkReport() {
             location.href = '/admin/report/UNRANKED/1'
         },
-        searchQuiz(e) {
+        searchReport(e) {
             if (this.popup) {
                 if (e.target.id == 'search-icon') return
                 const onBt = document.getElementById('quiz-all')
@@ -130,36 +132,20 @@ export default {
                 }
             }
         },
-        // fetchReports() {
-        //     console.log('리포트를 불러오는 중...');
-        //     axios
-        //         .get(`${this.backURL}/report/date?page=${this.currentPage - 1}`)
-        //         .then((response) => {
-        //             console.log('데이터를 받았습니다:', response.data);
-        //             this.reportList = response.data;
-        //             this.updatePagination();
-        //         })
-        //         .catch((error) => {
-        //             console.error("Error fetching reports:", error);
-        //         });
-        // },
         pgClick(e) {
             const pg = parseInt(e.target.id.replace("pg", ""));
             this.currentPage = pg;
-            // location.href = '/admin/report/all/' + this.currentPage
             const filter = this.$route.params.filter
             location.href = '/admin/report/' + filter + '/' + this.currentPage
         },
         pgPrevClick() {
             this.currentPage = Math.floor(((this.currentPage - 1) / 5)) * 5
-            // location.href = '/admin/report/all/' + this.currentPage
             const filter = this.$route.params.filter
             location.href = '/admin/report/' + filter + '/' + this.currentPage
         },
         pgNextClick() {
             if (this.currentPage == 1) this.currentPage = 2
             this.currentPage = (Math.floor(((this.currentPage - 1) / 5)) + 1) * 5 + 1
-            // location.href = '/admin/report/all/' + this.currentPage
             const filter = this.$route.params.filter
             location.href = '/admin/report/' + filter + '/' + this.currentPage
         },
@@ -168,10 +154,6 @@ export default {
             location.href = '/report/' + e.target.id
         },
 
-        // updatePagination() {
-        //     this.startPage = Math.max(1, this.currentPage - 2);
-        //     this.endPage = Math.min(this.totalPage, this.currentPage + 2);
-        // },
         formatDate(reportDate) {
             const date = new Date(reportDate);
             const formattedDate = date.toLocaleDateString('ko-KR', {
@@ -201,17 +183,17 @@ export default {
     text-align: center;
 }
 
-#quiz-header {
+#report-header {
     display: flex;
     justify-content: space-between;
 }
 
-#quiz-filter {
+#report-filter {
     margin-left: 10px;
     margin-top: 8px;
 }
 
-.quiz-opt {
+.report-opt {
     padding: 4px;
     border: none;
     background-color: var(--main1-color);
@@ -223,11 +205,11 @@ export default {
     }
 }
 
-#quiz-urk {
+#report-urk {
     opacity: 50%;
 }
 
-#quiz-search-box {
+#report-search-box {
     margin-right: 8px;
     display: flex;
     align-items: center;
@@ -265,7 +247,7 @@ input[type='number']::-webkit-inner-spin-button {
     margin: 0;
 }
 
-.quiz-content {
+.report-content {
     width: 100%;
     height: 77%;
     margin-top: 25px;
@@ -304,7 +286,7 @@ input[type='number']::-webkit-inner-spin-button {
     display: inline-block;
 }
 
-.quiz-info-bt {
+.report-info-bt {
     width: 10%;
     background-color: var(--main4-color);
     border: 2px solid var(--main4-color);
@@ -317,7 +299,7 @@ input[type='number']::-webkit-inner-spin-button {
     }
 }
 
-#quiz-page {
+#report-page {
     margin-top: 22px;
 }
 
diff --git a/src/main.js b/src/main.js
index 0009c42..1285308 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,8 +26,8 @@ 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.socketURL = 'ws://192.168.3.113:8881/codesparring/ws/session'
+app.config.globalProperties.backURL = 'http://192.168.1.116:8881/codesparring'
+app.config.globalProperties.socketURL = 'ws://192.168.1.116:8881/codesparring/ws/session'
 
-app.config.globalProperties.backURL = 'http://192.168.0.25:8881/codesparring'
-app.config.globalProperties.socketURL = 'ws://192.168.0.25:8881/codesparring/ws/session'
+// app.config.globalProperties.backURL = 'http://192.168.0.25:8881/codesparring'
+// app.config.globalProperties.socketURL = 'ws://192.168.0.25:8881/codesparring/ws/session'

From b6fe70b27489e2716747707c721833660f551298 Mon Sep 17 00:00:00 2001
From: suemini <121214637+suemini@users.noreply.github.com>
Date: Thu, 14 Dec 2023 09:26:18 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Comment=20:=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index 1285308..ec5c3a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,7 +27,4 @@ app.use(router)
 app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')
 app.config.globalProperties.backURL = 'http://192.168.1.116:8881/codesparring'
-app.config.globalProperties.socketURL = 'ws://192.168.1.116:8881/codesparring/ws/session'
-
-// app.config.globalProperties.backURL = 'http://192.168.0.25:8881/codesparring'
-// app.config.globalProperties.socketURL = 'ws://192.168.0.25:8881/codesparring/ws/session'
+app.config.globalProperties.socketURL = 'ws://192.168.1.116:8881/codesparring/ws/session'
\ No newline at end of file