From 0a8d295a95d22076a1845f28757a9dde29341633 Mon Sep 17 00:00:00 2001
From: jungwoo3490 <jungwoo3490@naver.com>
Date: Fri, 19 Jan 2024 03:25:37 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20CreateBook=20React-Query=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/CreateBook/hooks/usePostBook.ts | 37 +++++++++++++++++++++++++++++
 src/CreateBook/page/index.tsx       | 10 ++++----
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 src/CreateBook/hooks/usePostBook.ts

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..50f30d21 100644
--- a/src/CreateBook/page/index.tsx
+++ b/src/CreateBook/page/index.tsx
@@ -7,7 +7,7 @@ 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,16 +24,16 @@ 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}`);
   };
 

From 886a4bc80e2c6c13724c387b58598def8ca633b3 Mon Sep 17 00:00:00 2001
From: jungwoo3490 <jungwoo3490@naver.com>
Date: Fri, 19 Jan 2024 03:38:53 +0900
Subject: [PATCH 2/2] feat: Link isLoading Event

---
 src/CreateBook/page/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx
index 50f30d21..8c57eb1d 100644
--- a/src/CreateBook/page/index.tsx
+++ b/src/CreateBook/page/index.tsx
@@ -2,6 +2,7 @@ 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';
@@ -37,7 +38,9 @@ function CreateBook() {
     navigate(`/lecue-book/${bookUuid}`);
   };
 
-  return (
+  return postMutation.isLoading ? (
+    <LoadingPage />
+  ) : (
     <S.CreateBookWrapper $backgroundColor={backgroundColor}>
       {modalOn && (
         <CommonModal