refactor: 글쓰기 데이터 mutation 기능 수정

mutation 에서 옵션을 받아서 사용할 수 있게끔 type 추가 - 필요없는 todo 소스 제거 close #37
nolmungshemung · Feb 8, 2022 · 56d9696 · 56d9696
1 parent e434462
commit 56d9696
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 176 deletions.
diff --git a/data/services/services.hooks.ts b/data/services/services.hooks.ts
@@ -1,4 +1,9 @@
-import { useMutation, useQuery, UseQueryOptions } from 'react-query';
+import {
+  useMutation,
+  useQuery,
+  UseQueryOptions,
+  UseMutationOptions,
+} from 'react-query';
 import { AxiosError } from 'axios';
 import { SuccessResponse } from '~/shared/types';
 import { Contents, WritingContentsRequest } from './services.model';
@@ -34,9 +39,24 @@ export function useMainContents(
   );
 }
 
-export function usePostContents(contents: WritingContentsRequest) {
-  return useMutation<SuccessResponse, AxiosError>(
+export function usePostContents(
+  /**
+   * TData: 결과값
+   * TError
+   * TVariables: mutation variables
+   */
+  options: UseMutationOptions<
+    SuccessResponse,
+    AxiosError<unknown>,
+    WritingContentsRequest
+  >,
+) {
+  return useMutation<SuccessResponse, AxiosError, WritingContentsRequest>(
     '/services/writing_contents',
-    () => postWritingContents(contents),
+    postWritingContents,
+    {
+      retry: false,
+      ...options,
+    },
   );
 }
diff --git a/data/todo/todo.api.ts b/data/todo/todo.api.ts
diff --git a/data/todo/todo.hooks.ts b/data/todo/todo.hooks.ts
diff --git a/data/todo/todo.model.ts b/data/todo/todo.model.ts
diff --git a/pages/api/todo.ts b/pages/api/todo.ts
diff --git a/pages/writing.tsx b/pages/writing.tsx
@@ -20,31 +20,43 @@ const initialWriting: WritingContentsRequest = {
 };
 
 const Writing: NextPage = function () {
-  const [data, setData] = useState<WritingContentsRequest>(initialWriting);
+  const [writingContents, setWritingContents] =
+    useState<WritingContentsRequest>(initialWriting);
 
-  const mutation = usePostContents(data);
+  const {
+    data: response,
+    isLoading,
+    mutate,
+  } = usePostContents({
+    onSuccess() {
+      window.alert(response?.msg ?? '저장되었습니다!');
+    },
+    onError(error) {
+      console.error(error);
+    },
+  });
 
   const onTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
-    setData({ ...data, title: value });
+    setWritingContents({ ...writingContents, title: value });
   };
 
   const onContentsChange = (value: string) => {
-    setData({ ...data, contents: value });
+    setWritingContents({ ...writingContents, contents: value });
   };
 
   const onDescChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
-    setData({ ...data, introduction: value });
+    setWritingContents({ ...writingContents, introduction: value });
   };
 
   const onThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
-    setData({ ...data, thumbnail: value });
+    setWritingContents({ ...writingContents, thumbnail: value });
   };
 
   const onSubmit = () => {
-    mutation.mutate();
+    mutate(writingContents);
   };
 
   return (
@@ -91,11 +103,15 @@ const Writing: NextPage = function () {
             <Table.TableRow css={{ height: '600px' }}>
               <Table.TitleTd>{'내용'}</Table.TitleTd>
               <Table.ContentsTd>
-                <TextEditor value={data.contents} onChange={onContentsChange} />
+                <TextEditor
+                  value={writingContents.contents}
+                  onChange={onContentsChange}
+                />
               </Table.ContentsTd>
             </Table.TableRow>
           </tbody>
         </Table.Wrapper>
+        {isLoading && <div>Loading...</div>}
         <Box css={{ marginTop: '$sp-30' }}>
           <Button
             size="lg"