feat : 신고, 차단, 탈퇴 유저 리스트 조회

src/api/user/BlockUsers.js

@@ -0,0 +1,20 @@
+import { getAxiosAuthInstance } from '@/api/Index.js'
+
+export async function getBlockListPage(nowPage, search) {
+  const url = `/users/block?size=10&page=${nowPage}&search=${encodeURIComponent(search)}`
+
+  let result = []
+
+  await getAxiosAuthInstance
+    .get(url)
+    .then((response) => {
+        result = response.data
+      }
+    )
+    .catch((error) => {
+      console.log(error)
+    })
+
+  return result
+}
+

src/api/user/ReportUser.js

@@ -0,0 +1,20 @@
+import { getAxiosAuthInstance } from '@/api/Index.js'
+
+export async function getReportListPage(nowPage, search) {
+  const url = `/users/report?size=10&page=${nowPage}&search=${encodeURIComponent(search)}`
+
+  let result = []
+
+  await getAxiosAuthInstance
+    .get(url)
+    .then((response) => {
+        result = response.data
+      }
+    )
+    .catch((error) => {
+      console.log(error)
+    })
+
+  return result
+}
+

src/api/user/WithDrawUsers.js

@@ -0,0 +1,20 @@
+import { getAxiosAuthInstance } from '@/api/Index.js'
+
+export async function getWithDrawUserListPage(nowPage, search) {
+  const url = `/users/withdraw?size=10&page=${nowPage}&search=${encodeURIComponent(search)}`
+
+  let result = []
+
+  await getAxiosAuthInstance
+    .get(url)
+    .then((response) => {
+        result = response.data
+      }
+    )
+    .catch((error) => {
+      console.log(error)
+    })
+
+  return result
+}
+

src/components/Pagenation.vue

@@ -0,0 +1,38 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-input"
+                v-model="filter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="blockFilterData(blockFilter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="blockCurrentPage"
+                          :total-rows="blockRows"
+                          :per-page="blockPageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="blockPageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/SideBar.vue

@@ -18,12 +18,12 @@
                 <span class="text">Home</span>
             </router-link>
 
-            <router-link to="/users-list" class="button">
+            <router-link to="/users" class="button">
                 <span class="material-icons">group</span>
                 <span class="text">회원 목록</span>
             </router-link>
 
-            <router-link to="/team" class="button">
+            <router-link to="/users/manage-accounts" class="button">
                 <span class="material-icons">manage_accounts</span>
                 <span class="text">신고 / 차단/ 탈퇴</span>
             </router-link>

src/components/UserBlockList.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { convertGender } from '@/api/user/UserDataConverter.js'
+import { onMounted, ref } from 'vue'
+import { getBlockListPage } from '@/api/user/BlockUsers.js'
+
+const blockFields = [
+    { key: 'index', label: '#' },
+    { key: 'username', label: '이름' },
+    { key: 'gender', label: '성별' },
+    { key: 'userStatus', label: '상태' },
+    { key: 'blockedUserName', label: '차단한 유저' },
+    { key: 'currentBlockDate', label: '차단된 날짜' }
+]
+
+const blockContents = ref([])
+const blockPage = ref(0)
+const blockCurrentPage = ref(1)
+const blockRows = ref(0)
+const blockPageSize = ref(10)
+const blockTotalPage = ref(0)
+const blockFilter = ref('')
+
+async function getBlockList(page, filter) {
+    let blockListPage = await getBlockListPage(page, filter)
+
+    blockContents.value = blockListPage.content
+    blockPage.value = blockListPage.pageable.pageNumber
+    blockCurrentPage.value = blockListPage.pageable.pageNumber + 1
+    blockRows.value = blockListPage.totalElements
+    blockPageSize.value = blockListPage.pageable.pageSize
+    blockTotalPage.value = blockListPage.totalPages
+}
+
+function blockPageChange(button, page) {
+    getBlockList(page - 1, blockFilter.value)
+}
+
+function blockFilterData(data) {
+    blockFilterData.value = data
+    getBlockList(0, blockFilterData.value)
+}
+
+onMounted(async () => {
+    await getBlockList(0, '')
+})
+
+function getTableIndex(index, pageSize, page) {
+    return pageSize * page + index + 1
+}
+</script>
+
+<template>
+    <b-table hover :items="blockContents" :fields="blockFields">
+        <template #cell(index)="content">
+            {{ getTableIndex(content.index, blockPageSize, blockPage) }}
+        </template>
+
+        <template #cell(gender)="content">
+            {{ convertGender(content.item.gender) }}
+        </template>
+    </b-table>
+
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-block-input"
+                v-model="blockFilter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="blockFilterData(blockFilter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="blockCurrentPage"
+                          :total-rows="blockRows"
+                          :per-page="blockPageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="blockPageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/UserReportList.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { getReportListPage } from '@/api/user/ReportUser.js'
+import { convertGender } from '@/api/user/UserDataConverter.js'
+
+const fields = [
+    { key: 'index', label: '#' },
+    { key: 'username', label: '이름' },
+    { key: 'gender', label: '성별' },
+    { key: 'preferGender', label: '선호 성별' },
+    { key: 'userStatus', label: '상태' },
+    { key: 'reportedUserName', label: '신고한 유저' },
+    { key: 'reason', label: '신고 이유' },
+    { key: 'reportDate', label: '신고된 날짜' },
+]
+
+const contents = ref([])
+const nowPage = ref(0)
+const currentPage = ref(1)
+const rows = ref(0)
+const pageSize = ref(10)
+const totalPage = ref(0)
+const filter = ref('')
+
+async function getReportList(page, filter) {
+    let reportListPage = await getReportListPage(page, filter)
+
+    contents.value = reportListPage.content
+    nowPage.value = reportListPage.pageable.pageNumber
+    currentPage.value = reportListPage.pageable.pageNumber + 1
+    rows.value = reportListPage.totalElements
+    pageSize.value = reportListPage.pageable.pageSize
+    totalPage.value = reportListPage.totalPages
+}
+
+function pageChange(button, page) {
+    getReportList(page - 1, filter.value)
+}
+
+function filterData(data) {
+    filterData.value = data
+    getReportList(0, filterData.value)
+}
+
+function getTableIndex(index, pageSize, page) {
+    return pageSize * page + index + 1
+}
+
+onMounted(async () => {
+    await getReportList(0, '')
+})
+
+</script>
+
+<template>
+    <b-table hover :items="contents" :fields="fields">
+        <template #cell(index)="content">
+            {{ getTableIndex(content.index, pageSize, nowPage) }}
+        </template>
+
+        <template #cell(gender)="content">
+            {{ convertGender(content.item.gender) }}
+        </template>
+
+        <template #cell(preferGender)="content">
+            {{ convertGender(content.item.preferGender) }}
+        </template>
+
+    </b-table>
+
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-report-input"
+                v-model="filter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="filterData(filter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="currentPage"
+                          :total-rows="rows"
+                          :per-page="pageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="pageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>