Merge pull request #336 from Team-Lecue/refactor/rooming

Refactor/rooming
Team-Lecue · May 12, 2024 · c7d3424 · c7d3424
2 parents b5a01dc + f374cac
commit c7d3424
Show file tree

Hide file tree

Showing 16 changed files with 59 additions and 32 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,26 @@
 import { Global, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 import Router from './Router';
 import gStyle from './styles/GlobalStyles';
 import theme from './styles/theme';
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: true,
-      useErrorBoundary: true,
-      retry: 0,
-    },
-  },
-});
-
 function App() {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            suspense: true,
+            useErrorBoundary: true,
+            retry: 0,
+          },
+        },
+      }),
+  );
+
   const setScreenSize = () => {
     // vh 관련
     const vh = window.innerHeight * 0.01;

diff --git a/src/History/components/MyLecueBook/index.tsx b/src/History/components/MyLecueBook/index.tsx
@@ -26,7 +26,7 @@ function MyLecueBook(props: LecueBookProps) {
 
   const deleteBookMutation = useDeleteMyBook();
   const postFavoriteMutation = usePostFavorite('mypage');
-  const deleteFavoriteMutation = useDeleteFavorite('myLecueBook');
+  const deleteFavoriteMutation = useDeleteFavorite('lecueBook');
 
   const convertNoteCount = (noteNum: number) => {
     setNoteCount(noteNum.toLocaleString());

diff --git a/src/History/hooks/useDeleteMyBook.ts b/src/History/hooks/useDeleteMyBook.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import { deleteMyBook } from '../api/deleteMyBook';
 
 const useDeleteMyBook = () => {
@@ -12,7 +13,7 @@ const useDeleteMyBook = () => {
     },
     onError: () => navigate('/error'),
     onSuccess: () => {
-      queryClient.refetchQueries(['get-my-lecueBook'], {
+      queryClient.refetchQueries(QUERY_KEY.favorite.getLecueBookFavorite, {
         exact: true,
       });
     },

diff --git a/src/History/hooks/useGetMyBookList.ts b/src/History/hooks/useGetMyBookList.ts
@@ -1,12 +1,13 @@
 import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import { getMyBookList } from '../api/getMyBookList';
 
 export default function useGetMyBookList() {
   const navigate = useNavigate();
   const { data: myBookList, isLoading } = useQuery(
-    ['get-my-lecueBook'],
+    QUERY_KEY.favorite.getLecueBookFavorite,
     () => getMyBookList(),
     {
       onError: () => {

diff --git a/src/History/hooks/useGetMyFavorite.ts b/src/History/hooks/useGetMyFavorite.ts
@@ -1,12 +1,13 @@
 import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import { getMyFavorite } from '../api/getMyFavorite';
 
 export default function useGetMyFavorite() {
   const navigate = useNavigate();
   const { data: myFavoriteList, isLoading } = useQuery(
-    ['get-mypage-favorite'],
+    QUERY_KEY.favorite.getMypageFavorite,
     () => getMyFavorite(),
     {
       onError: () => {

diff --git a/src/Home/constants/homeQueryKey.ts b/src/Home/constants/homeQueryKey.ts
@@ -0,0 +1,3 @@
+export const HOME_QUERY_KEY = {
+  getLecueBook: ['get-lecue-book'],
+};
diff --git a/src/Home/hooks/useGetLecueBook.ts b/src/Home/hooks/useGetLecueBook.ts
@@ -2,12 +2,13 @@ import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
 import getLecueBook from '../api/getLecueBook';
+import { HOME_QUERY_KEY } from '../constants/homeQueryKey';
 
 const useGetLecueBook = () => {
   const navigate = useNavigate();
 
   const { isLoading: isLoadingLecueBook, data: lecueBook } = useQuery({
-    queryKey: ['get-lecue-book'],
+    queryKey: HOME_QUERY_KEY.getLecueBook,
     queryFn: () => getLecueBook(),
     onError: () => navigate('/error'),
     refetchOnWindowFocus: false,

diff --git a/src/LecueNote/hooks/usePostLecueNote.ts b/src/LecueNote/hooks/usePostLecueNote.ts
@@ -30,7 +30,7 @@ const usePostLecueNote = () => {
       navigate(`/lecue-book/${bookUuid}`);
     },
   });
-  return mutation;
+  return { postMutation: mutation.mutate, isLoading: mutation.isLoading };
 };
 
 export default usePostLecueNote;
diff --git a/src/LecueNote/hooks/usePutPresignedUrl.ts b/src/LecueNote/hooks/usePutPresignedUrl.ts
@@ -16,7 +16,7 @@ const usePutPresignedUrl = () => {
     },
     onError: () => navigate('/error'),
   });
-  return mutation;
+  return { putMutation: mutation.mutate, isLoading: mutation.isLoading };
 };
 
 export default usePutPresignedUrl;
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -21,8 +21,11 @@ function LecueNotePage() {
   const MAX_LENGTH = 1000;
   const navigate = useNavigate();
   const location = useLocation();
-  const putMutation = usePutPresignedUrl();
-  const postMutation = usePostLecueNote();
+  const { putMutation } = usePutPresignedUrl();
+  const { postMutation } = usePostLecueNote();
+  const isMutationLoading =
+    usePutPresignedUrl().isLoading || usePostLecueNote().isLoading;
+
   const noteContents = sessionStorage.getItem('noteContents');
   const { bookId } = location.state || {};
 
@@ -84,14 +87,14 @@ function LecueNotePage() {
   const handleClickCompleteModal = async () => {
     if (lecueNoteState.imgToBinary) {
       if (lecueNoteState.imgToBinary.result && lecueNoteState.file) {
-        putMutation.mutate({
+        putMutation({
           presignedUrl: lecueNoteState.presignedUrl,
           binaryFile: lecueNoteState.imgToBinary.result,
           fileType: lecueNoteState.file.type,
         });
       }
     }
-    postMutation.mutate({
+    postMutation({
       contents: lecueNoteState.contents,
       color: lecueNoteState.textColor,
       fileName: lecueNoteState.filename,
@@ -103,7 +106,7 @@ function LecueNotePage() {
     sessionStorage.setItem('noteContents', '');
   };
 
-  return putMutation.isLoading || postMutation.isLoading ? (
+  return isMutationLoading ? (
     <LoadingPage />
   ) : (
     <S.Wrapper>

diff --git a/src/components/common/LecueBook/index.tsx b/src/components/common/LecueBook/index.tsx
@@ -28,7 +28,7 @@ function LecueBook(props: LecueBookProps) {
 
   const navigate = useNavigate();
 
-  const deleteMypageMutation = useDeleteFavorite('favoriteBook');
+  const deleteMypageMutation = useDeleteFavorite('mypage');
   const deleteHomeMutation = useDeleteFavorite('home');
 
   const handleClickFavoriteBtn = (

diff --git a/src/constants/queryKeys.ts b/src/constants/queryKeys.ts
@@ -0,0 +1,10 @@
+export const QUERY_KEY = {
+  favorite: {
+    getHomeFavorite: ['get-home-favorite'],
+    getMypageFavorite: ['get-mypage-favorite'],
+    getLecueBookFavorite: ['get-lecueBook-favorite'],
+  },
+  nickname: {
+    getNickName: ['get-nickname'],
+  },
+};
diff --git a/src/libs/hooks/useDeleteFavorite.ts b/src/libs/hooks/useDeleteFavorite.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import deleteFavorite from '../api/deleteFavorite';
 
 const useDeleteFavorite = (state: string, bookUuid?: string) => {
@@ -10,19 +11,19 @@ const useDeleteFavorite = (state: string, bookUuid?: string) => {
   const handleRefetchQueries = (state: string, bookUuid?: string) => {
     switch (state) {
       case 'home':
-        queryClient.refetchQueries(['get-favorite'], {
+        queryClient.refetchQueries(QUERY_KEY.favorite.getHomeFavorite, {
           exact: true,
         });
         break;
 
-      case 'favoriteBook':
-        queryClient.refetchQueries(['get-mypage-favorite'], {
+      case 'mypage':
+        queryClient.refetchQueries(QUERY_KEY.favorite.getMypageFavorite, {
           exact: true,
         });
         break;
 
-      case 'myLecueBook':
-        queryClient.refetchQueries(['get-my-lecueBook'], {
+      case 'lecueBook':
+        queryClient.refetchQueries(QUERY_KEY.favorite.getLecueBookFavorite, {
           exact: true,
         });
         break;
@@ -41,7 +42,7 @@ const useDeleteFavorite = (state: string, bookUuid?: string) => {
     },
     onError: () => navigate('/error'),
     onSuccess: () => {
-      handleRefetchQueries(state, bookUuid);
+      handleRefetchQueries(location, bookUuid);
     },
   });
   return mutation.mutate;

diff --git a/src/libs/hooks/useGetFavorite.ts b/src/libs/hooks/useGetFavorite.ts
@@ -1,13 +1,14 @@
 import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import getFavorite from '../api/getFavorite';
 
 const useGetFavorite = () => {
   const navigate = useNavigate();
 
   const { isLoading: isLoadingFavorite, data: favorite } = useQuery({
-    queryKey: ['get-favorite'],
+    queryKey: QUERY_KEY.favorite.getHomeFavorite,
     queryFn: () => getFavorite(),
     onError: () => navigate('/error'),
     refetchOnWindowFocus: false,

diff --git a/src/libs/hooks/useGetMyNickname.ts b/src/libs/hooks/useGetMyNickname.ts
@@ -1,12 +1,13 @@
 import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import { getMyNickName } from '../api/getMyNickName';
 
 export default function useGetMyNickName() {
   const navigate = useNavigate();
   const { data: myNickName, isLoading } = useQuery(
-    ['useGetMyNickName'],
+    QUERY_KEY.nickname.getNickName,
     () => getMyNickName(),
     {
       onError: () => {

diff --git a/src/libs/hooks/usePostFavorite.ts b/src/libs/hooks/usePostFavorite.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { QUERY_KEY } from '../../constants/queryKeys';
 import postFavorite from '../api/postFavorite';
 
 const usePostFavorite = (state: string, bookUuid?: string) => {