랭킹 페이지 페이지네이션 오류 수정 (#578)

사용자 랭킹, 급상승 랭킹 수정
학과별 랭킹은 애초에 10개만 로드됨.
surgerank, userrank 에서 limit과 query.limit이 있었고 백엔드에서는 query.limit을 사용하고 업데이트 하는데 페이지네이션에서는 limit을 참조하는 행위로 인해 이를 query.limit으로 통일시켜주는 과정을 진행함

추가로 로컬 환경에서는 root 계정이 생성되어있고 이는 학부, 학과 정보가 불분명 하여 랭킹탭에서 오류를 불러일으킴 추후 다른 issue로 발행하여 해결 예정

Author: wlsgur11

frontend/src/pages/oj/views/rank/SurgeRank.vue

@@ -7,11 +7,15 @@
       :solution="this.error.solution || ''"
     />
     <div class="soaring-rank" v-else>
-      <UserList :userList="surgeUsers" :is-loading="isLoading" :limit="limit" />
+      <UserList
+        :userList="surgeUsers"
+        :is-loading="isLoading"
+        :limit="query.limit"
+      />
       <Pagination
         :total="total"
-        :page-size.sync="limit"
-        :current.sync="page"
+        :page-size.sync="query.limit"
+        :current.sync="query.page"
         @on-change="getSurgeUsers"
         show-sizer
         @on-page-size-change="getSurgeUsers(1)"
@@ -38,7 +42,7 @@ export default {
       error: null,
 
       total: 0,
-      limit: 30,
+      // limit: 10,
       query: {
         page: 1,
         limit: 10,
@@ -52,9 +56,9 @@ export default {
     },
     getSurgeUsers() {
       this.isLoading = true
-      const offset = (this.query.page - 1) * this.limit
+      const offset = (this.query.page - 1) * this.query.limit
       api
-        .getSurgeUsers(offset, this.limit)
+        .getSurgeUsers(offset, this.query.limit)
         .then((res) => {
           this.surgeUsers = res.data.data.results
           this.total = res.data.data.total

frontend/src/pages/oj/views/rank/UserRank.vue

@@ -25,7 +25,7 @@ export default {
       error: null,
 
       total: 0,
-      limit: 10,
+      // limit: 10,
       query: {
         page: 1,
         limit: 10,
@@ -79,9 +79,9 @@ export default {
       let offset = (this.query.page - 1) * this.query.limit + 3
       this.isLoading = true
       api
-        .getUserRank(offset, this.limit, RULE_TYPE.ACM)
+        .getUserRank(offset, this.query.limit, RULE_TYPE.ACM)
         .then((res) => {
-          this.total = res.data.data.total - 3
+          this.total = Math.max(0, res.data.data.total - 3)
           this.dataRank = res.data.data.results
           if (this.dataRank.length === 0) {
             this.error = {

frontend/src/pages/oj/views/rank/UserRankList.vue

@@ -38,7 +38,7 @@ export default {
     <tbody>
       <tr
         v-if="isLoading"
-        v-for="index in 10"
+        v-for="index in limit"
         :key="index"
         class="skeleton-row"
       >