From 42f9171a20205858a812ecaf89969a933ca39fec Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 18 Jan 2024 18:46:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9,=20=EC=97=90?=
=?UTF-8?q?=EB=9F=AC=20=EC=8B=9C=20=EB=9D=84=EC=9B=8C=EC=A4=84=20=EB=B7=B0?=
=?UTF-8?q?=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Detail/hooks/useGetBookDetail.ts | 8 +++++---
src/Detail/page/DetailPage/index.tsx | 12 +++++++-----
src/Home/hooks/useGetLecueBook.ts | 8 ++++++--
src/Home/page/index.tsx | 8 +++++++-
src/LecueNote/hooks/useGetPresignedUrl.tsx | 8 ++++++--
src/LecueNote/hooks/usePostLecueNote.ts | 5 +++--
src/LecueNote/hooks/usePutPresignedUrl.ts | 5 +++--
src/LecueNote/page/LeceuNotePage/index.tsx | 5 ++++-
src/Mypage/hooks/useDeleteMyBook.ts | 5 +++--
src/Mypage/hooks/useGetMyBookList.ts | 8 +++++---
src/Mypage/hooks/useGetMyNickname.ts | 8 +++++---
src/Mypage/hooks/useGetMyNoteList.ts | 8 +++++---
src/Mypage/page/index.tsx | 13 ++++++++++++-
src/StickerAttach/hooks/usePostStickerState.ts | 3 +--
src/StickerPack/hooks/useGetBookUuid.ts | 9 ++++++---
src/StickerPack/hooks/useGetStickerPack.ts | 9 ++++++---
src/StickerPack/page/StickerPack/index.tsx | 7 ++++++-
src/Target/hooks/useGetPresignedUrl.ts | 7 +++++--
src/Target/hooks/usePutPresignedUrl.ts | 5 +++--
src/Target/page/TargetPage/index.tsx | 7 +++++--
20 files changed, 103 insertions(+), 45 deletions(-)
diff --git a/src/Detail/hooks/useGetBookDetail.ts b/src/Detail/hooks/useGetBookDetail.ts
index 74ed1454..a9c227fc 100644
--- a/src/Detail/hooks/useGetBookDetail.ts
+++ b/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 };
}
diff --git a/src/Detail/page/DetailPage/index.tsx b/src/Detail/page/DetailPage/index.tsx
index d971c377..0a95f266 100644
--- a/src/Detail/page/DetailPage/index.tsx
+++ b/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 ? (
+
+ ) : (
@@ -38,9 +43,6 @@ function DetailPage() {
- ) : (
- //TODO 에러페이지로 route
- 에러에러에러에러
);
}
diff --git a/src/Home/hooks/useGetLecueBook.ts b/src/Home/hooks/useGetLecueBook.ts
index 15959cd8..8be74f45 100644
--- a/src/Home/hooks/useGetLecueBook.ts
+++ b/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;
diff --git a/src/Home/page/index.tsx b/src/Home/page/index.tsx
index 278031c8..1c4c3db5 100644
--- a/src/Home/page/index.tsx
+++ b/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 ? (
+
+ ) : (
diff --git a/src/LecueNote/hooks/useGetPresignedUrl.tsx b/src/LecueNote/hooks/useGetPresignedUrl.tsx
index 29b62bc2..d1d07c8d 100644
--- a/src/LecueNote/hooks/useGetPresignedUrl.tsx
+++ b/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;
diff --git a/src/LecueNote/hooks/usePostLecueNote.ts b/src/LecueNote/hooks/usePostLecueNote.ts
index 52adfc4d..f29a6788 100644
--- a/src/LecueNote/hooks/usePostLecueNote.ts
+++ b/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;
};
diff --git a/src/LecueNote/hooks/usePutPresignedUrl.ts b/src/LecueNote/hooks/usePutPresignedUrl.ts
index 83903085..116d6583 100644
--- a/src/LecueNote/hooks/usePutPresignedUrl.ts
+++ b/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;
};
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index c1a220ec..b68c5e44 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/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 ? (
+
+ ) : (
{modalOn && (
{
+ const navigate = useNavigate();
const mutation = useMutation({
mutationFn: (noteId: number) => {
return deleteMyBook(noteId);
},
- onError: (err: AxiosError) => console.log(err),
+ onError: () => navigate('/error'),
});
return mutation;
};
diff --git a/src/Mypage/hooks/useGetMyBookList.ts b/src/Mypage/hooks/useGetMyBookList.ts
index 1b702766..d7ef2079 100644
--- a/src/Mypage/hooks/useGetMyBookList.ts
+++ b/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 };
}
diff --git a/src/Mypage/hooks/useGetMyNickname.ts b/src/Mypage/hooks/useGetMyNickname.ts
index 0803a125..0e0c376b 100644
--- a/src/Mypage/hooks/useGetMyNickname.ts
+++ b/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 };
}
diff --git a/src/Mypage/hooks/useGetMyNoteList.ts b/src/Mypage/hooks/useGetMyNoteList.ts
index 8bac2087..78f9d66b 100644
--- a/src/Mypage/hooks/useGetMyNoteList.ts
+++ b/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 };
}
diff --git a/src/Mypage/page/index.tsx b/src/Mypage/page/index.tsx
index a5808998..6c9d66ef 100644
--- a/src/Mypage/page/index.tsx
+++ b/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 ? (
+
+ ) : (
diff --git a/src/StickerAttach/hooks/usePostStickerState.ts b/src/StickerAttach/hooks/usePostStickerState.ts
index 0e69e570..60f0bf86 100644
--- a/src/StickerAttach/hooks/usePostStickerState.ts
+++ b/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;
};
diff --git a/src/StickerPack/hooks/useGetBookUuid.ts b/src/StickerPack/hooks/useGetBookUuid.ts
index 19366062..ea20d91a 100644
--- a/src/StickerPack/hooks/useGetBookUuid.ts
+++ b/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 };
}
diff --git a/src/StickerPack/hooks/useGetStickerPack.ts b/src/StickerPack/hooks/useGetStickerPack.ts
index ac406aa5..be2d302c 100644
--- a/src/StickerPack/hooks/useGetStickerPack.ts
+++ b/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 };
}
diff --git a/src/StickerPack/page/StickerPack/index.tsx b/src/StickerPack/page/StickerPack/index.tsx
index 47aed588..aeebcc35 100644
--- a/src/StickerPack/page/StickerPack/index.tsx
+++ b/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 ? (
+
+ ) : (
diff --git a/src/Target/hooks/useGetPresignedUrl.ts b/src/Target/hooks/useGetPresignedUrl.ts
index ce43a584..e74003b1 100644
--- a/src/Target/hooks/useGetPresignedUrl.ts
+++ b/src/Target/hooks/useGetPresignedUrl.ts
@@ -1,14 +1,17 @@
import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
import { getPresignedUrl } from '../util/api';
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;
diff --git a/src/Target/hooks/usePutPresignedUrl.ts b/src/Target/hooks/usePutPresignedUrl.ts
index a30c207e..0976cbae 100644
--- a/src/Target/hooks/usePutPresignedUrl.ts
+++ b/src/Target/hooks/usePutPresignedUrl.ts
@@ -1,5 +1,5 @@
-import { AxiosError } from 'axios';
import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
import { putPresignedUrl } from '../util/api';
@@ -10,11 +10,12 @@ interface usePutPresignedUrlProps {
}
const usePutPresignedUrl = () => {
+ const navigate = useNavigate();
const mutation = useMutation({
mutationFn: ({ url, data, contentType }: usePutPresignedUrlProps) => {
return putPresignedUrl(url, data, contentType);
},
- onError: (err: AxiosError) => console.log(err),
+ onError: () => navigate('/error'),
});
return mutation;
};
diff --git a/src/Target/page/TargetPage/index.tsx b/src/Target/page/TargetPage/index.tsx
index 7818fd30..6ea52f01 100644
--- a/src/Target/page/TargetPage/index.tsx
+++ b/src/Target/page/TargetPage/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Header from '../../../components/common/Header';
+import LoadingPage from '../../../components/common/LoadingPage';
import CompleteButton from '../../components/CompleteButton';
import FavoriteImageInput from '../../components/FavoriteImageInput';
import NameInput from '../../components/NameInput';
@@ -20,7 +21,7 @@ function TargetPage() {
const navigate = useNavigate();
- const { data } = useGetPresignedUrl();
+ const { data, isLoading } = useGetPresignedUrl();
const putMutation = usePutPresignedUrl();
useEffect(() => {
@@ -51,7 +52,9 @@ function TargetPage() {
});
};
- return (
+ return isLoading || putMutation ? (
+
+ ) : (