CLAP-203 관리자 목록 조회 관련 API 연결

src/components/api-logs/ApiLogsFilterBar.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex gap-4">
+  <div class="flex gap-4 z-30">
     <FilterDropdown
       title="조회 기간"
       :option-list="TERM_LIST"
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
-    <FilterDropdown
+    <FilterDropdownMulti
       title="구분"
-      :option-list="LOGIN_LOGS_DIVISION_LIST"
-      :value="store.params.division"
-      @update:value="onParamsChange.onDivisionChange" />
+      :option-list="API_LOGS_DIVISION_LIST"
+      :value="store.params.logStatus"
+      @update:value="onParamsChange.onLogStatusChange" />
     <FilterInput
       title="아이디"
       width="full"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
-    <FilterIpAddress @update:value="onParamsChange.onIpAddressChange" />
+    <FilterIpAddress @update:value="onParamsChange.onClientIpChange" />
     <FilterDropdown
       title="페이지 당 개수"
       :option-list="PAGE_SIZE_LIST"
@@ -29,9 +29,10 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
-import { LOGIN_LOGS_DIVISION_LIST } from '@/constants/admin'
+import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
 import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
+import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 
 const store = useLogsParamsStore()
 store.$reset()

src/components/api-logs/ApiLogsList.vue

@@ -6,15 +6,15 @@
 
     <template #listCards>
       <ApiLogsListCard
-        v-for="info in DUMMY_API_LOGS_LIST_DATA"
+        v-for="info in data?.content"
         :key="info.logId"
         :info="info" />
     </template>
 
     <template #pagination>
       <ListPagination
-        :page-number="params.page"
-        :total-page="DUMMY_TOTAL_PAGE"
+        :page-number="params.page + 1"
+        :total-page="totalPage || 0"
         @update:page-number="onPageChange" />
     </template>
   </ListContainer>
@@ -23,16 +23,35 @@
 <script setup lang="ts">
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
-import { useRequestParamsStore } from '@/stores/params'
+import { useLogsParamsStore } from '@/stores/params'
 import ApiLogsListBar from './ApiLogsListBar.vue'
 import ApiLogsListCard from './ApiLogsListCard.vue'
-import { DUMMY_API_LOGS_LIST_DATA } from '@/datas/dummy'
+import { axiosInstance } from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
+import type { ApiLogsResponse } from '@/types/admin'
+import { computed } from 'vue'
 
-const { params } = useRequestParamsStore()
-const DUMMY_TOTAL_PAGE = 18
+const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-// Data Handling
+const fetchApiLogsList = async () => {
+  const response = await axiosInstance.get('/api/managements/logs/general', {
+    params: {
+      ...params,
+      logStatus: params.logStatus.join(',')
+    }
+  })
+  return response.data
+}
+
+const { data } = useQuery<ApiLogsResponse>({
+  queryKey: ['apiLogs', params],
+  queryFn: fetchApiLogsList
+})
+
+const totalPage = computed(() => {
+  return data.value?.totalPages
+})
 </script>

src/components/api-logs/ApiLogsListBar.vue

@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       @toggle-sort-by="toggleSortBy" />
   </div>
 </template>
@@ -16,8 +16,13 @@ import { useLogsParamsStore } from '@/stores/params'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
 import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
+import { computed } from 'vue'
 
 const { params } = useLogsParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: 'REQUESTED_AT',
+  sortDirection: params.sortDirection
+}))
 
 const { toggleSortBy } = useLogsParamsChange()
 </script>

src/components/api-logs/ApiLogsListCard.vue

@@ -15,15 +15,22 @@
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
-import type { LogsListData } from '@/types/admin'
+import type { ApiLogsListData } from '@/types/admin'
+import { formatDate } from '@/utils/date'
+import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
 
-const { info } = defineProps<{ info: LogsListData }>()
+const { info } = defineProps<{ info: ApiLogsListData }>()
 const myRequestTabList: ListCardProps[] = [
-  { content: info.division, width: 80, isTextXs: true, isTextBody: true },
-  { content: info.createdAt, width: 180, isTextXs: true },
+  {
+    content: API_LOGS_DIVISION_LIST.find(el => el.value === info.logStatus)?.content,
+    width: 80,
+    isTextXs: true,
+    isTextBody: true
+  },
+  { content: formatDate(info.requestAt), width: 180, isTextXs: true },
   { content: info.nickName, width: 80 },
-  { content: info.ipAddress, width: 120, isTextXs: true },
-  { content: String(info.status), width: 40, isTextXs: true, isStatusCode: true },
-  { content: info.result }
+  { content: info.clientIp, width: 120, isTextXs: true },
+  { content: String(info.statusCode), width: 40, isTextXs: true, isStatusCode: true },
+  { content: '' }
 ]
 </script>

src/components/hooks/useLogsParamsChange.ts

