Merge pull request #188 from Team-Lecue/CreateBook/#184-react-query

[ CreateBook ] React-Query 연결

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;

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 ? (
+    <LoadingPage />
+  ) : (
     <S.CreateBookWrapper $backgroundColor={backgroundColor}>
       {modalOn && (
         <CommonModal