diff --git a/src/CreateBook/hooks/usePostBook.ts b/src/CreateBook/hooks/usePostBook.ts new file mode 100644 index 00000000..b60f4561 --- /dev/null +++ b/src/CreateBook/hooks/usePostBook.ts @@ -0,0 +1,37 @@ +import { useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; + +import { postBook } from '../utils/api'; + +interface usePostBookProps { + favoriteName: string; + favoriteImage: string; + title: string; + description: string; + backgroundColor: string; +} + +const usePostBook = () => { + const navigate = useNavigate(); + const mutation = useMutation({ + mutationFn: ({ + favoriteName, + favoriteImage, + title, + description, + backgroundColor, + }: usePostBookProps) => { + return postBook({ + favoriteName, + favoriteImage, + title, + description, + backgroundColor, + }); + }, + onError: () => navigate('/error'), + }); + return mutation; +}; + +export default usePostBook; diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx index 7fa06b9d..8c57eb1d 100644 --- a/src/CreateBook/page/index.tsx +++ b/src/CreateBook/page/index.tsx @@ -2,12 +2,13 @@ import { useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import Header from '../../components/common/Header'; +import LoadingPage from '../../components/common/LoadingPage'; import CommonModal from '../../components/common/Modal/CommonModal'; import BookInfoTextarea from '../components/BookInfoTextarea'; import BookInput from '../components/BookInput'; import CompleteButton from '../components/CompleteButton'; import SelectColor from '../components/SelectColor'; -import { postBook } from '../utils/api'; +import usePostBook from '../hooks/usePostBook'; import * as S from './CreateBook.style'; function CreateBook() { @@ -24,20 +25,22 @@ function CreateBook() { setModalOn(true); }; + const postMutation = usePostBook(); + const handleClickCompleteModal = async () => { - const postData = { + const bookUuid = postMutation.mutate({ favoriteName: name, favoriteImage: presignedFileName, title: title, description: description, backgroundColor: backgroundColor, - }; - - const { bookUuid } = await postBook(postData); + }); navigate(`/lecue-book/${bookUuid}`); }; - return ( + return postMutation.isLoading ? ( + + ) : ( {modalOn && (