diff --git a/data/services/services.hooks.ts b/data/services/services.hooks.ts
index 6258dc5..0895cc8 100644
--- 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
deleted file mode 100644
index e935efa..0000000
--- a/data/todo/todo.api.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import axios from 'axios';
-import { Todo } from './todo.model';
-
-const ENDPOINT = '/api';
-
-export async function getTodos() {
-  const { data } = await axios.get<Todo[]>(`${ENDPOINT}/todo`);
-  return data;
-}
-
-export async function createTodo(requestBody: Todo) {
-  return axios.post<unknown>(`${ENDPOINT}/todo`, requestBody);
-}
-
-export async function updateTodo(requestBody: Todo) {
-  const response = await axios.put<unknown>(`${ENDPOINT}/todo`, requestBody);
-  return response;
-}
-
-export async function deleteTodo(data: { id: number }) {
-  const response = await axios.delete<unknown>(`${ENDPOINT}/todo`, {
-    data,
-  });
-  return response;
-}
diff --git a/data/todo/todo.hooks.ts b/data/todo/todo.hooks.ts
deleted file mode 100644
index 8495893..0000000
--- a/data/todo/todo.hooks.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  useQuery,
-  UseQueryOptions,
-  useMutation,
-  UseMutationOptions,
-} from 'react-query';
-import { AxiosResponse, AxiosError } from 'axios';
-
-import { Todo } from './todo.model';
-import { getTodos, createTodo, updateTodo, deleteTodo } from './todo.api';
-
-export function useTodoList(
-  /**
-   * @see https://github.com/tannerlinsley/react-query/discussions/1195
-   * query variables가 필요할 때
-   */
-  /**
-   * @see https://github.com/tannerlinsley/react-query/discussions/1477
-   * TQueryFnData : Query 함수의 반환 데이터
-   * TError: Query 함수의 에러 반환값
-   * TData: Query 함수의 최종 데이터
-   */
-  options:
-    | UseQueryOptions<Todo[], AxiosError<unknown>, Todo[]>
-    | undefined = {},
-) {
-  return useQuery<Todo[], AxiosError>('todos', getTodos, {
-    retry: 2,
-    ...options,
-  });
-}
-
-export function useCreateTodo(
-  /**
-   * TData: 결과값
-   * TError
-   * TVariables: mutation variables
-   */
-  options: UseMutationOptions<
-    AxiosResponse<unknown>,
-    AxiosError<unknown>,
-    Todo
-  >,
-) {
-  return useMutation<AxiosResponse<unknown>, AxiosError, Todo>(
-    'createTodo',
-    createTodo,
-    {
-      retry: false,
-      ...options,
-    },
-  );
-}
-
-export function useUpdateTodo(
-  options: UseMutationOptions<
-    AxiosResponse<unknown>,
-    AxiosError<unknown>,
-    Todo
-  >,
-) {
-  return useMutation<AxiosResponse<unknown>, AxiosError, Todo>(
-    'updateTodo',
-    updateTodo,
-    {
-      retry: false,
-      ...options,
-    },
-  );
-}
-
-export function useDeleteTodo(
-  options: UseMutationOptions<
-    AxiosResponse<unknown>,
-    AxiosError<unknown>,
-    { id: number }
-  >,
-) {
-  return useMutation<AxiosResponse<unknown>, AxiosError, { id: number }>(
-    'deleteTodo',
-    deleteTodo,
-    {
-      retry: false,
-      ...options,
-    },
-  );
-}
diff --git a/data/todo/todo.model.ts b/data/todo/todo.model.ts
deleted file mode 100644
index 21edaca..0000000
--- a/data/todo/todo.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type Todo = {
-  id: number;
-  text: string;
-  isDone: boolean;
-};
diff --git a/pages/api/todo.ts b/pages/api/todo.ts
deleted file mode 100644
index 66aadcb..0000000
--- a/pages/api/todo.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-
-type Todo = {
-  id: number;
-  text: string;
-  isDone: boolean;
-};
-
-let initialState: Todo[] = [
-  { id: 0, text: 'React-Query 스터디', isDone: false },
-  { id: 1, text: 'jest 스터디', isDone: false },
-  { id: 2, text: 'msw 스터디', isDone: false },
-];
-
-export default (req: NextApiRequest, res: NextApiResponse) => {
-  const { method, body } = req;
-
-  switch (req.method) {
-    case 'GET':
-      res.status(200).json(initialState);
-      break;
-    case 'POST':
-      initialState.push(body);
-      res.status(200).json({ message: 'create todo success' });
-      break;
-    case 'PUT':
-      initialState = initialState.map((todo) => {
-        if (todo.id === body.id) {
-          return {
-            ...todo,
-            ...body,
-          };
-        } else {
-          return todo;
-        }
-      });
-      res.status(200).json({ message: 'update todo success' });
-      break;
-    case 'DELETE':
-      initialState = initialState.filter((todo) => todo.id !== body.id);
-      res.status(200).json({ message: 'delete todo success' });
-      break;
-    default:
-      res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
-      res.status(405).end(`Method ${method} Not Allowed`);
-  }
-};
diff --git a/pages/writing.tsx b/pages/writing.tsx
index 094613b..0e5aae8 100644
--- 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"