refactor : 쿼리키 수정 및 함수 이름 변경

KEEPER31337 · Dec 28, 2023 · 808b49d · 808b49d
1 parent 7e4fbdd
commit 808b49d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/src/api/libraryApi.ts b/src/api/libraryApi.ts
@@ -3,8 +3,8 @@ import axios from 'axios';
 import { BookInfo, BorrowedBookInfo, BookListSearch } from './dto';
 
 const libraryKeys = {
-  bookList: (param: BookListSearch) => ['library', 'bookList', param] as const,
-  borrowedBookList: ['library', 'borrowedBookList'] as const,
+  bookList: (params: BookListSearch) => ['bookList', params] as const,
+  borrowedBookList: ['borrowedBookList'] as const,
 };
 
 const useGetBookListQuery = ({ page, size = 6, searchType, search }: BookListSearch) => {
@@ -23,6 +23,14 @@ const useGetBookListQuery = ({ page, size = 6, searchType, search }: BookListSea
   );
 };
 
+const useGetBorrowedBookListQuery = ({ page, size }: { page: number; size: number }) => {
+  const fetcher = () =>
+    axios.get(`/books/book-borrows`, { params: { page, size } }).then(({ data }) => {
+      return { content: data.content, totalElement: data.totalElements };
+    });
+  return useQuery<{ content: BorrowedBookInfo[]; totalElement: number }>(libraryKeys.borrowedBookList, fetcher);
+};
+
 const useRequestBorrowBookMutation = () => {
   const queryClient = useQueryClient();
   const fetcher = (selectedBookId: number) => axios.post(`/books/${selectedBookId}/request-borrow`);
@@ -35,14 +43,6 @@ const useRequestBorrowBookMutation = () => {
   });
 };
 
-const useGetBookBorrowsQuery = ({ page, size }: { page: number; size: number }) => {
-  const fetcher = () =>
-    axios.get(`/books/book-borrows`, { params: { page, size } }).then(({ data }) => {
-      return { content: data.content, totalElement: data.totalElements };
-    });
-  return useQuery<{ content: BorrowedBookInfo[]; totalElement: number }>(libraryKeys.borrowedBookList, fetcher);
-};
-
 const useRequestReturnBookMutation = () => {
   const queryClient = useQueryClient();
   const fetcher = (selectedBookId: number) => axios.patch(`/books/borrows/${selectedBookId}/request-return`);
@@ -54,7 +54,7 @@ const useRequestReturnBookMutation = () => {
   });
 };
 
-const useCancleReturnBookMutation = () => {
+const useCancelReturnBookMutation = () => {
   const queryClient = useQueryClient();
   const fetcher = (selectedBookId: number) => axios.patch(`/books/borrows/${selectedBookId}/cancel-return`);
 
@@ -65,7 +65,7 @@ const useCancleReturnBookMutation = () => {
   });
 };
 
-const useCancleBorrowBookMutation = () => {
+const useCancelBorrowBookMutation = () => {
   const queryClient = useQueryClient();
 
   const fetcher = (selectedBookId: number) => axios.delete(`/books/borrows/${selectedBookId}/cancel-borrow`);
@@ -79,9 +79,9 @@ const useCancleBorrowBookMutation = () => {
 
 export {
   useGetBookListQuery,
+  useGetBorrowedBookListQuery,
   useRequestBorrowBookMutation,
-  useGetBookBorrowsQuery,
   useRequestReturnBookMutation,
-  useCancleReturnBookMutation,
-  useCancleBorrowBookMutation,
+  useCancelReturnBookMutation,
+  useCancelBorrowBookMutation,
 };
diff --git a/src/pages/Library/Library.tsx b/src/pages/Library/Library.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import { BookListSearch } from '@api/dto';
 import { useGetExecutiveInfoQuery } from '@api/dutyManageApi';
-import { useGetBookListQuery, useRequestBorrowBookMutation, useGetBookBorrowsQuery } from '@api/libraryApi';
+import { useGetBookListQuery, useRequestBorrowBookMutation, useGetBorrowedBookListQuery } from '@api/libraryApi';
 import { MEMBER_ROLE } from '@constants/member';
 import usePagination from '@hooks/usePagination';
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
@@ -25,7 +25,7 @@ const Library = () => {
   const search = searchParams.get('search') as BookListSearch['search'];
 
   const { data: bookListData } = useGetBookListQuery({ page, searchType, search });
-  const { data: borrowedBookListData } = useGetBookBorrowsQuery({ page: 0, size: MAX_BORROWABLE_BOOKS });
+  const { data: borrowedBookListData } = useGetBorrowedBookListQuery({ page: 0, size: MAX_BORROWABLE_BOOKS });
   const { data: executiveInfos } = useGetExecutiveInfoQuery();
   const { mutate: RequestBorrowBook } = useRequestBorrowBookMutation();
 

diff --git a/src/pages/Profile/Tab/BookTab/BookTab.tsx b/src/pages/Profile/Tab/BookTab/BookTab.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import Typography from '@mui/material/Typography';
 import { useGetExecutiveInfoQuery } from '@api/dutyManageApi';
 import {
-  useGetBookBorrowsQuery,
+  useGetBorrowedBookListQuery,
   useRequestReturnBookMutation,
-  useCancleReturnBookMutation,
-  useCancleBorrowBookMutation,
+  useCancelReturnBookMutation,
+  useCancelBorrowBookMutation,
 } from '@api/libraryApi';
 import { MEMBER_ROLE } from '@constants/member';
 import BookCard from './Card/BookCard';
@@ -14,12 +14,12 @@ import BookGuide from './Guide/BookGuide';
 const MAX_BORROWABLE_BOOKS = 5;
 
 const BookTab = () => {
-  const { data: borrowedBookListData } = useGetBookBorrowsQuery({ page: 0, size: MAX_BORROWABLE_BOOKS });
+  const { data: borrowedBookListData } = useGetBorrowedBookListQuery({ page: 0, size: MAX_BORROWABLE_BOOKS });
   const { data: executiveInfos } = useGetExecutiveInfoQuery();
   const { mutate: requestReturnBookMutation } = useRequestReturnBookMutation();
 
-  const { mutate: cancleReturnBookMutation } = useCancleReturnBookMutation();
-  const { mutate: cancleBorrowBookMutation } = useCancleBorrowBookMutation();
+  const { mutate: cancelReturnBookMutation } = useCancelReturnBookMutation();
+  const { mutate: cancelBorrowBookMutation } = useCancelBorrowBookMutation();
 
   const librarian = executiveInfos?.find((role) => role.jobName === MEMBER_ROLE.사서)?.realName || '';
 
@@ -66,8 +66,8 @@ const BookTab = () => {
       <div className="flex flex-col space-y-4 overflow-y-auto">
         {renderBookCard('대출중', requestReturnBookMutation)}
         <div className="flex flex-row flex-wrap">
-          {renderBookCard('대출대기', cancleBorrowBookMutation)}
-          {renderBookCard('반납대기', cancleReturnBookMutation)}
+          {renderBookCard('대출대기', cancelBorrowBookMutation)}
+          {renderBookCard('반납대기', cancelReturnBookMutation)}
         </div>
         <div className="flex w-full flex-col items-center space-y-1">
           {borrowLength === 0 && <Typography>대출대기가 없습니다</Typography>}