feat: (#55) 글 작성 및 수정 관련 API, 커스텀 쿼리 훅 구현

frontend/src/api/jero/post.ts

@@ -0,0 +1,11 @@
+import { PostRequest } from '@type/post';
+
+import { putFetch, postFetch } from '@utils/fetch';
+
+export const createPost = async (newPost: PostRequest) => {
+ return await postFetch('/posts', newPost);
+};
+
+export const editPost = async (postId: number, updatedPost: PostRequest) => {
+ return await putFetch(`/posts/${postId}`, updatedPost);
+};

frontend/src/hooks/query/post/useCreatePost.ts

@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { PostRequest } from '@type/post';
+
+import { createPost } from '@api/jero/post';
+
+export const useCreatePost = () => {
+ const queryClient = useQueryClient();
+ const { mutate } = useMutation((post: PostRequest) => createPost(post), {
+ onSuccess: () => {
+ queryClient.invalidateQueries(['posts']);
+ },
+ onError: () => {
+ // mutate가 실패하면, 함수를 실행합니다.
+ window.console.log('createPost error');
+ },
+ });
+
+ return { mutate };
+};

frontend/src/hooks/query/post/useEditPost.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { PostRequest } from '@type/post';
+
+import { editPost } from '@api/jero/post';
+
+export const useEditPost = (postId: number) => {
+ const queryClient = useQueryClient();
+ const { mutate } = useMutation((updatedPost: PostRequest) => editPost(postId, updatedPost), {
+ onSuccess: () => {
+ queryClient.invalidateQueries(['posts', postId]);
+ },
+ onError: () => {
+ window.console.log('editPost error');
+ },
+ });
+
+ return { mutate };
+};