feat: 로딩, 에러 시 띄워줄 뷰 연결

src/Detail/hooks/useGetBookDetail.ts

@@ -1,17 +1,19 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { getBookDetail } from '../api/getBookDetail';
 
 export default function useGetBookDetail(bookUuid: string) {
-  const { data: bookDetail } = useQuery(
+  const navigate = useNavigate();
+  const { data: bookDetail, isLoading } = useQuery(
     ['useGetBookDetail', bookUuid],
     () => getBookDetail(bookUuid),
     {
       onError: () => {
-        console.error;
+        navigate('/error');
       },
     },
   );
 
-  return { bookDetail };
+  return { bookDetail, isLoading };
 }

src/Detail/page/DetailPage/index.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import Header from '../../../components/common/Header';
+import LoadingPage from '../../../components/common/LoadingPage';
+import usePostStickerState from '../../../StickerAttach/hooks/usePostStickerState';
 import BookInfoBox from '../../components/BookInfoBox';
 import LecueNoteListContainer from '../../components/LecueNoteListContainer';
 import SlideBanner from '../../components/SlideBanner';
@@ -12,13 +14,16 @@ function DetailPage() {
   const [isEditable, setIsEditable] = useState(true);
 
   const { bookUuid } = useParams() as { bookUuid: string };
-  const { bookDetail } = useGetBookDetail(bookUuid);
+  const { bookDetail, isLoading } = useGetBookDetail(bookUuid);
+  const postMutation = usePostStickerState(bookUuid);
 
   const setEditableStateFalse = () => {
     setIsEditable(false);
   };
 
-  return bookDetail ? (
+  return isLoading || postMutation.isLoading ? (
+    <LoadingPage />
+  ) : (
     <S.DetailPageWrapper>
       <Header headerTitle="레큐북" isDetailPage={!isEditable} />
       <S.DetailPageBodyWrapper>
@@ -38,9 +43,6 @@ function DetailPage() {
         </S.LecueBookContainer>
       </S.DetailPageBodyWrapper>
     </S.DetailPageWrapper>
-  ) : (
-    //TODO 에러페이지로 route
-    <div>에러에러에러에러</div>
   );
 }
 

src/Home/hooks/useGetLecueBook.ts

@@ -1,14 +1,18 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import getLecueBook from '../api/getLecueBook';
 
 const useGetLecueBook = () => {
-  const { isLoading, error, data } = useQuery({
+  const navigate = useNavigate();
+
+  const { isLoading, data } = useQuery({
     queryKey: ['get-lecue-book'],
     queryFn: () => getLecueBook(),
+    onError: () => navigate('/error'),
   });
 
-  return { isLoading, error, data };
+  return { isLoading, data };
 };
 
 export default useGetLecueBook;

src/Home/page/index.tsx

@@ -1,16 +1,22 @@
 import { useEffect } from 'react';
 
+import LoadingPage from '../../components/common/LoadingPage';
 import { StepProps } from '../../Splash/page/SplashPage';
 import LecueBookList from '../components/LecueBookList';
 import NavigateLecueBook from '../components/NavigateLecueBook';
+import useGetLecueBook from '../hooks/useGetLecueBook';
 import * as S from './Home.style';
 
 function Home({ handleStep }: StepProps) {
+  const { isLoading } = useGetLecueBook();
+
   useEffect(() => {
     handleStep(1);
   }, []);
 
-  return (
+  return isLoading ? (
+    <LoadingPage />
+  ) : (
     <S.Wrapper>
       <NavigateLecueBook />
       <LecueBookList />

src/LecueNote/hooks/useGetPresignedUrl.tsx

@@ -1,14 +1,18 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import getPresignedUrl from '../api/getPresignedUrl';
 
 const useGetPresignedUrl = () => {
-  const { isLoading, error, data } = useQuery({
+  const navigate = useNavigate();
+
+  const { isLoading, data } = useQuery({
     queryKey: ['get-presigned-url'],
     queryFn: () => getPresignedUrl(),
+    onError: () => navigate('/error'),
   });
 
-  return { isLoading, error, data };
+  return { isLoading, data };
 };
 
 export default useGetPresignedUrl;

src/LecueNote/hooks/usePostLecueNote.ts

@@ -1,10 +1,11 @@
-import { AxiosError } from 'axios';
 import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import postLecueNote from '../api/postLecueNote';
 import { postLecueNoteProps } from '../type/lecueNoteType';
 
 const usePostLecueNote = () => {
+  const navigate = useNavigate();
   const mutation = useMutation({
     mutationFn: ({
       contents,
@@ -23,7 +24,7 @@ const usePostLecueNote = () => {
         bookId,
       });
     },
-    onError: (err: AxiosError) => console.log(err),
+    onError:() => navigate('/error'),
   });
   return mutation;
 };

src/LecueNote/hooks/usePutPresignedUrl.ts

@@ -1,10 +1,11 @@
-import { AxiosError } from 'axios';
 import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import putPresignedUrl from '../api/putPresignedUrl';
 import { putPresignedUrlProps } from './../type/lecueNoteType';
 
 const usePutPresignedUrl = () => {
+  const navigate = useNavigate();
   const mutation = useMutation({
     mutationFn: ({
       presignedUrl,
@@ -13,7 +14,7 @@ const usePutPresignedUrl = () => {
     }: putPresignedUrlProps) => {
       return putPresignedUrl({ presignedUrl, binaryFile, fileType });
     },
-    onError: (err: AxiosError) => console.log(err),
+    onError: () => navigate('/error'),
   });
   return mutation;
 };

src/LecueNote/page/LeceuNotePage/index.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import Header from '../../../components/common/Header';
+import LoadingPage from '../../../components/common/LoadingPage';
 import CommonModal from '../../../components/common/Modal/CommonModal';
 import CreateNote from '../../components/CreateNote';
 import Footer from '../../components/Footer';
@@ -88,7 +89,9 @@ function LecueNotePage() {
     navigate(`/lecue-book/${bookUuid}`);
   };
 
-  return (
+  return putMutation.isLoading || postMutation.isLoading ? (
+    <LoadingPage />
+  ) : (
     <S.Wrapper>
       {modalOn && (
         <CommonModal

src/Mypage/hooks/useDeleteMyBook.ts

@@ -1,14 +1,15 @@
-import { AxiosError } from 'axios';
 import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { deleteMyBook } from '../api/deleteMyBook';
 
 const useDeleteMyBook = () => {
+  const navigate = useNavigate();
   const mutation = useMutation({
     mutationFn: (noteId: number) => {
       return deleteMyBook(noteId);
     },
-    onError: (err: AxiosError) => console.log(err),
+    onError: () => navigate('/error'),
   });
   return mutation;
 };

src/Mypage/hooks/useGetMyBookList.ts

@@ -1,17 +1,19 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { getMyBookList } from '../api/getMyBookList';
 
 export default function useGetMyBookList() {
-  const { data: myBookList } = useQuery(
+  const navigate = useNavigate();
+  const { data: myBookList, isLoading } = useQuery(
     ['useGetMyBookList'],
     () => getMyBookList(),
     {
       onError: () => {
-        console.error;
+        navigate('/error');
       },
     },
   );
 
-  return { myBookList };
+  return { myBookList, isLoading };
 }

src/Mypage/hooks/useGetMyNickname.ts

@@ -1,17 +1,19 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { getMyNickName } from '../api/getMyNickName';
 
 export default function useGetMyNickName() {
-  const { data: myNickName } = useQuery(
+  const navigate = useNavigate();
+  const { data: myNickName, isLoading } = useQuery(
     ['useGetMyNickName'],
     () => getMyNickName(),
     {
       onError: () => {
-        console.error;
+        navigate('/error');
       },
     },
   );
 
-  return { myNickName };
+  return { myNickName, isLoading };
 }

src/Mypage/hooks/useGetMyNoteList.ts

@@ -1,17 +1,19 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { getMyNoteList } from '../api/getMyNoteList';
 
 export default function useGetNoteList() {
-  const { data: myNoteList } = useQuery(
+  const navigate = useNavigate();
+  const { data: myNoteList, isLoading } = useQuery(
     ['useGetNoteList'],
     () => getMyNoteList(),
     {
       onError: () => {
-        console.error;
+        navigate('/error');
       },
     },
   );
 
-  return { myNoteList };
+  return { myNoteList, isLoading };
 }

src/Mypage/page/index.tsx

@@ -1,10 +1,21 @@
 import Header from '../../components/common/Header';
+import LoadingPage from '../../components/common/LoadingPage';
 import LecueList from '../components/LecueList';
 import Nickname from '../components/Nickname';
+import useDeleteMyBook from '../hooks/useDeleteMyBook';
+import useGetMyBookList from '../hooks/useGetMyBookList';
+import useGetMyNickName from '../hooks/useGetMyNickname';
+import useGetNoteList from '../hooks/useGetMyNoteList';
 import * as S from './Mypage.style';
 
 function Mypage() {
-  return (
+  const { isLoading } =
+    useGetMyBookList() || useGetMyNickName() || useGetNoteList();
+  const deleteMutation = useDeleteMyBook();
+
+  return isLoading || deleteMutation.isLoading ? (
+    <LoadingPage />
+  ) : (
     <S.Wrapper>
       <Header headerTitle={'내 기록'} />
       <S.InfoWrapper>

src/StickerAttach/hooks/usePostStickerState.ts

@@ -1,4 +1,3 @@
-import { AxiosError } from 'axios';
 import { useMutation } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -25,7 +24,7 @@ const usePostStickerState = (bookUuId: string) => {
       navigate(`/lecue-book/${bookUuId}`);
     },
 
-    onError: (err: AxiosError) => console.log(err),
+    onError: () => navigate('/error'),
   });
   return mutation;
 };

src/StickerPack/hooks/useGetBookUuid.ts

@@ -1,17 +1,20 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { getBookUuid } from '../api/getBookUuid';
 
 export default function useGetBookUuid(bookId: number) {
-  const { data: bookUuId } = useQuery(
+  const navigate = useNavigate();
+
+  const { data: bookUuId, isLoading } = useQuery(
     ['useGetBookUuid'],
     () => getBookUuid(bookId),
     {
       onError: () => {
-        console.error;
+        navigate('/error');
       },
     },
   );
 
-  return { bookUuId };
+  return { bookUuId, isLoading };
 }

src/StickerPack/hooks/useGetStickerPack.ts

@@ -1,17 +1,20 @@
 import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { getStickerPack } from '../api/getStickerPack';
 
 export default function useGetStickerPack(bookId: number) {
-  const { data: stickerPack } = useQuery(
+  const navigate = useNavigate();
+
+  const { data: stickerPack, isLoading } = useQuery(
     ['useGetStickerPack'],
     () => getStickerPack(bookId),
     {
       onError: () => {
-        console.error;
+        navigate('/error');
       },
     },
   );
 
-  return { stickerPack };
+  return { stickerPack, isLoading };
 }

src/StickerPack/page/StickerPack/index.tsx

@@ -4,9 +4,11 @@ import { useLocation, useNavigate } from 'react-router-dom';
 // component
 import Button from '../../../components/common/Button/index.tsx';
 import Header from '../../../components/common/Header/index.tsx';
+import LoadingPage from '../../../components/common/LoadingPage/index.tsx';
 import CommonModal from '../../../components/common/Modal/CommonModal.tsx';
 import StickerList from '../../components/StickerList/index.tsx';
 import useGetBookUuid from '../../hooks/useGetBookUuid.ts';
+import useGetStickerPack from '../../hooks/useGetStickerPack.ts';
 // type
 import { stickerType } from '../../type/stickerPackType.ts';
 // style
@@ -39,6 +41,7 @@ function StickerPack() {
   };
 
   const { bookUuId } = useGetBookUuid(bookId);
+  const { isLoading } = useGetBookUuid(bookId) || useGetStickerPack(bookId);
 
   const handleClickDone = () => {
     navigate(`/sticker-attach/${bookUuId}`, {
@@ -50,7 +53,9 @@ function StickerPack() {
     navigate(`/login`);
   };
 
-  return (
+  return isLoading ? (
+    <LoadingPage />
+  ) : (
     <S.Wrapper>
       <Header headerTitle="스티커팩" />
       <S.Body>