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 && (