feat: (#275) 조기마감/게시글 삭제도 리액트 쿼리로 전환

frontend/src/api/post.ts

@@ -73,7 +73,7 @@ export const editPost = async (postId: number, updatedPost: FormData) => {
  return await multiPutFetch(`${BASE_URL}/posts/${postId}`, updatedPost);
 };
 
-export const removePost = async (postId: number) => {
+export const deletePost = async (postId: number) => {
  return await deleteFetch(`${BASE_URL}/posts/${postId}`);
 };
 

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

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deletePost } from '@api/post';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useDeletePost = (postId: number) => {
+ const queryClient = useQueryClient();
+
+ const { mutate, isError, error } = useMutation({
+ mutationFn: () => deletePost(postId),
+ onSuccess: () => {
+ queryClient.invalidateQueries([QUERY_KEY.POSTS]);
+ },
+ onError: error => {
+ window.console.log('게시물 삭제에 실패했습니다.', error);
+ },
+ });
+
+ return { mutate, isError, error };
+};

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

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { setEarlyClosePost } from '@api/post';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useEarlyClosePost = (postId: number) => {
+ const queryClient = useQueryClient();
+
+ const { mutate, isError, error } = useMutation({
+ mutationFn: () => setEarlyClosePost(postId),
+ onSuccess: () => {
+ queryClient.invalidateQueries([QUERY_KEY.POST_DETAIL, postId]);
+ },
+ onError: error => {
+ window.console.log('조기마감에 실패했습니다.', error);
+ },
+ });
+
+ return { mutate, isError, error };
+};

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

@@ -9,7 +9,7 @@ import { QUERY_KEY } from '@constants/queryKey';
 export const usePostDetail = (isGuest: boolean, postId: number) => {
  const fetchApi = isGuest ? getPostForGuest : getPost;
 
- const { data, isError, isLoading } = useQuery<PostInfo>(
+ const { data, isError, isLoading, error } = useQuery<PostInfo>(
  [QUERY_KEY.POST_DETAIL, postId],
  () => fetchApi(postId),
  {
@@ -22,5 +22,5 @@ export const usePostDetail = (isGuest: boolean, postId: number) => {
  }
  );
 
- return { data, isError, isLoading };
+ return { data, isError, isLoading, error };
 };

frontend/src/pages/post/PostDetail/BottomButtonPart/BottomButtonPart.stories.tsx

@@ -14,7 +14,7 @@ const handleEvent = {
  },
  controlPost: {
  setEarlyClosePost: () => {},
- removePost: () => {},
+ deletePost: () => {},
  reportPost: () => {},
  },
 };

frontend/src/pages/post/PostDetail/BottomButtonPart/index.tsx

@@ -3,7 +3,7 @@ import SquareButton from '@components/common/SquareButton';
 import * as S from './style';
 
 type MovePageEvent = 'moveWritePostPage' | 'moveVoteStatisticsPage' | 'movePostListPage';
-type ControlPostEvent = 'setEarlyClosePost' | 'removePost' | 'reportPost';
+type ControlPostEvent = 'setEarlyClosePost' | 'deletePost' | 'reportPost';
 
 interface PostDetailPageChildProps {
  isWriter: boolean;
@@ -20,7 +20,7 @@ export default function BottomButtonPart({
  handleEvent: { movePage, controlPost },
 }: PostDetailPageChildProps) {
  const { moveWritePostPage, moveVoteStatisticsPage } = movePage;
- const { setEarlyClosePost, removePost, reportPost } = controlPost;
+ const { setEarlyClosePost, deletePost, reportPost } = controlPost;
 
  return (
  <S.BottomButtonContainer>
@@ -36,7 +36,7 @@ export default function BottomButtonPart({
  <SquareButton theme="blank" onClick={moveWritePostPage}>
  수 정
  </SquareButton>
- <SquareButton theme="fill" onClick={removePost}>
+ <SquareButton theme="fill" onClick={deletePost}>
  삭 제
  </SquareButton>
  </>
@@ -45,7 +45,7 @@ export default function BottomButtonPart({
  <SquareButton theme="fill" onClick={moveVoteStatisticsPage}>
  통계보기
  </SquareButton>
- <SquareButton theme="fill" onClick={removePost}>
+ <SquareButton theme="fill" onClick={deletePost}>
  삭 제
  </SquareButton>
  </>

frontend/src/pages/post/PostDetail/InnerHeaderPart/InnerHeaderPart.stories.tsx

@@ -17,7 +17,7 @@ const handleEvent = {
  },
  controlPost: {
  setEarlyClosePost: () => {},
- removePost: () => {},
+ deletePost: () => {},
  reportPost: () => {},
  },
 };

frontend/src/pages/post/PostDetail/InnerHeaderPart/index.tsx

@@ -5,7 +5,7 @@ import TagButton from '@components/common/TagButton';
 import * as S from './style';
 
 type MovePageEvent = 'moveWritePostPage' | 'moveVoteStatisticsPage' | 'movePostListPage';
-type ControlPostEvent = 'setEarlyClosePost' | 'removePost' | 'reportPost';
+type ControlPostEvent = 'setEarlyClosePost' | 'deletePost' | 'reportPost';
 
 interface PostDetailPageChildProps {
  isWriter: boolean;
@@ -22,7 +22,7 @@ export default function InnerHeaderPart({
  handleEvent: { movePage, controlPost },
 }: PostDetailPageChildProps) {
  const { moveWritePostPage, moveVoteStatisticsPage, movePostListPage } = movePage;
- const { setEarlyClosePost, removePost, reportPost } = controlPost;
+ const { setEarlyClosePost, deletePost, reportPost } = controlPost;
 
  return (
  <>
@@ -33,7 +33,7 @@ export default function InnerHeaderPart({
  ) : !isClosed ? (
  <>
  <HeaderTextButton onClick={moveWritePostPage}>수정</HeaderTextButton>
- <HeaderTextButton onClick={removePost}>삭제</HeaderTextButton>
+ <HeaderTextButton onClick={deletePost}>삭제</HeaderTextButton>
  <S.TagButtonWrapper>
  <TagButton size="sm" onClick={setEarlyClosePost}>
  조기마감
@@ -42,7 +42,7 @@ export default function InnerHeaderPart({
  </>
  ) : (
  <>
- <HeaderTextButton onClick={removePost}>삭제</HeaderTextButton>
+ <HeaderTextButton onClick={deletePost}>삭제</HeaderTextButton>
  <S.TagButtonWrapper>
  <TagButton size="sm" onClick={moveVoteStatisticsPage}>
  통계보기

frontend/src/pages/post/PostDetail/index.tsx

@@ -3,10 +3,10 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { AuthContext } from '@hooks/context/auth';
 import { useCommentList } from '@hooks/query/comment/useCommentList';
+import { useDeletePost } from '@hooks/query/post/useDeletePost';
+import { useEarlyClosePost } from '@hooks/query/post/useEarlyClosePost';
 import { usePostDetail } from '@hooks/query/post/usePostDetail';
 
-import { removePost, setEarlyClosePost } from '@api/post';
-
 import CommentList from '@components/comment/CommentList';
 import Layout from '@components/common/Layout';
 import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader';
@@ -27,7 +27,14 @@ export default function PostDetailPage() {
  const { loggedInfo } = useContext(AuthContext);
  const memberId = loggedInfo.id;
 
- const { data: postData, isError, isLoading } = usePostDetail(!loggedInfo.isLoggedIn, postId);
+ const {
+ data: postData,
+ isLoading,
+ isError: isPostError,
+ error: postError,
+ } = usePostDetail(!loggedInfo.isLoggedIn, postId);
+ const { mutate: deletePost } = useDeletePost(postId);
+ const { mutate: earlyClosePost } = useEarlyClosePost(postId);
  const { data: commentData, isLoading: isCommentLoading } = useCommentList(postId);
 
  if (!postData) {
@@ -40,7 +47,7 @@ export default function PostDetailPage() {
  </S.HeaderContainer>
  <S.Container>
  {isLoading && 'loading'}
- {isError && 'error발생'}
+ {isPostError && postError instanceof Error && postError.message}
  </S.Container>
  </Layout>
  );
@@ -68,19 +75,12 @@ export default function PostDetailPage() {
  };
 
  const controlPost = {
- setEarlyClosePost: async () => {
- await setEarlyClosePost(postId)
- .then(res => {
- alert('게시물을 즉시마감했습니다.');
- })
- .catch(error => alert(error.message));
- },
- removePost: async () => {
+ setEarlyClosePost: earlyClosePost,
+ deletePost: () => {
  if (!isClosed) alert('마감된 게시물만 삭제 가능합니다.');
 
- await removePost(postId)
- .catch(error => alert(error.message))
- .then(res => alert('게시물을 삭제했습니다.'));
+ deletePost();
+ //추후 삭제가 되었을 때 nav로 홈으로 이동하도록 하기
  },
  reportPost: () => {
  //아직 api 논의하지 않음