@@ -3,21 +3,25 @@ import { useLogsParamsStore } from '@/stores/params'
 export const useLogsParamsChange = () => {
   const { params } = useLogsParamsStore()
 
+  const onArrayChange = <Value extends number | string>(array: Value[], value: Value) => {
+    return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
+  }
+
   const onTermChange = (value: string) => {
     if (value === '') {
       params.term = ''
     } else {
       params.term = Number(value)
     }
   }
-  const onDivisionChange = (value: string) => {
-    params.division = value
+  const onLogStatusChange = (value: string) => {
+    params.logStatus = onArrayChange(params.logStatus!, value)
   }
   const onNickNameChange = (value: string) => {
     params.nickName = value
   }
-  const onIpAddressChange = (value: string) => {
-    params.ipAddress = value
+  const onClientIpChange = (value: string) => {
+    params.clientIp = value
   }
   const onPageSizeChange = (value: string) => {
     params.pageSize = Number(value)
@@ -29,9 +33,9 @@ export const useLogsParamsChange = () => {
 
   return {
     onTermChange,
-    onDivisionChange,
+    onLogStatusChange,
     onNickNameChange,
-    onIpAddressChange,
+    onClientIpChange,
     onPageSizeChange,
     toggleSortBy
   }

src/components/login-logs/LoginLogsFilterBar.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex gap-4">
+  <div class="flex gap-4 z-30">
     <FilterDropdown
       title="조회 기간"
       :option-list="TERM_LIST"
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
-    <FilterDropdown
+    <FilterDropdownMulti
       title="구분"
       :option-list="LOGIN_LOGS_DIVISION_LIST"
-      :value="store.params.division"
-      @update:value="onParamsChange.onDivisionChange" />
+      :value="store.params.logStatus"
+      @update:value="onParamsChange.onLogStatusChange" />
     <FilterInput
       title="아이디"
       width="full"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
-    <FilterIpAddress @update:value="onParamsChange.onIpAddressChange" />
+    <FilterIpAddress @update:value="onParamsChange.onClientIpChange" />
     <FilterDropdown
       title="페이지 당 개수"
       :option-list="PAGE_SIZE_LIST"
@@ -29,9 +29,10 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
-import { LOGIN_LOGS_DIVISION_LIST } from '@/constants/admin'
 import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
+import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
+import { LOGIN_LOGS_DIVISION_LIST } from '@/constants/admin'
 
 const store = useLogsParamsStore()
 store.$reset()

src/components/login-logs/LoginLogsList.vue

@@ -6,15 +6,16 @@
 
     <template #listCards>
       <LoginLogsListCard
-        v-for="info in DUMMY_LOGIN_LOGS_LIST_DATA"
+        v-for="info in data?.content"
         :key="info.logId"
         :info="info" />
+      <NoContent v-if="data?.content.length === 0" />
     </template>
 
     <template #pagination>
       <ListPagination
-        :page-number="params.page"
-        :total-page="DUMMY_TOTAL_PAGE"
+        :page-number="params.page + 1"
+        :total-page="totalPage || 0"
         @update:page-number="onPageChange" />
     </template>
   </ListContainer>
@@ -23,16 +24,36 @@
 <script setup lang="ts">
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
-import { DUMMY_LOGIN_LOGS_LIST_DATA } from '@/datas/dummy'
-import { useRequestParamsStore } from '@/stores/params'
+import { useLogsParamsStore } from '@/stores/params'
 import LoginLogsListBar from './LoginLogsListBar.vue'
 import LoginLogsListCard from './LoginLogsListCard.vue'
+import { axiosInstance } from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import type { LoginLogsResponse } from '@/types/admin'
+import NoContent from '../lists/NoContent.vue'
 
-const { params } = useRequestParamsStore()
-const DUMMY_TOTAL_PAGE = 18
+const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-// Data Handling
+const fetchLoginLogsList = async () => {
+  const response = await axiosInstance.get('/api/managements/logs/login', {
+    params: {
+      ...params,
+      logStatus: params.logStatus.join(',')
+    }
+  })
+  return response.data
+}
+
+const { data } = useQuery<LoginLogsResponse>({
+  queryKey: ['loginLogs', params],
+  queryFn: fetchLoginLogsList
+})
+
+const totalPage = computed(() => {
+  return data.value?.totalPages
+})
 </script>

src/components/login-logs/LoginLogsListBar.vue

@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       @toggle-sort-by="toggleSortBy" />
   </div>
 </template>
@@ -16,8 +16,13 @@ import ListBarTab from '../lists/ListBarTab.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
 import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
+import { computed } from 'vue'
 
 const { params } = useLogsParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: 'REQUESTED_AT',
+  sortDirection: params.sortDirection
+}))
 
 const { toggleSortBy } = useLogsParamsChange()
 </script>

src/components/login-logs/LoginLogsListCard.vue

@@ -15,15 +15,31 @@
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
-import type { LogsListData } from '@/types/admin'
+import type { LoginLogsListData } from '@/types/admin'
+import { formatDate } from '@/utils/date'
 
-const { info } = defineProps<{ info: LogsListData }>()
+const logStatus = {
+  LOGIN: '로그인 시도',
+  LOGOUT: '로그아웃'
+}
+
+const { info } = defineProps<{ info: LoginLogsListData }>()
 const myRequestTabList: ListCardProps[] = [
-  { content: info.division, width: 80, isTextXs: true, isTextBody: true },
-  { content: info.createdAt, width: 180, isTextXs: true },
+  {
+    content: logStatus[info.logStatus as keyof typeof logStatus],
+    width: 80,
+    isTextXs: true,
+    isTextBody: true
+  },
+  { content: formatDate(info.requestAt), width: 180, isTextXs: true },
   { content: info.nickName, width: 80 },
-  { content: info.ipAddress, width: 120, isTextXs: true },
-  { content: String(info.status), width: 40, isTextXs: true, isStatusCode: true },
-  { content: info.result }
+  { content: info.clientIp, width: 120, isTextXs: true },
+  { content: String(info.statusCode), width: 40, isTextXs: true, isStatusCode: true },
+  {
+    content:
+      info.statusCode !== 200 && info.failedAttempts !== 0
+        ? `failedAttempts = ${info.failedAttempts}`
+        : ''
+  }
 ]
 </script>

src/components/member-management/MemberManagementFilterBar.vue

@@ -10,8 +10,8 @@
       @update:value="value => (params.nickName = value)" />
     <FilterInput
       title="부서"
-      :value="params.department"
-      @update:value="value => (params.department = value)" />
+      :value="String(params.departmentName)"
+      @update:value="value => (params.departmentName = value)" />
     <FilterInput
       title="이메일"
       width="full"