🐛 커뮤니티 게시글 수정 및 삭제 시 ISR revalidate 트리거 추가

Author: manNomi

apps/web/src/apis/community/deletePost.ts

@@ -3,27 +3,64 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
 import { useRouter } from "next/navigation";
 
+import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
 import { CommunityQueryKeys, communityApi, type DeletePostResponse } from "./api";
 
+interface DeletePostVariables {
+  postId: number;
+  boardCode?: string;
+}
+
+/**
+ * @description ISR 페이지를 revalidate하는 함수
+ * @param boardCode - 게시판 코드
+ * @param accessToken - 사용자 인증 토큰
+ */
+const revalidateCommunityPage = async (boardCode: string, accessToken: string) => {
+  try {
+    if (!accessToken) {
+      console.warn("Revalidation skipped: No access token available");
+      return;
+    }
+
+    await fetch("/api/revalidate", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({ boardCode }),
+    });
+  } catch (error) {
+    console.error("Revalidate failed:", error);
+  }
+};
+
 /**
  * @description 게시글 삭제를 위한 useMutation 커스텀 훅
  */
 const useDeletePost = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const { accessToken } = useAuthStore();
 
-  return useMutation<AxiosResponse<DeletePostResponse>, AxiosError, number>({
-    mutationFn: communityApi.deletePost,
-    onSuccess: () => {
+  return useMutation<AxiosResponse<DeletePostResponse>, AxiosError, DeletePostVariables>({
+    mutationFn: ({ postId }) => communityApi.deletePost(postId),
+    onSuccess: async (_result, variables) => {
       // 'posts' 쿼리 키를 가진 모든 쿼리를 무효화하여
       // 게시글 목록을 다시 불러오도록 합니다.
       queryClient.invalidateQueries({ queryKey: [CommunityQueryKeys.posts] });
 
+      // ISR 페이지 revalidate
+      if (variables.boardCode && accessToken) {
+        await revalidateCommunityPage(variables.boardCode, accessToken);
+      }
+
       toast.success("게시글이 성공적으로 삭제되었습니다.");
 
       // 게시글 목록 페이지 이동
-      router.replace("/community/FREE");
+      router.replace(`/community/${variables.boardCode || "FREE"}`);
     },
     onError: (error) => {
       console.error("게시글 삭제 실패:", error);

apps/web/src/apis/community/patchUpdatePost.ts

@@ -1,26 +1,60 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 
+import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
 import { CommunityQueryKeys, communityApi, type PostIdResponse, type PostUpdateRequest } from "./api";
 
 interface UpdatePostVariables {
   postId: number;
   data: PostUpdateRequest;
+  boardCode?: string;
 }
 
+/**
+ * @description ISR 페이지를 revalidate하는 함수
+ * @param boardCode - 게시판 코드
+ * @param accessToken - 사용자 인증 토큰
+ */
+const revalidateCommunityPage = async (boardCode: string, accessToken: string) => {
+  try {
+    if (!accessToken) {
+      console.warn("Revalidation skipped: No access token available");
+      return;
+    }
+
+    await fetch("/api/revalidate", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({ boardCode }),
+    });
+  } catch (error) {
+    console.error("Revalidate failed:", error);
+  }
+};
+
 /**
  * @description 게시글 수정을 위한 useMutation 커스텀 훅
  */
 const useUpdatePost = () => {
   const queryClient = useQueryClient();
+  const { accessToken } = useAuthStore();
 
   return useMutation<PostIdResponse, AxiosError, UpdatePostVariables>({
     mutationFn: ({ postId, data }) => communityApi.updatePost(postId, data),
-    onSuccess: (_result, variables) => {
+    onSuccess: async (_result, variables) => {
       // 해당 게시글 상세 쿼리와 목록 쿼리를 무효화
       queryClient.invalidateQueries({ queryKey: [CommunityQueryKeys.posts, variables.postId] });
       queryClient.invalidateQueries({ queryKey: [CommunityQueryKeys.posts] });
+
+      // ISR 페이지 revalidate
+      if (variables.boardCode && accessToken) {
+        await revalidateCommunityPage(variables.boardCode, accessToken);
+      }
+
       toast.success("게시글이 수정되었습니다.");
     },
     onError: (error) => {

apps/web/src/app/community/[boardCode]/[postId]/KebabMenu.tsx

@@ -113,7 +113,7 @@ const KebabMenu = ({ postId, boardCode, isOwner = false }: KebabMenuProps) => {
                   <button
                     onClick={() => {
                       if (confirm("정말로 삭제하시겠습니까?")) {
-                        deletePost(postId);
+                        deletePost({ postId, boardCode });
                       }
                     }}
                     className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-gray-700 typo-regular-2 hover:bg-k-50`}

apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx

@@ -63,6 +63,7 @@ const PostModifyForm = ({
     updatePostMutation.mutate(
       {
         postId,
+        boardCode,
         data: {
           postUpdateRequest: {
             postCategory: defaultPostCategory,